fix(server): reuse provider image files across daemon restarts

Integrate persistent provider-image storage with current main while retaining image paragraph boundaries. Replaying identical image bytes must reuse the existing content-addressed file instead of leaving another temporary copy after each restart.

Co-authored-by: Christoph Leiter <christoph@leiter.io>

docs/agent-lifecycle.md

@@ -242,7 +242,7 @@ parentAgentId === thisAgent.id  AND  !archivedAt
 
 - **Provider subagents** are child executions owned by Claude, Codex, or OpenCode. They are not inserted into `AgentManager` as managed agents. Providers emit a separate descriptor and timeline stream through `agent.provider_subagents.*`; the client keeps that state outside the normal agent store and merges only the presentation rows into the track. A descriptor's optional `parentSubagentId` identifies its direct provider-subagent parent; an absent value identifies a direct child of the managed agent.
 
-Clicking either kind opens a workspace tab. On compact layouts it opens in a [sheet](explorer-sidebar.md#sheets) over the subagents list instead; the sheet hides the composer and shows the agent's model and thinking as one line in its place (`PaneSubtitle`, the row provider subagents already use), and a Paseo subagent's sheet offers **Open as tab** (the full-screen glyph in the header) to get the composer back. A Paseo subagent tab is a normal interactive agent pane. A provider subagent tab is a read-only timeline pane with no composer, archive, detach, rewind, or fork actions. It shows its own direct children in a subagents track. Both panes use `AgentStreamView`, so message, reasoning, tool-call, and layout rendering stay identical.
+Clicking either kind opens a workspace tab. On compact layouts it opens in a [sheet](explorer-sidebar.md#sheets) over the subagents list instead; the sheet hides the composer and shows the agent's model and thinking as one line in its place (`PaneSubtitle`, the row provider subagents already use), and a Paseo subagent's sheet offers **Open as tab** (the full-screen glyph in the header) to get the composer back. A Paseo subagent tab is a normal interactive agent pane. A provider subagent tab is a read-only timeline pane with no composer, archive, detach, rewind, or fork actions. It shows its own direct children in a subagents track. Every subagent pane links back to its parent (`packages/app/src/subagents/parent/`): a pill above the composer when there is one, a parent box in the composer's place when there is not. Both panes use `AgentStreamView`, so message, reasoning, tool-call, and layout rendering stay identical.
 
 Provider timelines use the same structural timeline item format but deliberately have a separate lifecycle and transport. A provider thread/session identifier is not a Paseo agent identifier, and closing its tab is always layout-only.
 

packages/app/e2e/browser/assistant-file-link-tooltip.spec.ts

@@ -0,0 +1,69 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { test, expect, type Page } from "../support/fixtures";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+
+async function readFileLinkTooltip(page: Page): Promise<void> {
+  const link = page.getByRole("link", { name: "the guide", exact: true });
+  await link.hover();
+  await expect(page.getByRole("tooltip")).toContainText("guide.md");
+}
+
+async function leaveFileLink(page: Page): Promise<void> {
+  await page.mouse.move(5, 5);
+  await expect(page.getByRole("tooltip")).toHaveCount(0);
+}
+
+async function openLinkedFile(page: Page): Promise<void> {
+  await page.getByRole("link", { name: "the guide", exact: true }).click();
+  await expect(page.getByTestId("markdown-preview-frame")).toContainText("Example guide");
+  await leaveFileLink(page);
+}
+
+async function returnToAgent(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Tooltip regression", exact: true }).click();
+  await expect(page.getByRole("link", { name: "the guide", exact: true })).toBeVisible();
+  await leaveFileLink(page);
+}
+
+async function switchToFileTab(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "guide.md", exact: true }).click();
+  await expect(page.getByTestId("markdown-preview-frame")).toContainText("Example guide");
+  await leaveFileLink(page);
+}
+
+test("opening an assistant file link dismisses its tooltip over the file tab", async ({
+  page,
+}, testInfo) => {
+  testInfo.setTimeout(120_000);
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "tooltip-5811-",
+    title: "Tooltip regression",
+    featureValues: {
+      mockStreamingAssistantResponse: "Read [the guide](./guide.md).",
+      mockStreamingAssistantIntervalMs: 5,
+    },
+  });
+  try {
+    await writeFile(
+      path.join(agent.cwd, "guide.md"),
+      "# Example guide\n\n" + "Plain paragraph.\n\n".repeat(150),
+    );
+    await openAgentRoute(page, agent);
+    await agent.client.sendAgentMessage(agent.agentId, "Show the file link.");
+    await agent.client.waitForFinish(agent.agentId, 30_000);
+
+    await readFileLinkTooltip(page);
+    await leaveFileLink(page);
+    await readFileLinkTooltip(page);
+    await openLinkedFile(page);
+    await returnToAgent(page);
+    await readFileLinkTooltip(page);
+    await switchToFileTab(page);
+    await returnToAgent(page);
+    await readFileLinkTooltip(page);
+    await leaveFileLink(page);
+  } finally {
+    await agent.cleanup();
+  }
+});

packages/app/e2e/browser/changes-pane.spec.ts

@@ -1415,12 +1415,14 @@ test("collapsing and expanding restores the real horizontal scroll offset", asyn
 async function useCodeFont(page: Page, codeFontSize: number): Promise<void> {
   await page.addInitScript(
     ({ settingsKey, fontSize }) => {
-      if (localStorage.getItem(settingsKey)) {
+      const settings = JSON.parse(localStorage.getItem(settingsKey) ?? "{}");
+      if (settings.codeFontSize !== undefined) {
         return;
       }
       localStorage.setItem(
         settingsKey,
         JSON.stringify({
+          ...settings,
           theme: "dark",
           sendBehavior: "interrupt",
           serviceUrlBehavior: "ask",

packages/app/e2e/browser/compact-workspace-sheet.spec.ts

@@ -99,6 +99,16 @@ test("compact opens files and subagents in a sheet, leaving the tabs for agents"
       await expectSubagentRowVisible(page, child.id);
     });
 
+    await test.step("the parent box in a subagent's sheet closes it onto the parent", async () => {
+      await page.getByTestId(`subagents-track-row-${child.id}`).click();
+      const childSheet = sheet(page, child.title);
+      await expectSheetAtSnap(page, child.title);
+      await expect(childSheet.getByTestId("composer-parent-agent-pill")).toHaveCount(0);
+      await childSheet.getByTestId("parent-agent-callout-open").click();
+      await expect(childSheet).toHaveCount(0);
+      await expectOpenTabCount(page, 1);
+    });
+
     await test.step("Open as tab promotes the subagent to a full tab and ends the list", async () => {
       await page.getByTestId(`subagents-track-row-${child.id}`).click();
       await expectSheetAtSnap(page, child.title);

packages/app/e2e/browser/provider-subagents.real.spec.ts

@@ -136,7 +136,8 @@ test.describe("real provider subagent timelines", () => {
           panel.getByText("Start chatting with this agent...", { exact: true }),
         ).toHaveCount(0);
 
-        await page.getByTestId(`workspace-tab-agent_${handle.agentId}`).first().click();
+        // A provider subagent has no composer; its callout is the way back to the parent.
+        await page.getByTestId("parent-agent-callout-open").click();
         await expect(
           page.getByTestId("assistant-message").filter({ hasText: "ROOT_DONE" }).last(),
         ).toBeVisible({ timeout: 60_000 });

packages/app/e2e/browser/question-prompt-pagination.spec.ts

@@ -1,6 +1,6 @@
 import { fork } from "node:child_process";
 import path from "node:path";
-import { expect } from "@playwright/test";
+import { expect, type BrowserContext, type Locator, type Page } from "@playwright/test";
 import { z } from "zod";
 import { test } from "../support/fixtures";
 import { expectVisibleAgentSurfacesIdle } from "../support/helpers/agent-stream";
@@ -34,8 +34,218 @@ const ROLLOUT_QUESTION = "Which rollout should we use?";
 const SUCCESS_QUESTION = "What success criteria should we use?";
 const REPO_URL_QUESTION = "What is the GitHub private repo URL to push to?";
 const COMMIT_MESSAGE_QUESTION = "What should the first commit message be?";
+const LINKED_QUESTION = "Sign in at https://example.com/login, then follow the setup guide. Done?";
+
+function selectedText(page: Page) {
+  return page.evaluate(() => window.getSelection()?.toString().trim());
+}
+
+const CHECKS_QUESTION = "Which checks should run?";
+const DONE_DESCRIPTION = "Logs are at https://example.com/logs if sign-in fails.";
+const LINT_DESCRIPTION = "Rules: https://example.com/lint";
+
+async function openLinkedQuestions(page: Page, context: BrowserContext) {
+  await context.route("https://example.com/**", (route) =>
+    route.fulfill({ status: 200, body: "ok" }),
+  );
+  const session = await seedMockAgentWorkspace({
+    repoPrefix: "question-option-links-",
+    title: "Question option links e2e",
+    initialPrompt: "Emit synthetic questions with links.",
+  });
+  await openAgentRoute(page, session);
+  await waitForQuestionPrompt(page, 120_000);
+  return { session, card: page.getByTestId("question-form-card").first() };
+}
+
+async function dragAcross(page: Page, target: Locator) {
+  const bounds = await target.boundingBox();
+  if (!bounds) throw new Error("Text is not visible");
+  const y = bounds.y + bounds.height / 2;
+  await page.mouse.move(bounds.x + 1, y);
+  await page.mouse.down();
+  await page.mouse.move(bounds.x + bounds.width - 1, y, { steps: 12 });
+  await page.mouse.up();
+}
+
+async function clickLinkAndExpectPage(context: BrowserContext, link: Locator, url: string) {
+  const popup = context.waitForEvent("page");
+  await link.click();
+  await expect.poll(async () => (await popup).url()).toBe(url);
+}
+
+async function expectChecked(option: Locator, checked: boolean) {
+  await expect(option).toHaveAttribute("aria-checked", String(checked));
+}
+
+test.describe("Question option text", () => {
+  test("links in an option label or description open without answering", async ({
+    page,
+    context,
+  }) => {
+    test.setTimeout(180_000);
+    const { session, card } = await openLinkedQuestions(page, context);
+    try {
+      const done = card.getByRole("radio", { name: "Done" });
+      const notYet = card.getByRole("radio", { name: "Not yet" });
+
+      await clickLinkAndExpectPage(
+        context,
+        notYet.getByRole("link", { name: "status" }),
+        "https://example.com/status",
+      );
+      await clickLinkAndExpectPage(
+        context,
+        done.getByRole("link", { name: "https://example.com/logs" }),
+        "https://example.com/logs",
+      );
+
+      await expectCurrentQuestion(page, { index: 1, total: 2, question: LINKED_QUESTION });
+      await expectChecked(done, false);
+      await expectChecked(notYet, false);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("selecting description text never answers, and the label still does", async ({
+    page,
+    context,
+  }) => {
+    test.setTimeout(180_000);
+    const { session, card } = await openLinkedQuestions(page, context);
+    try {
+      const done = card.getByRole("radio", { name: "Done" });
+      const description = done.getByTestId("question-form-option-description");
+
+      await dragAcross(page, description);
+      await expect.poll(() => selectedText(page)).toBe(DONE_DESCRIPTION);
+      await expectChecked(done, false);
+
+      await description.getByText("Logs are at", { exact: false }).dblclick({
+        position: { x: 4, y: 4 },
+      });
+      await expect.poll(() => selectedText(page)).toBe("Logs");
+      await expectCurrentQuestion(page, { index: 1, total: 2, question: LINKED_QUESTION });
+      await expectChecked(done, false);
+
+      await done.getByText("Done", { exact: true }).click();
+      await expectCurrentQuestion(page, { index: 2, total: 2, question: CHECKS_QUESTION });
+      await openQuestion(page, { index: 1, total: 2 });
+      await expectChecked(done, true);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("double-clicking a single-select label answers once", async ({ page, context }) => {
+    test.setTimeout(180_000);
+    const { session, card } = await openLinkedQuestions(page, context);
+    try {
+      await card.getByRole("radio", { name: "Done" }).getByText("Done", { exact: true }).dblclick();
+
+      await expectCurrentQuestion(page, { index: 2, total: 2, question: CHECKS_QUESTION });
+      await expectChecked(card.getByRole("checkbox", { name: "Lint" }), false);
+      await expectChecked(card.getByRole("checkbox", { name: "Typecheck" }), false);
+      await openQuestion(page, { index: 1, total: 2 });
+      await expectChecked(card.getByRole("radio", { name: "Done" }), true);
+    } finally {
+      await session.cleanup();
+    }
+  });
+
+  test("multi-select description links and selection leave the option unchanged", async ({
+    page,
+    context,
+  }) => {
+    test.setTimeout(180_000);
+    const { session, card } = await openLinkedQuestions(page, context);
+    try {
+      await card.getByRole("radio", { name: "Done" }).getByText("Done", { exact: true }).click();
+      await expectCurrentQuestion(page, { index: 2, total: 2, question: CHECKS_QUESTION });
+
+      const lint = card.getByRole("checkbox", { name: "Lint" });
+      const typecheck = card.getByRole("checkbox", { name: "Typecheck" });
+      const description = lint.getByTestId("question-form-option-description");
+
+      await clickLinkAndExpectPage(
+        context,
+        description.getByRole("link", { name: "https://example.com/lint" }),
+        "https://example.com/lint",
+      );
+      await expectChecked(lint, false);
+
+      await dragAcross(page, description);
+      await expect.poll(() => selectedText(page)).toBe(LINT_DESCRIPTION);
+      await expectChecked(lint, false);
+
+      await description.getByText("Rules:", { exact: false }).dblclick({
+        position: { x: 4, y: 4 },
+      });
+      await expect.poll(() => selectedText(page)).toBe("Rules");
+      await expectChecked(lint, false);
+
+      await typecheck.getByText("Typecheck", { exact: true }).dblclick();
+      await expectChecked(typecheck, true);
+      await lint.getByText("Lint", { exact: true }).click();
+      await expectChecked(lint, true);
+    } finally {
+      await session.cleanup();
+    }
+  });
+});
 
 test.describe("Question prompt pagination", () => {
+  test("question links open without answering, and the question text is selectable", async ({
+    page,
+    context,
+  }) => {
+    test.setTimeout(180_000);
+    await context.route("https://example.com/**", (route) =>
+      route.fulfill({ status: 200, body: "ok" }),
+    );
+
+    const session = await seedMockAgentWorkspace({
+      repoPrefix: "question-links-",
+      title: "Question links e2e",
+      initialPrompt: "Emit synthetic questions with links.",
+    });
+
+    try {
+      await openAgentRoute(page, session);
+      await waitForQuestionPrompt(page, 120_000);
+
+      const card = page.getByTestId("question-form-card").first();
+      const question = card.getByTestId("question-form-current-question");
+      await expect(question).toHaveText(LINKED_QUESTION);
+      await expect(question.getByRole("link", { name: "https://example.com/login" })).toBeVisible();
+      await expect(question.getByRole("link", { name: "the setup guide" })).toBeVisible();
+
+      const bounds = await question.boundingBox();
+      if (!bounds) throw new Error("Question text is not visible");
+      const y = bounds.y + bounds.height / 2;
+      await page.mouse.move(bounds.x + 1, y);
+      await page.mouse.down();
+      await page.mouse.move(bounds.x + bounds.width - 1, y, { steps: 12 });
+      await page.mouse.up();
+      await expect.poll(() => selectedText(page)).toBe(LINKED_QUESTION);
+
+      const popup = context.waitForEvent("page");
+      await question.getByRole("link", { name: "the setup guide" }).click();
+      await expect.poll(async () => (await popup).url()).toBe("https://example.com/setup");
+
+      await expect(page.getByTestId("question-form-card")).toHaveCount(1);
+      for (const option of ["Done", "Not yet"]) {
+        await expect(card.getByRole("radio", { name: option })).toHaveAttribute(
+          "aria-checked",
+          "false",
+        );
+      }
+    } finally {
+      await session.cleanup();
+    }
+  });
+
   test("shows one question at a time with numbered navigation", async ({ page }) => {
     test.setTimeout(180_000);
 

packages/app/e2e/browser/subagent-origin-pane.spec.ts

@@ -125,6 +125,29 @@ test("opening an already-tabbed subagent reveals its left tab without a duplicat
   }
 });
 
+test("a subagent's parent pill returns to its parent", async ({ page }) => {
+  const workspace = await seedWorkspace({ repoPrefix: "subagent-parent-pill-" });
+  try {
+    const pair = await seedParentWithSubagent(workspace, {
+      parentTitle: "Refactor auth flow",
+      childTitle: "Write session tests",
+    });
+    await page.setViewportSize({ width: 1400, height: 900 });
+    await openAgentRoute(page, { workspaceId: pair.workspaceId, agentId: pair.child.id });
+
+    const pill = page.getByTestId("composer-parent-agent-pill");
+    await expect(pill).toHaveAccessibleName("Back to Refactor auth flow");
+    await pill.click();
+
+    await expect(page.getByTestId(`workspace-tab-agent_${pair.parent.id}`)).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  } finally {
+    await workspace.cleanup();
+  }
+});
+
 test("a preferred chat file link still opens beside its right-pane agent", async ({ page }) => {
   const target = "linked.ts:3";
   const workspace = await seedMockAgentWorkspace({

packages/app/e2e/browser/tool-call-overview-sheet.spec.ts

@@ -143,7 +143,7 @@ async function configureOverviewToolCalls(page: Page): Promise<void> {
   await page.addInitScript(() => {
     localStorage.setItem(
       "@paseo:app-settings",
-      JSON.stringify({ toolCallDetailLevel: "overview" }),
+      JSON.stringify({ chatDisplay: "collapseToolCalls" }),
     );
   });
 }

packages/app/e2e/browser/tool-call-shimmer.spec.ts

@@ -161,7 +161,7 @@ test("measures an overview heading that becomes loading after its idle mount", a
   await page.addInitScript(() => {
     localStorage.setItem(
       "@paseo:app-settings",
-      JSON.stringify({ toolCallDetailLevel: "overview" }),
+      JSON.stringify({ chatDisplay: "collapseToolCalls" }),
     );
   });
   const agent = await seedMockAgentWorkspace({

packages/app/e2e/browser/turn-collapse.spec.ts

@@ -0,0 +1,67 @@
+import type { Page } from "@playwright/test";
+import { test, expect } from "../support/fixtures";
+import { expectComposerVisible } from "../support/helpers/composer";
+import { openAgentRoute, seedMockAgentWorkspace } from "../support/helpers/mock-agent";
+
+type ChatDisplay = "full" | "collapseToolCalls" | "collapseTurns";
+
+async function useChatDisplay(page: Page, chatDisplay: ChatDisplay): Promise<void> {
+  await page.addInitScript((value) => {
+    localStorage.setItem("@paseo:app-settings", JSON.stringify({ chatDisplay: value }));
+  }, chatDisplay);
+}
+
+async function seedAnsweredAgent(title: string) {
+  const agent = await seedMockAgentWorkspace({
+    repoPrefix: "turn-collapse-",
+    title,
+    model: "ten-second-stream",
+    initialPrompt: "Why does the chat stop following new output?",
+  });
+  await agent.client.waitForFinish(agent.agentId, 30_000);
+  await agent.client.sendAgentMessage(agent.agentId, "Make the fix and run the burst script.");
+  await agent.client.waitForFinish(agent.agentId, 30_000);
+  return agent;
+}
+
+/** Chat rows between the latest turn's summary line and its reply, in document order. */
+async function rowsBetweenLatestSummaryAndReply(page: Page): Promise<number> {
+  return page.evaluate(() => {
+    const rows = [...document.querySelectorAll("[data-message-id]")];
+    const summaryRow = rows.findLastIndex((row) => row.querySelector("[data-testid=turn-summary]"));
+    const replyRow = rows.findLastIndex((row) =>
+      row.querySelector("[data-testid=assistant-message]"),
+    );
+    return replyRow - summaryRow - 1;
+  });
+}
+
+test.describe("Turn collapse", () => {
+  test("folds each answered turn behind a summary line that opens it", async ({ page }) => {
+    test.setTimeout(120_000);
+    await useChatDisplay(page, "collapseTurns");
+    const agent = await seedAnsweredAgent("Turn collapse");
+    try {
+      await openAgentRoute(page, agent);
+      await expectComposerVisible(page);
+
+      const summary = page.getByTestId("turn-summary").last().getByRole("button");
+      await expect(summary).toHaveText(/^Wrote \d+ messages?, edited 1 file/);
+      // Text chunks that stream back to back merge into one message, so the reply holds
+      // at least the stream's last chunk.
+      await expect(page.getByTestId("assistant-message").last()).toHaveText(
+        /\(end of synthetic stream\)$/,
+      );
+      await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(0);
+
+      await summary.click();
+      await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBeGreaterThan(0);
+      await expect(summary).toBeInViewport();
+
+      await summary.click();
+      await expect.poll(() => rowsBetweenLatestSummaryAndReply(page)).toBe(0);
+    } finally {
+      await agent.cleanup();
+    }
+  });
+});

packages/app/e2e/support/fixtures.ts

@@ -180,6 +180,11 @@ const test = daemonTest.extend<{
           localStorage.setItem("@paseo:daemon-registry", JSON.stringify([daemon, ...extraHosts]));
           localStorage.removeItem("@paseo:settings");
           localStorage.setItem("@paseo:create-agent-preferences", JSON.stringify(preferences));
+          // New installs collapse finished turns; specs assert on the rows inside them, so they
+          // start from the full chat unless they seed their own settings.
+          if (!localStorage.getItem("@paseo:app-settings")) {
+            localStorage.setItem("@paseo:app-settings", JSON.stringify({ chatDisplay: "full" }));
+          }
         },
         {
           daemon: testDaemon,

packages/app/e2e/support/helpers/plugin-timeline.ts

@@ -116,7 +116,7 @@ export async function withTimelinePlugin(
   await page.addInitScript(() => {
     localStorage.setItem(
       "@paseo:app-settings",
-      JSON.stringify({ toolCallDetailLevel: "overview" }),
+      JSON.stringify({ chatDisplay: "collapseToolCalls" }),
     );
   });
   const agent = await seedMockAgentWorkspace({

packages/app/e2e/support/helpers/sidebar-nav-settings.ts

@@ -63,8 +63,9 @@ export async function seedSidebarFooterPreferences(
 ): Promise<void> {
   await page.addInitScript(
     ({ key, sidebarFooterItems }) => {
-      if (localStorage.getItem(key)) return;
-      localStorage.setItem(key, JSON.stringify({ sidebarFooterItems }));
+      const settings = JSON.parse(localStorage.getItem(key) ?? "{}");
+      if (settings.sidebarFooterItems) return;
+      localStorage.setItem(key, JSON.stringify({ ...settings, sidebarFooterItems }));
     },
     { key: APP_SETTINGS_KEY, sidebarFooterItems: preferences },
   );

packages/app/src/agent-stream/chat-find/viewport.browser.test.ts

@@ -24,6 +24,7 @@ function viewport(root: HTMLElement, capture: Capture) {
   const handle: StreamViewportHandle = {
     scrollToBottom() {},
     prepareForViewportChange() {},
+    holdReadingPosition() {},
     scrollToMessage(_messageId, occurrence) {
       if (occurrence) capture.occurrence = occurrence;
     },

packages/app/src/agent-stream/chat-outline/use-chat-outline.test.tsx

@@ -265,6 +265,7 @@ describe("useChatOutline", () => {
     const viewport: StreamViewportHandle = {
       scrollToBottom: vi.fn(),
       prepareForViewportChange: vi.fn(),
+      holdReadingPosition: vi.fn(),
       scrollToMessage,
     };
     const viewportRef = { current: viewport };
@@ -316,6 +317,7 @@ describe("useChatOutline", () => {
       current: {
         scrollToBottom: vi.fn(),
         prepareForViewportChange: vi.fn(),
+        holdReadingPosition: vi.fn(),
         scrollToMessage,
       },
     };
@@ -371,6 +373,7 @@ describe("useChatOutline", () => {
     const viewport: StreamViewportHandle = {
       scrollToBottom: vi.fn(),
       prepareForViewportChange: vi.fn(),
+      holdReadingPosition: vi.fn(),
       scrollToMessage,
     };
     const livePrompt = {

packages/app/src/agent-stream/presentation.test.ts

@@ -4,6 +4,7 @@ import { transformTimelineItem, type TimelineItemTransform } from "@/plugins/tim
 import type { InstalledPlugin } from "@/plugins/types";
 import {
   applyStreamEvent,
+  getStreamItemMessageId,
   hydrateStreamState,
   type StreamItem,
   type ToolCallItem,
@@ -13,7 +14,7 @@ import type { AgentStreamEventPayload } from "@getpaseo/protocol/messages";
 import { QueryClient } from "@tanstack/react-query";
 import { describe, expect, it } from "vitest";
 import { buildAgentStreamRenderModel } from "./model";
-import { createStreamPresentation, getStreamItemMessageId } from "./presentation";
+import { createStreamPresentation } from "./presentation";
 
 const runtime = {
   paseo: {},
@@ -97,7 +98,11 @@ function pluginData(items: StreamItem[]): unknown[] {
   return items.flatMap((item) => (item.kind === "plugin" ? [item.data] : []));
 }
 
-const presentationOptions = { level: "overview" as const, isTurnActive: true };
+const presentationOptions = {
+  display: "collapseToolCalls" as const,
+  expandedTurnHostIds: new Set<string>(),
+  isTurnActive: true,
+};
 
 function streamHarness(transform?: TimelineItemTransform) {
   let state: { tail: StreamItem[]; head: StreamItem[] } = { tail: [], head: [] };

packages/app/src/agent-stream/presentation.ts

@@ -1,3 +1,4 @@
+import type { ChatDisplay } from "@/hooks/use-settings";
 import type { TimelineItemTransform } from "@/plugins/timeline/model";
 import { projectPluginTimelineItems } from "@/plugins/timeline/projection";
 import {
@@ -5,23 +6,32 @@ import {
   projectToolCallDetailLevel,
   type PreparedToolCallHistory,
   type ToolCallDetailLevel,
+  type ToolCallDetailProjection,
 } from "@/tool-calls/detail-level/projection";
 import type { StreamItem, UserMessageItem } from "@/types/stream";
+import { collapseTurns, type TurnCollapse } from "./turn-collapse/model";
 
 interface PresentationInput {
   tail: StreamItem[];
   head: StreamItem[];
   transform: TimelineItemTransform | undefined;
-  level: ToolCallDetailLevel;
+  display: ChatDisplay;
+  /** User messages whose collapsed turn the reader opened. */
+  expandedTurnHostIds: ReadonlySet<string>;
   isTurnActive: boolean;
 }
 
-/** Find and scrolling address a plugin row by the source it replaces. */
-export function getStreamItemMessageId(item: StreamItem): string {
-  if (item.kind === "plugin") return item.sourceId ?? item.id;
-  return item.id;
+export interface StreamPresentation extends ToolCallDetailProjection {
+  turns: Omit<TurnCollapse, "tail">;
 }
 
+const NO_COLLAPSED_TURNS: StreamPresentation["turns"] = collapseTurns({
+  tail: [],
+  isLatestTurnOpen: false,
+  expandedHostIds: new Set(),
+  getGroupedCalls: () => undefined,
+});
+
 /** Source messages reach plugins before display projection. */
 export function createStreamPresentation() {
   const userMessageCache = new WeakMap<UserMessageItem, UserMessageItem>();
@@ -47,12 +57,47 @@ export function createStreamPresentation() {
   let preparedTail: StreamItem[] | undefined;
   let preparedLevel: ToolCallDetailLevel | undefined;
   let preparedHistory: PreparedToolCallHistory | null = null;
+  let collapsedSource: StreamItem[] | undefined;
+  let collapsedIsLatestTurnOpen = false;
+  let collapsedExpandedHostIds: ReadonlySet<string> | undefined;
+  let collapsed: TurnCollapse | undefined;
 
   function presentRows(item: StreamItem): StreamItem[] {
     return [item.kind === "user_message" ? presentUserMessage(item) : item];
   }
 
-  return (input: PresentationInput) => {
+  function collapse(
+    projection: ToolCallDetailProjection,
+    input: PresentationInput,
+  ): StreamPresentation {
+    if (input.display !== "collapseTurns") {
+      return { ...projection, turns: NO_COLLAPSED_TURNS };
+    }
+    // Live text updates reach the head only, so the folded history is reused until the
+    // retained rows, the latest turn's liveness, or the reader's expanded turns change.
+    const isLatestTurnOpen = input.isTurnActive || projection.head.length > 0;
+    if (
+      !collapsed ||
+      collapsedSource !== projection.tail ||
+      collapsedIsLatestTurnOpen !== isLatestTurnOpen ||
+      collapsedExpandedHostIds !== input.expandedTurnHostIds
+    ) {
+      collapsed = collapseTurns({
+        tail: projection.tail,
+        isLatestTurnOpen,
+        expandedHostIds: input.expandedTurnHostIds,
+        getGroupedCalls: (itemId) => projection.groupsByHostId.get(itemId)?.run.calls,
+      });
+      collapsedSource = projection.tail;
+      collapsedIsLatestTurnOpen = isLatestTurnOpen;
+      collapsedExpandedHostIds = input.expandedTurnHostIds;
+    }
+    const { tail, ...turns } = collapsed;
+    return { ...projection, tail, turns };
+  }
+
+  return (input: PresentationInput): StreamPresentation => {
+    const level: ToolCallDetailLevel = input.display === "full" ? "detailed" : "overview";
     // Retained history is not reprojected or regrouped on each live text update.
     if (historySource !== input.tail || historyTransform !== input.transform) {
       historyRows = projectPluginTimelineItems(input.tail, input.transform).flatMap<StreamItem>(
@@ -66,17 +111,20 @@ export function createStreamPresentation() {
       const blocks = presentRows(item);
       head.push(...blocks);
     }
-    if (preparedTail !== historyRows || preparedLevel !== input.level) {
-      preparedHistory = prepareToolCallHistory(input.level, historyRows);
+    if (preparedTail !== historyRows || preparedLevel !== level) {
+      preparedHistory = prepareToolCallHistory(level, historyRows);
       preparedTail = historyRows;
-      preparedLevel = input.level;
+      preparedLevel = level;
     }
-    return projectToolCallDetailLevel({
-      level: input.level,
-      tail: historyRows,
-      head,
-      preparedHistory,
-      isTurnActive: input.isTurnActive,
-    });
+    return collapse(
+      projectToolCallDetailLevel({
+        level,
+        tail: historyRows,
+        head,
+        preparedHistory,
+        isTurnActive: input.isTurnActive,
+      }),
+      input,
+    );
   };
 }

packages/app/src/agent-stream/strategy-native.tsx

@@ -361,6 +361,7 @@ function NativeStreamViewport(props: StreamRenderInput & { strategy: StreamStrat
         bottomAnchorController.prepareForStickyViewportChange();
         markNativeViewportSettling();
       },
+      holdReadingPosition: () => bottomAnchorController.detachByUser(),
     };
     viewportRef.current = handle;
     return () => {

packages/app/src/agent-stream/strategy-web.tsx

@@ -20,7 +20,7 @@ import { withUnistyles } from "react-native-unistyles";
 import { useRetainedPanelActive } from "@/components/retained-panel";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useStableEvent } from "@/hooks/use-stable-event";
-import type { StreamItem } from "@/types/stream";
+import { getStreamItemMessageId, type StreamItem } from "@/types/stream";
 import type { Theme } from "@/styles/theme";
 import { WEB_SCROLLBAR_SIZE_PX } from "@/styles/web-scrollbar";
 import { DomOverlayScrollbar } from "@/components/ui/overlay-scrollbar/dom-overlay-scrollbar";
@@ -44,7 +44,6 @@ import {
   type HistoryStartSettleScheduler,
 } from "./history-start-settle-scheduler";
 import { useChatFindSelectedMessageId } from "@/agent-stream/chat-find";
-import { getStreamItemMessageId } from "./presentation";
 import { useScrollToMessage } from "./use-scroll-to-message.web";
 
 interface CreateWebStreamStrategyInput {
@@ -1174,6 +1173,11 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
         }
         scheduleStickToBottom();
       },
+      holdReadingPosition: () => {
+        cancelPendingStickToBottom();
+        setFollowOutput(false);
+        readingAnchor.scroll(scrollContainerRef.current?.scrollTop ?? 0);
+      },
       scrollToMessage,
     };
     viewportRef.current = handle;
@@ -1186,6 +1190,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
   }, [
     cancelPendingStickToBottom,
     forceStickToBottom,
+    readingAnchor,
     scheduleStickToBottom,
     scrollToMessage,
     viewportRef,

packages/app/src/agent-stream/strategy.ts

@@ -55,6 +55,8 @@ export interface StreamViewportHandle {
   focus?: () => void;
   scrollToBottom: (reason?: BottomAnchorLocalRequest["reason"]) => void;
   prepareForViewportChange: () => void;
+  /** Stop following output so the rows on screen stay put while rows below them open or close. */
+  holdReadingPosition: () => void;
   scrollToMessage?: (messageId: string, occurrence?: ScrollToMessageOccurrence) => void;
 }
 

packages/app/src/agent-stream/turn-collapse/model.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import type { StreamItem, ToolCallItem } from "@/types/stream";
+import { collapseTurns, type CollapseTurnsInput } from "./model";
+
+const at = new Date("2026-01-01T00:00:00.000Z");
+
+function user(id: string): StreamItem {
+  return { kind: "user_message", id, text: id, timestamp: at };
+}
+
+function reply(id: string): StreamItem {
+  return { kind: "assistant_message", id, text: id, timestamp: at };
+}
+
+function thought(id: string): StreamItem {
+  return { kind: "thought", id, text: id, timestamp: at, status: "ready" };
+}
+
+function shell(id: string): ToolCallItem {
+  return {
+    kind: "tool_call",
+    id,
+    timestamp: at,
+    payload: {
+      source: "agent",
+      data: {
+        provider: "claude",
+        callId: id,
+        name: "Bash",
+        status: "completed",
+        error: null,
+        detail: { type: "shell", command: "ls" },
+      },
+    },
+  };
+}
+
+function collapse(tail: StreamItem[], options: Partial<CollapseTurnsInput> = {}) {
+  return collapseTurns({
+    tail,
+    isLatestTurnOpen: false,
+    expandedHostIds: new Set(),
+    getGroupedCalls: () => undefined,
+    ...options,
+  });
+}
+
+const ids = (items: StreamItem[]) => items.map((item) => item.id);
+
+describe("collapseTurns", () => {
+  it("folds a finished turn's work into its user message and keeps the reply", () => {
+    const result = collapse([
+      user("u1"),
+      thought("t1"),
+      reply("early"),
+      shell("c1"),
+      shell("c2"),
+      reply("final"),
+    ]);
+
+    expect(ids(result.tail)).toEqual(["u1", "final"]);
+    expect(result.turnsByHostId.get("u1")).toEqual({
+      hostId: "u1",
+      expanded: false,
+      summary: {
+        messageCount: 1,
+        tools: expect.objectContaining({ commandCount: 2 }),
+      },
+    });
+    expect(result.hostIdByFoldedMessageId.get("early")).toBe("u1");
+  });
+
+  it("shows an expanded turn's work as nested rows between the prompt and the reply", () => {
+    const result = collapse([user("u1"), thought("t1"), shell("c1"), reply("final")], {
+      expandedHostIds: new Set(["u1"]),
+    });
+
+    expect(ids(result.tail)).toEqual(["u1", "t1", "c1", "final"]);
+    expect([...result.nestedItemIds]).toEqual(["t1", "c1"]);
+    expect(result.turnsByHostId.get("u1")?.expanded).toBe(true);
+  });
+
+  it("leaves the latest turn alone while it is still producing output", () => {
+    const tail = [user("u1"), shell("c1"), reply("r1"), user("u2"), shell("c2"), reply("r2")];
+
+    const result = collapse(tail, { isLatestTurnOpen: true });
+
+    expect(ids(result.tail)).toEqual(["u1", "r1", "u2", "c2", "r2"]);
+    expect([...result.turnsByHostId.keys()]).toEqual(["u1"]);
+  });
+
+  it("keeps rows after the reply, and turns with no work before the reply, as they are", () => {
+    const result = collapse([
+      user("u1"),
+      shell("c1"),
+      reply("r1"),
+      shell("after"),
+      user("u2"),
+      reply("r2"),
+    ]);
+
+    expect(ids(result.tail)).toEqual(["u1", "r1", "after", "u2", "r2"]);
+    expect([...result.turnsByHostId.keys()]).toEqual(["u1"]);
+  });
+
+  it("does not fold a turn that only thought before its reply", () => {
+    const tail = [user("u1"), thought("t1"), reply("r1")];
+
+    const result = collapse(tail);
+
+    expect(result.tail).toBe(tail);
+    expect(result.turnsByHostId.size).toBe(0);
+  });
+
+  it("does not fold a turn without a reply or whose prompt is above the loaded history", () => {
+    const tail = [shell("c0"), reply("r0"), user("u1"), shell("c1")];
+
+    const result = collapse(tail);
+
+    expect(result.tail).toBe(tail);
+    expect(result.turnsByHostId.size).toBe(0);
+  });
+
+  it("counts every call a tool-call group row stands for", () => {
+    const group = [shell("c1"), shell("c2"), shell("c3")];
+    const result = collapse([user("u1"), group[0]!, reply("final")], {
+      getGroupedCalls: (itemId) => (itemId === "c1" ? group : undefined),
+    });
+
+    expect(result.turnsByHostId.get("u1")?.summary).toMatchObject({
+      tools: { commandCount: 3 },
+    });
+  });
+});

packages/app/src/agent-stream/turn-collapse/model.ts

@@ -0,0 +1,122 @@
+import { getStreamItemMessageId, type StreamItem, type ToolCallItem } from "@/types/stream";
+import { summarizeToolCalls, type OverviewSummary } from "@/tool-calls/detail-level/overview/model";
+
+export interface TurnSummary {
+  messageCount: number;
+  tools: OverviewSummary;
+}
+
+export interface CollapsedTurn {
+  /** The user message the turn answers. Its row carries the turn's summary line. */
+  hostId: string;
+  expanded: boolean;
+  summary: TurnSummary;
+}
+
+export interface TurnCollapse {
+  tail: StreamItem[];
+  turnsByHostId: ReadonlyMap<string, CollapsedTurn>;
+  /** Rows of expanded turns, which render inside the turn's indent rail. */
+  nestedItemIds: ReadonlySet<string>;
+  /** The turn a folded message belongs to, for surfaces that must reveal it. */
+  hostIdByFoldedMessageId: ReadonlyMap<string, string>;
+}
+
+export interface CollapseTurnsInput {
+  tail: StreamItem[];
+  /** The latest turn is still producing output, so it stays unfolded. */
+  isLatestTurnOpen: boolean;
+  expandedHostIds: ReadonlySet<string>;
+  /** The calls a tool-call group row stands for; undefined for a single call. */
+  getGroupedCalls: (itemId: string) => readonly ToolCallItem[] | undefined;
+}
+
+const EMPTY_TURNS: ReadonlyMap<string, CollapsedTurn> = new Map();
+const EMPTY_IDS: ReadonlySet<string> = new Set();
+const EMPTY_HOSTS: ReadonlyMap<string, string> = new Map();
+
+function summarizeTurn(
+  items: readonly StreamItem[],
+  getGroupedCalls: CollapseTurnsInput["getGroupedCalls"],
+): TurnSummary {
+  const calls: ToolCallItem[] = [];
+  let messageCount = 0;
+  for (const item of items) {
+    if (item.kind === "assistant_message") messageCount += 1;
+    else if (item.kind === "tool_call") calls.push(...(getGroupedCalls(item.id) ?? [item]));
+  }
+  return { messageCount, tools: summarizeToolCalls(calls) };
+}
+
+function hasWork(summary: TurnSummary): boolean {
+  return summary.messageCount > 0 || Object.values(summary.tools).some((count) => count > 0);
+}
+
+function findLastAssistantIndex(tail: StreamItem[], start: number, end: number): number {
+  for (let index = end - 1; index >= start; index -= 1) {
+    if (tail[index]?.kind === "assistant_message") return index;
+  }
+  return -1;
+}
+
+/**
+ * Folds each answered turn into its user message: everything the agent did before its last
+ * message collapses into one summary line, and that message stays in the chat. A turn folds
+ * only once it is complete, its user message is loaded, and it sent messages or called tools
+ * before its reply. Thoughts fold with the turn but are not counted.
+ */
+export function collapseTurns(input: CollapseTurnsInput): TurnCollapse {
+  const { tail } = input;
+  const output: StreamItem[] = [];
+  const turnsByHostId = new Map<string, CollapsedTurn>();
+  const nestedItemIds = new Set<string>();
+  const hostIdByFoldedMessageId = new Map<string, string>();
+
+  let runStart = 0;
+  const flushRun = (runEnd: number) => {
+    const host = tail[runStart - 1];
+    const isClosed = runEnd < tail.length || !input.isLatestTurnOpen;
+    const replyIndex = findLastAssistantIndex(tail, runStart, runEnd);
+    if (host?.kind !== "user_message" || !isClosed || replyIndex <= runStart) {
+      output.push(...tail.slice(runStart, runEnd));
+      return;
+    }
+    const folded = tail.slice(runStart, replyIndex);
+    const summary = summarizeTurn(folded, input.getGroupedCalls);
+    if (!hasWork(summary)) {
+      output.push(...tail.slice(runStart, runEnd));
+      return;
+    }
+    const expanded = input.expandedHostIds.has(host.id);
+    turnsByHostId.set(host.id, { hostId: host.id, expanded, summary });
+    for (const item of folded) {
+      hostIdByFoldedMessageId.set(getStreamItemMessageId(item), host.id);
+      if (expanded) nestedItemIds.add(item.id);
+    }
+    if (expanded) output.push(...folded);
+    output.push(...tail.slice(replyIndex, runEnd));
+  };
+
+  for (let index = 0; index < tail.length; index += 1) {
+    if (tail[index]?.kind !== "user_message") continue;
+    flushRun(index);
+    output.push(tail[index]!);
+    runStart = index + 1;
+  }
+  flushRun(tail.length);
+
+  if (turnsByHostId.size === 0) {
+    return {
+      tail,
+      turnsByHostId: EMPTY_TURNS,
+      nestedItemIds: EMPTY_IDS,
+      hostIdByFoldedMessageId: EMPTY_HOSTS,
+    };
+  }
+  return {
+    tail: output.length === tail.length ? tail : output,
+    turnsByHostId,
+    nestedItemIds,
+    hostIdByFoldedMessageId,
+  };
+}

packages/app/src/agent-stream/turn-collapse/summary-line.tsx

@@ -0,0 +1,48 @@
+import { memo, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Summary } from "lucide-react-native";
+import { ExpandableBadge } from "@/components/message";
+import { useOverviewSummaryLabel } from "@/tool-calls/detail-level/overview/label";
+import type { CollapsedTurn } from "./model";
+
+/**
+ * The row a collapsed turn leaves under its user message, styled like a tool-call group.
+ * Pressing it opens the turn's rows beneath it.
+ */
+export const TurnSummaryLine = memo(function TurnSummaryLine({
+  turn,
+  onExpandedChange,
+}: {
+  turn: CollapsedTurn;
+  onExpandedChange: (hostId: string, expanded: boolean) => void;
+}) {
+  const { t } = useTranslation();
+  const { messageCount, tools } = turn.summary;
+  const messageParts = useMemo(
+    () =>
+      messageCount > 0
+        ? [
+            t(`turnSummary.messages.${messageCount === 1 ? "one" : "other"}`, {
+              count: messageCount,
+            }),
+          ]
+        : [],
+    [messageCount, t],
+  );
+  const label = useOverviewSummaryLabel(tools, messageParts);
+  const toggle = useCallback(
+    () => onExpandedChange(turn.hostId, !turn.expanded),
+    [onExpandedChange, turn.expanded, turn.hostId],
+  );
+
+  return (
+    <ExpandableBadge
+      testID="turn-summary"
+      label={label}
+      icon={Summary}
+      isExpanded={turn.expanded}
+      onToggle={toggle}
+      borderlessWhenExpanded
+    />
+  );
+});

packages/app/src/agent-stream/use-scroll-to-message.web.ts

@@ -1,8 +1,7 @@
 import type React from "react";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import type { Virtualizer } from "@tanstack/react-virtual";
-import type { StreamItem } from "@/types/stream";
-import { getStreamItemMessageId } from "./presentation";
+import { getStreamItemMessageId, type StreamItem } from "@/types/stream";
 import { createPromptJumpSettleController, PROMPT_JUMP_TOP_INSET_PX } from "./prompt-jump-settle";
 import type { ScrollToMessageOccurrence } from "./strategy";
 

packages/app/src/agent-stream/use-stream-history-window.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import type { StreamItem } from "@/types/stream";
+import { getStreamItemMessageId, type StreamItem } from "@/types/stream";
 import { findMountedWindowStart, getMountedRecentStreamItems } from "./history-window";
-import { getStreamItemMessageId } from "./presentation";
 
 // Callers reveal a message, not a row: an assistant message is several block rows and
 // the window has to open at the first of them.

packages/app/src/agent-stream/view.tsx

@@ -41,7 +41,7 @@ import {
   type InlinePathTarget,
 } from "@/components/message";
 import { PlanCard } from "@/components/plan-card";
-import type { StreamItem } from "@/types/stream";
+import { getStreamItemMessageId, type StreamItem } from "@/types/stream";
 import type { PendingMessageSubmission } from "@/composer/submission/model";
 import type { TurnPresentation } from "@/timeline/turn-liveness";
 import type { PendingPermission } from "@/types/shared";
@@ -62,8 +62,10 @@ import type { DaemonClient } from "@getpaseo/client/internal/daemon-client";
 import { ToolCallDetailsContent } from "@/components/tool-call-details";
 import { QuestionFormCard } from "@/components/question-form-card";
 import { ToolCallSheetProvider } from "@/components/tool-call-sheet";
-import { createStreamPresentation, getStreamItemMessageId } from "./presentation";
+import { createStreamPresentation } from "./presentation";
 import { OverviewToolCallGroupView } from "@/tool-calls/detail-level/overview/view";
+import { IndentRail } from "@/components/indent-rail";
+import { TurnSummaryLine } from "./turn-collapse/summary-line";
 import { type AgentStreamRenderModel, buildAgentStreamRenderModel } from "./model";
 import { resolveStreamRenderStrategy } from "./strategy-resolver";
 import { type StreamSegmentRenderers, type StreamViewportHandle } from "./strategy";
@@ -148,9 +150,16 @@ function renderPendingPermissionsNode(input: {
   );
 }
 
+/**
+ * Where a row sits in an opened turn: its summary line's row, a row inside the turn, or the
+ * turn's last row. The rail runs through the gaps between them so the turn reads as one block.
+ */
+type TurnIndent = "none" | "openedHost" | "nested" | "lastNested";
+
 function renderStreamItemWithTurnFooter(input: {
   content: ReactNode;
   layoutItem: StreamLayoutItem;
+  turnIndent: TurnIndent;
   strategy: TurnContentStrategy;
   supportsTimelineCursor: boolean;
   onForkAssistantTurn?: AssistantTurnForkHandler;
@@ -171,7 +180,7 @@ function renderStreamItemWithTurnFooter(input: {
     />
   ) : null;
   const content = (
-    <StreamItemWrapper itemId={input.layoutItem.item.id} gapBelow={input.layoutItem.gapBelow}>
+    <StreamItemWrapper gapBelow={input.layoutItem.gapBelow} turnIndent={input.turnIndent}>
       {input.content}
     </StreamItemWrapper>
   );
@@ -333,7 +342,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
   ) {
     const { t } = useTranslation();
     const autoExpandReasoning = useSettings((settings) => settings.autoExpandReasoning);
-    const toolCallDetailLevel = useSettings((settings) => settings.toolCallDetailLevel);
+    const chatDisplay = useSettings((settings) => settings.chatDisplay);
     const chatOutlineEnabled = useSettings((settings) => settings.chatOutlineEnabled);
     const contentMaxWidth = useSettings(resolveContentMaxWidth);
     const viewportRef = useRef<StreamViewportHandle | null>(null);
@@ -357,6 +366,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     const [expandedToolCallGroupIds, setExpandedToolCallGroupIds] = useState<Set<string>>(
       new Set(),
     );
+    const [expandedTurnHostIds, setExpandedTurnHostIds] = useState<ReadonlySet<string>>(new Set());
 
     // Get serverId (fallback to agent's serverId if not provided)
     const resolvedServerId = serverId ?? context.serverId ?? "";
@@ -421,6 +431,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       setIsNearBottom(true);
       setExpandedInlineToolCallIds(new Set());
       setExpandedToolCallGroupIds(new Set());
+      setExpandedTurnHostIds(new Set());
     }, [agentId]);
 
     const isActive = useRetainedPanelActive();
@@ -512,7 +523,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
           tail: effectiveStreamItems,
           head: effectiveStreamHead ?? EMPTY_STREAM_HEAD,
           transform: transformTimelineItem,
-          level: toolCallDetailLevel,
+          display: chatDisplay,
+          expandedTurnHostIds,
           isTurnActive,
         }),
       [
@@ -520,7 +532,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
         effectiveStreamItems,
         effectiveStreamHead,
         transformTimelineItem,
-        toolCallDetailLevel,
+        chatDisplay,
+        expandedTurnHostIds,
         isTurnActive,
       ],
     );
@@ -651,6 +664,43 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
       [streamRenderStrategy],
     );
 
+    const setTurnExpanded = useCallback((hostId: string, expanded: boolean) => {
+      // A turn opens below its summary line; keep that line under the reader's pointer.
+      viewportRef.current?.holdReadingPosition();
+      setExpandedTurnHostIds((previous) => {
+        if (previous.has(hostId) === expanded) return previous;
+        const next = new Set(previous);
+        if (expanded) {
+          next.add(hostId);
+        } else {
+          next.delete(hostId);
+        }
+        return next;
+      });
+    }, []);
+    // Chat find reveals a match inside a collapsed turn by opening the turn first.
+    const revealLoadedMessage = useStableEvent((messageId: string): boolean => {
+      const hostId = presentation.turns.hostIdByFoldedMessageId.get(messageId);
+      if (hostId && !expandedTurnHostIds.has(hostId)) {
+        setTurnExpanded(hostId, true);
+        return true;
+      }
+      return revealLoadedHistory(messageId);
+    });
+    // Read through stable events so a collapse rerun does not change the renderer identity;
+    // rows whose turn state changed are revised through `historyRowRevision`.
+    const getCollapsedTurn = useStableEvent((hostId: string) =>
+      presentation.turns.turnsByHostId.get(hostId),
+    );
+    const getTurnIndent = useStableEvent((layoutItem: StreamLayoutItem): TurnIndent => {
+      const { nestedItemIds } = presentation.turns;
+      if (nestedItemIds.has(layoutItem.item.id)) {
+        const below = layoutItem.belowItem;
+        return below && nestedItemIds.has(below.id) ? "nested" : "lastNested";
+      }
+      return getCollapsedTurn(layoutItem.item.id)?.expanded ? "openedHost" : "none";
+    });
+
     const setToolCallGroupExpanded = useCallback((groupId: string, expanded: boolean) => {
       setExpandedToolCallGroupIds((previous) => {
         const next = new Set(previous);
@@ -665,7 +715,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
 
     const renderUserMessageItem = useCallback(
       (layoutItem: StreamLayoutItem, item: Extract<StreamItem, { kind: "user_message" }>) => {
-        return (
+        const collapsedTurn = getCollapsedTurn(item.id);
+        const message = (
           <UserMessage
             serverId={resolvedServerId}
             agentId={agentId}
@@ -684,8 +735,25 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
             }
           />
         );
+        if (!collapsedTurn) {
+          return message;
+        }
+        return (
+          <>
+            {message}
+            <TurnSummaryLine turn={collapsedTurn} onExpandedChange={setTurnExpanded} />
+          </>
+        );
       },
-      [context.capabilities, agentId, client, pendingClientMessageIds, resolvedServerId],
+      [
+        context.capabilities,
+        agentId,
+        client,
+        getCollapsedTurn,
+        pendingClientMessageIds,
+        resolvedServerId,
+        setTurnExpanded,
+      ],
     );
 
     const renderAssistantMessageItem = useCallback(
@@ -893,12 +961,14 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
         return renderStreamItemWithTurnFooter({
           content,
           layoutItem,
+          turnIndent: getTurnIndent(layoutItem),
           strategy: streamRenderStrategy,
           supportsTimelineCursor: supportsAgentForkContextCursor,
           onForkAssistantTurn: readOnly ? undefined : handleForkAssistantTurn,
         });
       },
       [
+        getTurnIndent,
         handleForkAssistantTurn,
         readOnly,
         renderStreamItemContent,
@@ -1060,13 +1130,25 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     const streamScrollEnabled =
       !streamRenderStrategy.shouldDisableParentScrollOnInlineDetailsExpansion() ||
       expandedInlineToolCallIds.size === 0;
+    const { nestedItemIds } = presentation.turns;
     const historyRowRevision = useMemo(
       () => ({
         contentById: presentation.historyGroupUpdatesByHostId,
-        displayStateById: expandedToolCallGroupIds,
+        displayStateById: {
+          has: (id: string) =>
+            expandedToolCallGroupIds.has(id) ||
+            expandedTurnHostIds.has(id) ||
+            nestedItemIds.has(id),
+        },
         globalDisplayState: isMobile,
       }),
-      [expandedToolCallGroupIds, isMobile, presentation.historyGroupUpdatesByHostId],
+      [
+        expandedToolCallGroupIds,
+        expandedTurnHostIds,
+        isMobile,
+        nestedItemIds,
+        presentation.historyGroupUpdatesByHostId,
+      ],
     );
 
     const findItems = useMemo(
@@ -1080,7 +1162,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
         epoch={timelineEpoch}
         items={findItems}
         viewportRef={viewportRef}
-        revealLoadedMessage={revealLoadedHistory}
+        revealLoadedMessage={revealLoadedMessage}
         visibleMessageIds={mountedMessageIds}
       >
         <ToolCallSheetProvider>
@@ -1763,15 +1845,41 @@ const permissionStyles = StyleSheet.create((theme) => ({
 }));
 
 interface StreamItemWrapperProps {
-  itemId: string;
   gapBelow: number;
+  turnIndent: TurnIndent;
   children: ReactNode;
 }
 
-function StreamItemWrapper({ gapBelow, children }: StreamItemWrapperProps) {
+function StreamItemWrapper({ gapBelow, turnIndent, children }: StreamItemWrapperProps) {
   const wrapperStyle = useMemo(
-    () => [stylesheet.streamItemWrapper, { marginBottom: gapBelow }],
-    [gapBelow],
+    () => [
+      stylesheet.streamItemWrapper,
+      { marginBottom: turnIndent === "nested" || turnIndent === "openedHost" ? 0 : gapBelow },
+    ],
+    [gapBelow, turnIndent],
   );
-  return <View style={wrapperStyle}>{children}</View>;
+  const gapStyle = useMemo(() => ({ paddingBottom: gapBelow }), [gapBelow]);
+  switch (turnIndent) {
+    case "none":
+      return <View style={wrapperStyle}>{children}</View>;
+    case "openedHost":
+      return (
+        <View style={wrapperStyle}>
+          {children}
+          <IndentRail style={gapStyle} />
+        </View>
+      );
+    case "nested":
+      return (
+        <View style={wrapperStyle}>
+          <IndentRail style={gapStyle}>{children}</IndentRail>
+        </View>
+      );
+    case "lastNested":
+      return (
+        <View style={wrapperStyle}>
+          <IndentRail>{children}</IndentRail>
+        </View>
+      );
+  }
 }

packages/app/src/components/indent-rail.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+/**
+ * Collapsed chat rows badge their summary with an icon whose center sits 7px into the content
+ * column (`ExpandableBadge` bleeds 13px left, then 1px border, 8px padding, 22px icon). The rail
+ * hangs from that center so opened rows read as children of the line that opened them.
+ */
+const RAIL_LEFT = 7;
+const RAIL_WIDTH = 1;
+export const INDENT_RAIL_CONTENT_OFFSET = 21;
+
+/** Indents opened chat rows under the summary that collapsed them, behind a vertical line. */
+export function IndentRail({
+  children,
+  style,
+}: {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}) {
+  return <View style={[styles.rail, style]}>{children}</View>;
+}
+
+const styles = StyleSheet.create((theme) => ({
+  rail: {
+    marginLeft: RAIL_LEFT,
+    paddingLeft: INDENT_RAIL_CONTENT_OFFSET - RAIL_LEFT - RAIL_WIDTH,
+    borderLeftWidth: RAIL_WIDTH,
+    borderLeftColor: theme.colors.border,
+  },
+}));

packages/app/src/components/markdown/renderer.tsx

@@ -23,14 +23,29 @@ const ThemedMarkdown = withUnistyles(EnrichedMarkdownText);
 const MD4C_FLAGS = { latexMath: false, hardSoftBreaks: true, admonitions: true };
 
 // Reading the breakpoint here makes Unistyles restyle the text when the layout crosses it.
-const markdownStyle = (compact: boolean) => (theme: Theme, rt: { breakpoint?: string }) =>
-  createMarkdownStyles(theme, { compact, blockGap: resolveDensity(rt, density.blockGap) });
+const markdownStyle =
+  (compact: boolean, muted = false) =>
+  (theme: Theme, rt: { breakpoint?: string }) =>
+    createMarkdownStyles(theme, {
+      compact,
+      muted,
+      blockGap: resolveDensity(rt, density.blockGap),
+    });
 const regularStyle = markdownStyle(false);
 const compactStyle = markdownStyle(true);
+const compactMutedStyle = markdownStyle(true, true);
+
+function pickMarkdownStyle(compact: boolean, muted: boolean) {
+  if (!compact) return regularStyle;
+  return muted ? compactMutedStyle : compactStyle;
+}
 
 export interface MarkdownRendererProps extends MarkdownImageContext {
   text: string;
   compact?: boolean;
+  /** Muted text colour. Compact surfaces only. */
+  muted?: boolean;
+  selectable?: boolean;
   streaming?: boolean;
   onLinkPress?: (url: string) => unknown;
 }
@@ -56,6 +71,8 @@ export const MarkdownRenderer = memo(function MarkdownRenderer(props: MarkdownRe
 const MarkdownPart = memo(function MarkdownPart({
   text,
   compact = false,
+  muted = false,
+  selectable = true,
   streaming = false,
   onLinkPress,
   ...imageContext
@@ -98,9 +115,9 @@ const MarkdownPart = memo(function MarkdownPart({
             <ThemedMarkdown
               key={`${segment.kind}:${segment.id}`}
               markdown={segment.source}
-              uniProps={compact ? compactStyle : regularStyle}
+              uniProps={pickMarkdownStyle(compact, muted)}
               flavor="github"
-              selectable
+              selectable={selectable}
               md4cFlags={MD4C_FLAGS}
               linkRecognition={linkRecognition}
               enableTaskListItemToggle={false}

packages/app/src/components/markdown/styles.ts

@@ -7,7 +7,11 @@ const WEB_CONTAINER = { userSelect: "text", WebkitUserSelect: "text" } as const;
 
 export function createMarkdownStyles(
   theme: Theme,
-  { compact = false, blockGap }: { compact?: boolean; blockGap: number },
+  {
+    compact = false,
+    muted = false,
+    blockGap,
+  }: { compact?: boolean; muted?: boolean; blockGap: number },
 ): { markdownStyle: MarkdownStyle; selectionColor: string; containerStyle?: typeof WEB_CONTAINER } {
   const fontSize = compact ? theme.fontSize.base : theme.fontSize.content;
   // Every block is followed by the same gap; the library drops it after the last block.
@@ -16,7 +20,7 @@ export function createMarkdownStyles(
     fontSize,
     fontFamily: theme.fontFamily.ui,
     lineHeight: Math.round(fontSize * 1.4),
-    color: theme.colors.foreground,
+    color: muted ? theme.colors.foregroundMuted : theme.colors.foreground,
     ...block,
   };
   const heading = (scale: number) => ({

packages/app/src/components/message.tsx

@@ -971,6 +971,10 @@ const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
     borderBottomLeftRadius: 0,
     borderBottomRightRadius: 0,
   },
+  // Details that do not sit in a card leave the header as a lone highlighted pill.
+  pressableExpandedDetached: {
+    borderRadius: theme.borderRadius.full,
+  },
   detailWrapperBorderless: {
     borderWidth: 0,
   },
@@ -2048,7 +2052,10 @@ export const ExpandableBadge = memo(function ExpandableBadge({
       expandableBadgeStylesheet.pressable,
       isPressed && isInteractive ? expandableBadgeStylesheet.pressablePressed : null,
       isExpanded && expandableBadgeStylesheet.pressableExpanded,
-      isExpanded && !borderlessWhenExpanded && expandableBadgeStylesheet.pressableExpandedAttached,
+      isExpanded &&
+        (borderlessWhenExpanded
+          ? expandableBadgeStylesheet.pressableExpandedDetached
+          : expandableBadgeStylesheet.pressableExpandedAttached),
     ],
     [borderlessWhenExpanded, isExpanded, isInteractive, isPressed],
   );

packages/app/src/components/question-form-card.browser.test.tsx

@@ -10,6 +10,12 @@ import { QuestionFormCard } from "./question-form-card";
 // Load translations so controls expose their real accessible names.
 void testI18n;
 
+// The Markdown engine does not load in this harness; question and option text are covered by
+// e2e/browser/question-prompt-pagination.spec.ts. Plain text keeps these tests on the answers.
+vi.mock("@/components/markdown/renderer", () => ({
+  MarkdownRenderer: ({ text }: { text: string }) => <span>{text}</span>,
+}));
+
 // App sources compile against the classic JSX runtime, which expects React on the global.
 beforeEach(() => vi.stubGlobal("React", React));
 

packages/app/src/components/question-form-card.tsx

@@ -1,7 +1,13 @@
 import { Alert } from "@/components/ui/alert";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
 import { useState, useCallback, useMemo, useRef, type RefObject } from "react";
-import { View, Text, Pressable, type PressableStateCallbackType } from "react-native";
+import {
+  View,
+  Text,
+  Pressable,
+  type GestureResponderEvent,
+  type PressableStateCallbackType,
+} from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { Check, X } from "lucide-react-native";
@@ -12,6 +18,7 @@ import { isWeb } from "@/constants/platform";
 import { EditingTextInput as TextInput } from "@/components/ui/text-input";
 import type { EditingTextInputHandle } from "@/components/ui/text-input/types";
 import { ScrollableCodeSurface } from "@/components/ui/scrollable-code-surface";
+import { MarkdownRenderer } from "@/components/markdown/renderer";
 import {
   areQuestionsAnswered,
   buildQuestionFormAnswers,
@@ -36,6 +43,20 @@ const IS_WEB = isWeb;
 // drag to the preview's nested scroll, so lines past a cap would be unreachable.
 const OPTION_PREVIEW_MAX_HEIGHT = IS_WEB ? 240 : undefined;
 
+// Web clicks that must not answer: a link in the label, anything in the description, and the
+// second click of a double-click, which would otherwise land on the next question's options.
+function isNonAnsweringClick(event: GestureResponderEvent, description: View | null): boolean {
+  if (!IS_WEB) return false;
+  const click = event.nativeEvent as unknown as MouseEvent;
+  if (click.detail > 1) return true;
+  const target = click.target as Element | null;
+  const descriptionElement = description as unknown as Element | null;
+  return Boolean(target?.closest("a") || descriptionElement?.contains(target));
+}
+
+// The description is selectable text, so a touch on it belongs to the text, not the option.
+const claimResponder = () => true;
+
 function getQuestionInputPlaceholder({
   question,
   answerPlaceholder,
@@ -71,9 +92,14 @@ function QuestionOptionRow({
 }: QuestionOptionRowProps) {
   const { theme } = useUnistyles();
 
-  const handlePress = useCallback(() => {
-    onToggle(qIndex, optIndex, multiSelect);
-  }, [onToggle, qIndex, optIndex, multiSelect]);
+  const descriptionRef = useRef<View>(null);
+  const handlePress = useCallback(
+    (event: GestureResponderEvent) => {
+      if (isNonAnsweringClick(event, descriptionRef.current)) return;
+      onToggle(qIndex, optIndex, multiSelect);
+    },
+    [onToggle, qIndex, optIndex, multiSelect],
+  );
 
   const pressableStyle = useCallback(
     ({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
@@ -86,17 +112,6 @@ function QuestionOptionRow({
     [isSelected, theme.colors.surface2],
   );
 
-  const optionLabelStyle = useMemo(
-    () => [
-      styles.optionLabel,
-      { color: isSelected ? theme.colors.foreground : theme.colors.foregroundMuted },
-    ],
-    [isSelected, theme.colors.foreground, theme.colors.foregroundMuted],
-  );
-  const optionDescriptionStyle = useMemo(
-    () => [styles.optionDescription, { color: theme.colors.foregroundMuted }],
-    [theme.colors.foregroundMuted],
-  );
   const accessibilityState = useMemo(() => ({ checked: isSelected }), [isSelected]);
 
   // Static left-side control: square for multi-select, circle for single-select.
@@ -135,9 +150,15 @@ function QuestionOptionRow({
           {isSelected && !multiSelect ? <View style={radioDotStyle} /> : null}
         </View>
         <View style={styles.optionTextBlock}>
-          <Text style={optionLabelStyle}>{option.label}</Text>
+          <MarkdownRenderer text={option.label} compact muted={!isSelected} selectable={false} />
           {option.description ? (
-            <Text style={optionDescriptionStyle}>{option.description}</Text>
+            <View
+              ref={descriptionRef}
+              testID="question-form-option-description"
+              onStartShouldSetResponder={claimResponder}
+            >
+              <MarkdownRenderer text={option.description} compact muted />
+            </View>
           ) : null}
           {option.preview ? (
             // Shown for every option at once so they can be compared before picking.
@@ -522,10 +543,6 @@ export function QuestionFormCard({
     ],
     [theme.colors.surface1, theme.colors.border],
   );
-  const questionTextStyle = useMemo(
-    () => [styles.questionText, { color: theme.colors.foreground }],
-    [theme.colors.foreground],
-  );
   // Single-select radios need a group; checkboxes are valid standalone.
   const optionsGroupAccessibility = useMemo(
     () =>
@@ -570,9 +587,9 @@ export function QuestionFormCard({
         onSelect={handleSelectQuestion}
       />
       <View style={styles.questionHeader}>
-        <Text testID="question-form-current-question" style={questionTextStyle}>
-          {activeQuestion?.question}
-        </Text>
+        <View testID="question-form-current-question" style={styles.questionText}>
+          <MarkdownRenderer text={questions[resolvedActiveQuestionIndex].question} compact />
+        </View>
       </View>
 
       {activeQuestion ? (
@@ -675,9 +692,6 @@ const styles = StyleSheet.create((theme) => ({
   },
   questionText: {
     flex: 1,
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.normal,
-    lineHeight: 22,
   },
   optionsWrap: {
     gap: theme.spacing[1],
@@ -723,15 +737,6 @@ const styles = StyleSheet.create((theme) => ({
     flex: 1,
     gap: theme.spacing[1],
   },
-  optionLabel: {
-    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.normal,
-    lineHeight: 22,
-  },
-  optionDescription: {
-    fontSize: theme.fontSize.base,
-    lineHeight: 20,
-  },
   optionPreviewText: {
     lineHeight: 20,
     ...(isWeb ? { whiteSpace: "pre-wrap", overflowWrap: "break-word" } : null),

packages/app/src/components/ui/tooltip.tsx

@@ -27,6 +27,7 @@ import { FadeIn, FadeOut } from "react-native-reanimated";
 import { StyleSheet } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { FloatingSurface } from "@/components/ui/floating";
+import { useRetainedPanelActive } from "@/components/retained-panel";
 import { isNative, isWeb } from "@/constants/platform";
 import { getOverlayRoot, OVERLAY_Z } from "@/lib/overlay-root";
 
@@ -256,8 +257,15 @@ export function Tooltip({
   });
 
   const isCompact = useIsCompactFormFactor();
+  const active = useRetainedPanelActive();
   const opensOnPress = isNative || isCompact;
-  const enabled = opensOnPress ? enabledOnMobile : enabledOnDesktop;
+  const enabled = active && (opensOnPress ? enabledOnMobile : enabledOnDesktop);
+
+  // Remove the portal in the inactive commit, before the retained chat freezes.
+  // Closing also prevents the tooltip from returning when its panel is shown again.
+  useEffect(() => {
+    if (!active && isOpen) setIsOpen(false);
+  }, [active, isOpen, setIsOpen]);
 
   const value = useMemo<TooltipContextValue>(
     () => ({
@@ -329,6 +337,10 @@ export function TooltipTrigger({
     };
   }, [clearOpenTimer]);
 
+  useEffect(() => {
+    if (!ctx.enabled) clearOpenTimer();
+  }, [ctx.enabled, clearOpenTimer]);
+
   const handleHoverIn = useCallback(
     (e?: unknown) => {
       if (isCallable(onHoverIn)) onHoverIn(e);

packages/app/src/composer/tracks.tsx

@@ -276,7 +276,11 @@ export function ComposerTrackRow({
  * knockout for marks that sit on top of an icon, and nothing sits under this one, so it comes off
  * too — leaving every mark's visible edge on the same rail whatever state it is in.
  */
-function ComposerTrackMark({ bucket }: { bucket: SidebarStateBucket | null }): ReactElement | null {
+export function ComposerTrackMark({
+  bucket,
+}: {
+  bucket: SidebarStateBucket | null;
+}): ReactElement | null {
   if (!bucket) {
     return null;
   }

packages/app/src/hooks/use-settings/index.ts

@@ -42,6 +42,7 @@ import {
   saveAppSettings as saveAppSettingsPure,
   type AppSettings,
   type AppSettingsUpdate,
+  type ChatDisplay,
   type OpenInSidePanePreferences,
   type PullRequestOpenLocation,
   type DesktopSettingsBridge,
@@ -84,6 +85,7 @@ export {
 export type {
   AppSettings,
   AppSettingsUpdate,
+  ChatDisplay,
   AppLanguage,
   OpenInSidePanePreferences,
   PullRequestOpenLocation,

packages/app/src/hooks/use-settings/storage.test.ts

@@ -185,6 +185,7 @@ describe("loadAppSettingsFromStorage", () => {
 
     expect(result).toEqual(DEFAULT_CLIENT_SETTINGS);
     expect(DEFAULT_CLIENT_SETTINGS.language).toBe("system");
+    expect(DEFAULT_CLIENT_SETTINGS.chatDisplay).toBe("collapseTurns");
     expect(JSON.parse(deps.storage.entries.get(APP_SETTINGS_KEY) ?? "null")).toEqual(
       DEFAULT_CLIENT_SETTINGS,
     );
@@ -454,6 +455,7 @@ describe("loadAppSettingsFromStorage", () => {
       ...DEFAULT_CLIENT_SETTINGS,
       theme: "dark",
       contentFontSize: DEFAULT_UI_BASE_FONT_SIZE,
+      chatDisplay: "full",
     });
     expect(JSON.parse(deps.storage.entries.get(APP_SETTINGS_KEY) ?? "null")).toEqual({
       manageBuiltInDaemon: false,
@@ -592,6 +594,7 @@ describe("loadSettingsFromStorage", () => {
       ...DEFAULT_APP_SETTINGS,
       theme: "light",
       contentFontSize: DEFAULT_UI_BASE_FONT_SIZE,
+      chatDisplay: "full",
     });
   });
 
@@ -636,6 +639,7 @@ describe("loadSettingsFromStorage", () => {
       ...DEFAULT_APP_SETTINGS,
       theme: "light",
       contentFontSize: DEFAULT_UI_BASE_FONT_SIZE,
+      chatDisplay: "full",
       manageBuiltInDaemon: false,
       releaseChannel: "beta",
     });
@@ -657,6 +661,7 @@ describe("loadSettingsFromStorage", () => {
       ...DEFAULT_APP_SETTINGS,
       theme: "light",
       contentFontSize: DEFAULT_UI_BASE_FONT_SIZE,
+      chatDisplay: "full",
     });
   });
 });
@@ -732,7 +737,7 @@ describe("saveAppSettings", () => {
       ...DEFAULT_CLIENT_SETTINGS,
       theme: "light",
       contentFontSize: DEFAULT_UI_BASE_FONT_SIZE,
-      toolCallDetailLevel: "overview",
+      chatDisplay: "collapseToolCalls",
     });
   });
 
@@ -787,27 +792,45 @@ describe("appearance settings", () => {
     expect(result.contentFontSize).toBe(DEFAULT_UI_BASE_FONT_SIZE);
     expect(result.codeFontSize).toBe(DEFAULT_CODE_FONT_SIZE);
     expect(result.syntaxTheme).toBe("one");
-    expect(result.toolCallDetailLevel).toBe("detailed");
+    expect(result.chatDisplay).toBe("full");
   });
 
-  it("migrates the enabled compact tool call preference to overview", async () => {
+  it("migrates the enabled compact tool call preference to collapsed tool calls", async () => {
     const deps = makeDeps({
       storage: createInMemoryKeyValueStorage({
         [APP_SETTINGS_KEY]: JSON.stringify({ compactToolCalls: true }),
       }),
     });
 
-    expect((await loadAppSettingsFromStorage(deps)).toolCallDetailLevel).toBe("overview");
+    expect((await loadAppSettingsFromStorage(deps)).chatDisplay).toBe("collapseToolCalls");
   });
 
-  it("clears settings with an unrecognized tool call detail level", async () => {
+  it.each([
+    ["overview", "collapseToolCalls"],
+    ["concise", "collapseToolCalls"],
+    ["detailed", "full"],
+    ["unknown", "full"],
+  ])("reads the %s tool call detail level as the %s chat display", async (legacy, display) => {
     const deps = makeDeps({
       storage: createInMemoryKeyValueStorage({
-        [APP_SETTINGS_KEY]: JSON.stringify({ toolCallDetailLevel: "unknown" }),
+        [APP_SETTINGS_KEY]: JSON.stringify({ toolCallDetailLevel: legacy }),
       }),
     });
 
-    expect((await loadAppSettingsFromStorage(deps)).toolCallDetailLevel).toBe("detailed");
+    expect((await loadAppSettingsFromStorage(deps)).chatDisplay).toBe(display);
+  });
+
+  it("keeps a stored chat display over the tool call detail level it replaced", async () => {
+    const deps = makeDeps({
+      storage: createInMemoryKeyValueStorage({
+        [APP_SETTINGS_KEY]: JSON.stringify({
+          chatDisplay: "collapseTurns",
+          toolCallDetailLevel: "detailed",
+        }),
+      }),
+    });
+
+    expect((await loadAppSettingsFromStorage(deps)).chatDisplay).toBe("collapseTurns");
   });
 
   it("migrates a switched-off checks row item to the hidden checks display", async () => {

packages/app/src/hooks/use-settings/storage.ts

@@ -40,7 +40,8 @@ export type WorkspaceTitleSource = "title" | "branch";
 export type PullRequestOpenLocation = "main" | "side" | "explorer";
 /** What a sidebar workspace row shows in the space to the right of its title. */
 export type SidebarWorkspaceTrailing = "diff" | "timestamp" | "none";
-export type ToolCallDetailLevel = "overview" | "detailed";
+/** How much of an agent's work the chat shows between the user's message and the reply. */
+export type ChatDisplay = "full" | "collapseToolCalls" | "collapseTurns";
 
 const ThemePreferenceSchema = z.enum([
   ...THEME_OPTIONS.map((option) => option.name),
@@ -100,7 +101,7 @@ export interface AppSettings {
   /** How usage reads and which windows the sidebar summary shows. */
   usage: UsagePreferences;
   autoExpandReasoning: boolean;
-  toolCallDetailLevel: ToolCallDetailLevel;
+  chatDisplay: ChatDisplay;
   chatOutlineEnabled: boolean;
   vimKeybindings: boolean;
   filePanelAssociations: Record<string, string>;
@@ -156,7 +157,7 @@ export const DEFAULT_CLIENT_SETTINGS: AppSettings = {
   sidebarFooterItems: [],
   usage: DEFAULT_USAGE_PREFERENCES,
   autoExpandReasoning: false,
-  toolCallDetailLevel: "detailed",
+  chatDisplay: "collapseTurns",
   chatOutlineEnabled: true,
   vimKeybindings: false,
   filePanelAssociations: {},
@@ -199,6 +200,7 @@ const SidebarRowItemsSchema = z
 type StoredAppSettingsFallback = AppSettings & {
   uiFontSize?: number;
   compactToolCalls?: boolean;
+  toolCallDetailLevel?: "overview" | "detailed";
   manageBuiltInDaemon?: boolean;
   releaseChannel?: ReleaseChannel;
   needsWrite: boolean;
@@ -251,11 +253,13 @@ const StoredAppSettingsSchema = z
     sidebarFooterItems: z.array(z.object({ key: z.string(), visible: z.boolean() })).catch([]),
     usage: UsagePreferencesSchema,
     autoExpandReasoning: z.boolean().catch(false),
+    chatDisplay: z.enum(["full", "collapseToolCalls", "collapseTurns"]).optional().catch("full"),
+    // COMPAT(toolCallDetailLevel): replaced by chatDisplay in v0.13, remove after 2027-04-24.
     toolCallDetailLevel: z
       .enum(["overview", "detailed"])
       .or(z.literal("concise").transform(() => "overview" as const))
       .optional()
-      .catch("detailed"),
+      .catch(undefined),
     // COMPAT(compactToolCalls): migrated in v0.1.105, remove after 2027-01-12.
     compactToolCalls: z.boolean().optional().catch(undefined),
     chatOutlineEnabled: z.boolean().catch(true),
@@ -305,8 +309,10 @@ const StoredAppSettingsSchema = z
       (isChecksHiddenByLegacyRowItem(stored.sidebarRowItems)
         ? "none"
         : DEFAULT_SIDEBAR_CHECKS_DISPLAY);
-    const toolCallDetailLevel =
-      stored.toolCallDetailLevel ?? (stored.compactToolCalls ? "overview" : "detailed");
+    const groupsToolCalls = stored.toolCallDetailLevel
+      ? stored.toolCallDetailLevel === "overview"
+      : stored.compactToolCalls === true;
+    const chatDisplay = stored.chatDisplay ?? (groupsToolCalls ? "collapseToolCalls" : "full");
     return {
       ...stored,
       openInSidePane,
@@ -321,7 +327,7 @@ const StoredAppSettingsSchema = z
           stored.sidebarRowItems.services ??
           (stored.sidebarRowItems.scripts === false ? false : DEFAULT_SIDEBAR_ROW_ITEMS.services),
       },
-      toolCallDetailLevel,
+      chatDisplay,
       needsWrite,
     };
   })
@@ -449,6 +455,7 @@ export function normalizeAppSettings(value: unknown): AppSettings {
     manageBuiltInDaemon: _manageBuiltInDaemon,
     releaseChannel: _releaseChannel,
     compactToolCalls: _compactToolCalls,
+    toolCallDetailLevel: _toolCallDetailLevel,
     uiFontSize: _uiFontSize,
     ...settings
   } = StoredAppSettingsSchema.parse(value);

packages/app/src/i18n/resources/ar.ts

@@ -1908,6 +1908,13 @@ export const ar: TranslationResources = {
     backdrop: "خلفية القائمة",
   },
   subagents: {
+    parent: {
+      backToParent: "العودة إلى الوكيل الأصلي",
+      backTo: "العودة إلى {{label}}",
+      parent: "الأصل",
+      parentAgent: "الوكيل الأصلي",
+      openParent: "فتح الوكيل الأصلي",
+    },
     title: "الوكلاء الفرعيون",
     pillLabelOne: "وكيل فرعي واحد",
     pillLabelMany: "{{count}} وكلاء فرعيين",
@@ -2008,6 +2015,12 @@ export const ar: TranslationResources = {
     input: "مدخل",
     output: "الإخراج",
   },
+  turnSummary: {
+    messages: {
+      one: "كتب {{count}} رسالة",
+      other: "كتب {{count}} رسائل",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "حرّر {{count}} ملفًا",
@@ -2312,12 +2325,13 @@ export const ar: TranslationResources = {
         label: "عرض التفكير دائماً",
         description: "إظهار تفكير الوكيل وخطوات الاستدلال بشكل كامل بشكل افتراضي",
       },
-      toolCallDetail: {
-        label: "عرض استدعاءات الأدوات",
-        description: "كيفية ظهور استدعاءات الأدوات في المخطط الزمني",
+      chatDisplay: {
+        label: "عرض المحادثة",
+        description: "مقدار عمل الوكيل الذي تعرضه المحادثة",
         options: {
-          overview: "ملخص",
-          detailed: "التفاصيل الكاملة",
+          full: "كامل",
+          collapseToolCalls: "طيّ استدعاءات الأدوات",
+          collapseTurns: "طيّ الأدوار",
         },
       },
       language: {

packages/app/src/i18n/resources/en.ts

@@ -1933,6 +1933,13 @@ export const en = {
     backdrop: "Menu backdrop",
   },
   subagents: {
+    parent: {
+      backToParent: "Back to parent",
+      backTo: "Back to {{label}}",
+      parent: "Parent",
+      parentAgent: "Parent agent",
+      openParent: "Open parent",
+    },
     title: "Subagents",
     pillLabelOne: "1 subagent",
     pillLabelMany: "{{count}} subagents",
@@ -2033,6 +2040,12 @@ export const en = {
     input: "Input",
     output: "Output",
   },
+  turnSummary: {
+    messages: {
+      one: "wrote {{count}} message",
+      other: "wrote {{count}} messages",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "edited {{count}} file",
@@ -2400,12 +2413,13 @@ export const en = {
         label: "Always expand reasoning",
         description: "Show agent thinking and chain-of-thought blocks fully expanded by default",
       },
-      toolCallDetail: {
-        label: "Tool call display",
-        description: "How tool calls appear in the timeline",
+      chatDisplay: {
+        label: "Chat display",
+        description: "How much of an agent's work the chat shows",
         options: {
-          overview: "Summary",
-          detailed: "Full detail",
+          full: "Full",
+          collapseToolCalls: "Collapse tool calls",
+          collapseTurns: "Collapse turns",
         },
       },
       language: {

packages/app/src/i18n/resources/es.ts

@@ -1956,6 +1956,13 @@ export const es: TranslationResources = {
     backdrop: "Fondo del menú",
   },
   subagents: {
+    parent: {
+      backToParent: "Volver al padre",
+      backTo: "Volver a {{label}}",
+      parent: "Padre",
+      parentAgent: "Agente padre",
+      openParent: "Abrir padre",
+    },
     title: "Subagentes",
     pillLabelOne: "1 subagente",
     pillLabelMany: "{{count}} subagentes",
@@ -2056,6 +2063,12 @@ export const es: TranslationResources = {
     input: "Aporte",
     output: "Producción",
   },
+  turnSummary: {
+    messages: {
+      one: "escribió {{count}} mensaje",
+      other: "escribió {{count}} mensajes",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "editó {{count}} archivo",
@@ -2328,12 +2341,13 @@ export const es: TranslationResources = {
         description:
           "Mostrar los bloques de pensamiento y razonamiento del agente totalmente expandidos de forma predeterminada",
       },
-      toolCallDetail: {
-        label: "Visualización de llamadas a herramientas",
-        description: "Cómo aparecen las llamadas a herramientas en la cronología",
+      chatDisplay: {
+        label: "Visualización del chat",
+        description: "Cuánto del trabajo del agente muestra el chat",
         options: {
-          overview: "Resumen",
-          detailed: "Detalle completo",
+          full: "Completo",
+          collapseToolCalls: "Contraer llamadas a herramientas",
+          collapseTurns: "Contraer turnos",
         },
       },
       language: {

packages/app/src/i18n/resources/fr.ts

@@ -1954,6 +1954,13 @@ export const fr: TranslationResources = {
     backdrop: "Arrière-plan du menu",
   },
   subagents: {
+    parent: {
+      backToParent: "Retour au parent",
+      backTo: "Retour à {{label}}",
+      parent: "Parent",
+      parentAgent: "Agent parent",
+      openParent: "Ouvrir le parent",
+    },
     title: "Sous-agents",
     pillLabelOne: "1 sous-agent",
     pillLabelMany: "{{count}} sous-agents",
@@ -2055,6 +2062,12 @@ export const fr: TranslationResources = {
     input: "Entrée",
     output: "Sortie",
   },
+  turnSummary: {
+    messages: {
+      one: "{{count}} message écrit",
+      other: "{{count}} messages écrits",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "{{count}} fichier modifié",
@@ -2326,12 +2339,13 @@ export const fr: TranslationResources = {
         label: "Toujours afficher le raisonnement",
         description: "Afficher par défaut le raisonnement de l’agent entièrement déplié",
       },
-      toolCallDetail: {
-        label: "Affichage des appels d’outils",
-        description: "Comment les appels d’outils apparaissent dans la chronologie",
+      chatDisplay: {
+        label: "Affichage du chat",
+        description: "La part du travail de l’agent affichée dans le chat",
         options: {
-          overview: "Résumé",
-          detailed: "Détails complets",
+          full: "Complet",
+          collapseToolCalls: "Réduire les appels d’outils",
+          collapseTurns: "Réduire les tours",
         },
       },
       language: {

packages/app/src/i18n/resources/ja.ts

@@ -1927,6 +1927,13 @@ export const ja: TranslationResources = {
     backdrop: "メニューの背景",
   },
   subagents: {
+    parent: {
+      backToParent: "親に戻る",
+      backTo: "{{label}} に戻る",
+      parent: "親",
+      parentAgent: "親エージェント",
+      openParent: "親を開く",
+    },
     title: "サブエージェント",
     pillLabelOne: "サブエージェント 1 件",
     pillLabelMany: "サブエージェント {{count}} 件",
@@ -2028,6 +2035,12 @@ export const ja: TranslationResources = {
     input: "入力",
     output: "出力",
   },
+  turnSummary: {
+    messages: {
+      one: "{{count}}件のメッセージを送信",
+      other: "{{count}}件のメッセージを送信",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "{{count}}個のファイルを編集",
@@ -2296,12 +2309,13 @@ export const ja: TranslationResources = {
         label: "常に思考プロセスを展開",
         description: "デフォルトでAIのエージェント思考・推論ブロックを完全に展開して表示します",
       },
-      toolCallDetail: {
-        label: "ツール呼び出しの表示",
-        description: "タイムラインでのツール呼び出しの表示方法",
+      chatDisplay: {
+        label: "チャットの表示",
+        description: "チャットに表示するエージェントの作業量",
         options: {
-          overview: "要約",
-          detailed: "すべての詳細",
+          full: "すべて",
+          collapseToolCalls: "ツール呼び出しを折りたたむ",
+          collapseTurns: "ターンを折りたたむ",
         },
       },
       language: {

packages/app/src/i18n/resources/ko.ts

@@ -1918,6 +1918,13 @@ export const ko: TranslationResources = {
     backdrop: "메뉴 배경",
   },
   subagents: {
+    parent: {
+      backToParent: "상위 에이전트로 돌아가기",
+      backTo: "{{label}}(으)로 돌아가기",
+      parent: "상위",
+      parentAgent: "상위 에이전트",
+      openParent: "상위 에이전트 열기",
+    },
     title: "하위 에이전트",
     pillLabelOne: "하위 에이전트 1개",
     pillLabelMany: "하위 에이전트 {{count}}개",
@@ -2018,6 +2025,12 @@ export const ko: TranslationResources = {
     input: "입력",
     output: "출력",
   },
+  turnSummary: {
+    messages: {
+      one: "{{count}} 메시지를 작성했습니다.",
+      other: "{{count}} 메시지를 작성했습니다.",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "{{count}} 파일을 편집했습니다.",
@@ -2287,12 +2300,13 @@ export const ko: TranslationResources = {
         label: "추론 항상 펼치기",
         description: "에이전트의 사고 및 추론 블록을 기본적으로 모두 펼쳐 표시합니다.",
       },
-      toolCallDetail: {
-        label: "도구 호출 표시",
-        description: "타임라인에 도구 호출이 표시되는 방식",
+      chatDisplay: {
+        label: "채팅 표시",
+        description: "채팅에 표시할 에이전트 작업의 양",
         options: {
-          overview: "요약",
-          detailed: "전체 세부정보",
+          full: "전체",
+          collapseToolCalls: "도구 호출 접기",
+          collapseTurns: "턴 접기",
         },
       },
       language: {

packages/app/src/i18n/resources/pt-BR.ts

@@ -1941,6 +1941,13 @@ export const ptBR: TranslationResources = {
     backdrop: "Fundo do menu",
   },
   subagents: {
+    parent: {
+      backToParent: "Voltar ao pai",
+      backTo: "Voltar para {{label}}",
+      parent: "Pai",
+      parentAgent: "Agente pai",
+      openParent: "Abrir pai",
+    },
     title: "Subagentes",
     pillLabelOne: "1 subagente",
     pillLabelMany: "{{count}} subagentes",
@@ -2041,6 +2048,12 @@ export const ptBR: TranslationResources = {
     input: "Entrada",
     output: "Saída",
   },
+  turnSummary: {
+    messages: {
+      one: "escreveu {{count}} mensagem",
+      other: "escreveu {{count}} mensagens",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "editou {{count}} arquivo",
@@ -2311,12 +2324,13 @@ export const ptBR: TranslationResources = {
         description:
           "Mostrar os blocos de pensamento e raciocínio do agente totalmente expandidos por padrão",
       },
-      toolCallDetail: {
-        label: "Exibição de chamadas de ferramentas",
-        description: "Como as chamadas de ferramentas aparecem na linha do tempo",
+      chatDisplay: {
+        label: "Exibição do chat",
+        description: "Quanto do trabalho do agente o chat mostra",
         options: {
-          overview: "Resumo",
-          detailed: "Detalhes completos",
+          full: "Completo",
+          collapseToolCalls: "Recolher chamadas de ferramentas",
+          collapseTurns: "Recolher turnos",
         },
       },
       language: {

packages/app/src/i18n/resources/ru.ts

@@ -1940,6 +1940,13 @@ export const ru: TranslationResources = {
     backdrop: "Фон меню",
   },
   subagents: {
+    parent: {
+      backToParent: "Назад к родителю",
+      backTo: "Назад к {{label}}",
+      parent: "Родитель",
+      parentAgent: "Родительский агент",
+      openParent: "Открыть родителя",
+    },
     title: "Субагенты",
     pillLabelOne: "1 субагент",
     pillLabelMany: "Субагентов: {{count}}",
@@ -2041,6 +2048,12 @@ export const ru: TranslationResources = {
     input: "Входные данные",
     output: "Выходные данные",
   },
+  turnSummary: {
+    messages: {
+      one: "написано {{count}} сообщение",
+      other: "написаны сообщения ({{count}})",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "изменён {{count}} файл",
@@ -2313,12 +2326,13 @@ export const ru: TranslationResources = {
         description:
           "По умолчанию полностью разворачивать блоки размышлений и хода рассуждений агента",
       },
-      toolCallDetail: {
-        label: "Отображение вызовов инструментов",
-        description: "Как вызовы инструментов отображаются на временной шкале",
+      chatDisplay: {
+        label: "Отображение чата",
+        description: "Какую часть работы агента показывает чат",
         options: {
-          overview: "Сводка",
-          detailed: "Все подробности",
+          full: "Полностью",
+          collapseToolCalls: "Сворачивать вызовы инструментов",
+          collapseTurns: "Сворачивать ходы",
         },
       },
       language: {

packages/app/src/i18n/resources/zh-CN.ts

@@ -1886,6 +1886,13 @@ export const zhCN: TranslationResources = {
     backdrop: "菜单背景",
   },
   subagents: {
+    parent: {
+      backToParent: "返回父代理",
+      backTo: "返回 {{label}}",
+      parent: "父代理",
+      parentAgent: "父代理",
+      openParent: "打开父代理",
+    },
     title: "Subagent",
     pillLabelOne: "1 个 subagent",
     pillLabelMany: "{{count}} 个 subagent",
@@ -1986,6 +1993,12 @@ export const zhCN: TranslationResources = {
     input: "输入",
     output: "输出",
   },
+  turnSummary: {
+    messages: {
+      one: "写了 {{count}} 条消息",
+      other: "写了 {{count}} 条消息",
+    },
+  },
   toolCallGroup: {
     editedFiles: {
       one: "编辑了 {{count}} 个文件",
@@ -2251,12 +2264,13 @@ export const zhCN: TranslationResources = {
         label: "始终展开推理过程",
         description: "默认情况下完全展开 AI 的思考和推理过程",
       },
-      toolCallDetail: {
-        label: "工具调用显示",
-        description: "工具调用在时间线中的显示方式",
+      chatDisplay: {
+        label: "聊天显示",
+        description: "聊天中显示多少智能体的工作",
         options: {
-          overview: "摘要",
-          detailed: "完整详情",
+          full: "完整",
+          collapseToolCalls: "折叠工具调用",
+          collapseTurns: "折叠轮次",
         },
       },
       language: {

packages/app/src/panels/agent-panel.tsx

@@ -80,6 +80,7 @@ import {
 } from "@/screens/agent/agent-ready-screen-bottom-anchor";
 import { WorkspaceDraftAgentTab } from "@/composer/draft/workspace-tab";
 import { AgentTracks, hasAgentTracks } from "@/panels/agent-tracks";
+import { ParentAgentCallout, useParentAgentId } from "@/subagents/parent";
 import { useCreateFlowStore } from "@/stores/create-flow-store";
 import { buildDraftStoreKey, generateDraftId } from "@/stores/draft-keys";
 import {
@@ -1109,7 +1110,11 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
   });
   const hasPluginComposerPills = useHasPluginComposerPills(serverId, workspaceId, agentId);
   const hasActiveComposer = !agentState.archivedAt && !isArchivingCurrentAgent;
+  const parentAgentId = useParentAgentId(serverId, agentId);
+  // With a composer the parent is a pill above it; without one, the box takes the composer's place.
+  const parentPillAgentId = showsComposer ? parentAgentId : null;
   const hasVisibleAgentTracks = hasAgentTracks({
+    parentAgentId: parentPillAgentId,
     subagentRows,
     tasks,
     archiveFinishedStatus: archiveFinishedSubagents.status,
@@ -1161,6 +1166,9 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
       composerState,
     ],
   );
+  const parentCallout = parentAgentId ? (
+    <ParentAgentCallout serverId={serverId} parentAgentId={parentAgentId} />
+  ) : null;
   const composerSection = showsComposer ? (
     <RenderProfile id={`AgentComposerSection:${agentId}`}>
       <AgentComposerSection
@@ -1179,7 +1187,9 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
         onMessageSent={handleMessageSent}
       />
     </RenderProfile>
-  ) : null;
+  ) : (
+    parentCallout
+  );
   const streamContent = (
     <View style={animatedStaticStyles.content}>
       {showsComposer ? null : <SheetAgentFacts serverId={serverId} agentId={agentId} />}
@@ -1203,6 +1213,7 @@ const ChatAgentReadyContent = memo(function ChatAgentReadyContent({
           serverId={serverId}
           workspaceId={workspaceId}
           agentId={agentId}
+          parentAgentId={parentPillAgentId}
           subagentRows={subagentRows}
           tasks={tasks}
           archiveFinishedStatus={archiveFinishedSubagents.status}

packages/app/src/panels/agent-tracks.tsx

@@ -16,6 +16,7 @@ import {
   useSubagentOpensInSheet,
   type SubagentRow,
 } from "@/subagents";
+import { ParentAgentPill } from "@/subagents/parent";
 import { SubagentsTrack } from "@/subagents/track";
 import type { TodoEntry } from "@/types/stream";
 import { navigateToAgent } from "@/utils/navigate-to-agent";
@@ -34,6 +35,7 @@ export const AgentTracks = memo(function AgentTracks({
   serverId,
   workspaceId,
   agentId,
+  parentAgentId,
   subagentRows,
   tasks,
   archiveFinishedStatus,
@@ -43,6 +45,7 @@ export const AgentTracks = memo(function AgentTracks({
   serverId: string;
   workspaceId: string;
   agentId: string;
+  parentAgentId: string | null;
   subagentRows: SubagentRow[];
   tasks: TodoEntry[] | undefined;
   archiveFinishedStatus: ArchiveFinishedStatus;
@@ -88,8 +91,12 @@ export const AgentTracks = memo(function AgentTracks({
     [openSubagentTarget, serverId, workspaceId],
   );
   const handleOpenProviderSubagent = useCallback(
-    (parentAgentId: string, subagentId: string) => {
-      openSubagentTarget({ kind: "provider_subagent", parentAgentId, subagentId });
+    (ownerAgentId: string, subagentId: string) => {
+      openSubagentTarget({
+        kind: "provider_subagent",
+        parentAgentId: ownerAgentId,
+        subagentId,
+      });
     },
     [openSubagentTarget],
   );
@@ -108,6 +115,7 @@ export const AgentTracks = memo(function AgentTracks({
   if (
     !hasWorkspaceDiffStat &&
     !hasAgentTracks({
+      parentAgentId,
       subagentRows,
       tasks,
       archiveFinishedStatus,
@@ -119,6 +127,7 @@ export const AgentTracks = memo(function AgentTracks({
 
   return (
     <ComposerTrackBar>
+      {parentAgentId ? <ParentAgentPill serverId={serverId} parentAgentId={parentAgentId} /> : null}
       <AgentTaskList tasks={tasks} />
       <SubagentsTrack
         serverId={serverId}
@@ -147,17 +156,20 @@ export const AgentTracks = memo(function AgentTracks({
 });
 
 export function hasAgentTracks({
+  parentAgentId,
   subagentRows,
   tasks,
   archiveFinishedStatus,
   hasPluginComposerPills = false,
 }: {
+  parentAgentId: string | null;
   subagentRows: readonly SubagentRow[];
   tasks: readonly TodoEntry[] | undefined;
   archiveFinishedStatus: ArchiveFinishedStatus;
   hasPluginComposerPills?: boolean;
 }): boolean {
   return (
+    parentAgentId !== null ||
     subagentRows.length > 0 ||
     Boolean(tasks?.length) ||
     archiveFinishedStatus.kind !== "idle" ||

packages/app/src/panels/provider-subagent-panel.tsx

@@ -16,6 +16,7 @@ import { usePaneContext } from "@/panels/pane-context";
 import { PaneSubtitle } from "@/panels/pane-subtitle";
 import { definePanel, type PanelDescriptor } from "@/panels/panel-registry";
 import { useSessionStore } from "@/stores/session-store";
+import { ParentAgentCallout } from "@/subagents/parent";
 import { type SubagentRow, useSubagentsForParent } from "@/subagents/select";
 import { useSubagentOpensInSheet } from "@/subagents/opens-in-sheet";
 import { SubagentsTrack } from "@/subagents/track";
@@ -253,33 +254,37 @@ function ProviderSubagentPanel() {
   return (
     <View style={styles.container} testID="provider-subagent-panel">
       {subtitle ? <PaneSubtitle text={subtitle} testID="provider-subagent-pane-subtitle" /> : null}
-      <AgentStreamView
-        agentId={streamId}
-        serverId={serverId}
-        context={streamContext}
-        streamItems={timeline?.tail ?? EMPTY_STREAM_ITEMS}
-        streamHead={timeline?.head ?? EMPTY_STREAM_ITEMS}
-        turnPresentation={turnPresentation}
-        pendingPermissions={EMPTY_PERMISSIONS}
-        isAuthoritativeHistoryReady
-        onOpenWorkspaceFile={openFileInWorkspace}
-        readOnly
-        historyPagination={historyPagination}
-        bottomOverlayTailClearance={childTrackClearance.tail}
-        bottomOverlayControlClearance={childTrackClearance.controls}
-      />
-      <ProviderSubagentChildTrack
-        serverId={serverId}
-        rows={childRows}
-        onOpenProviderSubagent={openProviderChild}
-        opensInSheet={opensInSheet}
-      />
+      <View style={styles.stream}>
+        <AgentStreamView
+          agentId={streamId}
+          serverId={serverId}
+          context={streamContext}
+          streamItems={timeline?.tail ?? EMPTY_STREAM_ITEMS}
+          streamHead={timeline?.head ?? EMPTY_STREAM_ITEMS}
+          turnPresentation={turnPresentation}
+          pendingPermissions={EMPTY_PERMISSIONS}
+          isAuthoritativeHistoryReady
+          onOpenWorkspaceFile={openFileInWorkspace}
+          readOnly
+          historyPagination={historyPagination}
+          bottomOverlayTailClearance={childTrackClearance.tail}
+          bottomOverlayControlClearance={childTrackClearance.controls}
+        />
+        <ProviderSubagentChildTrack
+          serverId={serverId}
+          rows={childRows}
+          onOpenProviderSubagent={openProviderChild}
+          opensInSheet={opensInSheet}
+        />
+      </View>
+      <ParentAgentCallout serverId={serverId} parentAgentId={target.parentAgentId} />
     </View>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
   container: { flex: 1, minHeight: 0 },
+  stream: { flex: 1, minHeight: 0 },
   unsupported: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
   unsupportedText: { color: theme.colors.foregroundMuted, textAlign: "center" },
 }));

packages/app/src/screens/settings/chat/chat-section.tsx

@@ -8,29 +8,25 @@ import {
   SettingsSwitch,
 } from "@/components/settings";
 import { isNative } from "@/constants/platform";
-import { useAppSettings, type AppSettings } from "@/hooks/use-settings";
+import { useAppSettings, type ChatDisplay } from "@/hooks/use-settings";
 
-const TOOL_CALL_DETAIL_LEVELS: readonly AppSettings["toolCallDetailLevel"][] = [
-  "detailed",
-  "overview",
-];
+const CHAT_DISPLAYS: readonly ChatDisplay[] = ["full", "collapseToolCalls", "collapseTurns"];
 
 export function ChatSection() {
   const { t } = useTranslation();
   const { settings, updateSettings } = useAppSettings();
 
-  const toolCallDetailOptions = useMemo(
+  const chatDisplayOptions = useMemo(
     () =>
-      TOOL_CALL_DETAIL_LEVELS.map((value) => ({
+      CHAT_DISPLAYS.map((value) => ({
         value,
-        label: t(`settings.general.toolCallDetail.options.${value}`),
+        label: t(`settings.general.chatDisplay.options.${value}`),
       })),
     [t],
   );
 
-  const changeToolCallDetailLevel = useCallback(
-    (toolCallDetailLevel: AppSettings["toolCallDetailLevel"]) =>
-      void updateSettings({ toolCallDetailLevel }),
+  const changeChatDisplay = useCallback(
+    (chatDisplay: ChatDisplay) => void updateSettings({ chatDisplay }),
     [updateSettings],
   );
   const changeAutoExpandReasoning = useCallback(
@@ -53,11 +49,11 @@ export function ChatSection() {
             onValueChange={changeAutoExpandReasoning}
           />
           <SettingsSelect
-            label={t("settings.general.toolCallDetail.label")}
-            hint={t("settings.general.toolCallDetail.description")}
-            value={settings.toolCallDetailLevel}
-            options={toolCallDetailOptions}
-            onValueChange={changeToolCallDetailLevel}
+            label={t("settings.general.chatDisplay.label")}
+            hint={t("settings.general.chatDisplay.description")}
+            value={settings.chatDisplay}
+            options={chatDisplayOptions}
+            onValueChange={changeChatDisplay}
           />
           {isNative ? null : (
             <SettingsSwitch

packages/app/src/subagents/parent/callout.tsx

@@ -0,0 +1,116 @@
+import type { ReactElement } from "react";
+import { Text, View } from "react-native";
+import { useTranslation } from "react-i18next";
+import { CornerUpLeft } from "lucide-react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { Button } from "@/components/ui/button";
+import { ComposerTrackMark } from "@/composer/tracks";
+import { FOOTER_HEIGHT } from "@/constants/layout";
+import type { Theme } from "@/styles/theme";
+import { useParentAgent, type ParentAgent } from "./use-parent-agent";
+
+function ParentIcon({
+  icon: Icon,
+  size,
+  color = "",
+}: {
+  icon: ParentAgent["icon"];
+  size: number;
+  color?: string;
+}) {
+  return <Icon size={size} color={color} />;
+}
+
+const ThemedParentIcon = withUnistyles(ParentIcon);
+const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+
+/** Stands in the composer's place on a subagent shown without one: who the parent is, and the way back. */
+export function ParentAgentCallout({
+  serverId,
+  parentAgentId,
+}: {
+  serverId: string;
+  parentAgentId: string;
+}): ReactElement {
+  const { t } = useTranslation();
+  const parent = useParentAgent(serverId, parentAgentId);
+
+  return (
+    <View style={styles.rail}>
+      <View style={styles.callout} testID="parent-agent-callout">
+        <View style={styles.avatar}>
+          <ThemedParentIcon icon={parent.icon} size={18} uniProps={foregroundColorMapping} />
+        </View>
+        <View style={styles.body}>
+          <Text style={styles.eyebrow}>{t("subagents.parent.parent")}</Text>
+          <View style={styles.titleRow}>
+            <Text style={styles.title} numberOfLines={1}>
+              {parent.label ?? t("subagents.parent.parentAgent")}
+            </Text>
+            <ComposerTrackMark bucket={parent.statusBucket} />
+          </View>
+        </View>
+        <Button
+          size="sm"
+          variant="secondary"
+          leftIcon={CornerUpLeft}
+          onPress={parent.open}
+          testID="parent-agent-callout-open"
+        >
+          {t("subagents.parent.openParent")}
+        </Button>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  rail: {
+    minHeight: FOOTER_HEIGHT,
+    alignItems: "center",
+    width: "100%",
+    padding: theme.spacing[4],
+  },
+  callout: {
+    width: "100%",
+    maxWidth: theme.contentMaxWidth,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[3],
+    backgroundColor: theme.colors.surface1,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    borderRadius: theme.borderRadius["2xl"],
+    padding: theme.spacing[3],
+    paddingRight: { xs: theme.spacing[3], md: theme.spacing[4] },
+  },
+  avatar: {
+    width: 36,
+    height: 36,
+    borderRadius: theme.borderRadius.lg,
+    backgroundColor: theme.colors.surface2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  body: {
+    flex: 1,
+    minWidth: 0,
+    gap: theme.spacing[0.5],
+  },
+  eyebrow: {
+    fontSize: theme.fontSize.sm,
+    color: theme.colors.foregroundMuted,
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+    minWidth: 0,
+  },
+  title: {
+    flexShrink: 1,
+    fontSize: theme.fontSize.base,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.colors.foreground,
+  },
+}));

packages/app/src/subagents/parent/index.ts

@@ -0,0 +1,3 @@
+export { ParentAgentCallout } from "./callout";
+export { ParentAgentPill } from "./pill";
+export { useParentAgentId } from "./use-parent-agent";

packages/app/src/subagents/parent/pill.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useMemo, useState, type ReactElement } from "react";
+import { Text } from "react-native";
+import { useTranslation } from "react-i18next";
+import { ChevronLeft } from "lucide-react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { PressHighlight } from "@/components/ui/press-highlight";
+import { composerPillStyles } from "@/composer/pill-styles";
+import { ComposerTrackMark } from "@/composer/tracks";
+import type { Theme } from "@/styles/theme";
+import { useParentAgent } from "./use-parent-agent";
+
+const ThemedChevronLeft = withUnistyles(ChevronLeft);
+const mutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+
+/**
+ * The way back from a subagent to the agent that started it. It leads the pill rail and names
+ * the parent rather than saying "parent": in a stack of subagents the title is what tells you
+ * where you will land.
+ */
+export function ParentAgentPill({
+  serverId,
+  parentAgentId,
+}: {
+  serverId: string;
+  parentAgentId: string;
+}): ReactElement {
+  const { t } = useTranslation();
+  const parent = useParentAgent(serverId, parentAgentId);
+  const [isHovered, setIsHovered] = useState(false);
+  const handleHoverIn = useCallback(() => setIsHovered(true), []);
+  const handleHoverOut = useCallback(() => setIsHovered(false), []);
+  const bodyStyle = useMemo(
+    () => [composerPillStyles.body, styles.body, isHovered && composerPillStyles.bodyActive],
+    [isHovered],
+  );
+  const labelStyle = useMemo(
+    () => [composerPillStyles.label, styles.label, isHovered && composerPillStyles.labelActive],
+    [isHovered],
+  );
+  const label = parent.label ?? t("subagents.parent.backToParent");
+
+  return (
+    <PressHighlight
+      testID="composer-parent-agent-pill"
+      accessibilityRole="button"
+      accessibilityLabel={t("subagents.parent.backTo", { label })}
+      onPress={parent.open}
+      onHoverIn={handleHoverIn}
+      onHoverOut={handleHoverOut}
+      style={bodyStyle}
+      highlightStyle={composerPillStyles.bodyActive}
+    >
+      <ThemedChevronLeft
+        size={14}
+        uniProps={isHovered ? foregroundColorMapping : mutedColorMapping}
+      />
+      <ComposerTrackMark bucket={parent.statusBucket} />
+      <Text style={labelStyle} numberOfLines={1}>
+        {label}
+      </Text>
+    </PressHighlight>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  // The chevron's box is wider than its stroke, so the pill pulls it toward the edge to keep the
+  // visible glyph on the same inset as other pills' leading marks.
+  body: {
+    flexShrink: 1,
+    minWidth: 0,
+    gap: theme.spacing[1.5],
+    paddingLeft: theme.spacing[2],
+  },
+  label: {
+    flexShrink: 1,
+    maxWidth: { xs: 140, md: 240 },
+  },
+}));

packages/app/src/subagents/parent/use-parent-agent.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { useAgentDescriptor } from "@/agent-presentation";
+import type { PanelDescriptor } from "@/panels/panel-registry";
+import { useSessionStore } from "@/stores/session-store";
+import type { SidebarStateBucket } from "@/utils/sidebar-agent-state";
+import { navigateToAgent } from "@/utils/navigate-to-agent";
+
+export interface ParentAgent {
+  /** The parent's title, or null while it has none — callers fall back to a generic name. */
+  label: string | null;
+  icon: PanelDescriptor["icon"];
+  statusBucket: SidebarStateBucket | null;
+  open: () => void;
+}
+
+/** The parent of a managed agent, or null for a root or detached agent. */
+export function useParentAgentId(serverId: string, agentId: string): string | null {
+  return useSessionStore((state) => {
+    const session = state.sessions[serverId];
+    const agent = session?.agents.get(agentId) ?? session?.agentDetails.get(agentId);
+    return agent?.parentAgentId ?? null;
+  });
+}
+
+/** The parent as its own tab presents it, and the way back to it. */
+export function useParentAgent(serverId: string, parentAgentId: string): ParentAgent {
+  const descriptor = useAgentDescriptor({ kind: "agent", agentId: parentAgentId }, { serverId });
+  // The parent may live in another workspace; navigateToAgent opens it wherever it is.
+  const open = useCallback(() => {
+    navigateToAgent({ serverId, agentId: parentAgentId });
+  }, [parentAgentId, serverId]);
+  return {
+    label: descriptor.label || null,
+    icon: descriptor.icon,
+    statusBucket: descriptor.statusBucket,
+    open,
+  };
+}

packages/app/src/tool-calls/detail-level/overview/label.ts

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import type { OverviewSummary } from "./model";
+
+function joinSummaryParts(parts: string[], conjunction: string): string {
+  if (parts.length === 0) {
+    return "";
+  }
+  let joined = parts[0] ?? "";
+  if (parts.length === 2) {
+    joined = `${parts[0]} ${conjunction} ${parts[1]}`;
+  } else if (parts.length > 2) {
+    joined = `${parts.slice(0, -1).join(", ")}, ${conjunction} ${parts.at(-1)}`;
+  }
+  const firstCharacter = joined[0];
+  return firstCharacter ? `${firstCharacter.toLocaleUpperCase()}${joined.slice(1)}` : joined;
+}
+
+/**
+ * One sentence of what a stretch of agent work did, such as "Edited 2 files and ran 3 commands".
+ * Leading parts come first, for summaries that count more than tool calls.
+ */
+export function useOverviewSummaryLabel(
+  summary: OverviewSummary,
+  leadingParts: readonly string[] = [],
+): string {
+  const { t } = useTranslation();
+  return useMemo(() => {
+    const parts = [...leadingParts];
+    const entries = [
+      [summary.editedFileCount, "toolCallGroup.editedFiles"],
+      [summary.commandCount, "toolCallGroup.commands"],
+      [summary.readFileCount, "toolCallGroup.readFiles"],
+      [summary.searchCount, "toolCallGroup.searches"],
+      [summary.otherToolCount, "toolCallGroup.otherTools"],
+      [summary.paseoCallCount, "toolCallGroup.paseoCalls"],
+    ] as const;
+    for (const [count, key] of entries) {
+      if (count > 0) {
+        parts.push(t(`${key}.${count === 1 ? "one" : "other"}`, { count }));
+      }
+    }
+    return joinSummaryParts(parts, t("toolCallGroup.and"));
+  }, [leadingParts, summary, t]);
+}

packages/app/src/tool-calls/detail-level/overview/model.ts

@@ -1,4 +1,5 @@
 import { isPaseoToolName } from "@getpaseo/protocol/tool-name-normalization";
+import type { ToolCallItem } from "@/types/stream";
 import { describeToolCall, type ToolCallRun } from "../grouping";
 
 const DIRECT_PASEO_TOOL_PREFIX = "paseo_";
@@ -28,19 +29,18 @@ function isSearchCall(name: string): boolean {
   return DIRECT_SEARCH_TOOL_SUFFIX_PATTERN.test(name);
 }
 
-export function buildOverviewGroup(run: ToolCallRun): OverviewToolCallGroup {
+/** Counts tool calls by what they did, for any summary of a stretch of agent work. */
+export function summarizeToolCalls(calls: readonly ToolCallItem[]): OverviewSummary {
   const editedFiles = new Set<string>();
   const readFiles = new Set<string>();
-  let isLoading = false;
   let commandCount = 0;
   let searchCount = 0;
   let otherToolCount = 0;
   let paseoCallCount = 0;
 
-  for (const call of run.calls) {
+  for (const call of calls) {
     const descriptor = describeToolCall(call);
     const normalizedName = descriptor.name.trim().toLowerCase();
-    isLoading ||= descriptor.status === "running" || descriptor.status === "executing";
     if (isPaseoCall(descriptor.name, normalizedName)) {
       paseoCallCount += 1;
     } else if (descriptor.detail.type === "edit" || descriptor.detail.type === "write") {
@@ -56,7 +56,7 @@ export function buildOverviewGroup(run: ToolCallRun): OverviewToolCallGroup {
     }
   }
 
-  const summary = {
+  return {
     editedFileCount: editedFiles.size,
     commandCount,
     readFileCount: readFiles.size,
@@ -64,10 +64,17 @@ export function buildOverviewGroup(run: ToolCallRun): OverviewToolCallGroup {
     otherToolCount,
     paseoCallCount,
   };
+}
+
+export function buildOverviewGroup(run: ToolCallRun): OverviewToolCallGroup {
+  const isLoading = run.calls.some((call) => {
+    const status = describeToolCall(call).status;
+    return status === "running" || status === "executing";
+  });
   return {
     mode: "overview",
     run,
     isLoading,
-    summary,
+    summary: summarizeToolCalls(run.calls),
   };
 }

packages/app/src/tool-calls/detail-level/overview/view.tsx

@@ -1,11 +1,12 @@
-import React, { memo, useCallback, useMemo, useRef, type ReactNode } from "react";
+import React, { memo, useCallback, useRef, type ReactNode } from "react";
 import { ScrollView } from "react-native";
-import { useTranslation } from "react-i18next";
 import { Wrench } from "lucide-react-native";
 import { StyleSheet } from "react-native-unistyles";
+import { IndentRail } from "@/components/indent-rail";
 import { ExpandableBadge } from "@/components/message";
 import { useIsCompactFormFactor } from "@/constants/layout";
-import { type OverviewSummary, type OverviewToolCallGroup } from "./model";
+import { useOverviewSummaryLabel } from "./label";
+import type { OverviewToolCallGroup } from "./model";
 import { OverviewToolCallGroupSheet } from "./sheet";
 
 interface OverviewGroupProps {
@@ -18,41 +19,6 @@ interface OverviewGroupProps {
 
 const TOOL_CALL_GROUP_MAX_HEIGHT = 400;
 
-function joinSummaryParts(parts: string[], conjunction: string): string {
-  if (parts.length === 0) {
-    return "";
-  }
-  let joined = parts[0] ?? "";
-  if (parts.length === 2) {
-    joined = `${parts[0]} ${conjunction} ${parts[1]}`;
-  } else if (parts.length > 2) {
-    joined = `${parts.slice(0, -1).join(", ")}, ${conjunction} ${parts.at(-1)}`;
-  }
-  const firstCharacter = joined[0];
-  return firstCharacter ? `${firstCharacter.toLocaleUpperCase()}${joined.slice(1)}` : joined;
-}
-
-function useOverviewSummary(summary: OverviewSummary): string {
-  const { t } = useTranslation();
-  return useMemo(() => {
-    const parts: string[] = [];
-    const entries = [
-      [summary.editedFileCount, "toolCallGroup.editedFiles"],
-      [summary.commandCount, "toolCallGroup.commands"],
-      [summary.readFileCount, "toolCallGroup.readFiles"],
-      [summary.searchCount, "toolCallGroup.searches"],
-      [summary.otherToolCount, "toolCallGroup.otherTools"],
-      [summary.paseoCallCount, "toolCallGroup.paseoCalls"],
-    ] as const;
-    for (const [count, key] of entries) {
-      if (count > 0) {
-        parts.push(t(`${key}.${count === 1 ? "one" : "other"}`, { count }));
-      }
-    }
-    return joinSummaryParts(parts, t("toolCallGroup.and"));
-  }, [summary, t]);
-}
-
 export const OverviewToolCallGroupView = memo(function OverviewToolCallGroupView({
   group,
   expanded,
@@ -62,7 +28,7 @@ export const OverviewToolCallGroupView = memo(function OverviewToolCallGroupView
 }: OverviewGroupProps) {
   const scrollRef = useRef<ScrollView>(null);
   const isCompact = useIsCompactFormFactor();
-  const aggregateSummary = useOverviewSummary(group.summary);
+  const aggregateSummary = useOverviewSummaryLabel(group.summary);
   const scrollToLatest = useCallback(() => {
     scrollRef.current?.scrollToEnd({ animated: false });
   }, []);
@@ -82,7 +48,7 @@ export const OverviewToolCallGroupView = memo(function OverviewToolCallGroupView
         showsVerticalScrollIndicator
         onContentSizeChange={scrollToLatest}
       >
-        {children}
+        <IndentRail>{children}</IndentRail>
       </ScrollView>
     ),
     [children, scrollToLatest],

packages/app/src/tool-calls/detail-level/projection.ts

@@ -1,5 +1,4 @@
 import type { StreamItem } from "@/types/stream";
-import type { ToolCallDetailLevel } from "@/hooks/use-settings/storage";
 import {
   groupLiveToolCalls,
   prepareGroupedHistory,
@@ -8,7 +7,8 @@ import {
 } from "./grouping";
 import { buildOverviewGroup, type OverviewToolCallGroup } from "./overview/model";
 
-export type { ToolCallDetailLevel } from "@/hooks/use-settings/storage";
+/** Whether consecutive tool calls show one by one or as one summary row. */
+export type ToolCallDetailLevel = "overview" | "detailed";
 export type ToolCallDetailGroup = OverviewToolCallGroup;
 
 export interface PreparedToolCallHistory {

packages/app/src/types/stream.ts

@@ -771,6 +771,12 @@ export type AgentToolCallItem = ToolCallItem & {
   payload: { source: "agent"; data: AgentToolCallData };
 };
 
+/** Find and scrolling address a plugin row by the source it replaces. */
+export function getStreamItemMessageId(item: StreamItem): string {
+  if (item.kind === "plugin") return item.sourceId ?? item.id;
+  return item.id;
+}
+
 export function isAgentToolCallItem(item: StreamItem): item is AgentToolCallItem {
   return item.kind === "tool_call" && item.payload.source === "agent";
 }

packages/app/test-stubs/expo-clipboard.ts

@@ -0,0 +1,10 @@
+// The package ships JSX in .js files, which the dependency optimizer cannot parse.
+export async function setStringAsync(): Promise<boolean> {
+  return true;
+}
+export async function getStringAsync(): Promise<string> {
+  return "";
+}
+export async function hasStringAsync(): Promise<boolean> {
+  return false;
+}

packages/app/test-stubs/lucide-react-native.ts

@@ -111,3 +111,8 @@ export const Upload = StubIcon;
 export const Wrench = StubIcon;
 export const X = StubIcon;
 export const XCircle = StubIcon;
+export const Code = StubIcon;
+export const Maximize2 = StubIcon;
+export const Workflow = StubIcon;
+export const ZoomIn = StubIcon;
+export const ZoomOut = StubIcon;

packages/app/vitest.config.ts

@@ -19,6 +19,20 @@ const resolvePackageEntry = (packageName: string) => {
 
 export default defineConfig({
   plugins: [
+    {
+      name: "markdown-wasm-commonjs-export",
+      transform(source, id) {
+        // The ESM package contains a CommonJS WASM factory. Metro handles the
+        // interop; Vite needs an ESM export instead of the CommonJS trailer.
+        if (!id.endsWith("/lib/module/web/wasm/md4c.js")) return;
+        const trailer = source.lastIndexOf("\nif (typeof exports === 'object'");
+        if (trailer < 0) throw new Error("Markdown WASM CommonJS trailer was not found");
+        return {
+          code: `${source.slice(0, trailer)}\nexport default createMd4cModule;`,
+          map: null,
+        };
+      },
+    },
     {
       name: "compile-usage-components",
       enforce: "pre",
@@ -151,6 +165,7 @@ export default defineConfig({
       "react-native-gesture-handler > invariant",
     ],
     exclude: [
+      "react-native-enriched-markdown",
       "react-native-reanimated",
       "react-native-gesture-handler",
       "react-native-keyboard-controller",
@@ -254,6 +269,10 @@ export default defineConfig({
         find: /^react-native-reanimated\/scripts\/validate-worklets-version$/,
         replacement: path.resolve(__dirname, "test-stubs/reanimated-validate-worklets-version.ts"),
       },
+      {
+        find: /^expo-clipboard$/,
+        replacement: path.resolve(__dirname, "test-stubs/expo-clipboard.ts"),
+      },
       {
         find: /^expo-linking$/,
         replacement: path.resolve(__dirname, "test-stubs/expo-linking.ts"),

packages/server/src/server/agent/providers/mock-load-test-agent.ts

@@ -295,6 +295,35 @@ function parseMockQuestionPrompt(prompt: AgentPromptInput): MockQuestionPromptRe
     return null;
   }
 
+  if (/with\s+links/i.test(text)) {
+    return {
+      questions: [
+        {
+          question:
+            "Sign in at https://example.com/login, then follow [the setup guide](https://example.com/setup). Done?",
+          header: "signIn",
+          options: [
+            {
+              label: "Done",
+              description: "Logs are at https://example.com/logs if sign-in fails.",
+            },
+            { label: "Not yet, see [status](https://example.com/status)" },
+          ],
+          multiSelect: false,
+        },
+        {
+          question: "Which checks should run?",
+          header: "checks",
+          options: [
+            { label: "Lint", description: "Rules: https://example.com/lint" },
+            { label: "Typecheck" },
+          ],
+          multiSelect: true,
+        },
+      ],
+    };
+  }
+
   if (/free[-\s]?write|freeform|text[-\s]?only/i.test(text)) {
     return {
       questions: [

packages/server/src/server/agent/providers/provider-image-output.posix.test.ts

@@ -1,24 +1,46 @@
-import { existsSync, rmSync, statSync } from "node:fs";
+import { existsSync, mkdtempSync, rmSync, statSync } from "node:fs";
+import os from "node:os";
 import path from "node:path";
-import { describe, expect, test } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
-import { materializeProviderImage } from "./provider-image-output.js";
+let materializeProviderImage: typeof import("./provider-image-output.js").materializeProviderImage;
 
 describe.skipIf(process.platform === "win32")("materializeProviderImage", () => {
-  test("writes image attachments under a private temp directory", () => {
+  const originalPaseoHome = process.env.PASEO_HOME;
+  let testHome: string | null = null;
+
+  beforeEach(async () => {
+    testHome = mkdtempSync(path.join(os.tmpdir(), "paseo-provider-images-posix-"));
+    process.env.PASEO_HOME = testHome;
+    vi.resetModules();
+    ({ materializeProviderImage } = await import("./provider-image-output.js"));
+  });
+
+  afterEach(() => {
+    if (originalPaseoHome === undefined) {
+      delete process.env.PASEO_HOME;
+    } else {
+      process.env.PASEO_HOME = originalPaseoHome;
+    }
+    if (testHome) {
+      rmSync(testHome, { recursive: true, force: true });
+      testHome = null;
+    }
+  });
+
+  test("writes image attachments under a private directory in the paseo home", () => {
     const materialized = materializeProviderImage({
       data: "YWJjMTIz",
       mimeType: "image/png",
     });
     const attachmentDir = path.dirname(materialized.path);
 
-    try {
-      expect(path.basename(attachmentDir)).toMatch(/^paseo-attachments-/);
-      expect(existsSync(materialized.path)).toBe(true);
-      expect(statSync(attachmentDir).mode & 0o777).toBe(0o700);
-      expect(statSync(materialized.path).mode & 0o777).toBe(0o600);
-    } finally {
-      rmSync(attachmentDir, { recursive: true, force: true });
-    }
+    // Exactly "paseo-attachments" — no mkdtemp suffix. The old per-process temp
+    // directory is what let the OS reap these images out from under the app.
+    expect(path.basename(attachmentDir)).toBe("paseo-attachments");
+    expect(attachmentDir).toBe(path.join(testHome as string, "paseo-attachments"));
+    expect(existsSync(materialized.path)).toBe(true);
+    expect(statSync(attachmentDir).mode & 0o777).toBe(0o700);
+    expect(statSync(materialized.path).mode & 0o777).toBe(0o600);
   });
 });

packages/server/src/server/agent/providers/provider-image-output.test.ts

@@ -1,17 +1,36 @@
-import { existsSync, rmSync } from "node:fs";
+import { existsSync, mkdtempSync, readdirSync, rmSync, utimesSync } from "node:fs";
+import os from "node:os";
 import path from "node:path";
 import MarkdownIt from "markdown-it";
 import { projectTimelineRows } from "../timeline-projection.js";
-import { describe, expect, test } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
 import {
   isProviderImageMarkdown,
-  materializeProviderImage,
   renderProviderImageOutputAsAssistantMarkdown,
 } from "./provider-image-output.js";
 
 const HASH = "a".repeat(64);
 
+// Materialized images live under the paseo home now, so without this every test
+// run would read and delete the developer's real provider images.
+const originalPaseoHome = process.env.PASEO_HOME;
+let testHome: string | null = null;
+let materializeProviderImage: typeof import("./provider-image-output.js").materializeProviderImage;
+
+function useTempPaseoHome(): string {
+  testHome = mkdtempSync(path.join(os.tmpdir(), "paseo-provider-images-"));
+  process.env.PASEO_HOME = testHome;
+  return testHome;
+}
+
+function attachmentsDir(): string {
+  if (!testHome) {
+    throw new Error("useTempPaseoHome() must run before reading the attachments dir.");
+  }
+  return path.join(testHome, "paseo-attachments");
+}
+
 function renderImageMarkdown(imagePath: string): string {
   const item = renderProviderImageOutputAsAssistantMarkdown({ path: imagePath });
   if (!item || item.type !== "assistant_message") {
@@ -92,27 +111,91 @@ describe("isProviderImageMarkdown", () => {
 });
 
 describe("materializeProviderImage", () => {
-  test("recreates the private temp directory if the cached directory is removed", () => {
+  beforeEach(async () => {
+    useTempPaseoHome();
+    vi.resetModules();
+    ({ materializeProviderImage } = await import("./provider-image-output.js"));
+  });
+
+  afterEach(() => {
+    if (originalPaseoHome === undefined) {
+      delete process.env.PASEO_HOME;
+    } else {
+      process.env.PASEO_HOME = originalPaseoHome;
+    }
+    if (testHome) {
+      rmSync(testHome, { recursive: true, force: true });
+      testHome = null;
+    }
+  });
+
+  test("recreates the private directory if the cached directory is removed", () => {
     const first = materializeProviderImage({
       data: "YWJjMTIz",
       mimeType: "image/png",
     });
-    const firstDir = path.dirname(first.path);
     expect(existsSync(first.path)).toBe(true);
 
-    rmSync(firstDir, { recursive: true, force: true });
+    rmSync(path.dirname(first.path), { recursive: true, force: true });
 
     const second = materializeProviderImage({
       data: "ZGVmNDU2",
       mimeType: "image/png",
     });
-    const secondDir = path.dirname(second.path);
 
-    try {
-      expect(existsSync(second.path)).toBe(true);
-    } finally {
-      rmSync(secondDir, { recursive: true, force: true });
+    expect(existsSync(second.path)).toBe(true);
+  });
+
+  test("stores images in a stable directory under the paseo home", () => {
+    const result = materializeProviderImage({ data: "YWJjMTIz", mimeType: "image/png" });
+
+    // A fixed directory, not a per-process mkdtemp one — the old shape is what
+    // let the OS reap these images out from under the app after ~3 days.
+    expect(path.dirname(result.path)).toBe(attachmentsDir());
+    expect(path.basename(path.dirname(result.path))).toBe("paseo-attachments");
+    // Mode assertions live in the .posix suite: Windows ignores mkdir/writeFile
+    // modes and reports 0o666, so asserting them here fails on that runner.
+  });
+
+  test("is idempotent for the same bytes across daemon restarts", async () => {
+    const first = materializeProviderImage({ data: "YWJjMTIz", mimeType: "image/png" });
+
+    // Reload the module while retaining the files from the previous instance.
+    vi.resetModules();
+    const restarted = await import("./provider-image-output.js");
+    const second = restarted.materializeProviderImage({ data: "YWJjMTIz", mimeType: "image/png" });
+
+    expect(second.path).toBe(first.path);
+    expect(readdirSync(attachmentsDir())).toHaveLength(1);
+  });
+
+  test("emits markdown that isProviderImageMarkdown still recognizes", () => {
+    const item = renderProviderImageOutputAsAssistantMarkdown(
+      { data: "YWJjMTIz", mimeType: "image/png" },
+      { materialize: materializeProviderImage },
+    );
+
+    if (!item || item.type !== "assistant_message") {
+      throw new Error("Expected provider image output to render as assistant markdown.");
     }
+    expect(isProviderImageMarkdown(item.text)).toBe(true);
+  });
+
+  // The whole point of moving out of the temp dir is that nothing deletes these
+  // behind the user's back. An age-based sweep would reintroduce that on a
+  // longer fuse, because mtime cannot tell a referenced image from an abandoned
+  // one and reading a transcript never touches the file.
+  test("keeps images no matter how old they are", async () => {
+    const image = materializeProviderImage({ data: "YWJjMTIz", mimeType: "image/png" });
+    const longAgoSeconds = Date.now() / 1000 - 365 * 24 * 60 * 60;
+    utimesSync(image.path, longAgoSeconds, longAgoSeconds);
+
+    // Reloading the module must not sweep images referenced by older transcripts.
+    vi.resetModules();
+    const restarted = await import("./provider-image-output.js");
+    restarted.materializeProviderImage({ data: "Z2hpNzg5", mimeType: "image/png" });
+
+    expect(existsSync(image.path)).toBe(true);
   });
 });
 

packages/server/src/server/agent/providers/provider-image-output.ts

@@ -1,9 +1,9 @@
 import { createHash } from "node:crypto";
 import * as fsSync from "node:fs";
-import os from "node:os";
 import path from "node:path";
 
 import type { AgentTimelineItem } from "../agent-sdk-types.js";
+import { resolvePaseoHome } from "../../paseo-home.js";
 
 export interface ProviderImageOutput {
   path?: string | null;
@@ -17,11 +17,13 @@ export interface MaterializedProviderImage {
   path: string;
 }
 
+// Keep this basename compatible with provider-image Markdown in existing timelines.
 const PROVIDER_IMAGE_ATTACHMENT_DIR = "paseo-attachments";
-const PROVIDER_IMAGE_ATTACHMENT_DIR_PREFIX = `${PROVIDER_IMAGE_ATTACHMENT_DIR}-`;
 const PRIVATE_ATTACHMENT_DIR_MODE = 0o700;
 const MATERIALIZED_IMAGE_FILE_MODE = 0o600;
 
+// Persist images across process lifetimes. Age-based cleanup would delete files
+// still referenced by transcripts; any future cleanup must account for references.
 let materializedImageAttachmentDir: string | null = null;
 
 function canReuseMaterializedImageAttachmentDir(dir: string): boolean {
@@ -45,11 +47,11 @@ function getMaterializedImageAttachmentDir(): string {
     return materializedImageAttachmentDir;
   }
 
-  materializedImageAttachmentDir = fsSync.mkdtempSync(
-    path.join(os.tmpdir(), PROVIDER_IMAGE_ATTACHMENT_DIR_PREFIX),
-  );
-  fsSync.chmodSync(materializedImageAttachmentDir, PRIVATE_ATTACHMENT_DIR_MODE);
-  return materializedImageAttachmentDir;
+  const dir = path.join(resolvePaseoHome(), PROVIDER_IMAGE_ATTACHMENT_DIR);
+  fsSync.mkdirSync(dir, { recursive: true, mode: PRIVATE_ATTACHMENT_DIR_MODE });
+  fsSync.chmodSync(dir, PRIVATE_ATTACHMENT_DIR_MODE);
+  materializedImageAttachmentDir = dir;
+  return dir;
 }
 
 function getImageExtension(mimeType: string): string {
@@ -81,9 +83,7 @@ function normalizeImageData(mimeType: string, data: string): { mimeType: string;
   return { mimeType, data };
 }
 
-// Filenames are a content hash of the bytes so re-materializing the same image
-// within a process reuses the existing temp file instead of leaking a fresh one
-// for repeated image blocks or history replay.
+// Content-addressed filenames deduplicate repeated image bytes across restarts.
 export function materializeProviderImage(image: {
   data: string;
   mimeType: string | null;

packages/server/src/utils/run-git-command.test.ts

@@ -16,6 +16,7 @@ interface FakeSpawnBehavior {
 
 interface FakeSpawnController {
   activeCount: number;
+  nextPid: number;
   peakActiveCount: number;
   processes: FakeChildProcess[];
   queue: FakeSpawnBehavior[];
@@ -24,6 +25,7 @@ interface FakeSpawnController {
 
 const fakeSpawnController = vi.hoisted<FakeSpawnController>(() => ({
   activeCount: 0,
+  nextPid: 1000,
   peakActiveCount: 0,
   processes: [],
   queue: [],
@@ -33,6 +35,7 @@ const fakeSpawnController = vi.hoisted<FakeSpawnController>(() => ({
     }
 
     this.activeCount = 0;
+    this.nextPid = 1000;
     this.peakActiveCount = 0;
     this.processes = [];
     this.queue = [];
@@ -40,8 +43,7 @@ const fakeSpawnController = vi.hoisted<FakeSpawnController>(() => ({
 }));
 
 class FakeChildProcess extends EventEmitter {
-  // This is not an OS process; tree cleanup must use the direct-child fallback.
-  public readonly pid = undefined;
+  public readonly pid: number;
   public readonly stderr = new EventEmitter();
   public readonly stdout = new EventEmitter();
   public killed = false;
@@ -55,6 +57,8 @@ class FakeChildProcess extends EventEmitter {
   public constructor(behavior: FakeSpawnBehavior) {
     super();
     this.behavior = behavior;
+    this.pid = fakeSpawnController.nextPid;
+    fakeSpawnController.nextPid += 1;
 
     fakeSpawnController.activeCount += 1;
     fakeSpawnController.peakActiveCount = Math.max(

packages/server/src/utils/run-git-command.ts

@@ -13,7 +13,6 @@ import {
   submitGitCommandTrace,
 } from "./git-command-trace.js";
 import { spawnProcess } from "./spawn.js";
-import { signalProcessTree } from "./tree-kill.js";
 import {
   GitProcessScheduler,
   type GitProcessPriority,
@@ -423,7 +422,7 @@ function executeGitCommand<Output>(
 
       timer = setTimeout(() => {
         timeoutError = new Error(`Git command timed out after ${timeout}ms: ${command}`);
-        void signalProcessTree(child, "SIGKILL");
+        child.kill("SIGKILL");
         settle(() => reject(timeoutError));
         if (processExit) {
           settleTimeoutTrace(processExit.exitCode, processExit.signal);

packages/server/src/utils/run-git-command.windows-shell.test.ts

@@ -1,17 +1,12 @@
 import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import path from "node:path";
-import { createServer, type Socket } from "node:net";
 import { afterEach, describe, expect, it } from "vitest";
 
 import { runGitCommand } from "./run-git-command.js";
 
 const tempDirs: string[] = [];
 
-function allowConnectionReset(error: NodeJS.ErrnoException): void {
-  if (error.code !== "ECONNRESET") throw error;
-}
-
 function makeTempRepo(): string {
   const repo = mkdtempSync(path.join(tmpdir(), "paseo-git-shell-"));
   tempDirs.push(repo);
@@ -25,49 +20,6 @@ afterEach(() => {
 });
 
 describe("runGitCommand shell behavior", () => {
-  it.each(["http", "ssh"])(
-    "closes a stalled %s fetch connection on timeout and admits the next command",
-    async (protocol) => {
-      const repo = makeTempRepo();
-      await runGitCommand(["init"], { cwd: repo });
-      const sockets: Socket[] = [];
-      const server = createServer((socket) => {
-        sockets.push(socket);
-        // Force-killing a Windows peer resets the connection instead of sending EOF.
-        socket.on("error", allowConnectionReset);
-        // Consume the request but never answer, keeping the real transport helper busy.
-        socket.resume();
-      });
-      await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
-      const address = server.address();
-      if (!address || typeof address === "string") throw new Error("Missing TCP address");
-      const remote = `${protocol}://127.0.0.1:${address.port}/repo.git`;
-      try {
-        await expect(
-          runGitCommand(["fetch", remote, "main"], {
-            cwd: repo,
-            timeout: 2000,
-            envOverlay: {
-              NO_PROXY: "127.0.0.1",
-              no_proxy: "127.0.0.1",
-              GIT_SSH_COMMAND: "ssh -F none -o BatchMode=yes",
-            },
-          }),
-        ).rejects.toThrow("Git command timed out after 2000ms");
-
-        expect(sockets).toHaveLength(1);
-        await expect.poll(() => sockets[0]?.destroyed, { timeout: 3000 }).toBe(true);
-        await expect(runGitCommand(["--version"], { cwd: repo })).resolves.toMatchObject({
-          exitCode: 0,
-          truncated: false,
-        });
-      } finally {
-        for (const socket of sockets) socket.destroy();
-        await new Promise<void>((resolve) => server.close(() => resolve()));
-      }
-    },
-  );
-
   it("passes git arguments directly instead of through the platform shell", async () => {
     const repo = makeTempRepo();
     const literalName = "%PASEO_GIT_SHELL_SENTINEL%";

packages/server/src/utils/worktree.test.ts

@@ -55,18 +55,10 @@ function createLegacyWorktreeForTest(
   });
 }
 
-function allowConnectionReset(error: NodeJS.ErrnoException): void {
-  if (error.code !== "ECONNRESET") throw error;
-}
-
 // A remote that accepts connections and never answers, like a VPN-only host while off the VPN.
 async function startSilentRemote(): Promise<{ url: string; close: () => Promise<void> }> {
   const connections = new Set<Socket>();
-  const server = createServer((socket) => {
-    connections.add(socket);
-    // Timeout cleanup force-kills the peer, which can reset its connection on Windows.
-    socket.on("error", allowConnectionReset);
-  });
+  const server = createServer((socket) => connections.add(socket));
   await new Promise<void>((resolve) => server.listen(0, "127.0.0.1", resolve));
   const { port } = server.address() as AddressInfo;
   return {