@stigmer/react 0.0.52 → 0.0.54

package/src/execution/ArtifactsWidget.tsx

@@ -1,22 +1,27 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
-import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
-import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
-import { useExecutionArtifacts } from "./useExecutionArtifacts";
-import { isTerminalPhase } from "./execution-phases";
+import {
+  useSessionArtifacts,
+  type SessionArtifactEntry,
+} from "../session/useSessionArtifacts";
 import { ArtifactCard } from "./ArtifactCard";
 import { ArtifactPreviewModal } from "./ArtifactPreviewModal";
 import type { ApplyResourceResult } from "../library/useApplyResource";
 
 export interface ArtifactsWidgetProps {
   /**
-   * The execution to display artifacts for. Renders nothing when `null`
-   * or when the execution has no artifacts.
+   * All executions for the current session — both completed and
+   * actively streaming. The widget aggregates artifacts across every
+   * execution, deduplicates by `sandbox_path` (latest wins), and
+   * sorts alphabetically by name.
+   *
+   * Renders nothing when the list is empty or no execution has
+   * artifacts.
    */
-  readonly execution: AgentExecution | null;
+  readonly executions: readonly AgentExecution[];
   /** Organization slug for the "Apply to [org]" CTA in the preview modal. */
   readonly org: string;
   /**
@@ -31,24 +36,22 @@ export interface ArtifactsWidgetProps {
 }
 
 /**
- * Right-sidebar widget that surfaces execution artifacts as a compact
- * card list with automatic Stigmer resource detection.
+ * Right-sidebar widget that surfaces all artifacts produced during a
+ * session as a unified, alphabetically-sorted file listing.
+ *
+ * Artifacts from multiple executions are aggregated and deduplicated
+ * by `sandbox_path` (latest execution wins), presenting the user with
+ * a file-explorer-like view of the conversation's output — no
+ * execution/turn concepts are exposed.
  *
  * Composes {@link ArtifactCard} (summary + detection badges) with
  * {@link ArtifactPreviewModal} (full content review + Apply/Push CTA).
  * The card's "Preview" action opens the modal; the modal is the sole
  * location for Apply/Push actions (review-before-apply pattern).
  *
- * Derives all data from the `execution` prop:
- *
- * - **Artifacts**: extracted via {@link useExecutionArtifacts}
- * - **Terminal phase**: derived via {@link isTerminalPhase} — controls
- *   whether the Apply CTA in the modal is enabled
- * - **Execution ID**: read from `execution.metadata.id`
- *
- * Returns `null` when the execution is `null` or has no artifacts,
- * matching the conditional-render pattern of {@link ExecutionProgress}
- * and {@link ExecutionCostSummary}.
+ * Returns `null` when the executions list is empty or no execution
+ * has artifacts, matching the conditional-render pattern of
+ * {@link ExecutionProgress} and {@link ExecutionCostSummary}.
  *
  * Renders without card chrome — each {@link ArtifactCard} provides its
  * own border and padding. The consumer controls the container styling
@@ -58,10 +61,13 @@ export interface ArtifactsWidgetProps {
  *
  * @example
  * ```tsx
- * const stream = useExecutionStream(executionId);
+ * const conv = useSessionConversation(sessionId, org);
  *
  * <ArtifactsWidget
- *   execution={stream.execution}
+ *   executions={[
+ *     ...conv.completedExecutions,
+ *     ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
+ *   ]}
  *   org={activeOrg}
  *   onApplied={(result) => toast(`${result.kind} applied`)}
  * />
@@ -69,29 +75,30 @@ export interface ArtifactsWidgetProps {
  *
  * @see {@link ArtifactCard} — compact summary card per artifact
  * @see {@link ArtifactPreviewModal} — full preview with Apply/Push CTA
- * @see {@link useExecutionArtifacts} — headless artifact extraction hook
+ * @see {@link useSessionArtifacts} — headless session-level artifact aggregation hook
+ * @see {@link useExecutionArtifacts} — headless single-execution artifact extraction hook
  */
 export function ArtifactsWidget({
-  execution,
+  executions,
   org,
   onApplied,
   className,
 }: ArtifactsWidgetProps) {
   const { artifacts, hasArtifacts, artifactCount } =
-    useExecutionArtifacts(execution);
+    useSessionArtifacts(executions);
 
-  const [previewArtifact, setPreviewArtifact] =
-    useState<ExecutionArtifact | null>(null);
+  const [previewEntry, setPreviewEntry] =
+    useState<SessionArtifactEntry | null>(null);
 
-  if (!hasArtifacts) return null;
+  const handlePreview = useCallback(
+    (entry: SessionArtifactEntry) => setPreviewEntry(entry),
+    [],
+  );
 
-  const phase =
-    execution?.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
-  const isTerminal = isTerminalPhase(phase);
-  const executionId = execution?.metadata?.id ?? "";
+  if (!hasArtifacts) return null;
 
   return (
-    <section aria-label="Execution artifacts" className={cn(className)}>
+    <section aria-label="Artifacts" className={cn(className)}>
       <div className="mb-2 flex items-center gap-2">
         <h3 className="text-sm font-medium text-foreground">Artifacts</h3>
         <span className="inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">
@@ -100,26 +107,27 @@ export function ArtifactsWidget({
       </div>
 
       <div role="list" className="space-y-2">
-        {artifacts.map((artifact) => (
-          <div key={artifact.storageKey} role="listitem">
+        {artifacts.map((entry) => (
+          <div key={entry.artifact.storageKey} role="listitem">
             <ArtifactCard
-              artifact={artifact}
-              executionId={executionId}
+              artifact={entry.artifact}
+              executionId={entry.executionId}
               org={org}
-              onPreview={setPreviewArtifact}
+              hasNameCollision={entry.hasNameCollision}
+              onPreview={() => handlePreview(entry)}
             />
           </div>
         ))}
       </div>
 
-      {previewArtifact && (
+      {previewEntry && (
         <ArtifactPreviewModal
-          artifact={previewArtifact}
-          executionId={executionId}
+          artifact={previewEntry.artifact}
+          executionId={previewEntry.executionId}
           org={org}
-          isTerminal={isTerminal}
+          isTerminal={previewEntry.isTerminal}
           open
-          onClose={() => setPreviewArtifact(null)}
+          onClose={() => setPreviewEntry(null)}
           onApplied={onApplied}
         />
       )}

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/MessageThread.tsx

@@ -22,6 +22,7 @@ import { SetupProgress } from "./SetupProgress";
 import { ApprovalCard } from "./ApprovalCard";
 import { FilePathContext, type FilePathContextValue } from "./FilePathContext";
 import type { ResolvedPathAction } from "./file-path-resolver";
+import { SandboxContext, type SandboxContextValue } from "./SandboxContext";
 
 export interface MessageThreadProps {
   /** Completed executions in chronological order. */
@@ -87,6 +88,15 @@ export interface MessageThreadProps {
     path: string,
     resolved: ResolvedPathAction,
   ) => void;
+  /**
+   * Absolute sandbox workspace root (e.g. `/home/daytona/workspace`).
+   * When provided, shell commands and tool output normalize absolute
+   * sandbox paths to workspace-relative display paths.
+   *
+   * Pass an empty string or omit for local sessions where paths are
+   * the user's own filesystem (no normalization needed).
+   */
+  readonly sandboxWorkspaceRoot?: string;
 }
 
 const AUTO_SCROLL_THRESHOLD_PX = 80;
@@ -266,6 +276,7 @@ export function MessageThread({
   dismissedApprovalIds,
   workspaceEntries,
   onFilePathClick,
+  sandboxWorkspaceRoot,
 }: MessageThreadProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const isNearBottomRef = useRef(true);
@@ -298,6 +309,11 @@ export function MessageThread({
     [workspaceEntries, onFilePathClick],
   );
 
+  const sandboxCtx = useMemo<SandboxContextValue>(
+    () => ({ sandboxWorkspaceRoot: sandboxWorkspaceRoot ?? "" }),
+    [sandboxWorkspaceRoot],
+  );
+
   return (
     <div
       ref={scrollRef}
@@ -314,6 +330,7 @@ export function MessageThread({
         className,
       )}
     >
+      <SandboxContext.Provider value={sandboxCtx}>
       <FilePathContext.Provider value={filePathCtx}>
         {items.map((item) => {
           switch (item.kind) {
@@ -370,6 +387,7 @@ export function MessageThread({
           }
         })}
       </FilePathContext.Provider>
+      </SandboxContext.Provider>
     </div>
   );
 }

package/src/execution/SandboxContext.ts

@@ -0,0 +1,47 @@
+import { createContext, useCallback, useContext } from "react";
+import { normalizeSandboxPaths } from "./sandbox-path-normalizer";
+
+/**
+ * Context value that carries the sandbox workspace root for display-time
+ * path normalization.
+ *
+ * Provided by {@link MessageThread} (or a platform builder's custom
+ * wrapper).  When no provider is present, path normalization is a no-op.
+ */
+export interface SandboxContextValue {
+  /**
+   * Absolute sandbox workspace root (e.g. `/home/daytona/workspace`).
+   * Empty string disables normalization (local mode, backward compat).
+   */
+  readonly sandboxWorkspaceRoot: string;
+}
+
+const DEFAULT_VALUE: SandboxContextValue = {
+  sandboxWorkspaceRoot: "",
+};
+
+export const SandboxContext =
+  createContext<SandboxContextValue>(DEFAULT_VALUE);
+
+/**
+ * Returns a stable normalizer function that replaces absolute sandbox
+ * paths in the given text with workspace-relative display paths.
+ *
+ * When `sandboxWorkspaceRoot` is empty (no provider or local mode),
+ * returns the identity function — zero overhead.
+ *
+ * @example
+ * ```tsx
+ * function ShellCommand({ command }: { command: string }) {
+ *   const normalize = useSandboxNormalize();
+ *   return <code>{normalize(command)}</code>;
+ * }
+ * ```
+ */
+export function useSandboxNormalize(): (text: string) => string {
+  const { sandboxWorkspaceRoot } = useContext(SandboxContext);
+  return useCallback(
+    (text: string) => normalizeSandboxPaths(text, sandboxWorkspaceRoot),
+    [sandboxWorkspaceRoot],
+  );
+}