feat: offline resilience and connection status

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/NavBar.vue

@@ -3,8 +3,10 @@ import { ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import PixelGlove from './PixelGlove.vue'
 import { useNostr } from '../composables/useNostr'
+import { useOnlineStatus } from '../composables/useOnlineStatus'
 
 const { bot, isLoggedIn } = useNostr()
+const { isOnline } = useOnlineStatus()
 const route = useRoute()
 const isMenuOpen = ref(false)
 
@@ -37,6 +39,11 @@ const bottomNav = [
         <span class="font-display font-black text-neon-pink text-lg tracking-widest glow-pink">
           BOTFIGHTS
         </span>
+        <span
+          class="w-2 h-2 rounded-full transition-colors"
+          :class="isOnline ? 'bg-green-400' : 'bg-red-400 animate-pulse'"
+          :title="isOnline ? 'Online' : 'Offline'"
+        />
       </RouterLink>
 
       <div class="hidden md:flex items-center gap-6">
@@ -100,6 +107,14 @@ const bottomNav = [
     </div>
   </nav>
 
+  <!-- Offline banner -->
+  <div
+    v-if="!isOnline"
+    class="fixed top-16 left-0 right-0 z-40 bg-red-500/90 backdrop-blur-sm text-center py-1.5 font-pixel text-[10px] text-white tracking-wider"
+  >
+    OFFLINE — RECONNECTING...
+  </div>
+
   <!-- Mobile bottom nav -->
   <nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-surface/95 backdrop-blur-md safe-area-bottom">
     <div class="flex items-stretch justify-around h-14">