Show the streaming dash on dashboard edges and without motion

frontend/src/components/Flow/endpoints.ts

@@ -51,7 +51,10 @@ export function deriveEndpoints(
 
   // Which node consumes or produces each message, so a label can sit beside it.
   const consumers = new Map<string, { node: string; port: string }[]>()
-  const producers = new Map<string, { node: string; port: string }[]>()
+  const producers = new Map<
+    string,
+    { node: string; port: string; stream?: boolean }[]
+  >()
   for (const node of definitions) {
     for (const spec of node.requires ?? []) {
       const message = qualify(flow, spec.name ?? "")
@@ -66,7 +69,7 @@ export function deriveEndpoints(
       if (!message) continue
       producers.set(message, [
         ...(producers.get(message) ?? []),
-        { node: node.id, port: portOf(spec) },
+        { node: node.id, port: portOf(spec), stream: spec.stream },
       ])
     }
   }
@@ -127,6 +130,7 @@ export function deriveEndpoints(
             message,
             flow,
             producerId: `${flow}.${producer.node}`,
+            stream: producer.stream,
           } satisfies FlowEdgeData,
         })
       }

frontend/src/components/Flow/flow.css

@@ -49,6 +49,15 @@
   --edge-rest: var(--primary);
 }
 
+/*
+ * The dashes are the signal, the march below is only its motion: the pattern
+ * is declared outside the guard so a reduced-motion reader still sees which
+ * edges stream.
+ */
+.react-flow__edge-path.edge-stream {
+  stroke-dasharray: 6 4;
+}
+
 /* A message arriving lights its edge, then decays back to rest. */
 @media (prefers-reduced-motion: no-preference) {
   .react-flow__edge-path.edge-live {
@@ -80,7 +89,6 @@
    * the literal is one dash period per step, slow enough to read as direction.
    */
   .react-flow__edge-path.edge-stream {
-    stroke-dasharray: 6 4;
     animation: edge-march 700ms linear infinite;
   }