feat: show elapsed time in streaming messages

Created a shared useElapsedTime hook that both the status indicator and
message display can use. Now streaming AI messages show elapsed time
(e.g., "5s") that updates every second while the message is being
generated. Once complete, it switches to showing the completion time
and credits as before.

Changes:
- Added useElapsedTime hook for tracking elapsed seconds
- Updated StatusIndicator to use the shared hook
- Updated MessageBlock to show elapsed time for streaming messages
- Passed streamStartTime through message renderer chain

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: brandonkachen

cli/src/chat.tsx

@@ -1008,6 +1008,7 @@ export const App = ({
     collapsedAgents,
     streamingAgents,
     isWaitingForResponse,
+    streamStartTime: mainAgentStreamStartTime,
     setCollapsedAgents,
     setFocusedAgentId,
     registerAgentRef,

cli/src/components/message-block.tsx

@@ -4,6 +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 { getToolDisplayInfo } from '../utils/codebuff-client'
 import {
   renderMarkdown,
@@ -32,6 +33,7 @@ interface MessageBlockProps {
   isComplete?: boolean
   completionTime?: string
   credits?: number
+  streamStartTime: number | null
   theme: ChatTheme
   textColor: string
   timestampColor: string
@@ -55,6 +57,7 @@ export const MessageBlock = ({
   isComplete,
   completionTime,
   credits,
+  streamStartTime,
   theme,
   textColor,
   timestampColor,
@@ -66,6 +69,10 @@ export const MessageBlock = ({
   onToggleCollapsed,
   registerAgentRef,
 }: MessageBlockProps): ReactNode => {
+  // Calculate elapsed time for streaming AI messages
+  const elapsedSeconds = useElapsedTime(
+    isAi && isLoading && !isComplete ? streamStartTime : null,
+  )
   const computeBranchChar = (indentLevel: number, isLastBranch: boolean) =>
     `${'  '.repeat(indentLevel)}${isLastBranch ? '└─ ' : '├─ '}`
 
@@ -514,20 +521,40 @@ export const MessageBlock = ({
           )
         })()
       )}
-      {isAi && isComplete && (completionTime || credits) && (
-        <text
-          wrap={false}
-          attributes={TextAttributes.DIM}
-          style={{
-            fg: theme.statusSecondary,
-            marginTop: 0,
-            marginBottom: 0,
-            alignSelf: 'flex-start',
-          }}
-        >
-          {completionTime}
-          {credits && ` • ${credits} credits`}
-        </text>
+      {isAi && (
+        <>
+          {/* Show elapsed time while streaming */}
+          {isLoading && !isComplete && elapsedSeconds > 0 && (
+            <text
+              wrap={false}
+              attributes={TextAttributes.DIM}
+              style={{
+                fg: theme.statusSecondary,
+                marginTop: 0,
+                marginBottom: 0,
+                alignSelf: 'flex-start',
+              }}
+            >
+              {elapsedSeconds}s
+            </text>
+          )}
+          {/* Show completion time and credits when complete */}
+          {isComplete && (completionTime || credits) && (
+            <text
+              wrap={false}
+              attributes={TextAttributes.DIM}
+              style={{
+                fg: theme.statusSecondary,
+                marginTop: 0,
+                marginBottom: 0,
+                alignSelf: 'flex-start',
+              }}
+            >
+              {completionTime}
+              {credits && ` • ${credits} credits`}
+            </text>
+          )}
+        </>
       )}
     </>
   )

cli/src/components/status-indicator.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
 import { ShimmerText } from './shimmer-text'
+import { useElapsedTime } from '../hooks/use-elapsed-time'
 import { getCodebuffClient } from '../utils/codebuff-client'
 import { logger } from '../utils/logger'
 
@@ -49,29 +50,7 @@ export const StatusIndicator = ({
   streamStartTime?: number | null
 }) => {
   const isConnected = useConnectionStatus()
-  const [elapsedSeconds, setElapsedSeconds] = useState<number>(0)
-
-
-  // Update elapsed time every second while streaming
-  useEffect(() => {
-    if (!streamStartTime) {
-      setElapsedSeconds(0)
-      return
-    }
-
-    const updateElapsed = () => {
-      const elapsed = Math.floor((Date.now() - streamStartTime) / 1000)
-      setElapsedSeconds(elapsed)
-    }
-
-    // Update immediately
-    updateElapsed()
-
-    // Then update every second
-    const interval = setInterval(updateElapsed, 1000)
-
-    return () => clearInterval(interval)
-  }, [streamStartTime])
+  const elapsedSeconds = useElapsedTime(streamStartTime)
 
   if (clipboardMessage) {
     return <span fg={theme.statusAccent}>{clipboardMessage}</span>

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

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Hook to track elapsed time from a start timestamp
+ * Updates every second while the start time is set
+ *
+ * @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
+ */
+export const useElapsedTime = (startTime: number | null | undefined): number => {
+  const [elapsedSeconds, setElapsedSeconds] = useState<number>(0)
+
+  useEffect(() => {
+    if (!startTime) {
+      setElapsedSeconds(0)
+      return
+    }
+
+    const updateElapsed = () => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1000)
+      setElapsedSeconds(elapsed)
+    }
+
+    // Update immediately
+    updateElapsed()
+
+    // Then update every second
+    const interval = setInterval(updateElapsed, 1000)
+
+    return () => clearInterval(interval)
+  }, [startTime])
+
+  return elapsedSeconds
+}

cli/src/hooks/use-message-renderer.tsx

@@ -23,6 +23,7 @@ interface UseMessageRendererProps {
   collapsedAgents: Set<string>
   streamingAgents: Set<string>
   isWaitingForResponse: boolean
+  streamStartTime: number | null
   setCollapsedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
   setFocusedAgentId: React.Dispatch<React.SetStateAction<string | null>>
   registerAgentRef: (agentId: string, element: any) => void
@@ -42,6 +43,7 @@ export const useMessageRenderer = (
     collapsedAgents,
     streamingAgents,
     isWaitingForResponse,
+    streamStartTime,
     setCollapsedAgents,
     setFocusedAgentId,
     registerAgentRef,
@@ -352,6 +354,7 @@ export const useMessageRenderer = (
                     isComplete={message.isComplete}
                     completionTime={message.completionTime}
                     credits={message.credits}
+                    streamStartTime={streamStartTime}
                     theme={theme}
                     textColor={textColor}
                     timestampColor={timestampColor}
@@ -402,6 +405,7 @@ export const useMessageRenderer = (
                   isComplete={message.isComplete}
                   completionTime={message.completionTime}
                   credits={message.credits}
+                  streamStartTime={streamStartTime}
                   theme={theme}
                   textColor={textColor}
                   timestampColor={timestampColor}