fix: prevent delegation tree line wrapping with flex truncation (#694)

Use Box flexGrow/flexShrink layout so the activity portion (actionLabel
+ fileArg) truncates with ellipsis instead of wrapping to a second line
when the terminal is too narrow.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: FL4TLiN3

.changeset/fix-delegation-tree-truncate.md

@@ -0,0 +1,5 @@
+---
+"@perstack/tui-components": patch
+---
+
+fix: prevent delegation tree line wrapping by truncating long activity text

packages/tui-components/src/execution/components/delegation-tree.tsx

@@ -1,4 +1,4 @@
-import { Text } from "ink"
+import { Box, Text } from "ink"
 import type React from "react"
 import { colors } from "../../colors.js"
 import { USAGE_INDICATORS } from "../../constants.js"
@@ -56,16 +56,22 @@ function TreeNodeLine({
   const showUsage = node.status !== "completed"
 
   return (
-    <Text>
-      <Text dimColor>{prefix}</Text>
-      {indicator}
-      <Text> </Text>
-      <Text bold>{node.expertName}</Text>
-      <Text dimColor>: </Text>
-      <Text>{node.actionLabel}</Text>
-      {node.actionFileArg ? <Text color={colors.muted}> {node.actionFileArg}</Text> : null}
+    <Box>
+      <Text>
+        <Text dimColor>{prefix}</Text>
+        {indicator}
+        <Text> </Text>
+        <Text bold>{node.expertName}</Text>
+        <Text dimColor>: </Text>
+      </Text>
+      <Box flexGrow={1} flexShrink={1}>
+        <Text wrap="truncate">
+          {node.actionLabel}
+          {node.actionFileArg ? <Text color={colors.muted}> {node.actionFileArg}</Text> : null}
+        </Text>
+      </Box>
       {showUsage ? (
-        <>
+        <Text>
           {node.model ? (
             <>
               <Text dimColor> · </Text>
@@ -76,9 +82,9 @@ function TreeNodeLine({
           <Text>
             {usageIcon} {usagePercent}%
           </Text>
-        </>
+        </Text>
       ) : null}
-    </Text>
+    </Box>
   )
 }