@stigmer/react 3.0.9-dev.20260615153829 → 3.1.0

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { TerminalSession } from "../TerminalSession";
+import { SandboxContext } from "../SandboxContext";
+
+afterEach(cleanup);
+
+describe("TerminalSession", () => {
+  it("renders one session: the $ command prompt line then its output", () => {
+    const { container } = render(
+      <TerminalSession command="echo hello" stdout="hello world" exitCode={0} />,
+    );
+    const session = container.querySelector(
+      '[data-cursor-target="terminal-session"]',
+    );
+    expect(session).toBeTruthy();
+    expect(session!.textContent).toContain("$ echo hello");
+    expect(session!.textContent).toContain("hello world");
+  });
+
+  it("shows no exit badge on success", () => {
+    const { container } = render(
+      <TerminalSession command="true" stdout="" exitCode={0} />,
+    );
+    expect(container.textContent).not.toContain("exit 0");
+  });
+
+  it("shows an exit badge and an sr-only status on failure", () => {
+    render(<TerminalSession command="false" stdout="" exitCode={2} />);
+    // The visible badge.
+    expect(screen.getByText("exit 2")).toBeTruthy();
+    // The accessible status (screen-reader text).
+    expect(screen.getByText("Command exited with code 2")).toBeTruthy();
+  });
+
+  it("renders stderr in the destructive color", () => {
+    render(<TerminalSession command="oops" stderr="bad things" exitCode={1} />);
+    const stderr = screen.getByText("bad things");
+    expect(stderr.className).toContain("text-destructive");
+  });
+
+  it("preserves a multi-line (heredoc) command in full", () => {
+    const command = "cat > f << EOF\nline one\nline two\nEOF";
+    const { container } = render(<TerminalSession command={command} />);
+    expect(container.textContent).toContain("line one");
+    expect(container.textContent).toContain("line two");
+    // A long command must NOT grow its own truncation toggle (only output does).
+    expect(screen.queryByText(/Show all \d+ lines/)).toBeNull();
+  });
+
+  it("supports a command-only render (the pre-execution gate)", () => {
+    const { container } = render(<TerminalSession command="npm test" />);
+    expect(container.textContent).toContain("$ npm test");
+    // No output, no failure badge.
+    expect(container.textContent).not.toMatch(/exit \d+/);
+  });
+
+  it("normalizes absolute sandbox paths to workspace-relative for display", () => {
+    const { container } = render(
+      <SandboxContext.Provider value={{ sandboxWorkspaceRoot: "/home/daytona/workspace" }}>
+        <TerminalSession
+          command="ls /home/daytona/workspace/src"
+          stdout="/home/daytona/workspace/src/a.ts"
+        />
+      </SandboxContext.Provider>,
+    );
+    // The absolute root is stripped; the relative remainder is shown.
+    expect(container.textContent).not.toContain("/home/daytona/workspace/");
+    expect(container.textContent).toContain("$ ls src");
+    expect(container.textContent).toContain("src/a.ts");
+  });
+});

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

@@ -0,0 +1,102 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, fireEvent, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  TodoItemSchema,
+  type TodoItem,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
+import { TodoStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { TodoCard, todoCardPropsEqual } from "../TodoCard";
+
+afterEach(cleanup);
+
+function todo(id: string, content: string, status: TodoStatus): TodoItem {
+  return create(TodoItemSchema, { id, content, status });
+}
+
+function map(items: TodoItem[]): { [id: string]: TodoItem } {
+  const m: { [id: string]: TodoItem } = {};
+  for (const t of items) m[t.id] = t;
+  return m;
+}
+
+const ACTIVE = map([
+  todo("t1", "Design the card", TodoStatus.TODO_COMPLETED),
+  todo("t2", "Wire the thread", TodoStatus.TODO_IN_PROGRESS),
+  todo("t3", "Write tests", TodoStatus.TODO_PENDING),
+]);
+
+const DONE = map([
+  todo("t1", "Design the card", TodoStatus.TODO_COMPLETED),
+  todo("t2", "Wire the thread", TodoStatus.TODO_COMPLETED),
+]);
+
+describe("TodoCard", () => {
+  it("renders an 'Agent to-dos' region with the To-dos header and progress", () => {
+    const { container } = render(<TodoCard todos={ACTIVE} />);
+
+    const region = container.querySelector("[role='region']") as HTMLElement;
+    expect(region).toBeTruthy();
+    expect(region.getAttribute("aria-label")).toBe("Agent to-dos");
+    expect(region.textContent).toContain("To-dos");
+    // 1 of 3 completed.
+    expect(region.textContent).toContain("1/3 completed");
+  });
+
+  it("renders nothing when there are no todos", () => {
+    const { container } = render(<TodoCard todos={{}} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("is expanded while the plan is active (an item is in progress)", () => {
+    const { container } = render(<TodoCard todos={ACTIVE} />);
+
+    const button = container.querySelector("button")!;
+    expect(button.getAttribute("aria-expanded")).toBe("true");
+    // The task list is visible.
+    expect(container.querySelector("[role='list']")).toBeTruthy();
+    expect(container.textContent).toContain("Wire the thread");
+  });
+
+  it("is collapsed by default once the plan is fully resolved (history)", () => {
+    const { container } = render(<TodoCard todos={DONE} />);
+
+    const button = container.querySelector("button")!;
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    // The list is not rendered while collapsed.
+    expect(container.querySelector("[role='list']")).toBeNull();
+  });
+
+  it("toggles the list open/closed on header click", () => {
+    const { container } = render(<TodoCard todos={DONE} />);
+    const button = container.querySelector("button")!;
+
+    expect(container.querySelector("[role='list']")).toBeNull();
+    fireEvent.click(button);
+    expect(button.getAttribute("aria-expanded")).toBe("true");
+    expect(container.querySelector("[role='list']")).toBeTruthy();
+
+    fireEvent.click(button);
+    expect(button.getAttribute("aria-expanded")).toBe("false");
+    expect(container.querySelector("[role='list']")).toBeNull();
+  });
+});
+
+describe("todoCardPropsEqual (React.memo comparator)", () => {
+  it("treats the same todos reference as equal (skips re-render)", () => {
+    expect(todoCardPropsEqual({ todos: ACTIVE }, { todos: ACTIVE })).toBe(true);
+  });
+
+  it("treats a different todos reference as not equal (re-renders)", () => {
+    expect(todoCardPropsEqual({ todos: ACTIVE }, { todos: DONE })).toBe(false);
+  });
+
+  it("treats a className change as not equal", () => {
+    expect(
+      todoCardPropsEqual(
+        { todos: ACTIVE, className: "a" },
+        { todos: ACTIVE, className: "b" },
+      ),
+    ).toBe(false);
+  });
+});

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

@@ -0,0 +1,48 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { ToolArgsView } from "../ToolArgsView";
+
+afterEach(cleanup);
+
+// The file-tool args view captions write/edit content with a path. When an
+// ancestor already names the file (the approval gate header), showFileName=false
+// drops that redundant path while keeping the decision-relevant content.
+describe("ToolArgsView file tools", () => {
+  it("shows the path and content by default for a write", () => {
+    render(
+      <ToolArgsView
+        toolName="write_file"
+        args={{ path: "src/a.ts", contents: "hi" }}
+      />,
+    );
+    expect(screen.getByText("a.ts")).toBeTruthy();
+    expect(screen.getByText("Content")).toBeTruthy();
+  });
+
+  it("suppresses the redundant path but keeps the content when showFileName is false", () => {
+    render(
+      <ToolArgsView
+        toolName="write_file"
+        args={{ path: "src/a.ts", contents: "hi" }}
+        showFileName={false}
+      />,
+    );
+    expect(screen.queryByText("a.ts")).toBeNull();
+    expect(screen.getByText("Content")).toBeTruthy();
+  });
+});
+
+// The pre-execution (approval gate) shell view shows the command in the same
+// terminal-session chrome the completed call uses — there is no output yet.
+describe("ToolArgsView shell", () => {
+  it("renders the command as a terminal session prompt line", () => {
+    const { container } = render(
+      <ToolArgsView toolName="shell" args={{ command: "ls -la" }} />,
+    );
+    const session = container.querySelector(
+      '[data-cursor-target="terminal-session"]',
+    );
+    expect(session).toBeTruthy();
+    expect(session!.textContent).toContain("$ ls -la");
+  });
+});

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

@@ -0,0 +1,195 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } 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 {
+  ApprovalPolicySource,
+  ToolKind,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ToolCallDetail } from "../ToolCallDetail";
+
+afterEach(cleanup);
+
+function makeToolCall(opts: {
+  name: string;
+  toolKind?: ToolKind;
+  args?: Record<string, unknown>;
+  result?: string;
+  approvalPolicySource?: ApprovalPolicySource;
+  startedAt?: string;
+  completedAt?: string;
+}): ToolCall {
+  return create(ToolCallSchema, {
+    id: opts.name,
+    name: opts.name,
+    toolKind: opts.toolKind ?? ToolKind.UNSPECIFIED,
+    args: (opts.args ?? {}) as JsonObject,
+    result: opts.result ?? "",
+    approvalPolicySource:
+      opts.approvalPolicySource ?? ApprovalPolicySource.UNSPECIFIED,
+    startedAt: opts.startedAt ?? "",
+    completedAt: opts.completedAt ?? "",
+  });
+}
+
+describe("ToolCallDetail — metadata invariant (header owns it, body shows content)", () => {
+  it("does not render the duration in the body (the owning row header shows it)", () => {
+    // A 5s run would format as "5.0s" if the body still printed duration.
+    const { container } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "delete_file",
+          toolKind: ToolKind.FILE_DELETE,
+          args: { path: "/tmp/x.ts" },
+          startedAt: "2026-01-01T00:00:00.000Z",
+          completedAt: "2026-01-01T00:00:05.000Z",
+        })}
+      />,
+    );
+    expect(container.textContent).not.toContain("5.0s");
+  });
+
+  it("suppresses the everyday default provenance (built-in tool policy is noise)", () => {
+    const { queryByText } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "delete_file",
+          toolKind: ToolKind.FILE_DELETE,
+          args: { path: "/tmp/x.ts" },
+          approvalPolicySource: ApprovalPolicySource.BUILTIN_CATEGORY,
+        })}
+      />,
+    );
+    expect(queryByText(/required by/)).toBeNull();
+  });
+
+  it("suppresses provenance entirely for a legacy/ungated UNSPECIFIED call", () => {
+    const { queryByText } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "delete_file",
+          toolKind: ToolKind.FILE_DELETE,
+          args: { path: "/tmp/x.ts" },
+          approvalPolicySource: ApprovalPolicySource.UNSPECIFIED,
+        })}
+      />,
+    );
+    expect(queryByText(/required by/)).toBeNull();
+    expect(queryByText(/auto-approved/)).toBeNull();
+  });
+
+  it("surfaces a genuinely informative provenance (a run lease that cleared the call)", () => {
+    const { getByText } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "delete_file",
+          toolKind: ToolKind.FILE_DELETE,
+          args: { path: "/tmp/x.ts" },
+          approvalPolicySource: ApprovalPolicySource.APPROVAL_LEASE,
+        })}
+      />,
+    );
+    expect(getByText("auto-approved by a run lease")).toBeTruthy();
+  });
+});
+
+describe("ToolCallDetail — search body de-duplicates the query", () => {
+  it("does not restate the query (no 'Pattern:' row) when the header shows it in full", () => {
+    const { container } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "Grep",
+          toolKind: ToolKind.SEARCH,
+          args: { pattern: "pipeline" },
+          result:
+            '{"workspaceResults":{"/work/demo":{"type":"files","output":{"files":[],"count":0}}}}',
+        })}
+        // Header did not truncate the short query.
+        primaryArgTruncated={false}
+      />,
+    );
+    // The legacy duplicate label is gone, and the short query is not repeated.
+    expect(container.textContent).not.toContain("Pattern:");
+    expect(container.textContent).not.toContain("pipeline");
+    // The result still renders its (empty) state honestly.
+    expect(container.textContent).toContain("No files found");
+  });
+
+  it("unwraps the real {status,value:{workspaceResults}} grep result instead of dumping JSON", () => {
+    const { container } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "Grep",
+          toolKind: ToolKind.SEARCH,
+          args: { pattern: "pipeline" },
+          result:
+            '{"status":"success","value":{"workspaceResults":{"/work/demo":{"type":"files","output":{"files":[],"count":0}}}}}',
+        })}
+      />,
+    );
+    // The body renders the empty state, never the raw envelope keys.
+    expect(container.textContent).toContain("No files found");
+    expect(container.textContent).not.toContain("workspaceResults");
+    expect(container.textContent).not.toContain("status");
+  });
+
+  it("does not restate the result count in the body (the row header shows it)", () => {
+    const { container } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "Glob",
+          toolKind: ToolKind.SEARCH,
+          args: { pattern: "Dockerfile" },
+          result:
+            '{"status":"success","value":{"files":["Dockerfile"],"totalFiles":1,"clientTruncated":false,"ripgrepTruncated":false}}',
+        })}
+      />,
+    );
+    // The matched file renders, but the redundant "1 file" count does not.
+    expect(container.textContent).toContain("Dockerfile");
+    expect(container.textContent).not.toContain("1 file");
+  });
+
+  it("restates the full query (labeled 'Query') only when the header truncated it", () => {
+    const longQuery =
+      "a-very-long-search-query-that-would-not-fit-in-the-header-subtitle";
+    const { container } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "Grep",
+          toolKind: ToolKind.SEARCH,
+          args: { pattern: longQuery },
+          result:
+            '{"workspaceResults":{"/work/demo":{"type":"files","output":{"files":[],"count":0}}}}',
+        })}
+        primaryArgTruncated
+      />,
+    );
+    expect(container.textContent).toContain("Query");
+    expect(container.textContent).toContain(longQuery);
+  });
+});
+
+describe("ToolCallDetail — edit body has no duplicate stats", () => {
+  it("renders the edit diff as a table without restating the +N -M counts", () => {
+    const { container } = render(
+      <ToolCallDetail
+        toolCall={makeToolCall({
+          name: "str_replace",
+          toolKind: ToolKind.FILE_EDIT,
+          args: { path: "src/x.ts" },
+          result:
+            '{"status":"success","value":{"linesAdded":1,"linesRemoved":0,"diffString":"@@ -0,0 +1,1 @@\\n+new line"}}',
+        })}
+      />,
+    );
+    // The diff content renders through the table...
+    expect(container.querySelector("table")).not.toBeNull();
+    expect(container.textContent).toContain("new line");
+    // ...but the body does not repeat the +N -M the row header already shows.
+    expect(container.textContent).not.toContain("+1");
+  });
+});

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

@@ -0,0 +1,132 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } 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 { ToolCallStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ToolCallGroup } from "../ToolCallGroup";
+
+afterEach(cleanup);
+
+function makeToolCall(name: string, id: string, args: Record<string, unknown>, result = ""): ToolCall {
+  return create(ToolCallSchema, {
+    id,
+    name,
+    args: args as JsonObject,
+    result,
+    status: ToolCallStatus.TOOL_CALL_COMPLETED,
+  });
+}
+
+describe("ToolCallGroup timeline", () => {
+  it("keeps a completed turn's high-signal rows visible (no per-turn collapse)", () => {
+    render(
+      <ToolCallGroup
+        toolCalls={[
+          makeToolCall("Shell", "s1", { command: "echo hi" }, "hi"),
+          makeToolCall("StrReplace", "e1", { path: "/a.ts", old_string: "a", new_string: "b" }),
+        ]}
+      />,
+    );
+
+    // Both rows persist after the turn settles — nothing hidden behind a pill.
+    expect(screen.getByText("echo hi")).toBeTruthy();
+    // The edit row shows its file (filename-first) in the row header and its
+    // bounded diff preview below.
+    expect(screen.getAllByText("a.ts").length).toBeGreaterThanOrEqual(1);
+    // There is no aggregate "Ran N tools" trigger any more.
+    expect(screen.queryByText(/Ran \d+ tool/)).toBeNull();
+  });
+
+  it("folds a run of consecutive reads into one chip while leaving other rows", () => {
+    render(
+      <ToolCallGroup
+        toolCalls={[
+          makeToolCall("Shell", "s1", { command: "echo hi" }, "hi"),
+          makeToolCall("Read", "r1", { path: "/a.ts" }),
+          makeToolCall("Read", "r2", { path: "/b.ts" }),
+          makeToolCall("Read", "r3", { path: "/c.ts" }),
+        ]}
+      />,
+    );
+
+    // The shell stays a row; the three reads collapse into a single chip.
+    expect(screen.getByText("echo hi")).toBeTruthy();
+    expect(screen.getByText("Read 3 files")).toBeTruthy();
+    // Folded read paths are hidden until the chip is expanded.
+    expect(screen.queryByText("/a.ts")).toBeNull();
+  });
+
+  it("renders a lone read as its own row, not a chip", () => {
+    render(
+      <ToolCallGroup toolCalls={[makeToolCall("Read", "r1", { path: "/only.ts" })]} />,
+    );
+
+    expect(screen.getByText("only.ts")).toBeTruthy();
+    expect(screen.queryByText(/Read \d+ files/)).toBeNull();
+  });
+
+  it("hides a runner-collapsed duplicate twin (blanked SKIPPED) so one resource renders one card", () => {
+    // The runner overlays the first same-resource denial as the gate and collapses
+    // the redundant twin in place to a content-less SKIPPED row (it cannot drop the
+    // committed id). That blanked twin must not render a second card.
+    const gate = makeToolCall("edit", "stream-1", { path: "/notes.md", old_string: "a", new_string: "b" });
+    gate.status = ToolCallStatus.TOOL_CALL_WAITING_APPROVAL;
+    gate.requiresApproval = true;
+
+    const collapsedTwin = create(ToolCallSchema, {
+      id: "stream-2",
+      name: "edit",
+      // Blanked exactly as collapseDenialTwin leaves it: SKIPPED, no approval, no
+      // result/error/argsPreview/file_changes.
+      status: ToolCallStatus.TOOL_CALL_SKIPPED,
+      requiresApproval: false,
+    });
+
+    const { container } = render(<ToolCallGroup toolCalls={[gate, collapsedTwin]} />);
+
+    // Exactly one row — the gate; the collapsed twin is not drawn.
+    const rows = container.querySelectorAll('[data-cursor-target="tool-call-row"]');
+    expect(rows.length).toBe(1);
+    expect(container.querySelector('[data-cursor-target="tool-call-group"]')).toBeTruthy();
+  });
+
+  it("renders nothing when every tool call in the group is a collapsed twin", () => {
+    const collapsedTwin = create(ToolCallSchema, {
+      id: "stream-2",
+      name: "edit",
+      status: ToolCallStatus.TOOL_CALL_SKIPPED,
+      requiresApproval: false,
+    });
+
+    const { container } = render(<ToolCallGroup toolCalls={[collapsedTwin]} />);
+    expect(container.querySelector('[data-cursor-target="tool-call-group"]')).toBeNull();
+  });
+
+  it("stacks each tool call as its own bordered card with gaps (no left rail)", () => {
+    const { container } = render(
+      <ToolCallGroup
+        toolCalls={[
+          makeToolCall("Shell", "s1", { command: "echo hi" }, "hi"),
+          makeToolCall("StrReplace", "e1", { path: "/a.ts", old_string: "a", new_string: "b" }),
+        ]}
+      />,
+    );
+
+    const group = container.querySelector('[data-cursor-target="tool-call-group"]')!;
+    // Cards stacked with a gap — the old left rail is gone.
+    expect(group.className).toContain("gap-2");
+    expect(group.className).not.toContain("border-l-2");
+
+    const rows = container.querySelectorAll('[data-cursor-target="tool-call-row"]');
+    expect(rows.length).toBe(2);
+    for (const row of rows) {
+      expect(row.className).toContain("rounded-lg");
+      // Class presence only — actual rendering is guarded by the layer-invariant
+      // + e2e computed-style tests (happy-dom does not resolve `@layer`).
+      expect(row.className).toContain("border-border-prominent");
+    }
+  });
+});