refactor(cli): improve elapsed time tracking with imperative hooks

- Transform useElapsedTime to imperative API with start/stop methods -
Add useElapsedTimeFrom for declarative backward compatibility - Simplify
StatusIndicator props from isProcessing+showThinking to isActive -
Replace mainAgentStreamStartTime state with mainAgentTimer tracker -
Update useSendMessage to use timer.start/stop methods - Add tests for
new timer interface

Author: brandonkachen

cli/src/chat.tsx

@@ -27,6 +27,7 @@ import { SLASH_COMMANDS } from './data/slash-commands'
 import { useAgentValidation } from './hooks/use-agent-validation'
 import { useAuthQuery, useLogoutMutation } from './hooks/use-auth-query'
 import { useClipboard } from './hooks/use-clipboard'
+import { useElapsedTime } from './hooks/use-elapsed-time'
 import { useInputHistory } from './hooks/use-input-history'
 import { useKeyboardHandlers } from './hooks/use-keyboard-handlers'
 import { useLogo } from './hooks/use-logo'
@@ -470,9 +471,8 @@ export const App = ({
 
   const { clipboardMessage } = useClipboard()
 
-  // Track main agent streaming start time for elapsed time display
-  const [mainAgentStreamStartTime, setMainAgentStreamStartTime] =
-    useState<number | null>(null)
+  // Track main agent streaming elapsed time
+  const mainAgentTimer = useElapsedTime()
 
 
   const agentRefsMap = useRef<Map<string, any>>(new Map())
@@ -829,7 +829,7 @@ export const App = ({
     abortControllerRef,
     agentId,
     onBeforeMessageSend: validateAgents,
-    setMainAgentStreamStartTime,
+    mainAgentTimer,
     scrollToLatest,
     availableWidth: separatorWidth,
   })
@@ -852,13 +852,12 @@ export const App = ({
     return undefined
   }, [initialPrompt, agentMode])
 
-  // Show thinking indicator even after waiting ends if we're still streaming
-  const showThinking = isStreaming && !isWaitingForResponse
+  // Status is active when waiting for response or streaming
+  const isStatusActive = isWaitingForResponse || isStreaming
   const hasStatus = useHasStatus(
-    isWaitingForResponse,
+    isStatusActive,
     clipboardMessage,
-    showThinking,
-    mainAgentStreamStartTime,
+    mainAgentTimer.startTime,
   )
 
   const handleSubmit = useCallback(() => {
@@ -989,7 +988,7 @@ export const App = ({
     collapsedAgents,
     streamingAgents,
     isWaitingForResponse,
-    streamStartTime: mainAgentStreamStartTime,
+    streamStartTime: mainAgentTimer.startTime,
     setCollapsedAgents,
     setFocusedAgentId,
     registerAgentRef,
@@ -1014,11 +1013,10 @@ export const App = ({
 
   const statusIndicatorNode = (
     <StatusIndicator
-      isProcessing={isWaitingForResponse}
       theme={theme}
       clipboardMessage={clipboardMessage}
-      showThinking={showThinking}
-      streamStartTime={mainAgentStreamStartTime}
+      isActive={isStatusActive}
+      streamStartTime={mainAgentTimer.startTime}
     />
   )
 

cli/src/components/message-block.tsx

@@ -4,7 +4,7 @@ import React, { type ReactNode } from 'react'
 import { pluralize } from '@codebuff/common/util/string'
 
 import { BranchItem } from './branch-item'
-import { useElapsedTime } from '../hooks/use-elapsed-time'
+import { useElapsedTimeFrom } from '../hooks/use-elapsed-time'
 import { getToolDisplayInfo } from '../utils/codebuff-client'
 import {
   renderMarkdown,
@@ -70,7 +70,7 @@ export const MessageBlock = ({
   registerAgentRef,
 }: MessageBlockProps): ReactNode => {
   // Calculate elapsed time for streaming AI messages
-  const elapsedSeconds = useElapsedTime(
+  const elapsedSeconds = useElapsedTimeFrom(
     isAi && isLoading && !isComplete ? streamStartTime : null,
   )
   const computeBranchChar = (indentLevel: number, isLastBranch: boolean) =>

cli/src/components/status-indicator.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
 import { ShimmerText } from './shimmer-text'
-import { useElapsedTime } from '../hooks/use-elapsed-time'
+import { useElapsedTimeFrom } from '../hooks/use-elapsed-time'
 import { getCodebuffClient } from '../utils/codebuff-client'
 import { logger } from '../utils/logger'
 
@@ -37,26 +37,25 @@ const useConnectionStatus = () => {
 }
 
 export const StatusIndicator = ({
-  isProcessing,
   theme,
   clipboardMessage,
-  showThinking = false,
+  isActive = false,
   streamStartTime,
 }: {
-  isProcessing: boolean
   theme: ChatTheme
   clipboardMessage?: string | null
-  showThinking?: boolean
+  isActive?: boolean
   streamStartTime?: number | null
 }) => {
   const isConnected = useConnectionStatus()
-  const elapsedSeconds = useElapsedTime(streamStartTime)
+  // Use declarative hook to isolate re-renders to this component
+  const elapsedSeconds = useElapsedTimeFrom(streamStartTime)
 
   if (clipboardMessage) {
     return <span fg={theme.statusAccent}>{clipboardMessage}</span>
   }
 
-  const hasStatus = isConnected === false || isProcessing || showThinking
+  const hasStatus = isConnected === false || isActive
 
   if (!hasStatus) {
     return null
@@ -66,9 +65,9 @@ export const StatusIndicator = ({
     return <ShimmerText text="connecting..." />
   }
 
-  if (isProcessing || showThinking) {
-    // If we have a stream start time and elapsed > 0, show elapsed time
-    if (streamStartTime && elapsedSeconds > 0) {
+  if (isActive) {
+    // If we have elapsed time > 0, show it
+    if (elapsedSeconds > 0) {
       return (
         <span fg={theme.statusSecondary}>
           {elapsedSeconds}s
@@ -90,17 +89,15 @@ export const StatusIndicator = ({
 }
 
 export const useHasStatus = (
-  isProcessing: boolean,
+  isActive: boolean,
   clipboardMessage?: string | null,
-  showThinking?: boolean,
   streamStartTime?: number | null,
 ): boolean => {
   const isConnected = useConnectionStatus()
   return (
     isConnected === false ||
-    isProcessing ||
+    isActive ||
     !!clipboardMessage ||
-    !!showThinking ||
     !!streamStartTime
   )
 }

cli/src/hooks/__tests__/use-send-message-timer.test.ts

@@ -102,7 +102,12 @@ describe('useSendMessage timer', () => {
         setIsStreaming: mockSetIsStreaming,
         setCanProcessQueue: mockSetCanProcessQueue,
         abortControllerRef,
-        setMainAgentStreamStartTime: mockSetMainAgentStreamStartTime,
+        mainAgentTimer: {
+          start: mockSetMainAgentStreamStartTime.bind(null, Date.now()),
+          stop: mockSetMainAgentStreamStartTime.bind(null, null),
+          elapsedSeconds: 0,
+          startTime: null,
+        },
         scrollToLatest: mockScrollToLatest,
         availableWidth: 80,
       }),
@@ -160,7 +165,12 @@ describe('useSendMessage timer', () => {
         setIsStreaming: mockSetIsStreaming,
         setCanProcessQueue: mockSetCanProcessQueue,
         abortControllerRef,
-        setMainAgentStreamStartTime: mockSetMainAgentStreamStartTime,
+        mainAgentTimer: {
+          start: mockSetMainAgentStreamStartTime.bind(null, Date.now()),
+          stop: mockSetMainAgentStreamStartTime.bind(null, null),
+          elapsedSeconds: 0,
+          startTime: null,
+        },
         scrollToLatest: mockScrollToLatest,
         availableWidth: 80,
       }),
@@ -210,7 +220,12 @@ describe('useSendMessage timer', () => {
         setIsStreaming: mockSetIsStreaming,
         setCanProcessQueue: mockSetCanProcessQueue,
         abortControllerRef,
-        setMainAgentStreamStartTime: mockSetMainAgentStreamStartTime,
+        mainAgentTimer: {
+          start: mockSetMainAgentStreamStartTime.bind(null, Date.now()),
+          stop: mockSetMainAgentStreamStartTime.bind(null, null),
+          elapsedSeconds: 0,
+          startTime: null,
+        },
         scrollToLatest: mockScrollToLatest,
         availableWidth: 80,
       }),

cli/src/hooks/use-elapsed-time.ts

@@ -1,15 +1,60 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export interface ElapsedTimeTracker {
+  /**
+   * Start tracking elapsed time from now
+   */
+  start: () => void
+  /**
+   * Stop tracking and reset to 0
+   */
+  stop: () => void
+  /**
+   * Get the current elapsed seconds
+   */
+  elapsedSeconds: number
+  /**
+   * Get the start time timestamp (null if not started)
+   */
+  startTime: number | null
+}
 
 /**
- * Hook to track elapsed time from a start timestamp
- * Updates every second while the start time is set
+ * Hook to track elapsed time with manual start/stop control
+ * Updates every second while active
+ *
+ * @returns ElapsedTimeTracker - Object with start/stop methods and current elapsed time
+ *
+ * @example
+ * // Imperative API - for components that control timing
+ * const timer = useElapsedTime()
+ * timer.start() // Start timing
+ * timer.stop()  // Stop and reset
  *
- * @param startTime - Timestamp in milliseconds (Date.now()) when timing started, or null/undefined to reset
- * @returns elapsedSeconds - Number of seconds elapsed since startTime, or 0 if no startTime
+ * // Can also pass timer to useSendMessage
+ * useSendMessage({ mainAgentTimer: timer, ... })
+ *
+ * @example
+ * // Declarative API - for components that just display
+ * const timer = useElapsedTime()
+ * useEffect(() => {
+ *   if (streamStartTime) timer.start()
+ *   else timer.stop()
+ * }, [streamStartTime])
  */
-export const useElapsedTime = (startTime: number | null | undefined): number => {
+export const useElapsedTime = (): ElapsedTimeTracker => {
+  const [startTime, setStartTime] = useState<number | null>(null)
   const [elapsedSeconds, setElapsedSeconds] = useState<number>(0)
 
+  const start = useCallback(() => {
+    setStartTime(Date.now())
+  }, [])
+
+  const stop = useCallback(() => {
+    setStartTime(null)
+    setElapsedSeconds(0)
+  }, [])
+
   useEffect(() => {
     if (!startTime) {
       setElapsedSeconds(0)
@@ -30,5 +75,26 @@ export const useElapsedTime = (startTime: number | null | undefined): number =>
     return () => clearInterval(interval)
   }, [startTime])
 
-  return elapsedSeconds
+  return { start, stop, elapsedSeconds, startTime }
+}
+
+/**
+ * Declarative hook that tracks elapsed time when a start time is provided
+ * Useful for components that don't control the timing themselves
+ *
+ * @param externalStartTime - Timestamp when timing should start, or null to stop
+ * @returns elapsedSeconds - Number of seconds elapsed since startTime
+ */
+export const useElapsedTimeFrom = (externalStartTime: number | null | undefined): number => {
+  const timer = useElapsedTime()
+
+  useEffect(() => {
+    if (externalStartTime) {
+      timer.start()
+    } else {
+      timer.stop()
+    }
+  }, [externalStartTime, timer])
+
+  return timer.elapsedSeconds
 }

cli/src/hooks/use-send-message.ts

@@ -11,6 +11,7 @@ import { createValidationErrorBlocks } from '../utils/create-validation-error-bl
 import type { ChatMessage, ContentBlock } from '../chat'
 import type { AgentDefinition, ToolName } from '@codebuff/sdk'
 import type { SetStateAction } from 'react'
+import type { ElapsedTimeTracker } from './use-elapsed-time'
 
 const hiddenToolNames = new Set<ToolName | 'spawn_agent_inline'>([
   'spawn_agent_inline',
@@ -100,7 +101,7 @@ interface UseSendMessageOptions {
   abortControllerRef: React.MutableRefObject<AbortController | null>
   agentId?: string
   onBeforeMessageSend?: () => Promise<{ success: boolean; errors: Array<{ id: string; message: string }> }>
-  setMainAgentStreamStartTime: (time: number | null) => void
+  mainAgentTimer: ElapsedTimeTracker
   scrollToLatest: () => void
   availableWidth?: number
 }
@@ -124,7 +125,7 @@ export const useSendMessage = ({
   abortControllerRef,
   agentId,
   onBeforeMessageSend,
-  setMainAgentStreamStartTime,
+  mainAgentTimer,
   scrollToLatest,
   availableWidth = 80,
 }: UseSendMessageOptions) => {
@@ -256,6 +257,9 @@ export const useSendMessage = ({
       const { agentMode } = params
       const timestamp = formatTimestamp()
 
+      // Start timer immediately when message is sent
+      mainAgentTimer.start()
+
       // Add user message to UI first
       const userMessage: ChatMessage = {
         id: `user-${Date.now()}`,
@@ -597,8 +601,6 @@ export const useSendMessage = ({
             if (!hasReceivedContent) {
               hasReceivedContent = true
               setIsWaitingForResponse(false)
-              // Main agent started streaming - set timer
-              setMainAgentStreamStartTime(Date.now())
             }
 
             const previous = rootStreamBufferRef.current ?? ''
@@ -637,7 +639,6 @@ export const useSendMessage = ({
               if (!hasReceivedContent && !event.agentId) {
                 hasReceivedContent = true
                 setIsWaitingForResponse(false)
-                setMainAgentStreamStartTime(Date.now())
               } else if (!hasReceivedContent) {
                 hasReceivedContent = true
                 setIsWaitingForResponse(false)
@@ -1309,7 +1310,7 @@ export const useSendMessage = ({
         setCanProcessQueue(true)
         updateChainInProgress(false)
         setIsWaitingForResponse(false)
-        setMainAgentStreamStartTime(null)
+        mainAgentTimer.stop()
 
         if ((result as any)?.credits !== undefined) {
           actualCredits = (result as any).credits
@@ -1344,7 +1345,7 @@ export const useSendMessage = ({
         setCanProcessQueue(true)
         updateChainInProgress(false)
         setIsWaitingForResponse(false)
-        setMainAgentStreamStartTime(null)
+        mainAgentTimer.stop()
 
         if (isAborted) {
           applyMessageUpdate((prev) =>
@@ -1421,7 +1422,7 @@ export const useSendMessage = ({
       addActiveSubagent,
       removeActiveSubagent,
       onBeforeMessageSend,
-      setMainAgentStreamStartTime,
+      mainAgentTimer,
       scrollToLatest,
       availableWidth,
     ],