From 32cc23fa6b8b84f65e812bdb5f19fc14996d2a2c Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 20 Aug 2026 13:28:40 +0200
Subject: [PATCH] Show the streaming dash on dashboard edges and without motion

---
 NOTEPAD.md                                |  2 --
 frontend/src/components/Flow/endpoints.ts |  8 ++++++--
 frontend/src/components/Flow/flow.css     | 10 +++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/NOTEPAD.md b/NOTEPAD.md
index 25fb6e2..62f3722 100644
--- a/NOTEPAD.md
+++ b/NOTEPAD.md
@@ -32,8 +32,6 @@ should reopen it.
 - FEAT/UI/MOBILE: a rank of many nodes — a connector feeding eight dashboard tiles — is thousands of pixels wide however the graph is turned, so on a phone the fit shrinks it past reading. The layout is right and the flow is simply too big for the screen; a "one rank at a time" reading mode, or wrapping a wide rank, is what would make it legible.
 - CHORE/UI: an edge's value chip sits at the bezier midpoint while the layout reserves its room at dagre's label rank. The two agree closely enough today; if chips ever pile up, take the position from the layout instead.
 - CHORE/UI: the bar widget's nested fill is `--chart-5` against a `--primary` outer fill, which measures 2.53:1 in light mode — under the 3:1 guideline for non-text. The `inset-y-1` gutter supplies the edge, and every other slot of the ramp collapses in dark mode instead.
-- CHORE/UI: a streaming edge's dashes sit inside the `prefers-reduced-motion: no-preference` guard, so a reduced-motion user gets no streaming indicator at all. Lifting `stroke-dasharray` alone out of the guard keeps the static signal without the motion.
-- CHORE/UI: only node-to-node edges carry the streaming dash. `endpoints.ts` builds a dashboard endpoint's edges without the producing port's `stream` flag, so a training loss feeding a chart — the case the march was drawn for — is still a plain line.
 - CHORE/UI: the Home flow-activity table's name cell is `max-w-0` with nothing setting a floor, so `demo_training` reads as "demo⋯" at 1440px while the row has slack to spare. The cap is what keeps the table from widening the page; it wants a minimum beside it.
 - FEAT/UI (deferred until MCP lands): add a "bot" icon button to the home view (graph panel) which opens a chat window (reuse general concept of a side panel like in flows/nodes to make it a chat panel which can open on any screen (stacks below any other existing panel -> introduce stacking) to give support on errors/write code, generate dashboards etc) to explain the error(s)
 - FEAT/UI make the header (Fluksio - YEAR) and the logo in the sidebar link to the main page (fluksio.com)
diff --git a/frontend/src/components/Flow/endpoints.ts b/frontend/src/components/Flow/endpoints.ts
index 64f72da..a1456f7 100644
--- a/frontend/src/components/Flow/endpoints.ts
+++ b/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,
         })
       }
diff --git a/frontend/src/components/Flow/flow.css b/frontend/src/components/Flow/flow.css
index a7720bb..752648d 100644
--- a/frontend/src/components/Flow/flow.css
+++ b/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;
   }