@stigmer/ink 3.1.3 → 3.1.4

package/src/components/ApprovalPrompt.tsx

@@ -16,6 +16,20 @@ export interface ApprovalPromptProps {
   readonly onSubmit: (action: ApprovalAction) => void;
   /** Disables input while an approval submission is in flight. */
   readonly isSubmitting?: boolean;
+  /**
+   * Whether this prompt owns the keyboard. Defaults to `true`. When `false` the
+   * prompt renders inert (no `useInput`, no selection cursor, options dimmed) so
+   * exactly one decision surface is interactive at a time.
+   *
+   * This is the terminal's single-active-decision-surface rule: stdin is
+   * delivered to *every* mounted `useInput`, so several live `ApprovalPrompt`s
+   * would each consume the same keystroke and settle at once. The caller
+   * ({@link MessageThread}) marks only the first pending approval active; the
+   * file-review prompt in turn yields to any pending approval
+   * (`FileReviewPrompt.isActive = pendingApprovals.length === 0` in `SessionView`),
+   * so the order is: first approval → else the file-review prompt.
+   */
+  readonly isActive?: boolean;
 }
 
 interface ActionOption {
@@ -70,6 +84,7 @@ export function ApprovalPrompt({
   pendingApproval,
   onSubmit,
   isSubmitting = false,
+  isActive = true,
 }: ApprovalPromptProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
@@ -125,6 +140,7 @@ export function ApprovalPrompt({
         }
       }
     },
+    { isActive: isActive && !isSubmitting },
   );
 
   const serverSlug = pendingApproval.mcpServerSlug;
@@ -181,17 +197,23 @@ export function ApprovalPrompt({
       </Box>
 
       <Box gap={2} marginTop={1} paddingLeft={2}>
-        {options.map((opt, idx) => (
-          <Text
-            key={opt.shortcut}
-            color={idx === selectedIndex ? opt.color : undefined}
-            dimColor={idx !== selectedIndex}
-            bold={idx === selectedIndex}
-          >
-            {idx === selectedIndex ? "▸ " : "  "}
-            [{opt.shortcut}] {opt.label}
-          </Text>
-        ))}
+        {options.map((opt, idx) => {
+          // When inactive, no option is selected and all read dim — the active
+          // prompt's highlight (vs. these dimmed rows) is the cue for which
+          // approval owns the keyboard, so no per-prompt hint is needed.
+          const selected = isActive && idx === selectedIndex;
+          return (
+            <Text
+              key={opt.shortcut}
+              color={selected ? opt.color : undefined}
+              dimColor={!selected}
+              bold={selected}
+            >
+              {selected ? "▸ " : "  "}
+              [{opt.shortcut}] {opt.label}
+            </Text>
+          );
+        })}
       </Box>
 
       {isSubmitting && (

package/src/components/FileChangeProgressBar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Box, Text } from "ink";
 import type { FileChangeProgress } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
 import { kindLetter, progressEntryDisplayPath } from "../file-review.js";
+import { FileLineStats } from "./FileReviewAtoms.js";
 
 /** Props for {@link FileChangeProgressBar}. */
 export interface FileChangeProgressBarProps {
@@ -63,7 +64,7 @@ export function FileChangeProgressBar({
         <Text dimColor>
           {filesChanged} file{filesChanged === 1 ? "" : "s"} changing…
         </Text>
-        <LineStats linesAdded={linesAdded} linesRemoved={linesRemoved} />
+        <FileLineStats linesAdded={linesAdded} linesRemoved={linesRemoved} />
       </Box>
 
       {expanded && (
@@ -76,7 +77,7 @@ export function FileChangeProgressBar({
                 <Text dimColor wrap="truncate-end">
                   {path}
                 </Text>
-                <LineStats
+                <FileLineStats
                   linesAdded={entry.linesAdded}
                   linesRemoved={entry.linesRemoved}
                 />
@@ -93,30 +94,3 @@ export function FileChangeProgressBar({
     </Box>
   );
 }
-
-/**
- * The `+N −M` stat for one file (or the whole turn), in the diff colour
- * vocabulary. Renders nothing when both counts are zero — the honest signal that
- * no count exists (binary or secret-withheld changes) — rather than a misleading
- * `+0 -0`, matching the web `FileLineStats` contract.
- *
- * Kept module-local: this is the only consumer today. When `FileReviewPrompt`
- * and `FileReviewRecord` gain `+N −M` (the deferred "CLI +N −M parity"
- * follow-up), lift this into a shared ink atom (the analogue of `sdk/react`'s
- * `FileReviewAtoms`) so the three surfaces cannot drift — do not copy it.
- */
-function LineStats({
-  linesAdded,
-  linesRemoved,
-}: {
-  readonly linesAdded: number;
-  readonly linesRemoved: number;
-}) {
-  if (linesAdded === 0 && linesRemoved === 0) return null;
-  return (
-    <Text>
-      <Text color="green">+{linesAdded}</Text>
-      <Text color="red"> -{linesRemoved}</Text>
-    </Text>
-  );
-}

package/src/components/FileDiffBody.tsx

@@ -0,0 +1,164 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import type { CapturedFileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
+import { FileChangeType } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import {
+  computeDiff,
+  useFileChangeContent,
+  type DiffHunk,
+} from "@stigmer/react";
+import { toDisplayFileChange } from "@stigmer/sdk";
+
+/**
+ * The most diff lines a single file's body renders before it is capped. A
+ * terminal has no scroll-within-region, so an unbounded diff would flood the
+ * scrollback; beyond this the remainder is summarized in a `… K more lines`
+ * footer (the terminal analogue of the web's `BoundedContent` clamp).
+ */
+const DIFF_MAX_LINES = 200;
+
+/** Props for {@link FileDiffBody}. */
+export interface FileDiffBodyProps {
+  /** The captured file change whose before/after diff to render. */
+  readonly change: CapturedFileChange;
+}
+
+/**
+ * The terminal analogue of `@stigmer/react`'s `FileChangeDiff` — the whole-file
+ * branch. Renders a single `CapturedFileChange`'s unified diff for review in the
+ * terminal.
+ *
+ * A capture is always whole-file (`toDisplayFileChange` emits
+ * `captureLevel = WHOLE_FILE`), so this deliberately handles only that case: it
+ * resolves the before/after text via the shared `useFileChangeContent` behavior
+ * hook (inline bodies cost nothing; offloaded bodies are fetched lazily through
+ * the server proxy) and diffs them with the shared pure `computeDiff` — the SAME
+ * engine the web renders, so the terminal and web diffs are line-for-line
+ * identical and cannot drift.
+ *
+ * Renders body-only (no filename caption): the caller's selected row already
+ * names the file and shows its `+N −M`, so a header here would just repeat what
+ * the reviewer read one line up.
+ *
+ * **Requires an `InkStigmerProvider` ancestor.** `useFileChangeContent` reads the
+ * Stigmer client via `useStigmer()` (to dereference offloaded diff bytes), which
+ * throws outside a provider. In a live session this always holds — `SessionView`
+ * renders under `InkStigmerProvider`.
+ */
+export function FileDiffBody({ change }: FileDiffBodyProps) {
+  const displayChange = useMemo(() => toDisplayFileChange(change), [change]);
+  const { beforeText, afterText, isBinary, isLoading, error, isTruncated, downloadUrl } =
+    useFileChangeContent(displayChange);
+
+  const hunks = useMemo<readonly DiffHunk[]>(() => {
+    if (beforeText === null || afterText === null) return [];
+    return computeDiff(beforeText, afterText);
+  }, [beforeText, afterText]);
+
+  // Honest state precedence, mirroring the web FileChangeBody's whole-file arm:
+  // a binary has no text diff; a server-truncated body cannot be diffed inline;
+  // an offloaded body may still be loading or have failed; only then do we trust
+  // an empty hunk list to mean the file genuinely has no visible change.
+  if (isBinary) {
+    return <Notice>Binary file changed.</Notice>;
+  }
+  if (isTruncated) {
+    return (
+      <Notice>
+        This file is too large to diff inline.
+        {downloadUrl ? ` Download the full file: ${downloadUrl}` : ""}
+      </Notice>
+    );
+  }
+  if (isLoading) {
+    return <Notice>Loading diff…</Notice>;
+  }
+  if (error) {
+    return <Notice tone="error">Could not load this file's contents.</Notice>;
+  }
+  if (hunks.length === 0) {
+    // A CREATE with nothing to show is a genuinely empty new file; anything else
+    // with no renderable diff is the non-committal "no preview" — we never claim
+    // emptiness we cannot prove from the capture.
+    return (
+      <Notice>
+        {displayChange.changeType === FileChangeType.CREATE
+          ? "Empty new file."
+          : "No preview available."}
+      </Notice>
+    );
+  }
+
+  return <DiffHunks hunks={hunks} />;
+}
+
+// ---------------------------------------------------------------------------
+// Rendering
+// ---------------------------------------------------------------------------
+
+/** One renderable diff row: a hunk header, or a single before/after line. */
+type DiffRow =
+  | { readonly kind: "header"; readonly text: string }
+  | { readonly kind: "line"; readonly type: "added" | "removed" | "context"; readonly content: string };
+
+/** Flattens hunks into a single row stream so the line cap spans the whole diff. */
+function flattenHunks(hunks: readonly DiffHunk[]): DiffRow[] {
+  const rows: DiffRow[] = [];
+  for (const hunk of hunks) {
+    rows.push({
+      kind: "header",
+      text: `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`,
+    });
+    for (const line of hunk.lines) {
+      rows.push({ kind: "line", type: line.type, content: line.content });
+    }
+  }
+  return rows;
+}
+
+function DiffHunks({ hunks }: { hunks: readonly DiffHunk[] }) {
+  const rows = useMemo(() => flattenHunks(hunks), [hunks]);
+  const shown = rows.slice(0, DIFF_MAX_LINES);
+  const overflow = rows.length - shown.length;
+
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {shown.map((row, i) => (
+        <DiffRowText key={i} row={row} />
+      ))}
+      {overflow > 0 && (
+        <Text dimColor>… {overflow} more line{overflow === 1 ? "" : "s"}</Text>
+      )}
+    </Box>
+  );
+}
+
+function DiffRowText({ row }: { row: DiffRow }) {
+  if (row.kind === "header") {
+    return <Text dimColor>{row.text}</Text>;
+  }
+  if (row.type === "added") {
+    return <Text color="green">+{row.content}</Text>;
+  }
+  if (row.type === "removed") {
+    return <Text color="red">-{row.content}</Text>;
+  }
+  return <Text dimColor> {row.content}</Text>;
+}
+
+/** A short status line for a non-renderable diff (binary / truncated / loading / error / empty). */
+function Notice({
+  children,
+  tone = "muted",
+}: {
+  readonly children: React.ReactNode;
+  readonly tone?: "muted" | "error";
+}) {
+  return (
+    <Box marginTop={1}>
+      <Text color={tone === "error" ? "red" : undefined} dimColor={tone !== "error"}>
+        {children}
+      </Text>
+    </Box>
+  );
+}

package/src/components/FileReviewAtoms.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Text } from "ink";
+
+/**
+ * Shared presentational atoms for the terminal file-review surfaces — the single
+ * source for the `+N −M` line stat, so the decision prompt, the settled record,
+ * and the mid-run progress bar can never drift in how they render a file's (or a
+ * set's) magnitude. The terminal analogue of `@stigmer/react`'s `FileReviewAtoms`.
+ *
+ * The change-kind marker is deliberately NOT here: the terminal renders kind via
+ * the pure `kindLetter` helper (in `file-review.ts`), already shared across every
+ * surface. The web needs a `FileKindBadge` component because its marker carries
+ * per-kind color tokens and a11y labels; a plain letter needs neither.
+ */
+
+/**
+ * The `+N −M` stat for one file (or a whole set), in the diff colour vocabulary.
+ * Renders nothing when both counts are zero — the honest signal that no count
+ * exists (binary or secret-withheld changes, or records captured before the
+ * counts were stamped) — rather than a misleading `+0 -0`, matching the web
+ * `FileLineStats` contract.
+ */
+export function FileLineStats({
+  linesAdded,
+  linesRemoved,
+}: {
+  readonly linesAdded: number;
+  readonly linesRemoved: number;
+}) {
+  if (linesAdded === 0 && linesRemoved === 0) return null;
+  return (
+    <Text>
+      <Text color="green">+{linesAdded}</Text>
+      <Text color="red"> -{linesRemoved}</Text>
+    </Text>
+  );
+}

package/src/components/FileReviewPrompt.tsx

@@ -15,7 +15,14 @@ import {
   fileDecisionKey,
   type FileDecisionOptions,
 } from "@stigmer/react";
-import { blockReasonNote, changeDisplayPath, kindLetter } from "../file-review.js";
+import {
+  blockReasonNote,
+  changeDisplayPath,
+  changeSetLineStats,
+  kindLetter,
+} from "../file-review.js";
+import { FileLineStats } from "./FileReviewAtoms.js";
+import { FileDiffBody } from "./FileDiffBody.js";
 
 /** Props for {@link FileReviewPrompt}. */
 export interface FileReviewPromptProps {
@@ -111,6 +118,10 @@ export function FileReviewPrompt({
     return n;
   }, [changes, verdicts]);
 
+  // The set's aggregate +N −M, shown beside the header so the bar carries the
+  // magnitude of what is being decided, not just the file count (web parity).
+  const lineStats = useMemo(() => changeSetLineStats(changeSet), [changeSet]);
+
   const labels = bulkLabels(total, decidedCount, binaryOnly);
 
   // Busy while any decision for THIS set is in flight (whole-set key or any
@@ -230,6 +241,10 @@ export function FileReviewPrompt({
         <Text color="cyan" bold>
           ✎ {total} file{total === 1 ? "" : "s"} awaiting review
         </Text>
+        <FileLineStats
+          linesAdded={lineStats.linesAdded}
+          linesRemoved={lineStats.linesRemoved}
+        />
       </Box>
 
       {perFile ? (
@@ -279,13 +294,19 @@ interface PerFileListProps {
   readonly interactive: boolean;
 }
 
-/** The per-file review list: kind letter, path, verdict/keepability, and a hint. */
+/**
+ * The per-file review list: kind letter, path, verdict/keepability, and a hint,
+ * followed by a master-detail diff pane for the selected file. The list itself
+ * stays stable as the selection moves (the diff renders in a fixed pane below,
+ * not inline between rows), so navigating never reflows the rows above.
+ */
 function PerFileList({
   changes,
   verdicts,
   selectedIndex,
   interactive,
 }: PerFileListProps) {
+  const selectedChange = changes[selectedIndex];
   return (
     <Box flexDirection="column" marginTop={1} paddingLeft={2}>
       {changes.map((change, idx) => {
@@ -311,6 +332,10 @@ function PerFileList({
             >
               {changeDisplayPath(change)}
             </Text>
+            <FileLineStats
+              linesAdded={change.linesAdded}
+              linesRemoved={change.linesRemoved}
+            />
             {decided && <Text dimColor>({decided})</Text>}
             {!decided && note && <Text color="yellow">— {note}</Text>}
           </Box>
@@ -323,6 +348,13 @@ function PerFileList({
             : "read-only"}
         </Text>
       </Box>
+
+      {/* Master-detail: the selected file's diff renders here (keyed by id so it
+          remounts — and lazily re-resolves any offloaded body — as the selection
+          moves), below the list so the controls above never shift. */}
+      {selectedChange && (
+        <FileDiffBody key={selectedChange.id} change={selectedChange} />
+      )}
     </Box>
   );
 }

package/src/components/FileReviewRecord.tsx

@@ -8,9 +8,11 @@ import {
 import { deriveEffectiveVerdicts } from "@stigmer/react";
 import {
   changeDisplayPath,
+  changeSetLineStats,
   kindLetter,
   settledSummary,
 } from "../file-review.js";
+import { FileLineStats } from "./FileReviewAtoms.js";
 
 /** Props for {@link FileReviewRecord}. */
 export interface FileReviewRecordProps {
@@ -32,12 +34,17 @@ export function FileReviewRecord({ fileChangeSet }: FileReviewRecordProps) {
   const failed = fileChangeSet.status === FileChangeSetStatus.FAILED;
   const verdicts = deriveEffectiveVerdicts(fileChangeSet);
   const summary = failed ? "review failed" : settledSummary(fileChangeSet);
+  const lineStats = changeSetLineStats(fileChangeSet);
 
   return (
     <Box flexDirection="column" paddingLeft={2}>
       <Box gap={1}>
         <Text dimColor>✎</Text>
         <Text dimColor>File review — {summary}</Text>
+        <FileLineStats
+          linesAdded={lineStats.linesAdded}
+          linesRemoved={lineStats.linesRemoved}
+        />
       </Box>
       {fileChangeSet.changes.map((change) => {
         const verdict = verdicts.get(change.id);
@@ -54,6 +61,10 @@ export function FileReviewRecord({ fileChangeSet }: FileReviewRecordProps) {
             <Text dimColor wrap="truncate-end">
               {changeDisplayPath(change)}
             </Text>
+            <FileLineStats
+              linesAdded={change.linesAdded}
+              linesRemoved={change.linesRemoved}
+            />
             {label && <Text dimColor>({label})</Text>}
           </Box>
         );

package/src/components/MessageThread.tsx

@@ -302,6 +302,16 @@ export function MessageThread({
     [executions, activeStreamExecution],
   );
 
+  // The single active decision surface: stdin is delivered to every mounted
+  // `useInput`, so only the FIRST pending approval owns the keyboard — the rest
+  // render inert. The file-review prompt (in `SessionView`) in turn yields while
+  // any approval is pending, so the terminal always has exactly one interactive
+  // decision surface: first approval → else the file-review prompt.
+  const firstApprovalKey = useMemo(
+    () => items.find((it) => it.kind === "approval")?.key,
+    [items],
+  );
+
   const historyItems = items.slice(0, liveStart);
   const liveItems = items.slice(liveStart);
 
@@ -311,14 +321,14 @@ export function MessageThread({
         <Static items={historyItems}>
           {(item) => (
             <Box key={item.key} flexDirection="column" marginBottom={1}>
-              {renderItem(item, onApprovalSubmit, submittingApprovalIds, expandToolCalls)}
+              {renderItem(item, onApprovalSubmit, submittingApprovalIds, expandToolCalls, firstApprovalKey)}
             </Box>
           )}
         </Static>
 
         {liveItems.map((item) => (
           <Box key={item.key} flexDirection="column" marginBottom={1}>
-            {renderItem(item, onApprovalSubmit, submittingApprovalIds, expandToolCalls)}
+            {renderItem(item, onApprovalSubmit, submittingApprovalIds, expandToolCalls, firstApprovalKey)}
           </Box>
         ))}
       </Box>
@@ -331,6 +341,7 @@ function renderItem(
   onApprovalSubmit?: (toolCallId: string, action: ApprovalAction) => void,
   submittingApprovalIds?: ReadonlySet<string>,
   expandToolCalls?: boolean,
+  activeApprovalKey?: string,
 ): React.ReactNode {
   switch (item.kind) {
     case "message":
@@ -353,6 +364,8 @@ function renderItem(
           isSubmitting={
             submittingApprovalIds?.has(item.pendingApproval.toolCallId) ?? false
           }
+          // Only the first pending approval is interactive (see firstApprovalKey).
+          isActive={item.key === activeApprovalKey}
         />
       ) : null;
     case "pending-message":

package/src/file-review.ts

@@ -88,6 +88,33 @@ export function blockReasonNote(change: CapturedFileChange): string | null {
   }
 }
 
+/** The aggregate `+N −M` line counts for a change set. */
+export interface LineStats {
+  /** Total lines added across the set's changes. */
+  readonly linesAdded: number;
+  /** Total lines removed across the set's changes. */
+  readonly linesRemoved: number;
+}
+
+/**
+ * Sums a change set's per-file `linesAdded`/`linesRemoved` into one aggregate,
+ * for the set-level `+N −M` shown beside the prompt header and the settled
+ * record summary (parity with the web card's collapsed-bar aggregate). Counts
+ * every change regardless of verdict — it reports what changed, not what was
+ * kept. A file with no counts (binary, secret-withheld, or a record predating
+ * the fields) contributes zero, so the aggregate honestly understates rather
+ * than guessing; when NO file has counts it is zero and the stat is hidden.
+ */
+export function changeSetLineStats(set: FileChangeSet): LineStats {
+  let linesAdded = 0;
+  let linesRemoved = 0;
+  for (const change of set.changes) {
+    linesAdded += change.linesAdded;
+    linesRemoved += change.linesRemoved;
+  }
+  return { linesAdded, linesRemoved };
+}
+
 /** The effective per-file verdict counts for a settled change set. */
 export interface SettledCounts {
   /** Files kept (effective verdict APPROVE). */

package/src/index.ts

@@ -21,10 +21,12 @@ export { TodoList, type TodoListProps } from "./components/TodoList.js";
 export { ApprovalPrompt, type ApprovalPromptProps } from "./components/ApprovalPrompt.js";
 export { FileReviewPrompt, type FileReviewPromptProps } from "./components/FileReviewPrompt.js";
 export { FileReviewRecord, type FileReviewRecordProps } from "./components/FileReviewRecord.js";
+export { FileDiffBody, type FileDiffBodyProps } from "./components/FileDiffBody.js";
 export {
   FileChangeProgressBar,
   type FileChangeProgressBarProps,
 } from "./components/FileChangeProgressBar.js";
+export { FileLineStats } from "./components/FileReviewAtoms.js";
 
 // File-review pure helpers (kind letters, paths, block reasons, settled counts)
 export {
@@ -32,8 +34,10 @@ export {
   changeDisplayPath,
   progressEntryDisplayPath,
   blockReasonNote,
+  changeSetLineStats,
   settledCounts,
   settledSummary,
+  type LineStats,
   type SettledCounts,
 } from "./file-review.js";
 export { ExecutionProgress, type ExecutionProgressProps } from "./components/ExecutionProgress.js";