From 27d6920d6033e2c84c637fabea75c3209b9da4bc Mon Sep 17 00:00:00 2001
From: Kit Langton <kit.langton@gmail.com>
Date: Tue, 26 May 2026 11:53:33 -0400
Subject: [PATCH] fix(tui): preserve spacing after tool blocks

---
 .../src/cli/cmd/tui/routes/session/index.tsx  |  3 +-
 .../inline-tool-wrap-snapshot.test.tsx.snap   | 19 +++++++++++
 .../tui/inline-tool-wrap-snapshot.test.tsx    | 33 +++++++++++++++++--
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 6f18f02a9..8ca86209e 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -1793,7 +1793,7 @@ function InlineTool(props: {
         const children = parent.getChildren()
         const index = children.indexOf(el)
         const previous = children[index - 1]
-        setMargin(previous?.id.startsWith("text-") ? 1 : 0)
+        setMargin(previous?.id.startsWith("text-") || previous?.id.startsWith("tool-block-") ? 1 : 0)
       }}
     >
       <Switch>
@@ -1850,6 +1850,7 @@ function BlockTool(props: {
   const error = createMemo(() => (props.part?.state.status === "error" ? props.part.state.error : undefined))
   return (
     <box
+      id={props.part ? "tool-block-" + props.part.id : undefined}
       border={["left"]}
       paddingTop={1}
       paddingBottom={1}
diff --git a/packages/opencode/test/cli/tui/__snapshots__/inline-tool-wrap-snapshot.test.tsx.snap b/packages/opencode/test/cli/tui/__snapshots__/inline-tool-wrap-snapshot.test.tsx.snap
index 6cb0df1e2..16dbf7be7 100644
--- a/packages/opencode/test/cli/tui/__snapshots__/inline-tool-wrap-snapshot.test.tsx.snap
+++ b/packages/opencode/test/cli/tui/__snapshots__/inline-tool-wrap-snapshot.test.tsx.snap
@@ -20,3 +20,22 @@ exports[`TUI inline tool wrapping snapshots expanded tool errors under the tool
    ✱ Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
      Path\\.data|data =" in packages/opencode/src (115 matches)"
 `;
+
+exports[`TUI inline tool wrapping keeps separation after a shell output block 1`] = `
+"
+
+  # List files
+
+  $ ls
+
+  file.ts
+
+
+   ✱ Grep "OPENCODE.*DB|database|sqlite|drizzle|dev.*db|data.
+     *dir|xdg|APPDATA" in packages/opencode/src (151 matches)
+   ✱ Glob "**/*db*" in packages/opencode (6 matches)
+   → Read packages/opencode/src/storage/db.ts [offset=1, limit=130]
+   → Read packages/opencode/src/index.ts [offset=1, limit=100]
+   ✱ Grep "export const OPENCODE_DB|OPENCODE_DB|OPENCODE_DEV|Global\\.
+     Path\\.data|data =" in packages/opencode/src (115 matches)"
+`;
diff --git a/packages/opencode/test/cli/tui/inline-tool-wrap-snapshot.test.tsx b/packages/opencode/test/cli/tui/inline-tool-wrap-snapshot.test.tsx
index c7aa4708e..40c926b6f 100644
--- a/packages/opencode/test/cli/tui/inline-tool-wrap-snapshot.test.tsx
+++ b/packages/opencode/test/cli/tui/inline-tool-wrap-snapshot.test.tsx
@@ -49,7 +49,8 @@ function InlineToolRow(props: { item: ToolFixture; errorExpanded?: boolean }) {
       renderBefore={function () {
         const parent = this.parent
         if (!parent) return
-        setMargin(parent.getChildren()[parent.getChildren().indexOf(this) - 1]?.id.startsWith("text-") ? 1 : 0)
+        const previous = parent.getChildren()[parent.getChildren().indexOf(this) - 1]
+        setMargin(previous?.id.startsWith("text-") || previous?.id.startsWith("tool-block-") ? 1 : 0)
       }}
     >
       <box flexDirection="row">
@@ -65,10 +66,23 @@ function InlineToolRow(props: { item: ToolFixture; errorExpanded?: boolean }) {
   )
 }
 
-function Fixture(props: { errorExpanded?: boolean }) {
+function ShellOutput() {
+  return (
+    <box id="tool-block-shell" marginTop={1} paddingTop={1} paddingBottom={1} paddingLeft={2} gap={1}>
+      <text paddingLeft={3}># List files</text>
+      <box gap={1}>
+        <text>$ ls</text>
+        <text>file.ts</text>
+      </box>
+    </box>
+  )
+}
+
+function Fixture(props: { errorExpanded?: boolean; shellOutput?: boolean }) {
   return (
     <box flexDirection="column" width={72}>
       <box flexDirection="column">
+        {props.shellOutput && <ShellOutput />}
         <For each={tools}>{(item) => <InlineToolRow item={item} errorExpanded={props.errorExpanded} />}</For>
       </box>
     </box>
@@ -105,4 +119,19 @@ describe("TUI inline tool wrapping", () => {
         .trimEnd(),
     ).toMatchSnapshot()
   })
+
+  test("keeps separation after a shell output block", async () => {
+    testSetup = await testRender(() => <Fixture shellOutput />, { width: 72, height: 16 })
+    await testSetup.renderOnce()
+    await testSetup.renderOnce()
+
+    expect(
+      testSetup
+        .captureCharFrame()
+        .split("\n")
+        .map((line) => line.trimEnd())
+        .join("\n")
+        .trimEnd(),
+    ).toMatchSnapshot()
+  })
 })