cli: delete scrollToAgent & agentRefsMap

Author: jahooma

cli/knowledge.md

@@ -555,9 +555,7 @@ This prevents invalid children from reaching `TextNodeRenderable` while preservi
 
 **Related**: `cli/src/hooks/use-message-renderer.tsx` ensures toggle headers render within a single `<text>` block for StyledText compatibility.
 
-### Scroll Behavior
 
-Toggling any agent/tool branch calls `scrollToAgent`, with each branch registering its container via `registerAgentRef`. This anchors the toggled item in the top third of the scrollbox for better navigation in long sessions.
 
 ## Command Menus
 

cli/src/chat.tsx

@@ -465,7 +465,6 @@ export const App = ({
   // Track main agent streaming elapsed time
   const mainAgentTimer = useElapsedTime()
 
-  const agentRefsMap = useRef<Map<string, any>>(new Map())
   const hasAutoSubmittedRef = useRef(false)
   const activeSubagentsRef = useRef<Set<string>>(activeSubagents)
 
@@ -486,16 +485,8 @@ export const App = ({
 
   const abortControllerRef = useRef<AbortController | null>(null)
 
-  const registerAgentRef = useCallback((agentId: string, element: any) => {
-    if (element) {
-      agentRefsMap.current.set(agentId, element)
-    } else {
-      agentRefsMap.current.delete(agentId)
-    }
-  }, [])
-
-  const { scrollToLatest, scrollToAgent, scrollboxProps, isAtBottom } =
-    useChatScrollbox(scrollRef, messages, agentRefsMap)
+  const { scrollToLatest, scrollboxProps, isAtBottom } =
+    useChatScrollbox(scrollRef, messages)
 
   const inertialScrollAcceleration = useMemo(
     () => new QuadraticScrollAccel(),
@@ -1008,8 +999,6 @@ export const App = ({
     timer: mainAgentTimer,
     setCollapsedAgents,
     setFocusedAgentId,
-    registerAgentRef,
-    scrollToAgent,
   })
 
   const virtualizationNotice =

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

@@ -46,7 +46,6 @@ const baseProps = {
   collapsedAgents: new Set<string>(),
   streamingAgents: new Set<string>(),
   onToggleCollapsed: () => {},
-  registerAgentRef: () => {},
 }
 
 describe('MessageBlock completion time', () => {

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

@@ -39,7 +39,6 @@ const baseProps = {
   collapsedAgents: new Set<string>(),
   streamingAgents: new Set<string>(),
   onToggleCollapsed: () => {},
-  registerAgentRef: () => {},
 }
 
 const createTimer = (elapsedSeconds: number) => ({

cli/src/components/message-block.tsx

@@ -45,7 +45,6 @@ interface MessageBlockProps {
   collapsedAgents: Set<string>
   streamingAgents: Set<string>
   onToggleCollapsed: (id: string) => void
-  registerAgentRef: (id: string, element: any) => void
 }
 
 export const MessageBlock = ({
@@ -68,7 +67,6 @@ export const MessageBlock = ({
   collapsedAgents,
   streamingAgents,
   onToggleCollapsed,
-  registerAgentRef,
 }: MessageBlockProps): ReactNode => {
   const theme = useTheme()
   const resolvedTextColor = textColor ?? theme.foreground
@@ -270,7 +268,6 @@ export const MessageBlock = ({
     return (
       <box
         key={keyPrefix}
-        ref={(el: any) => registerAgentRef(toolBlock.toolCallId, el)}
       >
         {toolRenderConfig.content ? (
           toolRenderConfig.content
@@ -348,7 +345,6 @@ export const MessageBlock = ({
     return (
       <box
         key={keyPrefix}
-        ref={(el: any) => registerAgentRef(agentBlock.agentId, el)}
         style={{ flexDirection: 'column', gap: 0 }}
       >
         <AgentBranchItem
@@ -440,7 +436,6 @@ export const MessageBlock = ({
     return (
       <box
         key={keyPrefix}
-        ref={(el: any) => registerAgentRef(agentListBlock.id, el)}
       >
         <AgentBranchItem
           name={headerText}

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

@@ -27,8 +27,6 @@ interface UseMessageRendererProps {
   timer: ElapsedTimeTracker
   setCollapsedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
   setFocusedAgentId: React.Dispatch<React.SetStateAction<string | null>>
-  registerAgentRef: (agentId: string, element: any) => void
-  scrollToAgent: (agentId: string, retries?: number) => void
 }
 
 export const useMessageRenderer = (
@@ -47,8 +45,6 @@ export const useMessageRenderer = (
     timer,
     setCollapsedAgents,
     setFocusedAgentId,
-    registerAgentRef,
-    scrollToAgent,
   } = props
 
   return useMemo(() => {
@@ -119,7 +115,6 @@ export const useMessageRenderer = (
         })
 
         setFocusedAgentId(message.id)
-        scrollToAgent(message.id)
       }
 
       const handleContentClick = (e: any): void => {
@@ -141,13 +136,11 @@ export const useMessageRenderer = (
         })
 
         setFocusedAgentId(message.id)
-        scrollToAgent(message.id)
       }
 
       return (
         <box
           key={message.id}
-          ref={(el: any) => registerAgentRef(message.id, el)}
           style={{
             flexDirection: 'column',
             gap: 0,
@@ -378,9 +371,7 @@ export const useMessageRenderer = (
                         }
                         return next
                       })
-                      scrollToAgent(id)
                     }}
-                    registerAgentRef={registerAgentRef}
                   />
                 </box>
               </box>
@@ -428,9 +419,7 @@ export const useMessageRenderer = (
                       }
                       return next
                     })
-                    scrollToAgent(id)
                   }}
-                  registerAgentRef={registerAgentRef}
                 />
               </box>
             )}
@@ -469,7 +458,5 @@ export const useMessageRenderer = (
     isWaitingForResponse,
     setCollapsedAgents,
     setFocusedAgentId,
-    registerAgentRef,
-    scrollToAgent,
   ])
 }

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

@@ -9,7 +9,6 @@ const easeOutCubic = (t: number): number => {
 export const useChatScrollbox = (
   scrollRef: React.RefObject<ScrollBoxRenderable | null>,
   messages: any[],
-  agentRefsMap: React.MutableRefObject<Map<string, any>>,
 ) => {
   const autoScrollEnabledRef = useRef<boolean>(true)
   const programmaticScrollRef = useRef<boolean>(false)
@@ -67,53 +66,7 @@ export const useChatScrollbox = (
     animateScrollTo(maxScroll)
   }, [scrollRef, animateScrollTo])
 
-  const scrollToAgent = useCallback(
-    (agentId: string, retries = 5) => {
-      setTimeout(() => {
-        const scrollbox = scrollRef.current
-        if (!scrollbox) return
-
-        const agentElement = agentRefsMap.current.get(agentId)
-        if (!agentElement) {
-          if (retries > 0) {
-            scrollToAgent(agentId, retries - 1)
-          }
-          return
-        }
-
-        const agentViewportY = agentElement.y ?? 0
-        const agentHeight = agentElement.height ?? 0
-        const viewportHeight = scrollbox.viewport.height
-        const scrollHeight = scrollbox.scrollHeight
-        const currentScroll = scrollbox.scrollTop
-
-        const agentY = agentViewportY + currentScroll
-        const absoluteMaxScroll = Math.max(0, scrollHeight - viewportHeight)
-        const minScroll = Math.max(0, agentY + agentHeight - viewportHeight)
-        const maxScrollBound = Math.min(agentY, absoluteMaxScroll)
-
-        if (currentScroll >= minScroll && currentScroll <= maxScrollBound) {
-          return
-        }
-
-        const idealViewportY = Math.floor(viewportHeight / 3)
-        const idealScroll = agentY - idealViewportY
 
-        let targetScroll: number
-        if (minScroll > maxScrollBound) {
-          targetScroll = Math.min(agentY, absoluteMaxScroll)
-        } else {
-          targetScroll = Math.max(
-            minScroll,
-            Math.min(idealScroll, maxScrollBound),
-          )
-        }
-
-        animateScrollTo(targetScroll)
-      }, 100)
-    },
-    [scrollRef, agentRefsMap, animateScrollTo],
-  )
 
   useEffect(() => {
     const scrollbox = scrollRef.current
@@ -177,7 +130,6 @@ export const useChatScrollbox = (
 
   return {
     scrollToLatest,
-    scrollToAgent,
     scrollboxProps: {},
     isAtBottom,
   }