@stigmer/react 3.1.4 → 3.1.5

package/src/execution/TodoList.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, type ComponentType } from "react";
 import 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 { cn } from "@stigmer/theme";
@@ -14,6 +14,12 @@ export interface TodoListProps {
   readonly todos: { readonly [key: string]: TodoItem };
   /** Additional CSS class names for the root container. */
   readonly className?: string;
+  /**
+   * Replacement row component. Receives {@link TodoRowProps} for each
+   * item; defaults to the built-in {@link TodoRow}. Renders inside a
+   * `<ul role="list">`, so the component must produce an `<li>`.
+   */
+  readonly TodoRow?: ComponentType<TodoRowProps>;
 }
 
 const STATUS_SORT_ORDER: ReadonlyMap<TodoStatus, number> = new Map([
@@ -47,7 +53,11 @@ function todoSortKey(item: TodoItem): number {
  * <TodoList todos={todos} />
  * ```
  */
-export function TodoList({ todos, className }: TodoListProps) {
+export function TodoList({
+  todos,
+  className,
+  TodoRow: RowComponent = TodoRow,
+}: TodoListProps) {
   const sortedTodos = useMemo(() => {
     const items = Object.values(todos);
     if (items.length === 0) return [];
@@ -63,7 +73,7 @@ export function TodoList({ todos, className }: TodoListProps) {
       aria-label="Tasks"
     >
       {sortedTodos.map((item) => (
-        <TodoRow key={item.id} item={item} />
+        <RowComponent key={item.id} item={item} />
       ))}
     </ul>
   );
@@ -108,7 +118,19 @@ export function todoCompletionSummary(
 // TodoRow — single todo item with status icon
 // ---------------------------------------------------------------------------
 
-function TodoRow({ item }: { readonly item: TodoItem }) {
+/** Props for {@link TodoRow}. */
+export interface TodoRowProps {
+  /** The todo item to render. */
+  readonly item: TodoItem;
+}
+
+/**
+ * One to-do checklist row: status icon plus task description, rendered as
+ * an `<li>`. The default row for {@link TodoList} — replace it via the
+ * `TodoRow` prop (or `MessageThread`'s `slots.TodoRow`) to restyle rows or
+ * bring host iconography while keeping the built-in card chrome.
+ */
+export function TodoRow({ item }: TodoRowProps) {
   const Icon = TODO_ICONS[item.status] ?? TodoPendingIcon;
   const colorClass = TODO_COLORS[item.status] ?? "text-muted-foreground";
   const cancelled = item.status === TodoStatus.TODO_CANCELLED;

package/src/execution/ToolCallDetail.tsx

@@ -1,9 +1,14 @@
 "use client";
 
+import { useMemo } from "react";
+import type { CapturedFileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { toDisplayFileChange } from "@stigmer/sdk";
 import type { ToolResultView } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
 import { BoundedContent } from "../internal/BoundedContent.js";
+import { FileChangeDiff } from "./FileChangesView.js";
+import { useFileReviewRowChange } from "./FileReviewContext.js";
 import { McpToolDetail } from "./McpToolDetail.js";
 import { ToolArgsView } from "./ToolArgsView.js";
 import { ResultView } from "./ResultView.js";
@@ -43,8 +48,9 @@ export interface ToolCallDetailProps {
  * degrade to readable JSON instead of a raw dump.
  *
  * Composition varies by category to avoid redundancy: an edit shows only the
- * diff (which already names the file and quantifies the change); a write shows
- * its input content; a read shows just the path.
+ * diff (which already names the file and quantifies the change); a stamped
+ * write shows its change set's captured diff, degrading to the proposed
+ * content when no capture resolves; a read shows just the path.
  *
  * Importable on its own by platform builders composing custom tool UIs.
  *
@@ -60,6 +66,16 @@ export function ToolCallDetail({
 }: ToolCallDetailProps) {
   const { category, result, primaryArg } = useToolPresentation(toolCall);
 
+  // The captured net change a stamped write row renders as its inline diff
+  // (see the write branch below). Resolved here unconditionally (Rules of
+  // Hooks); null for every other category's rows — they are never stamped —
+  // and for every honest-degradation case, so this costs nothing outside the
+  // stamped-write path.
+  const capturedChange = useFileReviewRowChange(
+    toolCall.fileChangeSetId,
+    primaryArg,
+  );
+
   return (
     <div className={cn("space-y-2 text-xs", className)}>
       <CategoryDetail
@@ -68,6 +84,7 @@ export function ToolCallDetail({
         result={result}
         primaryArg={primaryArg}
         primaryArgTruncated={primaryArgTruncated}
+        capturedChange={capturedChange}
       />
     </div>
   );
@@ -90,12 +107,14 @@ function CategoryDetail({
   result,
   primaryArg,
   primaryArgTruncated,
+  capturedChange,
 }: {
   toolCall: ToolCall;
   category: ToolCategory;
   result: ToolResultView;
   primaryArg: string | null;
   primaryArgTruncated: boolean;
+  capturedChange: CapturedFileChange | null;
 }) {
   const args = <ArgsSection toolCall={toolCall} />;
 
@@ -128,27 +147,50 @@ function CategoryDetail({
       );
 
     case "edit":
-    case "write":
+    case "write": {
       // The diff already names the file and quantifies the change, so it stands
-      // alone — showing the written content as an argument would duplicate it. A
-      // write whose capture is unavailable degrades to a `file` result here
-      // (ResultView shows the content), so the input is never lost. The owning
-      // row already names the file, so the body suppresses the path.
+      // alone — showing the written content as an argument would duplicate it.
+      // The owning row already names the file, so the body suppresses the path.
       //
-      // The diff is the one tool body with no internal truncation of its own, so
-      // it is bounded by the shared BoundedContent budget (the same clamp the
-      // approval gate diff uses) — a large or still-streaming edit shows a
-      // consistent, scannable window with one in-place reveal, never the whole
-      // file. Every other category's body self-truncates (terminal / text via
-      // CollapsiblePre), so only edit/write wrap here — never double-bound.
+      // An EDIT's diff is reconstructed per-call from its own args (old/new
+      // strings, or the Cursor envelope's unified diff). A whole-file WRITE has
+      // no per-call before-image in its args, so a stamped write renders the
+      // captured NET change from its change set instead — the same artifact the
+      // row's review badge refers to, resolved through the same path matcher so
+      // the two can never disagree. An unresolvable write (still streaming
+      // before the turn-boundary capture, no capture mode, legacy session, or a
+      // non-reviewable change) keeps the honest fallback: the proposed content
+      // from the args, as a `file` view.
+      if (category === "write" && capturedChange) {
+        return (
+          <>
+            <ProvenanceNote toolCall={toolCall} />
+            <CapturedRowDiff change={capturedChange} />
+          </>
+        );
+      }
+      // Bounding is keyed on the VIEW, not the category: BoundedContent is for
+      // bodies with no internal truncation of their own — the diff and a FAILED
+      // call's error `<pre>` — giving a large or still-streaming edit the same
+      // scannable clamp the approval gate uses. The `file` view self-truncates
+      // (CollapsibleCode's line cap), so wrapping it would stack two reveal
+      // controls on one block — exactly what BoundedContent's contract forbids.
+      const body = (
+        <ResultView view={result} showFileName={false} showStats={false} />
+      );
       return (
         <>
           <ProvenanceNote toolCall={toolCall} />
-          <BoundedContent cursorTarget="tool-detail-expand">
-            <ResultView view={result} showFileName={false} showStats={false} />
-          </BoundedContent>
+          {result.type === "file" ? (
+            body
+          ) : (
+            <BoundedContent cursorTarget="tool-detail-expand">
+              {body}
+            </BoundedContent>
+          )}
         </>
       );
+    }
 
     case "read":
     case "delete":
@@ -245,6 +287,17 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
 // Shared sub-components
 // ---------------------------------------------------------------------------
 
+// A stamped write row's inline diff: the captured change projected onto the
+// display FileChange and rendered through the same bounded FileChangeDiff the
+// review card's body uses — offloaded-body fetch, binary notices, and
+// truncation states included. The file name is suppressed (the owning row
+// header names it); the `+N −M` stats stay because a write row's header
+// summary carries none.
+function CapturedRowDiff({ change }: { change: CapturedFileChange }) {
+  const adapted = useMemo(() => toDisplayFileChange(change), [change]);
+  return <FileChangeDiff change={adapted} bounded showFileName={false} />;
+}
+
 // The detail body's only metadata. Duration and the MCP slug live in the owning
 // row header (ToolCallItem / ApprovalCardHeader), so the body never restates
 // them; it surfaces the authorization provenance the runner stamped onto the

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

@@ -1,15 +1,47 @@
-import { describe, it, expect, afterEach } from "vitest";
+import { describe, it, expect, afterEach, beforeEach, vi } 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 {
+  CapturedFileChangeSchema,
+  FileChangeSetSchema,
+  type FileChangeSet,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
 import {
   ApprovalPolicySource,
+  FileChangeKind,
+  FileReviewBlockReason,
+  ToolCallStatus,
   ToolKind,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { ToolCallDetail } from "../ToolCallDetail";
+import type { UseFileChangeContentReturn } from "../useFileChangeContent";
+
+// Mock the diff-body content resolver (the seam FileChangesView.test.tsx also
+// mocks): FileChangeDiff calls it unconditionally, and its real implementation
+// needs a Stigmer client for offloaded bodies — irrelevant to these tests.
+let mockContent: UseFileChangeContentReturn;
+
+vi.mock("../useFileChangeContent", () => ({
+  useFileChangeContent: () => mockContent,
+}));
+
+const { ToolCallDetail } = await import("../ToolCallDetail");
+const { FileReviewContext } = await import("../FileReviewContext");
+
+beforeEach(() => {
+  mockContent = {
+    beforeText: "alpha\n",
+    afterText: "captured-after\n",
+    isBinary: false,
+    isLoading: false,
+    error: null,
+    isTruncated: false,
+    downloadUrl: null,
+  };
+});
 
 afterEach(cleanup);
 
@@ -21,6 +53,9 @@ function makeToolCall(opts: {
   approvalPolicySource?: ApprovalPolicySource;
   startedAt?: string;
   completedAt?: string;
+  status?: ToolCallStatus;
+  error?: string;
+  fileChangeSetId?: string;
 }): ToolCall {
   return create(ToolCallSchema, {
     id: opts.name,
@@ -32,6 +67,9 @@ function makeToolCall(opts: {
       opts.approvalPolicySource ?? ApprovalPolicySource.UNSPECIFIED,
     startedAt: opts.startedAt ?? "",
     completedAt: opts.completedAt ?? "",
+    status: opts.status ?? ToolCallStatus.TOOL_CALL_COMPLETED,
+    error: opts.error ?? "",
+    fileChangeSetId: opts.fileChangeSetId ?? "",
   });
 }
 
@@ -193,3 +231,151 @@ describe("ToolCallDetail — edit body has no duplicate stats", () => {
     expect(container.textContent).not.toContain("+1");
   });
 });
+
+// ---------------------------------------------------------------------------
+// Write body — captured diff on a stamped row, single-bounded fallback
+// ---------------------------------------------------------------------------
+
+describe("ToolCallDetail — write body", () => {
+  const SET_ID = "aex-1:0";
+  // BoundedContent's collapsed pixel clamp (PREVIEW_MAX_HEIGHT). Its presence/
+  // absence is how these tests pin WHICH truncation mechanism bounds the body —
+  // jsdom has no layout, so the reveal control itself only appears for the
+  // line-count mechanism (CollapsibleCode), never for the pixel clamp.
+  const CLAMP = ".max-h-48";
+
+  /** A change set capturing one reviewable modify of `path`. */
+  function capturedSet(
+    path = "notes.md",
+    overrides?: { diffComplete?: boolean; blockedReason?: FileReviewBlockReason },
+  ): FileChangeSet {
+    return create(FileChangeSetSchema, {
+      id: SET_ID,
+      changes: [
+        create(CapturedFileChangeSchema, {
+          id: `${SET_ID}:${path}`,
+          pathBefore: path,
+          pathAfter: path,
+          kind: FileChangeKind.MODIFY,
+          diffComplete: overrides?.diffComplete ?? true,
+          blockedReason:
+            overrides?.blockedReason ?? FileReviewBlockReason.UNSPECIFIED,
+        }),
+      ],
+    });
+  }
+
+  function writeCall(opts?: Partial<Parameters<typeof makeToolCall>[0]>): ToolCall {
+    return makeToolCall({
+      name: "write_file",
+      toolKind: ToolKind.FILE_WRITE,
+      args: { file_path: "notes.md", contents: "proposed body\n" },
+      result: "Successfully wrote to 'notes.md'",
+      ...opts,
+    });
+  }
+
+  function renderWithSet(toolCall: ToolCall, set: FileChangeSet | null) {
+    const changeSetsById = new Map(set ? [[SET_ID, set]] : []);
+    return render(
+      <FileReviewContext.Provider value={{ changeSetsById }}>
+        <ToolCallDetail toolCall={toolCall} />
+      </FileReviewContext.Provider>,
+    );
+  }
+
+  it("renders the captured net diff (not the Content block) on a stamped row", () => {
+    const { container } = renderWithSet(
+      writeCall({ fileChangeSetId: SET_ID }),
+      capturedSet(),
+    );
+    // The captured before/after renders as a real diff table...
+    expect(container.querySelector('[data-cursor-target="file-diff"]')).not.toBeNull();
+    expect(container.textContent).toContain("captured-after");
+    // ...bounded by the shared pixel clamp, with the +N -M stats the write
+    // row's header does not carry, and without the fallback's raw args body.
+    // (The diff table itself carries a hidden a11y column header named
+    // "Content", so the discriminator is the body text, not the label.)
+    expect(container.querySelector(CLAMP)).not.toBeNull();
+    expect(container.textContent).toContain("+1");
+    expect(container.textContent).not.toContain("proposed body");
+  });
+
+  it("renders exactly one reveal control for the content fallback (double-expander regression)", () => {
+    const longBody = Array.from({ length: 55 }, (_, i) => `line ${i + 1}`).join("\n");
+    const { container, getAllByRole } = render(
+      <ToolCallDetail
+        toolCall={writeCall({ args: { file_path: "notes.md", contents: longBody } })}
+      />,
+    );
+    // The file view self-truncates (line-count mechanism, one control)...
+    const reveals = getAllByRole("button").filter((b) =>
+      /^Show /.test(b.textContent ?? ""),
+    );
+    expect(reveals).toHaveLength(1);
+    expect(reveals[0].textContent).toContain("Show all 55 lines");
+    // ...and is never ALSO wrapped in BoundedContent's pixel clamp.
+    expect(container.querySelector(CLAMP)).toBeNull();
+  });
+
+  it("falls back to the Content block for every unresolvable capture", () => {
+    const cases: Array<[string, ToolCall, FileChangeSet | null]> = [
+      ["unstamped row", writeCall(), capturedSet()],
+      ["set missing from context", writeCall({ fileChangeSetId: SET_ID }), null],
+      [
+        "path not in set",
+        writeCall({ fileChangeSetId: SET_ID }),
+        capturedSet("other.md"),
+      ],
+      [
+        "non-reviewable (secret-withheld) change",
+        writeCall({ fileChangeSetId: SET_ID }),
+        capturedSet("notes.md", {
+          diffComplete: false,
+          blockedReason: FileReviewBlockReason.SECRET_WITHHELD,
+        }),
+      ],
+    ];
+    for (const [label, toolCall, set] of cases) {
+      const { container } = renderWithSet(toolCall, set);
+      expect(container.textContent, label).toContain("Content");
+      expect(container.textContent, label).toContain("proposed body");
+      expect(
+        container.querySelector('[data-cursor-target="file-diff"]'),
+        label,
+      ).toBeNull();
+      cleanup();
+    }
+  });
+
+  it("keeps a FAILED write's error view inside the pixel clamp (bounding-rule lock)", () => {
+    const { container } = render(
+      <ToolCallDetail
+        toolCall={writeCall({
+          status: ToolCallStatus.TOOL_CALL_FAILED,
+          error: "EACCES: permission denied, open 'notes.md'",
+        })}
+      />,
+    );
+    expect(container.textContent).toContain("permission denied");
+    // The error <pre> has no internal truncation, so BoundedContent bounds it.
+    expect(container.querySelector(CLAMP)).not.toBeNull();
+  });
+
+  it("leaves a stamped EDIT row on its per-call args diff, never the captured net diff", () => {
+    const edit = makeToolCall({
+      name: "edit_file",
+      toolKind: ToolKind.FILE_EDIT,
+      args: { file_path: "notes.md", old_string: "alpha", new_string: "edit-args-b" },
+      result: "Successfully replaced 1 occurrence in 'notes.md'",
+      fileChangeSetId: SET_ID,
+    });
+    const { container } = renderWithSet(edit, capturedSet());
+    // The per-call diff from the row's own args renders...
+    expect(container.textContent).toContain("edit-args-b");
+    // ...not the change set's captured net content...
+    expect(container.textContent).not.toContain("captured-after");
+    // ...still inside the shared pixel clamp (unchanged behavior).
+    expect(container.querySelector(CLAMP)).not.toBeNull();
+  });
+});

package/src/execution/__tests__/file-review-status.test.ts

@@ -24,6 +24,7 @@ import {
   changeSetReviewability,
   deriveEffectiveVerdicts,
   fileReviewability,
+  fileReviewRowChange,
   fileReviewRowState,
 } from "../file-review-status";
 
@@ -291,6 +292,52 @@ describe("changeForRowPath", () => {
   });
 });
 
+describe("fileReviewRowChange", () => {
+  it("returns null with no set or path", () => {
+    const set = reviewSet({
+      status: FileChangeSetStatus.AWAITING_REVIEW,
+      changes: [fileChange("f1", "a.ts")],
+    });
+    expect(fileReviewRowChange(undefined, "a.ts")).toBeNull();
+    expect(fileReviewRowChange(set, null)).toBeNull();
+    expect(fileReviewRowChange(set, "")).toBeNull();
+  });
+
+  it("resolves a reviewable change by row path (same matcher as the badge)", () => {
+    const set = reviewSet({
+      status: FileChangeSetStatus.AWAITING_REVIEW,
+      changes: [fileChange("f1", "src/a.ts")],
+    });
+    expect(fileReviewRowChange(set, "src/a.ts")?.id).toBe("f1");
+    expect(fileReviewRowChange(set, "/home/user/ws/src/a.ts")?.id).toBe("f1");
+  });
+
+  it("returns null for a path absent from the set", () => {
+    const set = reviewSet({
+      status: FileChangeSetStatus.AWAITING_REVIEW,
+      changes: [fileChange("f1", "a.ts")],
+    });
+    expect(fileReviewRowChange(set, "gone.ts")).toBeNull();
+  });
+
+  it("returns null for a non-reviewable change (honest degradation)", () => {
+    const set = reviewSet({
+      status: FileChangeSetStatus.AWAITING_REVIEW,
+      changes: [
+        create(CapturedFileChangeSchema, {
+          id: "f1",
+          pathBefore: "secret.env",
+          pathAfter: "secret.env",
+          kind: FileChangeKind.MODIFY,
+          diffComplete: false,
+          blockedReason: FileReviewBlockReason.SECRET_WITHHELD,
+        }),
+      ],
+    });
+    expect(fileReviewRowChange(set, "secret.env")).toBeNull();
+  });
+});
+
 describe("fileReviewRowState", () => {
   it("returns null with no set (not yet projected / unknown id)", () => {
     expect(fileReviewRowState(undefined, "a.ts")).toBeNull();