feat: add reconnection detection and status message

- Update useConnectionStatus to accept onReconnect callback
- Detect connection state transitions (disconnected → connected)
- Track initial vs subsequent reconnections
- Add "Reconnected" status indicator state
- Show reconnection message for 2 seconds after reconnection
- Invalidate auth queries on reconnection
- Use useTimeout hook for auto-hiding reconnection message
- Batch UI updates with startTransition for stability

Users now see visual feedback when connection is restored.

Author: brandonkachen

cli/src/chat.tsx

@@ -13,6 +13,7 @@ import { useChatInput } from './hooks/use-chat-input'
 import { useClipboard } from './hooks/use-clipboard'
 import { useConnectionStatus } from './hooks/use-connection-status'
 import { useElapsedTime } from './hooks/use-elapsed-time'
+import { useTimeout } from './hooks/use-timeout'
 import { useExitHandler } from './hooks/use-exit-handler'
 import { useInputHistory } from './hooks/use-input-history'
 import { useKeyboardHandlers } from './hooks/use-keyboard-handlers'
@@ -33,6 +34,10 @@ import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { loadLocalAgents } from './utils/local-agent-registry'
 import { buildMessageTree } from './utils/message-tree-utils'
 import { getStatusIndicatorState, type AuthStatus } from './utils/status-indicator-state'
+import { authQueryKeys } from './hooks/use-auth-query'
+import { RECONNECTION_MESSAGE_DURATION_MS } from '@codebuff/sdk'
+import { useQueryClient } from '@tanstack/react-query'
+import { startTransition, useTransition } from 'react'
 import { computeInputLayoutMetrics } from './utils/text-layout'
 import { createMarkdownPalette } from './utils/theme-system'
 
@@ -81,6 +86,12 @@ export const Chat = ({
   const [hasOverflow, setHasOverflow] = useState(false)
   const hasOverflowRef = useRef(false)
 
+  const queryClient = useQueryClient()
+  const [, startUiTransition] = useTransition()
+
+  const [showReconnectionMessage, setShowReconnectionMessage] = useState(false)
+  const reconnectionTimeout = useTimeout()
+
   const { separatorWidth, terminalWidth, terminalHeight } =
     useTerminalDimensions()
 
@@ -191,7 +202,31 @@ export const Chat = ({
   const sendMessageRef = useRef<SendMessageFn>()
 
   const { statusMessage } = useClipboard()
-  const isConnected = useConnectionStatus()
+
+  const handleReconnection = useCallback(
+    (isInitialConnection: boolean) => {
+      // Invalidate auth queries so we refetch with current credentials
+      queryClient.invalidateQueries({ queryKey: authQueryKeys.all })
+
+      startUiTransition(() => {
+        if (!isInitialConnection) {
+          setShowReconnectionMessage(true)
+          reconnectionTimeout.setTimeout(
+            'reconnection-message',
+            () => {
+              startUiTransition(() => {
+                setShowReconnectionMessage(false)
+              })
+            },
+            RECONNECTION_MESSAGE_DURATION_MS,
+          )
+        }
+      })
+    },
+    [queryClient, reconnectionTimeout, startUiTransition],
+  )
+
+  const isConnected = useConnectionStatus(handleReconnection)
   const mainAgentTimer = useElapsedTime()
   const timerStartTime = mainAgentTimer.startTime
 
@@ -789,6 +824,7 @@ export const Chat = ({
     nextCtrlCWillExit,
     isConnected,
     authStatus,
+    showReconnectionMessage,
   })
   const hasStatusIndicatorContent = statusIndicatorState.kind !== 'idle'
   const inputBoxTitle = useMemo(() => {
@@ -933,6 +969,7 @@ export const Chat = ({
             authStatus={authStatus}
             isAtBottom={isAtBottom}
             scrollToLatest={scrollToLatest}
+            statusIndicatorState={statusIndicatorState}
           />
         )}
 

cli/src/components/status-bar.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '../hooks/use-theme'
 import { formatElapsedTime } from '../utils/format-elapsed-time'
 
 import type { StreamStatus } from '../hooks/use-message-queue'
-import type { AuthStatus } from '../utils/status-indicator-state'
+import type { AuthStatus, StatusIndicatorState } from '../utils/status-indicator-state'
 
 const SHIMMER_INTERVAL_MS = 160
 
@@ -19,6 +19,7 @@ interface StatusBarProps {
   authStatus: AuthStatus
   isAtBottom: boolean
   scrollToLatest: () => void
+  statusIndicatorState?: StatusIndicatorState
 }
 
 export const StatusBar = ({
@@ -30,6 +31,7 @@ export const StatusBar = ({
   authStatus,
   isAtBottom,
   scrollToLatest,
+  statusIndicatorState,
 }: StatusBarProps) => {
   const theme = useTheme()
   const [elapsedSeconds, setElapsedSeconds] = useState(0)
@@ -55,12 +57,64 @@ export const StatusBar = ({
   }, [timerStartTime, shouldShowTimer])
 
   const renderStatusIndicator = () => {
+    // Use the unified status indicator state if provided
+    if (statusIndicatorState) {
+      switch (statusIndicatorState.kind) {
+        case 'ctrlC':
+          return <span fg={theme.secondary}>Press Ctrl-C again to exit</span>
+        
+        case 'clipboard':
+          // Use green color for feedback success messages
+          const isFeedbackSuccess = statusIndicatorState.message.includes('Feedback sent')
+          return (
+            <span fg={isFeedbackSuccess ? theme.success : theme.primary}>
+              {statusIndicatorState.message}
+            </span>
+          )
+        
+        case 'reconnected':
+          return <span fg={theme.success}>Reconnected</span>
+        
+        case 'retrying':
+          return (
+            <ShimmerText
+              text="error, retrying..."
+              primaryColor={theme.warning}
+            />
+          )
+        
+        case 'connecting':
+          return <ShimmerText text="connecting..." />
+        
+        case 'waiting':
+          return (
+            <ShimmerText
+              text="thinking..."
+              interval={SHIMMER_INTERVAL_MS}
+              primaryColor={theme.secondary}
+            />
+          )
+        
+        case 'streaming':
+          return (
+            <ShimmerText
+              text="working..."
+              interval={SHIMMER_INTERVAL_MS}
+              primaryColor={theme.secondary}
+            />
+          )
+        
+        case 'idle':
+          return null
+      }
+    }
+
+    // Fallback to old logic if statusIndicatorState not provided
     if (nextCtrlCWillExit) {
       return <span fg={theme.secondary}>Press Ctrl-C again to exit</span>
     }
 
     if (statusMessage) {
-      // Use green color for feedback success messages
       const isFeedbackSuccess = statusMessage.includes('Feedback sent')
       return (
         <span fg={isFeedbackSuccess ? theme.success : theme.primary}>
@@ -69,7 +123,6 @@ export const StatusBar = ({
       )
     }
 
-    // Retryable server-side or transient network error: communicate that we're retrying
     if (authStatus === 'retrying') {
       return (
         <ShimmerText
@@ -79,7 +132,6 @@ export const StatusBar = ({
       )
     }
 
-    // Show connecting if service is disconnected OR auth service is unreachable
     if (!isConnected || authStatus === 'unreachable') {
       return <ShimmerText text="connecting..." />
     }

cli/src/hooks/use-connection-status.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { getCodebuffClient } from '../utils/codebuff-client'
 import { logger } from '../utils/logger'
@@ -36,10 +36,17 @@ export function getNextInterval(consecutiveSuccesses: number): number {
 /**
  * Hook to monitor connection status to the Codebuff backend.
  * Uses adaptive exponential backoff to reduce polling frequency when connection is stable.
+ *
+ * When the connection transitions from disconnected to connected, the optional
+ * onReconnect callback is invoked with a boolean indicating whether this was
+ * the initial connection (true) or a subsequent reconnection (false).
  */
-export const useConnectionStatus = () => {
-
+export const useConnectionStatus = (
+  onReconnect?: (isInitialConnection: boolean) => void,
+) => {
   const [isConnected, setIsConnected] = useState(true)
+  // null = never connected, false = was disconnected, true = was connected
+  const previousConnectedRef = useRef<boolean | null>(null)
 
   useEffect(() => {
     let isMounted = true
@@ -57,6 +64,7 @@ export const useConnectionStatus = () => {
       if (!client) {
         if (isMounted) {
           setIsConnected(false)
+          previousConnectedRef.current = false
           consecutiveSuccesses = 0
           currentInterval = HEALTH_CHECK_CONFIG.INITIAL_INTERVAL
           logger.debug(
@@ -72,9 +80,23 @@ export const useConnectionStatus = () => {
         const connected = await client.checkConnection()
         if (!isMounted) return
 
+        const prevConnected = previousConnectedRef.current
         setIsConnected(connected)
+        previousConnectedRef.current = connected
 
         if (connected) {
+          // Determine if this is the initial connection (null) or a reconnection (false)
+          const isInitialConnection = prevConnected === null
+          const shouldFireReconnectCallback =
+            typeof onReconnect === 'function' && prevConnected !== true
+
+          if (shouldFireReconnectCallback) {
+            logger.info(
+              { isInitialConnection },
+              'Reconnection detected, firing onReconnect callback',
+            )
+            onReconnect(isInitialConnection)
+          }
           consecutiveSuccesses++
           const newInterval = getNextInterval(consecutiveSuccesses)
 
@@ -94,6 +116,7 @@ export const useConnectionStatus = () => {
           scheduleNextCheck(currentInterval)
         } else {
           // Reset to fast polling on connection failure
+          previousConnectedRef.current = false
           consecutiveSuccesses = 0
           currentInterval = HEALTH_CHECK_CONFIG.INITIAL_INTERVAL
           logger.debug(
@@ -106,6 +129,7 @@ export const useConnectionStatus = () => {
         logger.debug({ error }, 'Connection check failed')
         if (isMounted) {
           setIsConnected(false)
+          previousConnectedRef.current = false
           consecutiveSuccesses = 0
           currentInterval = HEALTH_CHECK_CONFIG.INITIAL_INTERVAL
           scheduleNextCheck(currentInterval)

cli/src/utils/status-indicator-state.ts

@@ -8,6 +8,7 @@ export type StatusIndicatorState =
   | { kind: 'retrying' }
   | { kind: 'waiting' }
   | { kind: 'streaming' }
+  | { kind: 'reconnected' }
 
 export type AuthStatus = 'ok' | 'retrying' | 'unreachable'
 
@@ -17,6 +18,11 @@ export type StatusIndicatorStateArgs = {
   nextCtrlCWillExit: boolean
   isConnected: boolean
   authStatus?: AuthStatus
+  /**
+   * Whether to show a transient "Reconnected" status message.
+   * This should only be true for a short period after a reconnection event.
+   */
+  showReconnectionMessage?: boolean
 }
 
 /**
@@ -39,6 +45,7 @@ export const getStatusIndicatorState = ({
   nextCtrlCWillExit,
   isConnected,
   authStatus = 'ok',
+  showReconnectionMessage = false,
 }: StatusIndicatorStateArgs): StatusIndicatorState => {
   if (nextCtrlCWillExit) {
     return { kind: 'ctrlC' }
@@ -48,6 +55,11 @@ export const getStatusIndicatorState = ({
     return { kind: 'clipboard', message: statusMessage }
   }
 
+  // Transient reconnection indicator takes precedence over other status
+  if (showReconnectionMessage) {
+    return { kind: 'reconnected' }
+  }
+
   // If we're online but the auth request hit a retryable error and is auto-retrying,
   // surface that explicitly to the user.
   if (authStatus === 'retrying') {