From 9388b94a97ee0df65b57c0d5e31d5380ec510a72 Mon Sep 17 00:00:00 2001
From: OpeOginni <107570612+OpeOginni@users.noreply.github.com>
Date: Wed, 30 Sep 2026 17:08:01 +0200
Subject: [PATCH] fix(tui): tighten expanded instruction group spacing (#52311)

---
 .../tui/src/routes/session/group-view.tsx     |  4 +-
 packages/tui/test/cli/tui/group-view.test.tsx | 49 +++++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/packages/tui/src/routes/session/group-view.tsx b/packages/tui/src/routes/session/group-view.tsx
index 6bb543b2e5a..91d7eb10d88 100644
--- a/packages/tui/src/routes/session/group-view.tsx
+++ b/packages/tui/src/routes/session/group-view.tsx
@@ -260,9 +260,7 @@ function InstructionsGroup(props: GroupProps) {
         Instructions: {files()} {files() === 1 ? "file" : "files"}
       </InlineToolRow>
       <Show when={disclosure.expanded()}>
-        <box flexDirection="column" gap={1} marginTop={1}>
-          <Children {...props} nodes={props.node.children} mode="normal" />
-        </box>
+        <Children {...props} nodes={props.node.children} mode="normal" />
       </Show>
     </GroupAnchor>
   )
diff --git a/packages/tui/test/cli/tui/group-view.test.tsx b/packages/tui/test/cli/tui/group-view.test.tsx
index 89b897961ac..90eceb2ee70 100644
--- a/packages/tui/test/cli/tui/group-view.test.tsx
+++ b/packages/tui/test/cli/tui/group-view.test.tsx
@@ -153,6 +153,55 @@ test("retains nested expansion state and registers exact headers and parts", asy
   expect(anchors.list()).toEqual([])
 })
 
+test("expanded instructions stay adjacent to their summary and each other", async () => {
+  const anchors = createTimelineAnchors()
+  const [expanded, setExpanded] = createStore<Record<string, boolean>>({})
+  const messages: SessionMessageInfo[] = ["AGENTS.md", "packages/tui/AGENTS.md"].map((path) => ({
+    type: "synthetic",
+    id: path,
+    text: "Instructions",
+    description: `Loaded ${path}`,
+    metadata: { instruction: { paths: [path] } },
+    time: { created: 1 },
+  }))
+  const row: SessionGroup = {
+    type: "group",
+    kind: "instructions",
+    size: messages.length,
+    completed: true,
+    children: messages.map((message) => ({
+      type: "entry",
+      size: 1,
+      entry: { type: "message", messageID: message.id },
+    })),
+  }
+  const app = await mount({
+    row,
+    anchors,
+    config: createTuiResolvedConfig({ animations: false }),
+    expanded: (id) => expanded[id],
+    setExpanded: (id, value) => setExpanded(id, value),
+    message: (id) => messages.find((message) => message.id === id),
+    entry: (entry) => <text>{entry.type === "message" ? `Loaded ${entry.messageID}` : ""}</text>,
+  })
+  try {
+    app.renderer.start()
+    await app.waitForFrame((frame) => frame.includes("Instructions: 2 files"))
+    expect(app.captureCharFrame()).not.toContain("Loaded AGENTS.md")
+    await app.mockMouse.click(4, anchors.get({ type: "group", groupID: groupID(row, 0)! })?.node.y ?? -1)
+    await app.renderOnce()
+    expect(
+      app
+        .captureCharFrame()
+        .split("\n")
+        .map((line) => line.trim())
+        .join("\n"),
+    ).toContain("◈ Instructions: 2 files\nLoaded AGENTS.md\nLoaded packages/tui/AGENTS.md")
+  } finally {
+    app.renderer.destroy()
+  }
+})
+
 test("a low activity group with nothing finished stays collapsed behind a status", async () => {
   const config = createTuiResolvedConfig({ animations: false })
   const shell = (id: string) => ({