Improve CLI scroll UX and refactor timer handling

- Add isUserCollapsingRef to prevent auto-scroll during user-initiated collapse actions
- Refactor timer handling from simple timerStartTime to comprehensive timer object
- Make timer prop optional in MessageBlock for better null safety
- Pass timer object through component hierarchy for consistent elapsed time tracking
- Fix scroll-to-latest button to use function call syntax

Author: brandonkachen

cli/src/chat.tsx

@@ -221,10 +221,17 @@ export const Chat = ({
   }, [activeSubagents])
 
   const abortControllerRef = useRef<AbortController | null>(null)
+  const isUserCollapsingRef = useRef<boolean>(false)
+
+  // Reset the collapse flag after collapse state changes
+  useEffect(() => {
+    isUserCollapsingRef.current = false
+  }, [collapsedAgents])
 
   const { scrollToLatest, scrollboxProps, isAtBottom } = useChatScrollbox(
     scrollRef,
     messages,
+    isUserCollapsingRef,
   )
 
   const inertialScrollAcceleration = useMemo(
@@ -619,7 +626,7 @@ export const Chat = ({
   const hasStatus = useHasStatus({
     isActive: isStatusActive,
     clipboardMessage,
-    timerStartTime,
+    timer: mainAgentTimer,
     nextCtrlCWillExit,
   })
 
@@ -737,7 +744,7 @@ export const Chat = ({
     <StatusIndicator
       clipboardMessage={clipboardMessage}
       isActive={isStatusActive}
-      timerStartTime={timerStartTime}
+      timer={mainAgentTimer}
       nextCtrlCWillExit={nextCtrlCWillExit}
     />
   )
@@ -813,11 +820,12 @@ export const Chat = ({
             collapsedAgents={collapsedAgents}
             streamingAgents={streamingAgents}
             isWaitingForResponse={isWaitingForResponse}
-            timerStartTime={timerStartTime}
+            timer={mainAgentTimer}
             setCollapsedAgents={setCollapsedAgents}
             setFocusedAgentId={setFocusedAgentId}
             userOpenedAgents={userOpenedAgents}
             setUserOpenedAgents={setUserOpenedAgents}
+            isUserCollapsingRef={isUserCollapsingRef}
           />
         </scrollbox>
       </box>
@@ -855,7 +863,7 @@ export const Chat = ({
             {/* Center section - scroll indicator (always centered) */}
             <box style={{ flexShrink: 0 }}>
               {!isAtBottom && (
-                <text onMouseDown={scrollToLatest}>
+                <text onMouseDown={() => scrollToLatest()}>
                   <span fg={theme.info} attributes={TextAttributes.BOLD}>
                     ↓
                   </span>

cli/src/components/message-block.tsx

@@ -35,7 +35,7 @@ interface MessageBlockProps {
   isComplete?: boolean
   completionTime?: string
   credits?: number
-  timer: ElapsedTimeTracker
+  timer?: ElapsedTimeTracker
   textColor?: ThemeColor
   timestampColor: string
   markdownOptions: { codeBlockWidth: number; palette: MarkdownPalette }
@@ -73,7 +73,7 @@ export const MessageBlock = ({
   const resolvedTextColor = textColor ?? theme.foreground
 
   // Get elapsed time from timer for streaming AI messages
-  const elapsedSeconds = timer.elapsedSeconds
+  const elapsedSeconds = timer?.elapsedSeconds ?? 0
 
   const renderContentWithMarkdown = (
     rawContent: string,

cli/src/components/message-renderer.tsx

@@ -24,11 +24,12 @@ interface MessageRendererProps {
   collapsedAgents: Set<string>
   streamingAgents: Set<string>
   isWaitingForResponse: boolean
-  timerStartTime: number | null
+  timer: any
   setCollapsedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
   setFocusedAgentId: React.Dispatch<React.SetStateAction<string | null>>
   userOpenedAgents: Set<string>
   setUserOpenedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
+  isUserCollapsingRef: React.MutableRefObject<boolean>
 }
 
 export const MessageRenderer = (props: MessageRendererProps): ReactNode => {
@@ -42,15 +43,22 @@ export const MessageRenderer = (props: MessageRendererProps): ReactNode => {
     collapsedAgents,
     streamingAgents,
     isWaitingForResponse,
-    timerStartTime,
+    timer,
     setCollapsedAgents,
     setFocusedAgentId,
     setUserOpenedAgents,
+    isUserCollapsingRef,
   } = props
 
+  const timerStartTime = timer?.startTime ?? null
+
   const onToggleCollapsed = useCallback(
     (id: string) => {
       const wasCollapsed = collapsedAgents.has(id)
+
+      // Set flag to prevent auto-scroll during user-initiated collapse
+      isUserCollapsingRef.current = true
+
       setCollapsedAgents((prev) => {
         const next = new Set(prev)
         if (next.has(id)) {
@@ -70,7 +78,7 @@ export const MessageRenderer = (props: MessageRendererProps): ReactNode => {
         return next
       })
     },
-    [collapsedAgents, setCollapsedAgents, setUserOpenedAgents],
+    [collapsedAgents, setCollapsedAgents, setUserOpenedAgents, isUserCollapsingRef],
   )
 
   return (
@@ -94,7 +102,7 @@ export const MessageRenderer = (props: MessageRendererProps): ReactNode => {
             setUserOpenedAgents={setUserOpenedAgents}
             setFocusedAgentId={setFocusedAgentId}
             isWaitingForResponse={isWaitingForResponse}
-            timerStartTime={timerStartTime}
+            timer={timer}
             onToggleCollapsed={onToggleCollapsed}
           />
         )
@@ -118,7 +126,7 @@ interface MessageWithAgentsProps {
   setUserOpenedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
   setFocusedAgentId: React.Dispatch<React.SetStateAction<string | null>>
   isWaitingForResponse: boolean
-  timerStartTime: number | null
+  timer: any
   onToggleCollapsed: (id: string) => void
 }
 
@@ -138,11 +146,12 @@ const MessageWithAgents = memo(
     setUserOpenedAgents,
     setFocusedAgentId,
     isWaitingForResponse,
-    timerStartTime,
+    timer,
     onToggleCollapsed,
   }: MessageWithAgentsProps): ReactNode => {
     const SIDE_GUTTER = 1
     const isAgent = message.variant === 'agent'
+    const timerStartTime = timer?.startTime ?? null
 
     if (isAgent) {
       return (
@@ -271,7 +280,7 @@ const MessageWithAgents = memo(
                   isComplete={message.isComplete}
                   completionTime={message.completionTime}
                   credits={message.credits}
-                  timerStartTime={timerStartTime}
+                  timer={timer}
                   textColor={textColor}
                   timestampColor={timestampColor}
                   markdownOptions={markdownOptions}
@@ -342,7 +351,7 @@ const MessageWithAgents = memo(
                   setUserOpenedAgents={setUserOpenedAgents}
                   setFocusedAgentId={setFocusedAgentId}
                   isWaitingForResponse={isWaitingForResponse}
-                  timerStartTime={timerStartTime}
+                  timer={timer}
                   onToggleCollapsed={onToggleCollapsed}
                 />
               </box>
@@ -580,7 +589,7 @@ const AgentMessage = memo(
                   setUserOpenedAgents={setUserOpenedAgents}
                   setFocusedAgentId={setFocusedAgentId}
                   isWaitingForResponse={isWaitingForResponse}
-                  timerStartTime={timerStartTime}
+                  timer={timer}
                   onToggleCollapsed={onToggleCollapsed}
                 />
               </box>