@stigmer/react 3.12.1 → 3.12.3

package/src/execution/__tests__/ToolCallItem.test.tsx

@@ -37,6 +37,8 @@ function makeToolCall(opts: {
   mcpServerSlug?: string;
   status?: ToolCallStatus;
   fileChangeSetId?: string;
+  startedAt?: string;
+  completedAt?: string;
 }): ToolCall {
   return create(ToolCallSchema, {
     id: opts.id ?? opts.name,
@@ -46,6 +48,8 @@ function makeToolCall(opts: {
     mcpServerSlug: opts.mcpServerSlug ?? "",
     status: opts.status ?? ToolCallStatus.TOOL_CALL_COMPLETED,
     fileChangeSetId: opts.fileChangeSetId ?? "",
+    startedAt: opts.startedAt ?? "",
+    completedAt: opts.completedAt ?? "",
   });
 }
 
@@ -190,10 +194,10 @@ describe("ToolCallItem disclosure", () => {
     expect(container.querySelector("table")).not.toBeNull();
   });
 
-  it("renders a settled shell as an always-visible terminal session, no chevron", () => {
-    // Shell is a `preview` category: its output IS the information. The body
-    // reads as one terminal session — the `$ command` prompt line leads, with
-    // its output below — visible without any disclosure click.
+  it("settles a successful shell into a collapsed dimmed tail behind a chevron", () => {
+    // Shell is the `tail` category: a settled success collapses to the
+    // TerminalTail teaser — the `$ command` line plus the last output lines at
+    // reduced contrast — with the header chevron as the expand control.
     const { container } = render(
       <ToolCallItem
         toolCall={makeToolCall({
@@ -203,13 +207,17 @@ describe("ToolCallItem disclosure", () => {
         })}
       />,
     );
-    expect(hasHeaderChevron(container)).toBe(false);
-    expect(previewBody(container)).not.toBeNull();
+    expect(hasHeaderChevron(container)).toBe(true);
+    expect(isExpanded(container)).toBe(false);
+    expect(
+      container.querySelector('[data-cursor-target="terminal-tail"]'),
+    ).not.toBeNull();
+    expect(
+      container.querySelector('[data-cursor-target="terminal-session"]'),
+    ).toBeNull();
+    // The teaser still carries the evidence: intent and last output.
     expect(container.textContent).toContain("$ echo hello");
     expect(screen.getByText("hello")).toBeTruthy();
-    expect(
-      container.querySelectorAll('[data-cursor-target="terminal-session"]'),
-    ).toHaveLength(1);
   });
 
   it("renders a settled MCP tool's result inline with no chevron", () => {
@@ -248,7 +256,10 @@ describe("ToolCallItem disclosure", () => {
     expect(container.textContent).toContain("exit 2");
   });
 
-  it("renders a running shell as a single terminal session block, no chevron", () => {
+  it("streams a running shell's full session in view (force-open, collapsible)", () => {
+    // The auto-open-while-running behaviour is untouched by the tail settle:
+    // an active command shows its output streaming. The chevron is present —
+    // a user may collapse a noisy long-running command, and their choice wins.
     const { container } = render(
       <ToolCallItem
         toolCall={makeToolCall({
@@ -259,12 +270,105 @@ describe("ToolCallItem disclosure", () => {
         })}
       />,
     );
-    expect(hasHeaderChevron(container)).toBe(false);
+    expect(hasHeaderChevron(container)).toBe(true);
+    expect(isExpanded(container)).toBe(true);
     expect(
       container.querySelectorAll('[data-cursor-target="terminal-session"]'),
     ).toHaveLength(1);
   });
 
+  // --- Tail settle lifecycle (issue #275) ------------------------------------
+
+  it("collapses a running shell to the dimmed tail the moment it succeeds", () => {
+    const running = makeToolCall({
+      id: "tc-sh",
+      name: "Shell",
+      args: { command: "make build" },
+      result: "compiling…",
+      status: ToolCallStatus.TOOL_CALL_RUNNING,
+    });
+    const { container, rerender } = render(<ToolCallItem toolCall={running} />);
+    expect(isExpanded(container)).toBe(true);
+
+    rerender(
+      <ToolCallItem
+        toolCall={makeToolCall({
+          id: "tc-sh",
+          name: "Shell",
+          args: { command: "make build" },
+          result: "compiling…\nBUILD OK",
+          status: ToolCallStatus.TOOL_CALL_COMPLETED,
+        })}
+      />,
+    );
+    expect(isExpanded(container)).toBe(false);
+    expect(
+      container.querySelector('[data-cursor-target="terminal-tail"]'),
+    ).not.toBeNull();
+    expect(container.textContent).toContain("BUILD OK");
+  });
+
+  it("keeps a failed shell open — error output is content, not context", () => {
+    // A non-zero exit means the output is what the user needs next; the row
+    // must never settle into the dimmed teaser. The exit marker in the result
+    // string is the failure signal (status stays COMPLETED on the wire).
+    const { container } = render(
+      <ToolCallItem
+        toolCall={makeToolCall({
+          name: "Shell",
+          args: { command: "make build" },
+          result: "error: no rule\n[Command failed with exit code 2]",
+        })}
+      />,
+    );
+    expect(hasHeaderChevron(container)).toBe(true);
+    expect(isExpanded(container)).toBe(true);
+    expect(
+      container.querySelector('[data-cursor-target="terminal-session"]'),
+    ).not.toBeNull();
+    expect(container.textContent).toContain("exit 2");
+  });
+
+  it("keeps only the last lines in the collapsed tail, with an honest hidden-count", () => {
+    const output = ["one", "two", "three", "four", "five"].join("\n");
+    const { container } = render(
+      <ToolCallItem
+        toolCall={makeToolCall({
+          name: "Shell",
+          args: { command: "seq 5" },
+          result: output,
+        })}
+      />,
+    );
+    const tail = container.querySelector('[data-cursor-target="terminal-tail"]')!;
+    expect(tail.textContent).toContain("five");
+    expect(tail.textContent).toContain("three");
+    expect(tail.textContent).not.toContain("one");
+    expect(tail.textContent).toContain("+2 lines");
+  });
+
+  it("expands a collapsed tail to the full session on click, and the choice sticks", () => {
+    const settled = makeToolCall({
+      id: "tc-sh2",
+      name: "Shell",
+      args: { command: "echo hi" },
+      result: "hi",
+    });
+    const { container, rerender } = render(<ToolCallItem toolCall={settled} />);
+    expect(isExpanded(container)).toBe(false);
+
+    fireEvent.click(rowHeaderToggle(container)!);
+    expect(isExpanded(container)).toBe(true);
+    expect(
+      container.querySelector('[data-cursor-target="terminal-session"]'),
+    ).not.toBeNull();
+
+    // A stream frame re-rendering the same settled call never recollapses a
+    // row the user opened (useAutoDisclosure: the manual toggle wins).
+    rerender(<ToolCallItem toolCall={settled} />);
+    expect(isExpanded(container)).toBe(true);
+  });
+
   it("suppresses the body for a content-bearing tool that produced nothing", () => {
     // The regression guard: a preview-category tool whose result normalizes to
     // `empty` (no output) must stay a clean one-line row, never an empty padded
@@ -473,6 +577,190 @@ describe("ToolCallItem disclosure", () => {
   });
 });
 
+// ---------------------------------------------------------------------------
+// Density tier — quiet unboxed lines for metadata-only rows (stigmer#274)
+// ---------------------------------------------------------------------------
+
+function rowRoot(container: HTMLElement): HTMLElement {
+  return container.querySelector('[data-cursor-target="tool-call-row"]')!;
+}
+function isQuietLine(container: HTMLElement): boolean {
+  const cls = rowRoot(container).className;
+  return !cls.includes("stg:rounded-lg") && !cls.includes("stg:border-b");
+}
+
+describe("ToolCallItem density tier", () => {
+  it("renders metadata-only rows as quiet unboxed lines (read / list / search / think)", () => {
+    const cases: ToolCall[] = [
+      makeToolCall({ name: "Read", args: { path: "/a.ts" } }),
+      makeToolCall({ name: "ls", args: { path: "/src" } }),
+      makeToolCall({ name: "Grep", args: { pattern: "foo" }, result: "2 matches" }),
+      makeToolCall({ name: "think", args: { thought: "considering options" } }),
+    ];
+    for (const tc of cases) {
+      const { container, unmount } = render(<ToolCallItem toolCall={tc} />);
+      expect(isQuietLine(container), `${tc.name} should be a quiet line`).toBe(true);
+      unmount();
+    }
+  });
+
+  it("keeps content-bearing rows as cards (shell / edit)", () => {
+    const cases: ToolCall[] = [
+      makeToolCall({ name: "Shell", args: { command: "echo hi" }, result: "hi" }),
+      makeToolCall({
+        name: "StrReplace",
+        args: { path: "/a.ts", old_string: "a", new_string: "b" },
+      }),
+    ];
+    for (const tc of cases) {
+      const { container, unmount } = render(<ToolCallItem toolCall={tc} />);
+      expect(rowRoot(container).className, `${tc.name} should stay a card`).toContain(
+        "stg:border-border-prominent",
+      );
+      unmount();
+    }
+  });
+
+  it("escalates a quiet row to a card when it fails — error output is content", () => {
+    const failed = makeToolCall({
+      name: "Read",
+      args: { path: "/a.ts" },
+      status: ToolCallStatus.TOOL_CALL_FAILED,
+      result: '{"status":"error","message":"permission denied"}',
+    });
+    const { container } = render(<ToolCallItem toolCall={failed} />);
+    expect(rowRoot(container).className).toContain("stg:border-border-prominent");
+  });
+
+  it("escalates a quiet row to a card while gated — a decision surface is never frameless", () => {
+    const gated = makeToolCall({
+      id: "tc-read-gated",
+      name: "Read",
+      args: { path: "/secret" },
+      status: ToolCallStatus.TOOL_CALL_WAITING_APPROVAL,
+    });
+    const approval: PendingApproval = create(PendingApprovalSchema, {
+      toolCallId: "tc-read-gated",
+      toolName: "Read",
+      argsPreview: '{"path":"/secret"}',
+    });
+    const ctx: ApprovalContextValue = {
+      approvalsByToolCallId: new Map([["tc-read-gated", approval]]),
+      onSubmit: () => {},
+      submittingIds: new Set(),
+      errorsByToolCallId: new Map(),
+    };
+    const { container } = render(
+      <ApprovalContext.Provider value={ctx}>
+        <ToolCallItem toolCall={gated} />
+      </ApprovalContext.Provider>,
+    );
+    const cls = rowRoot(container).className;
+    expect(cls).toContain("stg:border-border-prominent");
+    expect(cls).toContain("stg:border-l-warning");
+  });
+
+  it("stays a quiet line while running — the in-flight state rides the label, not a frame", () => {
+    const running = makeToolCall({
+      name: "Read",
+      args: { path: "/a.ts" },
+      status: ToolCallStatus.TOOL_CALL_RUNNING,
+    });
+    const { container } = render(<ToolCallItem toolCall={running} />);
+    expect(isQuietLine(container)).toBe(true);
+    expect(container.querySelector(".stg\\:animate-spin")).not.toBeNull();
+  });
+
+  it("sweeps the running label with the ambient-liveness shimmer, settled labels stay static", () => {
+    const running = makeToolCall({
+      name: "Shell",
+      args: { command: "sleep 5" },
+      status: ToolCallStatus.TOOL_CALL_RUNNING,
+    });
+    const { container, rerender } = render(<ToolCallItem toolCall={running} />);
+    expect(container.querySelector(".stgm-shimmer-label")?.textContent).toBe("Shell");
+
+    const settled = makeToolCall({
+      name: "Shell",
+      args: { command: "sleep 5" },
+      result: "done",
+    });
+    rerender(<ToolCallItem toolCall={settled} />);
+    expect(container.querySelector(".stgm-shimmer-label")).toBeNull();
+  });
+
+  it("contains a quiet row's disclosed body under a left rail instead of a border", () => {
+    // Grep is a summary category with a real result body: expanding the quiet
+    // line must bound the body with the rail (the ThinkingMessage precedent),
+    // never leave it bleeding into the thread.
+    const tc = makeToolCall({
+      name: "Grep",
+      args: { pattern: "foo" },
+      result: "src/a.ts:1: foo",
+    });
+    const { container } = render(<ToolCallItem toolCall={tc} />);
+    fireEvent.click(rowHeaderToggle(container)!);
+    expect(container.querySelector(".stg\\:border-l-2")).not.toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Status vocabulary — success is silent, everything visible carries signal
+// ---------------------------------------------------------------------------
+
+describe("ToolCallItem status vocabulary", () => {
+  it("renders no status icon on a completed row — success is the silent default", () => {
+    const { container } = render(
+      <ToolCallItem
+        toolCall={makeToolCall({ name: "Shell", args: { command: "echo hi" }, result: "hi" })}
+      />,
+    );
+    expect(container.querySelector(".stg\\:text-success")).toBeNull();
+  });
+
+  it("keeps the failed icon — failure shouts", () => {
+    const { container } = render(
+      <ToolCallItem
+        toolCall={makeToolCall({
+          name: "Shell",
+          args: { command: "false" },
+          status: ToolCallStatus.TOOL_CALL_FAILED,
+        })}
+      />,
+    );
+    expect(container.querySelector(".stg\\:text-destructive")).not.toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Duration chips — shown only when they carry information (>= 1s)
+// ---------------------------------------------------------------------------
+
+describe("ToolCallItem duration chip", () => {
+  it("suppresses a sub-second duration — the chip would be noise", () => {
+    const tc = makeToolCall({
+      name: "Read",
+      args: { path: "/a.ts" },
+      startedAt: "2026-08-13T10:00:00.000Z",
+      completedAt: "2026-08-13T10:00:00.400Z",
+    });
+    render(<ToolCallItem toolCall={tc} />);
+    expect(screen.queryByText("400ms")).toBeNull();
+  });
+
+  it("shows a duration of a second or more — it carries information", () => {
+    const tc = makeToolCall({
+      name: "Shell",
+      args: { command: "sleep 2" },
+      result: "",
+      startedAt: "2026-08-13T10:00:00.000Z",
+      completedAt: "2026-08-13T10:00:02.500Z",
+    });
+    render(<ToolCallItem toolCall={tc} />);
+    expect(screen.getByText("2.5s")).toBeTruthy();
+  });
+});
+
 // ---------------------------------------------------------------------------
 // File-review badge — a stamped edit row's live review state
 // ---------------------------------------------------------------------------

package/src/execution/__tests__/ToolRunGroup.test.tsx

@@ -90,9 +90,12 @@ describe("ToolRunGroup", () => {
     );
     expect(container.querySelector(".stg\\:animate-spin")).toBeNull();
     expect(chipExpanded(container)).toBe(false);
-    // The aggregate resolves to the terminal branch (completed chip in
-    // text-success), not the non-terminal pending fallback (muted dot).
-    expect(container.querySelector(".stg\\:text-success")).not.toBeNull();
+    // The aggregate resolves to the terminal branch — which is silent
+    // (completed renders NO status icon, stigmer#274) — not the non-terminal
+    // pending fallback, which renders its muted dot as a third header svg
+    // beside the category icon and chevron.
+    const headerSvgs = container.querySelectorAll("button svg");
+    expect(headerSvgs.length).toBe(2);
     expect(screen.getByText("Read 2 files")).toBeTruthy();
   });
 
@@ -121,7 +124,7 @@ describe("ToolRunGroup", () => {
     expect(screen.getByLabelText("Approve")).toBeTruthy();
   });
 
-  it("is a bordered card whose expanded children are borderless divider rows", () => {
+  it("is a quiet unboxed line whose expanded children sit under a left rail as divider rows", () => {
     const { container } = render(
       <ToolRunGroup
         category="read"
@@ -129,15 +132,20 @@ describe("ToolRunGroup", () => {
       />,
     );
 
+    // Quiet chrome (stigmer#274): the fold is metadata-only by construction,
+    // so the chip must never render as a bordered card shouting over the
+    // conversation. Class presence only — actual rendering is guarded by the
+    // layer-invariant + e2e computed-style tests (happy-dom does not resolve
+    // `@layer`).
     const chip = container.querySelector('[data-cursor-target="tool-run-group"]')!;
-    expect(chip.className).toContain("stg:rounded-lg");
-    // Class presence only — actual rendering is guarded by the layer-invariant +
-    // e2e computed-style tests (happy-dom does not resolve `@layer`).
-    expect(chip.className).toContain("stg:border-border-prominent");
+    expect(chip.className).not.toContain("stg:rounded-lg");
+    expect(chip.className).not.toContain("stg:border-border-prominent");
 
     fireEvent.click(screen.getByText("Read 2 files"));
 
-    // The chip is the card; its child rows are dividers, never nested cards.
+    // With no card frame, the rail container owns the boundary; child rows
+    // are dividers, never nested cards.
+    expect(container.querySelector(".stg\\:border-l-2")).not.toBeNull();
     const rows = container.querySelectorAll('[data-cursor-target="tool-call-row"]');
     expect(rows.length).toBe(2);
     for (const row of rows) {
@@ -146,6 +154,30 @@ describe("ToolRunGroup", () => {
     }
   });
 
+  it("renders no status icon once the run settles successfully — success is silent", () => {
+    const { container } = render(
+      <ToolRunGroup
+        category="read"
+        toolCalls={[makeRead("r1", "/a.ts"), makeRead("r2", "/b.ts")]}
+      />,
+    );
+    // Header svgs: the category icon and the chevron — no green check.
+    expect(container.querySelectorAll("button svg").length).toBe(2);
+  });
+
+  it("keeps the failed icon when a folded call failed — failure shouts", () => {
+    const { container } = render(
+      <ToolRunGroup
+        category="read"
+        toolCalls={[
+          makeRead("r1", "/a.ts"),
+          makeRead("r2", "/b.ts", ToolCallStatus.TOOL_CALL_FAILED),
+        ]}
+      />,
+    );
+    expect(container.querySelector(".stg\\:text-destructive")).not.toBeNull();
+  });
+
   it("honours a custom label formatter", () => {
     render(
       <ToolRunGroup

package/src/execution/__tests__/intent-title.test.tsx

@@ -0,0 +1,221 @@
+/**
+ * Model-authored intent titles for shell tool calls (stigmer#276).
+ *
+ * The extraction contract is pinned by the cross-surface fixture
+ * test/fixtures/tool-view/intent-title.json — the same file the runner's
+ * tool-intent middleware tests assert against, so the wire key and the
+ * kind-scoping can never drift between the writer and the readers.
+ */
+
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { renderHook } from "@testing-library/react";
+import { create, type JsonObject } from "@bufbuild/protobuf";
+import {
+  ToolCallSchema,
+  type ToolCall,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { PendingApprovalSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
+import { ToolCallStatus, ToolKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import {
+  extractShellIntent,
+  extractShellIntentFromPreview,
+  SHELL_INTENT_ARG_FIELD,
+} from "../tool-categories";
+import { useToolPresentation, registerToolPresenter } from "../tool-presenter";
+import { ToolCallItem } from "../ToolCallItem";
+import { ApprovalCardHeader } from "../ApprovalCard";
+
+afterEach(cleanup);
+
+const here = dirname(fileURLToPath(import.meta.url));
+const fixturePath = resolve(here, "../../../../../test/fixtures/tool-view/intent-title.json");
+
+interface IntentFixture {
+  argField: string;
+  cases: Array<{
+    name: string;
+    mcpServerSlug: string;
+    args: Record<string, unknown>;
+    intent: string | null;
+  }>;
+}
+
+const fixture = JSON.parse(readFileSync(fixturePath, "utf8")) as IntentFixture;
+
+function makeToolCall(opts: {
+  name: string;
+  args?: Record<string, unknown>;
+  mcpServerSlug?: string;
+  status?: ToolCallStatus;
+}): ToolCall {
+  return create(ToolCallSchema, {
+    id: opts.name,
+    name: opts.name,
+    args: (opts.args ?? {}) as JsonObject,
+    mcpServerSlug: opts.mcpServerSlug ?? "",
+    status: opts.status ?? ToolCallStatus.TOOL_CALL_COMPLETED,
+  });
+}
+
+describe("intent-title fixture contract", () => {
+  it("pins the wire key shared with the runner middleware", () => {
+    expect(SHELL_INTENT_ARG_FIELD).toBe(fixture.argField);
+  });
+
+  it.each(fixture.cases.map((c, i) => [i, c] as const))(
+    "case %#: %j",
+    (_i, c) => {
+      const tc = makeToolCall({
+        name: c.name,
+        args: c.args,
+        mcpServerSlug: c.mcpServerSlug,
+      });
+      expect(extractShellIntent(tc)).toBe(c.intent);
+    },
+  );
+});
+
+describe("extractShellIntentFromPreview", () => {
+  it("mirrors the ToolCall extraction on a JSON args preview", () => {
+    expect(
+      extractShellIntentFromPreview(
+        "execute",
+        JSON.stringify({ command: "make check", [SHELL_INTENT_ARG_FIELD]: "Verify the build" }),
+      ),
+    ).toBe("Verify the build");
+  });
+
+  it("prefers the denormalized wire kind over the name", () => {
+    // A shell tool whose NAME the classifier does not recognize still
+    // resolves via the wire kind — matching extractPrimaryArgFromPreview.
+    expect(
+      extractShellIntentFromPreview(
+        "custom_runner",
+        JSON.stringify({ command: "ls", [SHELL_INTENT_ARG_FIELD]: "List files" }),
+        "",
+        ToolKind.SHELL,
+      ),
+    ).toBe("List files");
+  });
+
+  it("returns null for malformed previews and non-shell kinds", () => {
+    expect(extractShellIntentFromPreview("execute", "not json{")).toBeNull();
+    expect(extractShellIntentFromPreview("execute", "")).toBeNull();
+    expect(
+      extractShellIntentFromPreview(
+        "read_file",
+        JSON.stringify({ file_path: "a", [SHELL_INTENT_ARG_FIELD]: "x" }),
+      ),
+    ).toBeNull();
+  });
+});
+
+describe("useToolPresentation title precedence", () => {
+  it("titles a shell row with the model-authored intent", () => {
+    const tc = makeToolCall({
+      name: "Shell",
+      args: { command: "npm test", [SHELL_INTENT_ARG_FIELD]: "Run the test suite" },
+    });
+    const { result } = renderHook(() => useToolPresentation(tc));
+
+    expect(result.current.intent).toBe("Run the test suite");
+    expect(result.current.title).toBe("Run the test suite");
+    // The short kind label is unchanged — chips and badges keep "Shell".
+    expect(result.current.label).toBe("Shell");
+  });
+
+  it("falls back to the category label when no intent is present", () => {
+    const tc = makeToolCall({ name: "Shell", args: { command: "ls" } });
+    const { result } = renderHook(() => useToolPresentation(tc));
+
+    expect(result.current.intent).toBeNull();
+    expect(result.current.title).toBe("Shell");
+  });
+
+  it("a registered presenter label override outranks the intent", () => {
+    const dispose = registerToolPresenter(ToolKind.SHELL, {
+      label: () => "Run command",
+    });
+    try {
+      const tc = makeToolCall({
+        name: "Shell",
+        args: { command: "ls", [SHELL_INTENT_ARG_FIELD]: "List files" },
+      });
+      const { result } = renderHook(() => useToolPresentation(tc));
+
+      expect(result.current.title).toBe("Run command");
+      expect(result.current.intent).toBe("List files");
+    } finally {
+      dispose();
+    }
+  });
+});
+
+describe("ToolCallItem shell header", () => {
+  function headerOf(container: HTMLElement): Element {
+    const row = container.querySelector('[data-cursor-target="tool-call-row"]')!;
+    return row.firstElementChild!;
+  }
+
+  it("renders the intent as the title and the command as the subtitle", () => {
+    const tc = makeToolCall({
+      name: "Shell",
+      args: {
+        command: "npx vitest run src/parser",
+        [SHELL_INTENT_ARG_FIELD]: "Run unit tests for the parser",
+      },
+    });
+    const { container } = render(<ToolCallItem toolCall={tc} />);
+
+    const header = headerOf(container);
+    expect(header.textContent).toContain("Run unit tests for the parser");
+    expect(header.textContent).toContain("npx vitest run src/parser");
+    expect(header.textContent).not.toContain("Shell");
+  });
+
+  it("renders an intent-less shell row exactly as before: bare label, no subtitle", () => {
+    const tc = makeToolCall({
+      name: "Shell",
+      args: { command: "ls -la" },
+    });
+    const { container } = render(<ToolCallItem toolCall={tc} />);
+
+    const header = headerOf(container);
+    expect(header.textContent).toContain("Shell");
+    // The command lives in the terminal body only — never in the header.
+    expect(header.textContent).not.toContain("ls -la");
+  });
+});
+
+describe("ApprovalCardHeader shell title", () => {
+  it("titles a gated shell call with the intent phrase", () => {
+    const pending = create(PendingApprovalSchema, {
+      toolCallId: "tc-1",
+      toolName: "execute",
+      toolKind: ToolKind.SHELL,
+      argsPreview: JSON.stringify({
+        command: "rm -rf build",
+        [SHELL_INTENT_ARG_FIELD]: "Clean the build directory",
+      }),
+    });
+    render(<ApprovalCardHeader pendingApproval={pending} />);
+
+    expect(screen.getByText("Clean the build directory")).toBeDefined();
+  });
+
+  it("keeps the bare category label when no intent is present", () => {
+    const pending = create(PendingApprovalSchema, {
+      toolCallId: "tc-2",
+      toolName: "execute",
+      toolKind: ToolKind.SHELL,
+      argsPreview: JSON.stringify({ command: "rm -rf build" }),
+    });
+    render(<ApprovalCardHeader pendingApproval={pending} />);
+
+    expect(screen.getByText("Shell")).toBeDefined();
+  });
+});