@stigmer/react 3.0.9-dev.20260616060535 → 3.1.0

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

@@ -0,0 +1,134 @@
+/**
+ * FileReviewDock — the composer-docked decision surface for pending file
+ * reviews. These tests cover the dock's own responsibilities: emptiness,
+ * per-set submit binding, error threading, the defensive multi-set stack, and
+ * the height-capped scroll container. Decision-case behavior (per-file
+ * verdicts, binary acknowledgment, blocked files) lives in the FileReviewCard
+ * suites — the dock renders the same card in list mode.
+ */
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import {
+  CapturedFileChangeSchema,
+  FileChangeSetSchema,
+  type FileChangeSet,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
+import { FileContentSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import {
+  DiffCompleteness,
+  FileChangeKind,
+  FileChangeSetStatus,
+  FileDecisionAction,
+  FileDecisionScope,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { FileReviewDock } from "../FileReviewDock";
+
+function changeSet(id: string, paths: string[]): FileChangeSet {
+  return create(FileChangeSetSchema, {
+    id,
+    status: FileChangeSetStatus.AWAITING_REVIEW,
+    aggregateDigest: `agg-${id}`,
+    diffCompleteness: DiffCompleteness.COMPLETE,
+    changes: paths.map((path) =>
+      create(CapturedFileChangeSchema, {
+        id: `${id}:${path}`,
+        pathBefore: path,
+        pathAfter: path,
+        kind: FileChangeKind.MODIFY,
+        before: create(FileContentSchema, { body: { case: "inline", value: "old\n" } }),
+        after: create(FileContentSchema, { body: { case: "inline", value: "new\n" } }),
+        fileDigest: `d-${path}`,
+        diffComplete: true,
+      }),
+    ),
+  });
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("FileReviewDock", () => {
+  it("renders nothing when no sets are pending", () => {
+    const { container } = render(
+      <FileReviewDock changeSets={[]} onSubmit={() => {}} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders an interactive decision bar for a pending set, in list mode", () => {
+    render(
+      <FileReviewDock changeSets={[changeSet("cs-1", ["src/a.ts"])]} onSubmit={() => {}} />,
+    );
+    expect(screen.getByText("Review file changes")).toBeTruthy();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-approve"]'),
+    ).toBeTruthy();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-reject"]'),
+    ).toBeTruthy();
+    // List mode: the expander reveals the file inventory, never a diff — the
+    // transcript's stamped edit rows own the diffs.
+    fireEvent.click(screen.getByRole("button", { name: "Files" }));
+    expect(document.querySelector('[data-cursor-target="file-diff"]')).toBeNull();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-list-row"]'),
+    ).toBeTruthy();
+  });
+
+  it("binds each set's id into the card-level submit", () => {
+    const onSubmit = vi.fn();
+    render(
+      <FileReviewDock changeSets={[changeSet("cs-1", ["src/a.ts"])]} onSubmit={onSubmit} />,
+    );
+    fireEvent.click(
+      document.querySelector<HTMLButtonElement>(
+        '[data-cursor-target="file-review-approve"]',
+      )!,
+    );
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith("cs-1", FileDecisionAction.APPROVE, {
+      scope: FileDecisionScope.CHANGE_SET,
+      expectedDigest: "agg-cs-1",
+      acknowledgeUnreviewable: false,
+    });
+  });
+
+  it("threads a keyed decision error to the failed set's card", () => {
+    const decisionErrors = new Map([["cs-1", new Error("digest mismatch")]]);
+    render(
+      <FileReviewDock
+        changeSets={[changeSet("cs-1", ["src/a.ts"])]}
+        onSubmit={() => {}}
+        decisionErrors={decisionErrors}
+      />,
+    );
+    const err = screen.getByText(/Couldn.t submit decision — digest mismatch/);
+    expect(err.getAttribute("data-cursor-target")).toBe("file-review-error");
+  });
+
+  it("stacks multiple pending sets — none is ever dropped", () => {
+    render(
+      <FileReviewDock
+        changeSets={[changeSet("cs-1", ["a.ts"]), changeSet("cs-2", ["b.ts"])]}
+        onSubmit={() => {}}
+      />,
+    );
+    expect(screen.getAllByText("Review file changes")).toHaveLength(2);
+  });
+
+  it("caps the dock's height with an internal scroll container", () => {
+    // A set that starts expanded (many files) must scroll inside the dock
+    // rather than growing the fixed strip past the viewport.
+    const { container } = render(
+      <FileReviewDock changeSets={[changeSet("cs-1", ["a.ts", "b.ts"])]} onSubmit={() => {}} />,
+    );
+    const dock = container.querySelector('[data-cursor-target="file-review-dock"]');
+    expect(dock).toBeTruthy();
+    const scroller = dock!.firstElementChild!;
+    expect(scroller.className).toContain("overflow-y-auto");
+    expect(scroller.className).toContain("max-h-");
+  });
+});

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

@@ -0,0 +1,79 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, cleanup, screen, fireEvent, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import {
+  ToolCallSchema,
+  ToolCallOutputRefSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { StigmerContext } from "../../context";
+import { McpToolDetail } from "../McpToolDetail";
+
+afterEach(cleanup);
+
+function withStigmer(children: ReactNode, stigmer: Stigmer) {
+  return <StigmerContext.Provider value={stigmer}>{children}</StigmerContext.Provider>;
+}
+
+function mcpToolCall(outputRef: ReturnType<typeof create<typeof ToolCallOutputRefSchema>>) {
+  return create(ToolCallSchema, {
+    id: "tc-1",
+    name: "computer_use",
+    mcpServerSlug: "computer-use",
+    outputRef,
+  });
+}
+
+describe("McpToolDetail — offloaded output (DD-016 parity)", () => {
+  it("renders an offloaded image from a freshly minted URL", async () => {
+    const getArtifactDownloadUrl = vi
+      .fn()
+      .mockResolvedValue({ downloadUrl: "https://fresh/shot.png" });
+    const stigmer = {
+      agentExecution: { getArtifactDownloadUrl, getArtifactContent: vi.fn() },
+    } as unknown as Stigmer;
+
+    const ref = create(ToolCallOutputRefSchema, {
+      storageKey: "artifacts/aex_1/toolcalls/tc-1.png",
+      isImage: true,
+      mimeType: "image/png",
+    });
+
+    render(withStigmer(<McpToolDetail toolCall={mcpToolCall(ref)} />, stigmer));
+
+    const img = await screen.findByRole("img");
+    expect(img.getAttribute("src")).toBe("https://fresh/shot.png");
+    expect(getArtifactDownloadUrl.mock.calls[0][0].storageKey).toBe(
+      "artifacts/aex_1/toolcalls/tc-1.png",
+    );
+  });
+
+  it("expands offloaded text on demand via getArtifactContent", async () => {
+    const getArtifactContent = vi.fn().mockResolvedValue({
+      content: new TextEncoder().encode("THE FULL MCP OUTPUT"),
+      contentType: "text/plain",
+      truncated: false,
+    });
+    const stigmer = {
+      agentExecution: { getArtifactContent, getArtifactDownloadUrl: vi.fn() },
+    } as unknown as Stigmer;
+
+    const ref = create(ToolCallOutputRefSchema, {
+      storageKey: "artifacts/aex_1/toolcalls/tc-1.txt",
+      isImage: false,
+      mimeType: "text/plain",
+      sizeBytes: 800_000n,
+      truncatedPreview: "preview head…",
+    });
+
+    render(withStigmer(<McpToolDetail toolCall={mcpToolCall(ref)} />, stigmer));
+
+    expect(screen.getByText("preview head…")).toBeTruthy();
+    expect(getArtifactContent).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByText(/View full output/));
+
+    await waitFor(() => expect(screen.getByText("THE FULL MCP OUTPUT")).toBeTruthy());
+  });
+});

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

@@ -16,12 +16,30 @@ import {
   ToolCallSchema,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { PendingApprovalSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
+import { TodoItemSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/todo_pb";
+import { FileContentSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import {
+  CapturedFileChangeSchema,
+  FileChangeSetSchema,
+  FileReviewBaselineCapturedSchema,
+  FileReviewCandidateCapturedSchema,
+  FileReviewEventSchema,
+  FileReviewEventStreamSchema,
+  FileReviewReconciledSchema,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
+import {
+  DiffCompleteness,
   ExecutionPhase,
+  FileChangeKind,
+  FileChangeSetStatus,
+  FileDecisionAction,
+  FileReviewEventType,
   InteractionMode,
   MessageType,
+  TodoStatus,
   ToolCallStatus,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+
 import { MessageThread } from "../MessageThread";
 
 // ---------------------------------------------------------------------------
@@ -145,11 +163,266 @@ function makeExecutionWithApproval(
   return exec;
 }
 
+/**
+ * An active execution whose AI turn carries a gated tool call, with a matching
+ * pending approval — the case that should render the gate INLINE on the tool
+ * row rather than as a detached bottom card.
+ */
+function makeExecutionWithInlineApproval(
+  id: string,
+  toolCallId: string,
+  toolName: string,
+): AgentExecution {
+  const exec = create(AgentExecutionSchema);
+  exec.metadata = create(ApiResourceMetadataSchema, { id });
+  exec.spec = create(AgentExecutionSpecSchema, { message: "Do something" });
+
+  const status = create(AgentExecutionStatusSchema);
+  status.phase = ExecutionPhase.EXECUTION_WAITING_FOR_APPROVAL;
+
+  const aiMsg = create(AgentMessageSchema, {
+    type: MessageType.MESSAGE_AI,
+    content: "",
+    toolCalls: [
+      create(ToolCallSchema, {
+        id: toolCallId,
+        name: toolName,
+        status: ToolCallStatus.TOOL_CALL_WAITING_APPROVAL,
+      }),
+    ],
+  });
+  status.messages = [aiMsg];
+  status.pendingApprovals = [
+    create(PendingApprovalSchema, {
+      toolCallId,
+      toolName,
+      argsPreview: '{"path":"/tmp/x"}',
+    }),
+  ];
+  exec.status = status;
+  return exec;
+}
+
+/**
+ * An active execution carrying one single-file change set AWAITING_REVIEW — a
+ * PENDING set, which {@link MessageThread} must NOT render (the composer-docked
+ * FileReviewDock owns it). Flip the set's status to a settled value to exercise
+ * the read-only record rendering.
+ */
+function makeExecutionWithFileReview(id: string, setId: string): AgentExecution {
+  const exec = create(AgentExecutionSchema);
+  exec.metadata = create(ApiResourceMetadataSchema, { id });
+  exec.spec = create(AgentExecutionSpecSchema, { message: "Edit a file" });
+
+  const status = create(AgentExecutionStatusSchema);
+  status.phase = ExecutionPhase.EXECUTION_IN_PROGRESS;
+  status.messages = [
+    create(AgentMessageSchema, { type: MessageType.MESSAGE_AI, content: "Done." }),
+  ];
+  status.fileChangeSets = [
+    create(FileChangeSetSchema, {
+      id: setId,
+      status: FileChangeSetStatus.AWAITING_REVIEW,
+      aggregateDigest: "agg-1",
+      diffCompleteness: DiffCompleteness.COMPLETE,
+      changes: [
+        create(CapturedFileChangeSchema, {
+          id: `${setId}:src/a.ts`,
+          pathBefore: "src/a.ts",
+          pathAfter: "src/a.ts",
+          kind: FileChangeKind.MODIFY,
+          before: create(FileContentSchema, { body: { case: "inline", value: "old\n" } }),
+          after: create(FileContentSchema, { body: { case: "inline", value: "new\n" } }),
+          fileDigest: "d-a",
+          diffComplete: true,
+        }),
+      ],
+    }),
+  ];
+  exec.status = status;
+  return exec;
+}
+
 // ---------------------------------------------------------------------------
 // Tests
 // ---------------------------------------------------------------------------
 
 describe("MessageThread", () => {
+  it("never renders a PENDING set — the composer-docked FileReviewDock owns the decision surface", () => {
+    const exec = makeExecutionWithFileReview("exec-live", "cs-live:0");
+    render(
+      <MessageThread
+        executions={[]}
+        activeStreamExecution={exec}
+        showFileReviewRecords
+      />,
+    );
+    // Neither the interactive bar nor a record: the pending state lives on the
+    // stamped rows' badges, and the decision controls live in the dock.
+    expect(screen.queryByText("Review file changes")).toBeNull();
+    expect(screen.queryByText("File changes")).toBeNull();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-approve"]'),
+    ).toBeNull();
+  });
+
+  it("renders a settled set as a read-only record (no decision controls)", () => {
+    const exec = makeExecutionWithFileReview("exec-settled", "cs-settled:0");
+    // A decided/reconciled set: history, not an action.
+    exec.status!.fileChangeSets[0].status = FileChangeSetStatus.RECONCILED;
+
+    render(<MessageThread executions={[exec]} showFileReviewRecords />);
+    expect(screen.getByText("File changes")).toBeTruthy();
+    expect(screen.queryByText("Review file changes")).toBeNull();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-approve"]'),
+    ).toBeNull();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-reject"]'),
+    ).toBeNull();
+    // Record mode is list mode: the expander reveals the file list, no diffs —
+    // the stamped edit rows own the diffs.
+    fireEvent.click(screen.getByRole("button", { name: "Show" }));
+    expect(document.querySelector('[data-cursor-target="file-diff"]')).toBeNull();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-list-row"]'),
+    ).toBeTruthy();
+  });
+
+  it("renders no records at all without showFileReviewRecords (default)", () => {
+    const exec = makeExecutionWithFileReview("exec-off", "cs-off:0");
+    exec.status!.fileChangeSets[0].status = FileChangeSetStatus.RECONCILED;
+
+    render(<MessageThread executions={[exec]} />);
+    expect(screen.queryByText("File changes")).toBeNull();
+  });
+
+  it("folds the ledger and renders read-only for a terminal execution (empty projection)", () => {
+    // A terminal execution: the server projects no actionable file_change_sets,
+    // so MessageThread must fold the durable ledger to show what changed.
+    const exec = create(AgentExecutionSchema);
+    exec.metadata = create(ApiResourceMetadataSchema, { id: "exec-terminal" });
+    exec.spec = create(AgentExecutionSpecSchema, { message: "Edit a file" });
+    const status = create(AgentExecutionStatusSchema);
+    status.phase = ExecutionPhase.EXECUTION_COMPLETED;
+    status.messages = [
+      create(AgentMessageSchema, { type: MessageType.MESSAGE_AI, content: "Done." }),
+    ];
+    status.fileChangeSets = []; // terminal: server projects nil
+    const changeSetId = "cs-term:0";
+    status.fileReviewEventStream = create(FileReviewEventStreamSchema, {
+      executionId: "exec-terminal",
+      events: [
+        create(FileReviewEventSchema, {
+          changeSetId,
+          eventType: FileReviewEventType.BASELINE_CAPTURED,
+          payload: {
+            case: "baselineCaptured",
+            value: create(FileReviewBaselineCapturedSchema, {
+              changeSetId,
+              turnId: "t1",
+              harnessId: "deep-agent",
+            }),
+          },
+        }),
+        create(FileReviewEventSchema, {
+          changeSetId,
+          eventType: FileReviewEventType.CANDIDATE_CAPTURED,
+          payload: {
+            case: "candidateCaptured",
+            value: create(FileReviewCandidateCapturedSchema, {
+              changeSetId,
+              aggregateDigest: "agg-1",
+              changes: [
+                create(CapturedFileChangeSchema, {
+                  id: `${changeSetId}:src/a.ts`,
+                  pathBefore: "src/a.ts",
+                  pathAfter: "src/a.ts",
+                  kind: FileChangeKind.MODIFY,
+                  before: create(FileContentSchema, { body: { case: "inline", value: "old\n" } }),
+                  after: create(FileContentSchema, { body: { case: "inline", value: "new\n" } }),
+                  fileDigest: "d-a",
+                  diffComplete: true,
+                }),
+              ],
+            }),
+          },
+        }),
+        create(FileReviewEventSchema, {
+          changeSetId,
+          eventType: FileReviewEventType.RECONCILED,
+          payload: {
+            case: "reconciled",
+            value: create(FileReviewReconciledSchema, { changeSetId }),
+          },
+        }),
+      ],
+    });
+    exec.status = status;
+
+    render(<MessageThread executions={[exec]} showFileReviewRecords />);
+    // The read-only record renders with no decision controls; expanding it
+    // shows the folded set's changed file.
+    expect(screen.getByText("File changes")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Show" }));
+    expect(screen.getByTitle("src/a.ts")).toBeTruthy();
+    expect(
+      document.querySelector('[data-cursor-target="file-review-approve"]'),
+    ).toBeNull();
+  });
+
+  it("threads an approvalErrors entry to an inline gate (the primary route)", () => {
+    const exec = makeExecutionWithInlineApproval("exec-ia", "tc-1", "delete_file");
+    const approvalErrors = new Map([["tc-1", new Error("gate already resolved")]]);
+
+    const { container } = render(
+      <MessageThread
+        executions={[]}
+        activeStreamExecution={exec}
+        onApprovalSubmit={() => {}}
+        approvalErrors={approvalErrors}
+      />,
+    );
+
+    const alert = container.querySelector('[data-cursor-target="approval-error"]');
+    expect(alert).toBeTruthy();
+    expect(alert!.textContent).toContain("gate already resolved");
+  });
+
+  it("threads an approvalErrors entry to a bottom backstop card (orphan approval)", () => {
+    // An approval whose tool call has no inline row renders as the bottom
+    // backstop ApprovalCard; the keyed error must reach it too.
+    const exec = create(AgentExecutionSchema);
+    exec.metadata = create(ApiResourceMetadataSchema, { id: "exec-orphan" });
+    exec.spec = create(AgentExecutionSpecSchema, { message: "Do something" });
+    const status = create(AgentExecutionStatusSchema);
+    status.phase = ExecutionPhase.EXECUTION_WAITING_FOR_APPROVAL;
+    status.messages = [];
+    status.pendingApprovals = [
+      create(PendingApprovalSchema, {
+        toolCallId: "tc-orphan",
+        toolName: "delete_file",
+        argsPreview: '{"path":"/tmp/x"}',
+      }),
+    ];
+    exec.status = status;
+
+    const approvalErrors = new Map([["tc-orphan", new Error("network down")]]);
+
+    const { container } = render(
+      <MessageThread
+        executions={[]}
+        activeStreamExecution={exec}
+        onApprovalSubmit={() => {}}
+        approvalErrors={approvalErrors}
+      />,
+    );
+
+    const alert = container.querySelector('[data-cursor-target="approval-error"]');
+    expect(alert).toBeTruthy();
+    expect(alert!.textContent).toContain("network down");
+  });
+
   it("renders role=log container when executions array is empty", () => {
     render(<MessageThread executions={[]} />);
 
@@ -176,6 +449,35 @@ describe("MessageThread", () => {
     ).toBeTruthy();
   });
 
+  it("renders the agent's todos as an inline card in the thread", () => {
+    const exec = makeExecution({
+      id: "exec-todos",
+      specMessage: "Build the feature",
+      aiContent: "Here is my plan",
+    });
+    // Attach a live plan to the execution status (as the runner would).
+    exec.status!.todos = {
+      t1: create(TodoItemSchema, {
+        id: "t1",
+        content: "Scaffold the component",
+        status: TodoStatus.TODO_IN_PROGRESS,
+      }),
+      t2: create(TodoItemSchema, {
+        id: "t2",
+        content: "Wire the thread",
+        status: TodoStatus.TODO_PENDING,
+      }),
+    };
+
+    render(<MessageThread executions={[exec]} />);
+
+    const region = screen.getByRole("region", { name: "Agent to-dos" });
+    expect(region).toBeTruthy();
+    // Active plan → expanded → tasks visible inline.
+    expect(region.textContent).toContain("Scaffold the component");
+    expect(region.textContent).toContain("0/2 completed");
+  });
+
   it("renders pending user message with opacity indicator", () => {
     render(
       <MessageThread
@@ -243,6 +545,28 @@ describe("MessageThread", () => {
     expect(onApproval.mock.calls[0][0]).toBe("tc-approve");
   });
 
+  it("renders a matching approval INLINE on its tool row, not as a bottom card, and routes the decision", () => {
+    const exec = makeExecutionWithInlineApproval("exec-inline", "tc-inline", "delete_file");
+    const onApproval = vi.fn();
+
+    render(
+      <MessageThread
+        executions={[]}
+        activeStreamExecution={exec}
+        onApprovalSubmit={onApproval}
+      />,
+    );
+
+    // No detached bottom card (role=alert is the standalone ApprovalCard only).
+    expect(screen.queryByRole("alert")).toBeNull();
+
+    // The gate's actions are present inline, and approving routes the decision
+    // with the gated tool's id.
+    fireEvent.click(screen.getByRole("button", { name: "Approve" }));
+    expect(onApproval).toHaveBeenCalledOnce();
+    expect(onApproval.mock.calls[0][0]).toBe("tc-inline");
+  });
+
   it("renders ExecutionPhaseBadge for non-completed terminal phase", () => {
     const exec = makeExecution({
       id: "exec-fail",