fix(web-shell): hide planned SSE reconnect as Connection lost

packages/web-shell/client/App.tsx

@@ -197,7 +197,10 @@ import {
 import { mergeCommands } from './hooks/daemonSessionMappers';
 import { useAnimationFrameTranscriptBlocks } from './hooks/useAnimationFrameTranscriptBlocks';
 import { useBackgroundTasks } from './hooks/useBackgroundTasks';
-import { isSessionDisconnectedError } from './utils/sessionErrors';
+import {
+  isSessionDisconnectedError,
+  shouldSurfaceDaemonConnectionError,
+} from './utils/sessionErrors';
 import { useMessagesFromBlocks } from './hooks/useMessages';
 import { useSessionArtifacts } from './hooks/useSessionArtifacts';
 import { useShallowMemo, useStableArray } from './hooks/useShallowMemo';
@@ -7235,12 +7238,18 @@ export function App({
     onTranscriptChange?.(blocks);
   }, [blocks, onTranscriptChange]);
 
+  const connectionError = connection.error;
+  const connectionStatus = connection.status;
   useEffect(() => {
-    if (connection.error) {
-      const error = new Error(connection.error);
-      onError?.(error);
+    if (
+      shouldSurfaceDaemonConnectionError({
+        status: connectionStatus,
+        error: connectionError,
+      })
+    ) {
+      onError?.(new Error(connectionError));
     }
-  }, [connection.error, onError]);
+  }, [connectionError, connectionStatus, onError]);
 
   useLayoutEffect(() => {
     setCurrentModel(connection.currentModel ?? '');

packages/web-shell/client/components/ChatPane.test.tsx

@@ -1761,4 +1761,21 @@ describe('ChatPane', () => {
     expect(setApprovalMode).toHaveBeenCalledWith('yolo');
     expect(submitPermission).toHaveBeenCalledWith('perm-yolo', 'allow-1');
   });
+
+  it('does not show Connection lost for a planned SSE reconnect countdown', () => {
+    connectionState.status = 'disconnected';
+    connectionState.error = 'Reconnecting in 1000ms';
+    render();
+    expect(container!.querySelector('[role="alert"]')).toBeNull();
+    expect(container!.textContent).not.toContain('Connection lost');
+  });
+
+  it('shows Connection lost for a real connection error', () => {
+    connectionState.status = 'error';
+    connectionState.error = 'Unauthorized';
+    render();
+    const alert = container!.querySelector('[role="alert"]');
+    expect(alert?.textContent).toContain('Connection lost');
+    expect(alert?.textContent).toContain('Unauthorized');
+  });
 });

packages/web-shell/client/components/ChatPane.tsx

@@ -49,6 +49,7 @@ import type {
 } from '../hooks/useComposerCore';
 import { useQueuedPrompts } from '../hooks/useQueuedPrompts';
 import { isAskUserPermission } from '../utils/askUserPermission';
+import { shouldSurfaceDaemonConnectionError } from '../utils/sessionErrors';
 import { isDaemonApprovalMode } from '../utils/sessionPreparation';
 import { isVisibleComposerModel } from '../utils/composerModels';
 import { shouldBlockComposerSubmit } from '../utils/composerInputState';
@@ -956,7 +957,7 @@ export function ChatPane({
         </header>
       )}
 
-      {connection.error && (
+      {shouldSurfaceDaemonConnectionError(connection) && (
         <div className={styles.connectionError} role="alert">
           <span className={styles.connectionErrorText}>
             {t('splitView.paneConnectionError')}: {connection.error}

packages/web-shell/client/utils/sessionErrors.test.ts

@@ -1,5 +1,9 @@
 import { describe, expect, it } from 'vitest';
-import { isSessionDisconnectedError } from './sessionErrors';
+import {
+  isPlannedReconnectError,
+  isSessionDisconnectedError,
+  shouldSurfaceDaemonConnectionError,
+} from './sessionErrors';
 
 describe('isSessionDisconnectedError', () => {
   it('matches direct and wrapped disconnected-session errors', () => {
@@ -16,3 +20,40 @@ describe('isSessionDisconnectedError', () => {
     );
   });
 });
+
+describe('planned SSE reconnect errors', () => {
+  it('recognizes the autoReconnect backoff countdown', () => {
+    expect(isPlannedReconnectError('Reconnecting in 1000ms')).toBe(true);
+    expect(isPlannedReconnectError(new Error('Reconnecting in 1000ms'))).toBe(
+      true,
+    );
+    expect(isPlannedReconnectError('heartbeat lost')).toBe(false);
+  });
+
+  it('keeps real connection failures visible and hides planned reconnects', () => {
+    expect(
+      shouldSurfaceDaemonConnectionError({
+        status: 'disconnected',
+        error: 'Reconnecting in 1000ms',
+      }),
+    ).toBe(false);
+    expect(
+      shouldSurfaceDaemonConnectionError({
+        status: 'error',
+        error: 'Unauthorized',
+      }),
+    ).toBe(true);
+    expect(
+      shouldSurfaceDaemonConnectionError({
+        status: 'disconnected',
+        error: 'heartbeat lost',
+      }),
+    ).toBe(true);
+    expect(
+      shouldSurfaceDaemonConnectionError({
+        status: 'connecting',
+        error: 'Unauthorized',
+      }),
+    ).toBe(false);
+  });
+});

packages/web-shell/client/utils/sessionErrors.ts

@@ -4,3 +4,27 @@ export function isSessionDisconnectedError(error: unknown): boolean {
     error.message.endsWith('Daemon session is not connected')
   );
 }
+
+const PLANNED_RECONNECT_ERROR = /^Reconnecting in \d+ms$/u;
+
+export function isPlannedReconnectError(error: unknown): boolean {
+  const message =
+    typeof error === 'string'
+      ? error
+      : error instanceof Error
+        ? error.message
+        : undefined;
+  return message !== undefined && PLANNED_RECONNECT_ERROR.test(message);
+}
+
+export function shouldSurfaceDaemonConnectionError(connection: {
+  status: string;
+  error?: string;
+}): connection is { status: string; error: string } {
+  return (
+    typeof connection.error === 'string' &&
+    connection.error.length > 0 &&
+    connection.status !== 'connecting' &&
+    !isPlannedReconnectError(connection.error)
+  );
+}