Add timer UI tests and structured helper coverage

Author: brandonkachen

bun.lock

@@ -57,6 +57,7 @@
     "@types/node": "22",
     "@types/react": "^18.3.12",
     "@types/react-reconciler": "^0.32.0",
+    "react-dom": "^19.0.0",
     "strip-ansi": "^7.1.2"
   }
 }

cli/package.json

@@ -35,6 +35,7 @@ import { useMessageQueue } from './hooks/use-message-queue'
 import { useMessageRenderer } from './hooks/use-message-renderer'
 import { useChatScrollbox } from './hooks/use-scroll-management'
 import { useSendMessage } from './hooks/use-send-message'
+import type { SendMessageTimerEvent } from './hooks/use-send-message'
 import { useSuggestionEngine } from './hooks/use-suggestion-engine'
 import { useSystemThemeDetector } from './hooks/use-system-theme-detector'
 import { useChatStore } from './state/chat-store'
@@ -813,6 +814,31 @@ export const App = ({
     activeAgentStreamsRef,
   )
 
+  const handleTimerEvent = useCallback(
+    (event: SendMessageTimerEvent) => {
+      const payload = {
+        event: 'cli_main_agent_timer',
+        timerEventType: event.type,
+        agentId: agentId ?? 'main',
+        messageId: event.messageId,
+        startedAt: event.startedAt,
+        ...(event.type === 'stop'
+          ? {
+              finishedAt: event.finishedAt,
+              elapsedMs: event.elapsedMs,
+              outcome: event.outcome,
+            }
+          : {}),
+      }
+      const message =
+        event.type === 'start'
+          ? 'Main agent timer started'
+          : `Main agent timer stopped (${event.outcome})`
+      logger.info(payload, message)
+    },
+    [agentId],
+  )
+
   const { sendMessage } = useSendMessage({
     setMessages,
     setFocusedAgentId,
@@ -835,6 +861,7 @@ export const App = ({
     mainAgentTimer,
     scrollToLatest,
     availableWidth: separatorWidth,
+    onTimerEvent: handleTimerEvent,
   })
 
   sendMessageRef.current = sendMessage

cli/src/chat.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+import { describe, test, expect } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { MessageBlock } from '../message-block'
+import { chatThemes, createMarkdownPalette } from '../../utils/theme-system'
+import type { MarkdownPalette } from '../../utils/markdown-renderer'
+
+const theme = chatThemes.dark
+
+const basePalette = createMarkdownPalette(theme)
+
+const palette: MarkdownPalette = {
+  ...basePalette,
+  inlineCodeFg: theme.messageAiText,
+  codeTextFg: theme.messageAiText,
+}
+
+const baseProps = {
+  messageId: 'ai-1',
+  blocks: undefined,
+  content: 'Hello there',
+  isUser: false,
+  isAi: true,
+  isLoading: false,
+  timestamp: '12:00',
+  isComplete: false,
+  completionTime: undefined,
+  credits: undefined,
+  timer: {
+    start: () => {},
+    stop: () => {},
+    elapsedSeconds: 0,
+    startTime: null,
+  },
+  theme,
+  textColor: theme.messageAiText,
+  timestampColor: theme.timestampAi,
+  markdownOptions: {
+    codeBlockWidth: 72,
+    palette,
+  },
+  availableWidth: 80,
+  markdownPalette: basePalette,
+  collapsedAgents: new Set<string>(),
+  streamingAgents: new Set<string>(),
+  onToggleCollapsed: () => {},
+  registerAgentRef: () => {},
+}
+
+describe('MessageBlock completion time', () => {
+  test('renders completion time and credits when complete', () => {
+    const markup = renderToStaticMarkup(
+      <MessageBlock
+        {...baseProps}
+        isComplete={true}
+        completionTime="7s"
+        credits={3}
+      />,
+    )
+
+    expect(markup).toContain('7s')
+    expect(markup).toContain('3 credits')
+  })
+
+  test('omits completion line when not complete', () => {
+    const markup = renderToStaticMarkup(
+      <MessageBlock
+        {...baseProps}
+        isComplete={false}
+        completionTime="7s"
+        credits={3}
+      />,
+    )
+
+    expect(markup).not.toContain('7s')
+    expect(markup).not.toContain('3 credits')
+  })
+})

cli/src/components/__tests__/message-block.completion.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import { describe, test, expect } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { MessageBlock } from '../message-block'
+import { chatThemes, createMarkdownPalette } from '../../utils/theme-system'
+import type { MarkdownPalette } from '../../utils/markdown-renderer'
+
+const theme = chatThemes.dark
+
+const basePalette = createMarkdownPalette(theme)
+
+const palette: MarkdownPalette = {
+  ...basePalette,
+  inlineCodeFg: theme.messageAiText,
+  codeTextFg: theme.messageAiText,
+}
+
+const baseProps = {
+  messageId: 'ai-stream',
+  blocks: undefined,
+  content: 'Streaming response...',
+  isUser: false,
+  isAi: true,
+  isComplete: false,
+  timestamp: '12:00',
+  completionTime: undefined,
+  credits: undefined,
+  theme,
+  textColor: theme.messageAiText,
+  timestampColor: theme.timestampAi,
+  markdownOptions: {
+    codeBlockWidth: 72,
+    palette,
+  },
+  availableWidth: 80,
+  markdownPalette: basePalette,
+  collapsedAgents: new Set<string>(),
+  streamingAgents: new Set<string>(),
+  onToggleCollapsed: () => {},
+  registerAgentRef: () => {},
+}
+
+const createTimer = (elapsedSeconds: number) => ({
+  start: () => {},
+  stop: () => {},
+  elapsedSeconds,
+  startTime: elapsedSeconds > 0 ? Date.now() - elapsedSeconds * 1000 : null,
+})
+
+describe('MessageBlock streaming indicator', () => {
+  test('shows elapsed seconds while streaming', () => {
+    const markup = renderToStaticMarkup(
+      <MessageBlock
+        {...baseProps}
+        isLoading={true}
+        timer={createTimer(4)}
+      />,
+    )
+
+    expect(markup).toContain('4s')
+  })
+
+  test('hides elapsed seconds when timer has not advanced', () => {
+    const markup = renderToStaticMarkup(
+      <MessageBlock
+        {...baseProps}
+        isLoading={true}
+        timer={createTimer(0)}
+      />,
+    )
+
+    expect(markup).not.toContain('0s')
+  })
+})

cli/src/components/__tests__/message-block.streaming.test.tsx

@@ -0,0 +1,67 @@
+import { describe, test, expect } from 'bun:test'
+
+import { computeHasStatus } from '../status-indicator'
+
+const createTimer = (startTime: number | null) => ({
+  start: () => {},
+  stop: () => {},
+  elapsedSeconds: startTime ? Math.floor((Date.now() - startTime) / 1000) : 0,
+  startTime,
+})
+
+describe('computeHasStatus', () => {
+  test('returns true when connection is lost', () => {
+    expect(
+      computeHasStatus({
+        isConnected: false,
+        isActive: false,
+        clipboardMessage: null,
+        timer: createTimer(null),
+      }),
+    ).toBe(true)
+  })
+
+  test('returns true when active', () => {
+    expect(
+      computeHasStatus({
+        isConnected: true,
+        isActive: true,
+        clipboardMessage: null,
+        timer: createTimer(null),
+      }),
+    ).toBe(true)
+  })
+
+  test('returns true when clipboard message exists', () => {
+    expect(
+      computeHasStatus({
+        isConnected: true,
+        isActive: false,
+        clipboardMessage: 'Copied!',
+        timer: createTimer(null),
+      }),
+    ).toBe(true)
+  })
+
+  test('returns true when timer has started', () => {
+    expect(
+      computeHasStatus({
+        isConnected: true,
+        isActive: false,
+        clipboardMessage: null,
+        timer: createTimer(Date.now() - 5000),
+      }),
+    ).toBe(true)
+  })
+
+  test('returns false when idle, connected, and timer inactive', () => {
+    expect(
+      computeHasStatus({
+        isConnected: true,
+        isActive: false,
+        clipboardMessage: null,
+        timer: createTimer(null),
+      }),
+    ).toBe(false)
+  })
+})

cli/src/components/__tests__/status-indicator.has-status.test.ts

@@ -0,0 +1,79 @@
+import React from 'react'
+
+import {
+  describe,
+  test,
+  expect,
+  beforeAll,
+  afterAll,
+  beforeEach,
+  afterEach,
+  mock,
+  spyOn,
+} from 'bun:test'
+
+import { StatusIndicator } from '../status-indicator'
+import { chatThemes } from '../../utils/theme-system'
+import { renderToStaticMarkup } from 'react-dom/server'
+import * as codebuffClient from '../../utils/codebuff-client'
+
+const theme = chatThemes.dark
+
+const createTimer = (elapsedSeconds: number, started: boolean) => ({
+  start: () => {},
+  stop: () => {},
+  elapsedSeconds,
+  startTime: started ? Date.now() - elapsedSeconds * 1000 : null,
+})
+
+describe('StatusIndicator timer rendering', () => {
+  let getClientSpy: ReturnType<typeof spyOn>
+
+  beforeEach(() => {
+    getClientSpy = spyOn(codebuffClient, 'getCodebuffClient').mockReturnValue({
+      checkConnection: mock(async () => true),
+    } as any)
+  })
+
+  afterEach(() => {
+    getClientSpy.mockRestore()
+  })
+
+  test('shows elapsed seconds when timer is active', () => {
+    const markup = renderToStaticMarkup(
+      <StatusIndicator
+        theme={theme}
+        clipboardMessage={null}
+        isActive={true}
+        timer={createTimer(5, true)}
+      />,
+    )
+
+    expect(markup).toContain('5s')
+
+    const inactiveMarkup = renderToStaticMarkup(
+      <StatusIndicator
+        theme={theme}
+        clipboardMessage={null}
+        isActive={false}
+        timer={createTimer(0, false)}
+      />,
+    )
+
+    expect(inactiveMarkup).toBe('')
+  })
+
+  test('clipboard message takes priority over timer output', () => {
+    const markup = renderToStaticMarkup(
+      <StatusIndicator
+        theme={theme}
+        clipboardMessage="Copied!"
+        isActive={true}
+        timer={createTimer(12, true)}
+      />,
+    )
+
+    expect(markup).toContain('Copied!')
+    expect(markup).not.toContain('12s')
+  })
+})

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

@@ -89,7 +89,29 @@ export const useHasStatus = (
   timer?: ElapsedTimeTracker,
 ): boolean => {
   const isConnected = useConnectionStatus()
+  return computeHasStatus({
+    isConnected,
+    isActive,
+    clipboardMessage,
+    timer,
+  })
+}
+
+export const computeHasStatus = ({
+  isConnected,
+  isActive,
+  clipboardMessage,
+  timer,
+}: {
+  isConnected: boolean
+  isActive: boolean
+  clipboardMessage?: string | null
+  timer?: ElapsedTimeTracker
+}): boolean => {
   return (
-    isConnected === false || isActive || !!clipboardMessage || !!timer?.startTime
+    isConnected === false ||
+    isActive ||
+    Boolean(clipboardMessage) ||
+    Boolean(timer?.startTime)
   )
 }