Brain graph: thinner ring, integer border, heavier connections

The ring share drops from the wordmark's 0.231 to 0.18 so the disc reads as a
dot at 32px, and both the border and the gap are rounded where they are applied
— a fractional border snaps per edge and left the disc off centre. Connections
and their port dots go up with it, pulse width included, so an arriving message
never draws its edge thinner than it rests.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HTsT1isxUjw5gtkJk8WhuA

frontend/src/components/Flow/BrainNode.tsx

@@ -22,14 +22,22 @@ export type BrainNodeData = {
 
 /**
  * The mark's own proportions, measured off `fluksio-light.svg`: a 1.4545 ring
- * and a 0.4848 gap on a 6.303 outer diameter, leaving the disc the 38.5% in
- * the middle.
+ * and a 0.4848 gap on a 6.303 outer diameter, which puts the ring at 0.231 and
+ * leaves the disc the 38.5% in the middle.
+ *
+ * The ring here is drawn a little thinner than the wordmark's, on purpose. The
+ * mark is read at wordmark size, where 0.231 is one confident stroke; a graph
+ * of 32px neurons under connections heavier than the mark ever draws reads that
+ * same stroke as a blob, and thinning it gives the disc room to be a dot.
  *
  * Shares rather than fixed widths because the neurons run from 32px to 96px:
  * the same ring in pixels would swallow the smallest and read as a hairline on
  * the largest, and it is the proportion that makes a circle look like the mark.
+ * Rounded where they are applied, though, because the browser snaps a
+ * fractional border to the device pixels one edge at a time: 7.392px lands as 7
+ * on one side and 8 on the other, and the disc sits off centre.
  */
-const RING = 0.231
+const RING = 0.18
 const GAP = 0.077
 
 function BrainNodeComponent({ data }: NodeProps) {
@@ -69,8 +77,8 @@ function BrainNodeComponent({ data }: NodeProps) {
       style={{
         width: size,
         height: size,
-        borderWidth: size * RING,
-        boxShadow: `inset 0 0 0 ${size * GAP}px var(--brain-gap)`,
+        borderWidth: Math.round(size * RING),
+        boxShadow: `inset 0 0 0 ${Math.round(size * GAP)}px var(--brain-gap)`,
       }}
       title={`${label} · ${kind} · ${members.join(", ")}${issue ? ` · ${issue}` : ""}`}
     >

frontend/src/components/Flow/flow.css

@@ -20,6 +20,11 @@
   );
   --xy-edge-stroke-selected: var(--primary);
   --xy-edge-stroke-width: 1.5;
+  /*
+   * What a pulse widens to on its way in; the width above is where it settles
+   * back. Per canvas, because the brain draws its connections heavier.
+   */
+  --edge-pulse-width: 2.5;
   --xy-handle-background-color: var(--card);
   --xy-handle-border-color: var(--muted-foreground);
   --xy-selection-background-color: color-mix(
@@ -59,7 +64,7 @@
   @keyframes edge-pulse {
     from {
       stroke: var(--primary);
-      stroke-width: 2.5;
+      stroke-width: var(--edge-pulse-width);
     }
     to {
       stroke: var(--edge-rest);
@@ -137,8 +142,13 @@
 .react-flow.brain-flat {
   --xy-background-color: transparent;
   --brain-decay: 90s;
-  /* Thicker than the editor's, to match the weight the mark draws them at. */
-  --xy-edge-stroke-width: 2;
+  /*
+   * Thicker than the editor's, to match the weight the mark draws them at — and
+   * the pulse widens with it, or a message would leave its edge looking thinner
+   * than it rests.
+   */
+  --xy-edge-stroke-width: 3;
+  --edge-pulse-width: 4;
   --xy-background-pattern-dots-color: color-mix(
     in srgb,
     var(--muted-foreground) 22%,
@@ -296,7 +306,7 @@
 .brain-dot {
   fill: var(--card);
   stroke: var(--brain-ink);
-  stroke-width: 1.5;
+  stroke-width: 2;
 }
 
 .brain-dot.brain-dot-out {