From befd29212c0ac6658e5de15f8a3ec5967f094013 Mon Sep 17 00:00:00 2001
From: Kit Langton <kit.langton@gmail.com>
Date: Wed, 15 Jul 2026 17:13:20 -0400
Subject: [PATCH] fix(tui): align streaming shell output

---
 packages/tui/src/routes/session/index.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/tui/src/routes/session/index.tsx b/packages/tui/src/routes/session/index.tsx
index 592e0715a9..75d387521f 100644
--- a/packages/tui/src/routes/session/index.tsx
+++ b/packages/tui/src/routes/session/index.tsx
@@ -2386,9 +2386,14 @@ function Shell(props: ToolProps) {
   const input = createMemo(() => (command() ? `${isRunning() ? "" : "$ "}${command()}` : ""))
   const content = createMemo(() => [input(), output()].filter(Boolean).join("\n\n"))
   const collapsed = createMemo(() => collapseToolOutput(content(), maxLines, maxChars()))
-  const limited = createMemo(() => {
-    if (expanded() || !collapsed().overflow) return content()
-    return collapsed().output
+  const visible = createMemo(() => {
+    const command = input()
+    if (expanded()) return { input: command, output: output() }
+    const preview = collapsed().overflow ? collapsed().output : content()
+    return {
+      input: preview.slice(0, command.length),
+      output: preview.slice(command.length).replace(/^\n+/, ""),
+    }
   })
   const expandable = createMemo(() => Boolean(shellID()) || collapsed().overflow)
   const toggle = () => {
@@ -2413,18 +2418,17 @@ function Shell(props: ToolProps) {
           <Show
             when={isRunning()}
             fallback={
-              <text>
-                <span style={{ fg: themeV2.text() }}>{limited().slice(0, input().length)}</span>
-                <span style={{ fg: themeV2.text.subdued() }}>{limited().slice(input().length)}</span>
-              </text>
+              <text fg={themeV2.text()}>{visible().input}</text>
             }
           >
             <Spinner color={color()}>
-              <span style={{ fg: themeV2.text() }}>{limited().slice(0, input().length)}</span>
-              <span style={{ fg: themeV2.text.subdued() }}>{limited().slice(input().length)}</span>
+              <span style={{ fg: themeV2.text() }}>{visible().input}</span>
             </Spinner>
           </Show>
         </Show>
+        <Show when={visible().output}>
+          {(value) => <text fg={themeV2.text.subdued()}>{value()}</text>}
+        </Show>
         <Show when={shellID()}>
           <StatusBadge>Background</StatusBadge>
         </Show>