@stigmer/react 0.0.52 → 0.0.54

package/src/execution/file-path-resolver.ts

@@ -62,7 +62,15 @@ export function resolveGitBrowseUrl(
   if (!repoPath) return null;
 
   const ref = commit || branch || "HEAD";
-  const cleanRelPath = relPath.replace(/^\/+/, "");
+  let cleanRelPath = relPath.replace(/^\/+/, "");
+
+  // Guard against relPath that accidentally duplicates the org/repo
+  // already encoded in gitUrl (e.g. relPath = "acme/app/src/main.go"
+  // when repoPath is "acme/app"). Strip the redundant prefix so the
+  // final URL doesn't contain the repo path twice.
+  if (cleanRelPath.startsWith(repoPath + "/")) {
+    cleanRelPath = cleanRelPath.slice(repoPath.length + 1);
+  }
 
   return `https://github.com/${repoPath}/blob/${ref}/${cleanRelPath}`;
 }
@@ -83,9 +91,9 @@ export type ResolvedPathAction =
  * 1. **Platform paths** (`.stigmer/` prefix) → copy raw path.
  * 2. **Workspace paths** → match against workspace entries:
  *    - Single entry: treat path as relative to that entry.
- *    - Multiple entries: match first path segment against entry names.
- *      Unmatched segments fall back to the first entry (optimistic —
- *      single-workspace sessions are the common case).
+ *    - Multiple entries: scan path segments for an entry name match
+ *      (handles org-prefixed paths like `plantonhq/agent-fleet/...`).
+ *      Unmatched paths fall back to the first entry.
  * 3. **Git source** → construct GitHub blob URL.
  * 4. **Local source** → join with absolute local path for copy.
  * 5. **Fallback** → copy the raw path.
@@ -139,8 +147,11 @@ export function resolvePathAction(
 /**
  * Matches a workspace-relative path against entries. With a single
  * entry the path is used as-is. With multiple entries the first path
- * segment is tested against entry names; unmatched paths fall back to
- * the first entry (same strategy as the CLI).
+ * segment is tested against entry names. When the first segment
+ * doesn't match, deeper segments are scanned — this handles tool-call
+ * paths that embed an org prefix (e.g. `plantonhq/agent-fleet/...`
+ * where the entry name is `agent-fleet`). Unmatched paths fall back
+ * to the first entry.
  */
 function matchWorkspaceEntry(
   relPath: string,
@@ -150,13 +161,14 @@ function matchWorkspaceEntry(
     return { entry: entries[0], relPath };
   }
 
-  const slashIdx = relPath.indexOf("/");
-  const firstSegment = slashIdx >= 0 ? relPath.slice(0, slashIdx) : relPath;
+  const segments = relPath.split("/");
 
-  for (const entry of entries) {
-    if (entry.name === firstSegment) {
-      const rest = slashIdx >= 0 ? relPath.slice(slashIdx + 1) : "";
-      return { entry, relPath: rest };
+  for (let i = 0; i < segments.length; i++) {
+    for (const entry of entries) {
+      if (entry.name === segments[i]) {
+        const rest = segments.slice(i + 1).join("/");
+        return { entry, relPath: rest };
+      }
     }
   }
 

package/src/execution/index.ts

@@ -19,6 +19,12 @@ export type { UseExecutionArtifactsReturn } from "./useExecutionArtifacts";
 export { useArtifactContent } from "./useArtifactContent";
 export type { UseArtifactContentReturn } from "./useArtifactContent";
 
+export { useWorkspaceWriteBacks } from "./useWorkspaceWriteBacks";
+export type { UseWorkspaceWriteBacksReturn } from "./useWorkspaceWriteBacks";
+
+export { WriteBackCard } from "./WriteBackCard";
+export type { WriteBackCardProps } from "./WriteBackCard";
+
 export {
   isTextArtifact,
   isArtifactExpired,
@@ -41,6 +47,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";
 
@@ -80,10 +110,14 @@ export type { ArtifactPreviewModalProps } from "./ArtifactPreviewModal";
 export { ArtifactsWidget } from "./ArtifactsWidget";
 export type { ArtifactsWidgetProps } from "./ArtifactsWidget";
 
+export { WriteBacksWidget } from "./WriteBacksWidget";
+export type { WriteBacksWidgetProps } from "./WriteBacksWidget";
+
 export {
   resolveToolCategory,
   extractPrimaryArg,
   extractPrimaryArgFromPreview,
+  humanizeToolName,
 } from "./tool-categories";
 export type { ToolCategory, ToolCategoryInfo } from "./tool-categories";
 
@@ -93,6 +127,10 @@ export type { FilePathLinkProps } from "./FilePathLink";
 export { FilePathContext } from "./FilePathContext";
 export type { FilePathContextValue } from "./FilePathContext";
 
+export { normalizeSandboxPaths } from "./sandbox-path-normalizer";
+export { SandboxContext, useSandboxNormalize } from "./SandboxContext";
+export type { SandboxContextValue } from "./SandboxContext";
+
 export { classifyPath, resolveGitBrowseUrl, resolvePathAction } from "./file-path-resolver";
 export type { PathClassification, ResolvedPathAction } from "./file-path-resolver";
 

package/src/execution/sandbox-path-normalizer.ts

@@ -0,0 +1,80 @@
+/**
+ * Display-time normalization for sandbox workspace paths.
+ *
+ * Mirrors the Python `humanize_sandbox_paths` in
+ * `graphton.core.backends.platform_mount` — same semantics, same
+ * replacement order.  The SDK version acts as a safety net for
+ * historical data (persisted before backend humanization was added)
+ * and streaming edge cases.
+ *
+ * @module
+ */
+
+/**
+ * Replace absolute sandbox workspace paths with workspace-relative
+ * display paths.
+ *
+ * Performs three ordered replacements:
+ *
+ * 1. `workspaceRoot + "/"` → empty string (makes paths workspace-relative)
+ * 2. `workspaceRoot` (exact) → `"."` (the workspace root itself)
+ * 3. Parent of `workspaceRoot` (sandbox home) → `"~"` (Unix convention)
+ *
+ * Returns `text` unchanged when `workspaceRoot` is empty.
+ *
+ * @example
+ * ```ts
+ * normalizeSandboxPaths(
+ *   "ls /home/daytona/workspace/plantonhq/",
+ *   "/home/daytona/workspace",
+ * );
+ * // => "ls plantonhq/"
+ *
+ * normalizeSandboxPaths(
+ *   "cd /home/daytona/workspace && ls",
+ *   "/home/daytona/workspace",
+ * );
+ * // => "cd . && ls"
+ *
+ * normalizeSandboxPaths(
+ *   "cat /home/daytona/.bashrc",
+ *   "/home/daytona/workspace",
+ * );
+ * // => "cat ~/.bashrc"
+ * ```
+ */
+export function normalizeSandboxPaths(
+  text: string,
+  workspaceRoot: string,
+): string {
+  if (!text || !workspaceRoot) return text;
+
+  const wsRoot = workspaceRoot.replace(/\/+$/, "");
+
+  // 1) Strip workspace root prefix (with trailing slash) → workspace-relative
+  text = replaceAll(text, wsRoot + "/", "");
+
+  // 2) Replace bare workspace root → "."
+  text = replaceAll(text, wsRoot, ".");
+
+  // 3) Replace sandbox home prefix → "~"
+  const lastSlash = wsRoot.lastIndexOf("/");
+  if (lastSlash > 0) {
+    const sandboxHome = wsRoot.slice(0, lastSlash);
+    text = replaceAll(text, sandboxHome + "/", "~/");
+    text = replaceAll(text, sandboxHome, "~");
+  }
+
+  return text;
+}
+
+function replaceAll(text: string, search: string, replacement: string): string {
+  if (!search) return text;
+  let result = text;
+  let idx = result.indexOf(search);
+  while (idx !== -1) {
+    result = result.slice(0, idx) + replacement + result.slice(idx + search.length);
+    idx = result.indexOf(search, idx + replacement.length);
+  }
+  return result;
+}

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;
+  }
+}

package/src/execution/tool-rendering-primitives.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@stigmer/theme";
+
+/**
+ * Shared truncation threshold for all collapsible tool rendering
+ * primitives. Applied consistently across detail views and approval
+ * card previews.
+ */
+export const TRUNCATION_LINE_LIMIT = 10;
+
+// ---------------------------------------------------------------------------
+// CollapsibleCode — labeled code block with line-based truncation
+// ---------------------------------------------------------------------------
+
+export interface CollapsibleCodeProps {
+  readonly label: string;
+  readonly content: string;
+  readonly className?: string;
+}
+
+/**
+ * A labeled `<pre>` block with automatic line-based truncation and
+ * an expand/collapse toggle.
+ *
+ * Used for tool arguments, file content previews, and result blocks
+ * across both the detail view and the approval card.
+ */
+export function CollapsibleCode({ label, content, className }: CollapsibleCodeProps) {
+  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={cn("space-y-1", className)}>
+      <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-xs font-medium text-primary transition-colors hover:text-primary/80"
+        >
+          {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CollapsiblePre — raw pre with line-based truncation (no label/border)
+// ---------------------------------------------------------------------------
+
+export interface CollapsiblePreProps {
+  readonly content: string;
+  readonly className?: string;
+}
+
+/**
+ * A bare `<pre>` element with line-based truncation. Unlike
+ * {@link CollapsibleCode}, this has no label, border, or background
+ * — the caller controls container styling via `className`.
+ *
+ * Pass container styles (border, background, max-height) through
+ * `className` when rendering standalone; omit when the parent
+ * already provides a styled container (e.g. terminal blocks).
+ */
+export function CollapsiblePre({ content, className }: CollapsiblePreProps) {
+  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-xs font-medium text-primary transition-colors hover:text-primary/80"
+        >
+          {isExpanded ? "Show less" : `Show all ${lines.length} lines`}
+        </button>
+      )}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CollapsibleJsonBlock — chevron-toggled JSON section
+// ---------------------------------------------------------------------------
+
+export interface CollapsibleJsonBlockProps {
+  readonly label: string;
+  readonly content: string;
+}
+
+/**
+ * A collapsible JSON section with a chevron toggle. Initially
+ * collapsed, showing the label and line count. Useful for complex
+ * (non-scalar) tool arguments.
+ */
+export function CollapsibleJsonBlock({ label, content }: CollapsibleJsonBlockProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const lines = content.split("\n");
+  const isLong = lines.length > 3;
+
+  return (
+    <div className="space-y-1">
+      <button
+        type="button"
+        onClick={() => setIsExpanded((v) => !v)}
+        className="flex items-center gap-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <svg
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(
+            "shrink-0 transition-transform duration-150",
+            isExpanded && "rotate-90",
+          )}
+          aria-hidden="true"
+        >
+          <path d="M2 1L6 4L2 7" />
+        </svg>
+        {label}
+        {!isExpanded && isLong && (
+          <span className="font-normal text-muted-foreground/60">
+            ({lines.length} lines)
+          </span>
+        )}
+      </button>
+      {isExpanded && (
+        <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">
+          {content}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons
+// ---------------------------------------------------------------------------
+
+/** Small document icon for file path displays (10x10). */
+export 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>
+  );
+}
+
+/** MCP server node/link icon (10x10). */
+export function McpServerIcon() {
+  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"
+      aria-hidden="true"
+    >
+      <circle cx="6" cy="3" r="1.5" />
+      <circle cx="6" cy="9" r="1.5" />
+      <path d="M6 4.5V7.5" />
+      <path d="M3 6H4.5" />
+      <path d="M7.5 6H9" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared utilities
+// ---------------------------------------------------------------------------
+
+/** Safely serialise an object to pretty JSON. */
+export function formatJson(obj: unknown): string {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch {
+    return String(obj);
+  }
+}
+
+/** Pretty-print a result string if it's valid JSON, otherwise return as-is. */
+export function formatResult(result: string): string {
+  try {
+    const parsed = JSON.parse(result);
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return result;
+  }
+}
+
+/** Detect scalar values (string, number, boolean). */
+export function isScalar(value: unknown): value is string | number | boolean {
+  const t = typeof value;
+  return t === "string" || t === "number" || t === "boolean";
+}
+
+/**
+ * Title-case a snake_case or camelCase argument key for display.
+ *
+ * @example
+ * humanizeArgKey("mcp_server_slug") // "Mcp Server Slug"
+ */
+export function humanizeArgKey(key: string): string {
+  return key
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .replace(/\b[a-z]/g, (c) => c.toUpperCase());
+}

package/src/execution/useArtifactContent.ts

@@ -80,6 +80,10 @@ export interface UseArtifactContentReturn {
  * @param storageKey - Storage key from `ExecutionArtifact.storageKey`, or `null` to skip.
  * @param entryPath - For directory artifacts: relative path of a file within
  *   the archive to extract. `null` returns the full artifact (existing behavior).
+ * @param contentHash - SHA-256 hex digest from `ExecutionArtifact.contentHash`.
+ *   When the same file is overwritten during execution, the `storageKey` stays
+ *   stable but `contentHash` changes, triggering a re-fetch so the UI never
+ *   shows stale content. Pass `undefined` or omit for backwards compatibility.
  *
  * @see useExecutionArtifacts — extracts artifact metadata from an execution
  * @see isTextArtifact — heuristic for whether content is fetchable as text
@@ -88,6 +92,7 @@ export function useArtifactContent(
   executionId: string | null,
   storageKey: string | null,
   entryPath?: string | null,
+  contentHash?: string,
 ): UseArtifactContentReturn {
   const stigmer = useStigmer();
 
@@ -150,7 +155,7 @@ export function useArtifactContent(
     return () => {
       cancelled.current = true;
     };
-  }, [executionId, storageKey, entryPath, stigmer, fetchKey]);
+  }, [executionId, storageKey, entryPath, contentHash, stigmer, fetchKey]);
 
   return { content, contentType, isTruncated, isLoading, error, refetch };
 }