@stigmer/react 3.12.0 → 3.12.2

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

@@ -957,3 +957,100 @@ describe("MessageThread", () => {
     });
   });
 });
+
+// ---------------------------------------------------------------------------
+// Ambient liveness status line (stigmer#277)
+// ---------------------------------------------------------------------------
+
+describe("MessageThread liveness status line", () => {
+  const LINE = '[data-cursor-target="liveness-status-line"]';
+
+  it("anchors the thread's tail while the execution is live between visible events", () => {
+    // IN_PROGRESS, has responded (AI content), no running tool, no gate —
+    // the model-generation gap where the screen would otherwise be still.
+    const active = makeExecution({
+      id: "exec-live",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+      aiContent: "Let me look around.",
+    });
+    const { container } = render(
+      <MessageThread executions={[]} activeStreamExecution={active} />,
+    );
+    expect(container.querySelector(LINE)).not.toBeNull();
+  });
+
+  it("yields to a running tool call — that row carries the live signal", () => {
+    const active = makeExecution({
+      id: "exec-tool",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+      aiContent: "Running a command.",
+    });
+    const runningTool = create(ToolCallSchema, {
+      id: "tc-run",
+      name: "Shell",
+      args: { command: "sleep 5" },
+      status: ToolCallStatus.TOOL_CALL_RUNNING,
+    });
+    active.status!.messages[1].toolCalls = [runningTool];
+
+    const { container } = render(
+      <MessageThread executions={[]} activeStreamExecution={active} />,
+    );
+    expect(container.querySelector(LINE)).toBeNull();
+  });
+
+  it("yields to a pending approval — shimmering 'Working…' at a gate would lie", () => {
+    const active = makeExecutionWithApproval("exec-gated", "tc-1", "write_file");
+    const { container } = render(
+      <MessageThread
+        executions={[]}
+        activeStreamExecution={active}
+        onApprovalSubmit={() => {}}
+      />,
+    );
+    expect(container.querySelector(LINE)).toBeNull();
+  });
+
+  it("disappears the moment the execution settles — phase-driven, never stream-inferred", () => {
+    const done = makeExecution({
+      id: "exec-done",
+      phase: ExecutionPhase.EXECUTION_COMPLETED,
+      aiContent: "All set.",
+    });
+    const { container } = render(
+      <MessageThread executions={[done]} activeStreamExecution={null} />,
+    );
+    expect(container.querySelector(LINE)).toBeNull();
+  });
+
+  it("leaves the pre-first-content window to the setup placeholder", () => {
+    const active = makeExecution({
+      id: "exec-fresh",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+    });
+    // No AI content, no tool calls: hasStartedResponding is false.
+    active.status!.messages = [active.status!.messages[0]];
+
+    const { container } = render(
+      <MessageThread executions={[]} activeStreamExecution={active} />,
+    );
+    expect(container.querySelector(LINE)).toBeNull();
+    // The synthetic "Thinking…" setup placeholder owns this window.
+    expect(screen.getByText("Thinking\u2026")).toBeTruthy();
+  });
+
+  it("carries the shared shimmer treatment on its label", () => {
+    const active = makeExecution({
+      id: "exec-live",
+      phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
+      aiContent: "Let me look around.",
+    });
+    const { container } = render(
+      <MessageThread executions={[]} activeStreamExecution={active} />,
+    );
+    const line = container.querySelector(LINE)!;
+    expect(line.querySelector(".stgm-shimmer-label")?.textContent).toBe(
+      "Working\u2026",
+    );
+  });
+});

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, afterEach } from "vitest";
 import { render, screen, cleanup } from "@testing-library/react";
-import { TerminalSession } from "../TerminalSession";
+import { TerminalSession, TerminalTail } from "../TerminalSession";
 import { SandboxContext } from "../SandboxContext";
 
 afterEach(cleanup);
@@ -70,3 +70,73 @@ describe("TerminalSession", () => {
     expect(container.textContent).toContain("src/a.ts");
   });
 });
+
+describe("TerminalTail", () => {
+  it("keeps the command at full contrast and dims the output tail", () => {
+    const { container } = render(
+      <TerminalTail command="echo hi" stdout="hi" exitCode={0} />,
+    );
+    const tail = container.querySelector('[data-cursor-target="terminal-tail"]')!;
+    expect(tail.textContent).toContain("$ echo hi");
+    // Intent keeps reading contrast; the tail is one step below it.
+    expect(screen.getByText(/echo hi/).className).toContain("stg:text-foreground");
+    expect(screen.getByText("hi").className).toContain("stg:text-muted-foreground");
+  });
+
+  it("shows only the last lines, with an honest hidden-line count", () => {
+    const stdout = ["one", "two", "three", "four", "five"].join("\n");
+    const { container } = render(<TerminalTail command="seq 5" stdout={stdout} />);
+    const tail = container.querySelector('[data-cursor-target="terminal-tail"]')!;
+    expect(tail.textContent).toContain("three");
+    expect(tail.textContent).toContain("five");
+    expect(tail.textContent).not.toContain("one");
+    expect(tail.textContent).toContain("… +2 lines");
+  });
+
+  it("omits the hidden-count marker when everything fits", () => {
+    const { container } = render(
+      <TerminalTail command="pwd" stdout="/work\nok" />,
+    );
+    expect(container.textContent).not.toContain("+");
+    expect(container.textContent).toContain("/work");
+    expect(container.textContent).toContain("ok");
+  });
+
+  it("appends stderr after stdout in the combined tail", () => {
+    const { container } = render(
+      <TerminalTail command="build" stdout="step 1\nstep 2" stderr="warning: slow" />,
+    );
+    const tail = container.querySelector('[data-cursor-target="terminal-tail"]')!;
+    // Last three of the combined stream: step 1, step 2, warning.
+    expect(tail.textContent).toContain("step 2");
+    expect(tail.textContent).toContain("warning: slow");
+  });
+
+  it("keeps the exit badge when a failed session is shown collapsed", () => {
+    render(<TerminalTail command="false" stdout="boom" exitCode={2} />);
+    expect(screen.getByText("exit 2")).toBeTruthy();
+    expect(screen.getByText("Command exited with code 2")).toBeTruthy();
+  });
+
+  it("ignores a trailing newline when slicing the tail", () => {
+    const { container } = render(
+      <TerminalTail command="x" stdout={"a\nb\nc\nd\n"} />,
+    );
+    const tail = container.querySelector('[data-cursor-target="terminal-tail"]')!;
+    expect(tail.textContent).toContain("d");
+    expect(tail.textContent).toContain("… +1 line");
+  });
+
+  it("normalizes absolute sandbox paths like the full session", () => {
+    const { container } = render(
+      <SandboxContext.Provider value={{ sandboxWorkspaceRoot: "/home/daytona/workspace" }}>
+        <TerminalTail
+          command="ls /home/daytona/workspace/src"
+          stdout="/home/daytona/workspace/src/a.ts"
+        />
+      </SandboxContext.Provider>,
+    );
+    expect(container.textContent).not.toContain("/home/daytona/workspace/");
+    expect(container.textContent).toContain("$ ls src");
+  });
+});

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

@@ -28,7 +28,9 @@ vi.mock("../useFileChangeContent", () => ({
   useFileChangeContent: () => mockContent,
 }));
 
-const { ToolCallDetail } = await import("../ToolCallDetail");
+const { ToolCallDetail, formatDuration, formatHeaderDuration } = await import(
+  "../ToolCallDetail"
+);
 const { FileReviewContext } = await import("../FileReviewContext");
 
 beforeEach(() => {
@@ -379,3 +381,33 @@ describe("ToolCallDetail — write body", () => {
     expect(container.querySelector(CLAMP)).not.toBeNull();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Duration formatting — the exact helper vs the >= 1s header-chip variant
+// ---------------------------------------------------------------------------
+
+describe("formatHeaderDuration", () => {
+  const T0 = "2026-08-13T10:00:00.000Z";
+  const at = (ms: number) => new Date(Date.parse(T0) + ms).toISOString();
+
+  it("suppresses sub-second durations that formatDuration would render", () => {
+    // The exact helper keeps its public contract...
+    expect(formatDuration(T0, at(400))).toBe("400ms");
+    // ...while the header-chip variant treats the same span as noise.
+    expect(formatHeaderDuration(T0, at(400))).toBeNull();
+  });
+
+  it("passes through everything from one second up, exactly as formatDuration renders it", () => {
+    const cases = [1000, 2500, 61_000, 180_000];
+    for (const ms of cases) {
+      expect(formatHeaderDuration(T0, at(ms))).toBe(formatDuration(T0, at(ms)));
+      expect(formatHeaderDuration(T0, at(ms))).not.toBeNull();
+    }
+  });
+
+  it("stays null for missing or invalid timestamps, like the exact helper", () => {
+    expect(formatHeaderDuration("", at(400))).toBeNull();
+    expect(formatHeaderDuration(T0, "")).toBeNull();
+    expect(formatHeaderDuration("not-a-date", at(2000))).toBeNull();
+  });
+});

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