refactor: convert isUserCollapsingRef to callback pattern

Simplifies collapse handling by using a callback function instead of a
ref parameter: - Pass callback function to useChatScrollbox instead of
ref - Inline collapse logic into handleCollapseToggle - Use setTimeout
to reset flag after state update - Remove separate
setCollapsedAgentsWithFlag wrapper - Remove useEffect that was watching
collapsedAgents changes

This is cleaner and more explicit about when the flag is checked.

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

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

Author: brandonkachen

cli/src/chat.tsx

@@ -222,25 +222,13 @@ export const Chat = ({
 
   const isUserCollapsingRef = useRef<boolean>(false)
 
-  // Reset the collapse flag after collapse state changes
-  useEffect(() => {
-    isUserCollapsingRef.current = false
-  }, [collapsedAgents])
-
-  // Wrapper for setCollapsedAgents that sets the flag to prevent auto-scroll
-  const setCollapsedAgentsWithFlag = useCallback(
-    (action: React.SetStateAction<Set<string>>) => {
-      isUserCollapsingRef.current = true
-      setCollapsedAgents(action)
-    },
-    [setCollapsedAgents],
-  )
-
   const handleCollapseToggle = useCallback(
     (id: string) => {
       const wasCollapsed = collapsedAgents.has(id)
 
-      setCollapsedAgentsWithFlag((prev) => {
+      // Set flag to prevent auto-scroll during user-initiated collapse
+      isUserCollapsingRef.current = true
+      setCollapsedAgents((prev) => {
         const next = new Set(prev)
         if (next.has(id)) {
           next.delete(id)
@@ -250,6 +238,11 @@ export const Chat = ({
         return next
       })
 
+      // Reset flag after state update completes
+      setTimeout(() => {
+        isUserCollapsingRef.current = false
+      }, 0)
+
       setUserOpenedAgents((prev) => {
         const next = new Set(prev)
         if (wasCollapsed) {
@@ -260,13 +253,17 @@ export const Chat = ({
         return next
       })
     },
-    [collapsedAgents, setCollapsedAgentsWithFlag, setUserOpenedAgents],
+    [collapsedAgents, setCollapsedAgents, setUserOpenedAgents],
   )
 
+  const isUserCollapsing = useCallback(() => {
+    return isUserCollapsingRef.current
+  }, [])
+
   const { scrollToLatest, scrollboxProps, isAtBottom } = useChatScrollbox(
     scrollRef,
     messages,
-    isUserCollapsingRef,
+    isUserCollapsing,
   )
 
   const inertialScrollAcceleration = useMemo(
@@ -629,7 +626,7 @@ export const Chat = ({
             isWaitingForResponse={isWaitingForResponse}
             timerStartTime={timerStartTime}
             onCollapseToggle={handleCollapseToggle}
-            setCollapsedAgents={setCollapsedAgentsWithFlag}
+            setCollapsedAgents={setCollapsedAgents}
             setFocusedAgentId={setFocusedAgentId}
             userOpenedAgents={userOpenedAgents}
             setUserOpenedAgents={setUserOpenedAgents}

cli/src/hooks/use-scroll-management.ts

@@ -9,7 +9,7 @@ const easeOutCubic = (t: number): number => {
 export const useChatScrollbox = (
   scrollRef: React.RefObject<ScrollBoxRenderable | null>,
   messages: any[],
-  isUserCollapsingRef: React.MutableRefObject<boolean>,
+  isUserCollapsing: () => boolean,
 ) => {
   const autoScrollEnabledRef = useRef<boolean>(true)
   const programmaticScrollRef = useRef<boolean>(false)
@@ -112,7 +112,7 @@ export const useChatScrollbox = (
         if (scrollbox.scrollTop > maxScroll) {
           programmaticScrollRef.current = true
           scrollbox.scrollTop = maxScroll
-        } else if (autoScrollEnabledRef.current && !isUserCollapsingRef.current) {
+        } else if (autoScrollEnabledRef.current && !isUserCollapsing()) {
           programmaticScrollRef.current = true
           scrollbox.scrollTop = maxScroll
         }
@@ -121,7 +121,7 @@ export const useChatScrollbox = (
       return () => clearTimeout(timeoutId)
     }
     return undefined
-  }, [messages, scrollToLatest, scrollRef, isUserCollapsingRef])
+  }, [messages, scrollToLatest, scrollRef, isUserCollapsing])
 
   useEffect(() => {
     return () => {