Draw every flow as one graph, merged on what it talks to

A node type can now say which outside thing its parameters point at, and
nodes sharing one — a broker topic, a URL, a bucket — are drawn as a single
neuron on a new /brain canvas. That makes the wiring which runs between
flows through a broker visible for the first time; no single flow's canvas
can show it. The key is read off stored parameters, so a credential
reference never reaches an id.

Layout is a d3 force simulation settled once and then frozen, lit by the
socket the editor already listens to: a neuron pulses when any node behind
it publishes, and its connections light as values pass.

Fixes the message pulse while here: interpolating the stroke against the
edge's `color-mix()` resting colour went through oklab and left the gamut,
which turned every pulse on both canvases fluorescent yellow.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017MeiWk3Yq12n2pTvnQWYvt

frontend/src/components/Flow/flow.css

@@ -38,15 +38,21 @@
   }
 
   /*
-   * No `to` on purpose: the implied one is the edge's own resting style, so
-   * the decay lands exactly where it started rather than on a second colour
-   * that has to snap back — and a selected edge decays to its own blue.
+   * Both ends are plain colours. The implied `to` would be the edge's resting
+   * stroke, which is a `color-mix()` — and interpolating a hex against one of
+   * those goes through oklab and leaves the gamut on the way, which turned
+   * every pulse fluorescent yellow. Landing on `--muted-foreground` instead is
+   * the same hue the edge rests in, so the last step back is invisible.
    */
   @keyframes edge-pulse {
     from {
       stroke: var(--primary);
       stroke-width: 2.5;
     }
+    to {
+      stroke: var(--muted-foreground);
+      stroke-width: var(--xy-edge-stroke-width);
+    }
   }
 }
 
@@ -94,3 +100,23 @@
 .react-flow__node:focus {
   outline: none;
 }
+
+/*
+ * Brain graph. Both ends of a connection sit at the neuron's centre, so an
+ * edge runs straight from circle to circle and disappears under them.
+ */
+.brain-handle {
+  opacity: 0;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.brain-cell {
+  cursor: pointer;
+  transition: border-color var(--duration-base) var(--ease-standard);
+}
+
+.brain-cell:hover {
+  border-color: var(--primary);
+}