chore(offline): TEMPORARY network diagnostic panel (remove before release)

A fixed strip in the lobby showing live navigator.onLine / offline.active /
offline.auto / connection.online plus a timestamped event log (offline/online
events, poll ticks, checkReachable results, mode changes) - to pinpoint where the
auto-offline -> online transition breaks on the contour. A 1s heartbeat logs
navigator.onLine flips even if the events never fire. Skipped in the mock; to be
reverted with the fix.

ui/src/lib/app.svelte.ts

@@ -57,6 +57,7 @@ import {
 import type { CoachSeries } from './coachmark';
 import { connection, reportOffline, reportOnline, resetConnection, checkReachable } from './connection.svelte';
 import { offlineMode, setOfflineMode } from './offline.svelte';
+import { netlog } from './netdiag.svelte'; // TEMP diagnostic
 import { shouldBootOffline } from './offline';
 import { isConnectionCode } from './retry';
 import { clearGameCache, getCachedGame, setCachedGame } from './gamecache';
@@ -603,9 +604,15 @@ export function scheduleRecovery(delayMs: number): void {
     recoveryTimer = null;
     if (!offlineMode.active || !offlineMode.auto) return;
     const interfaceUp = typeof navigator === 'undefined' || navigator.onLine;
-    if (interfaceUp && (await checkReachable(BOOT_REACHABILITY_TIMEOUT_MS))) {
+    netlog(`poll tick: navOnline=${interfaceUp}`); // TEMP diagnostic
-      if (offlineMode.active && offlineMode.auto) setOfflineMode(false);
+    if (interfaceUp) {
-      return;
+      const reachable = await checkReachable(BOOT_REACHABILITY_TIMEOUT_MS);
+      netlog(`checkReachable=${reachable}`); // TEMP diagnostic
+      if (reachable && offlineMode.active && offlineMode.auto) {
+        setOfflineMode(false);
+        netlog('-> RETURNED ONLINE'); // TEMP diagnostic
+        return;
+      }
     }
     scheduleRecovery(4000);
   }, delayMs);
@@ -614,14 +621,17 @@ export function scheduleRecovery(delayMs: number): void {
 export function initNetworkReactivity(): void {
   if (typeof window === 'undefined' || import.meta.env.MODE === 'mock') return;
   window.addEventListener('offline', () => {
+    netlog(`offline EVENT (active=${offlineMode.active})`); // TEMP diagnostic
     if (!offlineMode.active) {
       setOfflineMode(true, false); // auto (session)
+      netlog('-> auto-offline; poll started'); // TEMP diagnostic
       scheduleRecovery(4000); // poll for the network to return
     }
   });
   // The online event, when it fires, just kicks an immediate reachability check; the poll above is
   // the reliable fallback for platforms where it does not fire.
   window.addEventListener('online', () => {
+    netlog(`online EVENT (active=${offlineMode.active} auto=${offlineMode.auto})`); // TEMP diagnostic
     if (offlineMode.active && offlineMode.auto) scheduleRecovery(0);
   });
 }

ui/src/lib/netdiag.svelte.ts

@@ -0,0 +1,38 @@
+// TEMPORARY network diagnostic — REMOVE before release. A live view of the online/offline signals so
+// we can pinpoint where the auto-offline -> online transition breaks. Rendered by a panel in
+// Lobby.svelte. Skipped in the mock build.
+
+let entries = $state<string[]>([]);
+let navOnline = $state(typeof navigator !== 'undefined' ? navigator.onLine : true);
+
+export const netdiag = {
+  /** entries is the newest-first ring buffer of timestamped diagnostic lines. */
+  get entries(): string[] {
+    return entries;
+  },
+  /** navOnline is the live navigator.onLine value (the property itself is not reactive). */
+  get navOnline(): boolean {
+    return navOnline;
+  },
+};
+
+/** netlog appends a timestamped diagnostic line (kept to the last 24). */
+export function netlog(msg: string): void {
+  const t = new Date().toLocaleTimeString();
+  entries = [`${t}  ${msg}`, ...entries].slice(0, 24);
+  if (typeof navigator !== 'undefined') navOnline = navigator.onLine;
+}
+
+// A 1 s heartbeat keeps navigator.onLine live in the panel and logs when it flips — so a flight-mode
+// toggle is visible even if the online/offline events never fire (the exact thing we are chasing).
+if (typeof window !== 'undefined' && import.meta.env.MODE !== 'mock') {
+  let last = typeof navigator !== 'undefined' ? navigator.onLine : true;
+  setInterval(() => {
+    const now = typeof navigator !== 'undefined' ? navigator.onLine : true;
+    navOnline = now;
+    if (now !== last) {
+      last = now;
+      netlog(`navigator.onLine -> ${now}`);
+    }
+  }, 1000);
+}

ui/src/screens/Lobby.svelte

@@ -6,6 +6,7 @@
   import Modal from '../components/Modal.svelte';
   import { app, handleError, refreshFeedbackBadge, seedChatUnread } from '../lib/app.svelte';
   import { connection } from '../lib/connection.svelte';
+  import { netdiag } from '../lib/netdiag.svelte'; // TEMP diagnostic
   import { gateway } from '../lib/gateway';
   import { navigate } from '../lib/router.svelte';
   import { t } from '../lib/i18n/index.svelte';
@@ -258,6 +259,15 @@
   }
 </script>
 
+<!-- TEMP network diagnostic — REMOVE before release. Fixed strip showing the live online/offline
+     signals + an event log, to pinpoint where the auto-offline -> online transition breaks. -->
+<div style="position:fixed;top:0;left:0;right:0;z-index:9999;background:rgba(0,0,0,0.88);color:#0f0;font:10px/1.35 monospace;padding:4px 6px;max-height:45vh;overflow-y:auto;pointer-events:none">
+  <div style="color:#fff;margin-bottom:3px">
+    nav.onLine={String(netdiag.navOnline)} · offline={String(offlineMode.active)} · auto={String(offlineMode.auto)} · conn.online={String(connection.online)}
+  </div>
+  {#each netdiag.entries as e, i (i)}<div style="white-space:nowrap">{e}</div>{/each}
+</div>
+
 <Screen title={app.profile?.displayName ?? t('app.title')}>
   <div class="lobby">
     {#if invitations.length}