refactor(cli): extract connection status hook and add state machine to StatusIndicator

- Extract useConnectionStatus hook into separate file with proper cleanup
- Add getStatusIndicatorState function with explicit state machine pattern
- Simplify StatusIndicator component logic using state-based rendering
- Update tests to use new architecture and test state function directly
- Add isConnected prop to StatusIndicator component

Author: brandonkachen

cli/src/chat.tsx

@@ -12,6 +12,7 @@ import {
 import {
   StatusIndicator,
   StatusElapsedTime,
+  getStatusIndicatorState,
 } from './components/status-indicator'
 import { SuggestionMenu } from './components/suggestion-menu'
 import { SLASH_COMMANDS } from './data/slash-commands'
@@ -32,6 +33,7 @@ import { useSuggestionMenuHandlers } from './hooks/use-suggestion-menu-handlers'
 import { useTerminalDimensions } from './hooks/use-terminal-dimensions'
 import { useTheme } from './hooks/use-theme'
 import { useValidationBanner } from './hooks/use-validation-banner'
+import { useConnectionStatus } from './hooks/use-connection-status'
 import { useChatStore } from './state/chat-store'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { formatQueuedPreview } from './utils/helpers'
@@ -212,6 +214,7 @@ export const Chat = ({
   const sendMessageRef = useRef<SendMessageFn>()
 
   const { clipboardMessage } = useClipboard()
+  const isConnected = useConnectionStatus()
   const mainAgentTimer = useElapsedTime()
   const timerStartTime = mainAgentTimer.startTime
 
@@ -566,19 +569,24 @@ export const Chat = ({
   const isMultilineInput = inputLayoutMetrics.heightLines > 1
   const shouldCenterInputVertically =
     !hasSuggestionMenu && !showAgentStatusLine && !isMultilineInput
+  const statusIndicatorState = getStatusIndicatorState({
+    clipboardMessage,
+    streamStatus,
+    nextCtrlCWillExit,
+    isConnected,
+  })
+  const hasStatusIndicatorContent = statusIndicatorState.kind !== 'idle'
+
   const shouldShowStatusLine =
-    streamStatus !== 'idle' ||
-    shouldShowQueuePreview ||
-    !isAtBottom ||
-    clipboardMessage != null ||
-    nextCtrlCWillExit
+    hasStatusIndicatorContent || shouldShowQueuePreview || !isAtBottom
 
   const statusIndicatorNode = (
     <StatusIndicator
       clipboardMessage={clipboardMessage}
       streamStatus={streamStatus}
       timerStartTime={timerStartTime}
       nextCtrlCWillExit={nextCtrlCWillExit}
+      isConnected={isConnected}
     />
   )
 

cli/src/components/__tests__/status-indicator.timer.test.tsx

@@ -1,34 +1,13 @@
-import {
-  describe,
-  test,
-  expect,
-  beforeEach,
-  afterEach,
-  mock,
-  spyOn,
-} from 'bun:test'
+import { describe, test, expect } from 'bun:test'
 import React from 'react'
 
 import { StatusIndicator, StatusElapsedTime } from '../status-indicator'
 
 import '../../state/theme-store' // Initialize theme store
 import { renderToStaticMarkup } from 'react-dom/server'
-
-import * as codebuffClient from '../../utils/codebuff-client'
-
+import { getStatusIndicatorState } from '../status-indicator'
 
 describe('StatusIndicator state transitions', () => {
-  let getClientSpy: ReturnType<typeof spyOn>
-
-  beforeEach(() => {
-    getClientSpy = spyOn(codebuffClient, 'getCodebuffClient').mockReturnValue({
-      checkConnection: mock(async () => true),
-    } as any)
-  })
-
-  afterEach(() => {
-    getClientSpy.mockRestore()
-  })
 
   describe('StatusIndicator text states', () => {
     test('shows "thinking..." when waiting for first response (streamStatus = waiting)', () => {
@@ -39,6 +18,7 @@ describe('StatusIndicator state transitions', () => {
           streamStatus="waiting"
           timerStartTime={now - 5000}
           nextCtrlCWillExit={false}
+          isConnected={true}
         />,
       )
 
@@ -59,6 +39,7 @@ describe('StatusIndicator state transitions', () => {
           streamStatus="streaming"
           timerStartTime={now - 5000}
           nextCtrlCWillExit={false}
+          isConnected={true}
         />,
       )
 
@@ -76,6 +57,7 @@ describe('StatusIndicator state transitions', () => {
           streamStatus="idle"
           timerStartTime={null}
           nextCtrlCWillExit={false}
+          isConnected={true}
         />,
       )
 
@@ -92,6 +74,7 @@ describe('StatusIndicator state transitions', () => {
           streamStatus="waiting"
           timerStartTime={now - 5000}
           nextCtrlCWillExit={true}
+          isConnected={true}
         />,
       )
 
@@ -109,6 +92,7 @@ describe('StatusIndicator state transitions', () => {
           streamStatus="waiting"
           timerStartTime={now - 12000}
           nextCtrlCWillExit={false}
+          isConnected={true}
         />,
       )
 
@@ -117,6 +101,35 @@ describe('StatusIndicator state transitions', () => {
     })
   })
 
+  describe('Connectivity states', () => {
+    test('shows "connecting..." shimmer when offline and idle', () => {
+      const markup = renderToStaticMarkup(
+        <StatusIndicator
+          clipboardMessage={null}
+          streamStatus="idle"
+          timerStartTime={null}
+          nextCtrlCWillExit={false}
+          isConnected={false}
+        />,
+      )
+
+      expect(markup).toContain('c')
+      expect(markup).toContain('o')
+      expect(markup).toContain('n')
+    })
+
+    test('getStatusIndicatorState reports connecting state when offline', () => {
+      const state = getStatusIndicatorState({
+        clipboardMessage: null,
+        streamStatus: 'idle',
+        nextCtrlCWillExit: false,
+        isConnected: false,
+      })
+
+      expect(state.kind).toBe('connecting')
+    })
+  })
+
   describe('StatusElapsedTime', () => {
     test('shows nothing initially (useEffect not triggered in static render)', () => {
       const now = Date.now()

cli/src/components/status-indicator.tsx

@@ -2,72 +2,85 @@ import React, { useEffect, useState } from 'react'
 
 import { ShimmerText } from './shimmer-text'
 import { useTheme } from '../hooks/use-theme'
-import { getCodebuffClient } from '../utils/codebuff-client'
 import { formatElapsedTime } from '../utils/format-elapsed-time'
 import type { StreamStatus } from '../hooks/use-message-queue'
 
-const useConnectionStatus = () => {
-  const [isConnected, setIsConnected] = useState(true)
+export type StatusIndicatorState =
+  | { kind: 'idle' }
+  | { kind: 'clipboard'; message: string }
+  | { kind: 'ctrlC' }
+  | { kind: 'connecting' }
+  | { kind: 'waiting' }
+  | { kind: 'streaming' }
 
-  useEffect(() => {
-    const checkConnection = async () => {
-      const client = getCodebuffClient()
-      if (!client) {
-        setIsConnected(false)
-        return
-      }
-
-      try {
-        const connected = await client.checkConnection()
-        setIsConnected(connected)
-      } catch (error) {
-        setIsConnected(false)
-      }
-    }
+export type StatusIndicatorStateArgs = {
+  clipboardMessage?: string | null
+  streamStatus: StreamStatus
+  nextCtrlCWillExit: boolean
+  isConnected: boolean
+}
+
+export const getStatusIndicatorState = ({
+  clipboardMessage,
+  streamStatus,
+  nextCtrlCWillExit,
+  isConnected,
+}: StatusIndicatorStateArgs): StatusIndicatorState => {
+  if (nextCtrlCWillExit) {
+    return { kind: 'ctrlC' }
+  }
+
+  if (clipboardMessage) {
+    return { kind: 'clipboard', message: clipboardMessage }
+  }
 
-    checkConnection()
+  if (!isConnected) {
+    return { kind: 'connecting' }
+  }
 
-    const interval = setInterval(checkConnection, 30000)
+  if (streamStatus === 'waiting') {
+    return { kind: 'waiting' }
+  }
 
-    return () => clearInterval(interval)
-  }, [])
+  if (streamStatus === 'streaming') {
+    return { kind: 'streaming' }
+  }
 
-  return isConnected
+  return { kind: 'idle' }
+}
+
+type StatusIndicatorProps = StatusIndicatorStateArgs & {
+  timerStartTime: number | null
 }
 
 export const StatusIndicator = ({
   clipboardMessage,
   streamStatus,
   timerStartTime,
   nextCtrlCWillExit,
-}: {
-  clipboardMessage?: string | null
-  streamStatus: StreamStatus
-  timerStartTime: number | null
-  nextCtrlCWillExit: boolean
-}) => {
+  isConnected,
+}: StatusIndicatorProps) => {
   const theme = useTheme()
-  const isConnected = useConnectionStatus()
-
-  if (nextCtrlCWillExit) {
+  const state = getStatusIndicatorState({
+    clipboardMessage,
+    streamStatus,
+    nextCtrlCWillExit,
+    isConnected,
+  })
+
+  if (state.kind === 'ctrlC') {
     return <span fg={theme.secondary}>Press Ctrl-C again to exit</span>
   }
 
-  if (clipboardMessage) {
-    return <span fg={theme.primary}>{clipboardMessage}</span>
-  }
-
-  const hasStatus = isConnected === false || streamStatus !== 'idle'
-
-  if (!hasStatus) {
-    return null
+  if (state.kind === 'clipboard') {
+    return <span fg={theme.primary}>{state.message}</span>
   }
 
-  if (isConnected === false) {
+  if (state.kind === 'connecting') {
     return <ShimmerText text="connecting..." />
   }
 
-  if (streamStatus === 'waiting') {
+  if (state.kind === 'waiting') {
     return (
       <ShimmerText
         text="thinking..."
@@ -77,7 +90,7 @@ export const StatusIndicator = ({
     )
   }
 
-  if (streamStatus === 'streaming') {
+  if (state.kind === 'streaming') {
     return (
       <ShimmerText
         text="working..."
@@ -126,4 +139,3 @@ export const StatusElapsedTime = ({
 
   return <span fg={theme.secondary}>{formatElapsedTime(elapsedSeconds)}</span>
 }
-

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

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react'
+
+import { getCodebuffClient } from '../utils/codebuff-client'
+
+export const useConnectionStatus = () => {
+  const [isConnected, setIsConnected] = useState(true)
+
+  useEffect(() => {
+    let isMounted = true
+
+    const checkConnection = async () => {
+      const client = getCodebuffClient()
+      if (!client) {
+        if (isMounted) {
+          setIsConnected(false)
+        }
+        return
+      }
+
+      try {
+        const connected = await client.checkConnection()
+        if (isMounted) {
+          setIsConnected(connected)
+        }
+      } catch {
+        if (isMounted) {
+          setIsConnected(false)
+        }
+      }
+    }
+
+    checkConnection()
+    const interval = setInterval(checkConnection, 30000)
+
+    return () => {
+      isMounted = false
+      clearInterval(interval)
+    }
+  }, [])
+
+  return isConnected
+}