@stigmer/react 3.1.1 → 3.1.3

package/src/execution/FilePathLink.tsx

@@ -92,15 +92,26 @@ export function FilePathLink({
       // (ToolCallItem's role=button header); copying/opening a path must not
       // also expand the row.
       e.stopPropagation();
+
+      // Offer the click to the injected handler first. It returns `false` to
+      // DECLINE (e.g. an in-app viewer that can't open this particular path),
+      // in which case we fall through to the default action below. A `true`/
+      // `void` return means it fully handled the click.
       if (onFilePathClick) {
-        e.preventDefault();
-        onFilePathClick(path, resolved);
-        return;
+        const handled = onFilePathClick(path, resolved);
+        if (handled !== false) {
+          // For a link, also stop the browser from navigating (the file opened
+          // in-app instead). A modifier/middle-click bypasses this onClick, so
+          // the real <a href> still opens the target in a new tab.
+          if (resolved.action === "link") e.preventDefault();
+          return;
+        }
       }
+
       if (resolved.action === "copy") {
         handleCopy();
       }
-      // For "link" action the <a> default navigation handles it.
+      // For a declined/un-handled "link", the <a>'s native navigation runs.
     },
     [onFilePathClick, path, resolved, handleCopy],
   );
@@ -125,13 +136,18 @@ export function FilePathLink({
     </>
   );
 
-  if (resolved.action === "link" && !onFilePathClick) {
+  // A link-action path always renders a real anchor — even when an
+  // `onFilePathClick` handler is present — so native link affordances
+  // (middle-click, open-in-new-tab, copy-link-address) survive. `handleClick`
+  // intercepts a plain left-click to route it through the handler (e.g. into an
+  // in-app viewer) and only calls `preventDefault` when the handler took it.
+  if (resolved.action === "link") {
     return (
       <a
         href={resolved.url}
         target="_blank"
         rel="noopener noreferrer"
-        onClick={(e) => e.stopPropagation()}
+        onClick={handleClick}
         aria-label={ariaLabel}
         title={title}
         className={cn(sharedClasses, "group/fpl")}

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

package/src/execution/FileReviewCard.tsx

@@ -16,10 +16,11 @@ import {
 import { toDisplayFileChange } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
 import { FileChangeDiff } from "./FileChangesView.js";
+import { FileKindBadge, FileLineStats } from "./FileReviewAtoms.js";
+import { FilePathLink } from "./FilePathLink.js";
 import { DiffSummary } from "../version-history/DiffSummary.js";
 import { DecisionButton } from "../internal/DecisionButton.js";
 import { InCardDecisionError } from "../internal/InCardDecisionError.js";
-import { splitDisplayPath } from "./file-path-resolver.js";
 import { fileDecisionKey, type FileDecisionOptions } from "./useFileReview.js";
 import {
   changeSetReviewability,
@@ -62,8 +63,8 @@ export interface FileReviewCardProps {
    *
    * `MessageThread` passes `false`: the transcript's stamped edit rows already
    * show every diff in place, so the expanded body collapses to a compact file
-   * list (kind letter + path + per-file controls) and the card stays purely
-   * the decision surface. Decision semantics — digests, scopes,
+   * list (kind letter + linked path + `+N −M` + per-file controls) and the card
+   * stays purely the decision surface. Decision semantics — digests, scopes,
    * acknowledgments — are identical in both modes; this is presentation only
    * (opt-in with a backward-compatible default, DD-011).
    */
@@ -194,11 +195,18 @@ export const FileReviewCard = memo(function FileReviewCard({
 
   // The bar starts expanded exactly when the collapsed bar cannot honestly carry
   // the decision: an incomplete set (binary acknowledgment / blocked files need
-  // their per-file context) or a review already in progress. A complete set and
-  // a settled record start collapsed — the transcript's stamped rows already
-  // show what changed, and the expander reveals the per-file detail on demand.
+  // their per-file context), a review already in progress, or a multi-file set
+  // in compact-list mode — its honest decision surface includes the per-file
+  // Keep/Discard controls, which must be visible without hunting behind the
+  // expander (the docked strip bounds the height, so expanding is cheap there).
+  // Diff-rich mode (`showDiffs`) deliberately stays collapsed for a complete
+  // multi-file set: its expanded body is every full diff with no height cap
+  // (the workflow file-review list), where "Review" is the act of opening it.
+  // A settled record always starts collapsed — the transcript's stamped rows
+  // already show what changed, and the expander reveals detail on demand.
   const [expanded, setExpanded] = useState(
-    () => interactive && (incomplete || decidedCount > 0),
+    () =>
+      interactive && (incomplete || decidedCount > 0 || (total > 1 && !showDiffs)),
   );
   const bodyId = useId();
 
@@ -251,12 +259,18 @@ export const FileReviewCard = memo(function FileReviewCard({
     [onSubmit],
   );
 
+  // The set's aggregate `+N −M`, summed from the capture-time per-file counts
+  // (linesAdded/linesRemoved are stamped by the runner with the same diff
+  // algorithm the renderers use — see CapturedFileChange). A file with no
+  // counts (binary, secret-withheld, or a record predating the fields)
+  // contributes zero; when NO file has counts the aggregate is hidden rather
+  // than shown as a dishonest "+0 −0".
   const totals = useMemo(() => {
     let additions = 0;
     let deletions = 0;
     for (const c of changes) {
-      if (c.kind === FileChangeKind.ADD) additions += 1;
-      else if (c.kind === FileChangeKind.DELETE) deletions += 1;
+      additions += c.linesAdded;
+      deletions += c.linesRemoved;
     }
     return { additions, deletions };
   }, [changes]);
@@ -311,8 +325,16 @@ export const FileReviewCard = memo(function FileReviewCard({
         <span className="shrink-0 font-medium text-foreground">
           {interactive ? "Review file changes" : "File changes"}
         </span>
-        <span className="min-w-0 flex-1 truncate text-muted-foreground">
-          {summary}
+        {/* The flexible middle: the summary (truncating) plus the set's
+            aggregate +N −M, visible even while collapsed so the bar carries
+            the magnitude of what is being decided, not just the file count.
+            Hidden when no file has counts (FileLineStats). */}
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          <span className="min-w-0 truncate text-muted-foreground">{summary}</span>
+          <FileLineStats
+            linesAdded={totals.additions}
+            linesRemoved={totals.deletions}
+          />
         </span>
 
         {interactive && showBulkControls && (
@@ -390,9 +412,11 @@ export const FileReviewCard = memo(function FileReviewCard({
           id={bodyId}
           className="space-y-2 border-t border-border-muted px-3 py-2.5"
         >
-          {/* The list body carries no summary header: the collapsed bar's
-              file count is the summary, and per-file counts would require
-              fetching offloaded bodies just to decorate a list. */}
+          {/* The list body carries no summary header: the bar already shows
+              the file count and the aggregate +N −M (per-file counts are
+              capture-time facts on the wire — linesAdded/linesRemoved — so no
+              body fetch is ever needed to decorate the list). Diff mode keeps
+              its fuller DiffSummary line above the rendered diffs. */}
           {showDiffs && (
             <DiffSummary
               fileCount={total}
@@ -640,15 +664,17 @@ function CapturedChangeDiff({ change }: { change: CapturedFileChange }) {
 // ---------------------------------------------------------------------------
 
 /**
- * One file of the change set as a compact, deliberately inert list line: kind
- * letter, path, provenance badge, and an optional trailing slot (the verdict
+ * One file of the change set as a compact list line: kind letter, linked path,
+ * `+N −M` stats, provenance badge, and an optional trailing slot (the verdict
  * control while reviewing; the committed verdict once settled).
  *
- * The path is plain text — not `FilePathLink` — because the list is an
- * inventory of what the decision covers, not a navigation surface: the diffs
- * live on the transcript's stamped edit rows. The full path stays available on
- * hover via `title`. A rename shows its source path so the move reads in one
- * line.
+ * The path renders through `FilePathLink` — the platform-wide path idiom — so
+ * a reviewer can jump from the list to the file itself (the session viewer
+ * routes the click into the panel's diff-first viewer; GitHub/copy is the
+ * fallback) without leaving the decision surface. Deciding and navigating
+ * coexist: the link stops click propagation, so opening a file never fights
+ * the row's Keep/Discard controls. A rename shows its source path so the move
+ * reads in one line.
  */
 function FileListRow({
   change,
@@ -658,7 +684,6 @@ function FileListRow({
   readonly trailing?: React.ReactNode;
 }) {
   const path = change.pathAfter || change.pathBefore;
-  const { dir, base } = splitDisplayPath(path);
   const renamedFrom =
     change.kind === FileChangeKind.RENAME && change.pathBefore !== change.pathAfter
       ? change.pathBefore
@@ -669,80 +694,22 @@ function FileListRow({
       data-cursor-target="file-review-list-row"
     >
       <FileKindBadge kind={change.kind} />
-      {/* The directory truncates (context); the base never shrinks (identity) —
-          the same filename-first rule FilePathLink established. */}
-      <span
-        className="flex min-w-0 flex-1 items-center font-mono text-xs text-foreground"
-        title={path}
-      >
-        {renamedFrom && (
-          <span className="min-w-0 truncate text-muted-foreground-faint">
-            {renamedFrom}&nbsp;→&nbsp;
-          </span>
-        )}
-        {dir && (
-          <span className="min-w-0 truncate text-muted-foreground-faint">{dir}</span>
-        )}
-        <span className="shrink-0">{base}</span>
-      </span>
+      {renamedFrom && (
+        <span className="min-w-0 truncate font-mono text-xs text-muted-foreground-faint">
+          {renamedFrom}&nbsp;→&nbsp;
+        </span>
+      )}
+      <FilePathLink path={path} dirDisplay="dim" className="min-w-0 flex-1 text-xs" />
+      <FileLineStats
+        linesAdded={change.linesAdded}
+        linesRemoved={change.linesRemoved}
+      />
       <CaptureBadge change={change} />
       {trailing}
     </div>
   );
 }
 
-/** 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.
- */
-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>
-  );
-}
-
 /**
  * A change's committed verdict as a static badge: APPROVE reads "Kept" (the
  * bytes were reconciled into the workspace), REJECT reads "Discarded" (reverted

package/src/execution/MessageEntry.tsx

@@ -3,12 +3,17 @@
 import { memo, useMemo, useState } from "react";
 import { Streamdown } from "streamdown";
 import type { AgentMessage } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
-import { MessageType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import {
+  MessageType,
+  type InteractionMode,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
 import {
   MARKDOWN_COMPONENTS,
   unwrapEnclosingMarkdownFence,
 } from "../internal/markdown-components.js";
+import { InteractionModeBadge } from "./InteractionModeBadge.js";
+import { PlanDocumentMessage } from "./PlanDocumentMessage.js";
 import { useRenderTracer } from "../internal/dev/index.js";
 
 /** Props for {@link MessageEntry}. */
@@ -24,6 +29,25 @@ export interface MessageEntryProps {
    * this message for editing. Ignored for non-human messages.
    */
   readonly onEdit?: () => void;
+  /**
+   * Renders a `MESSAGE_AI` entry as a first-class plan document
+   * ({@link PlanDocumentMessage}) instead of a chat bubble. Set by the thread
+   * builder only on the NO-ARTIFACT fallback path: a completed Plan turn that
+   * never published `plan.md` (older executions, failed upload) keeps its
+   * plan inline — the message is the only copy of the plan. A turn that
+   * published the artifact collapses the message into the compact plan card
+   * instead (the document lives in the panel's plan tab). Ignored for non-AI
+   * messages.
+   */
+  readonly isPlanDocument?: boolean;
+  /**
+   * The turn's interaction mode, stamped by the thread builder on the
+   * synthetic prompt bubble (`MESSAGE_HUMAN`). Renders the
+   * {@link InteractionModeBadge} for non-default modes (a "Plan" pill), so
+   * the transcript reads unambiguously after mode switches. Ignored for
+   * non-human messages.
+   */
+  readonly interactionMode?: InteractionMode;
 }
 
 /**
@@ -54,6 +78,8 @@ export const MessageEntry = memo(function MessageEntry({
   message,
   className,
   onEdit,
+  isPlanDocument,
+  interactionMode,
 }: MessageEntryProps) {
   useRenderTracer("MessageEntry", {
     messageType: message.type,
@@ -68,9 +94,17 @@ export const MessageEntry = memo(function MessageEntry({
           content={message.content}
           className={className}
           onEdit={onEdit}
+          interactionMode={interactionMode}
         />
       );
     case MessageType.MESSAGE_AI:
+      // A completed Plan turn's plan is a document, not a bubble. The flag is
+      // only ever set on a settled message, so the streaming path is untouched.
+      if (isPlanDocument) {
+        return (
+          <PlanDocumentMessage content={message.content} className={className} />
+        );
+      }
       return (
         <AiMessage
           content={message.content}
@@ -97,10 +131,12 @@ function HumanMessage({
   content,
   className,
   onEdit,
+  interactionMode,
 }: {
   content: string;
   className?: string;
   onEdit?: () => void;
+  interactionMode?: InteractionMode;
 }) {
   return (
     <div
@@ -111,6 +147,11 @@ function HumanMessage({
         className,
       )}
     >
+      {/* The badge renders only for non-default modes (a "Plan" pill), so
+          ordinary Agent turns carry no extra chrome. */}
+      {interactionMode !== undefined && (
+        <InteractionModeBadge mode={interactionMode} className="mb-1.5" />
+      )}
       <p className="text-sm text-foreground whitespace-pre-wrap">{content}</p>
       {onEdit && (
         <button
@@ -133,6 +174,13 @@ function HumanMessage({
   );
 }
 
+/**
+ * The Build-from-plan turn's user entry: a compact pill in the user-turn
+ * position (right-aligned, like the prompt bubble it replaces) carrying the
+ * plan glyph and the turn's short label. Deliberately not editable — the
+ * label is not user prose to rephrase; refining the plan happens in the plan
+ * document, and the build is re-triggered from its card.
+ */
 function EditIcon() {
   return (
     <svg