@stigmer/react 3.1.2 → 3.1.4

package/src/execution/ArtifactRow.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+import { FileTypeIcon, FolderTypeIcon } from "../internal/file-icons/index.js";
+import { useArtifactDownload } from "./useArtifactDownload.js";
+import { formatArtifactSize } from "./artifact-utils.js";
+
+/** Props for {@link ArtifactRow}. */
+export interface ArtifactRowProps {
+  /** The execution artifact to render. */
+  readonly artifact: ExecutionArtifact;
+  /** ID of the execution that produced this artifact — used to mint its download URL. */
+  readonly executionId: string;
+  /**
+   * When `true`, another artifact in the list shares this artifact's display
+   * `name` but has a different `sandbox_path`; the row renders the parent
+   * directory as a muted subtitle to disambiguate. Typically supplied from
+   * {@link SessionArtifactEntry.hasNameCollision}.
+   */
+  readonly hasNameCollision?: boolean;
+  /** Single click / Enter / Space: open the artifact (a preview tab, or a modal). */
+  readonly onOpen: () => void;
+  /**
+   * Double click: promote the artifact to a persistent (pinned) tab. Mirrors the
+   * file tree's `onOpenFile` (preview) / `onActivateFile` (pin) split — the
+   * leading single click of the double click has already opened the preview, so
+   * this promotes it. Omit in panel-less hosts (e.g. the modal-only widget):
+   * with no handler the row binds no `onDoubleClick`, so a double click is just
+   * two harmless single clicks, exactly as `FileTreeNode` behaves.
+   */
+  readonly onActivate?: () => void;
+  /** Additional CSS classes for the row's `<li>`. */
+  readonly className?: string;
+}
+
+/**
+ * One dense, VS Code-style artifact row: a full-width open button (shared
+ * file-type icon + name + optional collision subtitle + size) with a sibling,
+ * hover/focus-revealed Download button.
+ *
+ * The open target and the Download control are SIBLINGS, never nested — a
+ * `<button>` inside a `<button>` is an axe `nested-interactive` (WCAG 4.1.2)
+ * violation. This mirrors `ExplorerRoot`'s header + remove-control pattern.
+ *
+ * Deliberately execution-pure and presentational: it takes only the artifact,
+ * its `executionId`, and open/activate closures — no session-domain types and
+ * no content fetch (resource detection and Apply/Push live in the opened
+ * document/modal, not the list). The two hosts — the session panel's
+ * `ArtifactsTab` facet and the panel-less {@link ArtifactsWidget} — map
+ * their entries onto these props and own the behavior wiring.
+ *
+ * @see ArtifactsTab — session-panel facet (rows open editor-pane document tabs)
+ * @see ArtifactsWidget — panel-less embeddable (rows open the preview modal)
+ */
+export function ArtifactRow({
+  artifact,
+  executionId,
+  hasNameCollision = false,
+  onOpen,
+  onActivate,
+  className,
+}: ArtifactRowProps) {
+  const isDirectory = artifact.kind === ExecutionArtifactKind.DIRECTORY;
+  const { download, isDownloading } = useArtifactDownload(executionId);
+
+  const parentDir =
+    hasNameCollision && artifact.sandboxPath
+      ? parentDirectory(artifact.sandboxPath)
+      : null;
+
+  return (
+    <li className={cn("group flex items-stretch", className)}>
+      <button
+        type="button"
+        onClick={onOpen}
+        onDoubleClick={onActivate}
+        title={artifact.sandboxPath || artifact.name}
+        className={cn(
+          "flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-xs text-muted-foreground transition-colors",
+          "hover:bg-muted hover:text-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        )}
+      >
+        <span className="shrink-0 text-muted-foreground">
+          {isDirectory ? (
+            <FolderTypeIcon open={false} />
+          ) : (
+            <FileTypeIcon fileName={artifact.name} />
+          )}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-foreground">
+          {artifact.name}
+          {isDirectory && "/"}
+          {parentDir && (
+            <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
+              {parentDir}
+            </span>
+          )}
+        </span>
+        <span className="shrink-0 tabular-nums text-[0.65rem] text-muted-foreground-faint">
+          {formatArtifactSize(artifact.sizeBytes)}
+        </span>
+      </button>
+      <button
+        type="button"
+        onClick={() => download(artifact.storageKey, artifact.name)}
+        disabled={isDownloading}
+        aria-label={
+          isDownloading
+            ? `Preparing ${artifact.name}`
+            : `Download ${artifact.name}`
+        }
+        title={isDirectory ? "Download ZIP" : "Download"}
+        className={cn(
+          "flex shrink-0 items-center px-2 text-muted-foreground opacity-0 transition-opacity",
+          "group-hover:opacity-100 focus-visible:opacity-100",
+          "hover:text-foreground disabled:opacity-50",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        )}
+      >
+        <DownloadIcon />
+      </button>
+    </li>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Extracts a human-readable parent directory label from a sandbox path.
+ * Given `/workspace/configs/agent.yaml` returns `configs/`.
+ * Returns `null` when the path has no meaningful parent segment.
+ */
+function parentDirectory(sandboxPath: string): string | null {
+  const lastSlash = sandboxPath.lastIndexOf("/");
+  if (lastSlash <= 0) return null;
+  const parent = sandboxPath.slice(0, lastSlash);
+  const segment = parent.slice(parent.lastIndexOf("/") + 1);
+  return segment ? `${segment}/` : null;
+}
+
+function DownloadIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      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>
+  );
+}

package/src/execution/ArtifactsWidget.tsx

@@ -5,9 +5,10 @@ import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexe
 import { cn } from "@stigmer/theme";
 import {
   useSessionArtifacts,
+  artifactKey,
   type SessionArtifactEntry,
 } from "../session/useSessionArtifacts.js";
-import { ArtifactCard } from "./ArtifactCard.js";
+import { ArtifactRow } from "./ArtifactRow.js";
 import { ArtifactPreviewModal } from "./ArtifactPreviewModal.js";
 import type { ApplyResourceResult } from "../library/useApplyResource.js";
 
@@ -45,19 +46,16 @@ export interface ArtifactsWidgetProps {
  * 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).
+ * The panel-less counterpart of the session panel's Artifacts facet: it
+ * renders the same dense {@link ArtifactRow} list, but — having no editor pane
+ * to open document tabs into — a click opens the {@link ArtifactPreviewModal}
+ * (the review-before-apply popup, and the sole home of the Apply/Push CTA).
+ * This is the embeddable path a platform builder drops into their own sidebar.
  *
  * Returns `null` when the executions list is empty or no execution
  * has artifacts, matching the conditional-render pattern of
  * {@link ExecutionProgress} and {@link UsageWidget}.
  *
- * Renders without card chrome — each {@link ArtifactCard} provides its
- * own border and padding. The consumer controls the container styling
- * (or places the widget directly in a flex/grid layout).
- *
  * All visual properties flow through `--stgm-*` tokens.
  *
  * @example
@@ -74,7 +72,7 @@ export interface ArtifactsWidgetProps {
  * />
  * ```
  *
- * @see {@link ArtifactCard} — compact summary card per artifact
+ * @see {@link ArtifactRow} — the dense row rendered per artifact
  * @see {@link ArtifactPreviewModal} — full preview with Apply/Push CTA
  * @see {@link useSessionArtifacts} — headless session-level artifact aggregation hook
  * @see {@link useExecutionArtifacts} — headless single-execution artifact extraction hook
@@ -88,27 +86,22 @@ export function ArtifactsWidget({
   const { artifacts, hasArtifacts, artifactCount } =
     useSessionArtifacts(executions);
 
-  // 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.
+  // Store the artifact identity (not a snapshot of the full entry). The entry is
+  // re-derived from the live artifacts list on every render, so the 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);
 
   const previewEntry = useMemo<SessionArtifactEntry | null>(
     () =>
       previewKey !== null
-        ? artifacts.find(
-            (e) =>
-              (e.artifact.sandboxPath || e.artifact.name) === previewKey,
-          ) ?? null
+        ? artifacts.find((e) => artifactKey(e.artifact) === previewKey) ?? null
         : null,
     [previewKey, artifacts],
   );
 
-  const handlePreview = useCallback(
-    (entry: SessionArtifactEntry) =>
-      setPreviewKey(entry.artifact.sandboxPath || entry.artifact.name),
+  const handleOpen = useCallback(
+    (entry: SessionArtifactEntry) => setPreviewKey(artifactKey(entry.artifact)),
     [],
   );
 
@@ -123,19 +116,17 @@ export function ArtifactsWidget({
         </span>
       </div>
 
-      <div role="list" className="space-y-2">
+      <ul role="list" className="flex flex-col">
         {artifacts.map((entry) => (
-          <div key={entry.artifact.storageKey} role="listitem">
-            <ArtifactCard
-              artifact={entry.artifact}
-              executionId={entry.executionId}
-              org={org}
-              hasNameCollision={entry.hasNameCollision}
-              onPreview={() => handlePreview(entry)}
-            />
-          </div>
+          <ArtifactRow
+            key={artifactKey(entry.artifact)}
+            artifact={entry.artifact}
+            executionId={entry.executionId}
+            hasNameCollision={entry.hasNameCollision}
+            onOpen={() => handleOpen(entry)}
+          />
         ))}
-      </div>
+      </ul>
 
       {previewEntry && (
         <ArtifactPreviewModal

package/src/execution/FileChangeProgressBar.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { memo, useState } from "react";
+import type { FileChangeProgress } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
+import { cn } from "@stigmer/theme";
+import { FileKindBadge, FileLineStats } from "./FileReviewAtoms.js";
+import { FilePathLink } from "./FilePathLink.js";
+
+/** Props for {@link FileChangeProgressBar}. */
+export interface FileChangeProgressBarProps {
+  /**
+   * The transient mid-run progress snapshot for the active turn (DD-32). Feed
+   * this from `useSessionConversation().fileChangeProgress`. Renders nothing when
+   * undefined or when no files have changed yet — the server clears it once the
+   * turn's change set leaves CAPTURING, so the bar disappears exactly when the
+   * decision surface ({@link FileReviewDock}) takes over.
+   */
+  readonly progress: FileChangeProgress | undefined;
+  /** Additional CSS class names for the root container. */
+  readonly className?: string;
+}
+
+/**
+ * The live "N files changed so far" strip for a turn that is still running.
+ *
+ * WHY IT EXISTS. The transcript streams per-edit tool rows, but a change made by
+ * a shell command (a `sed`, a build step) has no tool row, and there is no
+ * running net-of-many-edits rollup until the turn ends. This bar fills that gap:
+ * a compact, NON-INTERACTIVE count of the workspace delta accumulating during
+ * the turn, pinned above the composer where the {@link FileReviewDock} will later
+ * appear. The two are mutually exclusive per turn (progress shows while CAPTURING;
+ * the dock shows once AWAITING_REVIEW), so the bar hands off cleanly to the dock.
+ *
+ * NEVER A DECISION SURFACE. Progress is non-authoritative and carries no file
+ * bodies — it is never reviewable or decidable. The reviewed diff is the
+ * turn-boundary candidate ({@link FileReviewDock} / the stamped transcript rows).
+ * A secret-like path is surfaced by name with its counts withheld (zeroed), so
+ * `FileLineStats` renders nothing for it.
+ *
+ * A11Y. Only the summary count is an `aria-live` region — the per-file list is
+ * not — so a screen reader hears "3 files changing" as the count moves, not a
+ * per-file barrage on every ~2s refresh.
+ *
+ * Purely presentational (headless-first, DD-003): the data lives in
+ * `useSessionConversation().fileChangeProgress`. `SessionViewer` mounts it above
+ * the dock by default.
+ *
+ * @example
+ * ```tsx
+ * const conv = useSessionConversation(sessionId);
+ * <FileChangeProgressBar progress={conv.fileChangeProgress} />
+ * ```
+ */
+export const FileChangeProgressBar = memo(function FileChangeProgressBar({
+  progress,
+  className,
+}: FileChangeProgressBarProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!progress || progress.filesChanged === 0) return null;
+
+  const { filesChanged, linesAdded, linesRemoved, entries } = progress;
+  const hiddenCount = filesChanged - entries.length;
+
+  return (
+    <div
+      role="region"
+      aria-label="File changes in progress"
+      data-cursor-target="file-change-progress-bar"
+      className={cn("border-t border-border-muted px-4 py-2", className)}
+    >
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => setExpanded((prev) => !prev)}
+          aria-expanded={expanded}
+          className="flex min-w-0 flex-1 items-center gap-2 text-left text-xs text-muted-foreground hover:text-foreground"
+        >
+          <span
+            aria-hidden="true"
+            className={cn("shrink-0 transition-transform", expanded && "rotate-90")}
+          >
+            ▸
+          </span>
+          {/* Only the count is live: a screen reader hears the aggregate move,
+              not a per-file announcement on every refresh. */}
+          <span aria-live="polite" className="min-w-0 truncate">
+            {filesChanged} {filesChanged === 1 ? "file" : "files"} changing…
+          </span>
+        </button>
+        <FileLineStats linesAdded={linesAdded} linesRemoved={linesRemoved} />
+      </div>
+      {expanded && (
+        <ul className="mt-2 max-h-[30vh] space-y-1 overflow-y-auto">
+          {entries.map((entry) => {
+            const path = entry.pathAfter || entry.pathBefore;
+            return (
+              <li key={path} className="flex items-center gap-2">
+                <FileKindBadge kind={entry.kind} />
+                <FilePathLink
+                  path={path}
+                  dirDisplay="dim"
+                  className="min-w-0 flex-1 text-xs"
+                />
+                <FileLineStats
+                  linesAdded={entry.linesAdded}
+                  linesRemoved={entry.linesRemoved}
+                />
+              </li>
+            );
+          })}
+          {hiddenCount > 0 && (
+            <li className="text-xs text-muted-foreground-faint">
+              … and {hiddenCount} more
+            </li>
+          )}
+        </ul>
+      )}
+    </div>
+  );
+});

package/src/execution/FileChangesView.tsx

@@ -167,7 +167,13 @@ export function FileChangeDiff({
     if (change.captureLevel === FileChangeCaptureLevel.HUNK_ONLY) {
       return { additions: change.linesAdded, deletions: change.linesRemoved };
     }
-    return countHunks(hunks);
+    // Whole-file: count the rendered hunks (what the user actually sees). When
+    // there are none to count — the body is offloaded/loading/truncated — fall
+    // back to the capture-time counts, which are computed with the same diff
+    // algorithm and so agree with the hunks whenever both exist.
+    const computed = countHunks(hunks);
+    if (computed.additions > 0 || computed.deletions > 0) return computed;
+    return { additions: change.linesAdded, deletions: change.linesRemoved };
   }, [change.captureLevel, change.linesAdded, change.linesRemoved, hunks]);
 
   const showStatsRow = showStats && (stats.additions > 0 || stats.deletions > 0);
@@ -343,8 +349,11 @@ function countHunks(hunks: readonly DiffHunk[]): {
  * Projects a {@link FileChange} into a {@link FileDiffEntry} for the file list.
  *
  * Counts: hunk-only uses the runner's authoritative numbers; whole-file inline
- * is derived from the content; an offloaded whole-file side has no synchronous
- * content, so its count stays 0 until the file is opened and fetched.
+ * is derived from the content (identical to the runner's capture-time counts by
+ * construction — same diff algorithm). A whole-file side with no synchronous
+ * content (offloaded / binary) falls back to the runner's capture-time
+ * `linesAdded`/`linesRemoved` — zero when no count exists, which the list
+ * renders as no stat.
  */
 function toFileDiffEntry(change: FileChange): FileDiffEntry {
   const changeType =
@@ -370,7 +379,12 @@ function toFileDiffEntry(change: FileChange): FileDiffEntry {
     return { path: change.path, changeType, additions, deletions };
   }
 
-  return { path: change.path, changeType, additions: 0, deletions: 0 };
+  return {
+    path: change.path,
+    changeType,
+    additions: change.linesAdded,
+    deletions: change.linesRemoved,
+  };
 }
 
 /** Inline text of a side, or null when absent/offloaded/binary. */

package/src/execution/FileReviewAtoms.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { FileChangeKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { cn } from "@stigmer/theme";
+
+/**
+ * Shared presentational atoms for the file-review surfaces — the single source
+ * for the `+N −M` stat and the change-kind marker, so the review card, the
+ * compact list, and the mid-run progress bar can never drift in how they render
+ * a file's magnitude or kind.
+ */
+
+/**
+ * The `+N −M` stat for one file (or a whole set), in the same visual vocabulary
+ * as the tool-row diff stats. Renders nothing when both counts are zero — the
+ * honest signal that no count exists (binary or secret-withheld changes, records
+ * captured before counts were stamped) — rather than a misleading `+0 −0`.
+ */
+export function FileLineStats({
+  linesAdded,
+  linesRemoved,
+}: {
+  readonly linesAdded: number;
+  readonly linesRemoved: number;
+}) {
+  if (linesAdded === 0 && linesRemoved === 0) return null;
+  return (
+    <span
+      className="shrink-0 text-xs tabular-nums"
+      aria-label={`${linesAdded} added, ${linesRemoved} removed`}
+      data-cursor-target="file-review-line-stats"
+    >
+      <span className="text-diff-added-fg">+{linesAdded}</span>{" "}
+      <span className="text-diff-removed-fg">-{linesRemoved}</span>
+    </span>
+  );
+}
+
+/** The kind letter, tone, and a11y name for each wire {@link FileChangeKind}. */
+const KIND_BADGE: Partial<
+  Record<FileChangeKind, { letter: string; colorClass: string; label: string }>
+> = {
+  [FileChangeKind.ADD]: {
+    letter: "A",
+    colorClass: "text-diff-added-fg",
+    label: "added",
+  },
+  [FileChangeKind.MODIFY]: {
+    letter: "M",
+    colorClass: "text-diff-hunk-header-fg",
+    label: "modified",
+  },
+  [FileChangeKind.DELETE]: {
+    letter: "D",
+    colorClass: "text-diff-removed-fg",
+    label: "deleted",
+  },
+  [FileChangeKind.RENAME]: {
+    letter: "R",
+    colorClass: "text-diff-hunk-header-fg",
+    label: "renamed",
+  },
+  // A binary change is a modification whose diff is not text; the letter stays
+  // M and the binary-ness is told by the row's "Keep anyway" + reason note.
+  [FileChangeKind.BINARY_CHANGE]: {
+    letter: "M",
+    colorClass: "text-diff-hunk-header-fg",
+    label: "modified (binary)",
+  },
+};
+
+/**
+ * The single-letter change-kind marker — the same M/A/D visual vocabulary as
+ * the version-history `DiffFileList`, extended with R for captured renames.
+ * The letter itself is the non-color channel; the full word is exposed to
+ * assistive tech. An UNSPECIFIED kind renders nothing rather than guessing.
+ */
+export function FileKindBadge({ kind }: { kind: FileChangeKind }) {
+  const badge = KIND_BADGE[kind];
+  if (!badge) return null;
+  return (
+    <span
+      className={cn("shrink-0 font-mono text-[10px] font-bold", badge.colorClass)}
+      aria-label={badge.label}
+    >
+      {badge.letter}
+    </span>
+  );
+}