@agent-native/toolkit 0.23.1 → 0.198.2

package/src/app/chat/chat/tool-call-display.spec.tsx

@@ -0,0 +1,2915 @@
+// @vitest-environment happy-dom
+
+import type { ContentPart } from "@agent-native/core/client/agent-chat";
+import { AgentNativeI18nProvider } from "@agent-native/core/client/i18n";
+import type { AgentMcpAppPayload } from "@agent-native/core/mcp-client";
+import { act, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ThinkingDisplayProvider } from "../thinking-display.js";
+import {
+  ApprovalContext,
+  ChatRunningContext,
+  ReconnectStreamMessage,
+  ToolCallDisplay,
+  ToolCallFallback,
+  ToolCallStackMotion,
+  TOOL_LONG_RUNNING_HINT_DELAY_MS,
+  formatWorkedDuration,
+  ReasoningCell,
+  RanToolsSummary,
+  SuppressInlineOpenAppContext,
+  WorkedForSummary,
+  toolInputPayload,
+} from "./tool-call-display.js";
+import {
+  clearReservedToolRenderersForTests,
+  clearToolRenderersForTests,
+  registerActionChatRenderer,
+  registerToolRenderer,
+  type ToolRendererProps,
+} from "./tool-render-registry.js";
+import {
+  resolveBuiltinActionChatRenderer,
+  resolveBuiltinFallbackToolRenderer,
+} from "./widgets/builtin-tool-renderers.js";
+
+const builderHandoffMocks = vi.hoisted(() => ({
+  useAgentChatContext: vi.fn(),
+}));
+
+vi.mock("../ConnectBuilderCard.js", () => ({
+  ConnectBuilderCard: ({
+    context,
+    prompt,
+  }: {
+    context?: string;
+    prompt?: string;
+  }) => (
+    <div data-context={context} data-testid="connect-builder-card">
+      {prompt}
+    </div>
+  ),
+}));
+
+vi.mock("../FileStorageSetupPopover.js", () => ({
+  FileStorageSetupPopover: ({ open }: { open: boolean }) =>
+    open ? <div role="dialog" data-testid="file-storage-dialog" /> : null,
+}));
+
+vi.mock("@agent-native/core/client/uploads", () => ({
+  useFileUploadStatus: () => ({
+    data: { configured: false },
+    isError: false,
+    isSuccess: true,
+    refetch: vi.fn(),
+  }),
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@agent-native/core/client/agent-chat")
+  >()),
+  useAgentChatContext: builderHandoffMocks.useAgentChatContext,
+}));
+
+vi.mock("../mcp-apps/McpAppRenderer.js", () => ({
+  McpAppRenderer: () => <div data-testid="mcp-app">MCP APP</div>,
+}));
+
+vi.mock("../../extensions/index.js", () => ({
+  InlineExtensionFrame: ({ extensionId, extension }: any) => (
+    <div
+      data-testid="inline-extension-frame"
+      data-extension-id={extensionId ?? extension?.id}
+      data-extension-mode={extension?.mode}
+    >
+      {extension?.name}
+    </div>
+  ),
+}));
+
+function dataInsightPayload(extra: Record<string, unknown> = {}) {
+  return {
+    widget: "data-insights",
+    summary: { responses: 1 },
+    chartSeries: {
+      type: "bar",
+      title: "Responses by day",
+      xKey: "date",
+      series: [{ key: "submissions", label: "Submissions" }],
+      data: [{ date: "2026-06-18", submissions: 1 }],
+    },
+    table: {
+      title: "Recent rows",
+      columns: [{ key: "name", label: "Name" }],
+      rows: [{ id: "row-1", name: "Ada" }],
+      totalRows: 1,
+      sampledRows: 1,
+      truncated: false,
+    },
+    ...extra,
+  };
+}
+
+function dataInsightResult(extra: Record<string, unknown> = {}) {
+  return JSON.stringify(dataInsightPayload(extra));
+}
+
+function AppRenderer(_: ToolRendererProps) {
+  return <div>App renderer wins</div>;
+}
+
+async function settleLazyRender() {
+  await act(async () => {
+    await vi.dynamicImportSettled();
+  });
+}
+
+const mcpApp: AgentMcpAppPayload = {
+  serverId: "server",
+  toolName: "tool",
+  originalToolName: "tool",
+  resourceUri: "ui://tool",
+  toolInput: {},
+  toolResult: {},
+};
+
+describe("ToolCallDisplay native renderers", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    builderHandoffMocks.useAgentChatContext.mockReturnValue({ items: [] });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    clearToolRenderersForTests();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("waits five minutes before showing the long-running hint", () => {
+    expect(TOOL_LONG_RUNNING_HINT_DELAY_MS).toBe(5 * 60_000);
+  });
+
+  it("does not reopen storage setup for a restored tool result", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="connect-file-storage"
+          args={{}}
+          result={JSON.stringify({ kind: "connect-file-storage-card" })}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.querySelector('[role="dialog"]')).toBeNull();
+    act(() => container.querySelector("button")?.click());
+    expect(container.querySelector('[role="dialog"]')).not.toBeNull();
+  });
+
+  it("keeps agent-team spawn results in the live task card", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent-teams"
+          args={{ action: "spawn", task: "Draft Monday update" }}
+          result={
+            '{"taskId":"task-1","threadId":"thread-1","description":"Draft Monday update"}'
+          }
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain(
+      "Spawned agent: Draft Monday update",
+    );
+    expect(container.textContent).toContain("Open task thread");
+    expect(container.querySelector("[data-action-card]")).toBeNull();
+  });
+
+  it.each(["slack", "gong", "sentry", "neon", "figma"])(
+    "keeps the %s badge visible while running and after completion",
+    async (provider) => {
+      for (const isRunning of [true, false]) {
+        await act(async () => {
+          root.render(
+            <ToolCallDisplay
+              toolName={`mcp__${provider}__search`}
+              args={{}}
+              result={isRunning ? undefined : "ok"}
+              isRunning={isRunning}
+            />,
+          );
+        });
+        const badge = container.querySelector(
+          `[data-integration-id="${provider}"]`,
+        );
+        expect(badge?.getAttribute("role")).toBe("img");
+        expect(badge?.getAttribute("aria-label")).toBeTruthy();
+        expect(badge?.querySelector("img")?.getAttribute("src")).toMatch(
+          /^data:image\//,
+        );
+      }
+    },
+  );
+
+  it("renders the provider API badge from its explicit provider", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="provider-api-request"
+          args={{ provider: "gong", path: "/v2/calls" }}
+          isRunning
+        />,
+      );
+    });
+    expect(
+      container.querySelector('[data-integration-id="gong"]'),
+    ).not.toBeNull();
+    expect(container.querySelector(".agent-running-shimmer")).not.toBeNull();
+  });
+
+  it("passes the current staged chat context to the Builder handoff card", () => {
+    builderHandoffMocks.useAgentChatContext.mockReturnValue({
+      items: [
+        {
+          key: "analytics-selected-dashboard",
+          title: "Dashboard: Customer Credit Usage Review",
+          context:
+            "The user currently has this Analytics dashboard selected: Customer Credit Usage Review.\nDashboard id: dash-123",
+        },
+      ],
+    });
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="connect-builder"
+          args={{}}
+          result={JSON.stringify({
+            kind: "connect-builder-card",
+            configured: true,
+            builderEnabled: true,
+            connectUrl: "",
+            prompt: "Add an organization filter",
+          })}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(
+      container
+        .querySelector("[data-testid='connect-builder-card']")
+        ?.getAttribute("data-context"),
+    ).toBe(
+      "## Dashboard: Customer Credit Usage Review\nThe user currently has this Analytics dashboard selected: Customer Credit Usage Review.\nDashboard id: dash-123",
+    );
+  });
+
+  it("falls back to a generic icon for MCP tools with no catalog match", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="mcp__acme-internal__lookup"
+          args={{}}
+          result="ok"
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.querySelector("img")).toBeNull();
+    expect(container.querySelector("svg")).not.toBeNull();
+  });
+
+  it("renders explicit data widgets natively", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={dataInsightResult()}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Recent rows");
+    expect(container.textContent).toContain("Ada");
+  });
+
+  it("renders chart-only data insight payloads without a table", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={dataInsightResult({ table: undefined })}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Responses by day");
+    expect(container.textContent).not.toContain("Recent rows");
+    expect(container.textContent).not.toContain("Ada");
+  });
+
+  it("renders table-only data insight payloads without a chart", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={dataInsightResult({ chartSeries: undefined })}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Recent rows");
+    expect(container.textContent).toContain("Ada");
+    expect(container.textContent).not.toContain("Responses by day");
+    expect(container.querySelector("[data-agent-native-custom-ui]")).toBeNull();
+  });
+
+  it("falls back for malformed widget payloads", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={JSON.stringify({ widget: "data-table" })}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("response insights");
+    expect(container.textContent).not.toContain("Data table");
+  });
+
+  it("keeps agent tool calls out of native widget rendering", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:forms"
+          args={{}}
+          result={dataInsightResult()}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Asked forms");
+    expect(container.textContent).not.toContain("Recent rows");
+  });
+
+  it("keeps an unresolved delegated agent visibly running when chat state dips", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          isRunning={false}
+          structuredMeta={{
+            agentActivity: {
+              kind: "agent-native/agent-activity",
+              version: 1,
+              sequence: 2,
+              startedAt: 1,
+              updatedAt: 2,
+              durationMs: 1,
+              activePhase: "tool",
+              reasoning: [],
+              toolCalls: [
+                { id: "query-1", name: "query-warehouse", status: "running" },
+              ],
+            },
+          }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Asking Analytics...");
+    expect(container.textContent).not.toContain("Asked Analytics");
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]"),
+    ).not.toBeNull();
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]")?.className,
+    ).toContain("size-3.5");
+  });
+
+  it("keeps a remote pending delegation out of the terminal state", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          result="Remote agent task is still pending"
+          isRunning={false}
+          structuredMeta={{ agentPending: true }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Asking Analytics...");
+    expect(container.textContent).not.toContain("Asked Analytics");
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]"),
+    ).not.toBeNull();
+  });
+
+  it("shows activity tool cards as running while the chat runs", () => {
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={true}>
+          <ToolCallFallback
+            toolName="generate-design"
+            args={{}}
+            argsText=""
+            activity
+            isActiveTail
+          />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).toContain("generate design");
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]"),
+    ).not.toBeNull();
+    expect(
+      container.querySelector(".agent-tool-call")?.getAttribute("data-running"),
+    ).toBe("true");
+    expect(container.querySelector(".agent-running-shimmer")).not.toBeNull();
+  });
+
+  it("never spins an activity placeholder when no chat is running", () => {
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={false}>
+          <ToolCallFallback
+            toolName="generate-design"
+            args={{}}
+            argsText=""
+            activity
+          />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).toContain("generate design");
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]"),
+    ).toBeNull();
+    expect(
+      container.querySelector(".agent-tool-call")?.getAttribute("data-running"),
+    ).toBeNull();
+  });
+
+  it("reports an interrupted tool as unknown rather than failed", () => {
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={false}>
+          <ToolCallFallback
+            toolName="send-email"
+            args={{}}
+            argsText="{}"
+            result="Interrupted before this tool returned a result."
+            outcome="unknown"
+          />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).toContain("may or may not have completed");
+    expect(container.querySelector(".text-destructive")).toBeNull();
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]"),
+    ).toBeNull();
+  });
+
+  it("does not animate a tool row that mounts already resolved", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="read-file"
+          args={{}}
+          result="done"
+          isRunning={false}
+        />,
+      );
+    });
+
+    const row = container.querySelector(".agent-tool-call");
+    expect(row?.getAttribute("data-running")).toBeNull();
+    expect(row?.className).toBe("agent-tool-call");
+  });
+
+  it("shimmers a resolved tool that is the active chat tail without entry motion", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="read-file"
+          args={{}}
+          result="done"
+          isRunning={false}
+          isActiveTail
+        />,
+      );
+    });
+
+    const row = container.querySelector(".agent-tool-call");
+    expect(row?.getAttribute("data-running")).toBeNull();
+    expect(row?.getAttribute("data-active-tail")).toBeNull();
+    expect(row?.className).toBe("agent-tool-call");
+    expect(container.querySelector(".agent-running-shimmer")).not.toBeNull();
+  });
+
+  it("does not animate a tool row that mounts running", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay toolName="read-file" args={{}} isRunning={true} />,
+      );
+    });
+
+    const row = container.querySelector(".agent-tool-call");
+    expect(row?.getAttribute("data-running")).toBe("true");
+    expect(row?.className).toBe("agent-tool-call");
+  });
+
+  it("does not replay the entry when an existing row becomes the active tail", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="read-file"
+          args={{}}
+          isRunning={false}
+          isActiveTail={false}
+        />,
+      );
+    });
+    expect(container.querySelector(".agent-tool-call")?.className).toBe(
+      "agent-tool-call",
+    );
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="read-file"
+          args={{}}
+          isRunning={false}
+          isActiveTail={true}
+        />,
+      );
+    });
+    expect(container.querySelector(".agent-tool-call")?.className).toBe(
+      "agent-tool-call",
+    );
+  });
+
+  it("shimmers only the newest running reconnect tool", () => {
+    const content: ContentPart[] = [
+      {
+        type: "tool-call",
+        toolCallId: "tool-1",
+        toolName: "list-files",
+        argsText: "",
+        args: {},
+      },
+      {
+        type: "tool-call",
+        toolCallId: "tool-2",
+        toolName: "read-file",
+        argsText: "",
+        args: {},
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={true}>
+          <ReconnectStreamMessage content={content} />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    const shimmer = container.querySelectorAll(".agent-running-shimmer");
+    expect(shimmer).toHaveLength(1);
+    expect(shimmer[0]?.textContent).toBe("read file");
+  });
+
+  it("shows only the richer agent progress row for call-agent delegations", () => {
+    vi.useFakeTimers();
+    try {
+      const content: ContentPart[] = [
+        {
+          type: "tool-call",
+          toolCallId: "call-analytics",
+          toolName: "call-agent",
+          argsText: JSON.stringify({
+            agent: "analytics",
+            message: "Count signups",
+          }),
+          args: { agent: "analytics", message: "Count signups" },
+        },
+        {
+          type: "tool-call",
+          toolCallId: "agent-analytics",
+          toolName: "agent:Analytics",
+          argsText: "",
+          args: {},
+          activity: true,
+        },
+      ];
+
+      act(() => {
+        root.render(
+          <ChatRunningContext.Provider value={true}>
+            <ReconnectStreamMessage content={content} />
+          </ChatRunningContext.Provider>,
+        );
+      });
+
+      expect(container.querySelectorAll(".agent-tool-call")).toHaveLength(1);
+      expect(
+        container.querySelectorAll("[data-agent-native-cube-loader]"),
+      ).toHaveLength(1);
+      expect(container.textContent).toContain("Asking Analytics...");
+      expect(container.textContent).not.toContain("call agent");
+
+      act(() => {
+        vi.advanceTimersByTime(TOOL_LONG_RUNNING_HINT_DELAY_MS);
+      });
+
+      expect(
+        container.textContent?.match(
+          /Still working\. Large updates can take a minute or two\./g,
+        ),
+      ).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("omits the long-running hint from streamed delegated-agent tools", () => {
+    vi.useFakeTimers();
+    try {
+      act(() => {
+        root.render(
+          <ToolCallDisplay
+            toolName="agent:Analytics"
+            args={{}}
+            isRunning={true}
+            structuredMeta={{
+              agentActivity: {
+                kind: "agent-native/agent-activity",
+                version: 1,
+                sequence: 2,
+                startedAt: 1,
+                updatedAt: 2,
+                durationMs: 1,
+                activePhase: "tool",
+                reasoning: [],
+                toolCalls: [
+                  {
+                    id: "tool-1",
+                    name: "query-warehouse",
+                    status: "running",
+                  },
+                ],
+              },
+            }}
+          />,
+        );
+      });
+
+      expect(container.textContent).toContain("Asking Analytics...");
+      expect(container.textContent).toContain("query warehouse");
+
+      act(() => {
+        vi.advanceTimersByTime(TOOL_LONG_RUNNING_HINT_DELAY_MS);
+      });
+
+      expect(container.textContent).not.toContain(
+        "Still working. Large updates can take a minute or two.",
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("shows integration badges for running delegated-agent tools", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          isRunning
+          structuredMeta={{
+            agentActivity: {
+              kind: "agent-native/agent-activity",
+              version: 1,
+              sequence: 2,
+              startedAt: 1,
+              updatedAt: 2,
+              durationMs: 1,
+              activePhase: "tool",
+              reasoning: [],
+              toolCalls: [
+                {
+                  id: "tool-slack",
+                  name: "mcp__slack__search",
+                  status: "running",
+                },
+                {
+                  id: "tool-gong",
+                  name: "provider-api-request",
+                  input: JSON.stringify({
+                    provider: "gong",
+                    path: "/v2/calls",
+                  }),
+                  status: "running",
+                },
+              ],
+            },
+          }}
+        />,
+      );
+    });
+    expect(
+      container.querySelector('[data-integration-id="slack"]'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-integration-id="gong"]'),
+    ).not.toBeNull();
+  });
+
+  it("keeps the full final agent result visible over a bounded activity preview", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          argsText="the complete downstream answer"
+          result="Done"
+          isRunning={false}
+          structuredMeta={{
+            agentActivity: {
+              kind: "agent-native/agent-activity",
+              version: 1,
+              sequence: 2,
+              startedAt: 1,
+              updatedAt: 2,
+              durationMs: 1,
+              activePhase: "complete",
+              responseText: "bounded preview",
+            },
+          }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("the complete downstream answer");
+    expect(container.textContent).not.toContain("bounded preview");
+    expect(container.querySelector(".max-h-48")).toBeNull();
+  });
+
+  it("interleaves remote reasoning segments with their following tool calls", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ToolCallDisplay
+            toolName="agent:Analytics"
+            args={{}}
+            isRunning={true}
+            structuredMeta={{
+              agentActivity: {
+                kind: "agent-native/agent-activity",
+                version: 1,
+                sequence: 5,
+                startedAt: 1,
+                updatedAt: 5,
+                durationMs: 4,
+                activePhase: "responding",
+                reasoning: ["Plan the query", "Interpret the result"],
+                toolCalls: [
+                  {
+                    id: "tool-1",
+                    name: "query-warehouse",
+                    status: "completed",
+                  },
+                ],
+              },
+            }}
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    const text = container.textContent ?? "";
+    expect(text.indexOf("Plan the query")).toBeLessThan(
+      text.indexOf("query warehouse"),
+    );
+    expect(text.indexOf("query warehouse")).toBeLessThan(
+      text.indexOf("Interpret the result"),
+    );
+  });
+
+  it("keeps remote response text visible in order once another tool starts", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          isRunning={true}
+          structuredMeta={{
+            agentActivity: {
+              kind: "agent-native/agent-activity",
+              version: 1,
+              sequence: 6,
+              startedAt: 1,
+              updatedAt: 6,
+              durationMs: 5,
+              activePhase: "responding",
+              reasoning: [],
+              toolCalls: [
+                { id: "tool-1", name: "query-warehouse", status: "completed" },
+              ],
+              response: ["Checking the numbers first.", "Revenue grew 12%."],
+              responseText: "Revenue grew 12%.",
+            },
+          }}
+        />,
+      );
+    });
+
+    const text = container.textContent ?? "";
+    expect(text).toContain("Checking the numbers first.");
+    expect(text.indexOf("Checking the numbers first.")).toBeLessThan(
+      text.indexOf("query warehouse"),
+    );
+  });
+
+  it("keeps summary-only remote tool activity non-expandable", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          isRunning={true}
+          structuredMeta={{
+            agentActivity: {
+              kind: "agent-native/agent-activity",
+              version: 1,
+              sequence: 2,
+              startedAt: 1,
+              updatedAt: 2,
+              durationMs: 1,
+              activePhase: "tool",
+              reasoning: [],
+              toolCalls: [
+                {
+                  id: "tool-1",
+                  name: "query-warehouse",
+                  status: "completed",
+                },
+              ],
+            },
+          }}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("query warehouse");
+    expect(
+      container.querySelector(
+        'button[aria-label="View query-warehouse output"]',
+      ),
+    ).toBeNull();
+    const expandableButtons = container.querySelectorAll(
+      "button[aria-expanded]",
+    );
+    expect(expandableButtons).toHaveLength(1);
+    expect(expandableButtons[0]?.textContent).toContain("Asking Analytics");
+  });
+
+  it("shows generic A2A progress until an activity snapshot arrives", () => {
+    const progress = {
+      state: "working",
+      elapsedSeconds: 30,
+      detail: "Querying the warehouse",
+    };
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          isRunning={true}
+          structuredMeta={{ agentProgress: progress }}
+        />,
+      );
+    });
+
+    expect(
+      container.querySelector('[data-testid="agent-call-progress"]')
+        ?.textContent,
+    ).toContain("Working · 30s elapsed · Querying the warehouse");
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="agent:Analytics"
+          args={{}}
+          isRunning={true}
+          structuredMeta={{
+            agentProgress: progress,
+            agentActivity: {
+              kind: "agent-native/agent-activity",
+              version: 1,
+              sequence: 1,
+              startedAt: 1,
+              updatedAt: 2,
+              durationMs: 1,
+              activePhase: "reasoning",
+              reasoning: ["Inspecting signups"],
+              toolCalls: [],
+            },
+          }}
+        />,
+      );
+    });
+
+    expect(
+      container.querySelector('[data-testid="agent-call-progress"]'),
+    ).toBeNull();
+    expect(container.textContent).toContain("Thinking");
+  });
+
+  it("localizes delegated-agent labels and elapsed durations", async () => {
+    await act(async () => {
+      root.render(
+        <AgentNativeI18nProvider
+          catalog={{
+            sourceLocale: "en-US",
+            messages: {
+              agentChat: {
+                tool: {
+                  askingAgent: "Localized asking {{agent}}",
+                  elapsed: "Localized elapsed {{duration}}",
+                },
+              },
+            },
+          }}
+          initialLocale="en-US"
+          initialPreference="en-US"
+          persistPreference={false}
+        >
+          <ToolCallDisplay
+            toolName="agent:Analytics"
+            args={{}}
+            isRunning={true}
+            structuredMeta={{
+              agentProgress: {
+                state: "working",
+                elapsedSeconds: 30,
+                detail: "Querying the warehouse",
+              },
+            }}
+          />
+        </AgentNativeI18nProvider>,
+      );
+    });
+
+    expect(container.textContent).toContain("Localized asking Analytics");
+    expect(container.textContent).toContain("Localized elapsed 30s");
+  });
+
+  it("renders a reconnected raw call-agent result through the scroll-free agent cell", () => {
+    const content: ContentPart[] = [
+      {
+        type: "tool-call",
+        toolCallId: "call-analytics",
+        toolName: "call-agent",
+        argsText: JSON.stringify({
+          agent: "Analytics",
+          message: "Count signups",
+        }),
+        args: { agent: "Analytics", message: "Count signups" },
+        result: "**42** signups",
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={false}>
+          <ReconnectStreamMessage content={content} />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).toContain("Asked Analytics");
+    expect(container.textContent).toContain("42 signups");
+    expect(container.querySelector(".max-h-48")).toBeNull();
+    expect(container.querySelector(".overflow-y-auto")).toBeNull();
+  });
+
+  it("keeps only the newest resolved reconnect tool active while the chat runs", () => {
+    const content: ContentPart[] = [
+      {
+        type: "tool-call",
+        toolCallId: "tool-1",
+        toolName: "list-files",
+        argsText: "",
+        args: {},
+        result: "done",
+      },
+      {
+        type: "tool-call",
+        toolCallId: "tool-2",
+        toolName: "read-file",
+        argsText: "",
+        args: {},
+        result: "done",
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={true}>
+          <ReconnectStreamMessage content={content} />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    const activeLabels = container.querySelectorAll(".agent-running-shimmer");
+    expect(activeLabels).toHaveLength(1);
+    expect(activeLabels[0]?.textContent).toContain("read file");
+    expect(activeLabels[0]?.closest(".agent-tool-call")).not.toBeNull();
+  });
+
+  it("shows a subtle long-running hint after a running tool stays active", () => {
+    vi.useFakeTimers();
+    try {
+      act(() => {
+        root.render(
+          <ToolCallDisplay toolName="edit-design" args={{}} isRunning={true} />,
+        );
+      });
+
+      expect(container.textContent).toContain("edit screen");
+      expect(container.textContent).not.toContain(
+        "Large updates can take a minute or two.",
+      );
+
+      act(() => {
+        vi.advanceTimersByTime(TOOL_LONG_RUNNING_HINT_DELAY_MS);
+      });
+
+      expect(container.textContent).toContain(
+        "Still working. Large updates can take a minute or two.",
+      );
+      expect(
+        container.querySelector(".agent-tool-call > div > div:last-child")
+          ?.className,
+      ).toContain("pb-2");
+
+      act(() => {
+        root.render(
+          <ToolCallDisplay
+            toolName="edit-design"
+            args={{}}
+            isRunning={false}
+          />,
+        );
+      });
+
+      expect(container.textContent).not.toContain(
+        "Large updates can take a minute or two.",
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("shows the long-running hint for structured tool rows", () => {
+    vi.useFakeTimers();
+    try {
+      act(() => {
+        root.render(
+          <ToolCallDisplay
+            toolName="edit-file"
+            args={{}}
+            structuredMeta={{
+              toolKind: "edit",
+              filePath: "app.tsx",
+              oldText: "before",
+              newText: "after",
+            }}
+            isRunning={true}
+          />,
+        );
+      });
+
+      expect(container.textContent).toContain("app.tsx");
+      expect(container.textContent).not.toContain(
+        "Large updates can take a minute or two.",
+      );
+
+      act(() => {
+        vi.advanceTimersByTime(TOOL_LONG_RUNNING_HINT_DELAY_MS);
+      });
+
+      expect(container.textContent).toContain(
+        "Still working. Large updates can take a minute or two.",
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("shows the long-running hint for renderer-backed tool rows", () => {
+    vi.useFakeTimers();
+    registerToolRenderer({
+      id: "app.long-renderer",
+      match: "custom-long-renderer",
+      Component: AppRenderer,
+    });
+
+    try {
+      act(() => {
+        root.render(
+          <ToolCallDisplay
+            toolName="custom-long-renderer"
+            args={{}}
+            isRunning={true}
+          />,
+        );
+      });
+
+      expect(container.textContent).toContain("App renderer wins");
+      expect(
+        container.querySelector("[data-agent-native-custom-ui]"),
+      ).toBeNull();
+      expect(container.textContent).not.toContain(
+        "Large updates can take a minute or two.",
+      );
+
+      act(() => {
+        vi.advanceTimersByTime(TOOL_LONG_RUNNING_HINT_DELAY_MS);
+      });
+
+      expect(container.textContent).toContain(
+        "Still working. Large updates can take a minute or two.",
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("lets generic tool rows fill the assistant message column", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="hubspot-deals"
+          args={{ query: "recent deals" }}
+          isRunning={true}
+        />,
+      );
+    });
+
+    const row = container.querySelector("button")?.parentElement;
+    expect(row?.className).toContain("w-full");
+    expect(container.querySelector("button")?.className).toContain("w-full");
+    expect(container.textContent).toContain("recent deals");
+  });
+
+  it("shows the command itself in a generic command row", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="exec-command"
+          args={{ cmd: "pnpm test --filter @agent-native/core" }}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("exec command");
+    expect(container.textContent).toContain(
+      "pnpm test --filter @agent-native/core",
+    );
+  });
+
+  it("expands inputs inline and opens output in a popover", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="slack_read_thread"
+          args={{ channel_id: "C123", message_ts: "1.2" }}
+          result={JSON.stringify({ messages: "ok" })}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("slack read thread");
+    expect(container.textContent).not.toContain("C123");
+
+    const expandButton = container.querySelector(
+      'button[aria-expanded="false"]',
+    ) as HTMLButtonElement | null;
+    expect(expandButton).not.toBeNull();
+    act(() => {
+      expandButton?.click();
+    });
+
+    expect(container.textContent).toContain("C123");
+    const outputButton = container.querySelector(
+      'button[aria-label="View slack_read_thread output"]',
+    ) as HTMLButtonElement | null;
+    expect(outputButton).not.toBeNull();
+
+    act(() => {
+      outputButton?.click();
+    });
+
+    expect(document.body.textContent).toContain(
+      "Raw slack_read_thread tool call output",
+    );
+    expect(document.body.textContent).toContain("messages");
+  });
+
+  it("syntax highlights run-code source as JavaScript", () => {
+    const payload = toolInputPayload("run-code", {
+      code: "const answer = 42;\nconsole.log(answer);",
+    });
+
+    expect(payload?.lang).toBe("javascript");
+  });
+
+  it("shows a compact repeat count for coalesced tool rows", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="update-dashboard"
+          args={{ dashboardId: "dash-1" }}
+          result="saved"
+          isRunning={false}
+          repeatCount={3}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("update dashboard");
+    expect(container.textContent).toContain("3x");
+  });
+
+  it("shows reconnect activity cards as running without global chat state", () => {
+    const content: ContentPart[] = [
+      {
+        type: "tool-call",
+        toolCallId: "activity-1",
+        toolName: "generate-design",
+        argsText: "",
+        args: {},
+        activity: true,
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={false}>
+          <ReconnectStreamMessage content={content} />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).toContain("generate design");
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]"),
+    ).not.toBeNull();
+  });
+
+  it("does not spin frozen reconnect activity cards", () => {
+    const content: ContentPart[] = [
+      {
+        type: "tool-call",
+        toolCallId: "activity-frozen-1",
+        toolName: "update-extension",
+        argsText: "",
+        args: {},
+        activity: true,
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={false}>
+          <ReconnectStreamMessage
+            content={content}
+            allowActivitySpinner={false}
+          />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).toContain("update extension");
+    expect(
+      container.querySelector("[data-agent-native-cube-loader]"),
+    ).toBeNull();
+  });
+
+  it("renders explicit native widgets ahead of MCP Apps metadata", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={dataInsightResult()}
+          mcpApp={mcpApp}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Recent rows");
+    expect(container.textContent).toContain("Ada");
+    expect(container.textContent).not.toContain("MCP APP");
+  });
+
+  it("renders MCP Apps when there is no native widget payload", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="external-widget"
+          args={{}}
+          result={JSON.stringify({ ok: true })}
+          mcpApp={mcpApp}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("MCP APP");
+  });
+
+  it("keeps first-party open_app MCP Apps out of a chat-first transcript", () => {
+    act(() => {
+      root.render(
+        <SuppressInlineOpenAppContext.Provider value={true}>
+          <ToolCallDisplay
+            toolName="open_app"
+            args={{}}
+            result={JSON.stringify({ ok: true })}
+            mcpApp={{
+              ...mcpApp,
+              toolName: "open_app",
+              originalToolName: "open_app",
+            }}
+            isRunning={false}
+          />
+        </SuppressInlineOpenAppContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).not.toContain("MCP APP");
+  });
+
+  it("still renders open_app MCP Apps outside chat-first mode", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="open_app"
+          args={{}}
+          result={JSON.stringify({ ok: true })}
+          mcpApp={{
+            ...mcpApp,
+            toolName: "open_app",
+            originalToolName: "open_app",
+          }}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("MCP APP");
+  });
+
+  it("renders action-declared native data widgets without relying on widget shape inference", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="top-customers"
+          args={{}}
+          result={JSON.stringify({
+            table: {
+              title: "Top customers",
+              columns: [{ key: "name", label: "Name" }],
+              rows: [{ name: "Ada" }],
+            },
+          })}
+          chatUI={{ renderer: "core.data-table" }}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Top customers");
+    expect(container.textContent).toContain("Ada");
+  });
+
+  it("honors chart action renderers over combined insight payloads", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={dataInsightResult()}
+          chatUI={{ renderer: "core.data-chart" }}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Responses by day");
+    expect(container.textContent).not.toContain("Recent rows");
+    expect(container.textContent).not.toContain("Ada");
+  });
+
+  it("honors table action renderers over combined insight payloads", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={dataInsightResult()}
+          chatUI={{ renderer: "core.data-table" }}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Recent rows");
+    expect(container.textContent).toContain("Ada");
+    expect(container.textContent).not.toContain("Responses by day");
+  });
+
+  it("renders action-declared inline extensions natively", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="render-inline-extension"
+          args={{}}
+          result={JSON.stringify({
+            ok: true,
+            inlineExtension: {
+              mode: "transient",
+              id: "inline-1",
+              name: "Sensitivity controls",
+              description: "Adjust the threshold",
+              content: "<div>Controls</div>",
+            },
+          })}
+          chatUI={{ renderer: "core.inline-extension" }}
+          isRunning={false}
+        />,
+      );
+    });
+    const loadingSurface = container.querySelector(
+      "[data-agent-native-custom-ui]",
+    );
+    expect(loadingSurface).toBeTruthy();
+    expect(loadingSurface?.querySelector(".border")).toBeNull();
+    await settleLazyRender();
+
+    const frame = container.querySelector(
+      '[data-testid="inline-extension-frame"]',
+    );
+    expect(frame).toBeTruthy();
+    expect(frame?.getAttribute("data-extension-id")).toBe("inline-1");
+    expect(frame?.getAttribute("data-extension-mode")).toBe("transient");
+    expect(container.textContent).toContain("Sensitivity controls");
+    expect(container.textContent).not.toContain("render inline extension");
+    expect(container.querySelector('[aria-label="Open extension"]')).toBeNull();
+    const surface = container.querySelector("[data-agent-native-custom-ui]");
+    expect(surface).toBeTruthy();
+    expect(surface?.className).toContain("my-3");
+    expect(surface?.className).toContain("rounded-lg");
+    expect(surface?.className).toContain("border");
+    expect(surface?.className).not.toContain("p-3");
+  });
+
+  it("pads app action UI inside the shared custom UI card", async () => {
+    registerActionChatRenderer({
+      id: "todo-list-inline",
+      renderer: "todo-demo.todo-list-inline",
+      Component: () => <button type="button">Add todo</button>,
+    });
+
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="render-todo-list-inline"
+          args={{}}
+          result={'{"ok":true}'}
+          chatUI={{ renderer: "todo-demo.todo-list-inline" }}
+          isRunning={false}
+        />,
+      );
+    });
+
+    const surface = container.querySelector("[data-agent-native-custom-ui]");
+    expect(surface).toBeTruthy();
+    expect(surface?.className).toContain("p-3");
+    expect(container.querySelector("button")?.textContent).toBe("Add todo");
+  });
+
+  it("hides an empty action UI card while its renderer is still running", () => {
+    registerActionChatRenderer({
+      id: "todo-list-loading",
+      renderer: "todo-demo.todo-list-loading",
+      Component: ({ context }) =>
+        context.isRunning ? null : <div>Todo list</div>,
+    });
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="render-todo-list-inline"
+          args={{}}
+          chatUI={{ renderer: "todo-demo.todo-list-loading" }}
+          isRunning
+        />,
+      );
+    });
+
+    const surface = container.querySelector("[data-agent-native-custom-ui]");
+    expect(surface).toBeTruthy();
+    expect(surface?.className).toContain("empty:hidden");
+    expect(surface?.childElementCount).toBe(0);
+  });
+
+  it("keeps built-in data widget renderer identities stable across resolves", () => {
+    const context = {
+      toolName: "top-customers",
+      args: {},
+      resultJson: {
+        chartSeries: {
+          type: "bar",
+          title: "Responses by day",
+          xKey: "date",
+          series: [{ key: "submissions", label: "Submissions" }],
+          data: [{ date: "2026-06-18", submissions: 1 }],
+        },
+      },
+      isRunning: false,
+      chatUI: { renderer: "core.data-chart" },
+    } as const;
+
+    expect(resolveBuiltinActionChatRenderer(context)).toBe(
+      resolveBuiltinActionChatRenderer(context),
+    );
+    expect(resolveBuiltinFallbackToolRenderer(context)).toBe(
+      resolveBuiltinFallbackToolRenderer(context),
+    );
+  });
+
+  it("falls back instead of rendering blank for malformed action-declared data widgets", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result='{"widget":"data-insights","chartSeries":'
+          chatUI={{ renderer: "core.data-insights" }}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("response insights");
+    expect(container.textContent).not.toContain("Responses by day");
+  });
+
+  it("renders render-data-widget from input when the echoed result is truncated", async () => {
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="render-data-widget"
+          args={dataInsightPayload()}
+          result='{"widget":"data-insights","chartSeries":'
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Responses by day");
+    expect(container.textContent).toContain("Recent rows");
+    expect(container.textContent).not.toContain("render data widget");
+  });
+
+  it("lets app-specific renderers override the generic explicit widget fallback", () => {
+    registerToolRenderer({
+      id: "app.response-insights",
+      match: "response-insights",
+      Component: AppRenderer,
+    });
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="response-insights"
+          args={{}}
+          result={dataInsightResult()}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("App renderer wins");
+    expect(container.textContent).not.toContain("Recent rows");
+  });
+
+  it("renders built-in data widgets even when registry side effects are absent", async () => {
+    clearReservedToolRenderersForTests();
+
+    await act(async () => {
+      root.render(
+        <ToolCallDisplay
+          toolName="render-data-widget"
+          args={dataInsightPayload()}
+          result={dataInsightResult()}
+          isRunning={false}
+        />,
+      );
+    });
+    await settleLazyRender();
+
+    expect(container.textContent).toContain("Responses by day");
+    expect(container.textContent).toContain("Recent rows");
+  });
+
+  it("smooth-streams only the tail text part during reconnect replay", () => {
+    const longText = (label: string) => `${label} ${"text ".repeat(140)}`;
+    const content: ContentPart[] = [
+      { type: "text", text: longText("before") },
+      {
+        type: "tool-call",
+        toolCallId: "tc_1",
+        toolName: "read-file",
+        args: {},
+        result: "done",
+      },
+      { type: "text", text: longText("middle") },
+      {
+        type: "tool-call",
+        toolCallId: "tc_2",
+        toolName: "write-file",
+        args: {},
+        result: "done",
+      },
+      { type: "text", text: longText("tail") },
+    ];
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={true}>
+          <ReconnectStreamMessage content={content} />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    const textParts = Array.from(container.querySelectorAll(".agent-markdown"));
+    expect(
+      textParts.map((part) => part.getAttribute("data-streaming")),
+    ).toEqual([null, null, "true"]);
+  });
+
+  it("does not smooth-stream completed text when reconnect replay is on a tool", () => {
+    const content: ContentPart[] = [
+      { type: "text", text: `done ${"text ".repeat(140)}` },
+      {
+        type: "tool-call",
+        toolCallId: "tc_1",
+        toolName: "update-dashboard",
+        args: {},
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={true}>
+          <ReconnectStreamMessage content={content} />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    const textParts = Array.from(container.querySelectorAll(".agent-markdown"));
+    expect(
+      textParts.map((part) => part.getAttribute("data-streaming")),
+    ).toEqual([null]);
+  });
+
+  it("collapses older reconnect tool calls behind a summary", () => {
+    const content: ContentPart[] = Array.from({ length: 5 }, (_, index) => ({
+      type: "tool-call" as const,
+      toolCallId: `tc_${index}`,
+      toolName: `tool-${index + 1}`,
+      args: {},
+      result: "done",
+    }));
+
+    act(() => {
+      root.render(
+        <ChatRunningContext.Provider value={true}>
+          <ReconnectStreamMessage content={content} />
+        </ChatRunningContext.Provider>,
+      );
+    });
+
+    expect(container.textContent).toContain("Ran 2 tools");
+    expect(container.textContent).not.toContain("tool 1");
+    expect(container.textContent).not.toContain("tool 2");
+    expect(container.textContent).toContain("tool 3");
+    expect(container.textContent).toContain("tool 4");
+    expect(container.textContent).toContain("tool 5");
+  });
+
+  it("keeps the latest completed reconnect thought expanded while a tool runs", () => {
+    const content: ContentPart[] = [
+      { type: "reasoning", text: "Completed thought" },
+      {
+        type: "tool-call",
+        toolCallId: "tc_1",
+        toolName: "read-file",
+        args: {},
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ChatRunningContext.Provider value={true}>
+            <ReconnectStreamMessage content={content} />
+          </ChatRunningContext.Provider>
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    const thoughtButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.startsWith("Thought"),
+    );
+    expect(thoughtButton?.getAttribute("aria-expanded")).toBe("true");
+    expect(container.textContent).toContain("Completed thought");
+  });
+
+  it("keeps only the active reconnect reasoning segment expanded", () => {
+    const content: ContentPart[] = [
+      { type: "reasoning", text: "First thought" },
+      {
+        type: "tool-call",
+        toolCallId: "tc_1",
+        toolName: "read-file",
+        args: {},
+        result: "done",
+      },
+      { type: "reasoning", text: "Current thought" },
+    ];
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ChatRunningContext.Provider value={true}>
+            <ReconnectStreamMessage content={content} />
+          </ChatRunningContext.Provider>
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    const thoughtButtons = Array.from(
+      container.querySelectorAll("button"),
+    ).filter((button) => /^(Thought|Thinking)/.test(button.textContent ?? ""));
+    expect(
+      thoughtButtons.map((button) => button.getAttribute("aria-expanded")),
+    ).toEqual(["false", "true"]);
+    expect(container.textContent).not.toContain("First thought");
+    expect(container.textContent).toContain("Current thought");
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ChatRunningContext.Provider value={false}>
+            <ReconnectStreamMessage content={content} />
+          </ChatRunningContext.Provider>
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.textContent).toContain("Current thought");
+  });
+
+  it("renders no reconnect reasoning at all when thinking is hidden", () => {
+    const content: ContentPart[] = [
+      { type: "reasoning", text: "Completed thought" },
+      {
+        type: "tool-call",
+        toolCallId: "tc_1",
+        toolName: "read-file",
+        args: {},
+        result: "done",
+      },
+    ];
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="hidden">
+          <ChatRunningContext.Provider value={true}>
+            <ReconnectStreamMessage content={content} />
+          </ChatRunningContext.Provider>
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.textContent).not.toContain("Completed thought");
+    expect(container.textContent).not.toContain("Thought");
+    expect(container.textContent).toContain("read file");
+  });
+});
+
+describe("formatWorkedDuration", () => {
+  it("formats seconds, minutes, and hours", () => {
+    expect(formatWorkedDuration(1_000)).toBe("1s");
+    expect(formatWorkedDuration(45_000)).toBe("45s");
+    expect(formatWorkedDuration(60_000)).toBe("1m");
+    expect(formatWorkedDuration(125_000)).toBe("2m 5s");
+    expect(formatWorkedDuration(3_600_000)).toBe("1h");
+    expect(formatWorkedDuration(3_900_000)).toBe("1h 5m");
+    expect(
+      formatWorkedDuration(125_000, {
+        locale: "de-DE",
+        minute: " Min.",
+        second: " Sek.",
+      }),
+    ).toBe("2 Min. 5 Sek.");
+  });
+});
+
+describe("ReasoningCell", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("collapses by default and opens on click", () => {
+    act(() => {
+      root.render(
+        <ReasoningCell
+          text="I should verify the join keys first."
+          defaultOpen
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Thought");
+    expect(container.textContent).not.toContain("verify the join keys first.");
+
+    const button = container.querySelector(
+      'button[aria-expanded="false"]',
+    ) as HTMLButtonElement | null;
+    act(() => {
+      button?.click();
+    });
+
+    expect(button?.getAttribute("aria-expanded")).toBe("true");
+    expect(container.textContent).toContain("verify the join keys first.");
+  });
+
+  it("opens a requested cell by default in expanded mode", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell text="I should verify the join keys first." />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.textContent).toContain("verify the join keys first.");
+    expect(container.querySelector('button[aria-expanded="true"]')).not.toBe(
+      null,
+    );
+  });
+
+  it("renders nothing at all in hidden mode", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="hidden">
+          <ReasoningCell
+            text="I should verify the join keys first."
+            durationMs={4200}
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.textContent).toBe("");
+    expect(container.querySelector("button")).toBe(null);
+  });
+
+  it("re-applies a mode change to a cell already on screen", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell text="I should verify the join keys first." />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-expanded="true"]')).not.toBe(
+      null,
+    );
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="collapsed">
+          <ReasoningCell text="I should verify the join keys first." />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-expanded="false"]')).not.toBe(
+      null,
+    );
+    expect(
+      container
+        .querySelector(".agent-chat-collapse")
+        ?.getAttribute("data-state"),
+    ).toBe("closed");
+  });
+
+  it("honors an explicitly collapsed default", () => {
+    act(() => {
+      root.render(
+        <ReasoningCell
+          text="I should verify the join keys first."
+          defaultOpen={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Thought");
+    expect(container.textContent).not.toContain("verify the join keys");
+
+    const button = container.querySelector(
+      'button[aria-expanded="false"]',
+    ) as HTMLButtonElement | null;
+    act(() => {
+      button?.click();
+    });
+
+    expect(button?.getAttribute("aria-expanded")).toBe("true");
+    expect(container.textContent).toContain("verify the join keys first.");
+  });
+
+  it("keeps its own disclosure inside the shared work disclosure", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary>
+          <ReasoningCell text="I should verify the join keys first." />
+        </WorkedForSummary>,
+      );
+    });
+
+    expect(container.querySelectorAll("button")).toHaveLength(1);
+    expect(container.textContent).not.toContain("verify the join keys first.");
+
+    act(() => {
+      container.querySelector("button")?.click();
+    });
+
+    const buttons = Array.from(container.querySelectorAll("button"));
+    expect(buttons).toHaveLength(2);
+    expect(container.textContent).toContain("Thought");
+    expect(container.textContent).not.toContain("verify the join keys first.");
+
+    act(() => {
+      buttons[1]?.click();
+    });
+
+    expect(container.textContent).toContain("verify the join keys first.");
+  });
+
+  it('shows a shimmering "Thinking" label while streaming', () => {
+    act(() => {
+      root.render(<ReasoningCell text="Weighing options…" isStreaming />);
+    });
+
+    expect(container.textContent).toContain("Thinking");
+    const shimmer = container.querySelector(".agent-thinking-indicator__text");
+    expect(shimmer?.textContent).toBe("Thinking");
+  });
+
+  it("shows the latest reasoning chunk immediately while streaming", () => {
+    const text = "Weighing options carefully.";
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell text={text} isStreaming />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.textContent).toContain(text);
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell text={text} isStreaming={false} />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.textContent).toContain(text);
+  });
+
+  it("renders reasoning markdown instead of its source characters", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text={"**Searching for news updates**\n\nThen read it."}
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector(".agent-markdown")).not.toBe(null);
+  });
+
+  it('falls back to a plain "Thought" label with no live timing', () => {
+    act(() => {
+      root.render(<ReasoningCell text="Some finished reasoning." />);
+    });
+
+    expect(container.textContent).toContain("Thought");
+    expect(container.querySelector(".agent-thinking-indicator__text")).toBe(
+      null,
+    );
+  });
+
+  it('shows "Thought for Xs" once a duration is known', () => {
+    act(() => {
+      root.render(
+        <ReasoningCell text="Some finished reasoning." durationMs={4200} />,
+      );
+    });
+
+    expect(container.textContent).toContain("Thought for 4s");
+  });
+
+  it("rounds sub-second durations up to a one-second thought label", () => {
+    act(() => {
+      root.render(
+        <ReasoningCell text="Some finished reasoning." durationMs={400} />,
+      );
+    });
+
+    const button = container.querySelector("button");
+    expect(button?.textContent).toBe("Thought for 1s");
+  });
+
+  it("animates a live reasoning segment closed when it finishes", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text="I should verify the join keys first."
+            isStreaming
+            autoCollapse
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-expanded="true"]')).not.toBe(
+      null,
+    );
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text="I should verify the join keys first."
+            isStreaming={false}
+            autoCollapse
+            durationMs={1400}
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-expanded="false"]')).not.toBe(
+      null,
+    );
+    expect(container.textContent).toContain("Thought for 1s");
+    expect(
+      container
+        .querySelector(".agent-chat-collapse")
+        ?.getAttribute("data-state"),
+    ).toBe("closed");
+  });
+
+  it("keeps a finished reasoning segment open until a newer one replaces it", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text="The first thought is complete."
+            isStreaming
+            defaultOpen
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text="The first thought is complete."
+            isStreaming={false}
+            durationMs={1400}
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-expanded="true"]')).not.toBe(
+      null,
+    );
+    expect(container.textContent).toContain("The first thought is complete.");
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text="The first thought is complete."
+            isStreaming={false}
+            durationMs={1400}
+            collapseWhenReplaced
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-expanded="false"]')).not.toBe(
+      null,
+    );
+    expect(
+      container
+        .querySelector(".agent-chat-collapse")
+        ?.getAttribute("data-state"),
+    ).toBe("closed");
+  });
+
+  it("clamps to a tail view while streaming and open, and unclamps once done", () => {
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text="Line one\nLine two\nLine three"
+            isStreaming
+            defaultOpen
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector(".reasoning-cell-tail")).not.toBe(null);
+
+    act(() => {
+      root.render(
+        <ThinkingDisplayProvider value="expanded">
+          <ReasoningCell
+            text="Line one\nLine two\nLine three"
+            isStreaming={false}
+            defaultOpen
+          />
+        </ThinkingDisplayProvider>,
+      );
+    });
+
+    expect(container.querySelector(".reasoning-cell-tail")).toBe(null);
+  });
+});
+
+describe("WorkedForSummary", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("does not flash open when a completed summary remounts", () => {
+    function Harness({ visible }: { visible: boolean }) {
+      return visible ? (
+        <WorkedForSummary durationMs={11_000} autoCollapse>
+          <ReasoningCell text="The old thought stays collapsed." />
+        </WorkedForSummary>
+      ) : null;
+    }
+
+    act(() => root.render(<Harness visible />));
+    expect(
+      container.querySelector("button")?.getAttribute("aria-expanded"),
+    ).toBe("false");
+
+    act(() => root.render(<Harness visible={false} />));
+    act(() => root.render(<Harness visible />));
+
+    expect(
+      container.querySelector("button")?.getAttribute("aria-expanded"),
+    ).toBe("false");
+    expect(container.textContent).not.toContain(
+      "The old thought stays collapsed.",
+    );
+  });
+
+  it("shows the completed run duration in the summary label", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary durationMs={5 * 60_000}>
+          <div>Details</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    expect(container.textContent).toContain("Worked for 5m");
+  });
+
+  it("applies the running shimmer while the work summary is live", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary isRunning>
+          <div>Details</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    expect(container.textContent).toContain("Working");
+    expect(container.querySelector(".agent-running-shimmer")).not.toBeNull();
+    expect(container.querySelector(".agent-running-shimmer")?.textContent).toBe(
+      "Working",
+    );
+  });
+
+  it("does not shimmer after the work summary completes", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary durationMs={5 * 60_000}>
+          <div>Details</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    expect(container.querySelector(".agent-running-shimmer")).toBeNull();
+  });
+
+  it("starts open when completed work contains interactive UI", () => {
+    act(() => {
+      root.render(
+        <WorkedForSummary durationMs={7_000} defaultOpen>
+          <div>Interactive todo list</div>
+        </WorkedForSummary>,
+      );
+    });
+
+    expect(
+      container.querySelector("button")?.getAttribute("aria-expanded"),
+    ).toBe("true");
+    expect(container.textContent).toContain("Interactive todo list");
+  });
+
+  it("reopens when custom UI metadata arrives after the summary mounts", () => {
+    const renderSummary = (defaultOpen: boolean) => (
+      <WorkedForSummary durationMs={7_000} defaultOpen={defaultOpen}>
+        <div>Late interactive UI</div>
+      </WorkedForSummary>
+    );
+
+    act(() => root.render(renderSummary(false)));
+    expect(
+      container.querySelector("button")?.getAttribute("aria-expanded"),
+    ).toBe("false");
+
+    act(() => root.render(renderSummary(true)));
+    expect(
+      container.querySelector("button")?.getAttribute("aria-expanded"),
+    ).toBe("true");
+    expect(container.textContent).toContain("Late interactive UI");
+  });
+});
+
+describe("RanToolsSummary", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("starts collapsed and reveals older tool calls on demand", () => {
+    act(() => {
+      root.render(
+        <RanToolsSummary toolCount={9}>
+          <div>Older tool call</div>
+        </RanToolsSummary>,
+      );
+    });
+
+    expect(container.textContent).toContain("Ran 9 tools");
+    expect(container.textContent).not.toContain("Older tool call");
+
+    act(() => {
+      container.querySelector("button")?.click();
+    });
+
+    expect(container.textContent).toContain("Older tool call");
+  });
+
+  it("keeps the summary label in place when its count changes", () => {
+    const render = (toolCount: number) => (
+      <RanToolsSummary toolCount={toolCount}>
+        <div>Older tool call</div>
+      </RanToolsSummary>
+    );
+
+    act(() => root.render(render(1)));
+    const initialLabel = container.querySelector(".agent-tool-summary__label");
+    expect(initialLabel?.className).not.toContain("--changing");
+
+    act(() => root.render(render(1)));
+    expect(container.querySelector(".agent-tool-summary__label")).toBe(
+      initialLabel,
+    );
+    expect(initialLabel?.className).not.toContain("--changing");
+
+    act(() => root.render(render(2)));
+    const changedLabel = container.querySelector(".agent-tool-summary__label");
+    expect(changedLabel).toBe(initialLabel);
+    expect(changedLabel?.className).not.toContain("--changing");
+
+    act(() => root.render(render(2)));
+    expect(container.querySelector(".agent-tool-summary__label")).toBe(
+      changedLabel,
+    );
+  });
+});
+
+describe("ToolCallStackMotion", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let originalRect: PropertyDescriptor | undefined;
+  let originalAnimate: PropertyDescriptor | undefined;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.useFakeTimers();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    originalRect = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      "getBoundingClientRect",
+    );
+    originalAnimate = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      "animate",
+    );
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    if (originalRect) {
+      Object.defineProperty(
+        HTMLElement.prototype,
+        "getBoundingClientRect",
+        originalRect,
+      );
+    } else {
+      Reflect.deleteProperty(HTMLElement.prototype, "getBoundingClientRect");
+    }
+    if (originalAnimate) {
+      Object.defineProperty(HTMLElement.prototype, "animate", originalAnimate);
+    } else {
+      Reflect.deleteProperty(HTMLElement.prototype, "animate");
+    }
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("moves retained rows and sends the oldest row into the summary", () => {
+    const layout = new Map<string, number>([
+      ["tool-a", 0],
+      ["tool-b", 24],
+      ["tool-c", 48],
+    ]);
+    Object.defineProperty(HTMLElement.prototype, "getBoundingClientRect", {
+      configurable: true,
+      value(this: HTMLElement) {
+        const key =
+          this.dataset.agentToolCallId ??
+          (this.dataset.agentToolSummary
+            ? `summary:${this.dataset.agentToolSummary}`
+            : "");
+        const top = layout.get(key) ?? 0;
+        return {
+          top,
+          left: 0,
+          width: 240,
+          height: 24,
+          bottom: top + 24,
+          right: 240,
+          x: 0,
+          y: top,
+          toJSON: () => ({}),
+        } as DOMRect;
+      },
+    });
+    const animations: Array<{
+      element: HTMLElement;
+      keyframes: Keyframe[];
+      animation: {
+        cancel: () => void;
+        oncancel: (() => void) | null;
+        onfinish: (() => void) | null;
+      };
+    }> = [];
+    Object.defineProperty(HTMLElement.prototype, "animate", {
+      configurable: true,
+      value(this: HTMLElement, keyframes: Keyframe[]) {
+        const animation = {
+          cancel: vi.fn(),
+          oncancel: null,
+          onfinish: null,
+        };
+        animations.push({ element: this, keyframes, animation });
+        return animation as unknown as Animation;
+      },
+    });
+
+    const render = (ids: string[], includeSummary = false) => (
+      <ToolCallStackMotion>
+        {includeSummary && (
+          <div data-agent-tool-summary="summary">Ran 1 tool</div>
+        )}
+        {ids.map((id) => (
+          <div key={id} data-agent-tool-call-id={id}>
+            {id}
+          </div>
+        ))}
+      </ToolCallStackMotion>
+    );
+
+    act(() => root.render(render(["tool-a", "tool-b", "tool-c"])));
+
+    layout.set("summary:summary", 0);
+    layout.set("tool-b", 48);
+    layout.set("tool-c", 72);
+    layout.set("tool-d", 96);
+    act(() => root.render(render(["tool-b", "tool-c", "tool-d"], true)));
+
+    const retainedRowAnimation = animations.find(
+      ({ element }) => element.dataset.agentToolCallId === "tool-b",
+    );
+    expect(retainedRowAnimation).toBeUndefined();
+    expect(animations).toHaveLength(0);
+  });
+
+  it("does not animate when the stack rows change", () => {
+    const layout = new Map<string, number>([["tool-a", 24]]);
+    Object.defineProperty(HTMLElement.prototype, "getBoundingClientRect", {
+      configurable: true,
+      value(this: HTMLElement) {
+        const key = this.dataset.agentToolCallId ?? "";
+        const top = layout.get(key) ?? 0;
+        return {
+          top,
+          left: 0,
+          width: 240,
+          height: 24,
+          bottom: top + 24,
+          right: 240,
+          x: 0,
+          y: top,
+          toJSON: () => ({}),
+        } as DOMRect;
+      },
+    });
+    const animations: Animation[] = [];
+    Object.defineProperty(HTMLElement.prototype, "animate", {
+      configurable: true,
+      value(this: HTMLElement, keyframes: Keyframe[]) {
+        const animation = {
+          cancel: vi.fn(),
+          oncancel: null,
+          onfinish: null,
+        };
+        animations.push(animation as unknown as Animation);
+        return animation as unknown as Animation;
+      },
+    });
+
+    const render = () => (
+      <ToolCallStackMotion>
+        <div className="agent-tool-call" data-agent-tool-call-id="tool-a" />
+      </ToolCallStackMotion>
+    );
+
+    act(() => root.render(render()));
+    act(() => root.render(render()));
+
+    expect(animations).toHaveLength(0);
+  });
+});
+
+describe("ApprovalAffordance", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    builderHandoffMocks.useAgentChatContext.mockReturnValue({ items: [] });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps Deny local-only and hides Approve/Always-allow with no ApprovalContext", () => {
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="bash"
+          args={{}}
+          approval={{ approvalKey: "approval-1" }}
+          isRunning={false}
+        />,
+      );
+    });
+
+    expect(container.textContent).toContain("Approve to run bash?");
+    expect(
+      Array.from(container.querySelectorAll("button")).map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(["bash", "Deny"]);
+
+    const denyButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "Deny",
+    ) as HTMLButtonElement;
+    act(() => denyButton.click());
+
+    expect(container.textContent).toContain("Denied. bash did not run.");
+  });
+
+  it("keeps approval copy and every action visible in narrow chat cards", () => {
+    act(() => {
+      root.render(
+        <ApprovalContext.Provider
+          value={{ onApprove: vi.fn(), onAlwaysAllow: vi.fn() }}
+        >
+          <ToolCallDisplay
+            toolName="send-email"
+            args={{}}
+            approval={{ approvalKey: "approval-1" }}
+            isRunning={false}
+          />
+        </ApprovalContext.Provider>,
+      );
+    });
+
+    const approvalCard = container.querySelector(
+      ".agent-approval-card",
+    ) as HTMLDivElement;
+    const approvalCopy = Array.from(approvalCard.querySelectorAll("div")).find(
+      (div) => div.textContent === "Approve to run send-email?",
+    ) as HTMLDivElement;
+    const actionButtons = Array.from(approvalCard.querySelectorAll("button"));
+
+    expect(approvalCard.className).toContain("rounded-xl");
+    expect(approvalCopy.className).toContain("font-semibold");
+    expect(actionButtons.map((button) => button.textContent)).toEqual([
+      "Approve",
+      "",
+      "Deny",
+    ]);
+    for (const button of actionButtons) {
+      expect(button.className).toContain("shrink-0");
+    }
+  });
+
+  it("keeps the default two-button layout when only onApprove is provided", () => {
+    const onApprove = vi.fn();
+    act(() => {
+      root.render(
+        <ApprovalContext.Provider value={{ onApprove }}>
+          <ToolCallDisplay
+            toolName="bash"
+            args={{}}
+            approval={{ approvalKey: "approval-1" }}
+            isRunning={false}
+          />
+        </ApprovalContext.Provider>,
+      );
+    });
+
+    expect(
+      Array.from(container.querySelectorAll("button")).map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(["bash", "Approve", "Deny"]);
+
+    const approveButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "Approve",
+    ) as HTMLButtonElement;
+    act(() => approveButton.click());
+
+    expect(onApprove).toHaveBeenCalledWith("approval-1");
+    expect(container.textContent).toContain("Approved. Re-running bash...");
+    expect(
+      Array.from(container.querySelectorAll("button")).map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(["bash"]);
+  });
+
+  it("hides the persistent approval option for per-call-only actions", () => {
+    act(() => {
+      root.render(
+        <ApprovalContext.Provider
+          value={{ onApprove: vi.fn(), onAlwaysAllow: vi.fn() }}
+        >
+          <ToolCallDisplay
+            toolName="send-email"
+            args={{}}
+            approval={{
+              approvalKey: "approval-1",
+              allowPersistentApproval: false,
+            }}
+            isRunning={false}
+          />
+        </ApprovalContext.Provider>,
+      );
+    });
+
+    expect(
+      Array.from(container.querySelectorAll("button")).map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(["send email", "Approve", "Deny"]);
+  });
+
+  it("keeps Approved visible when the chat refresh remounts the tool card", () => {
+    const onApprove = vi.fn();
+
+    function RefreshingApproval() {
+      const [resolution, setResolution] = useState<"approved" | null>(null);
+      const [revision, setRevision] = useState(0);
+
+      return (
+        <ApprovalContext.Provider
+          value={{
+            onApprove,
+            onApprovalResolved: (_approvalKey, nextResolution) => {
+              setResolution(nextResolution === "approved" ? "approved" : null);
+              setRevision((value) => value + 1);
+            },
+            getApprovalResolution: () => resolution,
+          }}
+        >
+          <ToolCallDisplay
+            key={revision}
+            toolName="bash"
+            toolCallId="call-1"
+            args={{}}
+            approval={{ approvalKey: "approval-1" }}
+            isRunning={false}
+          />
+        </ApprovalContext.Provider>
+      );
+    }
+
+    act(() => root.render(<RefreshingApproval />));
+    const approveButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "Approve",
+    ) as HTMLButtonElement;
+
+    act(() => approveButton.click());
+
+    expect(onApprove).toHaveBeenCalledWith("approval-1");
+    expect(container.textContent).toContain("Approved. Re-running bash...");
+    expect(
+      Array.from(container.querySelectorAll("button")).map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(["bash"]);
+  });
+
+  it("shows Approve/Deny again when the server re-issues approval_required with a new askId for the same toolCallId", () => {
+    const onApprove = vi.fn();
+    const resolutionsByIdentity = new Map<string, "approved" | "denied">();
+    const identity = (
+      approvalKey: string,
+      toolCallId?: string,
+      askId?: string,
+    ) => `${toolCallId ?? ""}${approvalKey}${askId ?? ""}`;
+
+    function ReissuedApproval({ askId }: { askId: string }) {
+      return (
+        <ApprovalContext.Provider
+          value={{
+            onApprove,
+            onApprovalResolved: (approvalKey, resolution, toolCallId, ask) => {
+              resolutionsByIdentity.set(
+                identity(approvalKey, toolCallId, ask),
+                resolution,
+              );
+            },
+            getApprovalResolution: (approvalKey, toolCallId, ask) =>
+              resolutionsByIdentity.get(
+                identity(approvalKey, toolCallId, ask),
+              ) ?? null,
+          }}
+        >
+          <ToolCallDisplay
+            toolName="bash"
+            toolCallId="call-1"
+            args={{}}
+            approval={{ approvalKey: "approval-1", askId }}
+            isRunning={false}
+          />
+        </ApprovalContext.Provider>
+      );
+    }
+
+    act(() => root.render(<ReissuedApproval askId="ask-1" />));
+    const approveButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "Approve",
+    ) as HTMLButtonElement;
+    act(() => approveButton.click());
+
+    expect(onApprove).toHaveBeenCalledWith("approval-1");
+    expect(container.textContent).toContain("Approved. Re-running bash...");
+
+    act(() => root.render(<ReissuedApproval askId="ask-2" />));
+
+    expect(container.textContent).not.toContain("Approved. Re-running bash...");
+    expect(
+      Array.from(container.querySelectorAll("button")).map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(["bash", "Approve", "Deny"]);
+  });
+
+  it("calls onDeny in addition to the local denied state when provided", () => {
+    const onApprove = vi.fn();
+    const onDeny = vi.fn();
+    act(() => {
+      root.render(
+        <ApprovalContext.Provider value={{ onApprove, onDeny }}>
+          <ToolCallDisplay
+            toolName="bash"
+            args={{}}
+            approval={{ approvalKey: "approval-1" }}
+            isRunning={false}
+          />
+        </ApprovalContext.Provider>,
+      );
+    });
+
+    const denyButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "Deny",
+    ) as HTMLButtonElement;
+    act(() => denyButton.click());
+
+    expect(onDeny).toHaveBeenCalledWith("approval-1");
+    expect(container.textContent).toContain("Denied. bash did not run.");
+  });
+
+  it("renders Always allow only when onAlwaysAllow is provided, and it approves on click", async () => {
+    const onApprove = vi.fn();
+    const onAlwaysAllow = vi.fn();
+    act(() => {
+      root.render(
+        <ApprovalContext.Provider value={{ onApprove, onAlwaysAllow }}>
+          <ToolCallDisplay
+            toolName="bash"
+            args={{}}
+            approval={{ approvalKey: "approval-1" }}
+            isRunning={false}
+          />
+        </ApprovalContext.Provider>,
+      );
+    });
+
+    expect(
+      Array.from(container.querySelectorAll("button")).map(
+        (button) => button.textContent,
+      ),
+    ).toEqual(["bash", "Approve", "", "Deny"]);
+
+    const menuButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.getAttribute("aria-label") === "More approval options",
+    ) as HTMLButtonElement;
+    act(() => {
+      menuButton.dispatchEvent(
+        new MouseEvent("pointerdown", {
+          bubbles: true,
+          button: 0,
+          cancelable: true,
+        }),
+      );
+      menuButton.click();
+    });
+
+    const alwaysAllowItem = Array.from(
+      document.body.querySelectorAll('[role="menuitem"]'),
+    ).find((item) => item.textContent?.includes("Always allow this action")) as
+      | HTMLElement
+      | undefined;
+    expect(alwaysAllowItem).toBeDefined();
+    await act(async () => {
+      alwaysAllowItem?.click();
+    });
+
+    expect(onAlwaysAllow).toHaveBeenCalledWith("approval-1", "bash");
+    expect(onApprove).not.toHaveBeenCalled();
+    expect(container.textContent).toContain("Approved. Re-running bash...");
+  });
+});