@stigmer/react 2.0.0 → 3.0.0

package/src/execution/PlanArtifactCard.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import { memo, useCallback, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { useArtifactContent } from "./useArtifactContent";
+import { ArtifactContentRenderer } from "./ArtifactContentRenderer";
+import { formatArtifactSize } from "./artifact-utils";
+
+/** Plans above this size are not inlined for preview — download instead. */
+const MAX_PREVIEW_BYTES = 512 * 1024;
+
+/** Props for {@link PlanArtifactCard}. */
+export interface PlanArtifactCardProps {
+  /** Execution that produced the plan — used to fetch the plan content. */
+  readonly executionId: string;
+  /** The published `plan.md` artifact (from `findPlanArtifact`). */
+  readonly artifact: ExecutionArtifact;
+  /** Called when the user clicks "Implement". Hidden when omitted. */
+  readonly onImplement?: () => void;
+  /** Disables the Implement CTA (e.g., while an execution is active). */
+  readonly disabled?: boolean;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * Reviewable card shown after a completed Plan-mode execution when the agent
+ * published a `plan.md` artifact.
+ *
+ * Unlike {@link PlanCompletionCard} (a bare Implement CTA), this card makes the
+ * plan a first-class, durable object: expand to review the rendered plan, copy
+ * it, download the `plan.md` file, or proceed to implement. The plan content is
+ * the single source of truth (the published artifact), fetched on demand via
+ * {@link useArtifactContent} rather than duplicated into component state.
+ *
+ * All visual properties flow through `--stgm-*` tokens; the component is
+ * self-contained and embeddable.
+ */
+export const PlanArtifactCard = memo(function PlanArtifactCard({
+  executionId,
+  artifact,
+  onImplement,
+  disabled,
+  className,
+}: PlanArtifactCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  // Plans are small markdown; fetch eagerly (within the size cap) so both the
+  // preview and Copy have content ready. contentHash invalidates the cache when
+  // the plan is re-published in the same execution.
+  const fetchable = Number(artifact.sizeBytes) < MAX_PREVIEW_BYTES;
+  const { content, contentType, isTruncated, isLoading } = useArtifactContent(
+    fetchable ? executionId : null,
+    fetchable ? artifact.storageKey : null,
+    undefined,
+    artifact.contentHash || undefined,
+  );
+
+  const handleCopy = useCallback(async () => {
+    if (!content) return;
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // Clipboard can be unavailable (insecure context / denied permission).
+      // Silently no-op: Download remains available as the durable fallback.
+    }
+  }, [content]);
+
+  return (
+    <div
+      role="region"
+      aria-label="Plan ready to review"
+      className={cn(
+        "mx-4 overflow-hidden rounded-md border border-border-muted bg-muted-faint",
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-3 px-3 py-2.5">
+        <PlanIcon />
+        <div className="min-w-0 flex-1">
+          <div className="text-xs font-medium text-foreground">
+            Plan ready to review
+          </div>
+          <div className="text-xs tabular-nums text-muted-foreground">
+            {artifact.name} · {formatArtifactSize(artifact.sizeBytes)}
+          </div>
+        </div>
+        {onImplement && (
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={onImplement}
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
+              "text-xs font-medium transition-colors",
+              "bg-primary text-primary-foreground hover:bg-primary-hover",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            <ImplementIcon />
+            Implement
+          </button>
+        )}
+      </div>
+
+      {/* Secondary actions */}
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-border-muted px-3 py-1.5">
+        <button
+          type="button"
+          aria-expanded={expanded}
+          onClick={() => setExpanded((v) => !v)}
+          className={cn(
+            "inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-muted",
+            FOCUS_RING,
+          )}
+        >
+          <ChevronIcon expanded={expanded} />
+          {expanded ? "Hide plan" : "Review plan"}
+        </button>
+        <button
+          type="button"
+          onClick={handleCopy}
+          disabled={!content}
+          className={cn(
+            "text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+            "disabled:pointer-events-none disabled:opacity-50",
+            FOCUS_RING,
+          )}
+        >
+          {copied ? "Copied" : "Copy"}
+        </button>
+        <a
+          href={artifact.downloadUrl}
+          download={artifact.name}
+          className={cn(
+            "inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+            FOCUS_RING,
+          )}
+        >
+          <DownloadIcon />
+          Download
+        </a>
+      </div>
+
+      {/* Expandable plan preview */}
+      {expanded && (
+        <div className="max-h-96 overflow-auto border-t border-border-muted px-3 py-2">
+          {!fetchable ? (
+            <p className="text-xs text-muted-foreground">
+              This plan is large — use Download to view the full file.
+            </p>
+          ) : isLoading ? (
+            <div className="h-4 w-40 animate-pulse rounded bg-muted" aria-hidden="true" />
+          ) : content ? (
+            <ArtifactContentRenderer
+              content={content}
+              fileName={artifact.name}
+              contentType={contentType}
+              isTruncated={isTruncated}
+            />
+          ) : (
+            <p className="text-xs text-muted-foreground">
+              Plan content is unavailable. Use Download to retrieve the file.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+const FOCUS_RING =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+
+function PlanIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0 text-muted-foreground-faint"
+      aria-hidden="true"
+    >
+      <path d="M3 4h10M3 8h7M3 12h8" />
+      <path d="M12.5 10.5l1.5 1.5-1.5 1.5" />
+    </svg>
+  );
+}
+
+function ImplementIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M2 6h8M7 3l3 3-3 3" />
+    </svg>
+  );
+}
+
+function DownloadIcon() {
+  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="M6 1.5V8.5" />
+      <path d="M3 6L6 9L9 6" />
+      <path d="M2 10.5H10" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ expanded }: { readonly expanded: boolean }) {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn("shrink-0 transition-transform", expanded && "rotate-90")}
+      aria-hidden="true"
+    >
+      <path d="M4 2l4 4-4 4" />
+    </svg>
+  );
+}

package/src/execution/ResultView.tsx

@@ -0,0 +1,366 @@
+"use client";
+
+// Renders a normalized ToolResultView (from @stigmer/sdk) with a semantic view
+// per result type — diffs, terminals, search lists, file content, MCP content
+// blocks — instead of a raw JSON dump. The json/text variants are the graceful
+// fallbacks, so unknown tools are still readable.
+
+import { useMemo } from "react";
+import type {
+  ToolResultView,
+  ToolSearchMatch,
+  ToolContentBlock,
+} from "@stigmer/sdk";
+import { cn } from "@stigmer/theme";
+import { computeDiff } from "../version-history/computeDiff";
+import type { DiffHunk } from "../version-history/types";
+import { CollapsibleCode, CollapsiblePre, formatJson } from "./tool-rendering-primitives";
+import { FilePathLink } from "./FilePathLink";
+import { useSandboxNormalize } from "./SandboxContext";
+
+/** Props for {@link ResultView}. */
+export interface ResultViewProps {
+  /** The normalized result view to render. */
+  readonly view: ToolResultView;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * Renders a {@link ToolResultView} with a type-appropriate treatment.
+ *
+ * This is the presentation half of the tool-result pipeline: `@stigmer/sdk`'s
+ * `normalizeToolResult` turns an opaque result string into a typed view, and
+ * this component renders it. Importable on its own by platform builders who
+ * compose custom tool UIs.
+ */
+export function ResultView({ view, className }: ResultViewProps) {
+  switch (view.type) {
+    case "diff":
+      return <DiffResultView view={view} className={className} />;
+    case "terminal":
+      return <TerminalResultView view={view} className={className} />;
+    case "search":
+      return <SearchResultView matches={view.matches} count={view.count} className={className} />;
+    case "list":
+      return <ListResultView entries={view.entries} count={view.count} className={className} />;
+    case "file":
+      return <FileResultView view={view} className={className} />;
+    case "contentBlocks":
+      return <ContentBlocksResultView blocks={view.blocks} className={className} />;
+    case "text":
+      return view.text ? <CollapsiblePre content={view.text} className={cn("text-foreground", className)} /> : null;
+    case "json":
+      return <CollapsibleCode label="Result" content={formatJson(view.value)} className={className} />;
+    case "error":
+      return <ErrorResultView message={view.message} className={className} />;
+    case "empty":
+      return null;
+  }
+}
+
+/**
+ * Returns a compact one-line summary fragment for a result view, suitable for a
+ * collapsed tool row (e.g. "+40 -0", "exit 1", "2 matches"). Returns null when
+ * there is nothing useful to summarize.
+ */
+export function summarizeResultView(view: ToolResultView): string | null {
+  switch (view.type) {
+    case "diff": {
+      const stats = diffStats(view);
+      return stats ? `+${stats.added} -${stats.removed}` : null;
+    }
+    case "terminal":
+      return view.exitCode !== undefined && view.exitCode !== 0 ? `exit ${view.exitCode}` : null;
+    case "search":
+      return `${view.count} ${view.count === 1 ? "match" : "matches"}`;
+    case "list":
+      return `${view.count} ${view.count === 1 ? "item" : "items"}`;
+    default:
+      return null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Diff
+// ---------------------------------------------------------------------------
+
+type DiffView = Extract<ToolResultView, { type: "diff" }>;
+
+interface DiffStats {
+  readonly added: number;
+  readonly removed: number;
+}
+
+function countHunks(hunks: readonly DiffHunk[]): DiffStats {
+  let added = 0;
+  let removed = 0;
+  for (const hunk of hunks) {
+    for (const line of hunk.lines) {
+      if (line.type === "added") added++;
+      else if (line.type === "removed") removed++;
+    }
+  }
+  return { added, removed };
+}
+
+// Used by the collapsed-row summary, where no precomputed hunks are available.
+// Prefers the engine-provided counts (Cursor envelope) and only runs the diff
+// algorithm for the native harness, which provides none.
+function diffStats(view: DiffView): DiffStats | null {
+  if (view.linesAdded !== undefined || view.linesRemoved !== undefined) {
+    return { added: view.linesAdded ?? 0, removed: view.linesRemoved ?? 0 };
+  }
+  if (view.oldText !== undefined && view.newText !== undefined) {
+    return countHunks(computeDiff(view.oldText, view.newText));
+  }
+  return null;
+}
+
+function DiffResultView({ view, className }: { view: DiffView; className?: string }) {
+  // The native engine returns no diff, so we compute hunks from args (old/new).
+  // The Cursor envelope provides a ready unified-diff string we render directly.
+  const hunks = useMemo<readonly DiffHunk[]>(() => {
+    if (view.oldText !== undefined && view.newText !== undefined) {
+      return computeDiff(view.oldText, view.newText);
+    }
+    return [];
+  }, [view.oldText, view.newText]);
+
+  // Derive stats from the already-computed hunks instead of re-running the diff.
+  const stats = useMemo<DiffStats | null>(() => {
+    if (view.linesAdded !== undefined || view.linesRemoved !== undefined) {
+      return { added: view.linesAdded ?? 0, removed: view.linesRemoved ?? 0 };
+    }
+    return hunks.length > 0 ? countHunks(hunks) : null;
+  }, [view.linesAdded, view.linesRemoved, hunks]);
+
+  return (
+    <div className={cn("space-y-1", className)}>
+      <div className="flex items-center gap-2 text-muted-foreground">
+        {view.path && <FilePathLink path={view.path} className="text-xs" />}
+        {stats && (
+          <span className="shrink-0 tabular-nums text-xs">
+            <span className="text-success">+{stats.added}</span>{" "}
+            <span className="text-destructive">-{stats.removed}</span>
+          </span>
+        )}
+      </div>
+
+      {hunks.length > 0 ? (
+        <DiffHunks hunks={hunks} />
+      ) : view.unifiedDiff ? (
+        <UnifiedDiffText patch={view.unifiedDiff} />
+      ) : null}
+    </div>
+  );
+}
+
+function DiffHunks({ hunks }: { hunks: readonly DiffHunk[] }) {
+  return (
+    <div className="overflow-auto rounded-md border border-border bg-muted-subtle font-mono text-xs">
+      {hunks.map((hunk, hi) => (
+        <div key={hi} className="border-b border-border-muted last:border-b-0">
+          {hunk.lines.map((line, li) => (
+            <div
+              key={li}
+              className={cn(
+                "whitespace-pre-wrap break-words px-2 py-0.5",
+                line.type === "added" && "bg-success-subtle text-success",
+                line.type === "removed" && "bg-destructive-subtle text-destructive",
+                line.type === "context" && "text-muted-foreground",
+              )}
+            >
+              {/* Screen readers get the change type as words; sighted users get
+                  the +/- sign and color. Never color-only. */}
+              {line.type !== "context" && (
+                <span className="sr-only">
+                  {line.type === "added" ? "Added: " : "Removed: "}
+                </span>
+              )}
+              <span className="select-none" aria-hidden="true">
+                {line.type === "added" ? "+" : line.type === "removed" ? "-" : " "}
+              </span>
+              {line.content}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Renders a raw unified-diff patch string (Cursor envelope) with +/- coloring.
+function UnifiedDiffText({ patch }: { patch: string }) {
+  const lines = patch.split("\n");
+  return (
+    <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-xs">
+      {lines.map((line, i) => (
+        <div
+          key={i}
+          className={cn(
+            line.startsWith("+") && !line.startsWith("+++") && "text-success",
+            line.startsWith("-") && !line.startsWith("---") && "text-destructive",
+            line.startsWith("@@") && "text-primary",
+          )}
+        >
+          {line || " "}
+        </div>
+      ))}
+    </pre>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Terminal
+// ---------------------------------------------------------------------------
+
+type TerminalView = Extract<ToolResultView, { type: "terminal" }>;
+
+function TerminalResultView({ view, className }: { view: TerminalView; className?: string }) {
+  const normalize = useSandboxNormalize();
+  const failed = view.exitCode !== undefined && view.exitCode !== 0;
+
+  return (
+    <div className={cn("space-y-1", className)}>
+      <div className="flex items-center gap-2">
+        <span className="font-medium text-muted-foreground">Output</span>
+        {view.exitCode !== undefined && (
+          <span
+            className={cn(
+              "rounded px-1 py-0.5 text-[10px] font-medium leading-none tabular-nums",
+              failed ? "bg-destructive-subtle text-destructive" : "bg-success-subtle text-success",
+            )}
+          >
+            exit {view.exitCode}
+          </span>
+        )}
+      </div>
+      <div className="rounded-md border border-border bg-[var(--stgm-terminal-bg,#1a1a2e)] p-2.5">
+        {view.stdout && (
+          <CollapsiblePre
+            content={normalize(view.stdout)}
+            className="text-[var(--stgm-terminal-fg,#e0e0e0)]"
+          />
+        )}
+        {view.stderr && (
+          <CollapsiblePre
+            content={normalize(view.stderr)}
+            className="text-destructive"
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Search / List
+// ---------------------------------------------------------------------------
+
+function SearchResultView({
+  matches,
+  count,
+  className,
+}: {
+  matches: readonly ToolSearchMatch[];
+  count: number;
+  className?: string;
+}) {
+  if (count === 0) {
+    return <p className={cn("text-xs text-muted-foreground", className)}>No matches</p>;
+  }
+  return (
+    <div className={cn("space-y-1", className)}>
+      <span className="font-medium text-muted-foreground">
+        {count} {count === 1 ? "match" : "matches"}
+      </span>
+      <div className="max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle font-mono text-xs">
+        {matches.map((m, i) => (
+          <div key={i} className="whitespace-pre-wrap break-words border-b border-border-muted px-2 py-0.5 text-foreground last:border-b-0">
+            {m.file && <span className="text-primary">{m.file}{m.line !== undefined ? `:${m.line}` : ""} </span>}
+            <span className={m.file ? "text-muted-foreground" : "text-foreground"}>{m.text}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ListResultView({
+  entries,
+  count,
+  className,
+}: {
+  entries: readonly string[];
+  count: number;
+  className?: string;
+}) {
+  if (count === 0) {
+    return <p className={cn("text-xs text-muted-foreground", className)}>Empty</p>;
+  }
+  return (
+    <div className={cn("space-y-1", className)}>
+      <span className="font-medium text-muted-foreground">
+        {count} {count === 1 ? "item" : "items"}
+      </span>
+      <div className="max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle font-mono text-xs">
+        {entries.map((e, i) => (
+          <div key={i} className="truncate px-2 py-0.5 text-foreground">
+            {e}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// File / content blocks / error
+// ---------------------------------------------------------------------------
+
+type FileView = Extract<ToolResultView, { type: "file" }>;
+
+function FileResultView({ view, className }: { view: FileView; className?: string }) {
+  if (!view.content) {
+    return view.path ? (
+      <div className={cn("flex items-center gap-1.5 text-xs", className)}>
+        <FilePathLink path={view.path} className="text-xs" />
+      </div>
+    ) : null;
+  }
+  return (
+    <div className={cn("space-y-1", className)}>
+      {view.path && <FilePathLink path={view.path} className="text-xs" />}
+      <CollapsibleCode label={view.truncated ? "Content (truncated)" : "Content"} content={view.content} />
+    </div>
+  );
+}
+
+function ContentBlocksResultView({
+  blocks,
+  className,
+}: {
+  blocks: readonly ToolContentBlock[];
+  className?: string;
+}) {
+  const text = useMemo(
+    () =>
+      blocks
+        .map((b) => (b.type === "text" && b.text ? b.text : `[${b.type}]`))
+        .join("\n"),
+    [blocks],
+  );
+  return <CollapsiblePre content={text} className={cn("text-foreground", className)} />;
+}
+
+function ErrorResultView({ message, className }: { message: string; className?: string }) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <span className="font-medium text-destructive">Error</span>
+      <pre className="whitespace-pre-wrap break-words rounded-md border border-destructive/20 bg-destructive-subtle p-2 font-mono text-destructive">
+        {message}
+      </pre>
+    </div>
+  );
+}

package/src/execution/SubAgentSection.tsx

@@ -194,6 +194,11 @@ function CollapsibleCard({
           <BotIcon />
         </span>
         <span className="min-w-0 flex-1 truncate">{displayLabel}</span>
+        {isRunning && (
+          <span className="shrink-0 text-muted-foreground" aria-hidden="true">
+            <SpinnerIcon />
+          </span>
+        )}
         <span
           className={cn(
             "shrink-0 rounded px-1 py-0.5 text-[10px] font-medium leading-none",