@stigmer/react 3.0.9-dev.20260615153829 → 3.1.0

package/src/version-history/UnifiedDiffView.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useMemo } from "react";
+import { cn } from "@stigmer/theme";
+import { DiffViewer } from "./DiffViewer";
+import { parseUnifiedDiff } from "./parseUnifiedDiff";
+
+/** Props for {@link UnifiedDiffView}. */
+export interface UnifiedDiffViewProps {
+  /** A unified-diff patch string (e.g. Cursor's hunk-only `diffString`). */
+  readonly patch: string;
+  /** Additional CSS classes for the root container (e.g. a height cap). */
+  readonly className?: string;
+}
+
+/**
+ * The single canonical renderer for a unified-diff patch *string*.
+ *
+ * It parses the patch into hunks and renders them through {@link DiffViewer} —
+ * the same accessible table (line numbers, colored row backgrounds, a narrow
+ * `+`/`-` gutter column, `--stgm-diff-*` tokens) that a computed before/after
+ * diff uses — so a harness that only emits a ready unified diff (the Cursor
+ * harness's `diffString`) looks line-for-line identical to a native whole-file
+ * diff. The `---`/`+++`/`@@` preamble parses into metadata and never reaches the
+ * screen; a single-hunk diff shows no `@@` separator at all.
+ *
+ * Fallback: if the patch cannot be parsed into any hunk (a malformed or
+ * non-standard payload) it renders verbatim in a `<pre>` so we show something
+ * truthful rather than a misleading "No changes". Color is never the sole
+ * channel in either path — the gutter marker / literal prefix carries the change
+ * type for non-color readers.
+ *
+ * Internal to the SDK (not barrel-exported); consumed by {@link ResultView} and
+ * {@link FileChangeDiff}.
+ */
+export function UnifiedDiffView({ patch, className }: UnifiedDiffViewProps) {
+  const hunks = useMemo(() => parseUnifiedDiff(patch), [patch]);
+
+  if (hunks.length > 0) {
+    return <DiffViewer hunks={hunks} className={className} />;
+  }
+
+  // Unparseable but non-empty: show the raw patch rather than nothing.
+  const lines = patch.split("\n");
+  return (
+    <pre
+      className={cn(
+        "max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-muted-subtle p-2 font-mono text-xs",
+        className,
+      )}
+    >
+      {lines.map((line, i) => (
+        <div
+          key={i}
+          className={cn(
+            line.startsWith("+") && !line.startsWith("+++") && "text-diff-added-fg",
+            line.startsWith("-") && !line.startsWith("---") && "text-diff-removed-fg",
+            line.startsWith("@@") && "text-diff-hunk-header-fg",
+          )}
+        >
+          {line || " "}
+        </div>
+      ))}
+    </pre>
+  );
+}

package/src/version-history/__tests__/DiffViewer.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { DiffViewer } from "../DiffViewer";
+import type { DiffHunk } from "../types";
+
+afterEach(cleanup);
+
+// A hunk exercising all three line types: an unchanged line, a removal, and an
+// addition — so the single-gutter numbering can be checked per type.
+const hunk: DiffHunk = {
+  oldStart: 1,
+  oldLines: 2,
+  newStart: 1,
+  newLines: 2,
+  lines: [
+    { type: "context", content: "keep", oldLineNumber: 1, newLineNumber: 1 },
+    { type: "removed", content: "gone", oldLineNumber: 2 },
+    { type: "added", content: "fresh", newLineNumber: 2 },
+  ],
+};
+
+/** The first cell of a row is the (single) line-number gutter. */
+function gutter(row: Element): string {
+  return row.querySelectorAll("td")[0]?.textContent ?? "";
+}
+
+describe("DiffViewer — single-column gutter (Cursor-style)", () => {
+  it("renders exactly one line-number column (3 cells per row, not 4)", () => {
+    const { container } = render(<DiffViewer hunks={[hunk]} />);
+    const firstRow = container.querySelector("tbody tr")!;
+    // gutter + marker + content — the old+new pair is collapsed to one.
+    expect(firstRow.querySelectorAll("td")).toHaveLength(3);
+  });
+
+  it("numbers each line from the side it belongs to (new for added/context, old for removed)", () => {
+    const { container } = render(<DiffViewer hunks={[hunk]} />);
+    const rows = Array.from(container.querySelectorAll("tbody tr"));
+
+    // context "keep" → its new-file number
+    expect(gutter(rows[0])).toBe("1");
+    expect(rows[0].textContent).toContain("keep");
+
+    // removed "gone" → its old-file number (it has no new-side number)
+    expect(gutter(rows[1])).toBe("2");
+    expect(rows[1].textContent).toContain("gone");
+
+    // added "fresh" → its new-file number
+    expect(gutter(rows[2])).toBe("2");
+    expect(rows[2].textContent).toContain("fresh");
+  });
+
+  it("renders a 'No changes' status (no table) for empty hunks", () => {
+    const { container } = render(<DiffViewer hunks={[]} />);
+    expect(container.querySelector("table")).toBeNull();
+    expect(container.textContent).toContain("No changes");
+  });
+});

package/src/version-history/__tests__/UnifiedDiffView.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { UnifiedDiffView } from "../UnifiedDiffView";
+
+afterEach(cleanup);
+
+describe("UnifiedDiffView", () => {
+  it("renders a parseable patch through the DiffViewer table, not a raw dump", () => {
+    const patch =
+      "--- /dev/null\n+++ b/notes.md\n@@ -0,0 +1,2 @@\n+# Title\n+body\n";
+
+    const { container } = render(<UnifiedDiffView patch={patch} />);
+
+    // The accessible table is the renderer — not the old raw <pre>.
+    expect(container.querySelector("table")).not.toBeNull();
+    // Content is present...
+    expect(container.textContent).toContain("# Title");
+    expect(container.textContent).toContain("body");
+    // ...but the preamble never reaches the screen.
+    expect(container.textContent).not.toContain("/dev/null");
+    expect(container.textContent).not.toContain("+++");
+    // A single hunk shows no @@ separator (DiffViewer omits the first header).
+    expect(container.textContent).not.toContain("@@");
+  });
+
+  it("shows the subtle @@ separator only between hunks of a multi-hunk patch", () => {
+    const patch =
+      "--- a/f\n+++ b/f\n@@ -1,2 +1,2 @@\n ctx1\n-a\n+A\n@@ -10,2 +10,3 @@\n ctx2\n+added\n ctx3\n";
+
+    const { container } = render(<UnifiedDiffView patch={patch} />);
+
+    expect(container.querySelector("table")).not.toBeNull();
+    // The second hunk's header renders as a separator row.
+    expect(container.textContent).toContain("@@ -10,2 +10,3 @@");
+  });
+
+  it("falls back to a raw <pre> for an unparseable but non-empty patch", () => {
+    const { container } = render(<UnifiedDiffView patch="totally not a diff" />);
+
+    expect(container.querySelector("table")).toBeNull();
+    expect(container.querySelector("pre")).not.toBeNull();
+    expect(container.textContent).toContain("totally not a diff");
+  });
+
+  it("forwards className to the rendered container (e.g. a height cap)", () => {
+    const patch = "@@ -1 +1 @@\n-a\n+b\n";
+    const { container } = render(<UnifiedDiffView patch={patch} className="max-h-80" />);
+    expect(container.querySelector(".max-h-80")).not.toBeNull();
+  });
+});

package/src/version-history/__tests__/computeDiff.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { computeDiff } from "../computeDiff";
+
+describe("computeDiff", () => {
+  it("returns no hunks for identical text", () => {
+    expect(computeDiff("same\n", "same\n")).toEqual([]);
+  });
+
+  it("maps an addition with a new-side line number and no old-side number", () => {
+    const hunks = computeDiff("hello\n", "hello\nworld\n");
+    expect(hunks).toHaveLength(1);
+    const added = hunks[0].lines.find((l) => l.type === "added");
+    expect(added).toMatchObject({ type: "added", content: "world" });
+    expect(added?.newLineNumber).toBe(2);
+    expect(added?.oldLineNumber).toBeUndefined();
+  });
+
+  it("maps a replacement into a removed + added pair with correct numbers", () => {
+    const hunks = computeDiff("alpha\n", "beta\n");
+    expect(hunks[0].lines).toEqual([
+      { type: "removed", content: "alpha", oldLineNumber: 1 },
+      { type: "added", content: "beta", newLineNumber: 1 },
+    ]);
+  });
+
+  it("skips the no-newline marker when a side lacks a trailing newline", () => {
+    // structuredPatch emits "" here; the shared
+    // mapper must drop it rather than render it as a spurious context line.
+    const hunks = computeDiff("alpha", "beta");
+    expect(hunks[0].lines).toEqual([
+      { type: "removed", content: "alpha", oldLineNumber: 1 },
+      { type: "added", content: "beta", newLineNumber: 1 },
+    ]);
+  });
+});

package/src/version-history/__tests__/parseUnifiedDiff.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { parseUnifiedDiff } from "../parseUnifiedDiff";
+import { computeDiff } from "../computeDiff";
+
+describe("parseUnifiedDiff", () => {
+  it("parses a /dev/null create, discarding the ---/+++ preamble", () => {
+    // The exact shape the Cursor harness emits for a new file (the screenshot
+    // case): the file headers must not survive into the rendered hunks.
+    const patch =
+      "--- /dev/null\n+++ b/Users/x/notes.md\n@@ -0,0 +1,3 @@\n+# Project Notes\n+\n+Minimal service\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(1);
+    const lines = hunks[0].lines;
+    expect(lines.map((l) => l.type)).toEqual(["added", "added", "added"]);
+    expect(lines.map((l) => l.content)).toEqual(["# Project Notes", "", "Minimal service"]);
+    // Added lines carry a new-side number and no old-side number.
+    expect(lines.map((l) => l.newLineNumber)).toEqual([1, 2, 3]);
+    expect(lines.every((l) => l.oldLineNumber === undefined)).toBe(true);
+    // No preamble leaked into any content.
+    const allContent = lines.map((l) => l.content).join("\n");
+    expect(allContent).not.toContain("/dev/null");
+    expect(allContent).not.toContain("+++");
+  });
+
+  it("parses a header-less hunk-only edit with correct line numbers", () => {
+    const patch = "@@ -1,3 +1,3 @@\n line one\n-old middle\n+new middle\n line three\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(1);
+    expect(hunks[0].lines).toEqual([
+      { type: "context", content: "line one", oldLineNumber: 1, newLineNumber: 1 },
+      { type: "removed", content: "old middle", oldLineNumber: 2 },
+      { type: "added", content: "new middle", newLineNumber: 2 },
+      { type: "context", content: "line three", oldLineNumber: 3, newLineNumber: 3 },
+    ]);
+  });
+
+  it("skips '\' markers", () => {
+    const patch =
+      "--- a/f\n+++ b/f\n@@ -1 +1 @@\n-alpha\n\\n+beta\n\\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(1);
+    // The two metadata markers are gone; only the real change lines remain.
+    expect(hunks[0].lines).toEqual([
+      { type: "removed", content: "alpha", oldLineNumber: 1 },
+      { type: "added", content: "beta", newLineNumber: 1 },
+    ]);
+  });
+
+  it("parses a multi-hunk patch into independent, correctly-numbered hunks", () => {
+    const patch =
+      "--- a/f\n+++ b/f\n@@ -1,2 +1,2 @@\n ctx1\n-a\n+A\n@@ -10,2 +10,3 @@\n ctx2\n+added\n ctx3\n";
+
+    const hunks = parseUnifiedDiff(patch);
+
+    expect(hunks).toHaveLength(2);
+    expect(hunks[1].lines).toEqual([
+      { type: "context", content: "ctx2", oldLineNumber: 10, newLineNumber: 10 },
+      { type: "added", content: "added", newLineNumber: 11 },
+      { type: "context", content: "ctx3", oldLineNumber: 11, newLineNumber: 12 },
+    ]);
+  });
+
+  it("returns [] for an empty or unparseable patch (caller renders a raw fallback)", () => {
+    expect(parseUnifiedDiff("")).toEqual([]);
+    expect(parseUnifiedDiff("this is not a diff at all")).toEqual([]);
+  });
+
+  it("produces the same line shape as computeDiff for an equivalent change", () => {
+    // computeDiff (before/after text) and parseUnifiedDiff (a patch string) must
+    // map a change to identical DiffLines — they share mapPatchHunks.
+    const computed = computeDiff("alpha\n", "beta\n");
+    const parsed = parseUnifiedDiff("@@ -1 +1 @@\n-alpha\n+beta\n");
+
+    expect(parsed[0].lines).toEqual(computed[0].lines);
+  });
+});

package/src/version-history/computeDiff.ts

@@ -1,12 +1,15 @@
 import { structuredPatch } from "diff";
-import type { DiffHunk, DiffLine } from "./types";
+import { mapPatchHunks } from "./diff-hunks";
+import type { DiffHunk } from "./types";
 
 /**
  * Compute a unified diff between two text strings.
  *
  * Returns an array of {@link DiffHunk} objects, each containing the
  * changed and context lines with line numbers. Uses the `diff` library's
- * Myers algorithm internally.
+ * Myers algorithm internally, then maps the structured hunks through the
+ * shared {@link mapPatchHunks} (the same mapper `parseUnifiedDiff` uses), so a
+ * computed diff and a parsed unified diff render line-for-line identically.
  *
  * Pure function — no side effects, safe to call outside React.
  *
@@ -23,39 +26,5 @@ export function computeDiff(
     context: contextLines,
   });
 
-  return patch.hunks.map((hunk) => {
-    const lines: DiffLine[] = [];
-    let oldLine = hunk.oldStart;
-    let newLine = hunk.newStart;
-
-    for (const raw of hunk.lines) {
-      const prefix = raw[0];
-      const content = raw.slice(1);
-
-      if (prefix === "+") {
-        lines.push({ type: "added", content, newLineNumber: newLine });
-        newLine++;
-      } else if (prefix === "-") {
-        lines.push({ type: "removed", content, oldLineNumber: oldLine });
-        oldLine++;
-      } else {
-        lines.push({
-          type: "context",
-          content,
-          oldLineNumber: oldLine,
-          newLineNumber: newLine,
-        });
-        oldLine++;
-        newLine++;
-      }
-    }
-
-    return {
-      oldStart: hunk.oldStart,
-      oldLines: hunk.oldLines,
-      newStart: hunk.newStart,
-      newLines: hunk.newLines,
-      lines,
-    };
-  });
+  return mapPatchHunks(patch.hunks);
 }

package/src/version-history/diff-hunks.ts

@@ -0,0 +1,63 @@
+import type { StructuredPatchHunk } from "diff";
+import type { DiffHunk, DiffLine } from "./types";
+
+/**
+ * Maps the `diff` library's structured-patch hunks into our presentation
+ * {@link DiffHunk} shape, assigning running old/new line numbers per line.
+ *
+ * This is the single source of truth for the hunk mapping, shared by
+ * {@link computeDiff} (which feeds it `structuredPatch` output computed from
+ * before/after text) and `parseUnifiedDiff` (which feeds it `parsePatch` output
+ * parsed from a unified-diff string). Both functions in the `diff` library emit
+ * the identical {@link StructuredPatchHunk} shape, so one mapper serves both and
+ * the two diff sources can never drift in how a `+`/`-`/context line becomes a
+ * {@link DiffLine}.
+ *
+ * `` markers are skipped: they are diff metadata, not
+ * content, and would otherwise be mis-rendered as a spurious context line.
+ *
+ * Pure function — no side effects, safe to call outside React.
+ */
+export function mapPatchHunks(
+  hunks: readonly StructuredPatchHunk[],
+): readonly DiffHunk[] {
+  return hunks.map((hunk) => {
+    const lines: DiffLine[] = [];
+    let oldLine = hunk.oldStart;
+    let newLine = hunk.newStart;
+
+    for (const raw of hunk.lines) {
+      // "" is a metadata marker, not a real line.
+      if (raw.startsWith("\\")) continue;
+
+      const prefix = raw[0];
+      const content = raw.slice(1);
+
+      if (prefix === "+") {
+        lines.push({ type: "added", content, newLineNumber: newLine });
+        newLine++;
+      } else if (prefix === "-") {
+        lines.push({ type: "removed", content, oldLineNumber: oldLine });
+        oldLine++;
+      } else {
+        // A context line (leading space) or an empty raw line.
+        lines.push({
+          type: "context",
+          content,
+          oldLineNumber: oldLine,
+          newLineNumber: newLine,
+        });
+        oldLine++;
+        newLine++;
+      }
+    }
+
+    return {
+      oldStart: hunk.oldStart,
+      oldLines: hunk.oldLines,
+      newStart: hunk.newStart,
+      newLines: hunk.newLines,
+      lines,
+    };
+  });
+}

package/src/version-history/index.ts

@@ -9,6 +9,7 @@ export type { DiffSummaryProps } from "./DiffSummary";
 export { MultiFileDiffView } from "./MultiFileDiffView";
 export type { MultiFileDiffViewProps } from "./MultiFileDiffView";
 export { computeDiff } from "./computeDiff";
+export { parseUnifiedDiff } from "./parseUnifiedDiff";
 export { computeMultiFileDiff } from "./computeMultiFileDiff";
 export type {
   VersionEntry,

package/src/version-history/parseUnifiedDiff.ts

@@ -0,0 +1,34 @@
+import { parsePatch } from "diff";
+import { mapPatchHunks } from "./diff-hunks";
+import type { DiffHunk } from "./types";
+
+/**
+ * Parses a unified-diff patch *string* into presentation {@link DiffHunk}s.
+ *
+ * This is the bridge that lets a harness which only emits a ready unified diff
+ * (the Cursor harness's `diffString` -> `view.unifiedDiff` / `FileChange.
+ * unifiedDiff`) render through the same accessible {@link DiffViewer} table as a
+ * computed before/after diff — instead of being dumped as a raw `<pre>` with the
+ * `--- /dev/null`, `+++ b/...`, `@@` preamble and inline `+`/`-` prefixes.
+ *
+ * The `---`/`+++` file headers parse into metadata and are discarded; only the
+ * hunks survive, mapped through the shared {@link mapPatchHunks}. A diff input is
+ * a single file's patch, but `parsePatch` can return multiple file entries, so
+ * their hunks are flattened defensively.
+ *
+ * Returns `[]` for an empty or unparseable patch, so callers can fall back to a
+ * truthful raw rendering rather than showing a misleading "No changes".
+ *
+ * Pure function — no side effects, safe to call outside React.
+ */
+export function parseUnifiedDiff(patch: string): readonly DiffHunk[] {
+  if (!patch) return [];
+
+  try {
+    return parsePatch(patch).flatMap((file) => mapPatchHunks(file.hunks));
+  } catch {
+    // parsePatch can throw on a badly malformed patch; degrade to "no hunks" so
+    // the caller renders its raw fallback instead of crashing the thread.
+    return [];
+  }
+}

package/src/workflow/WorkflowExecutionApprovalCard.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import { cn } from "@stigmer/theme";
+import { DecisionButton } from "../internal/DecisionButton";
+import { InCardDecisionError } from "../internal/InCardDecisionError";
 
 /** Props for {@link WorkflowExecutionApprovalCard}. */
 export interface WorkflowExecutionApprovalCardProps {
@@ -20,8 +22,15 @@ export interface WorkflowExecutionApprovalCardProps {
     action: ApprovalAction,
     comment?: string,
   ) => Promise<unknown>;
-  /** `true` while a submission is in flight. */
+  /** `true` while this gate's submission is in flight. */
   readonly isSubmitting: boolean;
+  /**
+   * This gate's last failed decision, or `null`. Surfaced in-card beside the
+   * actions (via the shared {@link InCardDecisionError}) — supply
+   * {@link useWorkflowExecutionActions}'s `approvalErrorsByToolCallId` for this
+   * `toolCallId`.
+   */
+  readonly error?: Error | null;
   /** Additional CSS class names. */
   readonly className?: string;
 }
@@ -40,16 +49,26 @@ export const WorkflowExecutionApprovalCard = memo(function WorkflowExecutionAppr
   timeoutSeconds,
   onSubmitApproval,
   isSubmitting,
+  error,
   className,
 }: WorkflowExecutionApprovalCardProps) {
   const [comment, setComment] = useState("");
+  // Which action is in flight, so the spinner lands on the clicked button —
+  // matching ApprovalCard / WorkflowTaskApprovalCard. Reset once the RPC settles.
+  const [active, setActive] = useState<"approve" | "reject" | null>(null);
+
+  useEffect(() => {
+    if (!isSubmitting) setActive(null);
+  }, [isSubmitting]);
 
   // ApprovalAction enum values: 0=UNSPECIFIED, 1=APPROVE, 2=SKIP, 3=REJECT
   const handleApprove = useCallback(() => {
+    setActive("approve");
     onSubmitApproval(toolCallId, 1 as ApprovalAction, comment || undefined);
   }, [toolCallId, comment, onSubmitApproval]);
 
   const handleReject = useCallback(() => {
+    setActive("reject");
     onSubmitApproval(toolCallId, 3 as ApprovalAction, comment || undefined);
   }, [toolCallId, comment, onSubmitApproval]);
 
@@ -57,8 +76,10 @@ export const WorkflowExecutionApprovalCard = memo(function WorkflowExecutionAppr
     <div
       role="alert"
       aria-label="Approval required"
+      // Neutral card + 2px warning left accent — the quiet Cursor-grade chrome
+      // shared with ApprovalCard. (Replaces the old amber `bg-warning/5` fill.)
       className={cn(
-        "my-1 rounded-lg border border-warning/30 bg-warning/5 p-3",
+        "my-1 rounded-lg border border-border-prominent border-l-2 border-l-warning p-3",
         className,
       )}
     >
@@ -92,30 +113,34 @@ export const WorkflowExecutionApprovalCard = memo(function WorkflowExecutionAppr
       </div>
 
       <div className="mt-2 flex gap-2">
-        <button
-          type="button"
+        <DecisionButton
+          label="Approve"
+          variant="primary"
           onClick={handleApprove}
-          disabled={isSubmitting}
-          className={cn(
-            "rounded px-3 py-1 text-xs font-medium",
-            "bg-success text-success-foreground",
-            "hover:bg-success/90 disabled:pointer-events-none disabled:opacity-50",
-          )}
-        >
-          Approve
-        </button>
-        <button
-          type="button"
+          isActive={active === "approve"}
+          isSubmitting={isSubmitting}
+        />
+        <DecisionButton
+          label="Reject"
+          variant="danger"
           onClick={handleReject}
-          disabled={isSubmitting}
-          className={cn(
-            "rounded border border-destructive/30 px-3 py-1 text-xs font-medium text-destructive",
-            "hover:bg-destructive/10 disabled:pointer-events-none disabled:opacity-50",
-          )}
-        >
-          Reject
-        </button>
+          isActive={active === "reject"}
+          isSubmitting={isSubmitting}
+        />
       </div>
+
+      {/* A failed decision surfaces HERE, beside this gate's actions — not in the
+          viewer's lifecycle banner. A workflow can hold many gates at once, so a
+          failure must name the one it belongs to; the optimistic spinner has
+          already reverted, and this explains the snap-back. Shared with the
+          agent ApprovalCard / FileReviewCard via InCardDecisionError. */}
+      {error && (
+        <InCardDecisionError
+          error={error}
+          leadIn="submit decision"
+          cursorTarget="wf-approval-error"
+        />
+      )}
     </div>
   );
 });

package/src/workflow/WorkflowExecutionTimeline.tsx

@@ -23,8 +23,17 @@ export interface WorkflowExecutionTimelineProps {
     formData?: Record<string, unknown>,
     comment?: string,
   ) => Promise<unknown>;
-  /** True while a task approval submission is in flight. */
-  readonly isSubmittingApproval?: boolean;
+  /**
+   * Task names whose human_input approval is currently in flight, keyed by
+   * `taskName` so deciding one gate never spins another. Supply
+   * {@link useWorkflowExecutionActions}'s `taskApprovalSubmittingTaskNames`.
+   */
+  readonly taskApprovalSubmittingTaskNames?: ReadonlySet<string>;
+  /**
+   * Per-gate human_input approval failures, keyed by `taskName`. Supply
+   * {@link useWorkflowExecutionActions}'s `taskApprovalErrorsByTaskName`.
+   */
+  readonly taskApprovalErrorsByTaskName?: ReadonlyMap<string, Error>;
   /** Additional CSS class names. */
   readonly className?: string;
 }
@@ -47,7 +56,8 @@ export const WorkflowExecutionTimeline = memo(function WorkflowExecutionTimeline
   onNavigateToAgentExecution,
   taskStates,
   onSubmitTaskApproval,
-  isSubmittingApproval,
+  taskApprovalSubmittingTaskNames,
+  taskApprovalErrorsByTaskName,
   className,
 }: WorkflowExecutionTimelineProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -112,7 +122,8 @@ export const WorkflowExecutionTimeline = memo(function WorkflowExecutionTimeline
           onNavigateToAgentExecution={onNavigateToAgentExecution}
           taskStates={taskStates}
           onSubmitTaskApproval={onSubmitTaskApproval}
-          isSubmittingApproval={isSubmittingApproval}
+          taskApprovalSubmittingTaskNames={taskApprovalSubmittingTaskNames}
+          taskApprovalErrorsByTaskName={taskApprovalErrorsByTaskName}
         />
       ))}
 

package/src/workflow/WorkflowExecutionTimelineEvent.tsx

@@ -19,7 +19,10 @@ interface TimelineEventProps {
     formData?: Record<string, unknown>,
     comment?: string,
   ) => Promise<unknown>;
-  readonly isSubmittingApproval?: boolean;
+  /** Task names whose human_input approval is in flight, keyed by `taskName`. */
+  readonly taskApprovalSubmittingTaskNames?: ReadonlySet<string>;
+  /** Per-gate human_input approval failures, keyed by `taskName`. */
+  readonly taskApprovalErrorsByTaskName?: ReadonlyMap<string, Error>;
 }
 
 /**
@@ -37,7 +40,8 @@ export const WorkflowExecutionTimelineEvent = memo(function WorkflowExecutionTim
   onNavigateToAgentExecution,
   taskStates,
   onSubmitTaskApproval,
-  isSubmittingApproval,
+  taskApprovalSubmittingTaskNames,
+  taskApprovalErrorsByTaskName,
 }: TimelineEventProps) {
   const timestamp = formatTimestamp(event.occurredAt);
   const p = event.payload;
@@ -277,7 +281,8 @@ export const WorkflowExecutionTimelineEvent = memo(function WorkflowExecutionTim
                 ? (p.value.formSchema as unknown as Record<string, unknown>)
                 : undefined}
               onSubmit={onSubmitTaskApproval}
-              isSubmitting={isSubmittingApproval ?? false}
+              isSubmitting={taskApprovalSubmittingTaskNames?.has(event.taskName) ?? false}
+              error={taskApprovalErrorsByTaskName?.get(event.taskName) ?? null}
             />
           )}
         </EventRow>