From f4d259df4c7e785e41dd90b0891331e066d3c429 Mon Sep 17 00:00:00 2001
From: HiranoMasaaki <lambda.groove@gmail.com>
Date: Wed, 4 Mar 2026 16:36:25 +0000
Subject: [PATCH 1/2] refactor: flatten delegation tree node to single Text
 with truncate

Replace nested Box+Text structure with a single Text element using
wrap="truncate", avoiding Ink flex layout issues entirely.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../execution/components/delegation-tree.tsx  | 42 ++++++-------------
 1 file changed, 12 insertions(+), 30 deletions(-)

diff --git a/packages/tui-components/src/execution/components/delegation-tree.tsx b/packages/tui-components/src/execution/components/delegation-tree.tsx
index 597acc60..4adc9631 100644
--- a/packages/tui-components/src/execution/components/delegation-tree.tsx
+++ b/packages/tui-components/src/execution/components/delegation-tree.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from "ink"
+import { Text } from "ink"
 import type React from "react"
 import { colors } from "../../colors.js"
 import { USAGE_INDICATORS } from "../../constants.js"
@@ -56,35 +56,17 @@ function TreeNodeLine({
   const showUsage = node.status !== "completed"
 
   return (
-    <Box>
-      <Text>
-        <Text dimColor>{prefix}</Text>
-        {indicator}
-        <Text> </Text>
-        <Text bold>{node.expertName}</Text>
-        <Text dimColor>: </Text>
-      </Text>
-      <Box 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>
-              <Text dimColor>{node.model}</Text>
-            </>
-          ) : null}
-          <Text dimColor> · </Text>
-          <Text>
-            {usageIcon} {usagePercent}%
-          </Text>
-        </Text>
-      ) : null}
-    </Box>
+    <Text wrap="truncate">
+      <Text dimColor>{prefix}</Text>
+      {indicator}
+      <Text> </Text>
+      <Text bold>{node.expertName}</Text>
+      {node.model ? <Text dimColor> · {node.model}</Text> : null}
+      {showUsage ? <Text> <Text dimColor>·</Text> {usageIcon} {usagePercent}%</Text> : null}
+      <Text dimColor> · </Text>
+      {node.actionLabel}
+      {node.actionFileArg ? <Text color={colors.muted}> {node.actionFileArg}</Text> : null}
+    </Text>
   )
 }
 

From 64edba51e92f97aa955dc66a3175a0ff8243d600 Mon Sep 17 00:00:00 2001
From: HiranoMasaaki <lambda.groove@gmail.com>
Date: Wed, 4 Mar 2026 16:43:52 +0000
Subject: [PATCH 2/2] chore: add changeset for delegation tree refactor

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .changeset/flatten-delegation-tree-text.md                 | 6 ++++++
 .../src/execution/components/delegation-tree.tsx           | 7 ++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/flatten-delegation-tree-text.md

diff --git a/.changeset/flatten-delegation-tree-text.md b/.changeset/flatten-delegation-tree-text.md
new file mode 100644
index 00000000..6b9bec21
--- /dev/null
+++ b/.changeset/flatten-delegation-tree-text.md
@@ -0,0 +1,6 @@
+---
+"@perstack/tui-components": patch
+"perstack": patch
+---
+
+Flatten delegation tree node to single Text element with truncate, reorder columns so action is last
diff --git a/packages/tui-components/src/execution/components/delegation-tree.tsx b/packages/tui-components/src/execution/components/delegation-tree.tsx
index 4adc9631..15aabbc9 100644
--- a/packages/tui-components/src/execution/components/delegation-tree.tsx
+++ b/packages/tui-components/src/execution/components/delegation-tree.tsx
@@ -62,7 +62,12 @@ function TreeNodeLine({
       <Text> </Text>
       <Text bold>{node.expertName}</Text>
       {node.model ? <Text dimColor> · {node.model}</Text> : null}
-      {showUsage ? <Text> <Text dimColor>·</Text> {usageIcon} {usagePercent}%</Text> : null}
+      {showUsage ? (
+        <Text>
+          {" "}
+          <Text dimColor>·</Text> {usageIcon} {usagePercent}%
+        </Text>
+      ) : null}
       <Text dimColor> · </Text>
       {node.actionLabel}
       {node.actionFileArg ? <Text color={colors.muted}> {node.actionFileArg}</Text> : null}