@stigmer/react 0.0.52 → 0.0.53

package/src/execution/McpToolDetail.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { cn } from "@stigmer/theme";
+import { formatDuration } from "./ToolCallDetail";
+import { humanizeToolName } from "./tool-categories";
+import {
+  CollapsiblePre,
+  CollapsibleJsonBlock,
+  McpServerIcon,
+  formatJson,
+  isScalar,
+  humanizeArgKey,
+} from "./tool-rendering-primitives";
+
+export interface McpToolDetailProps {
+  readonly toolCall: ToolCall;
+  readonly className?: string;
+}
+
+/**
+ * MCP-aware detail renderer for tool calls originating from an MCP
+ * server.
+ *
+ * Replaces the generic "dump args + result as raw JSON" fallback
+ * with structured formatting:
+ *
+ * - **Arguments** are rendered as a labelled key-value list.
+ *   Scalars display inline; objects/arrays collapse into formatted
+ *   JSON blocks.
+ * - **Results** are parsed through {@link parseMcpResult} which
+ *   handles MCP content-block arrays, embedded JSON, and Python
+ *   repr artefacts before rendering.
+ *
+ * @example
+ * ```tsx
+ * <McpToolDetail toolCall={toolCall} />
+ * ```
+ */
+export function McpToolDetail({ toolCall, className }: McpToolDetailProps) {
+  const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
+
+  return (
+    <div className={cn("space-y-3 text-xs", className)}>
+      <McpMetadataRow
+        mcpServerSlug={toolCall.mcpServerSlug}
+        toolName={toolCall.name}
+        duration={duration}
+      />
+
+      {toolCall.args && Object.keys(toolCall.args).length > 0 && (
+        <McpArgsView args={toolCall.args as Record<string, unknown>} />
+      )}
+
+      {toolCall.result && (
+        <McpResultView result={toolCall.result} />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Metadata
+// ---------------------------------------------------------------------------
+
+export function McpMetadataRow({
+  mcpServerSlug,
+  toolName,
+  duration,
+}: {
+  mcpServerSlug: string;
+  toolName: string;
+  duration: string | null;
+}) {
+  const hasMetadata = mcpServerSlug || duration;
+  if (!hasMetadata) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
+      {mcpServerSlug && (
+        <span className="inline-flex items-center gap-1.5 rounded bg-muted px-1.5 py-0.5 font-mono">
+          <McpServerIcon />
+          {mcpServerSlug}
+          <span className="text-muted-foreground/60">/</span>
+          <span className="text-foreground">{humanizeToolName(toolName)}</span>
+        </span>
+      )}
+      {duration && <span>{duration}</span>}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Arguments — structured key-value rendering
+// ---------------------------------------------------------------------------
+
+export function McpArgsView({ args }: { args: Record<string, unknown> }) {
+  const entries = Object.entries(args);
+  if (entries.length === 0) return null;
+
+  const scalars: [string, string][] = [];
+  const complex: [string, unknown][] = [];
+
+  for (const [key, value] of entries) {
+    if (isScalar(value)) {
+      scalars.push([key, String(value)]);
+    } else {
+      complex.push([key, value]);
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <span className="font-medium text-muted-foreground">Arguments</span>
+
+      {scalars.length > 0 && (
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md border border-border bg-muted/30 px-2.5 py-2">
+          {scalars.map(([key, value]) => (
+            <ScalarRow key={key} label={key} value={value} />
+          ))}
+        </dl>
+      )}
+
+      {complex.map(([key, value]) => (
+        <CollapsibleJsonBlock
+          key={key}
+          label={humanizeArgKey(key)}
+          content={formatJson(value)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ScalarRow({ label, value }: { label: string; value: string }) {
+  const isMultiline = value.includes("\n");
+
+  return (
+    <>
+      <dt className="whitespace-nowrap font-mono text-muted-foreground">
+        {humanizeArgKey(label)}
+      </dt>
+      {isMultiline ? (
+        <dd className="min-w-0">
+          <pre className="whitespace-pre-wrap break-words rounded border border-border bg-muted/40 px-2 py-1 font-mono text-foreground">
+            {value}
+          </pre>
+        </dd>
+      ) : (
+        <dd className="min-w-0 truncate font-mono text-foreground" title={value}>
+          {value}
+        </dd>
+      )}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Result — intelligent parsing
+// ---------------------------------------------------------------------------
+
+function McpResultView({ result }: { result: string }) {
+  const parsed = parseMcpResult(result);
+
+  return (
+    <div className="space-y-1">
+      <span className="font-medium text-muted-foreground">Result</span>
+      <CollapsiblePre
+        content={parsed}
+        className="max-h-80 overflow-auto rounded-md border border-border bg-muted/40 p-2 text-foreground"
+      />
+    </div>
+  );
+}
+
+/**
+ * Extracts human-readable content from an MCP tool result string.
+ *
+ * Handles three common formats that arrive from the backend:
+ *
+ * 1. **MCP content-block array** — `[{"type":"text","text":"..."}]`.
+ *    Text parts are extracted and, if they are themselves valid
+ *    JSON, pretty-printed.
+ * 2. **Python repr** — `[{'type': 'text', 'text': '...'}]`. Single
+ *    quotes are normalised to double quotes before parsing.
+ * 3. **Plain JSON / text** — returned formatted when valid JSON,
+ *    or as-is otherwise.
+ */
+export function parseMcpResult(result: string): string {
+  const trimmed = result.trim();
+
+  // Fast path: try standard JSON parse first.
+  const jsonParsed = tryParseJson(trimmed);
+  if (jsonParsed !== undefined) {
+    const extracted = tryExtractContentBlocks(jsonParsed);
+    if (extracted !== null) return extracted;
+    return JSON.stringify(jsonParsed, null, 2);
+  }
+
+  // Attempt to fix Python repr (single-quoted dicts/lists).
+  const fixed = tryFixPythonRepr(trimmed);
+  if (fixed !== undefined) {
+    const extracted = tryExtractContentBlocks(fixed);
+    if (extracted !== null) return extracted;
+    return JSON.stringify(fixed, null, 2);
+  }
+
+  return trimmed;
+}
+
+// ---------------------------------------------------------------------------
+// Content-block extraction
+// ---------------------------------------------------------------------------
+
+interface McpContentBlock {
+  type: string;
+  text?: string;
+}
+
+function isMcpContentBlockArray(val: unknown): val is McpContentBlock[] {
+  if (!Array.isArray(val)) return false;
+  if (val.length === 0) return false;
+  return val.every(
+    (item) =>
+      typeof item === "object" &&
+      item !== null &&
+      "type" in item &&
+      typeof (item as Record<string, unknown>).type === "string",
+  );
+}
+
+function tryExtractContentBlocks(parsed: unknown): string | null {
+  if (!isMcpContentBlockArray(parsed)) return null;
+
+  const textParts: string[] = [];
+  for (const block of parsed) {
+    if (block.type === "text" && typeof block.text === "string") {
+      const innerJson = tryParseJson(block.text.trim());
+      if (innerJson !== undefined) {
+        textParts.push(JSON.stringify(innerJson, null, 2));
+      } else {
+        textParts.push(block.text);
+      }
+    }
+  }
+
+  return textParts.length > 0 ? textParts.join("\n\n") : null;
+}
+
+// ---------------------------------------------------------------------------
+// JSON / Python repr helpers
+// ---------------------------------------------------------------------------
+
+function tryParseJson(str: string): unknown | undefined {
+  try {
+    return JSON.parse(str);
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Attempts to convert a Python repr string (single-quoted
+ * dicts/lists with True/False/None) into a parsed JS value.
+ *
+ * This is intentionally conservative: it only handles the
+ * most common patterns and bails on ambiguity.
+ */
+function tryFixPythonRepr(str: string): unknown | undefined {
+  if (!str.startsWith("[") && !str.startsWith("{")) return undefined;
+
+  let fixed = str
+    .replace(/'/g, '"')
+    .replace(/\bTrue\b/g, "true")
+    .replace(/\bFalse\b/g, "false")
+    .replace(/\bNone\b/g, "null");
+
+  // Handle trailing commas before ] or } (common in Python repr).
+  fixed = fixed.replace(/,\s*([}\]])/g, "$1");
+
+  return tryParseJson(fixed);
+}
+

package/src/execution/ToolArgsView.tsx

@@ -0,0 +1,277 @@
+"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 {
+  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 }) {
+  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>
+        {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;
+}