fix(dashboard): firing edge keeps enabled style + overlay fades smoothly

Two related polishes:

1. Edge retains its enabled style during firing
   buildEdges short-circuited to DEFAULT_EDGE_STYLE whenever
   isFiring=true, discarding the cf-accent-tint enabled-input
   styling. User saw enabled arcs lose their accent the moment
   firing started. Removed the firing branch from the
   style/marker/className decision; isEnabledInput drives the base
   styling regardless of firing state.

2. Overlay fades in/out instead of snapping
   OrthogonalEdgeImpl's overlay path previously only rendered while
   firing (mount on firing start, unmount on end), which snapped the
   accent color in and out. Overlay is now always mounted with
   opacity transitioned via CSS:
   - opacity: 0 when not firing.
   - opacity: 1 when firing. transition: opacity 200ms ease-out.
   - strokeDashoffset still drives the progress-bar fill while
     opacity handles the smooth color emergence.
   - Added cf-edge-overlay class + data-firing attribute for
     selector clarity. pointerEvents: none so the overlay never
     intercepts clicks.

Test updated: enabled-input arc retains cf-edge-enabled className
during firing.

172/172 vitest + 177/177 mix + dialyzer 0; lib/coloured_flow
byte-identical.

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

Author: fahchen

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

@@ -153,9 +153,9 @@ describe("NetDiagram", () => {
     const output = edges.find((e) => e.id === outputId)
     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()
+    // Firing does not strip the enabled-input className; base stays
+    // accent-tint while the overlay paints cf-accent on top.
+    expect(input?.className).toBe("cf-edge-enabled")
     expect(output?.className).toBeUndefined()
   })
 

dashboard/ui/src/components/NetDiagram.tsx

@@ -475,17 +475,14 @@ function buildEdges(
         : clamp01(firingProgress.output)
       : undefined
 
-    const isFiring = edgeFiringProgress !== undefined
     const isEnabledInput =
-      !isFiring && arc.orientation === "p_to_t" && isTransitionEnabled(arc.transition)
+      arc.orientation === "p_to_t" && isTransitionEnabled(arc.transition)
 
     let style: CSSProperties
     let markerEnd = DEFAULT_MARKER
     let className: string | undefined
 
-    if (isFiring) {
-      style = DEFAULT_EDGE_STYLE
-    } else if (isEnabledInput) {
+    if (isEnabledInput) {
       style = ENABLED_EDGE_STYLE
       markerEnd = ENABLED_MARKER
       className = "cf-edge-enabled"
@@ -588,30 +585,32 @@ function OrthogonalEdgeImpl({ data, markerEnd, style }: EdgeProps) {
   if (!points || points.length < 2) return null
   const path = roundedPolylinePath(points, EDGE_CORNER_RADIUS)
   const progress = oedata?.firingProgress
+  const isFiring = progress !== undefined
 
-  if (progress === undefined) {
-    return <BaseEdge path={path} markerEnd={markerEnd} style={style} />
-  }
-
-  // Base path keeps the edge's pre-firing color visible throughout the
-  // animation; overlay path paints `cf-accent` on top, growing from 0..1 via
-  // `pathLength="1"` + `strokeDasharray=1` + `strokeDashoffset=1-progress`.
+  // Overlay path renders unconditionally so the opacity transition can blend
+  // the cf-accent fill in and out smoothly instead of snapping on the firing
+  // boundary. dashoffset drives the fill direction; opacity drives the colour
+  // emergence. When not firing, opacity=0 hides it entirely (no hit testing,
+  // no visual cost beyond the offscreen path).
   const overlayStyle: CSSProperties = {
     ...style,
     stroke: "var(--color-cf-accent)",
     strokeDasharray: 1,
-    strokeDashoffset: 1 - progress,
+    strokeDashoffset: isFiring ? 1 - progress : 1,
+    opacity: isFiring ? 1 : 0,
+    transition: "opacity 200ms ease-out",
     pointerEvents: "none"
   }
   return (
     <g data-testid="cf-edge-firing-path">
       <BaseEdge path={path} markerEnd={markerEnd} style={style} />
       <path
         d={path}
-        className="react-flow__edge-path"
+        className="react-flow__edge-path cf-edge-overlay"
         fill="none"
         pathLength={1}
         style={overlayStyle}
+        data-firing={isFiring ? "true" : "false"}
         data-testid="cf-edge-firing-overlay"
       />
     </g>