@stigmer/react 2.0.1 → 3.0.0

package/src/execution/ToolCallDetail.tsx

@@ -1,17 +1,14 @@
 "use client";
 
 import 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 type { ToolResultView } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
-import { resolveToolCategory } from "./tool-categories";
 import { McpToolDetail } from "./McpToolDetail";
-import { useSandboxNormalize } from "./SandboxContext";
 import { ToolArgsView } from "./ToolArgsView";
-import {
-  CollapsibleCode,
-  CollapsiblePre,
-  formatResult,
-} from "./tool-rendering-primitives";
+import { ResultView } from "./ResultView";
+import { useToolPresentation } from "./tool-presenter";
+import type { ToolCategory } from "./tool-categories";
+import { CollapsiblePre } from "./tool-rendering-primitives";
 
 /** Props for {@link ToolCallDetail}. */
 export interface ToolCallDetailProps {
@@ -22,25 +19,20 @@ export interface ToolCallDetailProps {
 }
 
 /**
- * Renders the detail panel for a single tool call with
- * category-specific visual treatments.
+ * Renders the detail panel for a single tool call with category-specific
+ * treatments.
  *
- * Arguments are rendered through the shared {@link ToolArgsView}
- * dispatch (same component used by {@link ApprovalCard}), ensuring
- * visual parity between pre-execution approval previews and
- * post-execution detail views. Result/output sections are layered
- * on top by this component.
+ * Arguments render through the shared {@link ToolArgsView} (same component used
+ * by {@link ApprovalCard}); results render through {@link ResultView}, driven by
+ * `@stigmer/sdk`'s `normalizeToolResult` — so an edit shows a diff, a shell shows
+ * a terminal with an exit badge, a search shows a match list, and unknown tools
+ * degrade to readable JSON instead of a raw dump.
  *
- * - **Shell tools**: terminal-style command + output
- * - **File tools (read/write/edit/delete)**: file path + content + result
- * - **Search tools (grep/glob)**: pattern + results
- * - **Think**: muted italic thought block
- * - **MCP tools**: structured args + parsed result via {@link McpToolDetail}
- * - **Unknown tools**: generic args + result JSON rendering
+ * 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.
  *
- * Used inside {@link ToolCallItem} when expanded, but also
- * independently importable by platform builders who compose
- * their own tool call UI.
+ * Importable on its own by platform builders composing custom tool UIs.
  *
  * @example
  * ```tsx
@@ -48,147 +40,83 @@ export interface ToolCallDetailProps {
  * ```
  */
 export function ToolCallDetail({ toolCall, className }: ToolCallDetailProps) {
-  const category = resolveToolCategory(toolCall.name, toolCall.mcpServerSlug);
-  const isFailed = toolCall.status === ToolCallStatus.TOOL_CALL_FAILED;
+  const { category, result } = useToolPresentation(toolCall);
 
   return (
     <div className={cn("space-y-2 text-xs", className)}>
-      <CategoryRenderer toolCall={toolCall} categoryName={category.category} />
-
-      {isFailed && toolCall.error && (
-        <div className="space-y-1">
-          <span className="font-medium text-destructive">Error</span>
-          <pre className="whitespace-pre-wrap break-words rounded-md border border-destructive/20 bg-destructive-subtle p-2 font-mono text-destructive">
-            {toolCall.error}
-          </pre>
-        </div>
-      )}
+      <CategoryDetail toolCall={toolCall} category={category} result={result} />
     </div>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Category-specific renderers
+// Category composition
 //
-// Each renderer composes:
-//   MetadataRow (duration, slug) + ToolArgsView (shared args) + result section
-//
-// Think and MCP have fully custom rendering that doesn't fit the
-// MetadataRow + ToolArgsView + Result pattern.
+// Each category composes from three parts: MetadataRow (duration, slug),
+// ToolArgsView (the input), and ResultView (the effect). The combination is
+// chosen to be informative without duplication.
 // ---------------------------------------------------------------------------
 
-function CategoryRenderer({
+function CategoryDetail({
   toolCall,
-  categoryName,
+  category,
+  result,
 }: {
   toolCall: ToolCall;
-  categoryName: string;
+  category: ToolCategory;
+  result: ToolResultView;
 }) {
-  switch (categoryName) {
-    case "shell":
-      return <ShellToolDetail toolCall={toolCall} />;
-    case "read":
-      return <FileToolDetail toolCall={toolCall} mode="read" />;
-    case "write":
-      return <FileToolDetail toolCall={toolCall} mode="write" />;
-    case "edit":
-      return <FileToolDetail toolCall={toolCall} mode="edit" />;
-    case "delete":
-      return <FileToolDetail toolCall={toolCall} mode="delete" />;
-    case "search":
-    case "list":
-      return <SearchToolDetail toolCall={toolCall} />;
+  const args = <ArgsSection toolCall={toolCall} />;
+
+  switch (category) {
     case "think":
       return <ThinkToolDetail toolCall={toolCall} />;
+
     case "mcp":
       return <McpToolDetail toolCall={toolCall} />;
-    default:
-      return <GenericToolDetail toolCall={toolCall} />;
-  }
-}
-
-function ShellToolDetail({ toolCall }: { toolCall: ToolCall }) {
-  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
-  const normalize = useSandboxNormalize();
-
-  return (
-    <>
-      <MetadataRow toolCall={toolCall} duration={duration} />
 
-      <ToolArgsView
-        toolName={toolCall.name}
-        args={toolCall.args as Record<string, unknown> | null}
-        mcpServerSlug={toolCall.mcpServerSlug}
-      />
-
-      {toolCall.result && (
-        <div className="space-y-1">
-          <span className="font-medium text-muted-foreground">Output</span>
-          <div className="rounded-md border border-border bg-[var(--stgm-terminal-bg,#1a1a2e)] p-2.5">
-            <CollapsiblePre
-              content={normalize(toolCall.result)}
-              className="text-[var(--stgm-terminal-fg,#e0e0e0)]"
-            />
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
-/**
- * For **read**: metadata + path only (content is noise for the user).
- * For **write/edit/delete**: metadata + path + content (via ToolArgsView) + result.
- */
-function FileToolDetail({
-  toolCall,
-  mode,
-}: {
-  toolCall: ToolCall;
-  mode: "read" | "write" | "edit" | "delete";
-}) {
-  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
-
-  return (
-    <>
-      <MetadataRow toolCall={toolCall} duration={duration} />
+    case "edit":
+      // The diff already names the file and quantifies the change, so it stands
+      // alone — showing the new content as an argument would duplicate it.
+      return (
+        <>
+          <MetadataRow toolCall={toolCall} />
+          <ResultView view={result} />
+        </>
+      );
 
-      <ToolArgsView
-        toolName={toolCall.name}
-        args={toolCall.args as Record<string, unknown> | null}
-        mcpServerSlug={toolCall.mcpServerSlug}
-      />
+    case "read":
+    case "write":
+    case "delete":
+      // The input is the point (path, or path + written content). Only surface a
+      // result body when it carries new information — i.e. an error.
+      return (
+        <>
+          <MetadataRow toolCall={toolCall} />
+          {args}
+          {result.type === "error" && <ResultView view={result} />}
+        </>
+      );
 
-      {mode !== "read" && toolCall.result && (
-        <CollapsibleCode
-          label="Result"
-          content={formatResult(toolCall.result)}
-        />
-      )}
-    </>
-  );
+    default:
+      // shell, search, list, fetch, web-search, unknown: input + effect.
+      return (
+        <>
+          <MetadataRow toolCall={toolCall} />
+          {args}
+          <ResultView view={result} />
+        </>
+      );
+  }
 }
 
-function SearchToolDetail({ toolCall }: { toolCall: ToolCall }) {
-  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
-
+function ArgsSection({ toolCall }: { toolCall: ToolCall }) {
   return (
-    <>
-      <MetadataRow toolCall={toolCall} duration={duration} />
-
-      <ToolArgsView
-        toolName={toolCall.name}
-        args={toolCall.args as Record<string, unknown> | null}
-        mcpServerSlug={toolCall.mcpServerSlug}
-      />
-
-      {toolCall.result && (
-        <CollapsibleCode
-          label="Results"
-          content={formatResult(toolCall.result)}
-        />
-      )}
-    </>
+    <ToolArgsView
+      toolName={toolCall.name}
+      args={toolCall.args as Record<string, unknown> | null}
+      mcpServerSlug={toolCall.mcpServerSlug}
+    />
   );
 }
 
@@ -208,40 +136,12 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
   );
 }
 
-function GenericToolDetail({ toolCall }: { toolCall: ToolCall }) {
-  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
-
-  return (
-    <>
-      <MetadataRow toolCall={toolCall} duration={duration} />
-
-      <ToolArgsView
-        toolName={toolCall.name}
-        args={toolCall.args as Record<string, unknown> | null}
-        mcpServerSlug={toolCall.mcpServerSlug}
-      />
-
-      {toolCall.result && (
-        <CollapsibleCode
-          label="Result"
-          content={formatResult(toolCall.result)}
-        />
-      )}
-    </>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Shared sub-components
 // ---------------------------------------------------------------------------
 
-function MetadataRow({
-  toolCall,
-  duration,
-}: {
-  toolCall: ToolCall;
-  duration: string | null;
-}) {
+function MetadataRow({ toolCall }: { toolCall: ToolCall }) {
+  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
   const hasMetadata = toolCall.mcpServerSlug || duration;
   if (!hasMetadata) return null;
 
@@ -262,9 +162,8 @@ function MetadataRow({
 // ---------------------------------------------------------------------------
 
 /**
- * Returns a human-readable duration string from two ISO 8601
- * timestamps. Returns `null` when either timestamp is empty or
- * invalid.
+ * Returns a human-readable duration string from two ISO 8601 timestamps, or
+ * `null` when either timestamp is empty or invalid.
  */
 export function formatDuration(
   startedAt: string,

package/src/execution/ToolCallGroup.tsx

@@ -10,7 +10,7 @@ import {
 import { cn } from "@stigmer/theme";
 import { useRenderTracer } from "../internal/dev";
 import { ToolCallItem } from "./ToolCallItem";
-import { resolveToolCategory, extractPrimaryArg } from "./tool-categories";
+import { resolveToolCategoryFromCall, extractPrimaryArg } from "./tool-categories";
 
 /** Props for {@link ToolCallGroup}. */
 export interface ToolCallGroupProps {
@@ -91,7 +91,7 @@ function defaultFormatSummary(
 ): string {
   if (toolCalls.length === 1) {
     const tc = toolCalls[0];
-    const cat = resolveToolCategory(tc.name, tc.mcpServerSlug);
+    const cat = resolveToolCategoryFromCall(tc);
     const primary = extractPrimaryArg(tc);
     if (primary) {
       const truncated =

package/src/execution/ToolCallItem.tsx

@@ -11,11 +11,8 @@ import { cn } from "@stigmer/theme";
 import { ToolCallDetail, formatDuration } from "./ToolCallDetail";
 import { SubAgentSection } from "./SubAgentSection";
 import { FilePathLink } from "./FilePathLink";
-import {
-  resolveToolCategory,
-  extractPrimaryArg,
-  type ToolCategory,
-} from "./tool-categories";
+import { type ToolCategory } from "./tool-categories";
+import { useToolPresentation } from "./tool-presenter";
 import { useSandboxNormalize } from "./SandboxContext";
 import { useThreadSelection } from "./useThreadSelection";
 
@@ -71,13 +68,12 @@ export function ToolCallItem({
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
   const isSubAgent = subAgentExecution != null;
 
-  const categoryInfo = resolveToolCategory(toolCall.name, toolCall.mcpServerSlug);
-  const CategoryIcon = CATEGORY_ICON[categoryInfo.category];
-  const primaryArg = extractPrimaryArg(toolCall);
+  const { category, label, primaryArg, resultSummary } = useToolPresentation(toolCall);
+  const CategoryIcon = CATEGORY_ICON[category];
 
   const displayLabel = isSubAgent
-    ? subAgentExecution.subject || subAgentExecution.name || categoryInfo.label
-    : categoryInfo.label;
+    ? subAgentExecution.subject || subAgentExecution.name || label
+    : label;
 
   const normalize = useSandboxNormalize();
   const approvalBadge = getApprovalBadge(toolCall);
@@ -88,7 +84,7 @@ export function ToolCallItem({
   // expandable to show the error.
   const isNonExpandableRead =
     !isSubAgent &&
-    categoryInfo.category === "read" &&
+    category === "read" &&
     (toolCall.status === ToolCallStatus.TOOL_CALL_COMPLETED ||
       toolCall.status === ToolCallStatus.TOOL_CALL_SKIPPED);
 
@@ -175,7 +171,7 @@ export function ToolCallItem({
 
   const displaySubtitle = isSubAgent
     ? null
-    : categoryInfo.category === "shell" && primaryArg
+    : category === "shell" && primaryArg
       ? normalize(primaryArg)
       : primaryArg;
 
@@ -208,6 +204,11 @@ export function ToolCallItem({
               {displaySubtitle}
             </span>
           )}
+          {!isSubAgent && resultSummary && (
+            <span className="shrink-0 tabular-nums text-muted-foreground">
+              {resultSummary}
+            </span>
+          )}
         </span>
 
         {trailingContent}
@@ -300,6 +301,8 @@ export const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
   delete: TrashIcon,
   search: SearchIcon,
   list: FolderIcon,
+  fetch: GlobeIcon,
+  "web-search": GlobeIcon,
   think: BrainIcon,
   "sub-agent": BotIcon,
   internal: WrenchIcon,
@@ -307,6 +310,16 @@ export const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
   unknown: WrenchIcon,
 };
 
+function GlobeIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="6" cy="6" r="4.5" />
+      <path d="M1.5 6H10.5" />
+      <path d="M6 1.5C7.5 3 7.5 9 6 10.5C4.5 9 4.5 3 6 1.5Z" />
+    </svg>
+  );
+}
+
 function TerminalIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">

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

@@ -0,0 +1,99 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, cleanup, fireEvent } from "@testing-library/react";
+import { create } from "@bufbuild/protobuf";
+import { PendingApprovalSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
+import { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { ToolKind } from "@stigmer/sdk";
+import { ApprovalCard } from "../ApprovalCard";
+
+afterEach(cleanup);
+
+const noop = () => {};
+
+describe("ApprovalCard tool classification", () => {
+  it("honors the denormalized wire tool_kind for a name not in the fallback map", () => {
+    // A future/unknown tool name that the name-based resolver cannot classify —
+    // only the server-projected tool_kind can. This proves the backend
+    // denormalization (Go + Java PendingApproval projection) is consumed.
+    const approval = create(PendingApprovalSchema, {
+      toolCallId: "tc1",
+      toolName: "SomeFutureEditTool",
+      toolKind: ToolKind.FILE_EDIT,
+      argsPreview: "{}",
+    });
+
+    const { getByText } = render(
+      <ApprovalCard pendingApproval={approval} onSubmit={noop} />,
+    );
+
+    // FILE_EDIT presentation label, not a humanized tool name.
+    expect(getByText("Edit")).toBeTruthy();
+  });
+
+  it("falls back to name-based classification when tool_kind is unset (legacy)", () => {
+    const approval = create(PendingApprovalSchema, {
+      toolCallId: "tc2",
+      toolName: "delete_file",
+      // toolKind left UNSPECIFIED — legacy execution.
+      argsPreview: '{"path":"/tmp/x"}',
+    });
+
+    const { getByText } = render(
+      <ApprovalCard pendingApproval={approval} onSubmit={noop} />,
+    );
+
+    expect(getByText("Delete")).toBeTruthy();
+  });
+});
+
+describe("ApprovalCard approve-all action", () => {
+  it("renders the subordinate 'Approve & don't ask again' action", () => {
+    const approval = create(PendingApprovalSchema, {
+      toolCallId: "tc3",
+      toolName: "delete_file",
+      argsPreview: '{"path":"/tmp/x"}',
+    });
+
+    const { getByText, getByLabelText } = render(
+      <ApprovalCard pendingApproval={approval} onSubmit={noop} />,
+    );
+
+    expect(getByText("Approve")).toBeTruthy();
+    expect(getByLabelText("Approve & don't ask again")).toBeTruthy();
+  });
+
+  it("submits APPROVE_ALL when the subordinate action is clicked", () => {
+    const onSubmit = vi.fn();
+    const approval = create(PendingApprovalSchema, {
+      toolCallId: "tc4",
+      toolName: "delete_file",
+      argsPreview: '{"path":"/tmp/x"}',
+    });
+
+    const { getByLabelText } = render(
+      <ApprovalCard pendingApproval={approval} onSubmit={onSubmit} />,
+    );
+
+    fireEvent.click(getByLabelText("Approve & don't ask again"));
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith(ApprovalAction.APPROVE_ALL);
+  });
+
+  it("submits a plain APPROVE when the primary action is clicked", () => {
+    const onSubmit = vi.fn();
+    const approval = create(PendingApprovalSchema, {
+      toolCallId: "tc5",
+      toolName: "delete_file",
+      argsPreview: '{"path":"/tmp/x"}',
+    });
+
+    const { getByLabelText } = render(
+      <ApprovalCard pendingApproval={approval} onSubmit={onSubmit} />,
+    );
+
+    fireEvent.click(getByLabelText("Approve"));
+
+    expect(onSubmit).toHaveBeenCalledWith(ApprovalAction.APPROVE);
+  });
+});

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

@@ -0,0 +1,95 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import type { ToolResultView } from "@stigmer/sdk";
+import { ResultView, summarizeResultView } from "../ResultView";
+
+afterEach(cleanup);
+
+describe("ResultView", () => {
+  it("renders an edit diff with add/remove counts from the envelope", () => {
+    const view: ToolResultView = {
+      type: "diff",
+      path: "/workspace/x.md",
+      linesAdded: 40,
+      linesRemoved: 0,
+    };
+    const { container } = render(<ResultView view={view} />);
+    expect(container.textContent).toContain("+40");
+    expect(container.textContent).toContain("-0");
+  });
+
+  it("renders a computed diff hunk from old/new text", () => {
+    const view: ToolResultView = {
+      type: "diff",
+      path: "/workspace/x.md",
+      oldText: "hello",
+      newText: "hello world",
+    };
+    const { container } = render(<ResultView view={view} />);
+    // The new line is rendered as an addition.
+    expect(container.textContent).toContain("hello world");
+  });
+
+  it("renders a terminal with a non-zero exit badge", () => {
+    const view: ToolResultView = {
+      type: "terminal",
+      stdout: "boom",
+      stderr: "",
+      exitCode: 1,
+    };
+    const { container } = render(<ResultView view={view} />);
+    expect(container.textContent).toContain("exit 1");
+    expect(container.textContent).toContain("boom");
+  });
+
+  it("renders a search match list", () => {
+    const view: ToolResultView = {
+      type: "search",
+      matches: [{ text: "a" }, { text: "b" }],
+      count: 2,
+    };
+    const { container } = render(<ResultView view={view} />);
+    expect(container.textContent).toContain("2 matches");
+  });
+
+  it("renders unknown JSON results as a labeled code block, not a raw dump", () => {
+    const view: ToolResultView = { type: "json", value: { a: 1 } };
+    const { container } = render(<ResultView view={view} />);
+    expect(container.textContent).toContain("Result");
+    expect(container.textContent).toContain('"a": 1');
+  });
+
+  it("renders an error", () => {
+    const view: ToolResultView = { type: "error", message: "it broke" };
+    const { container } = render(<ResultView view={view} />);
+    expect(container.textContent).toContain("Error");
+    expect(container.textContent).toContain("it broke");
+  });
+
+  it("renders nothing for empty", () => {
+    const { container } = render(<ResultView view={{ type: "empty" }} />);
+    expect(container.textContent).toBe("");
+  });
+});
+
+describe("summarizeResultView", () => {
+  it("summarizes a diff", () => {
+    expect(
+      summarizeResultView({ type: "diff", path: "x", linesAdded: 3, linesRemoved: 1 }),
+    ).toBe("+3 -1");
+  });
+
+  it("summarizes a failed terminal but not a successful one", () => {
+    expect(summarizeResultView({ type: "terminal", stdout: "", stderr: "", exitCode: 2 })).toBe("exit 2");
+    expect(summarizeResultView({ type: "terminal", stdout: "", stderr: "", exitCode: 0 })).toBeNull();
+  });
+
+  it("summarizes search and list counts", () => {
+    expect(summarizeResultView({ type: "search", matches: [], count: 3 })).toBe("3 matches");
+    expect(summarizeResultView({ type: "list", entries: [], count: 1 })).toBe("1 item");
+  });
+
+  it("returns null when there is nothing to summarize", () => {
+    expect(summarizeResultView({ type: "text", text: "hi" })).toBeNull();
+  });
+});