fix: patch text wrapping (#521)

Co-authored-by: Letta <noreply@letta.com>

src/cli/components/CollapsedOutputDisplay.tsx

@@ -1,7 +1,9 @@
 import { Box, Text } from "ink";
 import { memo } from "react";
+import { useTerminalWidth } from "../hooks/useTerminalWidth";
 
 const COLLAPSED_LINES = 3;
+const PREFIX_WIDTH = 5; // "  ⎿  " or "     "
 
 interface CollapsedOutputDisplayProps {
   output: string; // Full output from completion
@@ -10,10 +12,14 @@ interface CollapsedOutputDisplayProps {
 /**
  * Display component for bash output after completion.
  * Shows first 3 lines with count of hidden lines.
+ * Uses proper two-column layout with width constraints for correct wrapping.
  * Note: expand/collapse (ctrl+o) is deferred to a future PR.
  */
 export const CollapsedOutputDisplay = memo(
   ({ output }: CollapsedOutputDisplayProps) => {
+    const columns = useTerminalWidth();
+    const contentWidth = Math.max(0, columns - PREFIX_WIDTH);
+
     // Keep empty lines for accurate display (don't filter them out)
     const lines = output.split("\n");
     // Remove trailing empty line from final newline
@@ -31,23 +37,36 @@ export const CollapsedOutputDisplay = memo(
     return (
       <Box flexDirection="column">
         {/* L-bracket on first line - matches ToolCallMessageRich format "  ⎿  " */}
-        <Box>
-          <Text>{"  ⎿  "}</Text>
-          <Text>{visibleLines[0]}</Text>
+        <Box flexDirection="row">
+          <Box width={PREFIX_WIDTH} flexShrink={0}>
+            <Text>{"  ⎿  "}</Text>
+          </Box>
+          <Box flexGrow={1} width={contentWidth}>
+            <Text wrap="wrap">{visibleLines[0]}</Text>
+          </Box>
         </Box>
         {/* Remaining visible lines with indent (5 spaces to align with content after bracket) */}
         {visibleLines.slice(1).map((line, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: Lines are positional output, stable order within render
-          <Text key={i}>
-            {"     "}
-            {line}
-          </Text>
+          <Box key={i} flexDirection="row">
+            <Box width={PREFIX_WIDTH} flexShrink={0}>
+              <Text>{"     "}</Text>
+            </Box>
+            <Box flexGrow={1} width={contentWidth}>
+              <Text wrap="wrap">{line}</Text>
+            </Box>
+          </Box>
         ))}
         {/* Hidden count hint */}
         {hiddenCount > 0 && (
-          <Text dimColor>
-            {"     "}… +{hiddenCount} lines
-          </Text>
+          <Box flexDirection="row">
+            <Box width={PREFIX_WIDTH} flexShrink={0}>
+              <Text>{"     "}</Text>
+            </Box>
+            <Box flexGrow={1} width={contentWidth}>
+              <Text dimColor>… +{hiddenCount} lines</Text>
+            </Box>
+          </Box>
         )}
       </Box>
     );