Fix sticky reconnect banner and iOS browser detection

- Resolve `reconnectSSE()` on the first event of any kind on a fresh
  SSE stream, not only on `session:connected`. The server does not
  always re-emit `session:connected` on a reconnect for an already-
  known session, so live data was streaming through `handleSSEEvent`
  while the promise never resolved and the banner stuck indefinitely.
- Make `retryNow()` perform `health()` + `reconnectSSE()` immediately
  instead of going through the per-attempt `setTimeout`. The button
  now triggers the work synchronously; on failure it falls back to
  the scheduled exponential-backoff loop.
- Add a `visibilitychange` listener in `SSEClient` that resets the
  heartbeat timer when the page returns to the foreground. iOS WebKit
  coalesces fetch-stream chunks while a tab is backgrounded, which
  was tripping the 35 s heartbeat for backgrounded iPhone sessions
  even though the underlying TCP connection was healthy.
- Drive the reconnect-banner countdown from local state via
  `setInterval`, so the user sees actual seconds tick down instead of
  a frozen `1s` value.
- Replace `max-width: 100vw` with `max-width: 100%` on `html, body`.
  iOS Safari computes `100vw` against the layout viewport and can
  leak overflow during rubber-banding.
- Detect iOS first in `detectBrowser()` and return `'safari'` for any
  iOS browser. Chrome on iOS is a WebKit skin (UA contains both
  `CriOS/` and `Chrome/`), and was being routed through the Chromium
  Local Network Access path with a `targetAddressSpace` option that
  iOS silently ignores.

Addresses user reports on iPhone Chrome of: persistent "Connection
lost" banner during healthy streaming, unresponsive Retry Now button,
and missing Safari-specific mixed-content guidance.

Bumps eca-webview submodule for the related mobile chat-overflow and
trash-icon fixes.

🤖 Generated with [eca](https://eca.dev)

Co-Authored-By: eca-agent <git@eca.dev>

Author: ericdallo

eca-webview

@@ -38,6 +38,15 @@ export class SSEClient {
   private heartbeatTimer: ReturnType<typeof setTimeout> | null = null;
   private heartbeatTimeoutMs: number;
   private running = false;
+  /**
+   * Listener that resets the heartbeat timer when the page returns to the
+   * foreground. iOS WebKit (and Safari in low-power mode) coalesces fetch
+   * stream chunks while a tab is backgrounded, which can starve the
+   * heartbeat for tens of seconds even when the underlying TCP connection
+   * is healthy. Without this, switching back to the tab on iPhone reliably
+   * trips a false-positive disconnect.
+   */
+  private visibilityHandler: (() => void) | null = null;
 
   constructor(
     url: string,
@@ -81,6 +90,7 @@ export class SSEClient {
     }
 
     this.reader = response.body.getReader();
+    this.installVisibilityHandler();
     this.resetHeartbeatTimer();
     this.readLoop();
   }
@@ -94,12 +104,38 @@ export class SSEClient {
   /** Release resources without changing the `running` flag. */
   private cleanUp(): void {
     this.clearHeartbeatTimer();
+    this.removeVisibilityHandler();
     this.abortController?.abort();
     this.reader?.cancel().catch(() => {});
     this.reader = null;
     this.abortController = null;
   }
 
+  // ---------------------------------------------------------------------------
+  // Visibility (iOS background-tab tolerance)
+  // ---------------------------------------------------------------------------
+
+  private installVisibilityHandler(): void {
+    if (typeof document === 'undefined' || this.visibilityHandler) return;
+    this.visibilityHandler = () => {
+      if (this.running && !document.hidden) {
+        // Page returned to foreground. Reset the heartbeat clock so the
+        // backlog of throttled chunks can flush without us declaring the
+        // connection dead. Real disconnects will still trip the timer
+        // afterward because no chunks will arrive at all.
+        this.resetHeartbeatTimer();
+      }
+    };
+    document.addEventListener('visibilitychange', this.visibilityHandler);
+  }
+
+  private removeVisibilityHandler(): void {
+    if (this.visibilityHandler && typeof document !== 'undefined') {
+      document.removeEventListener('visibilitychange', this.visibilityHandler);
+    }
+    this.visibilityHandler = null;
+  }
+
   // ---------------------------------------------------------------------------
   // Heartbeat
   // ---------------------------------------------------------------------------

src/bridge/sse.ts

@@ -291,7 +291,10 @@ export class WebBridge {
 
   /**
    * Manually trigger a reconnection attempt (e.g. from a "Retry Now" button).
-   * Resets the attempt counter and starts a fresh reconnection cycle.
+   *
+   * Performs health check + SSE reconnect IMMEDIATELY (no per-attempt delay)
+   * so the user sees instant feedback. If it fails, falls back to the
+   * scheduled exponential-backoff loop.
    */
   retryNow(): void {
     if (this.disposed) return;
@@ -302,21 +305,62 @@ export class WebBridge {
       this.reconnectTimer = null;
     }
 
-    this.reconnectAttempt = 0;
+    this.reconnectAttempt = 1;
     this.reconnecting = true;
-    this.attemptReconnect();
+
+    // Show "reconnecting now" with no countdown — we are acting this very tick.
+    this.notifyReconnection({
+      status: 'reconnecting',
+      attempt: this.reconnectAttempt,
+      retryNow: () => this.retryNow(),
+    });
+
+    void (async () => {
+      try {
+        await this.api.health();
+        if (this.disposed) return;
+
+        await this.reconnectSSE();
+        if (this.disposed) return;
+
+        console.log('[Bridge] Reconnected via Retry Now');
+        this.reconnecting = false;
+        this.reconnectAttempt = 0;
+
+        await this.syncAfterReconnect();
+
+        this.notifyReconnection({
+          status: 'reconnected',
+          attempt: 0,
+        });
+      } catch (err) {
+        console.warn('[Bridge] Retry Now failed, falling back to scheduled reconnect:', err);
+        if (!this.disposed) {
+          // Reset to 0 so attemptReconnect's first scheduled try is attempt #1
+          this.reconnectAttempt = 0;
+          this.attemptReconnect();
+        }
+      }
+    })();
   }
 
   /**
    * Re-open the SSE stream (without the full connect() ceremony).
    * Rejects if the handshake times out or the connection fails.
+   *
+   * The handshake is considered successful as soon as the FIRST event of any
+   * kind arrives on the new stream — not just `session:connected`. The server
+   * does not always re-emit `session:connected` on a fresh /events connection
+   * for an already-known session; if we waited only for that, live data could
+   * stream through `handleSSEEvent` (so chat appears to be working) while the
+   * promise never resolved and the "Connection lost" banner stuck forever.
    */
   private reconnectSSE(): Promise<void> {
     return new Promise<void>((resolve, reject) => {
-      const timeout = setTimeout(
-        () => reject(new Error('SSE reconnect timeout')),
-        SSE_CONNECT_TIMEOUT_MS,
-      );
+      let resolved = false;
+      const timeout = setTimeout(() => {
+        if (!resolved) reject(new Error('SSE reconnect timeout'));
+      }, SSE_CONNECT_TIMEOUT_MS);
 
       // Disconnect old SSE if it still exists
       this.sse?.disconnect();
@@ -325,17 +369,23 @@ export class WebBridge {
         this.api.sseUrl(),
         this.api.authPassword,
         (event) => {
-          if (event.event === 'session:connected' && !this.connected) {
+          // First event on the new stream — promote to "connected" and resolve.
+          if (!resolved) {
+            resolved = true;
             clearTimeout(timeout);
-            this.handleSessionConnected(event);
             this.connected = true;
             resolve();
+          }
+
+          if (event.event === 'session:connected') {
+            this.handleSessionConnected(event);
           } else {
             this.handleSSEEvent(event);
           }
         },
         (error) => {
-          if (!this.connected) {
+          if (!resolved) {
+            resolved = true;
             clearTimeout(timeout);
             reject(error);
           } else {
@@ -354,8 +404,11 @@ export class WebBridge {
       );
 
       this.sse.connect().catch((err) => {
-        clearTimeout(timeout);
-        reject(err);
+        if (!resolved) {
+          resolved = true;
+          clearTimeout(timeout);
+          reject(err);
+        }
       });
     });
   }

src/bridge/transport.ts

@@ -19,9 +19,14 @@ export type BrowserKind = 'chrome' | 'firefox' | 'safari' | 'other';
  *
  * Order matters: Chrome's UA also contains "Safari", and many browsers
  * (Edge, Opera, Brave) contain "Chrome", which is fine — they all
- * inherit Chrome's LNA behaviour.
+ * inherit Chrome's LNA behaviour. iOS is special-cased FIRST because
+ * Apple requires every iOS browser (including Chrome — UA "CriOS/...
+ * Chrome/... Safari/...") to use the WebKit rendering engine. iOS
+ * Chrome therefore has zero LNA support and must be treated as Safari
+ * for mixed-content guidance.
  */
 export function detectBrowser(): BrowserKind {
+  if (isIosDevice()) return 'safari';
   const ua = navigator.userAgent;
   // All Chromium-based browsers (Chrome, Edge, Brave, Opera, Arc…)
   // include "Chrome/" in their UA and inherit LNA support.
@@ -32,6 +37,25 @@ export function detectBrowser(): BrowserKind {
   return 'other';
 }
 
+/**
+ * True when the current device is an iPhone, iPad, or iPod (regardless of
+ * which "browser" is running — they all use WebKit on Apple's platform).
+ *
+ * Also detects iPadOS 13+ "Desktop Mode", which advertises itself as
+ * macOS but exposes touch via `navigator.maxTouchPoints > 1` and runs
+ * on the WebKit engine.
+ */
+function isIosDevice(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const ua = navigator.userAgent;
+  if (/iPad|iPhone|iPod/.test(ua)) return true;
+  // iPadOS 13+ pretends to be macOS in its UA. Touch support + Apple
+  // vendor string is the official escape hatch.
+  return navigator.platform === 'MacIntel'
+    && typeof navigator.maxTouchPoints === 'number'
+    && navigator.maxTouchPoints > 1;
+}
+
 /** RFC 1918 private addresses (192.168.x, 10.x, 172.16-31.x). */
 const PRIVATE_NETWORK_RE =
   /^(192\.168\.|10\.|172\.(1[6-9]|2\d|3[01])\.)/i;

src/bridge/utils.ts

@@ -1,10 +1,16 @@
 /* Defensive viewport clip — prevents iOS Safari's horizontal rubber-band
  * if any descendant briefly overflows the viewport during reflow. The
  * webview's own overflow rules (pre, code, message wrappers) are the
- * primary fix; this is a belt-and-suspenders for the browser shell. */
+ * primary fix; this is a belt-and-suspenders for the browser shell.
+ *
+ * `max-width: 100%` (not `100vw`) on purpose: on iOS Safari `100vw` is
+ * computed against the layout viewport and excludes the visual-viewport
+ * inset from rubber-banding, so it can leak a fraction of a pixel of
+ * overflow on narrow phone screens. `100%` clamps to the actual containing
+ * block and behaves identically on desktop. */
 html,
 body {
-  max-width: 100vw;
+  max-width: 100%;
   overflow-x: hidden;
 }
 

src/components/AppLayout.css

@@ -230,13 +230,42 @@ function ReconnectionBanner({ state }: { state: ReconnectionState }) {
   }
 
   // --- Reconnecting ---
+  return <ReconnectingBannerBody state={state} />;
+}
+
+/**
+ * Reconnecting banner body — splits out so we can drive a real-time countdown
+ * via local state. The previous implementation rendered a static seconds value
+ * from props, so the user saw "1s" frozen for the full backoff window and the
+ * banner appeared dead even when reconnection was actively progressing.
+ */
+function ReconnectingBannerBody({ state }: { state: ReconnectionState }) {
+  const [remainingMs, setRemainingMs] = useState<number>(state.nextRetryMs ?? 0);
+
+  useEffect(() => {
+    if (!state.nextRetryMs || state.nextRetryMs <= 0) {
+      setRemainingMs(0);
+      return;
+    }
+    const start = Date.now();
+    const total = state.nextRetryMs;
+    setRemainingMs(total);
+    const interval = setInterval(() => {
+      const remaining = Math.max(0, total - (Date.now() - start));
+      setRemainingMs(remaining);
+      if (remaining <= 0) clearInterval(interval);
+    }, 250);
+    return () => clearInterval(interval);
+    // Re-run whenever a new attempt arrives (each schedule emits a fresh nextRetryMs)
+  }, [state.nextRetryMs, state.attempt]);
+
   return (
     <div className="reconnect-banner reconnect-banner--reconnecting">
       <div className="reconnect-banner__spinner" />
       <span className="reconnect-banner__text">
         Connection lost · Reconnecting
         {state.attempt > 1 ? ` (attempt ${state.attempt})` : ''}
-        {state.nextRetryMs ? ` · ${Math.ceil(state.nextRetryMs / 1000)}s` : '…'}
+        {remainingMs > 0 ? ` · ${Math.ceil(remainingMs / 1000)}s` : '…'}
       </span>
       {state.retryNow && (
         <button className="reconnect-banner__btn" onClick={state.retryNow}>