feat: open mobile dashboard offline (#226)

frontend/index.html

@@ -55,6 +55,8 @@ textarea { resize: vertical; min-height: 120px; }
 .small { font-size: 12px; color: #94a3b8; }
 .status { display:inline-flex; gap:6px; align-items:center; }
 .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
+.offline-status { position:relative; z-index:19; padding:10px 16px; border-bottom:1px solid #f59e0b; background:#35210b; color:#fde68a; font-size:13px; text-align:center; }
+.offline-status[hidden] { display:none; }
 .widget { border: 1px solid #1b2d45; border-radius: 12px; padding: 10px; background: linear-gradient(180deg,#0f1d33,#0b1526); }
 .widget h3 { margin: 4px 0 8px; font-size: 13px; color: #7aa1c9; }
 .event { padding: 8px 0; border-bottom: 1px solid #1b2d45; }
@@ -273,6 +275,9 @@ textarea { resize: vertical; min-height: 120px; }
     <span class="small muted" id="clock"></span>
   </div>
 </header>
+<div class="offline-status" id="offline-status" role="status" aria-live="polite" hidden>
+  Offline · live Gitea data is unavailable. Saved drafts remain available on this device.
+</div>
 
 <main>
   <section class="panel my-work" id="my-work">
@@ -2989,6 +2994,20 @@ textarea { resize: vertical; min-height: 120px; }
   });
   function load() { return contextPoller.refresh(); }
 
+  const offlineStatus = qs('#offline-status');
+  function showOfflineStatus() {
+    offlineStatus.hidden = false;
+    setStatus('Offline');
+  }
+  function reconnectLiveData() {
+    offlineStatus.hidden = true;
+    setStatus('Reconnecting…');
+    contextPoller.refresh();
+  }
+  if (!navigator.onLine) showOfflineStatus();
+  window.addEventListener('offline', showOfflineStatus);
+  window.addEventListener('online', reconnectLiveData);
+
   qs('#refresh').addEventListener('click', load);
   qs('#start-work-session').addEventListener('click', () => {
     if (!filterMyWork(lastMyWork, selectedWorkFilter).length) {