feat: auto-expand root level agents only and remember the agents user

manually opens

Author: brandonkachen

cli/src/chat.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 
+import type { ContentBlock } from './types/chat'
+
 import { routeUserPrompt } from './commands/router'
 import { AgentModeToggle } from './components/agent-mode-toggle'
 import { BuildModeButtons } from './components/build-mode-buttons'
@@ -87,6 +89,11 @@ export const App = ({
     null,
   )
 
+  // Track which agent toggles the user has manually opened.
+  const [userOpenedAgents, setUserOpenedAgents] = useState<Set<string>>(
+    new Set(),
+  )
+
   const {
     inputValue,
     setInputValue,
@@ -149,6 +156,29 @@ export const App = ({
     })),
   )
 
+  // Memoize toggle IDs extraction - only recompute when messages change
+  const allToggleIds = useMemo(() => {
+    const ids = new Set<string>()
+
+    const extractFromBlocks = (blocks: ContentBlock[] | undefined) => {
+      if (!blocks) return
+      for (const block of blocks) {
+        if (block.type === 'agent') {
+          ids.add(block.agentId)
+          extractFromBlocks(block.blocks)
+        } else if (block.type === 'tool') {
+          ids.add(block.toolCallId)
+        }
+      }
+    }
+
+    for (const message of messages) {
+      extractFromBlocks(message.blocks)
+    }
+
+    return ids
+  }, [messages])
+
   const {
     isAuthenticated,
     setIsAuthenticated,
@@ -559,12 +589,15 @@ export const App = ({
   )
 
   const { sendMessage, clearMessages } = useSendMessage({
+    messages,
+    allToggleIds,
     setMessages,
     setFocusedAgentId,
     setInputFocused,
     inputRef,
     setStreamingAgents,
     setCollapsedAgents,
+    userOpenedAgents,
     activeSubagentsRef,
     isChainInProgressRef,
     setActiveSubagents,
@@ -694,6 +727,8 @@ export const App = ({
     timer: mainAgentTimer,
     setCollapsedAgents,
     setFocusedAgentId,
+    userOpenedAgents,
+    setUserOpenedAgents,
   })
 
   const virtualizationNotice =

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

@@ -27,6 +27,8 @@ interface UseMessageRendererProps {
   timer: ElapsedTimeTracker
   setCollapsedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
   setFocusedAgentId: React.Dispatch<React.SetStateAction<string | null>>
+  userOpenedAgents: Set<string>
+  setUserOpenedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
 }
 
 export const useMessageRenderer = (
@@ -45,6 +47,8 @@ export const useMessageRenderer = (
     timer,
     setCollapsedAgents,
     setFocusedAgentId,
+    userOpenedAgents,
+    setUserOpenedAgents,
   } = props
 
   return useMemo(() => {
@@ -94,6 +98,8 @@ export const useMessageRenderer = (
           e.stopPropagation()
         }
 
+        const wasCollapsed = collapsedAgents.has(message.id)
+
         setCollapsedAgents((prev) => {
           const next = new Set(prev)
 
@@ -108,6 +114,19 @@ export const useMessageRenderer = (
           return next
         })
 
+        // Track user interaction: if they're opening it, mark as user-opened
+        setUserOpenedAgents((prev) => {
+          const next = new Set(prev)
+          if (wasCollapsed) {
+            // User is opening it, mark as user-opened
+            next.add(message.id)
+          } else {
+            // User is closing it, remove from user-opened
+            next.delete(message.id)
+          }
+          return next
+        })
+
         setFocusedAgentId(message.id)
       }
 
@@ -349,6 +368,7 @@ export const useMessageRenderer = (
                     collapsedAgents={collapsedAgents}
                     streamingAgents={streamingAgents}
                     onToggleCollapsed={(id: string) => {
+                      const wasCollapsed = collapsedAgents.has(id)
                       setCollapsedAgents((prev) => {
                         const next = new Set(prev)
                         if (next.has(id)) {
@@ -358,6 +378,18 @@ export const useMessageRenderer = (
                         }
                         return next
                       })
+                      // Track user interaction
+                      setUserOpenedAgents((prev) => {
+                        const next = new Set(prev)
+                        if (wasCollapsed) {
+                          // User is opening it, mark as user-opened
+                          next.add(id)
+                        } else {
+                          // User is closing it, remove from user-opened
+                          next.delete(id)
+                        }
+                        return next
+                      })
                     }}
                   />
                 </box>
@@ -397,6 +429,7 @@ export const useMessageRenderer = (
                   collapsedAgents={collapsedAgents}
                   streamingAgents={streamingAgents}
                   onToggleCollapsed={(id: string) => {
+                    const wasCollapsed = collapsedAgents.has(id)
                     setCollapsedAgents((prev) => {
                       const next = new Set(prev)
                       if (next.has(id)) {
@@ -406,6 +439,18 @@ export const useMessageRenderer = (
                       }
                       return next
                     })
+                    // Track user interaction
+                    setUserOpenedAgents((prev) => {
+                      const next = new Set(prev)
+                      if (wasCollapsed) {
+                        // User is opening it, mark as user-opened
+                        next.add(id)
+                      } else {
+                        // User is closing it, remove from user-opened
+                        next.delete(id)
+                      }
+                      return next
+                    })
                   }}
                 />
               </box>
@@ -443,6 +488,8 @@ export const useMessageRenderer = (
     streamingAgents,
     isWaitingForResponse,
     setCollapsedAgents,
+    setUserOpenedAgents,
     setFocusedAgentId,
+    userOpenedAgents,
   ])
 }

cli/src/hooks/use-send-message.ts

@@ -2,7 +2,7 @@ import { has } from 'lodash'
 import { useCallback, useEffect, useRef } from 'react'
 
 import { getCodebuffClient, formatToolOutput } from '../utils/codebuff-client'
-import { shouldHideAgent } from '../utils/constants'
+import { MAIN_AGENT_ID, shouldHideAgent } from '../utils/constants'
 import { createValidationErrorBlocks } from '../utils/create-validation-error-blocks'
 import { getErrorObject } from '../utils/error'
 import { formatTimestamp } from '../utils/helpers'
@@ -49,6 +49,7 @@ const updateBlocksRecursively = (
   })
 }
 
+
 export type SendMessageTimerEvent =
   | {
       type: 'start'
@@ -142,12 +143,15 @@ export const createSendMessageTimerController = (
 }
 
 interface UseSendMessageOptions {
+  messages: ChatMessage[]
+  allToggleIds: Set<string>
   setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>
   setFocusedAgentId: (id: string | null) => void
   setInputFocused: (focused: boolean) => void
   inputRef: React.MutableRefObject<any>
   setStreamingAgents: React.Dispatch<React.SetStateAction<Set<string>>>
   setCollapsedAgents: React.Dispatch<React.SetStateAction<Set<string>>>
+  userOpenedAgents: Set<string>
   activeSubagentsRef: React.MutableRefObject<Set<string>>
   isChainInProgressRef: React.MutableRefObject<boolean>
   setActiveSubagents: React.Dispatch<React.SetStateAction<Set<string>>>
@@ -171,12 +175,15 @@ interface UseSendMessageOptions {
 }
 
 export const useSendMessage = ({
+  messages,
+  allToggleIds,
   setMessages,
   setFocusedAgentId,
   setInputFocused,
   inputRef,
   setStreamingAgents,
   setCollapsedAgents,
+  userOpenedAgents,
   activeSubagentsRef,
   isChainInProgressRef,
   setActiveSubagents,
@@ -340,6 +347,10 @@ export const useSendMessage = ({
         agentId,
       })
 
+      // Use memoized toggle IDs from the store selector
+      // This is computed efficiently in the Zustand store
+      const previousToggleIds = allToggleIds
+
       // Add user message to UI first
       const userMessage: ChatMessage = {
         id: `user-${Date.now()}`,
@@ -360,6 +371,19 @@ export const useSendMessage = ({
       })
       await yieldToEventLoop()
 
+      // Auto-collapse previous message toggles to minimize clutter.
+      // Respects user intent by keeping toggles open that the user manually expanded.
+      setCollapsedAgents((prev) => {
+        const next = new Set(prev)
+        // Add all previous toggle IDs to collapsed, except those the user manually opened
+        for (const id of previousToggleIds) {
+          if (!userOpenedAgents.has(id)) {
+            next.add(id)
+          }
+        }
+        return next
+      })
+
       // Scroll to bottom after user message appears
       setTimeout(() => scrollToLatest(), 0)
 
@@ -966,6 +990,10 @@ export const useSendMessage = ({
                     setCollapsedAgents((prev) => {
                       const next = new Set(prev)
                       next.delete(tempId)
+                      // Only collapse if parent is NOT main agent (i.e., it's a nested agent)
+                      if (event.parentAgentId && event.parentAgentId !== MAIN_AGENT_ID) {
+                        next.add(event.agentId)
+                      }
                       return next
                     })
 
@@ -1062,6 +1090,10 @@ export const useSendMessage = ({
                   )
 
                   setStreamingAgents((prev) => new Set(prev).add(event.agentId))
+                  // Only collapse if parent is NOT main agent (i.e., it's a nested agent)
+                  if (event.parentAgentId && event.parentAgentId !== MAIN_AGENT_ID) {
+                    setCollapsedAgents((prev) => new Set(prev).add(event.agentId))
+                  }
                 }
               }
             } else if (event.type === 'subagent_finish') {
@@ -1438,6 +1470,8 @@ export const useSendMessage = ({
       inputRef,
       setStreamingAgents,
       setCollapsedAgents,
+      allToggleIds,
+      userOpenedAgents,
       activeSubagentsRef,
       isChainInProgressRef,
       setIsWaitingForResponse,

cli/src/utils/constants.ts

@@ -8,5 +8,10 @@ export const shouldHideAgent = (agentId: string): boolean => {
   return HIDDEN_AGENT_IDS.some((hiddenId) => agentId.includes(hiddenId))
 }
 
+/**
+ * The parent agent ID for all root-level agents
+ */
+export const MAIN_AGENT_ID = 'main-agent'
+
 const agentModes = ['FAST', 'MAX', 'PLAN'] as const
 export type AgentMode = (typeof agentModes)[number]