Merge remote-tracking branch 'origin/main' into feat/pull-erp

Author: DylanMerigaud

components/dashboard.tsx

@@ -395,27 +395,51 @@ export const Dashboard = ({
   const [gateChoices, setGateChoices] = useState<
     Record<string, "approve" | "reject">
   >({});
-  // Clear staged decisions whenever the run leaves the awaiting state (resolved,
-  // re-run, or a new wave streams in fresh) so they never leak across waves/runs.
+  // Reject notes staged per gate (multi-gate), keyed by step id.
+  const [gateReasons, setGateReasons] = useState<Record<string, string>>({});
+  // Single-gate header: clicking Reject arms a reason input before confirming.
+  const [rejecting, setRejecting] = useState(false);
+  const [rejectReason, setRejectReason] = useState("");
+  // Clear all staged decision/reason state whenever the run leaves the awaiting
+  // state (resolved, re-run, or a new wave streams in fresh) so nothing leaks.
   const awaiting = state.status === "awaiting";
   const wasAwaitingRef = useRef(false);
   useEffect(() => {
-    if (wasAwaitingRef.current && !awaiting) setGateChoices({});
+    if (wasAwaitingRef.current && !awaiting) {
+      setGateChoices({});
+      setGateReasons({});
+      setRejecting(false);
+      setRejectReason("");
+    }
     wasAwaitingRef.current = awaiting;
   }, [awaiting]);
 
   const setGate = useEventCallback((id: string, choice: "approve" | "reject") =>
     setGateChoices((m) => ({ ...m, [id]: choice })),
   );
+  // A gate flipped back to approve drops any reject note it had staged.
+  const setGateReason = useEventCallback((id: string, reason: string) =>
+    setGateReasons((m) => ({ ...m, [id]: reason })),
+  );
   const setAllGates = (choice: "approve" | "reject") =>
     setGateChoices(Object.fromEntries(pendingIds.map((id) => [id, choice])));
   const allDecided =
     gates.length > 0 && pendingIds.every((id) => gateChoices[id]);
+  // Only notes on gates still staged as reject go out (approve drops the note).
+  const rejectReasons = (): Record<string, string> =>
+    Object.fromEntries(
+      Object.entries(gateReasons).filter(
+        ([id, r]) => gateChoices[id] === "reject" && r.trim(),
+      ),
+    );
 
   const select = (id: string) => {
     if (id === selectedId || locked) return;
     setSelectedId(id);
     setGateChoices({});
+    setGateReasons({});
+    setRejecting(false);
+    setRejectReason("");
     reset();
   };
 
@@ -592,33 +616,71 @@ export const Dashboard = ({
                 size="sm"
                 data-testid="submit-decisions"
                 disabled={!allDecided}
-                onClick={() => decideMany(selected.id, gateChoices)}
+                onClick={() =>
+                  decideMany(selected.id, gateChoices, rejectReasons())
+                }
               >
                 Submit decisions
               </Button>
             </div>
           ) : state.status === "awaiting" && selected ? (
-            // A single gate — decide it straight from the header.
+            // A single gate — decide it straight from the header. Reject first arms a
+            // reason input (optional note) before confirming, so a blocked bill carries
+            // a why into the trace + the audit history.
             <div
               className="flex shrink-0 items-center gap-2"
               data-testid="approval-gate"
             >
-              <Button
-                variant="danger"
-                size="sm"
-                data-testid="reject-btn"
-                onClick={() => decide(selected.id, "reject")}
-              >
-                Reject
-              </Button>
-              <Button
-                variant="ok"
-                size="sm"
-                data-testid="approve-btn"
-                onClick={() => decide(selected.id, "approve")}
-              >
-                Approve
-              </Button>
+              {rejecting ? (
+                <>
+                  <input
+                    value={rejectReason}
+                    onChange={(e) => setRejectReason(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter")
+                        void decide(selected.id, "reject", rejectReason);
+                      if (e.key === "Escape") setRejecting(false);
+                    }}
+                    placeholder="Reason (optional)"
+                    data-testid="reject-reason"
+                    className="h-8 w-48 rounded-lg bg-surface px-2.5 text-[12px] text-ink outline-none ring-1 ring-inset ring-line-strong transition-shadow focus:ring-2 focus:ring-accent-ring"
+                  />
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setRejecting(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    data-testid="reject-confirm"
+                    onClick={() => decide(selected.id, "reject", rejectReason)}
+                  >
+                    Reject
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    data-testid="reject-btn"
+                    onClick={() => setRejecting(true)}
+                  >
+                    Reject
+                  </Button>
+                  <Button
+                    variant="ok"
+                    size="sm"
+                    data-testid="approve-btn"
+                    onClick={() => decide(selected.id, "approve")}
+                  >
+                    Approve
+                  </Button>
+                </>
+              )}
             </div>
           ) : (
             // Run lives in the header at all times a row is selected: "Run
@@ -701,9 +763,16 @@ export const Dashboard = ({
                   <WorkflowGraph
                     workflow={graphToShow}
                     statuses={graphStatuses}
+                    // When >1 gate pends in parallel, each pending node gets inline
+                    // Approve/Reject (decide one, reject another) + a reason input on a
+                    // node staged reject. A single gate uses the header buttons, so the
+                    // graph stays read-only there.
                     decidableIds={gates.length >= 2 ? pendingIds : undefined}
                     decisions={gates.length >= 2 ? gateChoices : undefined}
+                    reasons={gates.length >= 2 ? gateReasons : undefined}
                     onDecide={gates.length >= 2 ? setGate : undefined}
+                    onReason={gates.length >= 2 ? setGateReason : undefined}
+                    // Pan to frame the waiting gate(s) the moment the run pauses.
                     focusIds={awaiting ? pendingIds : undefined}
                   />
                 </div>

components/workflow-graph.tsx

@@ -123,8 +123,12 @@ type NodeData = {
   decidable?: boolean;
   /** The decision staged on this gate (before the reviewer submits the wave). */
   choice?: "approve" | "reject";
+  /** The reject note staged on this gate (only when choice is "reject"). */
+  reason?: string;
   /** Record the reviewer's choice for this gate. */
   onDecide?: (choice: "approve" | "reject") => void;
+  /** Record the reviewer's reject note for this gate. */
+  onReason?: (reason: string) => void;
 };
 
 /** Ring/bg for a validation issue on a node (only used when there's no diff change). */
@@ -145,7 +149,9 @@ const StepNode = ({ data }: NodeProps<Node<NodeData>>) => {
     selected,
     decidable,
     choice,
+    reason,
     onDecide,
+    onReason,
   } = data;
   const st = statusTone(status);
   const cb = changeBadge(change);
@@ -287,6 +293,18 @@ const StepNode = ({ data }: NodeProps<Node<NodeData>>) => {
           </button>
         </div>
       )}
+
+      {/* Reject note — appears on a gate staged "reject" so the blocked bill carries
+          a why into the trace + audit. Optional. */}
+      {decidable && onReason && choice === "reject" && (
+        <input
+          value={reason ?? ""}
+          onChange={(e) => onReason(e.target.value)}
+          placeholder="Reason (optional)"
+          data-testid={`gate-reason-${step.id}`}
+          className="nodrag nopan mt-1.5 h-7 w-full rounded-lg bg-surface px-2 text-[12px] text-ink outline-none ring-1 ring-inset ring-danger-line transition-shadow focus:ring-2 focus:ring-accent-ring"
+        />
+      )}
       <Handle
         type="source"
         position={sourcePos}
@@ -424,7 +442,9 @@ const Inner = ({
   selectedId,
   decisions,
   decidableIds,
+  reasons,
   onDecide,
+  onReason,
   focusIds,
 }: WorkflowGraphProps) => {
   // Stack the DAG vertically below the `sm` breakpoint (640px), where a wide
@@ -577,20 +597,33 @@ const Inner = ({
         .sort()
         .join("|")
     : "";
+  const reasonKey = reasons
+    ? Object.entries(reasons)
+        .map(([k, v]) => `${k}:${v}`)
+        .sort()
+        .join("|")
+    : "";
   useEffect(() => {
     const decidable = new Set(decidableIds ?? []);
     setNodes((cur) =>
       cur.map((n) => {
         const isDecidable = decidable.has(n.id);
         const choice = decisions?.[n.id] ?? undefined;
+        const reason = reasons?.[n.id] ?? undefined;
         const handler =
           isDecidable && onDecide
             ? (c: "approve" | "reject") => onDecide(n.id, c)
             : undefined;
+        const reasonHandler =
+          isDecidable && onReason
+            ? (r: string) => onReason(n.id, r)
+            : undefined;
         if (
           n.data.decidable === isDecidable &&
           n.data.choice === choice &&
-          n.data.onDecide === handler
+          n.data.reason === reason &&
+          n.data.onDecide === handler &&
+          n.data.onReason === reasonHandler
         ) {
           return n;
         }
@@ -600,12 +633,24 @@ const Inner = ({
             ...n.data,
             decidable: isDecidable,
             choice: choice ?? undefined,
+            reason: reason ?? undefined,
             onDecide: handler,
+            onReason: reasonHandler,
           },
         };
       }),
     );
-  }, [decidableKey, choiceKey, decidableIds, decisions, onDecide, setNodes]);
+  }, [
+    decidableKey,
+    choiceKey,
+    reasonKey,
+    decidableIds,
+    decisions,
+    reasons,
+    onDecide,
+    onReason,
+    setNodes,
+  ]);
 
   // Smoothly frame the focused nodes (the pending group, or one on hover). Runs only
   // AFTER the initial per-graph layout+fit (the `laidOutFor === graphKey` guard) so it
@@ -658,8 +703,12 @@ type WorkflowGraphProps = {
   decisions?: Record<string, "approve" | "reject" | null>;
   /** When set, a node here accepts a decision now (a paused gate). */
   decidableIds?: string[];
+  /** Staged reject notes per step id (shown on a node staged "reject"). */
+  reasons?: Record<string, string>;
   /** Record a per-gate decision (the inline node controls). */
   onDecide?: (stepId: string, choice: "approve" | "reject") => void;
+  /** Record a per-gate reject note (the inline node reason input). */
+  onReason?: (stepId: string, reason: string) => void;
   /** Smoothly pan/zoom to frame these nodes (the pending group, or one on hover). */
   focusIds?: string[];
 };

e2e/approval.e2e.ts

@@ -15,7 +15,8 @@ import { test, expect, type Page } from "@playwright/test";
  *   INV-2042          — price mismatch (exception → pauses for approval)
  */
 
-const RUN_TIMEOUT = 30_000; // a 4-agent Haiku run is a few seconds; allow margin
+const RUN_TIMEOUT = 45_000; // a Haiku run is usually a few seconds, but the model can
+// occasionally take 30s+; give the pause/resume asserts headroom so latency isn't a flake
 
 const selectAndRun = async (page: Page, rowId: string) => {
   await page.getByTestId(`queue-row-${rowId}`).click();
@@ -104,13 +105,18 @@ test("price-mismatch pauses for approval, then APPROVE posts it", async ({
   await expect(page.getByText("Pipeline started")).toHaveCount(0);
 });
 
-test("price-mismatch REJECT leaves it un-posted", async ({ page }) => {
+test("price-mismatch REJECT (with a reason) leaves it un-posted", async ({
+  page,
+}) => {
   await selectAndRun(page, "INV-2042");
 
   await expect(page.getByTestId("approval-gate")).toBeVisible({
     timeout: RUN_TIMEOUT,
   });
+  // Reject arms a reason field; type a note, then confirm.
   await page.getByTestId("reject-btn").click();
+  await page.getByTestId("reject-reason").fill("price too high, renegotiate");
+  await page.getByTestId("reject-confirm").click();
 
   // Reconciliation ends in error (rejected), and nothing was posted.
   await expect(step(page, "reconciliation")).toHaveAttribute(
@@ -121,5 +127,8 @@ test("price-mismatch REJECT leaves it un-posted", async ({ page }) => {
     },
   );
   await expect(page.getByText(/NETSUITE-BILL-/)).toHaveCount(0);
-  await expect(page.getByText(/[Rr]eject/).first()).toBeVisible();
+  // The reason rides into the trace on the rejected gate's detail.
+  await expect(
+    page.getByText(/price too high, renegotiate/).first(),
+  ).toBeVisible();
 });

lib/api-types.ts

@@ -31,6 +31,10 @@ export const RunRequest = z.object({
   id: z.string().min(1, "an invoice id is required"),
   /** Reviewer decisions keyed by workflow step id. Omitted on the first run. */
   decisions: z.record(z.string(), StepDecision).optional(),
+  /** Optional note the reviewer attached when REJECTING a gate, keyed by step id.
+      Sparse (only rejects), so it rides alongside `decisions` rather than folding
+      into it. Surfaces in the rejected step's trace detail + the audit history. */
+  reasons: z.record(z.string(), z.string()).optional(),
   /** The approval workflow this run executes — the one the onboarding agent
       derived and the user edited, passed in (never persisted: the run stays
       stateless). Optional: when absent the run falls back to the default DAG, so a

lib/approval-engine.test.ts

@@ -146,6 +146,38 @@ test("manager rejection blocks the whole tree", () => {
   assert.equal(s.outcome, "rejected");
 });
 
+const detail = (s: ReturnType<typeof executeWorkflow>, id: string) =>
+  s.steps.find((x) => x.id === id)!.detail;
+
+test("a reject reason shows in the rejected step's detail", () => {
+  const s = executeWorkflow(
+    wf,
+    ctx({ amount: 9000 }),
+    { manager: "reject" },
+    { manager: "price too high, renegotiate" },
+  );
+  assert.match(
+    detail(s, "manager"),
+    /Rejected by .+: price too high, renegotiate/,
+  );
+});
+
+test("a reject WITHOUT a reason keeps the bare detail (no regression)", () => {
+  const s = executeWorkflow(wf, ctx({ amount: 9000 }), { manager: "reject" });
+  assert.match(detail(s, "manager"), /^Rejected by .+\.$/);
+});
+
+test("a reason for a non-rejected / absent step is ignored", () => {
+  // A reason keyed to an APPROVED gate doesn't leak into its detail.
+  const s = executeWorkflow(
+    wf,
+    ctx({ amount: 9000 }),
+    { manager: "approve" },
+    { manager: "should be ignored", ghost: "nobody" },
+  );
+  assert.match(detail(s, "manager"), /^Approved by /);
+});
+
 test("director gates exactly at the threshold (strict >)", () => {
   const at = executeWorkflow(wf, ctx({ amount: 5000 }), { manager: "approve" });
   assert.equal(status(at, "director"), "skipped"); // 5000 is not > 5000