fix(dashboard): two-phase JS-driven firing animation + always-pass enabledTransitions in replay

JS-driven RAF replaces the previous CSS keyframe per-edge fire. Edges
animate as a two-phase progress bar: input arcs fill source → transition
first, output arcs fill transition → destination second. At the half-
duration boundary the post-fire derived marking + enabled-transition
set are applied so the operator never sees post-fire tokens land
before the input arc visually drains. Same refactor closes the
"turn_red_* highlighted at every replay version" bug.

NetDiagram:
- Props refactored: drop firingEdgeIds + firingDurationMs +
  enabledEdgeIds. Add firingTransition?: string | null,
  firingProgress?: { input: number, output: number },
  enabledTransitions?: ReadonlySet<string>. Export FiringProgress.
- buildGraph derives transition-node isEnabled via
  isTransitionEnabled(name) helper — the replay-supplied
  enabledTransitions override drives BOTH the input-arc accent AND
  the transition-node glow. Previously the per-edge override left
  the node still glowing from live enabled_count, surfacing the
  "turn_red looks enabled at v0" bug.
- OrthogonalEdgeImpl renders a raw <path pathLength={1}> with inline
  strokeDasharray=1 + strokeDashoffset=1-progress when firing.

EnactmentDetailPage:
- firingEdgeIds state + setTimeout replaced with firingPhase
  ({transition, startedAt, halfMs, fullMs}) + firingProgress + RAF
  loop. RAF applies stashed derivedMarkings + replayEnabledTransitions
  at halfMs boundary.
- onScrub onReply stashes reply data into refs + triggers
  startFiringPhase only when single-step advance + occurrence at
  target + visible-arc match; otherwise applies immediately.
- Version-bump effect skipped in replay mode (now driven by onReply);
  kept for live-mode operator-completion firing.
- enabledTransitions={replayState === null ? undefined :
  replayEnabledTransitions} — concrete set in replay, never
  undefined. NetDiagram never falls back to live counts during
  replay.

CSS:
- @Keyframes cf-edge-fill + .cf-edge-firing rule removed.

Tests:
- NetDiagram: 3 new firingProgress wire-up tests (input/output split
  + clamping), 2 enabledTransitions override tests (wins over live
  count for arc + node glow).
- EnactmentDetailPage: mock NetDiagram exposes firing-transition /
  firing-input / firing-output / enabled-transitions data attrs.
  Two new RAF-driven tests (live progress curve hits 0.5 → 0.5 →
  cleared; replay step keeps enabledTransitions=[] until elapsed >
  halfMs, then swaps).
- enactment_detail_store_test: TrafficLightFlow v=0 returns
  ["turn_green_ew"] only — refutes turn_red_* / turn_yellow_*.

mix precommit 177/177, dialyzer 0; pnpm typecheck + 172/172 vitest +
build clean; lib/coloured_flow byte-identical.

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

Author: fahchen

dashboard/test/coloured_flow_dashboard_web/stores/enactment_detail_store_test.exs

@@ -1102,6 +1102,50 @@ defmodule ColouredFlowDashboardWeb.Stores.EnactmentDetailStoreTest do
     end
   end
 
+  describe ":replay_to_version against TrafficLightFlow (initial-marking regression)" do
+    # Regression cover for the bug where `turn_red_ew` / `turn_red_ns`
+    # appeared as enabled on the diagram for every replay version. The
+    # backend's engine output for v=0 must list ONLY transitions whose input
+    # arcs are satisfied by the initial marking — anything else was the
+    # diagram conflating live `enabled_count` with replay-derived state.
+    require ColouredFlow.Runner.Storage.InMemory, as: TLInMemory
+    alias ColouredFlowDashboard.Seeds.TrafficLightFlow
+
+    test "v=0 returns only `turn_green_ew` (the only initially firable transition)",
+         %{topic_prefix: topic_prefix} do
+      flow = TLInMemory.insert_flow!(TrafficLightFlow.cpnet())
+      flow_id = TLInMemory.flow(flow, :id)
+      {:ok, enactment} = TrafficLightFlow.insert_enactment(flow_id)
+      enactment_id = TLInMemory.enactment(enactment, :id)
+      {:ok, _pid} = TrafficLightFlow.start_enactment(enactment_id, lifecycle_hooks: nil)
+
+      flow_cache =
+        unique_cache_atom(
+          "enactment_detail_store_test_tl_cache_#{System.unique_integer([:positive])}"
+        )
+
+      :ets.new(flow_cache, [:set, :public, :named_table])
+      :ets.insert(flow_cache, {enactment_id, "tl-flow", TrafficLightFlow.cpnet()})
+
+      page = mount_store(enactment_id, topic_prefix, flow_cache)
+
+      assert {:ok, %{code: :ok} = reply} =
+               Musubi.Testing.dispatch_command(page, :replay_to_version, %{version: 0})
+
+      enabled = Enum.sort(reply.enabled_transitions)
+      # Initial marking = red_ew + red_ns + safe_ew. `turn_green_ew` needs
+      # `red_ew + safe_ew` → enabled. `turn_green_ns` needs `red_ns + safe_ns`
+      # but safe_ns has no initial token → NOT enabled. Every `turn_red_*` /
+      # `turn_yellow_*` needs `yellow_*` / `green_*` which are empty at v=0
+      # → NOT enabled.
+      assert enabled == ["turn_green_ew"]
+      refute "turn_red_ew" in enabled
+      refute "turn_red_ns" in enabled
+      refute "turn_yellow_ew" in enabled
+      refute "turn_yellow_ns" in enabled
+    end
+  end
+
   describe "live marking refresh on firing events" do
     require ColouredFlow.Runner.Storage.InMemory, as: InMemory
     alias ColouredFlow.Runner.Enactment.WorkitemTransition

dashboard/ui/src/components/NetDiagram.test.tsx

@@ -143,28 +143,51 @@ describe("NetDiagram", () => {
     expect(onSelectTransition).not.toHaveBeenCalled()
   })
 
-  it("tags edges in firingEdgeIds with `cf-edge-firing` and the duration var", () => {
+  it("tags input arcs of firingTransition with firingProgress.input and output arcs with .output", () => {
     const diagram = baseDiagram()
     const inputId = "arc-p_to_t-pending-approve-0"
     const outputId = "arc-t_to_p-decided-approve-1"
-    const firing = new Set<string>([inputId, outputId])
-    const { edges } = buildGraph(diagram, "running", firing, 1200)
+    const { edges } = buildGraph(diagram, "running", "approve", { input: 0.3, output: 0.7 })
 
     const input = edges.find((e) => e.id === inputId)
     const output = edges.find((e) => e.id === outputId)
-    expect(input?.className).toBe("cf-edge-firing")
-    expect(output?.className).toBe("cf-edge-firing")
-    expect((input?.style as Record<string, unknown>)["--cf-edge-duration"]).toBe("1200ms")
-    expect((output?.style as Record<string, unknown>)["--cf-edge-duration"]).toBe("1200ms")
+    expect((input?.data as Record<string, unknown>).firingProgress).toBe(0.3)
+    expect((output?.data as Record<string, unknown>).firingProgress).toBe(0.7)
+    // No className for firing in the new design — the inline `pathLength="1"`
+    // + dasharray combo replaces the CSS keyframe.
+    expect(input?.className).toBeUndefined()
+    expect(output?.className).toBeUndefined()
+  })
+
+  it("omits firingProgress on edges not touching the firingTransition", () => {
+    const diagram = baseDiagram()
+    diagram.transitions = [
+      ...diagram.transitions,
+      {
+        name: "reject",
+        enabled_count: 0,
+        rejected_by_guard_count: 0,
+        rejected_by_arc_eval_count: 0,
+        rejected_by_marking_count: 0,
+        last_fired_at: null
+      }
+    ]
+    diagram.arcs = [
+      ...diagram.arcs,
+      { place: "pending", transition: "reject", orientation: "p_to_t" }
+    ]
+    const { edges } = buildGraph(diagram, "running", "approve", { input: 0.5, output: 0 })
+    const rejectEdge = edges.find((e) => e.id === "arc-p_to_t-pending-reject-2")
+    expect((rejectEdge?.data as Record<string, unknown> | undefined)?.firingProgress).toBeUndefined()
   })
 
-  it("leaves non-firing edges with no `cf-edge-firing` class", () => {
+  it("clamps firingProgress to [0,1]", () => {
     const diagram = baseDiagram()
-    const firing = new Set<string>(["arc-p_to_t-pending-approve-0"])
-    const { edges } = buildGraph(diagram, "running", firing, 600)
-    const other = edges.find((e) => e.id === "arc-t_to_p-decided-approve-1")
-    expect(other?.className).toBeUndefined()
-    expect((other?.style as Record<string, unknown>)["--cf-edge-duration"]).toBeUndefined()
+    const { edges } = buildGraph(diagram, "running", "approve", { input: -0.5, output: 1.5 })
+    const input = edges.find((e) => e.id === "arc-p_to_t-pending-approve-0")
+    const output = edges.find((e) => e.id === "arc-t_to_p-decided-approve-1")
+    expect((input?.data as Record<string, unknown>).firingProgress).toBe(0)
+    expect((output?.data as Record<string, unknown>).firingProgress).toBe(1)
   })
 
   it("tags p_to_t arcs of enabled transitions with cf-edge-enabled + accent style", () => {
@@ -197,13 +220,44 @@ describe("NetDiagram", () => {
     )
   })
 
-  it("firing edge wins over enabled — firing class applied, enabled skipped", () => {
+  it("enabledTransitions override wins over live enabled_count for arc accent + transition glow", () => {
     const diagram = baseDiagram()
-    diagram.transitions[0].enabled_count = 1
-    const firing = new Set<string>(["arc-p_to_t-pending-approve-0"])
-    const { edges } = buildGraph(diagram, "running", firing, 600)
+    // Live counts disagree with replay-derived set: live says enabled, override says not.
+    diagram.transitions[0].enabled_count = 5
+    const override: ReadonlySet<string> = new Set()
+    const { edges, nodes } = buildGraph(
+      diagram,
+      "running",
+      null,
+      { input: 0, output: 0 },
+      undefined,
+      override
+    )
     const input = edges.find((e) => e.id === "arc-p_to_t-pending-approve-0")
-    expect(input?.className).toBe("cf-edge-firing")
+    expect(input?.className).toBeUndefined()
+    expect((input?.style as Record<string, unknown>).stroke).toBe(
+      "var(--color-cf-border-strong)"
+    )
+    const approveNode = nodes.find((n) => n.id === "t:approve")
+    expect((approveNode?.data as Record<string, unknown>).isEnabled).toBe(false)
+  })
+
+  it("enabledTransitions override drives transition glow when the live count says zero", () => {
+    const diagram = baseDiagram()
+    diagram.transitions[0].enabled_count = 0
+    const override: ReadonlySet<string> = new Set(["approve"])
+    const { edges, nodes } = buildGraph(
+      diagram,
+      "running",
+      null,
+      { input: 0, output: 0 },
+      undefined,
+      override
+    )
+    const input = edges.find((e) => e.id === "arc-p_to_t-pending-approve-0")
+    expect(input?.className).toBe("cf-edge-enabled")
+    const approveNode = nodes.find((n) => n.id === "t:approve")
+    expect((approveNode?.data as Record<string, unknown>).isEnabled).toBe(true)
   })
 
   it("pulses the transition node when last_fired_at changes", async () => {