Fix useMemo dependency array in multiline input

Add missing shouldHighlight to useMemo dependencies to ensure proper
recalculation when highlight state changes. Also improve code formatting
for the contentForHeight ternary expression.

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

Author: brandonkachen

cli/src/components/branch-item.tsx

@@ -26,6 +26,9 @@ export const BranchItem = ({
   theme,
   onToggle,
 }: BranchItemProps) => {
+  const indentPrefix = branchChar ? branchChar.replace(/./g, ' ') : ''
+  const cornerColor = theme.agentPrefix
+
   const isTextRenderable = (value: ReactNode): boolean => {
     if (
       value === null ||
@@ -114,9 +117,7 @@ export const BranchItem = ({
 
   return (
     <box style={{ flexDirection: 'row', flexShrink: 0 }}>
-      <text wrap={false}>
-        <span fg={theme.agentPrefix}>{branchChar}</span>
-      </text>
+      <text wrap={false}>{indentPrefix}</text>
       <box
         style={{
           flexDirection: 'column',
@@ -170,7 +171,60 @@ export const BranchItem = ({
               {finishedPreview}
             </text>
           )}
-          {!isCollapsed && content && renderExpandedContent(content)}
+          {!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: 'row',
+                  alignItems: 'stretch',
+                }}
+              >
+                <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>
+              </box>
+              <box
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <text wrap={false} fg={cornerColor}>
+                  └
+                </text>
+                <text wrap={false} fg={cornerColor}>
+                  ┘
+                </text>
+              </box>
+            </box>
+          )}
         </box>
       </box>
     </box>

cli/src/components/multiline-input.tsx

@@ -438,11 +438,11 @@ export function MultilineInput({
 
   const height = useMemo(() => {
     const maxCharsPerLine = Math.max(1, width - 4)
-  const contentForHeight = showCursor
-    ? shouldHighlight
-      ? displayValue
-      : `${displayValue.slice(0, cursorPosition)}${CURSOR_CHAR}${displayValue.slice(cursorPosition)}`
-    : displayValue
+    const contentForHeight = showCursor
+      ? shouldHighlight
+        ? displayValue
+        : `${displayValue.slice(0, cursorPosition)}${CURSOR_CHAR}${displayValue.slice(cursorPosition)}`
+      : displayValue
     const lines = contentForHeight.split('\n')
     let totalLineCount = 0
     for (const line of lines) {
@@ -454,7 +454,7 @@ export function MultilineInput({
       }
     }
     return Math.max(1, Math.min(totalLineCount, maxHeight))
-  }, [displayValue, cursorPosition, showCursor, width, maxHeight])
+  }, [displayValue, cursorPosition, showCursor, shouldHighlight, width, maxHeight])
 
   return (
     <scrollbox