Animate the live path edges as an invoice routes the graph

The live workflow graph lit up nodes by status but the edges stayed inert — the "loop
made visible" didn't actually show the bill moving. Now an edge animates (marching ants)
and goes accent when the invoice flowed along it: the source step passed (approved/done)
and the target was reached (a live status, not a dead skip/block). The skipped branches
stay neutral gray, so the eye follows the realized path down to the gate it's waiting on
or the ERP post.

Kept the structural `edges` status-free and patch the flow styling in a separate cheap
effect keyed on a status signature — so a status tick never resets/re-measures/re-lays-out
the graph (that path only fires on a real structural change). Inert everywhere there's no
run (onboarding, diff preview): no statuses → no live edges, exactly as before.

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

Author: DylanMerigaud

components/workflow-graph.tsx

@@ -45,6 +45,10 @@ import type { WorkflowIssue } from "@/lib/workflow-validate";
 
 export type StepStatuses = Record<string, string>;
 
+/** Target statuses that mean "the invoice reached this node" — so the edge into it is
+    on the realized path (skipped/blocked are dead branches, not part of the flow). */
+const REACHED = new Set(["pending", "approved", "done", "rejected"]);
+
 /* ── node visuals ──────────────────────────────────────────────────────────── */
 
 const statusTone = (
@@ -507,6 +511,8 @@ const Inner = ({
     return [...real, ...gone];
   }, [workflow, statuses, changeOf, removed, issueOf, vertical]);
 
+  // Structural edges only (no status) so the layout/reset path never re-fires on a
+  // status change — the live "flow" styling is patched separately below.
   const edges = useMemo<Edge[]>(() => {
     const out: Edge[] = [];
     for (const s of workflow.steps)
@@ -663,6 +669,44 @@ const Inner = ({
     void fitView({ nodes: ids, duration: 400, padding: 0.3 });
   }, [focusKey, initialized, graphKey, fitView]);
 
+  // Patch edge "flow" styling from the live statuses — cheap, no relayout (kept out of
+  // the structural `edges` so a status tick never resets/re-measures the graph). An edge
+  // animates + goes accent when the invoice flowed along it: source passed
+  // (approved/done) and target was reached. Keyed on a status signature so it only runs
+  // when statuses change.
+  const statusKey = statuses
+    ? Object.entries(statuses)
+        .map(([k, v]) => `${k}:${v}`)
+        .sort()
+        .join("|")
+    : "";
+  useEffect(() => {
+    const st = statuses ?? {};
+    setEdges((cur) =>
+      cur.map((e) => {
+        const src = st[e.source];
+        const live =
+          (src === "approved" || src === "done") &&
+          REACHED.has(st[e.target] ?? "");
+        const stroke = live ? "#5B53D6" : "#CBCDD4";
+        const strokeWidth = live ? 2 : 1.5;
+        const prev = e.style ?? {};
+        if (
+          e.animated === live &&
+          prev.stroke === stroke &&
+          prev.strokeWidth === strokeWidth
+        ) {
+          return e;
+        }
+        return {
+          ...e,
+          animated: live,
+          style: { ...prev, stroke, strokeWidth },
+        };
+      }),
+    );
+  }, [statusKey, statuses, setEdges]);
+
   return (
     <ReactFlow
       nodes={nodes}