@stigmer/react 0.0.53 → 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/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],
+  );
+}

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)}>

package/src/execution/WriteBackCard.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import type { WorkspaceWriteBack } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
+import { WorkspaceWriteBackPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
+import { cn } from "@stigmer/theme";
+
+export interface WriteBackCardProps {
+  /** The workspace write-back outcome to render. */
+  readonly writeBack: WorkspaceWriteBack;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * Renders a single workspace write-back outcome as a compact card.
+ *
+ * Shows the workspace entry name, branch, diff summary, phase
+ * indicator, and a "View PR" link when the pull request was
+ * successfully created. On failure, displays the error message.
+ *
+ * Themed via standard semantic tokens — no hardcoded colors, no
+ * Console dependencies. Embedders can theme this card through
+ * their Tailwind/CSS configuration.
+ *
+ * @example
+ * ```tsx
+ * const { writeBacks } = useWorkspaceWriteBacks(execution);
+ *
+ * {writeBacks.map((wb) => (
+ *   <WriteBackCard
+ *     key={wb.workspaceEntryName}
+ *     writeBack={wb}
+ *   />
+ * ))}
+ * ```
+ *
+ * @see useWorkspaceWriteBacks — extracts write-back data from an execution
+ */
+export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
+  const isFailed =
+    writeBack.phase === WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED;
+  const hasPR = !!writeBack.pullRequestUrl;
+
+  return (
+    <div
+      role="article"
+      aria-label={`Write-back: ${writeBack.workspaceEntryName}`}
+      className={cn(
+        "rounded-md border p-3",
+        isFailed ? "border-destructive/40" : "border-border",
+        className,
+      )}
+    >
+      {/* Header: icon + workspace name + phase badge */}
+      <div className="flex items-start gap-2">
+        <span className="mt-0.5 shrink-0 text-muted-foreground">
+          <GitBranchIcon />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="truncate text-sm font-medium text-foreground">
+              {writeBack.workspaceEntryName}
+            </span>
+            <PhaseBadge phase={writeBack.phase} />
+          </div>
+          {writeBack.branchName && (
+            <div className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
+              {writeBack.branchName}
+              {writeBack.baseBranch && (
+                <span className="text-muted-foreground/60">
+                  {" \u2190 "}
+                  {writeBack.baseBranch}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Diff summary */}
+      {writeBack.diffSummary && (
+        <div className="mt-1.5 whitespace-pre-wrap font-mono text-xs text-muted-foreground">
+          {writeBack.diffSummary}
+        </div>
+      )}
+
+      {/* Error message */}
+      {isFailed && writeBack.error && (
+        <div className="mt-1.5 rounded bg-destructive/10 px-2 py-1 text-xs text-destructive">
+          {writeBack.error}
+        </div>
+      )}
+
+      {/* PR link */}
+      {hasPR && (
+        <div className="mt-2">
+          <a
+            href={writeBack.pullRequestUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={cn(
+              "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary/80",
+              FOCUS_RING_CLASSES,
+            )}
+          >
+            <ExternalLinkIcon />
+            View PR #{writeBack.pullRequestNumber}
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Phase badge
+// ---------------------------------------------------------------------------
+
+const PHASE_CONFIG: Record<
+  number,
+  { label: string; className: string }
+> = {
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_COMMITTED]: {
+    label: "Committed",
+    className: "bg-muted text-muted-foreground",
+  },
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PUSHED]: {
+    label: "Pushed",
+    className: "bg-muted text-muted-foreground",
+  },
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_PR_CREATED]: {
+    label: "PR Created",
+    className: "bg-primary/10 text-primary",
+  },
+  [WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED]: {
+    label: "Failed",
+    className: "bg-destructive/10 text-destructive",
+  },
+};
+
+function PhaseBadge({ phase }: { phase: number }) {
+  const config = PHASE_CONFIG[phase];
+  if (!config) return null;
+
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center rounded-full px-1.5 py-0.5 text-[10px] font-medium leading-none",
+        config.className,
+      )}
+    >
+      {config.label}
+    </span>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Shared style constants
+// ---------------------------------------------------------------------------
+
+const FOCUS_RING_CLASSES =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons
+// ---------------------------------------------------------------------------
+
+function GitBranchIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="4" cy="3.5" r="1.5" />
+      <circle cx="4" cy="10.5" r="1.5" />
+      <circle cx="10" cy="5.5" r="1.5" />
+      <path d="M4 5V9" />
+      <path d="M10 7V5.5" />
+      <path d="M4 5C4 5 4 7 7 7C10 7 10 5.5 10 5.5" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M9 3L3 9" />
+      <path d="M5 3H9V7" />
+      <path d="M9 8V10H2V3H4" />
+    </svg>
+  );
+}

package/src/execution/WriteBacksWidget.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import { cn } from "@stigmer/theme";
+import { useSessionWriteBacks } from "../session/useSessionWriteBacks";
+import { WriteBackCard } from "./WriteBackCard";
+
+export interface WriteBacksWidgetProps {
+  /**
+   * All executions for the current session — both completed and
+   * actively streaming.  The widget aggregates write-backs across
+   * every execution, deduplicates by `workspace_entry_name` (latest
+   * wins), and sorts alphabetically.
+   *
+   * Renders nothing when the list is empty or no execution has
+   * write-backs.
+   */
+  readonly executions: readonly AgentExecution[];
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * Right-sidebar widget that surfaces pull requests created by the
+ * platform's incremental git write-back workflow.
+ *
+ * Write-backs from multiple executions are aggregated and
+ * deduplicated by `workspace_entry_name` (latest execution wins),
+ * presenting the user with a flat list of PRs — one per workspace
+ * entry.
+ *
+ * Returns `null` when no execution has write-backs, matching the
+ * conditional-render pattern of {@link ArtifactsWidget} and
+ * {@link ExecutionProgress}.
+ *
+ * All visual properties flow through `--stgm-*` tokens.  Zero
+ * Console dependencies.
+ *
+ * @example
+ * ```tsx
+ * const conv = useSessionConversation(sessionId, org);
+ *
+ * <WriteBacksWidget
+ *   executions={[
+ *     ...conv.completedExecutions,
+ *     ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
+ *   ]}
+ * />
+ * ```
+ *
+ * @see {@link WriteBackCard} — compact card per write-back
+ * @see {@link useSessionWriteBacks} — headless session-level write-back aggregation hook
+ * @see {@link useWorkspaceWriteBacks} — headless single-execution write-back extraction hook
+ */
+export function WriteBacksWidget({
+  executions,
+  className,
+}: WriteBacksWidgetProps) {
+  const { writeBacks, hasWriteBacks, writeBackCount } =
+    useSessionWriteBacks(executions);
+
+  if (!hasWriteBacks) return null;
+
+  return (
+    <section aria-label="Pull Requests" className={cn(className)}>
+      <div className="mb-2 flex items-center gap-2">
+        <h3 className="text-sm font-medium text-foreground">Pull Requests</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">
+          {writeBackCount}
+        </span>
+      </div>
+
+      <div role="list" className="space-y-2">
+        {writeBacks.map((entry) => (
+          <div key={entry.writeBack.workspaceEntryName} role="listitem">
+            <WriteBackCard writeBack={entry.writeBack} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}