fix(dashboard): NetDiagram polish — rounded edges, inline tokens, code colset, matched borders, uncapped transition width, sticky-enabled replay

Six readability tweaks on top of 227fb9d:

1. Rounded polyline corners on orthogonal edges
   OrthogonalEdgeImpl delegates to new roundedPolylinePath that emits
   a quadratic Q arc at each bend (radius 8). Per-corner cap is
   min(radius, len(prev)/2, len(next)/2) so short legs don't
   overshoot. Two-point edges short-circuit to a plain polyline.

2. Token count inline next to place name
   Dropped the corner Badge overlay. Token count now renders on the
   external label line, right of the place name, in
   text-cf-accent bold tabular-nums. testid place-token-badge-${name}
   preserved on the inline span.

3. Colour set name styled as code
   Wrapped in a <code> with font-mono text-[10px] rounded border
   border-cf-border bg-cf-canvas px-1. Visually reads as an
   identifier, not body text. Kumo's <Code> primitive is deprecated
   (v2.0) + tuned for code snippets; custom <code> is the right
   shape here.

4. Place + transition borders match edge stroke
   Place circle: flat 1.5px borderWidth, borderColor toggles
   cf-border-strong / cf-accent on hasTokens (was bumped to 2 on
   tokens). Transition border flipped to cf-border-strong to match
   the edge family. Glow/pulse boxShadow untouched.

5. Transition width uncapped
   Dropped TRANSITION_MAX_W. computeTransitionWidth now
   Math.max(MIN_W, maxLen * 7 + 20). Single shared width still
   applied to all transitions for a clean ELK grid.

6. Sticky enabled edges across replay scrubbing
   EnactmentDetailPage derives currentlyEnabledEdgeIds from
   diagram.transitions[].enabled_count > 0 every tick. During
   replay (replayState !== null) the page maintains
   stickyEnabledEdgeIds: Set, unioning the current set on every
   step so an edge that was enabled at v=5 stays highlighted
   when the operator scrubs to v=6 even if its underlying
   transition is no longer enabled there. Reset to empty when
   replayState clears (exit replay). Live mode passes only
   currentlyEnabledEdgeIds; replay passes the union. NetDiagram
   gains an optional enabledEdgeIds prop; buildGraph falls back
   to auto-derive when omitted (keeps unit tests green).

161/161 vitest + typecheck + build green; 176/176 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.tsx

@@ -24,7 +24,7 @@ import {
 } from "@xyflow/react"
 import ELK, { type ElkNode, type ElkExtendedEdge, type ElkPoint } from "elkjs/lib/elk.bundled.js"
 import { ArrowsCounterClockwiseIcon } from "@phosphor-icons/react"
-import { Badge, Surface } from "@cloudflare/kumo"
+import { Surface } from "@cloudflare/kumo"
 
 type NetDiagramPayload = ColouredFlowDashboardWeb.Views.NetDiagram
 type DiagramPlace = ColouredFlowDashboardWeb.Views.NetDiagramPlace
@@ -39,6 +39,11 @@ interface NetDiagramProps {
   onSelectTransition?: (name: string) => void
   firingEdgeIds?: ReadonlySet<string>
   firingDurationMs?: number
+  // Optional override for the enabled-arc accent. When supplied, only edges
+  // whose id is in the set get the cf-edge-enabled style. When omitted,
+  // buildGraph derives the set from `transition.enabled_count > 0` (legacy
+  // path used by unit tests and live mode without replay sticky-state).
+  enabledEdgeIds?: ReadonlySet<string>
 }
 
 const DEFAULT_FIRING_DURATION_MS = 600
@@ -58,19 +63,23 @@ const PLACE_W = 48
 const PLACE_H = PLACE_CIRCLE + PLACE_LABEL_GAP
 const TRANSITION_H = 28
 const TRANSITION_MIN_W = 56
-const TRANSITION_MAX_W = 200
 const TRANSITION_CHAR_PX = 7
 const TRANSITION_PAD_PX = 20
 
+// No upper clamp: transition names in this codebase are short enough that an
+// explicit cap risked truncating a legitimate label. Single shared width is
+// still applied to every transition node so the grid stays consistent.
 function computeTransitionWidth(transitions: ReadonlyArray<DiagramTransition>): number {
   let maxLen = 0
   for (const t of transitions) {
     if (t.name.length > maxLen) maxLen = t.name.length
   }
   const raw = maxLen * TRANSITION_CHAR_PX + TRANSITION_PAD_PX
-  return Math.max(TRANSITION_MIN_W, Math.min(TRANSITION_MAX_W, raw))
+  return Math.max(TRANSITION_MIN_W, raw)
 }
 
+const EDGE_CORNER_RADIUS = 8
+
 type PlaceNodeData = DiagramPlace & Record<string, unknown>
 type TransitionNodeData = DiagramTransition & {
   enactmentState: EnactmentState
@@ -118,13 +127,22 @@ export default function NetDiagram({
   enactmentState = "running",
   onSelectTransition,
   firingEdgeIds = EMPTY_FIRING_SET,
-  firingDurationMs = DEFAULT_FIRING_DURATION_MS
+  firingDurationMs = DEFAULT_FIRING_DURATION_MS,
+  enabledEdgeIds
 }: NetDiagramProps) {
   const layout = useElkLayout(diagram)
 
   const { nodes, edges, isEmpty } = useMemo(
-    () => buildGraph(diagram, enactmentState, firingEdgeIds, firingDurationMs, layout),
-    [diagram, layout, enactmentState, firingEdgeIds, firingDurationMs]
+    () =>
+      buildGraph(
+        diagram,
+        enactmentState,
+        firingEdgeIds,
+        firingDurationMs,
+        layout,
+        enabledEdgeIds
+      ),
+    [diagram, layout, enactmentState, firingEdgeIds, firingDurationMs, enabledEdgeIds]
   )
 
   const handleNodeClick = useCallback(
@@ -329,7 +347,8 @@ export function buildGraph(
   enactmentState: EnactmentState,
   firingEdgeIds: ReadonlySet<string> = EMPTY_FIRING_SET,
   firingDurationMs: number = DEFAULT_FIRING_DURATION_MS,
-  layout: Layout = EMPTY_LAYOUT
+  layout: Layout = EMPTY_LAYOUT,
+  enabledEdgeIdsOverride?: ReadonlySet<string>
 ): { nodes: Array<PlaceNode | TransitionNode>; edges: Edge[]; isEmpty: boolean } {
   const places = diagram?.places ?? []
   const transitions = diagram?.transitions ?? []
@@ -382,8 +401,9 @@ export function buildGraph(
     const isFiring = firingEdgeIds.has(id)
     const isEnabledInput =
       !isFiring &&
-      arc.orientation === "p_to_t" &&
-      enabledTransitions.has(arc.transition)
+      (enabledEdgeIdsOverride
+        ? enabledEdgeIdsOverride.has(id)
+        : arc.orientation === "p_to_t" && enabledTransitions.has(arc.transition))
 
     let style: CSSProperties
     let markerEnd = DEFAULT_MARKER
@@ -444,10 +464,40 @@ const transitionId = (name: string) => `t:${name}`
 function OrthogonalEdgeImpl({ data, markerEnd, style }: EdgeProps) {
   const points = (data as OrthoEdgeData | undefined)?.points
   if (!points || points.length < 2) return null
-  const d = points
-    .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
-    .join(" ")
-  return <BaseEdge path={d} markerEnd={markerEnd} style={style} />
+  return <BaseEdge path={roundedPolylinePath(points, EDGE_CORNER_RADIUS)} markerEnd={markerEnd} style={style} />
+}
+
+// Build an SVG path from a polyline, replacing each interior 90° corner with
+// a quadratic-bezier arc. The corner radius is capped at half of the shorter
+// adjacent segment so very-short legs do not overshoot the bend.
+function roundedPolylinePath(points: ReadonlyArray<ElkPoint>, radius: number): string {
+  if (points.length < 2) return ""
+  if (points.length === 2 || radius <= 0) {
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ")
+  }
+  let d = `M ${points[0].x} ${points[0].y}`
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1]
+    const curr = points[i]
+    const next = points[i + 1]
+    const len1 = Math.hypot(curr.x - prev.x, curr.y - prev.y)
+    const len2 = Math.hypot(next.x - curr.x, next.y - curr.y)
+    const r = Math.max(0, Math.min(radius, len1 / 2, len2 / 2))
+    if (r === 0) {
+      d += ` L ${curr.x} ${curr.y}`
+      continue
+    }
+    const t1 = (len1 - r) / len1
+    const ax = prev.x + (curr.x - prev.x) * t1
+    const ay = prev.y + (curr.y - prev.y) * t1
+    const t2 = r / len2
+    const bx = curr.x + (next.x - curr.x) * t2
+    const by = curr.y + (next.y - curr.y) * t2
+    d += ` L ${ax} ${ay} Q ${curr.x} ${curr.y} ${bx} ${by}`
+  }
+  const last = points[points.length - 1]
+  d += ` L ${last.x} ${last.y}`
+  return d
 }
 
 const OrthogonalEdge = memo(OrthogonalEdgeImpl)
@@ -475,10 +525,13 @@ function PlaceNodeViewImpl({ data }: NodeProps<PlaceNode>) {
         <Surface
           as="div"
           title={tooltip}
-          className="flex h-full w-full items-center justify-center rounded-full border bg-cf-surface shadow-sm"
+          className="flex h-full w-full items-center justify-center rounded-full bg-cf-surface shadow-sm"
           style={{
-            borderColor: hasTokens ? "var(--color-cf-accent)" : "var(--color-cf-border)",
-            borderWidth: hasTokens ? 2 : 1.5
+            borderStyle: "solid",
+            borderColor: hasTokens
+              ? "var(--color-cf-accent)"
+              : "var(--color-cf-border-strong)",
+            borderWidth: 1.5
           }}
           data-testid={`place-node-${data.name}`}
         >
@@ -495,31 +548,28 @@ function PlaceNodeViewImpl({ data }: NodeProps<PlaceNode>) {
             isConnectable={false}
           />
         </Surface>
-        {hasTokens ? (
-          <span
-            data-testid={`place-token-badge-${data.name}`}
-            className="absolute -right-1.5 -top-1.5"
-          >
-            <Badge
-              variant="primary"
-              className="inline-flex size-3 items-center justify-center rounded-full bg-cf-accent-tint p-0 text-[8px] font-semibold leading-none tabular-nums text-cf-accent-ink shadow-sm"
-            >
-              {data.tokens_count}
-            </Badge>
-          </span>
-        ) : null}
       </div>
       <div
         data-testid={`place-label-${data.name}`}
         className="mt-1 flex w-[96px] flex-col items-center leading-tight"
       >
-        <span className="max-w-full truncate font-mono text-[11px] font-medium text-cf-ink">
-          {data.name}
-        </span>
+        <div className="flex max-w-full items-baseline justify-center gap-1">
+          <span className="truncate font-mono text-[11px] font-medium text-cf-ink">
+            {data.name}
+          </span>
+          {hasTokens ? (
+            <span
+              data-testid={`place-token-badge-${data.name}`}
+              className="font-mono text-[11px] font-bold tabular-nums text-cf-accent"
+            >
+              {data.tokens_count}
+            </span>
+          ) : null}
+        </div>
         {data.colour_set ? (
-          <span className="max-w-full truncate font-mono text-[10px] text-cf-ink-muted">
+          <code className="mt-0.5 max-w-full truncate rounded border border-cf-border bg-cf-canvas px-1 font-mono text-[10px] text-cf-ink-muted">
             {data.colour_set}
-          </span>
+          </code>
         ) : null}
       </div>
     </div>
@@ -560,7 +610,7 @@ function TransitionNodeViewImpl({ data }: NodeProps<TransitionNode>) {
       style={{
         width: data.width,
         height: TRANSITION_H,
-        borderColor: "var(--color-cf-border)",
+        borderColor: "var(--color-cf-border-strong)",
         borderWidth: 1.5,
         boxShadow: pulseShadow ?? baseShadow,
         transform: pulsing ? "scale(1.05)" : "scale(1)",

dashboard/ui/src/routes/EnactmentDetailPage.tsx

@@ -334,6 +334,53 @@ function DetailContent({
     }
   }, [])
 
+  // Enabled-edge accent: live mode reads directly from `transition.enabled_count`;
+  // replay mode keeps a cumulative union of every edge that has been enabled at
+  // any scrub position so the highlight stays sticky even when the operator
+  // walks back to a version where the transition no longer has bindings.
+  const currentlyEnabledEdgeIds = useMemo<ReadonlySet<string>>(() => {
+    if (!diagram) return EMPTY_FIRING_SET
+    const enabled = new Set<string>()
+    const enabledTransitions = new Set<string>()
+    for (const t of diagram.transitions) {
+      if (t.enabled_count > 0) enabledTransitions.add(t.name)
+    }
+    diagram.arcs.forEach((arc, index) => {
+      if (arc.orientation !== "p_to_t") return
+      if (!enabledTransitions.has(arc.transition)) return
+      enabled.add(`arc-${arc.orientation}-${arc.place}-${arc.transition}-${index}`)
+    })
+    return enabled
+  }, [diagram])
+
+  const [stickyEnabledEdgeIds, setStickyEnabledEdgeIds] =
+    useState<ReadonlySet<string>>(EMPTY_FIRING_SET)
+
+  useEffect(() => {
+    if (replayState === null) {
+      setStickyEnabledEdgeIds(EMPTY_FIRING_SET)
+      return
+    }
+    setStickyEnabledEdgeIds((prev) => {
+      let next: Set<string> | null = null
+      for (const id of currentlyEnabledEdgeIds) {
+        if (!prev.has(id)) {
+          if (!next) next = new Set(prev)
+          next.add(id)
+        }
+      }
+      return next ?? prev
+    })
+  }, [replayState, currentlyEnabledEdgeIds])
+
+  const enabledEdgeIds = useMemo<ReadonlySet<string>>(() => {
+    if (replayState === null) return currentlyEnabledEdgeIds
+    if (stickyEnabledEdgeIds.size === 0) return currentlyEnabledEdgeIds
+    const merged = new Set(stickyEnabledEdgeIds)
+    for (const id of currentlyEnabledEdgeIds) merged.add(id)
+    return merged
+  }, [replayState, currentlyEnabledEdgeIds, stickyEnabledEdgeIds])
+
   const [activeTab, setActiveTab] = useState<TabId>("markings")
   // Pending inspect target driven by NetDiagram node click. Cleared by
   // DebugTab once the dispatch fires so re-clicking the same transition
@@ -432,6 +479,7 @@ function DetailContent({
               onSelectTransition={onSelectTransition}
               firingEdgeIds={firingEdgeIds}
               firingDurationMs={firingDurationMs}
+              enabledEdgeIds={enabledEdgeIds}
             />
           </div>
         </LayerCard.Primary>