Add graceful auto-reconnection on connection loss

When the SSE connection drops (network instability, Tailscale VPN
reconnect, server restart), the bridge now automatically attempts to
re-establish the connection with exponential backoff (1s → 2s → 4s →
up to 15s). The webview stays mounted during reconnection so chat
history is preserved.

UI changes:
- Non-intrusive reconnection banner slides in at the top of the session
  showing attempt count and retry countdown
- Banner turns green and slides away on successful reconnect
- Connection tab dot pulses orange during reconnection
- No user interaction required — fully automatic recovery

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

Co-Authored-By: eca <noreply@eca.dev>

Author: ericdallo

src/bridge/sse.ts

@@ -53,8 +53,14 @@ export class SSEClient {
     this.heartbeatTimeoutMs = options.heartbeatTimeoutMs ?? DEFAULT_HEARTBEAT_TIMEOUT_MS;
   }
 
-  /** Open the SSE stream. Throws if the initial HTTP request fails. */
+  /**
+   * Open the SSE stream. Throws if the initial HTTP request fails.
+   * Safe to call again after a `disconnect()` — resets internal state first.
+   */
   async connect(): Promise<void> {
+    // Clean up any leftover state from a previous connection
+    this.cleanUp();
+
     this.running = true;
     this.abortController = new AbortController();
 
@@ -79,10 +85,16 @@ export class SSEClient {
   /** Cleanly close the SSE stream. Safe to call multiple times. */
   disconnect(): void {
     this.running = false;
+    this.cleanUp();
+  }
+
+  /** Release resources without changing the `running` flag. */
+  private cleanUp(): void {
     this.clearHeartbeatTimer();
     this.abortController?.abort();
     this.reader?.cancel().catch(() => {});
     this.reader = null;
+    this.abortController = null;
   }
 
   // ---------------------------------------------------------------------------

src/bridge/transport.ts

@@ -27,6 +27,8 @@ import type {
   ChatListChangeCallback,
   ChatSummary,
   MCPServerUpdatedParams,
+  ReconnectionCallback,
+  ReconnectionState,
   SessionConfig,
   SessionState,
   SSEChatStatusPayload,
@@ -38,6 +40,11 @@ import type {
 /** Timeout for the initial SSE handshake (session:connected). */
 const SSE_CONNECT_TIMEOUT_MS = 15_000;
 
+/** Base delay between reconnection attempts (exponential backoff). */
+const RECONNECT_BASE_DELAY_MS = 1_000;
+/** Maximum delay between reconnection attempts. */
+const RECONNECT_MAX_DELAY_MS = 15_000;
+
 export class WebBridge {
   private api: EcaRemoteApi;
   private sse: SSEClient | null = null;
@@ -47,6 +54,14 @@ export class WebBridge {
   private outboundListener: ((e: Event) => void) | null = null;
   private mcpServers: MCPServerUpdatedParams[] = [];
 
+  // --- Reconnection state ---
+  private reconnecting = false;
+  private reconnectAttempt = 0;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private onReconnectionChange: ReconnectionCallback | null = null;
+  /** Set to true once the bridge has successfully connected at least once. */
+  private hasConnectedOnce = false;
+
   /**
    * Lightweight chat index exposed to the React shell for the sidebar.
    * Kept in sync as chat events flow through the bridge.
@@ -106,13 +121,15 @@ export class WebBridge {
     await this.connectSSE();
     if (this.disposed) return;
 
+    this.hasConnectedOnce = true;
     this.registerOutboundHandler();
     this.registerTransport();
   }
 
   disconnect(): void {
     this.disposed = true;
     this.connected = false;
+    this.cleanUpReconnect();
     this.sse?.disconnect();
     this.sse = null;
     window.__ecaWebTransport = undefined;
@@ -127,6 +144,181 @@ export class WebBridge {
     return this.connected;
   }
 
+  /** Whether the bridge is currently attempting to reconnect. */
+  isReconnecting(): boolean {
+    return this.reconnecting;
+  }
+
+  /** Register a callback for reconnection state changes. */
+  onReconnection(cb: ReconnectionCallback): void {
+    this.onReconnectionChange = cb;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Auto-reconnection
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Attempt to re-establish the SSE connection with exponential backoff.
+   *
+   * Called automatically when an established SSE connection drops
+   * (heartbeat timeout, stream end, network error). Does NOT fire for
+   * initial connection failures — those are surfaced to the caller of
+   * `connect()` directly.
+   *
+   * During reconnection the webview stays mounted with its full chat
+   * history; only the live SSE stream is re-opened.
+   */
+  private scheduleReconnect(): void {
+    if (this.disposed || this.reconnecting) return;
+    this.reconnecting = true;
+    this.reconnectAttempt = 0;
+    this.attemptReconnect();
+  }
+
+  private attemptReconnect(): void {
+    if (this.disposed) {
+      this.cleanUpReconnect();
+      return;
+    }
+
+    this.reconnectAttempt++;
+    const delay = Math.min(
+      RECONNECT_BASE_DELAY_MS * Math.pow(2, this.reconnectAttempt - 1),
+      RECONNECT_MAX_DELAY_MS,
+    );
+
+    console.log(
+      `[Bridge] Reconnect attempt #${this.reconnectAttempt} in ${delay}ms`,
+    );
+
+    this.notifyReconnection({
+      status: 'reconnecting',
+      attempt: this.reconnectAttempt,
+      nextRetryMs: delay,
+    });
+
+    this.reconnectTimer = setTimeout(async () => {
+      if (this.disposed) {
+        this.cleanUpReconnect();
+        return;
+      }
+
+      try {
+        // Quick health check first — fail fast if server is unreachable
+        await this.api.health();
+        if (this.disposed) return;
+
+        // Re-open SSE
+        await this.reconnectSSE();
+        if (this.disposed) return;
+
+        // Success!
+        console.log(`[Bridge] Reconnected after ${this.reconnectAttempt} attempt(s)`);
+        this.reconnecting = false;
+        this.reconnectAttempt = 0;
+
+        // Re-sync server state with the webview
+        await this.syncAfterReconnect();
+
+        this.notifyReconnection({
+          status: 'reconnected',
+          attempt: this.reconnectAttempt,
+        });
+      } catch (err) {
+        console.warn('[Bridge] Reconnect attempt failed:', err);
+        if (!this.disposed) {
+          this.attemptReconnect();
+        }
+      }
+    }, delay);
+  }
+
+  /**
+   * Re-open the SSE stream (without the full connect() ceremony).
+   * Rejects if the handshake times out or the connection fails.
+   */
+  private reconnectSSE(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(
+        () => reject(new Error('SSE reconnect timeout')),
+        SSE_CONNECT_TIMEOUT_MS,
+      );
+
+      // Disconnect old SSE if it still exists
+      this.sse?.disconnect();
+
+      this.sse = new SSEClient(
+        this.api.sseUrl(),
+        this.api.authPassword,
+        (event) => {
+          if (event.event === 'session:connected' && !this.connected) {
+            clearTimeout(timeout);
+            this.handleSessionConnected(event);
+            this.connected = true;
+            resolve();
+          } else {
+            this.handleSSEEvent(event);
+          }
+        },
+        (error) => {
+          if (!this.connected) {
+            clearTimeout(timeout);
+            reject(error);
+          } else {
+            console.error('[Bridge] SSE error:', error);
+          }
+        },
+        () => {
+          console.warn('[Bridge] SSE disconnected');
+          this.connected = false;
+          this.dispatch('server/statusChanged', 'Stopped');
+          this.scheduleReconnect();
+        },
+      );
+
+      this.sse.connect().catch((err) => {
+        clearTimeout(timeout);
+        reject(err);
+      });
+    });
+  }
+
+  /**
+   * After a successful reconnect, refresh session config and re-dispatch
+   * a "Running" status so the webview knows the server is back.
+   */
+  private async syncAfterReconnect(): Promise<void> {
+    if (!this.sessionState) return;
+
+    // Re-dispatch workspace and config in case the server restarted
+    if (this.sessionState.workspaceFolders) {
+      this.dispatch('server/setWorkspaceFolders', this.sessionState.workspaceFolders);
+    }
+    if (this.sessionState.config) {
+      this.dispatch('config/updated', this.sessionState.config);
+    }
+    if (this.sessionState.mcpServers) {
+      this.mcpServers = [...this.sessionState.mcpServers];
+      this.dispatch('tool/serversUpdated', this.mcpServers);
+    }
+    this.dispatch('server/setTrust', this.sessionState.trust ?? false);
+    this.dispatch('server/statusChanged', 'Running');
+  }
+
+  private notifyReconnection(state: ReconnectionState): void {
+    this.onReconnectionChange?.(state);
+  }
+
+  private cleanUpReconnect(): void {
+    this.reconnecting = false;
+    this.reconnectAttempt = 0;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // Chat list API (for the sidebar)
   // ---------------------------------------------------------------------------
@@ -220,6 +412,11 @@ export class WebBridge {
           console.warn('[Bridge] SSE disconnected');
           this.connected = false;
           this.dispatch('server/statusChanged', 'Stopped');
+
+          // Auto-reconnect if this was a previously-established connection
+          if (this.hasConnectedOnce && !this.disposed) {
+            this.scheduleReconnect();
+          }
         },
       );
 

src/bridge/types.ts

@@ -291,6 +291,22 @@ export interface ChatEntry {
 /** Callback signature for chat list change notifications. */
 export type ChatListChangeCallback = (chats: ChatEntry[], selectedChatId: string | null) => void;
 
+// ---------------------------------------------------------------------------
+// Reconnection types
+// ---------------------------------------------------------------------------
+
+/** State emitted by the bridge during auto-reconnection attempts. */
+export interface ReconnectionState {
+  status: 'reconnecting' | 'reconnected' | 'failed';
+  /** Current attempt number (1-based). */
+  attempt: number;
+  /** Milliseconds until the next retry (only while status === 'reconnecting'). */
+  nextRetryMs?: number;
+}
+
+/** Callback signature for reconnection state changes. */
+export type ReconnectionCallback = (state: ReconnectionState) => void;
+
 // ---------------------------------------------------------------------------
 // Webview dispatch types (bridge → webview via postMessage)
 // ---------------------------------------------------------------------------

src/pages/ConnectionBar.tsx

@@ -95,9 +95,10 @@ function formatHost(host: string): string {
 /** Map connection status to a CSS dot class. */
 function dotClass(status: ConnectionEntry['status']): string {
   switch (status) {
-    case 'connected':  return 'dot-connected';
-    case 'connecting': return 'dot-connecting';
-    case 'error':      return 'dot-error';
-    default:           return 'dot-idle';
+    case 'connected':    return 'dot-connected';
+    case 'connecting':   return 'dot-connecting';
+    case 'reconnecting': return 'dot-reconnecting';
+    case 'error':        return 'dot-error';
+    default:             return 'dot-idle';
   }
 }

src/pages/RemoteProduct.css

@@ -95,6 +95,11 @@
   animation: dot-pulse 1s ease-in-out infinite;
 }
 
+.dot-reconnecting {
+  background: #ffaa32;
+  animation: dot-pulse 1s ease-in-out infinite;
+}
+
 .dot-error {
   background: #f14c4c;
 }