@stigmer/react 0.0.52 → 0.0.54

package/src/execution/ToolArgsView.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import {
+  resolveToolCategory,
+  extractWriteContentFromPreview,
+} from "./tool-categories";
+import type { ToolCategory, ToolCategoryInfo } from "./tool-categories";
+import { FilePathLink } from "./FilePathLink";
+import { McpArgsView, McpMetadataRow } from "./McpToolDetail";
+import { useSandboxNormalize } from "./SandboxContext";
+import {
+  CollapsibleCode,
+  FilePathIcon,
+  formatJson,
+} from "./tool-rendering-primitives";
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export interface ToolArgsViewProps {
+  /**
+   * Raw tool name as it appears on the ToolCall or PendingApproval.
+   * Used for category resolution and MCP metadata display.
+   */
+  readonly toolName: string;
+  /**
+   * Parsed tool arguments — either from `ToolCall.args` or
+   * `JSON.parse(PendingApproval.argsPreview)`.
+   */
+  readonly args: Record<string, unknown> | null;
+  /** MCP server slug for MCP tool classification and metadata. */
+  readonly mcpServerSlug?: string;
+  readonly className?: string;
+}
+
+/**
+ * Unified tool-arguments renderer used by both {@link ApprovalCard}
+ * (pre-execution) and {@link ToolCallDetail} (post-execution).
+ *
+ * Resolves the tool category from `toolName` + `mcpServerSlug`,
+ * extracts the relevant primary argument, and dispatches to the
+ * appropriate category-specific view:
+ *
+ * - **Shell** — terminal-style command block
+ * - **File (read/write/edit/delete)** — file icon + path + optional content
+ * - **Search / List** — pattern display
+ * - **MCP** — metadata row + scalar key-value grid + collapsible JSON
+ * - **Generic / Unknown** — formatted JSON args
+ *
+ * @example
+ * ```tsx
+ * // In approval card (from argsPreview string):
+ * const args = JSON.parse(pendingApproval.argsPreview);
+ * <ToolArgsView toolName={toolName} args={args} mcpServerSlug={slug} />
+ *
+ * // In detail view (from ToolCall):
+ * <ToolArgsView toolName={tc.name} args={tc.args} mcpServerSlug={tc.mcpServerSlug} />
+ * ```
+ */
+export function ToolArgsView({
+  toolName,
+  args,
+  mcpServerSlug,
+  className,
+}: ToolArgsViewProps) {
+  const categoryInfo = useMemo(
+    () => resolveToolCategory(toolName, mcpServerSlug),
+    [toolName, mcpServerSlug],
+  );
+
+  const primaryArg = useMemo(
+    () => extractPrimaryArgValue(args, categoryInfo),
+    [args, categoryInfo],
+  );
+
+  return (
+    <div className={cn("text-xs", className)}>
+      <CategoryArgsDispatch
+        category={categoryInfo.category}
+        toolName={toolName}
+        args={args}
+        primaryArg={primaryArg}
+        mcpServerSlug={mcpServerSlug}
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Dispatch
+// ---------------------------------------------------------------------------
+
+function CategoryArgsDispatch({
+  category,
+  toolName,
+  args,
+  primaryArg,
+  mcpServerSlug,
+}: {
+  category: ToolCategory;
+  toolName: string;
+  args: Record<string, unknown> | null;
+  primaryArg: string | null;
+  mcpServerSlug?: string;
+}) {
+  switch (category) {
+    case "shell":
+      return primaryArg ? <ShellArgsView command={primaryArg} /> : null;
+
+    case "read":
+    case "write":
+    case "edit":
+    case "delete":
+      return primaryArg ? (
+        <FileArgsView path={primaryArg} category={category} args={args} />
+      ) : null;
+
+    case "search":
+    case "list":
+      return primaryArg ? <SearchArgsView pattern={primaryArg} /> : null;
+
+    case "mcp":
+      return (
+        <McpArgsPreview
+          toolName={toolName}
+          args={args}
+          mcpServerSlug={mcpServerSlug ?? ""}
+        />
+      );
+
+    default:
+      return args && Object.keys(args).length > 0 ? (
+        <GenericArgsView args={args} />
+      ) : null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Category-specific views
+// ---------------------------------------------------------------------------
+
+function ShellArgsView({ command }: { command: string }) {
+  const normalize = useSandboxNormalize();
+  return (
+    <div className="rounded-md border border-border bg-[var(--stgm-terminal-bg,#1a1a2e)] p-2.5">
+      <pre className="whitespace-pre-wrap break-words font-mono text-xs text-[var(--stgm-terminal-fg,#e0e0e0)]">
+        <span className="select-none text-[var(--stgm-terminal-prompt,#6b7280)]">
+          ${" "}
+        </span>
+        {normalize(command)}
+      </pre>
+    </div>
+  );
+}
+
+function FileArgsView({
+  path,
+  category,
+  args,
+}: {
+  path: string;
+  category: string;
+  args: Record<string, unknown> | null;
+}) {
+  const writeContent = useMemo(() => {
+    if (category !== "write" && category !== "edit") return null;
+    if (!args) return null;
+    return extractWriteContentFromArgs(args);
+  }, [category, args]);
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center gap-1.5 text-xs">
+        <FilePathIcon />
+        <FilePathLink path={path} className="text-xs" />
+      </div>
+      {writeContent && (
+        <CollapsibleCode label="Content" content={writeContent} />
+      )}
+    </div>
+  );
+}
+
+function SearchArgsView({ pattern }: { pattern: string }) {
+  return (
+    <div className="flex items-center gap-1.5 text-xs">
+      <span className="text-muted-foreground">Pattern:</span>
+      <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-foreground">
+        {pattern}
+      </code>
+    </div>
+  );
+}
+
+function McpArgsPreview({
+  toolName,
+  args,
+  mcpServerSlug,
+}: {
+  toolName: string;
+  args: Record<string, unknown> | null;
+  mcpServerSlug: string;
+}) {
+  return (
+    <div className="space-y-2">
+      <McpMetadataRow
+        mcpServerSlug={mcpServerSlug}
+        toolName={toolName}
+        duration={null}
+      />
+      {args && Object.keys(args).length > 0 && <McpArgsView args={args} />}
+    </div>
+  );
+}
+
+function GenericArgsView({ args }: { args: Record<string, unknown> }) {
+  return (
+    <CollapsibleCode label="Arguments" content={formatJson(args)} />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Utilities
+// ---------------------------------------------------------------------------
+
+const WRITE_CONTENT_FIELDS = [
+  "contents",
+  "content",
+  "file_content",
+  "new_text",
+  "new_string",
+  "replacement",
+] as const;
+
+function extractWriteContentFromArgs(
+  args: Record<string, unknown>,
+): string | null {
+  for (const field of WRITE_CONTENT_FIELDS) {
+    const val = args[field];
+    if (typeof val === "string" && val.length > 0) return val;
+  }
+  return null;
+}
+
+function extractPrimaryArgValue(
+  args: Record<string, unknown> | null,
+  info: ToolCategoryInfo,
+): string | null {
+  if (!args) return null;
+
+  const tryField = (field: string): string | null => {
+    const val = args[field];
+    if (typeof val === "string" && val.length > 0) return val;
+    return null;
+  };
+
+  if (info.primaryArgField) {
+    const v = tryField(info.primaryArgField);
+    if (v) return v;
+  }
+
+  for (const fb of info.fallbackArgFields) {
+    const v = tryField(fb);
+    if (v) return v;
+  }
+
+  if (info.category === "unknown" || info.category === "mcp") {
+    const keys = Object.keys(args);
+    if (keys.length > 0) {
+      const val = args[keys[0]];
+      if (typeof val === "string") return val;
+    }
+  }
+
+  return null;
+}

package/src/execution/ToolCallDetail.tsx

@@ -1,28 +1,39 @@
 "use client";
 
-import { useState } from "react";
 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 { cn } from "@stigmer/theme";
-import { resolveToolCategory, extractPrimaryArg } from "./tool-categories";
-import { FilePathLink } from "./FilePathLink";
+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";
 
 export interface ToolCallDetailProps {
   readonly toolCall: ToolCall;
   readonly className?: string;
 }
 
-const TRUNCATION_LINE_LIMIT = 10;
-
 /**
  * Renders the detail panel for a single tool call with
  * category-specific visual treatments.
  *
- * - **Shell tools**: terminal-style code block for command + output
- * - **File tools (read/write/edit)**: file path header + content block
- * - **Search tools (grep/glob)**: pattern header + results list
+ * 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.
+ *
+ * - **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
- * - **Unknown/MCP tools**: generic args + result JSON rendering
+ * - **MCP tools**: structured args + parsed result via {@link McpToolDetail}
+ * - **Unknown tools**: generic args + result JSON rendering
  *
  * Used inside {@link ToolCallItem} when expanded, but also
  * independently importable by platform builders who compose
@@ -34,7 +45,7 @@ const TRUNCATION_LINE_LIMIT = 10;
  * ```
  */
 export function ToolCallDetail({ toolCall, className }: ToolCallDetailProps) {
-  const category = resolveToolCategory(toolCall.name);
+  const category = resolveToolCategory(toolCall.name, toolCall.mcpServerSlug);
   const isFailed = toolCall.status === ToolCallStatus.TOOL_CALL_FAILED;
 
   return (
@@ -55,6 +66,12 @@ export function ToolCallDetail({ toolCall, className }: ToolCallDetailProps) {
 
 // ---------------------------------------------------------------------------
 // Category-specific renderers
+//
+// 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.
 // ---------------------------------------------------------------------------
 
 function CategoryRenderer({
@@ -80,44 +97,33 @@ function CategoryRenderer({
       return <SearchToolDetail toolCall={toolCall} />;
     case "think":
       return <ThinkToolDetail toolCall={toolCall} />;
+    case "mcp":
+      return <McpToolDetail toolCall={toolCall} />;
     default:
       return <GenericToolDetail toolCall={toolCall} />;
   }
 }
 
-/**
- * Terminal-style rendering for shell/execute tools.
- * Shows the command in a dark terminal block and output below.
- */
 function ShellToolDetail({ toolCall }: { toolCall: ToolCall }) {
-  const command = extractPrimaryArg(toolCall);
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
+  const normalize = useSandboxNormalize();
 
   return (
     <>
-      {/* Metadata */}
       <MetadataRow toolCall={toolCall} duration={duration} />
 
-      {/* Command in terminal-style block */}
-      {command && (
-        <div className="space-y-1">
-          <span className="font-medium text-muted-foreground">Command</span>
-          <div className="rounded-md border border-border bg-[var(--stgm-terminal-bg,#1a1a2e)] p-2.5">
-            <pre className="whitespace-pre-wrap break-words font-mono text-[var(--stgm-terminal-fg,#e0e0e0)]">
-              <span className="select-none text-[var(--stgm-terminal-prompt,#6b7280)]">$ </span>
-              {command}
-            </pre>
-          </div>
-        </div>
-      )}
+      <ToolArgsView
+        toolName={toolCall.name}
+        args={toolCall.args as Record<string, unknown> | null}
+        mcpServerSlug={toolCall.mcpServerSlug}
+      />
 
-      {/* Output */}
       {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={toolCall.result}
+              content={normalize(toolCall.result)}
               className="text-[var(--stgm-terminal-fg,#e0e0e0)]"
             />
           </div>
@@ -128,17 +134,8 @@ function ShellToolDetail({ toolCall }: { toolCall: ToolCall }) {
 }
 
 /**
- * File-oriented rendering for read/write/edit/delete tools.
- *
- * For **read** mode: shows only the metadata row and a clickable
- * path. Content is intentionally omitted — the Read tool's purpose
- * is for the *agent* to consume the file, and the content is either
- * truncated, omitted, or simply noise for the user. The clickable
- * path provides direct access to the source file.
- *
- * For **write/edit/delete** modes: shows the clickable path followed
- * by the content block (what was written/edited) and any result
- * confirmation.
+ * For **read**: metadata + path only (content is noise for the user).
+ * For **write/edit/delete**: metadata + path + content (via ToolArgsView) + result.
  */
 function FileToolDetail({
   toolCall,
@@ -147,49 +144,19 @@ function FileToolDetail({
   toolCall: ToolCall;
   mode: "read" | "write" | "edit" | "delete";
 }) {
-  const filePath = extractPrimaryArg(toolCall);
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
 
-  if (mode === "read") {
-    return (
-      <>
-        <MetadataRow toolCall={toolCall} duration={duration} />
-        {filePath && (
-          <div className="flex items-center gap-1.5">
-            <FilePathIcon />
-            <FilePathLink path={filePath} className="text-xs" />
-          </div>
-        )}
-      </>
-    );
-  }
-
-  const contentFromArgs =
-    mode === "write" || mode === "edit"
-      ? extractWriteContent(toolCall)
-      : null;
-
-  const displayContent = contentFromArgs || toolCall.result;
-
   return (
     <>
       <MetadataRow toolCall={toolCall} duration={duration} />
 
-      {filePath && (
-        <div className="flex items-center gap-1.5">
-          <FilePathIcon />
-          <FilePathLink path={filePath} className="text-xs" />
-        </div>
-      )}
-
-      {displayContent && (
-        <CollapsibleCode
-          label={mode === "delete" ? "Result" : "Content"}
-          content={formatResult(displayContent)}
-        />
-      )}
+      <ToolArgsView
+        toolName={toolCall.name}
+        args={toolCall.args as Record<string, unknown> | null}
+        mcpServerSlug={toolCall.mcpServerSlug}
+      />
 
-      {contentFromArgs && toolCall.result && (
+      {mode !== "read" && toolCall.result && (
         <CollapsibleCode
           label="Result"
           content={formatResult(toolCall.result)}
@@ -199,24 +166,18 @@ function FileToolDetail({
   );
 }
 
-/**
- * Search/discovery rendering for grep, glob, list tools.
- * Shows search pattern/path and results.
- */
 function SearchToolDetail({ toolCall }: { toolCall: ToolCall }) {
-  const pattern = extractPrimaryArg(toolCall);
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
 
   return (
     <>
       <MetadataRow toolCall={toolCall} duration={duration} />
 
-      {pattern && (
-        <div className="flex items-center gap-1.5">
-          <span className="font-medium text-muted-foreground">Pattern:</span>
-          <span className="font-mono text-foreground">{pattern}</span>
-        </div>
-      )}
+      <ToolArgsView
+        toolName={toolCall.name}
+        args={toolCall.args as Record<string, unknown> | null}
+        mcpServerSlug={toolCall.mcpServerSlug}
+      />
 
       {toolCall.result && (
         <CollapsibleCode
@@ -228,10 +189,6 @@ function SearchToolDetail({ toolCall }: { toolCall: ToolCall }) {
   );
 }
 
-/**
- * Thought rendering. Muted, italic presentation distinct from
- * regular tool output.
- */
 function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
   const thought =
     (toolCall.args?.["thought"] as string | undefined) || toolCall.result;
@@ -248,10 +205,6 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
   );
 }
 
-/**
- * Fallback rendering for unknown/MCP tools. Preserves the original
- * generic args + result JSON display.
- */
 function GenericToolDetail({ toolCall }: { toolCall: ToolCall }) {
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
 
@@ -259,12 +212,11 @@ function GenericToolDetail({ toolCall }: { toolCall: ToolCall }) {
     <>
       <MetadataRow toolCall={toolCall} duration={duration} />
 
-      {toolCall.args && Object.keys(toolCall.args).length > 0 && (
-        <CollapsibleCode
-          label="Arguments"
-          content={formatJson(toolCall.args)}
-        />
-      )}
+      <ToolArgsView
+        toolName={toolCall.name}
+        args={toolCall.args as Record<string, unknown> | null}
+        mcpServerSlug={toolCall.mcpServerSlug}
+      />
 
       {toolCall.result && (
         <CollapsibleCode
@@ -302,128 +254,10 @@ function MetadataRow({
   );
 }
 
-function CollapsibleCode({
-  label,
-  content,
-}: {
-  label: string;
-  content: string;
-}) {
-  const lines = content.split("\n");
-  const needsTruncation = lines.length > TRUNCATION_LINE_LIMIT;
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const displayContent =
-    needsTruncation && !isExpanded
-      ? lines.slice(0, TRUNCATION_LINE_LIMIT).join("\n") + "\n\u2026"
-      : content;
-
-  return (
-    <div className="space-y-1">
-      <span className="font-medium text-muted-foreground">{label}</span>
-      <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted/40 p-2 font-mono text-foreground">
-        {displayContent}
-      </pre>
-      {needsTruncation && (
-        <button
-          type="button"
-          onClick={() => setIsExpanded((v) => !v)}
-          className="text-primary hover:text-primary/80 text-xs font-medium transition-colors"
-        >
-          {isExpanded
-            ? "Show less"
-            : `Show all ${lines.length} lines`}
-        </button>
-      )}
-    </div>
-  );
-}
-
-function CollapsiblePre({
-  content,
-  className,
-}: {
-  content: string;
-  className?: string;
-}) {
-  const lines = content.split("\n");
-  const needsTruncation = lines.length > TRUNCATION_LINE_LIMIT;
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const displayContent =
-    needsTruncation && !isExpanded
-      ? lines.slice(0, TRUNCATION_LINE_LIMIT).join("\n") + "\n\u2026"
-      : content;
-
-  return (
-    <>
-      <pre className={cn("whitespace-pre-wrap break-words font-mono", className)}>
-        {displayContent}
-      </pre>
-      {needsTruncation && (
-        <button
-          type="button"
-          onClick={() => setIsExpanded((v) => !v)}
-          className="mt-1 text-primary hover:text-primary/80 text-xs font-medium transition-colors"
-        >
-          {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
-        </button>
-      )}
-    </>
-  );
-}
-
-function FilePathIcon() {
-  return (
-    <svg
-      width="10"
-      height="10"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
-      aria-hidden="true"
-    >
-      <path d="M7 1H3C2.45 1 2 1.45 2 2V10C2 10.55 2.45 11 3 11H9C9.55 11 10 10.55 10 10V4L7 1Z" />
-      <path d="M7 1V4H10" />
-    </svg>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Utilities
 // ---------------------------------------------------------------------------
 
-function extractWriteContent(toolCall: ToolCall): string | null {
-  if (!toolCall.args) return null;
-  const fields = ["contents", "content", "file_content", "new_text", "new_string", "replacement"];
-  for (const field of fields) {
-    const val = toolCall.args[field];
-    if (typeof val === "string" && val.length > 0) return val;
-  }
-  return null;
-}
-
-function formatJson(obj: object): string {
-  try {
-    return JSON.stringify(obj, null, 2);
-  } catch {
-    return String(obj);
-  }
-}
-
-function formatResult(result: string): string {
-  try {
-    const parsed = JSON.parse(result);
-    return JSON.stringify(parsed, null, 2);
-  } catch {
-    return result;
-  }
-}
-
 /**
  * Returns a human-readable duration string from two ISO 8601
  * timestamps. Returns `null` when either timestamp is empty or

package/src/execution/ToolCallGroup.tsx

@@ -86,8 +86,9 @@ function defaultFormatSummary(
   status: AggregateStatus,
 ): string {
   if (toolCalls.length === 1) {
-    const cat = resolveToolCategory(toolCalls[0].name);
-    const primary = extractPrimaryArg(toolCalls[0]);
+    const tc = toolCalls[0];
+    const cat = resolveToolCategory(tc.name, tc.mcpServerSlug);
+    const primary = extractPrimaryArg(tc);
     if (primary) {
       const truncated =
         primary.length > 60 ? primary.slice(0, 57) + "\u2026" : primary;