fix types and tests

Author: jahooma

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

@@ -29,12 +29,7 @@ const baseProps = {
   isComplete: false,
   completionTime: undefined,
   credits: undefined,
-  timer: {
-    start: () => {},
-    stop: () => {},
-    elapsedSeconds: 0,
-    startTime: null,
-  },
+  timerStartTime: null,
   textColor: theme.foreground,
   timestampColor: theme.muted,
   markdownOptions: {

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

@@ -41,20 +41,16 @@ const baseProps = {
   onToggleCollapsed: () => {},
 }
 
-const createTimer = (elapsedSeconds: number) => ({
-  start: () => {},
-  stop: () => {},
-  elapsedSeconds,
-  startTime: elapsedSeconds > 0 ? Date.now() - elapsedSeconds * 1000 : null,
-})
+const createTimerStartTime = (elapsedSeconds: number): number | null =>
+  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)}
+        timerStartTime={createTimerStartTime(4)}
       />,
     )
 
@@ -66,7 +62,7 @@ describe('MessageBlock streaming indicator', () => {
       <MessageBlock
         {...baseProps}
         isLoading={true}
-        timer={createTimer(0)}
+        timerStartTime={createTimerStartTime(0)}
       />,
     )
 

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

@@ -16,12 +16,11 @@ import { renderToStaticMarkup } from 'react-dom/server'
 
 import * as codebuffClient from '../../utils/codebuff-client'
 
-const createTimer = (elapsedSeconds: number, started: boolean) => ({
-  start: () => {},
-  stop: () => {},
-  elapsedSeconds,
-  startTime: started ? Date.now() - elapsedSeconds * 1000 : null,
-})
+const createTimerStartTime = (
+  elapsedSeconds: number,
+  started: boolean,
+): number | null =>
+  started ? Date.now() - elapsedSeconds * 1000 : null
 
 describe('StatusIndicator timer rendering', () => {
   let getClientSpy: ReturnType<typeof spyOn>
@@ -41,7 +40,7 @@ describe('StatusIndicator timer rendering', () => {
       <StatusIndicator
         clipboardMessage={null}
         isActive={true}
-        timer={createTimer(5, true)}
+        timerStartTime={createTimerStartTime(5, true)}
         nextCtrlCWillExit={false}
       />,
     )
@@ -52,7 +51,7 @@ describe('StatusIndicator timer rendering', () => {
       <StatusIndicator
         clipboardMessage={null}
         isActive={false}
-        timer={createTimer(0, false)}
+        timerStartTime={createTimerStartTime(0, false)}
         nextCtrlCWillExit={false}
       />,
     )
@@ -65,7 +64,7 @@ describe('StatusIndicator timer rendering', () => {
       <StatusIndicator
         clipboardMessage="Copied!"
         isActive={true}
-        timer={createTimer(12, true)}
+        timerStartTime={createTimerStartTime(12, true)}
         nextCtrlCWillExit={false}
       />,
     )

cli/src/components/elapsed-timer.tsx

@@ -19,7 +19,14 @@ export const ElapsedTimer = ({
   attributes,
 }: ElapsedTimerProps) => {
   const theme = useTheme()
-  const [elapsedSeconds, setElapsedSeconds] = useState<number>(0)
+  
+  // Calculate elapsed seconds synchronously for SSR/initial render
+  const calculateElapsed = () => {
+    if (!startTime) return 0
+    return Math.floor((Date.now() - startTime) / 1000)
+  }
+  
+  const [elapsedSeconds, setElapsedSeconds] = useState<number>(calculateElapsed)
 
   useEffect(() => {
     if (!startTime) {