@stigmer/react 0.0.52 → 0.0.53

package/src/execution/ToolCallDetail.tsx

@@ -1,28 +1,38 @@
 "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 { 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 +44,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 +65,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,38 +96,26 @@ 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);
 
   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>
@@ -128,17 +132,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 +142,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 +164,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 +187,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 +203,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 +210,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 +252,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;

package/src/execution/ToolCallItem.tsx

@@ -66,7 +66,7 @@ export function ToolCallItem({
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
   const isSubAgent = subAgentExecution != null;
 
-  const categoryInfo = resolveToolCategory(toolCall.name);
+  const categoryInfo = resolveToolCategory(toolCall.name, toolCall.mcpServerSlug);
   const CategoryIcon = CATEGORY_ICON[categoryInfo.category];
   const primaryArg = extractPrimaryArg(toolCall);
 
@@ -255,7 +255,7 @@ const STATUS_COLOR: Record<ItemStatus, string> = {
 // Category-specific icons (inline SVG, SDK pattern)
 // ---------------------------------------------------------------------------
 
-const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
+export const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
   shell: TerminalIcon,
   read: FileIcon,
   write: FilePenIcon,
@@ -265,6 +265,7 @@ const CATEGORY_ICON: Record<ToolCategory, () => React.JSX.Element> = {
   list: FolderIcon,
   think: BrainIcon,
   "sub-agent": BotIcon,
+  mcp: McpPlugIcon,
   unknown: WrenchIcon,
 };
 
@@ -355,6 +356,17 @@ function WrenchIcon() {
   );
 }
 
+function McpPlugIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 1.5V4" />
+      <path d="M8 1.5V4" />
+      <path d="M2.5 4H9.5V6.5C9.5 8.43 7.93 10 6 10C4.07 10 2.5 8.43 2.5 6.5V4Z" />
+      <path d="M6 10V11" />
+    </svg>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Status icons
 // ---------------------------------------------------------------------------

package/src/execution/index.ts

@@ -41,6 +41,30 @@ export type { ToolCallGroupProps } from "./ToolCallGroup";
 export { ToolCallDetail, formatDuration } from "./ToolCallDetail";
 export type { ToolCallDetailProps } from "./ToolCallDetail";
 
+export { McpToolDetail, McpArgsView, McpMetadataRow, parseMcpResult } from "./McpToolDetail";
+export type { McpToolDetailProps } from "./McpToolDetail";
+
+export { ToolArgsView } from "./ToolArgsView";
+export type { ToolArgsViewProps } from "./ToolArgsView";
+
+export {
+  CollapsibleCode,
+  CollapsiblePre,
+  CollapsibleJsonBlock,
+  FilePathIcon,
+  McpServerIcon,
+  TRUNCATION_LINE_LIMIT,
+  formatJson,
+  formatResult,
+  isScalar,
+  humanizeArgKey,
+} from "./tool-rendering-primitives";
+export type {
+  CollapsibleCodeProps,
+  CollapsiblePreProps,
+  CollapsibleJsonBlockProps,
+} from "./tool-rendering-primitives";
+
 export { ToolCallItem } from "./ToolCallItem";
 export type { ToolCallItemProps } from "./ToolCallItem";
 
@@ -84,6 +108,7 @@ export {
   resolveToolCategory,
   extractPrimaryArg,
   extractPrimaryArgFromPreview,
+  humanizeToolName,
 } from "./tool-categories";
 export type { ToolCategory, ToolCategoryInfo } from "./tool-categories";
 

package/src/execution/tool-categories.ts

@@ -6,6 +6,10 @@ import type { JsonObject } from "@bufbuild/protobuf";
  *
  * Mirrors the CLI's `toolDisplayMap` in
  * `client-apps/cli/pkg/toolrender/render.go`.
+ *
+ * `"mcp"` covers tools originating from an MCP server whose
+ * names are dynamic and cannot be statically listed in
+ * {@link TOOL_DISPLAY_MAP}.
  */
 export type ToolCategory =
   | "shell"
@@ -17,6 +21,7 @@ export type ToolCategory =
   | "list"
   | "think"
   | "sub-agent"
+  | "mcp"
   | "unknown";
 
 export interface ToolCategoryInfo {
@@ -68,10 +73,19 @@ const TOOL_DISPLAY_MAP: ReadonlyMap<string, ToolDisplayEntry> = new Map([
 
 /**
  * Resolves a tool name to its category metadata for type-aware
- * rendering. Returns a stable `"unknown"` entry for unrecognized
- * tools using the raw tool name as the label.
+ * rendering.
+ *
+ * When `mcpServerSlug` is provided and the tool name is not a
+ * known built-in, the tool is categorised as `"mcp"` with a
+ * human-readable label derived from the raw tool name.
+ *
+ * Falls back to `"unknown"` only when the tool is neither
+ * built-in nor MCP-originated.
  */
-export function resolveToolCategory(toolName: string): ToolCategoryInfo {
+export function resolveToolCategory(
+  toolName: string,
+  mcpServerSlug?: string,
+): ToolCategoryInfo {
   const entry = TOOL_DISPLAY_MAP.get(toolName);
   if (entry) {
     return {
@@ -81,6 +95,16 @@ export function resolveToolCategory(toolName: string): ToolCategoryInfo {
       fallbackArgFields: entry.fallbackFields ?? [],
     };
   }
+
+  if (mcpServerSlug) {
+    return {
+      category: "mcp",
+      label: humanizeToolName(toolName),
+      primaryArgField: "slug",
+      fallbackArgFields: ["name", "org"],
+    };
+  }
+
   return {
     category: "unknown",
     label: toolName,
@@ -89,6 +113,26 @@ export function resolveToolCategory(toolName: string): ToolCategoryInfo {
   };
 }
 
+/**
+ * Converts a snake_case or camelCase tool name into a
+ * human-readable title.
+ *
+ * @example
+ * humanizeToolName("apply_mcp_server") // "Apply MCP Server"
+ * humanizeToolName("deleteAgent")      // "Delete Agent"
+ */
+export function humanizeToolName(name: string): string {
+  return name
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .replace(/\b[a-z]/g, (c) => c.toUpperCase())
+    .replace(/\bMcp\b/gi, "MCP")
+    .replace(/\bApi\b/gi, "API")
+    .replace(/\bId\b/gi, "ID")
+    .replace(/\bUrl\b/gi, "URL")
+    .replace(/\bIam\b/gi, "IAM");
+}
+
 function extractArgValue(
   args: JsonObject | undefined,
   primary: string,
@@ -118,13 +162,12 @@ function extractArgValue(
 /**
  * Extracts the most relevant argument value from a tool call
  * based on its category (command for shell tools, path for file
- * tools, pattern for search tools, etc.).
+ * tools, slug for MCP tools, etc.).
  *
- * Returns `null` when the tool is unknown and has no arguments,
- * or when the expected argument fields are missing.
+ * Returns `null` when the tool has no recognised arguments.
  */
 export function extractPrimaryArg(toolCall: ToolCall): string | null {
-  const info = resolveToolCategory(toolCall.name);
+  const info = resolveToolCategory(toolCall.name, toolCall.mcpServerSlug);
   const result = extractArgValue(
     toolCall.args,
     info.primaryArgField,
@@ -133,7 +176,7 @@ export function extractPrimaryArg(toolCall: ToolCall): string | null {
 
   if (result) return result;
 
-  if (info.category === "unknown" && toolCall.args) {
+  if ((info.category === "unknown" || info.category === "mcp") && toolCall.args) {
     const keys = Object.keys(toolCall.args);
     if (keys.length > 0) {
       const val = toolCall.args[keys[0]];
@@ -152,6 +195,7 @@ export function extractPrimaryArg(toolCall: ToolCall): string | null {
 export function extractPrimaryArgFromPreview(
   toolName: string,
   argsPreview: string,
+  mcpServerSlug?: string,
 ): string | null {
   if (!argsPreview) return null;
 
@@ -159,7 +203,7 @@ export function extractPrimaryArgFromPreview(
     const parsed = JSON.parse(argsPreview);
     if (typeof parsed !== "object" || parsed === null) return null;
 
-    const info = resolveToolCategory(toolName);
+    const info = resolveToolCategory(toolName, mcpServerSlug);
     return extractArgValue(
       parsed as JsonObject,
       info.primaryArgField,
@@ -169,3 +213,39 @@ export function extractPrimaryArgFromPreview(
     return null;
   }
 }
+
+const WRITE_CONTENT_FIELDS = [
+  "contents",
+  "content",
+  "file_content",
+  "new_text",
+  "new_string",
+  "replacement",
+] as const;
+
+/**
+ * Extracts the file content body from a JSON `argsPreview` string
+ * for write/edit tool categories. Scans the same field names used
+ * by the post-execution {@link ToolCallDetail} renderer so that
+ * the approval preview matches the completed tool call display.
+ *
+ * Returns `null` if parsing fails or no content field is found.
+ */
+export function extractWriteContentFromPreview(
+  argsPreview: string,
+): string | null {
+  if (!argsPreview) return null;
+
+  try {
+    const parsed = JSON.parse(argsPreview);
+    if (typeof parsed !== "object" || parsed === null) return null;
+
+    for (const field of WRITE_CONTENT_FIELDS) {
+      const val = (parsed as Record<string, unknown>)[field];
+      if (typeof val === "string" && val.length > 0) return val;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}