Keep tool call branches collapsed

Author: brandonkachen

cli/src/components/branch-item.tsx

@@ -32,8 +32,10 @@ interface BranchItemProps {
   statusColor?: string
   statusIndicator?: string
   theme: ChatTheme
-  onToggle: () => void
+  onToggle?: () => void
   showBorder?: boolean
+  toggleEnabled?: boolean
+  titleSuffix?: string
 }
 
 export const BranchItem = ({
@@ -52,6 +54,8 @@ export const BranchItem = ({
   theme,
   onToggle,
   showBorder = true,
+  toggleEnabled = true,
+  titleSuffix,
 }: BranchItemProps) => {
   const resolveFg = (
     color?: string | null,
@@ -80,9 +84,8 @@ export const BranchItem = ({
     ? theme.statusAccent
     : theme.chromeText ?? toggleFrameColor
   const toggleLabelColor = theme.chromeText ?? toggleFrameColor
-  const toggleLabel = `${
-    branchChar ? `${branchChar} ` : ''
-  }${isCollapsed ? '▸' : '▾'} `
+  const toggleIndicator = toggleEnabled ? (isCollapsed ? '▸ ' : '▾ ') : ''
+  const toggleLabel = `${branchChar}${toggleIndicator}`
   const collapseButtonFrame = theme.agentToggleExpandedBg
   const collapseButtonText = collapseButtonFrame
   const toggleFrameFg = resolveFg(toggleFrameColor, fallbackTextColor)
@@ -247,7 +250,7 @@ export const BranchItem = ({
             paddingBottom: isCollapsed ? 0 : 1,
             width: '100%',
           }}
-          onMouseDown={onToggle}
+          onMouseDown={toggleEnabled && onToggle ? onToggle : undefined}
         >
           <text style={{ wrapMode: 'none' }}>
             <span {...(toggleIconFg ? { fg: toggleIconFg } : undefined)}>
@@ -259,6 +262,14 @@ export const BranchItem = ({
             >
               {name}
             </span>
+            {titleSuffix ? (
+              <span
+                {...(toggleLabelFg ? { fg: toggleLabelFg } : undefined)}
+                attributes={TextAttributes.BOLD}
+              >
+                {` ${titleSuffix}`}
+              </span>
+            ) : null}
             {statusText ? (
               <span
                 fg={statusColor ?? theme.agentResponseCount}
@@ -331,22 +342,24 @@ export const BranchItem = ({
               </box>
             )}
             {renderExpandedContent(content)}
-            <box
-              style={{
-                alignSelf: 'flex-end',
-                marginTop: content ? 0 : 1,
-                paddingRight: showBorder ? 1 : 0,
-                paddingBottom: 0,
-                marginBottom: 0,
-              }}
-            >
-              <RaisedPill
-                segments={[{ text: 'Collapse', fg: collapseButtonText }]}
-                frameColor={collapseButtonFrame}
-                textColor={collapseButtonText}
-                onPress={onToggle}
-              />
-            </box>
+            {toggleEnabled && onToggle && (
+              <box
+                style={{
+                  alignSelf: 'flex-end',
+                  marginTop: content ? 0 : 1,
+                  paddingRight: showBorder ? 1 : 0,
+                  paddingBottom: 0,
+                  marginBottom: 0,
+                }}
+              >
+                <RaisedPill
+                  segments={[{ text: 'Collapse', fg: collapseButtonText }]}
+                  frameColor={collapseButtonFrame}
+                  textColor={collapseButtonText}
+                  onPress={onToggle}
+                />
+              </box>
+            )}
           </box>
         )}
       </box>

cli/src/components/message-block.tsx

@@ -86,7 +86,7 @@ export const MessageBlock = ({
     const ancestorPrefix = ancestorBranchStates
       .map((ancestorIsLast) => (ancestorIsLast ? '  ' : '│ '))
       .join('')
-    return `${ancestorPrefix}${isLastBranch ? '└─ ' : '├─ '}`
+    return `${ancestorPrefix}${isLastBranch ? '└ ' : '├ '}`
   }
 
   const renderContentWithMarkdown = (
@@ -161,7 +161,7 @@ export const MessageBlock = ({
     }
 
     const displayInfo = getToolDisplayInfo(toolBlock.toolName)
-    const isCollapsed = collapsedAgents.has(toolBlock.toolCallId)
+    const isCollapsed = true
     const isStreaming = streamingAgents.has(toolBlock.toolCallId)
 
     const inputContent = `\`\`\`json\n${JSON.stringify(toolBlock.input, null, 2)}\n\`\`\``
@@ -183,12 +183,11 @@ export const MessageBlock = ({
         : null
 
     const branchChar = computeBranchChar(ancestorBranchStates, isLastBranch)
-    const indentPrefix = branchChar.replace(/[├└]─\s*$/, '')
+    const indentPrefix = branchChar.replace(/[├└]\s*$/, '')
     const previewBasePrefix =
       indentPrefix.length > 0 ? `${indentPrefix}│ ` : '  │ '
-    const toggleLabel = `${branchChar ? `${branchChar} ` : ''}${isCollapsed ? '▸' : '▾'} `
     const branchIndentWidth = stringWidth(branchChar)
-    const headerPrefixWidth = stringWidth(toggleLabel)
+    const headerPrefixWidth = stringWidth(branchChar)
     const previewBaseWidth = stringWidth(previewBasePrefix)
     const alignmentPadding = Math.max(0, headerPrefixWidth - previewBaseWidth)
     const paddedPreviewPrefix = `${previewBasePrefix}${' '.repeat(alignmentPadding)}`
@@ -223,7 +222,7 @@ export const MessageBlock = ({
       toolRenderConfig.collapsedPreview ??
       getToolFinishedPreview(toolBlock, commandPreview, lastLine)
     const finishedPreview =
-      !isStreaming && isCollapsed ? formatPreview(collapsedPreviewBase) : ''
+      !isStreaming ? formatPreview(collapsedPreviewBase) : ''
     const agentMarkdownOptions = getAgentMarkdownOptions(indentLevel)
     const displayContent = renderContentWithMarkdown(
       fullContent,
@@ -265,9 +264,7 @@ export const MessageBlock = ({
       </box>
     ) : renderableDisplayContent
 
-    const headerName = toolRenderConfig.path
-      ? `${displayInfo.name} • ${toolRenderConfig.path}`
-      : displayInfo.name
+    const headerName = displayInfo.name
 
     return (
       <box
@@ -284,8 +281,9 @@ export const MessageBlock = ({
           streamingPreview={streamingPreview}
           finishedPreview={finishedPreview}
           theme={theme}
-          onToggle={() => onToggleCollapsed(toolBlock.toolCallId)}
           showBorder={false}
+          toggleEnabled={false}
+          titleSuffix={toolRenderConfig.path}
         />
       </box>
     )