@stigmer/react 3.1.3 → 3.1.5

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();

package/src/execution/__tests__/message-entry.test.tsx

@@ -1,9 +1,22 @@
-import { describe, it, expect, afterEach } from "vitest";
-import { render, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, cleanup, waitFor } from "@testing-library/react";
 import { create } from "@bufbuild/protobuf";
 import { AgentMessageSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { MessageEntry } from "../MessageEntry";
+import type { MermaidModule } from "../../internal/mermaid-loader";
+
+// Stub only the library loader: the real MermaidDiagram + markdown overrides
+// run end-to-end through Streamdown, so these tests cover the full chat path
+// from fenced source to rendered diagram.
+vi.mock("../../internal/mermaid-loader", () => ({
+  loadMermaid: vi.fn().mockResolvedValue({
+    initialize: vi.fn(),
+    render: vi
+      .fn()
+      .mockResolvedValue({ svg: "<svg data-testid='mermaid-svg'></svg>" }),
+  } as unknown as MermaidModule),
+}));
 
 afterEach(cleanup);
 
@@ -169,6 +182,41 @@ describe("MessageEntry — AI messages (Streamdown)", () => {
       article!.querySelectorAll('span[class*="hljs-"]').length,
     ).toBeGreaterThan(0);
   });
+
+  it("renders a completed ```mermaid fence as a diagram, not a code block", async () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "Here is the flow:\n\n```mermaid\nflowchart LR\n  A --> B\n```",
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    await waitFor(() =>
+      expect(
+        article!.querySelector('[role="img"][aria-label="Mermaid diagram"]'),
+      ).not.toBeNull(),
+    );
+    expect(article!.querySelector("[data-testid='mermaid-svg']")).not.toBeNull();
+    // The fenced source is no longer shown as a code block.
+    expect(article!.querySelector("pre")).toBeNull();
+  });
+
+  it("keeps an unclosed ```mermaid fence as a code block while streaming", () => {
+    const msg = makeMessage(
+      MessageType.MESSAGE_AI,
+      "```mermaid\nflowchart LR\n  A --> B",
+      { isStreaming: true },
+    );
+    const { container } = render(<MessageEntry message={msg} />);
+
+    const article = queryArticle(container, "AI response");
+    // Mid-stream the source stays a plain code block — no diagram, and no
+    // half-parsed error flashing.
+    expect(
+      article!.querySelector('[role="img"][aria-label="Mermaid diagram"]'),
+    ).toBeNull();
+    expect(article!.textContent).toContain("flowchart LR");
+  });
 });
 
 // ---------------------------------------------------------------------------