@stigmer/react 0.0.53 → 0.0.55

package/src/execution/ArtifactsWidget.tsx

@@ -1,22 +1,27 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useMemo, 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,46 @@ 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);
+  // Store the dedup key (sandboxPath or name) instead of a snapshot of
+  // the full entry.  The actual entry is derived from the live artifacts
+  // list on every render, so the preview modal always reflects the
+  // latest artifact version — even when a newer execution publishes an
+  // updated artifact for the same path while the modal is open.
+  const [previewKey, setPreviewKey] = useState<string | null>(null);
 
-  if (!hasArtifacts) return null;
+  const previewEntry = useMemo<SessionArtifactEntry | null>(
+    () =>
+      previewKey !== null
+        ? artifacts.find(
+            (e) =>
+              (e.artifact.sandboxPath || e.artifact.name) === previewKey,
+          ) ?? null
+        : null,
+    [previewKey, artifacts],
+  );
+
+  const handlePreview = useCallback(
+    (entry: SessionArtifactEntry) =>
+      setPreviewKey(entry.artifact.sandboxPath || entry.artifact.name),
+    [],
+  );
 
-  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 +123,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={() => setPreviewKey(null)}
           onApplied={onApplied}
         />
       )}

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;
@@ -103,7 +113,7 @@ type ThreadItem =
   | { readonly kind: "phase-badge"; readonly phase: ExecutionPhase; readonly key: string }
   | { readonly kind: "pending-message"; readonly content: string; readonly key: string }
   | { readonly kind: "approval-request"; readonly pendingApproval: PendingApproval; readonly key: string }
-  | { readonly kind: "setup-progress"; readonly workspaceEntries: readonly WorkspaceEntry[]; readonly key: string };
+  | { readonly kind: "setup-progress"; readonly workspaceEntries: readonly WorkspaceEntry[]; readonly serverPhase?: string; readonly key: string };
 
 function hasAiMessages(execution: AgentExecution): boolean {
   const messages = execution.status?.messages;
@@ -186,9 +196,12 @@ function buildThreadItems(
       lastPhase === ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED) &&
     !hasAiMessages(activeStreamExecution)
   ) {
+    const serverPhase =
+      activeStreamExecution.status?.setupProgress?.currentPhase || undefined;
     items.push({
       kind: "setup-progress",
       workspaceEntries: workspaceEntries ?? [],
+      serverPhase,
       key: "setup-progress",
     });
   }
@@ -266,6 +279,7 @@ export function MessageThread({
   dismissedApprovalIds,
   workspaceEntries,
   onFilePathClick,
+  sandboxWorkspaceRoot,
 }: MessageThreadProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const isNearBottomRef = useRef(true);
@@ -298,6 +312,11 @@ export function MessageThread({
     [workspaceEntries, onFilePathClick],
   );
 
+  const sandboxCtx = useMemo<SandboxContextValue>(
+    () => ({ sandboxWorkspaceRoot: sandboxWorkspaceRoot ?? "" }),
+    [sandboxWorkspaceRoot],
+  );
+
   return (
     <div
       ref={scrollRef}
@@ -314,6 +333,7 @@ export function MessageThread({
         className,
       )}
     >
+      <SandboxContext.Provider value={sandboxCtx}>
       <FilePathContext.Provider value={filePathCtx}>
         {items.map((item) => {
           switch (item.kind) {
@@ -352,6 +372,7 @@ export function MessageThread({
                 <SetupProgress
                   key={item.key}
                   workspaceEntries={item.workspaceEntries}
+                  serverPhase={item.serverPhase}
                 />
               );
             case "pending-message":
@@ -370,6 +391,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],
+  );
+}

package/src/execution/SetupProgress.tsx

@@ -7,14 +7,25 @@ import { cn } from "@stigmer/theme";
 export interface SetupProgressProps {
   /**
    * Workspace entries from the session spec. When git-sourced entries
-   * are present, the indicator shows workspace-specific messaging
-   * (e.g. "Setting up workspace...") to match the backend's actual
-   * setup sequence.
+   * are present, the fallback indicator shows workspace-specific messaging
+   * (e.g. "Setting up workspace...").
    */
   readonly workspaceEntries?: readonly WorkspaceEntry[];
+  /**
+   * Server-reported setup phase label from
+   * `AgentExecutionStatus.setup_progress.current_phase`.
+   *
+   * When non-empty, rendered directly — the timer-based fallback is
+   * bypassed.  When absent or empty (older backends that don't emit
+   * setup progress), the component falls back to the time-based
+   * step sequence derived from `workspaceEntries`.
+   */
+  readonly serverPhase?: string;
   readonly className?: string;
 }
 
+/* ── Timer-based fallback (used when no serverPhase is available) ─── */
+
 interface SetupStep {
   readonly message: string;
   readonly durationMs: number;
@@ -55,28 +66,33 @@ function buildSteps(
  * Animated inline indicator shown in the message thread while an
  * execution is in the `PENDING` phase and no AI messages have arrived.
  *
- * Cycles through contextual status messages derived from the session
- * configuration (workspace entries, etc.) to communicate that the
- * backend is actively setting up the sandbox, cloning repositories,
- * merging environment variables, loading skills, and connecting MCP
- * servers.
+ * **Server-driven mode** — when the backend reports
+ * `setup_progress.current_phase` through the execution stream, the
+ * component renders the server-reported label directly.
  *
- * Uses time-based progression that approximates the backend's actual
- * setup sequence. A future backend-enriched phase (surfacing real
- * setup phase labels through the execution stream) can replace the
- * timer with server-reported progress.
+ * **Timer-based fallback** — when `serverPhase` is absent (older
+ * backends), the component cycles through contextual status messages
+ * derived from the session configuration on a fixed interval.
  *
  * All visual properties flow through `--stgm-*` tokens.
  *
  * @example
  * ```tsx
+ * // Server-driven (preferred)
+ * <SetupProgress serverPhase={execution.status?.setupProgress?.currentPhase} />
+ *
+ * // Fallback (no server phase available)
  * <SetupProgress workspaceEntries={session.spec?.workspaceEntries} />
  * ```
  */
 export function SetupProgress({
   workspaceEntries,
+  serverPhase,
   className,
 }: SetupProgressProps) {
+  const useServerPhase = !!serverPhase;
+
+  /* ── Timer-based fallback state ─────────────────────────────────── */
   const steps = useMemo(() => buildSteps(workspaceEntries), [workspaceEntries]);
   const [stepIndex, setStepIndex] = useState(0);
 
@@ -85,6 +101,7 @@ export function SetupProgress({
   }, [steps]);
 
   useEffect(() => {
+    if (useServerPhase) return;
     if (stepIndex >= steps.length - 1) return;
 
     const timer = setTimeout(() => {
@@ -92,9 +109,11 @@ export function SetupProgress({
     }, steps[stepIndex].durationMs);
 
     return () => clearTimeout(timer);
-  }, [stepIndex, steps]);
+  }, [useServerPhase, stepIndex, steps]);
 
-  const currentMessage = steps[Math.min(stepIndex, steps.length - 1)].message;
+  /* ── Resolve display message ────────────────────────────────────── */
+  const currentMessage =
+    serverPhase || steps[Math.min(stepIndex, steps.length - 1)].message;
 
   return (
     <div

package/src/execution/ToolArgsView.tsx

@@ -9,6 +9,7 @@ import {
 import type { ToolCategory, ToolCategoryInfo } from "./tool-categories";
 import { FilePathLink } from "./FilePathLink";
 import { McpArgsView, McpMetadataRow } from "./McpToolDetail";
+import { useSandboxNormalize } from "./SandboxContext";
 import {
   CollapsibleCode,
   FilePathIcon,
@@ -142,13 +143,14 @@ function CategoryArgsDispatch({
 // ---------------------------------------------------------------------------
 
 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>
-        {command}
+        {normalize(command)}
       </pre>
     </div>
   );

package/src/execution/ToolCallDetail.tsx

@@ -5,6 +5,7 @@ import { ToolCallStatus } from "@stigmer/protos/ai/stigmer/agentic/agentexecutio
 import { cn } from "@stigmer/theme";
 import { resolveToolCategory } from "./tool-categories";
 import { McpToolDetail } from "./McpToolDetail";
+import { useSandboxNormalize } from "./SandboxContext";
 import { ToolArgsView } from "./ToolArgsView";
 import {
   CollapsibleCode,
@@ -105,6 +106,7 @@ function CategoryRenderer({
 
 function ShellToolDetail({ toolCall }: { toolCall: ToolCall }) {
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
+  const normalize = useSandboxNormalize();
 
   return (
     <>
@@ -121,7 +123,7 @@ function ShellToolDetail({ toolCall }: { toolCall: ToolCall }) {
           <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>

package/src/execution/ToolCallItem.tsx

@@ -16,6 +16,7 @@ import {
   extractPrimaryArg,
   type ToolCategory,
 } from "./tool-categories";
+import { useSandboxNormalize } from "./SandboxContext";
 
 export interface ToolCallItemProps {
   readonly toolCall: ToolCall;
@@ -74,6 +75,7 @@ export function ToolCallItem({
     ? subAgentExecution.subject || subAgentExecution.name || categoryInfo.label
     : categoryInfo.label;
 
+  const normalize = useSandboxNormalize();
   const approvalBadge = getApprovalBadge(toolCall);
 
   // Completed/skipped Read items are non-expandable — the clickable
@@ -144,7 +146,11 @@ export function ToolCallItem({
     );
   }
 
-  const displaySubtitle = isSubAgent ? null : primaryArg;
+  const displaySubtitle = isSubAgent
+    ? null
+    : categoryInfo.category === "shell" && primaryArg
+      ? normalize(primaryArg)
+      : primaryArg;
 
   return (
     <div className={cn("border-b border-border/50 last:border-b-0", className)}>