Redesign the pipeline pane: graph as hero, trace in a drawer

The right pane was doing too much and had a real bug: the trace timeline
rendered a SECOND workflow graph (trace-detail) inside a skinny column, which
overflowed and bled under the neighbouring card. The two-column layout (graph
+ trace) cramped both.

Now the workflow graph IS the pane, full-width, no header:
- Kill the duplicate graph in the trace; that step is a compact text summary.
- Graph is the hero (the active workflow, or the default DAG when none), drawn
  even at idle so you see what an invoice routes through. Run pipeline is a
  centered button over the canvas; the PDF-read reveal only plays during the
  scan, not at idle (this also kills the "looks like a re-scan" flash on replay).
- The step-by-step trace moved into a slide-over drawer ("View trace"), at real
  width, closeable. No more cramped column.
- Human-in-the-loop moved ONTO the graph: Approve/Reject inline on the gate
  nodes (single and multi unified) with a floating Submit bar to resume. No
  header to hold them. fitView pans to the awaiting gate on pause (verified).
- Skipped gates render dimmed (kept for audit, faded so the live path reads).
- Hovering an exception/blocked queue row reveals WHY (the scenario text).
- Fix a duplicate run-btn testid (dashboard + trace-timeline) that made the
  Run click unreliable.

e2e updated for the relocated controls: open the trace drawer for step asserts,
decide on the gate node + submit, and scope graph-node lookups to the visible
tab (both tabs stay mounted and share the workflow). Verified live: the clean /
approve / reject flows and the read-only pipeline graph pass; full-suite reruns
are gated by the per-IP rate limit (e2e is local-only by design).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: DylanMerigaud

components/dashboard.tsx

@@ -1,5 +1,4 @@
 import { Badge } from "@/components/ui/badge";
-import { WorkflowGraph } from "@/components/workflow-graph";
 import type { ApprovalWorkflow } from "@/lib/approval-workflow";
 import { formatMoney, formatPct, humanize } from "@/lib/format";
 import type { MatchResult, ReconResult, Investigation } from "@/lib/schema";
@@ -57,14 +56,35 @@ type WorkflowRunData = {
   outcome: string;
 };
 
+/** A per-step status dot colour for the workflow run summary (matches the queue dots). */
+const stepDot = (status: string): string => {
+  if (status === "approved" || status === "done" || status === "posted")
+    return "#047857";
+  if (status === "rejected" || status === "blocked") return "#B91C1C";
+  if (status === "pending" || status === "awaiting") return "#B45309";
+  return "#D1D5DB"; // skipped / neutral
+};
+
+// The graph itself is the hero on the pane, so the trace just SUMMARISES the run as
+// a compact per-step list (status + the engine's detail line). No second graph here,
+// that nested canvas overflowed its column.
 const WorkflowRunDetail = ({ data }: { data: WorkflowRunData }) => {
-  const statuses: Record<string, string> = {};
-  for (const s of data.steps) statuses[s.id] = s.status;
   return (
-    // React Flow needs a definite height; the trace node gives it a fixed canvas.
-    <div className="h-64 w-full overflow-hidden rounded-xl bg-subtle/30 ring-1 ring-inset ring-line">
-      <WorkflowGraph workflow={data.workflow} statuses={statuses} />
-    </div>
+    <ul className="space-y-1.5 rounded-xl bg-subtle/30 px-3 py-2.5 ring-1 ring-inset ring-line">
+      {data.steps.map((s) => (
+        <li key={s.id} className="flex gap-2 text-[12px] leading-snug">
+          <span
+            aria-hidden
+            className="mt-1 h-2 w-2 shrink-0 rounded-full"
+            style={{ backgroundColor: stepDot(s.status) }}
+          />
+          <span className="min-w-0">
+            <span className="font-medium text-ink">{humanize(s.status)}</span>
+            <span className="text-muted"> {s.detail}</span>
+          </span>
+        </li>
+      ))}
+    </ul>
   );
 };
 

components/trace-detail.tsx

@@ -82,7 +82,7 @@ export const TraceTimeline = ({
         }
         action={
           canRun ? (
-            <Button data-testid="run-btn" onClick={onRun} className="mt-5">
+            <Button onClick={onRun} className="mt-5">
               Run pipeline
             </Button>
           ) : null

components/trace-timeline.tsx

@@ -184,11 +184,19 @@ const StepNode = ({ data }: NodeProps<Node<NodeData>>) => {
   const selectedRing = selected
     ? "ring-2 ring-accent ring-offset-2 ring-offset-subtle shadow-lift"
     : `ring-1 ring-inset ${ring}`;
+  // A skipped gate didn't fire on this run, fade it so the realized path reads first
+  // (kept in the graph, not hidden, so the audit shows every gate was considered).
+  const dim =
+    change === "removed"
+      ? "opacity-60"
+      : status === "skipped"
+        ? "opacity-45"
+        : "";
 
   return (
     <div
       data-testid={`graph-node-${step.id}`}
-      className={`w-[244px] rounded-xl bg-surface px-3.5 py-3 shadow-card ${selectedRing} ${change === "removed" ? "opacity-60" : ""}`}
+      className={`w-[244px] rounded-xl bg-surface px-3.5 py-3 shadow-card ${selectedRing} ${dim}`}
     >
       <Handle
         type="target"

components/workflow-graph.tsx

@@ -23,11 +23,39 @@ const selectAndRun = async (page: Page, rowId: string) => {
   await page.getByTestId("run-btn").click();
 };
 
-/** A trace step node for a stage, with its status exposed via data-status. */
+/** The graph is the hero; the step-by-step trace lives in a drawer over it. Open it
+    so the trace-step assertions can see the nodes. */
+const openTrace = async (page: Page) => {
+  await page.getByTestId("view-trace").click({ timeout: RUN_TIMEOUT });
+};
+
+/** A trace step node for a stage (inside the drawer), status via data-status. */
 const step = (page: Page, stage: string) => {
   return page.locator(`[data-testid="trace-step-${stage}"]`);
 };
 
+/** Decide a paused gate on its node, then submit. The decision is ON the canvas, so
+    close the trace drawer first if it's open (the gate is behind it). */
+const decideGate = async (
+  page: Page,
+  stepId: string,
+  choice: "approve" | "reject",
+  reason?: string,
+) => {
+  const close = page.getByTestId("trace-close");
+  if (await close.isVisible().catch(() => false)) await close.click();
+  await page.getByTestId(`gate-${choice}-${stepId}`).click();
+  if (choice === "reject" && reason) {
+    // The reason input only appears once the gate is staged "reject".
+    const field = page.getByTestId(`gate-reason-${stepId}`);
+    await field.waitFor();
+    await field.fill(reason);
+  }
+  const submit = page.getByTestId("submit-decisions");
+  await expect(submit).toBeEnabled();
+  await submit.click();
+};
+
 test.beforeEach(async ({ page }) => {
   await page.goto("/");
   // The app opens on the "Build the workflow" tab; the pipeline lives behind the
@@ -42,15 +70,19 @@ test("clean invoice runs straight through, no approval gate", async ({
 }) => {
   await selectAndRun(page, "INV-2040");
 
-  // Reconciliation resolves to ok (posted), and the approval gate never appears.
+  // A clean invoice trips no gate, so the decision bar never appears.
+  await expect(page.getByTestId("approval-gate")).toHaveCount(0, {
+    timeout: RUN_TIMEOUT,
+  });
+  // Open the trace: reconciliation resolves to ok (posted).
+  await openTrace(page);
   await expect(step(page, "reconciliation")).toHaveAttribute(
     "data-status",
     "ok",
     {
       timeout: RUN_TIMEOUT,
     },
   );
-  await expect(page.getByTestId("approval-gate")).toHaveCount(0);
   await expect(page.getByText("Pipeline complete")).toBeVisible();
 });
 
@@ -59,49 +91,41 @@ test("price-mismatch pauses for approval, then APPROVE posts it", async ({
 }) => {
   await selectAndRun(page, "INV-2042");
 
-  // 1. Matching catches the variance (amber).
-  await expect(step(page, "matching")).toHaveAttribute("data-status", "warn", {
+  // 1. The run PAUSES on the manager gate: the decision bar appears on the canvas.
+  await expect(page.getByTestId("approval-gate")).toBeVisible({
     timeout: RUN_TIMEOUT,
   });
 
-  // 2. The run PAUSES: reconciliation is "waiting", the gate + banner appear.
+  // 2. Open the trace: matching caught the variance (amber), reconciliation waits,
+  //    and nothing posted yet.
+  await openTrace(page);
+  await expect(step(page, "matching")).toHaveAttribute("data-status", "warn");
   await expect(step(page, "reconciliation")).toHaveAttribute(
     "data-status",
     "waiting",
-    {
-      timeout: RUN_TIMEOUT,
-    },
   );
-  await expect(page.getByTestId("approval-gate")).toBeVisible();
   await expect(page.getByText(/Paused/)).toBeVisible();
-  // It has NOT posted yet, no ERP reference on the trace.
   await expect(page.getByText(/NETSUITE-BILL-/)).toHaveCount(0);
 
-  // 3. Approve → reconciliation transitions to posted, gate disappears.
-  await page.getByTestId("approve-btn").click();
+  // 3. Approve the gate on its node + submit → reconciliation posts, bar disappears.
+  await decideGate(page, "manager-review", "approve");
+  await expect(page.getByTestId("approval-gate")).toHaveCount(0, {
+    timeout: RUN_TIMEOUT,
+  });
+  await openTrace(page);
   await expect(step(page, "reconciliation")).toHaveAttribute(
     "data-status",
     "ok",
-    {
-      timeout: RUN_TIMEOUT,
-    },
+    { timeout: RUN_TIMEOUT },
   );
-  // The ERP ref shows up (both in the narration and the detail row), assert at
-  // least one match rather than a single visible node.
   await expect(page.getByText(/NETSUITE-BILL-/).first()).toBeVisible();
-  await expect(page.getByTestId("approval-gate")).toHaveCount(0);
 
-  // 4. No duplicated stage nodes after the resume (this is the audit-bug guard,
-  //    a phase-2 resume must upsert the stages in place, not stack a second set).
-  //    Exactly one node per stage. (Once past intake the extraction collapses to a
-  //    single "Intake" node at the top of the trace, assert it's present once.)
+  // 4. No duplicated stage nodes after the resume (the audit-bug guard: a phase-2
+  //    resume must upsert the stages in place, not stack a second set).
   await expect(page.getByTestId("intake-collapsed")).toHaveCount(1);
   await expect(step(page, "matching")).toHaveCount(1);
   await expect(step(page, "approval")).toHaveCount(1);
   await expect(step(page, "reconciliation")).toHaveCount(1);
-  // No stray "Pipeline started" duplicated by the resume. (Run markers are pruned
-  // at the pause and the resume adds none, so the count is 0 here, the bug we're
-  // guarding against would make it ≥ 1 from a re-emitted phase-2 marker.)
   await expect(page.getByText("Pipeline started")).toHaveCount(0);
 });
 
@@ -113,12 +137,16 @@ test("price-mismatch REJECT (with a reason) leaves it un-posted", async ({
   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();
+  // Reject the gate on its node with a reason, then submit.
+  await decideGate(
+    page,
+    "manager-review",
+    "reject",
+    "price too high, renegotiate",
+  );
 
   // Reconciliation ends in error (rejected), and nothing was posted.
+  await openTrace(page);
   await expect(step(page, "reconciliation")).toHaveAttribute(
     "data-status",
     "error",

e2e/approval.e2e.ts

@@ -17,7 +17,10 @@ test("edit a gate's trigger: add a condition and a nested group", async ({
   await page.goto("/");
   await page.getByRole("button", { name: /Discover from BambooHR/ }).click();
   // Discovery done once the derived workflow has rendered its gates.
-  await expect(page.getByTestId("graph-node-manager-review")).toBeVisible({
+  // Both tabs stay mounted and share the workflow, so scope to the VISIBLE graph.
+  await expect(
+    page.getByTestId("graph-node-manager-review").locator("visible=true"),
+  ).toBeVisible({
     timeout: DISCOVERY_TIMEOUT,
   });
 

e2e/condition-editor.e2e.ts

@@ -22,7 +22,10 @@ test("an ambiguous department edit asks which one, then applies the pick", async
   await page.getByRole("button", { name: /Discover from BambooHR/ }).click();
 
   // Discovery done once the derived workflow has rendered its gates.
-  await expect(page.getByTestId("graph-node-manager-review")).toBeVisible({
+  // Both tabs stay mounted and share the workflow, so scope to the VISIBLE graph.
+  await expect(
+    page.getByTestId("graph-node-manager-review").locator("visible=true"),
+  ).toBeVisible({
     timeout: DISCOVERY_TIMEOUT,
   });
 

e2e/edit-clarify.e2e.ts

@@ -18,7 +18,10 @@ test("the editor builds a vendor-scoped gate from a plain instruction", async ({
   await page.goto("/");
   await page.getByRole("button", { name: /Discover from BambooHR/ }).click();
   // Discovery done once the derived workflow has rendered its gates.
-  await expect(page.getByTestId("graph-node-manager-review")).toBeVisible({
+  // Both tabs stay mounted and share the workflow, so scope to the VISIBLE graph.
+  await expect(
+    page.getByTestId("graph-node-manager-review").locator("visible=true"),
+  ).toBeVisible({
     timeout: DISCOVERY_TIMEOUT,
   });
 

e2e/edit-levers.e2e.ts

@@ -18,20 +18,32 @@ const DISCOVERY_TIMEOUT = 90_000;
 const RUN_TIMEOUT = 30_000;
 
 const node = (page: Page, id: string) =>
-  page.getByTestId("live-graph").getByTestId(`graph-node-${id}`);
+  page.getByTestId("graph-pane").getByTestId(`graph-node-${id}`);
 
 const step = (page: Page, stage: string) =>
   page.locator(`[data-testid="trace-step-${stage}"]`);
 
+/** The trace lives in a drawer over the graph; open it for trace-step asserts. */
+const openTrace = (page: Page) =>
+  page.getByTestId("view-trace").click({ timeout: RUN_TIMEOUT });
+/** Close the drawer (the gate decision is on the canvas behind it). */
+const closeTrace = async (page: Page) => {
+  const close = page.getByTestId("trace-close");
+  if (await close.isVisible().catch(() => false)) await close.click();
+};
+
 test("two parallel gates: reject one, approve the other → bill blocked", async ({
   page,
 }) => {
   await page.goto("/");
 
   // 1. Derive the workflow from the org (parallel roots: manager + department).
   await page.getByRole("button", { name: /Discover from BambooHR/ }).click();
-  // Discovery done once the derived workflow has rendered its gates.
-  await expect(page.getByTestId("graph-node-manager-review")).toBeVisible({
+  // Discovery done once the derived workflow has rendered its gates (scope to the
+  // VISIBLE onboarding graph; both tabs stay mounted and share the workflow).
+  await expect(
+    page.getByTestId("graph-node-manager-review").locator("visible=true"),
+  ).toBeVisible({
     timeout: DISCOVERY_TIMEOUT,
   });
 
@@ -41,18 +53,21 @@ test("two parallel gates: reject one, approve the other → bill blocked", async
   await page.getByTestId("run-btn").click();
 
   // 3. The run pauses with BOTH gates pending, each showing inline controls.
+  await expect(page.getByTestId("approval-gate-multi")).toBeVisible({
+    timeout: RUN_TIMEOUT,
+  });
+  await expect(node(page, "manager-review")).toBeVisible();
+  await expect(node(page, "department-review")).toBeVisible();
+  // The trace shows reconciliation waiting; nothing posted yet.
+  await openTrace(page);
   await expect(step(page, "reconciliation")).toHaveAttribute(
     "data-status",
     "waiting",
-    { timeout: RUN_TIMEOUT },
   );
-  await expect(page.getByTestId("approval-gate-multi")).toBeVisible();
-  await expect(node(page, "manager-review")).toBeVisible();
-  await expect(node(page, "department-review")).toBeVisible();
-  // Nothing posted yet.
   await expect(page.getByText(/NETSUITE-BILL-/)).toHaveCount(0);
+  await closeTrace(page);
 
-  // 4. Decide each gate independently: reject manager, approve department.
+  // 4. Decide each gate independently on its node: reject manager, approve department.
   await node(page, "manager-review")
     .getByTestId("gate-reject-manager-review")
     .click();
@@ -62,6 +77,7 @@ test("two parallel gates: reject one, approve the other → bill blocked", async
 
   // 5. Submit the wave → the bill is BLOCKED (reject wins), nothing posts.
   await page.getByTestId("submit-decisions").click();
+  await openTrace(page);
   await expect(step(page, "reconciliation")).toHaveAttribute(
     "data-status",
     "error",

e2e/multi-gate-approval.e2e.ts

@@ -10,15 +10,18 @@ import { test, expect, type Page } from "@playwright/test";
 
 const DISCOVERY_TIMEOUT = 90_000;
 
-const node = (page: Page, id: string) => page.getByTestId(`graph-node-${id}`);
+// Both tabs stay mounted and share the derived workflow, so a node id exists in the
+// (hidden) pipeline graph too. Scope to the VISIBLE one (the onboarding editor here).
+const node = (page: Page, id: string) =>
+  page.getByTestId(`graph-node-${id}`).locator("visible=true");
 
 test("clicking a gate opens the panel and the approver picker resolves it", async ({
   page,
 }) => {
   await page.goto("/");
   await page.getByRole("button", { name: /Discover from BambooHR/ }).click();
   // Discovery done once the derived workflow has rendered its gates.
-  await expect(page.getByTestId("graph-node-manager-review")).toBeVisible({
+  await expect(node(page, "manager-review")).toBeVisible({
     timeout: DISCOVERY_TIMEOUT,
   });
 
@@ -45,13 +48,12 @@ test("the pipeline graph is read-only, clicking a node does nothing", async ({
   await page.getByRole("button", { name: /Run it on invoices/ }).click();
   await page.getByTestId("queue-row-INV-2042").click();
   await page.getByTestId("run-btn").click();
-  // Scope to the live routing graph (the trace timeline draws the same nodes lower
-  // down, so the bare testid isn't unique on this screen).
+  // The pipeline graph (the hero pane) is read-only: clicking a node does NOT open
+  // the editor (that's an onboarding-only affordance).
   const liveNode = page
-    .getByTestId("live-graph")
+    .getByTestId("graph-pane")
     .getByTestId("graph-node-manager-review");
   await expect(liveNode).toBeVisible({ timeout: 45_000 });
   await liveNode.click();
-  // No edit panel appears in the pipeline (the condition editor's heading is absent).
   await expect(page.getByText(/Triggers when/)).toHaveCount(0);
 });