@stigmer/react 3.1.3 → 3.1.5

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__/ArtifactContentBody.test.tsx

@@ -0,0 +1,131 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ArtifactContentBody } from "../ArtifactContentBody";
+import type { SkillPackageDetection } from "../../library/detect-skill-package";
+
+const NOT_SKILL: SkillPackageDetection = { detected: false };
+
+function fileArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 64n,
+  });
+}
+
+function dirArtifact(name: string, entries: string[]) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.DIRECTORY,
+    sizeBytes: 512n,
+    entries,
+  });
+}
+
+afterEach(cleanup);
+
+describe("ArtifactContentBody — file states", () => {
+  it("renders a loading skeleton", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("notes.txt")}
+        content={null}
+        contentType={null}
+        isLoading
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByLabelText("Loading content")).toBeTruthy();
+  });
+
+  it("renders an error message", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("notes.txt")}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={new Error("boom")}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText("boom")).toBeTruthy();
+  });
+
+  it("renders the binary / unavailable state when content is null and settled", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("image.bin")}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText(/Content not available for preview/)).toBeTruthy();
+  });
+
+  it("renders text content", () => {
+    render(
+      <ArtifactContentBody
+        artifact={fileArtifact("notes.txt")}
+        content={"hello from the artifact"}
+        contentType={"text/plain"}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText(/hello from the artifact/)).toBeTruthy();
+  });
+});
+
+describe("ArtifactContentBody — directory state", () => {
+  it("lists directory entries", () => {
+    render(
+      <ArtifactContentBody
+        artifact={dirArtifact("pack", ["SKILL.md", "run.sh"])}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={NOT_SKILL}
+      />,
+    );
+    expect(screen.getByText("Files (2)")).toBeTruthy();
+    expect(screen.getByText("SKILL.md")).toBeTruthy();
+    expect(screen.getByText("run.sh")).toBeTruthy();
+  });
+
+  it("shows the skill banner when a skill package is detected", () => {
+    const detection = {
+      detected: true,
+      skillName: "My Skill",
+      skillDescription: "does things",
+      fileCount: 2,
+    } as unknown as SkillPackageDetection;
+    render(
+      <ArtifactContentBody
+        artifact={dirArtifact("pack", ["SKILL.md"])}
+        content={null}
+        contentType={null}
+        isLoading={false}
+        error={null}
+        isTruncated={false}
+        skillDetection={detection}
+      />,
+    );
+    expect(screen.getByText("My Skill")).toBeTruthy();
+    expect(screen.getByText("does things")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, waitFor } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { ArtifactDocument } from "../ArtifactDocument";
+
+function fileArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 64n,
+    storageKey: `artifacts/aex_1/${name}`,
+    contentHash: "hash-1",
+  });
+}
+
+function dirArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.DIRECTORY,
+    sizeBytes: 512n,
+    storageKey: `artifacts/aex_1/${name}`,
+    entries: ["a.txt", "b.txt"],
+  });
+}
+
+function stigmerReturning(text: string): Stigmer {
+  return {
+    agentExecution: {
+      getArtifactContent: vi.fn().mockResolvedValue({
+        content: new TextEncoder().encode(text),
+        contentType: "text/plain",
+        truncated: false,
+      }),
+    },
+  } as unknown as Stigmer;
+}
+
+function renderDoc(stigmer: Stigmer, artifact = fileArtifact("notes.txt")) {
+  return render(
+    <StigmerContext.Provider value={stigmer}>
+      <ArtifactDocument
+        artifact={artifact}
+        executionId="aex_1"
+        org="acme"
+        isTerminal
+      />
+    </StigmerContext.Provider>,
+  );
+}
+
+const AGENT_YAML = [
+  "apiVersion: agentic.stigmer.ai/v1",
+  "kind: Agent",
+  "metadata:",
+  "  name: my-agent",
+  "spec: {}",
+  "",
+].join("\n");
+
+afterEach(cleanup);
+
+describe("ArtifactDocument", () => {
+  it("renders the toolbar (name + Download) and the fetched content", async () => {
+    renderDoc(stigmerReturning("hello document"));
+
+    expect(screen.getByRole("article", { name: "Artifact notes.txt" })).toBeTruthy();
+    expect(screen.getByText("notes.txt")).toBeTruthy();
+    expect(screen.getByText("Download")).toBeTruthy();
+    await waitFor(() => expect(screen.getByText(/hello document/)).toBeTruthy());
+    expect(screen.getByText("Copy")).toBeTruthy();
+  });
+
+  it("surfaces resource detection and an Apply CTA for a detected Agent", async () => {
+    renderDoc(stigmerReturning(AGENT_YAML), fileArtifact("agent.yaml"));
+
+    await waitFor(() => expect(screen.getByText("Agent detected")).toBeTruthy());
+    expect(screen.getByText("Apply to acme")).toBeTruthy();
+  });
+
+  it("renders a directory artifact with a Download ZIP action and no Copy", () => {
+    render(
+      <StigmerContext.Provider value={stigmerReturning("")}>
+        <ArtifactDocument
+          artifact={dirArtifact("pack")}
+          executionId="aex_1"
+          org="acme"
+          isTerminal
+        />
+      </StigmerContext.Provider>,
+    );
+
+    expect(screen.getByText("Download ZIP")).toBeTruthy();
+    expect(screen.queryByText("Copy")).toBeNull();
+    expect(screen.getByText("Files (2)")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,139 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { ArtifactRow } from "../ArtifactRow";
+
+function fileArtifact(name: string, sandboxPath = `.stigmer/${name}`) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 2048n,
+    sandboxPath,
+    storageKey: `artifacts/aex_1/${name}`,
+  });
+}
+
+function dirArtifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.DIRECTORY,
+    sizeBytes: 4096n,
+    sandboxPath: `.stigmer/${name}`,
+    storageKey: `artifacts/aex_1/${name}`,
+  });
+}
+
+const getArtifactDownloadUrl = vi.fn().mockResolvedValue({ downloadUrl: "" });
+
+function createStigmerMock(): Stigmer {
+  return {
+    agentExecution: { getArtifactDownloadUrl },
+  } as unknown as Stigmer;
+}
+
+function renderRow(props: Partial<Parameters<typeof ArtifactRow>[0]> = {}) {
+  const merged = {
+    artifact: fileArtifact("notes.md"),
+    executionId: "aex_1",
+    onOpen: vi.fn(),
+    ...props,
+  } as Parameters<typeof ArtifactRow>[0];
+  return render(
+    <StigmerContext.Provider value={createStigmerMock()}>
+      <ul>
+        <ArtifactRow {...merged} />
+      </ul>
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(() => {
+  cleanup();
+  getArtifactDownloadUrl.mockClear();
+});
+
+describe("ArtifactRow — presentation", () => {
+  it("renders a file-type icon, the name, and the formatted size", () => {
+    renderRow({ artifact: fileArtifact("notes.md") });
+    const open = screen.getByText("notes.md").closest("button")!;
+    expect(open.querySelector("svg")).toBeTruthy();
+    expect(screen.getByText("2.0 KB")).toBeTruthy();
+  });
+
+  it("appends a trailing slash for a directory artifact", () => {
+    renderRow({ artifact: dirArtifact("return-policy") });
+    // The name span's own text is "return-policy" + "/".
+    expect(screen.getByText("return-policy/")).toBeTruthy();
+  });
+
+  it("shows the parent-directory subtitle only on a name collision", () => {
+    const artifact = fileArtifact("agent.yaml", "/workspace/configs/agent.yaml");
+    const { rerender } = renderRow({ artifact, hasNameCollision: true });
+    expect(screen.getByText("configs/")).toBeTruthy();
+
+    rerender(
+      <StigmerContext.Provider value={createStigmerMock()}>
+        <ul>
+          <ArtifactRow artifact={artifact} executionId="aex_1" onOpen={vi.fn()} />
+        </ul>
+      </StigmerContext.Provider>,
+    );
+    expect(screen.queryByText("configs/")).toBeNull();
+  });
+});
+
+describe("ArtifactRow — nested-interactive avoidance (DD-22)", () => {
+  it("renders the Download control as a SIBLING of the open button, never nested", () => {
+    renderRow({ artifact: fileArtifact("notes.md") });
+    const open = screen.getByText("notes.md").closest("button")!;
+    const download = screen.getByLabelText("Download notes.md");
+    expect(download.tagName).toBe("BUTTON");
+    // A <button> inside a <button> is a WCAG 4.1.2 nested-interactive violation.
+    expect(open.contains(download)).toBe(false);
+  });
+});
+
+describe("ArtifactRow — open / activate interaction (file-tree parity)", () => {
+  it("fires onOpen on a single click of the open target", () => {
+    const onOpen = vi.fn();
+    renderRow({ onOpen });
+    fireEvent.click(screen.getByText("notes.md"));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it("fires onActivate on a double-click when provided", () => {
+    const onActivate = vi.fn();
+    renderRow({ onActivate });
+    fireEvent.doubleClick(screen.getByText("notes.md"));
+    expect(onActivate).toHaveBeenCalledTimes(1);
+  });
+
+  it("binds no double-click handler when onActivate is omitted (harmless)", () => {
+    const onOpen = vi.fn();
+    renderRow({ onOpen });
+    // With no onActivate, a dblclick fires nothing (onOpen only responds to click).
+    fireEvent.doubleClick(screen.getByText("notes.md"));
+    expect(onOpen).not.toHaveBeenCalled();
+  });
+});
+
+describe("ArtifactRow — download", () => {
+  it("mints a download URL for the artifact's storage key on Download click", () => {
+    renderRow({ artifact: fileArtifact("notes.md") });
+    fireEvent.click(screen.getByLabelText("Download notes.md"));
+    expect(getArtifactDownloadUrl).toHaveBeenCalledTimes(1);
+    expect(getArtifactDownloadUrl.mock.calls[0][0]).toMatchObject({
+      executionId: "aex_1",
+      storageKey: "artifacts/aex_1/notes.md",
+    });
+  });
+
+  it("labels the Download control 'Download ZIP' for a directory", () => {
+    renderRow({ artifact: dirArtifact("return-policy") });
+    expect(screen.getByTitle("Download ZIP")).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import type { Stigmer } from "@stigmer/sdk";
+import { AgentExecutionSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { ExecutionArtifactSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import {
+  ExecutionArtifactKind,
+  ExecutionPhase,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { StigmerContext } from "../../context";
+import { ArtifactsWidget } from "../ArtifactsWidget";
+
+function artifact(name: string) {
+  return create(ExecutionArtifactSchema, {
+    name,
+    kind: ExecutionArtifactKind.FILE,
+    sizeBytes: 1024n,
+    sandboxPath: `.stigmer/${name}`,
+    storageKey: `artifacts/aex_1/${name}`,
+  });
+}
+
+const execution = create(AgentExecutionSchema, {
+  metadata: { id: "aex_1" },
+  status: {
+    phase: ExecutionPhase.EXECUTION_COMPLETED,
+    artifacts: [artifact("agent.yaml"), artifact("notes.md")],
+  },
+});
+
+/** Modal content fetch — keep pending so nothing rejects during the test. */
+function createStigmerMock(): Stigmer {
+  return {
+    agentExecution: {
+      getArtifactContent: vi.fn().mockReturnValue(new Promise(() => {})),
+      getArtifactDownloadUrl: vi.fn().mockResolvedValue({ downloadUrl: "" }),
+    },
+  } as unknown as Stigmer;
+}
+
+function renderWidget(executions = [execution]) {
+  return render(
+    <StigmerContext.Provider value={createStigmerMock()}>
+      <ArtifactsWidget executions={executions} org="acme" />
+    </StigmerContext.Provider>,
+  );
+}
+
+afterEach(cleanup);
+
+describe("ArtifactsWidget — dense list (panel-less)", () => {
+  it("renders nothing when there are no artifacts", () => {
+    const { container } = renderWidget([]);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("renders a heading, count, and one dense row per artifact (no ArtifactCard chrome)", () => {
+    renderWidget();
+    expect(screen.getByRole("heading", { name: "Artifacts" })).toBeTruthy();
+    // Count badge reflects the two deduped artifacts.
+    expect(screen.getByText("2")).toBeTruthy();
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+    expect(screen.getByText("agent.yaml")).toBeTruthy();
+    expect(screen.getByText("notes.md")).toBeTruthy();
+    // The retired ArtifactCard rendered a "Preview" button and role="article".
+    expect(screen.queryByText("Preview")).toBeNull();
+    expect(screen.queryByRole("article")).toBeNull();
+    expect(screen.getByLabelText("Download agent.yaml")).toBeTruthy();
+  });
+
+  it("opens the preview modal (the panel-less fallback) on a row click", () => {
+    renderWidget();
+    expect(document.querySelector("dialog")).toBeNull();
+    fireEvent.click(screen.getByText("notes.md"));
+    expect(document.querySelector("dialog")).toBeTruthy();
+  });
+});