Refactor branch item UI with bordered containers and merged headers

Completely redesigned the visual presentation of agent and tool call blocks:
- Replace corner characters with proper OpenTUI bordered containers
- Merge header into border when expanded for cleaner appearance
- Add collapsible footer with "collapse" text for better UX
- Refactor nested content rendering into reusable functions
- Consistently filter hidden tools (spawn_agent_inline, end_turn, spawn_agents)
- Optimize hidden tools check using Set instead of Array

The new design provides clearer visual boundaries and reduces clutter
while maintaining full functionality.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

cli/src/components/branch-item.tsx

@@ -15,6 +15,20 @@ interface BranchItemProps {
   onToggle: () => void
 }
 
+const BRANCH_BORDER_CHARS = {
+  topLeft: '┌',
+  topRight: '┐',
+  bottomLeft: '└',
+  bottomRight: '┘',
+  horizontal: '─',
+  vertical: '│',
+  topT: '┬',
+  bottomT: '┴',
+  leftT: '├',
+  rightT: '┤',
+  cross: '┼',
+} as const
+
 export const BranchItem = ({
   name,
   content,
@@ -28,6 +42,8 @@ export const BranchItem = ({
 }: BranchItemProps) => {
   const indentPrefix = branchChar ? branchChar.replace(/./g, ' ') : ''
   const cornerColor = theme.agentPrefix
+  const shouldMergeHeader = !isCollapsed && !!content
+  const outerPaddingRight = branchChar ? 1 : 0
 
   const isTextRenderable = (value: ReactNode): boolean => {
     if (
@@ -116,40 +132,52 @@ export const BranchItem = ({
   }
 
   return (
-    <box style={{ flexDirection: 'row', flexShrink: 0 }}>
+    <box
+      style={{
+        flexDirection: 'row',
+        flexShrink: 0,
+        paddingRight: outerPaddingRight,
+      }}
+    >
       <text wrap={false}>{indentPrefix}</text>
       <box
         style={{
           flexDirection: 'column',
           gap: 0,
           flexShrink: 1,
           flexGrow: 1,
+          marginTop: isCollapsed ? 1 : 0,
+          marginBottom: isCollapsed ? 1 : 0,
         }}
       >
-        <box
-          style={{
-            flexDirection: 'row',
-            alignSelf: 'flex-start',
-            backgroundColor: isCollapsed
-              ? theme.agentResponseCount
-              : theme.agentPrefix,
-            paddingLeft: 1,
-            paddingRight: 1,
-          }}
-          onMouseDown={onToggle}
-        >
-          <text wrap>
-            <span fg={theme.agentToggleText}>
-              {isCollapsed ? '▸ ' : '▾ '}
-            </span>
-            <span
-              fg={theme.agentToggleText}
-              attributes={TextAttributes.BOLD}
-            >
-              {name}
-            </span>
-          </text>
-        </box>
+        {!shouldMergeHeader && (
+          <box
+            style={{
+              flexDirection: 'row',
+              alignSelf: 'flex-start',
+              backgroundColor: isCollapsed
+                ? theme.agentResponseCount
+                : theme.agentPrefix,
+              paddingLeft: 4,
+              paddingRight: 4,
+              paddingTop: 0,
+              paddingBottom: 0,
+            }}
+            onMouseDown={onToggle}
+          >
+            <text wrap>
+              <span fg={theme.agentToggleText}>
+                {isCollapsed ? '▸ ' : '▾ '}
+              </span>
+              <span
+                fg={theme.agentToggleText}
+                attributes={TextAttributes.BOLD}
+              >
+                {name}
+              </span>
+            </text>
+          </box>
+        )}
         <box style={{ flexShrink: 1, marginBottom: 0 }}>
           {isStreaming && isCollapsed && streamingPreview && (
             <text
@@ -172,55 +200,62 @@ export const BranchItem = ({
             </text>
           )}
           {!isCollapsed && content && (
-            <box style={{ flexDirection: 'column', gap: 0 }}>
-              <box
-                style={{
-                  flexDirection: 'row',
-                  justifyContent: 'space-between',
-                }}
-              >
-                <text wrap={false} fg={cornerColor}>
-                  ┌
-                </text>
-                <text wrap={false} fg={cornerColor}>
-                  ┐
-                </text>
-              </box>
+            <box style={{ flexDirection: 'column', gap: 0, marginTop: 1 }}>
               <box
                 style={{
-                  flexDirection: 'row',
-                  alignItems: 'stretch',
+                  flexDirection: 'column',
+                  gap: 0,
+                  width: '100%',
+                  border: ['top', 'left', 'right', 'bottom'],
+                  customBorderChars: BRANCH_BORDER_CHARS,
+                  borderColor: cornerColor,
+                  paddingLeft: 1,
+                  paddingRight: 2,
+                  paddingTop: 1,
+                  paddingBottom: 1,
                 }}
               >
-                <text wrap={false} fg={cornerColor}>
-                  │
-                </text>
-                <box
-                  style={{
-                    flexDirection: 'column',
-                    gap: 0,
-                    flexGrow: 1,
-                    marginLeft: 1,
-                    marginRight: 1,
-                  }}
-                >
-                  {renderExpandedContent(content)}
-                </box>
-                <text wrap={false} fg={cornerColor}>
-                  │
-                </text>
+                {shouldMergeHeader && (
+                  <box
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'flex-start',
+                      backgroundColor: theme.agentPrefix,
+                      paddingLeft: 4,
+                      paddingRight: 4,
+                      paddingTop: 0,
+                      paddingBottom: 0,
+                      marginBottom: 1,
+                      width: '100%',
+                    }}
+                    onMouseDown={onToggle}
+                  >
+                    <text wrap>
+                      <span fg={theme.agentToggleText}>{'▾ '}</span>
+                      <span
+                        fg={theme.agentToggleText}
+                        attributes={TextAttributes.BOLD}
+                      >
+                        {name}
+                      </span>
+                    </text>
+                  </box>
+                )}
+                {renderExpandedContent(content)}
               </box>
               <box
                 style={{
                   flexDirection: 'row',
-                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginTop: 0,
+                  paddingLeft: 1,
+                  paddingRight: 2,
                 }}
+                onMouseDown={onToggle}
               >
-                <text wrap={false} fg={cornerColor}>
-                  └
-                </text>
-                <text wrap={false} fg={cornerColor}>
-                  ┘
+                <text fg={theme.agentToggleText} attributes={TextAttributes.DIM}>
+                  collapse
                 </text>
               </box>
             </box>