@sleep2agi/agent-network-dashboard 0.5.1-preview.7 → 0.5.1-preview.70

package/app/components/TopoGraph.tsx

@@ -194,7 +194,27 @@ function FreshnessChip({ sessions }: { sessions: unknown }) {
   // tier (R312-R314 family); the amber bg/text/border still does
   // the warning-state work, the weight just keeps the chip in the
   // same data-typography ladder as its siblings.
-  const baseClass = "hidden sm:inline px-2.5 py-1 rounded-md font-mono font-medium border transition-colors duration-300";
+  // Round 377 / Loop: FreshnessChip baseClass picks up `tabular-nums`.
+  // The chip-row's last untouched chip joins the R224-R357 broader
+  // tabular-nums sweep:
+  //   R224 edge badge digit
+  //   R225 hub digit / panel header counts / recent row count
+  //   R232 chip row counts (working / online / active-links)
+  //   R321 recent row timestamp
+  //   R322 recent panel hot count
+  //   R323 filter pin pill counts
+  //   R333 vendor count suffix
+  //   R357 active-links freshness suffix wrapper
+  //   R377 FreshnessChip body  (this round)
+  // `font-mono` already gives equal-width glyphs but `tabular-nums`
+  // is the explicit-invariant the rest of the chip row carries.
+  // FreshnessChip body reads `lag · {sec}s` — the {sec} digit grows
+  // every second; tabular-nums explicitly locks digit width so the
+  // chip stays planted as the seconds counter ticks past 9 → 10 →
+  // 99 → 100. R187 transition-colors duration-300 + R275 stale-only
+  // render gate + R315 font-medium R313 family alignment all
+  // preserved.
+  const baseClass = "hidden sm:inline px-2.5 py-1 rounded-md font-mono font-medium tabular-nums border transition-colors duration-300";
   const colorClass = stale
     ? "bg-amber-500/10 text-amber-300 border-amber-500/20"
     : "bg-gray-500/10 text-gray-400 border-gray-500/20";
@@ -1038,6 +1058,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // 280ms ease-out transition list matches R199 smoothView vocabulary
   // so the visual joins the existing rhythm on the same rect.
   const [hoveredMinimap, setHoveredMinimap] = useState(false);
+  // Round 347 / Loop: zoom-level readout hover-state letter-spacing
+  // tween (0 → 0.5 px). The readout sandwiched between zoom-out /
+  // zoom-in is a passive percent display — pre-R347 it had no hover
+  // feedback at all (only a `title` tooltip). R347 extends the R344
+  // (`+N more flows` footer) + R345 (panel titles) hover-letter-
+  // spacing family from panel/footer surfaces into the HTML chrome
+  // strip. Hovering the readout spreads its digits 0.5 px, signalling
+  // "this is alive". tabular-nums + minWidth: 46 from R225 still lock
+  // the column so the tween doesn't shove neighbouring controls.
+  // 200ms ease-out joins the existing R264 color/border transition
+  // list on the same span.
+  const [hoveredZoomLevel, setHoveredZoomLevel] = useState(false);
+  // Round 350 / Loop: reset-button icon hover-rotate preview of the
+  // R184 click-spin. Pre-R350 hovering the reset button only changed
+  // the button bg (white/5); the icon inside stayed perfectly still.
+  // R350 nudges the icon -8° on hover — a tactile hint that this
+  // button rotates the icon on click. When the click fires, the
+  // R184 anet-reset-spin keyframe animation overrides the hover
+  // transform for its 450 ms run (CSS animations win over transitions
+  // on the same property); when the animation ends + React removes
+  // the className, the inline transform eases back to whatever the
+  // hover state says — either -8° (still hovering) or 0 (mouse left).
+  // 350th-round milestone polish.
+  const [hoveredReset, setHoveredReset] = useState(false);
   // R135: panel-wide hover-elevation. The recent-signal + legend
   // panels both already host clickable rows (R56/R116 recent rows,
   // R55/R61 legend rows) and a clickable footer (R133), so the
@@ -1799,12 +1843,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               while honoring R328's wider baseline rhythm. data-topo-
               chrome-layout-trailer attr unchanged — it still marks
               the boundary surface for the gap probe. */}
+          {/* Round 375 / Loop: Layout-toggle wrapper rounded-md → rounded-
+              lg (6 → 8 px). Extends the corner-radius cascade family
+              to the chrome-strip layout-toggle wrapper:
+                R330 canvas wrapper        rounded-xl  12 px
+                R331 SVG panels            rx=10       10 px
+                R332 minimap container     rounded-lg   8 px
+                R375 Layout-toggle wrapper rounded-lg   8 px  (this round)
+              Pre-R375 the wrapper at rounded-md (6 px) was the only
+              chrome-strip container still using the smaller corner
+              radius — both R330 outer wrapper and R332 minimap sit at
+              ≥ 8 px, so the Layout toggle's 6 px stood out as a
+              tighter corner against the family. R375 brings it into
+              the rounded-lg tier where the minimap already lives.
+              Pure paint change — overflow-hidden still clips the
+              inner buttons' bg-cyan-500/15 tints; no layout shift.
+              R268 border-color + 200ms transition + R329 mr-0.5 +
+              data-topo-chrome-layout-trailer all preserved. */}
           <div
-            className="mr-0.5 inline-flex rounded-md border overflow-hidden"
+            className="mr-0.5 inline-flex rounded-lg border overflow-hidden"
             style={{ borderColor: pal.containerBorder, transition: 'border-color 200ms ease-out' }}
             role="group"
             aria-label="Topology layout"
             data-topo-chrome-layout-trailer
+            data-topo-chrome-layout-radius="rounded-lg"
           >
             <button
               onClick={() => { popChrome('layout-ring'); if (layout !== 'ring') toggleLayout(); }}
@@ -1838,7 +1900,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  weight; cyan-400/60 + ring-inset retained. The
                  R163/R196 hover/active deeps + R249 chrome-pop
                  click feedback continue unchanged. */
-              className={`px-2.5 py-1 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              // R351: hover:tracking-wide extends the R344/R345/R347
+              // hover-letter-spacing family to a 4th surface (chrome-
+              // strip Ring/Grid pair). transition-colors className
+              // dropped in favour of an inline transition spec that
+              // bundles bg/color (150ms ease) + letter-spacing
+              // (200ms ease-out) — Tailwind's transition-colors
+              // doesn't list letter-spacing, so without this the
+              // hover:tracking-wide would snap. Sibling change on
+              // the Grid button below.
+              className={`px-2.5 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out' }}
             >
               Ring
             </button>
@@ -1855,14 +1927,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // Round 306 / Loop: focus-visible:ring-2 → ring-1 sibling
               // change to Ring above — unifies focus-ring width across
               // all chrome buttons.
-              className={`px-2.5 py-1 border-l transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
+              // R351 sibling — Grid button picks up hover:tracking-wide
+              // + inline transition spec. Same vocabulary as Ring.
+              className={`px-2.5 py-1 border-l focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
               /* Round 268 / Loop: Grid button's left border (the
                  internal divider between Ring and Grid) picks up
                  pal.containerBorder, matching the wrapper change at
                  line ~1460 and the chrome strip's segmented borders
-                 (nodeSize, zoom). transition-colors className covers
-                 the border-color eased on theme toggle. */
-              style={{ borderColor: pal.containerBorder }}
+                 (nodeSize, zoom). The R268 transition-colors className
+                 used to carry the border-color ease; R351 unfolds the
+                 transition list into the inline spec below so the
+                 letter-spacing tween rides alongside without snapping
+                 the border-color flip — border-color 200ms ease-out
+                 keeps R268's theme-toggle smoothness intact. */
+              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out' }}
             >
               Grid
             </button>
@@ -1949,11 +2027,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      7th surface in the info-density tabular-nums
                      sweep — and the first on the HTML side
                      (previous 6 were SVG <text>/<tspan>). */
-                  className={`tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors duration-200 ${
+                  /* Round 398 / Loop: chip-row chips gain hover translateY
+                     (-1px) lift on the CLICKABLE variant only (workingCount
+                     > 0 here / onlineNodes.length > 0 below / activeLinks
+                     > 0 deeper). Pre-R398 the chips brightened bg + border
+                     on hover (R201) but didn't lift — only their clickable
+                     siblings (filter pin pills R397, recent rows R143,
+                     legend rows R144) acknowledged cursor entry with a
+                     translate-y. R398 closes the chip-row by extending
+                     the same gesture to the static header chips, gated
+                     on the clickable role so empty chips (which have
+                     no role="button") stay planted at their R205
+                     opacity-50 receded paint. transition-transform
+                     + duration-200 + ease-out + transform-gpu added
+                     alongside existing transition-colors so the lift
+                     and the color tween share rhythm.
+                     Gesture-vocabulary table (post-R398):
+                       recent-signal row  -1 px  (R143)
+                       legend row         -1 px  (R144)
+                       group cluster box  fill+sw lift (R142)
+                       filter pin pills   -1 px  (R397)
+                       chip-row chips     -1 px  (R398, this round)
+                     Empty chips: no lift. Pin-mirror chips: no
+                     conflict (R180 inset double-ring is a box-shadow
+                     not a transform). new data-chip-hover-lift attr
+                     surfaces the lift surface for tests. */
+                  className={`tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors transition-transform duration-200 ease-out transform-gpu ${
                     workingCount > 0
-                      ? 'bg-green-500/10 text-green-300 border-green-500/20 hover:bg-green-500/15 hover:border-green-500/30'
+                      ? 'bg-green-500/10 text-green-300 border-green-500/20 hover:bg-green-500/15 hover:border-green-500/30 hover:-translate-y-px'
                       : 'bg-green-500/10 text-green-300 border-green-500/20'
                   }`}
+                  data-chip-hover-lift={workingCount > 0 ? 'true' : 'false'}
                   data-working-chip
                   data-working-chip-aliases={workingAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'working' ? 'true' : 'false'}
@@ -2023,7 +2127,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       pattern: small label spans demote, value stays
                       prominent. data-working-chip-unit exposes the
                       span for tests. */}
-                  {workingCount}<span className="opacity-70" data-working-chip-unit> working</span>
+                  {/* Round 362 / Loop: digit picks up font-semibold
+                      (fw 500 → 600) for within-chip weight tier. The
+                      chip's outer className stays at font-medium (R313
+                      data-weight baseline); the digit overrides to
+                      semibold so it reads heavier than its " working"
+                      unit (which keeps fw 500 + R338 opacity-70).
+                      Joins the R333-R341 chip-internal-hierarchy arc
+                      at the chip-count scope. Sibling edits on the
+                      online + active-links chip digits below. data-
+                      working-chip-digit attr exposes the digit span. */}
+                  <span className="font-semibold" data-working-chip-digit>{workingCount}</span><span className="opacity-70" data-working-chip-unit> working</span>
                 </span>
                 <span
                   // Round 201 / Loop: online chip — mirror of the working
@@ -2037,11 +2151,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   /* Round 232 / Loop: tabular-nums on online chip
                      (sibling treatment to working chip — same row,
                      same digit-jitter physics on count crossings). */
-                  className={`tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors duration-200 ${
+                  // R398: hover translate-y lift on clickable variant — see working chip above.
+                  className={`tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors transition-transform duration-200 ease-out transform-gpu ${
                     onlineNodes.length > 0
-                      ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20 hover:bg-cyan-500/15 hover:border-cyan-500/30'
+                      ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20 hover:bg-cyan-500/15 hover:border-cyan-500/30 hover:-translate-y-px'
                       : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'
                   }`}
+                  data-chip-hover-lift={onlineNodes.length > 0 ? 'true' : 'false'}
                   data-online-chip
                   data-online-chip-aliases={onlineAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'idle' ? 'true' : 'false'}
@@ -2086,7 +2202,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   }}
                 >
                   {/* R337 sibling — online chip unit demotion. */}
-                  {onlineNodes.length}<span className="opacity-70" data-online-chip-unit> online</span>
+                  {/* R362 sibling — online-chip digit gains font-semibold. */}
+                  <span className="font-semibold" data-online-chip-digit>{onlineNodes.length}</span><span className="opacity-70" data-online-chip-unit> online</span>
                 </span>
               </>
             );
@@ -2213,8 +2330,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 title={`${w} working · ${i} idle · ${o} offline`}
                 data-fleet-pressure
               >
-                <span className="text-[10px] tracking-wide">pressure</span>
-                <span className="inline-flex h-1.5 w-16 rounded-full overflow-hidden" style={{ background: 'rgb(75 85 99 / 0.25)' }}>
+                {/* Round 373 / Loop: pressure-bar kicker label gains
+                    font-medium (fw 400 → 500). Sibling small-text fw
+                    lift family with R363 recent-row alias + R364
+                    legend-row label + R366 group-label count + R368
+                    +N more flows footer — extends to a 5th surface
+                    (the chip-row's 'pressure' label). At fontSize
+                    10 px tracking-wide against the chip's gray bg,
+                    the default fw 400 sat below the deliberate-data
+                    band; fw 500 brings it into parity with the
+                    chip-row 'working / online / active links' unit
+                    spans (chip-level font-medium R313). data-fleet-
+                    pressure-kicker attr exposes the kicker for tests. */}
+                <span className="text-[10px] tracking-wide font-medium" data-fleet-pressure-kicker>pressure</span>
+                {/* Round 374 / Loop: pressure-bar height h-1.5 → h-2
+                    (6 → 8 px) — sibling visual-weight bump (8th anchor
+                    in the family):
+                      R287 minimap viewport stroke 1 → 1.5
+                      R295 legend swatch base radius 5.5 → 6
+                      R359 recent-row pip base radius 1.6 → 1.8
+                      R360 hub digit fontSize 11 → 12
+                      R361 edge-badge digit fontSize 10 → 11
+                      R365 hub-highlight base radius 5 → 5.5
+                      R367 edge-badge rest stroke 1 → 1.25
+                      R374 pressure-bar height 1.5 → 2  (this round)
+                    +33 % bar height gives the working/idle/offline
+                    segments more visibility — at h-1.5 the 3-segment
+                    proportion bar was readable but slim; at h-2 the
+                    segments parse cleanly even when one tier is
+                    < 10 % share. Geometry-safe: items-center flex
+                    centers the bar inside the chip's py-1 (4 px top +
+                    4 px bottom) — bar at 8 px stays comfortably
+                    inside the 10-px text-row height. R165 segment
+                    width transitions + R210 brightness hover + R83
+                    pin-mirror box-shadow on segments all preserved
+                    (segments inherit width from parent so the height
+                    bump propagates without segment-side edits).
+                    data-fleet-pressure-bar-height attr exposes the
+                    height token for tests. */}
+                <span className="inline-flex h-2 w-16 rounded-full overflow-hidden" style={{ background: 'rgb(75 85 99 / 0.25)' }} data-fleet-pressure-bar-height="h-2">
                   {seg(w, isLight ? '#059669' : '#22c55e', 'working', 'working')}
                   {seg(i, isLight ? '#0d9488' : '#2dd4bf', 'idle',    'idle')}
                   {seg(o, isLight ? '#94a3b8' : '#6b7280', 'offline', 'offline')}
@@ -2271,7 +2425,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="status"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              // R355: `group` lets the inner opacity-70 spans (prefix
+              // `filter:` + count `· N`) brighten to 100 % on pill hover.
+              // Sibling treatment on group + vendor pills below.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedStatus(null)}
               style={{
@@ -2285,12 +2442,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedStatus}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span>{pinnedStatus}<span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear ${pinnedStatus} filter`}
                 onClick={(e) => { e.stopPropagation(); setPinnedStatus(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2309,7 +2480,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="group"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              // R355 sibling — `group` parent + group-hover on inner spans.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedGroup(null)}
               style={{
@@ -2319,12 +2491,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedGroup}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span>{pinnedGroup}<span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear group filter ${pinnedGroup}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedGroup(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2359,7 +2545,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="vendor"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              // R355 sibling — `group` parent + group-hover on inner spans.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear vendor filter'}
               onClick={() => setPinnedVendor(null)}
               style={{
@@ -2369,12 +2556,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedVendor}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span>{pinnedVendor}<span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear vendor filter ${pinnedVendor}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedVendor(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2407,7 +2608,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={link.count}
               data-filter-match-aliases={`${link.from},${link.to}`}
               data-active-filter-edge-hot={isHot ? 'true' : 'false'}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={`${link.from} → ${link.to} (${link.count} msg${link.count === 1 ? '' : 's'}${isHot ? ', hot lane · ≥ 10' : ''}) — click to clear`}
               onClick={() => setPinnedEdgeKey(null)}
               style={{
@@ -2451,7 +2652,21 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 type="button"
                 aria-label={`Clear edge filter ${link.from} → ${link.to}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedEdgeKey(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2716,9 +2931,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        vendor letter chips ('A:N', 'O:N', '书:N',
                        '?:N'). They display vendor-distribution
                        data; same tier as the sibling data chips. */
-                    className="tabular-nums font-medium inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus"
+                    /* Round 401 / Loop: vendor letter chip closes the
+                       hover-lift gesture family at its last unaddressed
+                       interactive HTML surface. R397/R398/R399 lifted
+                       filter pin pills + chip-row chips (working /
+                       online / active-links); R400 lifted standalone
+                       chrome buttons (reset / fullscreen). The vendor
+                       letter chips (A:N / O:N / 书:N / ?:N) are
+                       sibling interactive chips in the same chip-row
+                       — clickable to toggle the vendor filter pin —
+                       but were not yet on the hover-lift family.
+                       R401 closes the gap with hover:-translate-y-px
+                       + transition-transform + transform-gpu added
+                       to the className. The inline transition list
+                       (box-shadow + background-color) keeps eaching
+                       independently — different property axes compose
+                       cleanly. Existing R354 glyph scale-1.1 (inner
+                       span) + R202 chip bg color-mix + R180 pin-mirror
+                       box-shadow + R354 glyph hover transform all
+                       preserved. data-vendor-letter-hover-lift attr
+                       surfaces the lift for tests. */
+                    className="tabular-nums font-medium inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu hover:-translate-y-px"
                     data-vendor-letter={v.initial}
                     data-vendor-letter-count={v.count}
+                    data-vendor-letter-hover-lift="true"
                     data-vendor-pinned={isPinned ? 'true' : 'false'}
                     data-vendor-hovered={hoveredVendor === v.initial ? 'true' : 'false'}
                     data-vendor-aliases={aliases.join(',')}
@@ -2762,7 +2998,64 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       }
                     }}
                   >
-                    <span style={{ color: v.color }}>{v.initial}</span>
+                    {/* Round 354 / Loop: vendor letter glyph scales
+                        1.0 → 1.1 on hover. R88 already dims OTHER
+                        vendors on hover via canvas-wide opacity
+                        masking; R202 added a chip-level bg tint
+                        (color-mix 12 % alpha) so the chip itself
+                        responds. R354 closes the trio with a glyph-
+                        level lift: the focused vendor LETTER actively
+                        rises (transform scale) rather than the chip
+                        merely changing colour. Three layers of positive
+                        feedback on the hovered vendor + canvas-wide
+                        negative feedback on the others — a clean
+                        figure/ground separation.
+
+                        display: inline-block is required for transform
+                        to apply (inline elements ignore transform).
+                        transformOrigin: 'center' so the glyph pivots
+                        around its centre instead of arcing from the
+                        baseline anchor. transition rides the existing
+                        Tailwind 4 transform/scale list (no new
+                        property — Tailwind already lists transform in
+                        the default transition-property set). 200ms
+                        matches the R202 chip bg-tint timing so the
+                        glyph lift and chip background ease in concert. */}
+                    {/* Round 369 / Loop: vendor letter glyph picks up
+                        fontWeight 600 (font-semibold). The glyph is the
+                        vendor identifier — the DATA the operator scans
+                        in this chip (A / O / 书 / C / G / ?). R333 set
+                        the count suffix `:N` to text-gray-400 + tabular-
+                        nums and (via parent inheritance) fw 500. Pre-
+                        R369 the LETTER also inherited fw 500 from the
+                        chip's font-medium — letter and count read at
+                        the same weight, contradicting the data-vs-label
+                        hierarchy the rest of the chip-row already speaks.
+                        R369 lifts the letter to fw 600 so the chip now
+                        reads as the same two-tier pattern R362 closed
+                        on the working / online / active-links chips:
+                          chip      digit/letter  fw 600  (data)
+                          chip      unit/count    fw 500  (label)
+                        Sibling treatment to R362 — extends the R333-R341
+                        chip-internal-hierarchy arc to the vendor-letter
+                        chip surface (9th surface family). R354 transform-
+                        scale-on-hover + R88 canvas-dim-others + R202
+                        chip bg color-mix all preserved on the same span.
+                        data-vendor-letter-glyph-font-weight attr exposes
+                        the value for tests. */}
+                    <span
+                      data-vendor-letter-glyph={v.initial}
+                      data-vendor-letter-glyph-hover={hoveredVendor === v.initial ? 'true' : 'false'}
+                      data-vendor-letter-glyph-font-weight="600"
+                      style={{
+                        color: v.color,
+                        display: 'inline-block',
+                        fontWeight: 600,
+                        transform: hoveredVendor === v.initial ? 'scale(1.1)' : 'scale(1)',
+                        transformOrigin: 'center',
+                        transition: 'transform 200ms ease-out',
+                      }}
+                    >{v.initial}</span>
                     {/* Round 333 / Loop: vendor count suffix `:{N}` joins
                         the R317 subordinate-text-lift family (gray-500 →
                         gray-400) plus picks up tabular-nums for digit
@@ -2864,11 +3157,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    (third chip in the row — matches working + online
                    chip treatment so all three digits in the chip row
                    stay width-stable across counter crossings). */
-                className={`tabular-nums font-medium hidden sm:inline px-2.5 py-1 rounded-md border anet-topo-chip-focus ${
+                /* Round 399 / Loop: active-links chip closes the 3-chip
+                   chip-row by extending R398's hover translateY(-1px)
+                   lift onto the third (rightmost) chip. The R398 family
+                   already covered working + online chips on the
+                   clickable variant; R399 adds the same gate (isInter-
+                   active = flowLinks.length > 0) so empty active-links
+                   stays planted at R206's opacity-50 receded paint.
+                   transition-transform + ease-out + transform-gpu join
+                   the inline transition list (different property axes
+                   compose cleanly: inline handles color/bg/border/
+                   opacity, className handles transform).
+                   Gesture-vocabulary table (post-R399 — now complete
+                   across the chip-row):
+                     working chip      -1 px  (R398)
+                     online chip       -1 px  (R398)
+                     active-links chip -1 px  (R399, this round)
+                     filter pin pills  -1 px  (R397)
+                     recent-signal row -1 px  (R143)
+                     legend row        -1 px  (R144)
+                   Every interactive chip in TopoGraph lifts on hover.
+                   data-chip-hover-lift attr exposes the lift surface
+                   state ('true' clickable, 'false' empty) for tests. */
+                className={`tabular-nums font-medium hidden sm:inline px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu ${
                   isInteractive
-                    ? 'bg-gray-500/10 text-gray-400 border-gray-500/20 hover:bg-cyan-500/10 hover:text-cyan-200 hover:border-cyan-500/30'
+                    ? 'bg-gray-500/10 text-gray-400 border-gray-500/20 hover:bg-cyan-500/10 hover:text-cyan-200 hover:border-cyan-500/30 hover:-translate-y-px'
                     : 'bg-gray-500/10 text-gray-400 border-gray-500/20'
                 }`}
+                data-chip-hover-lift={isInteractive ? 'true' : 'false'}
                 data-active-links-chip
                 data-active-links-flow-count={flowLinks.length}
                 data-active-links-clickable={isInteractive ? 'true' : 'false'}
@@ -2896,7 +3212,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     the 5th chip surface in the R333/R335/R336/R337
                     chip-internal-hierarchy arc. data-active-links-
                     chip-unit exposes the unit span for tests. */}
-                {flowLinks.length}<span className="opacity-70" data-active-links-chip-unit> active link{flowLinks.length === 1 ? '' : 's'}</span>
+                {/* R362 sibling — active-links chip digit gains font-semibold. */}
+                <span className="font-semibold" data-active-links-chip-digit>{flowLinks.length}</span><span className="opacity-70" data-active-links-chip-unit> active link{flowLinks.length === 1 ? '' : 's'}</span>
                 {rel ? (() => {
                   // Round 161 / Loop: extend R160's recency-pip
                   // vocabulary up one scope — from per-flow row to
@@ -2921,8 +3238,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const alpha = ageSec <= 30
                     ? 1
                     : ageSec <= 300
-                      ? 1 - ((ageSec - 30) / 270) * 0.75
-                      : 0.25;
+                      ? 1 - ((ageSec - 30) / 270) * 0.70 /* R358: floor 0.25 → 0.30 lift across 3 freshness scopes */
+                      : 0.30; /* R358: stale floor lifted 0.25 → 0.30 — 20% legibility bump while preserving fresh/stale ratio */
                   // Cyan dark / teal light to match palette legendAccent.
                   const dotColor = isLight
                     ? `rgba(13, 148, 136, ${alpha.toFixed(2)})`
@@ -2939,7 +3256,28 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // color: dotColor — the lift only affects the trailing
                   // literal "last {rel}" text.
                   return (
-                    <span className="text-gray-400">
+                    // Round 357 / Loop: active-links chip freshness
+                    // suffix wrapper picks up `tabular-nums` for digit
+                    // width-lock. Pre-R357 the literal "last {rel}"
+                    // text (e.g. "last 5s ago", "last 10s ago",
+                    // "last 1m ago") had natural-figure digits — the
+                    // freshness ticker updates every second, so the
+                    // 9→10 boundary on the seconds counter and the
+                    // 59→60s → 1m flip both jittered ~1-2 px of glyph
+                    // width which propagated through the chip-row's
+                    // inline-flex layout, nudging the freshness DOT
+                    // and the chip's left edge. Tabular-nums on the
+                    // wrapper applies to all descendant digits only
+                    // (letters render at natural widths) so the
+                    // ticker stays planted across every count cross.
+                    // Joins the R224-R232 info-density tabular-nums
+                    // sweep at the chip-row freshness scope. Pure
+                    // paint-level change, no geometry shift on rest.
+                    // The R342 text-gray-400 lift + R161 dot freshness
+                    // alpha ramp + R317 subordinate-text-lift family
+                    // all preserved. data-active-links-freshness-
+                    // wrapper attr exposes the wrapper for tests.
+                    <span className="text-gray-400 tabular-nums" data-active-links-freshness-wrapper>
                       <span
                         data-active-links-freshness-dot
                         data-active-links-freshness-alpha={alpha.toFixed(2)}
@@ -3603,6 +3941,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  active surfaces the activity state for test probes
                  (active spokes don't carry the bucket/dur attrs so
                  they need their own data anchor). */
+              // Round 382 / Loop: hub-spoke path picks up
+              // strokeLinecap='round'. Sibling polish to R378 flow-
+              // rail dashes + R380 group box dashes — three dashed-
+              // stroke surfaces now share 'round' linecap:
+              //   R378 flow-rail   '2 12'  -> soft 3-px pills
+              //   R380 group box   '6 6'   -> soft 7.5-px pills
+              //   R382 hub spoke   '6 14'  -> soft 7-px pills (this round)
+              // For idle spokes (dashed at sw=1), each 6-px dash gains
+              // 0.5-px round caps and reads as a soft pill instead of
+              // a sharp 6 x 1 rectangle. Active spokes (solid, no
+              // dasharray) have caps mostly hidden by the hub center +
+              // node radius. Geometry-safe; paint-only. R51 sentinel
+              // strokeWidth 1.5/3 untouched (idle=1, active=2). data-
+              // topo-hub-spoke-linecap attr exposes the value for tests.
+              // Round 391 / Loop: hub-spoke active opacity 0.7 → 0.8.
+              // Pre-R391 active spokes (the spoke connecting the hub
+              // to the currently-active alias — hovered or pinned)
+              // lifted opacity from rest 0.45 to active 0.7 — a clear
+              // step but slightly understated against the canvas
+              // chrome. R391 lifts active to 0.8 so the "this spoke
+              // connects to your active node" signal reads with
+              // matching weight to the R370 hub hover-ring opacity
+              // (0.7 → 0.8 cyber) — paired canvas signals now share
+              // the same active-state alpha (0.8) so when a user
+              // hovers a node, both the spoke and the hub-ring lift
+              // to identical opacity. Rest 0.45 invariant preserved.
+              // Theme-consistency / canvas-presence polish family
+              // (6th anchor):
+              //   R370 hub hover-ring opacity      0.7  → 0.8   cyber
+              //   R371 edge-badge rest opacity     0.82 → 0.85  cyber
+              //   R372 minimap offline-dot opacity 0.5  → 0.6
+              //   R386 hub-highlight idle opacity  0.9  → 0.95
+              //   R387 hover-detail panel opacity  0.94 → 0.97  cyber
+              //   R391 hub-spoke active opacity    0.7  → 0.8   (this round)
+              // Idle path (45% alpha + dashed flow animation) entirely
+              // untouched — R391 is an active-state-only lift.
+              // data-topo-hub-spoke-opacity attr exposes the resolved
+              // value for tests. R382 strokeLinecap='round' + R51
+              // sentinel-safe sw (1 idle / 2 active) preserved.
               return (
                 <path
                   key={`hub-${session.alias}`}
@@ -3611,11 +3988,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={isActiveSpoke ? pal.spokeStroke.active : pal.spokeStroke.idle}
                   strokeWidth={isActiveSpoke ? 2 : 1}
                   strokeDasharray={isActiveSpoke ? 'none' : '6 14'}
-                  opacity={isActiveSpoke ? 0.7 : 0.45}
+                  strokeLinecap="round"
+                  opacity={isActiveSpoke ? 0.8 : 0.45}
                   className={isActiveSpoke ? undefined : 'anet-topo-spoke-flow'}
                   data-topo-spoke-bucket={isActiveSpoke ? undefined : busy}
                   data-topo-spoke-dur={isActiveSpoke ? undefined : spokeDur}
                   data-topo-hub-spoke-active={isActiveSpoke ? 'true' : 'false'}
+                  data-topo-hub-spoke-opacity={isActiveSpoke ? 0.8 : 0.45}
+                  data-topo-hub-spoke-linecap="round"
                   style={{
                     transition: 'stroke 250ms ease-out, stroke-width 250ms ease-out, opacity 250ms ease-out',
                     ...(isActiveSpoke ? {} : {
@@ -3707,7 +4087,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={(isPinned || isHovered) ? pal.legendAccent : pal.ringStroke}
                   strokeWidth={isPinned ? 3 : isHovered ? 2 : 1.5}
                   strokeDasharray={(isPinned || isHovered) ? 'none' : '6 6'}
+                  /* Round 380 / Loop: cluster box stroke gets round
+                     linecap + round linejoin. Sibling SVG stroke-
+                     softening polish to R378 flow-rail linecap + R379
+                     minimap viewport linejoin — extends the family to
+                     the group cluster boundary box (grid layout only):
+                       R288 chrome icons         strokeLinecap='round'
+                       R378 flow-rail dashes     strokeLinecap='round'
+                       R380 group box dashes     strokeLinecap='round' (this round)
+                       R379 viewport rect        strokeLinejoin='round'
+                       R380 group box corners    strokeLinejoin='round' (this round)
+                     Linecap rounds the R85 '6 6' marching-ants dash
+                     pills at rest — each 6 px dash gains a ~0.75 px
+                     round cap (sw=1.5 idle), reading as soft pills
+                     instead of sharp 6 × 1.5 px rectangles. Linejoin
+                     rounds the 4 sharp 90° corners (any state — solid
+                     or dashed); at sw=1.5 the join arc is ~0.75 px,
+                     matching R379 viewport vocabulary. Geometry-safe:
+                     stroke-* properties only affect paint, not bbox.
+                     The R51 sentinel 1.5/3 strokeWidth values stay
+                     intact (the overlap probe is gated to g[data-
+                     node], so this cluster-internal rect is invisible
+                     to it anyway). data-group-box-linecap + -linejoin
+                     attrs expose the values for tests. */
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                   data-group-box-pinned={isPinned ? 'true' : 'false'}
+                  data-group-box-linecap="round"
+                  data-group-box-linejoin="round"
                   // R85: ambient "marching ants" drift on the perimeter
                   // when this group has at least one working member, and
                   // neither pin nor hover is active (those treatments
@@ -3907,12 +4314,33 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       lives at a fixed dx=6 offset from the name, so a
                       digit-width jitter at 9→10 used to shift the
                       whole count visibly. Tabular locks it. */}
+                  {/* Round 366 / Loop: group label member-count tspan
+                      fontWeight 400 → 500. Sibling polish to R363
+                      recent-row alias text fw 400 → 500 + R364 legend-
+                      row label fw 400 → 500 — closes the per-row 'count
+                      is fw 500 against label-tier fw 700' pattern at
+                      the group-label scope (grid layout cluster mark).
+                      Hierarchy snapshot post-R366 across all 3 row
+                      surfaces:
+                        recent  count(hot/cold)  fw 700/600  (R320)
+                        recent  alias            fw 500      (R363)
+                        legend  count            fw 600      (R309)
+                        legend  label            fw 500      (R364)
+                        group   name             fw 700      (legacy)
+                        group   count            fw 500      (R366, this round)
+                      Monospace family + R225 tabular-nums lock digit
+                      width, so the fw bump is paint-only — bbox
+                      unchanged + overlap-test invariants hold. R229
+                      fill-inherit from parent label (hover-deepen-own-
+                      hue family) preserved. data-group-label-count-
+                      font-weight attr exposes the value for tests. */}
                   <tspan
                     dx="6"
                     fontSize="11"
-                    fontWeight="400"
+                    fontWeight="500"
                     data-group-label-count={box.key}
                     data-group-label-count-value={box.count}
+                    data-group-label-count-font-weight="500"
                     style={{ fontVariantNumeric: 'tabular-nums' }}
                   >· {box.count}</tspan>
                   {/* Round 58 / Loop: status mix pip strip. Compact text-
@@ -4043,13 +4471,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // synchronised per-edge animation set.
             const stagger = (index * 0.37) % duration;
             // Round 10 / Loop: freshness fade. An edge that fired ≤30s ago
-            // stays at full intensity; over 5 minutes it decays to ~35%.
-            // Surfaces "what's happening now" vs background chatter without
-            // hiding old flow entirely (some context still useful). `now`
-            // captured at useMemo-recompute time (every 5s message refresh)
-            // — accuracy is within the poll interval, plenty.
+            // stays at full intensity; over 5 minutes it decays to a
+            // floor. Surfaces "what's happening now" vs background
+            // chatter without hiding old flow entirely (some context
+            // still useful). `now` captured at useMemo-recompute time
+            // (every 5s message refresh) — accuracy is within the poll
+            // interval, plenty.
+            //
+            // Round 406 / Loop: edge freshness fade floor 0.35 → 0.40.
+            // Stale-state legibility lift family (6th anchor) — pre-
+            // R406 edges older than 5 minutes faded to α=0.35 (a 65 %
+            // dim against full intensity). The decay rate is the same
+            // 1 - ageMs/300s curve; only the FLOOR shifts. Sibling
+            // treatment to:
+            //   R317 subordinate-text gray-500 → gray-400
+            //   R358 freshness ramp floor 0.25 → 0.30
+            //   R372 minimap offline-dot opacity 0.5 → 0.6
+            //   R404 hub-halo cyber trough 0.08 → 0.10
+            //   R405 hub-halo light trough 0.32 → 0.34
+            //   R406 edge freshness floor 0.35 → 0.40 (this round)
+            // Edges past 5min now sit at 40% intensity instead of 35%
+            // — they still recede against fresh edges but read
+            // legibly enough to convey "this conversation existed".
+            // ageMs threshold for the 5-minute decay unchanged; the
+            // decay curve shape (linear) unchanged. The visual delta
+            // is most pronounced on edges between 5-60 minutes old —
+            // where the floor was binding pre-R406.
             const ageMs = link.last_at ? Math.max(0, Date.now() - Date.parse(link.last_at)) : 0;
-            const fresh = Math.max(0.35, 1 - ageMs / (5 * 60 * 1000));
+            const fresh = Math.max(0.40, 1 - ageMs / (5 * 60 * 1000));
             // Round 16 arrow-tier binning — keep `topo-arrow` as the
             // medium tier id so the legend swatch picks it up unchanged.
             const arrowId = link.count <= 2 ? 'topo-arrow-s'
@@ -4201,20 +4650,56 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     online chips to splice in additional properties
                     beside Tailwind's). data-edge-flow-rail attr
                     surfaces the path for test introspection. */}
+                {/* Round 381 / Loop: edge visible flow path picks up
+                    strokeLinecap='round'. Sibling polish to R378
+                    flow-rail dashed linecap — both flow-element paths
+                    (visible primary + dashed secondary rail) now share
+                    'round' linecap vocabulary. The visible path runs
+                    source-node → dest-node as one continuous line, so
+                    the dest-end is covered by the markerEnd arrow and
+                    the source-end usually sits inside the source-node
+                    circle. At certain alignments (post-zoom, post-
+                    layout-switch transitions), the source-end may peek
+                    out by a fraction of a px past the node edge —
+                    round caps render that overshoot as a smooth half-
+                    disc instead of a sharp rectangle. Pure paint
+                    refinement, geometry-safe (bbox of the stroke
+                    unchanged at the join with the arrow marker).
+                    data-edge-visible-linecap attr exposes the value
+                    for tests. */}
                 <path
                   d={path}
                   fill="none"
                   stroke={pal.flowEdge}
                   strokeWidth={renderWidth}
+                  strokeLinecap="round"
                   opacity={Math.min(1, (isLight ? 0.22 : 0.28) * fresh * edgeOpacityMul)}
                   filter={isLight ? undefined : 'url(#topo-glow)'}
                   markerEnd={`url(#${arrowId})`}
                   data-edge-visible={link.key}
+                  data-edge-visible-linecap="round"
                   style={{
                     pointerEvents: 'none',
                     transition: 'opacity 300ms ease-out, stroke-width 300ms ease-out, stroke 300ms ease-out',
                   }}
                 />
+                {/* Round 378 / Loop: edge flow-path dashed-rail picks
+                    up strokeLinecap='round'. Pre-R378 the rail
+                    rendered '2 12' dashes as sharp 1×2 rectangles
+                    against the canvas backdrop; default 'butt' caps
+                    leave dash ends square. R378 rounds each cap so
+                    the dashes read as soft 3-px pills (1 px stroke +
+                    0.5 px round cap each end). The flow-rail is the
+                    secondary 'invisible-spine' line that gives the
+                    R57 spoke flow a directional rail to slide along
+                    — rounding the dashes softens its presence
+                    against the primary visible flow path (R245 has
+                    no strokeLinecap so it inherits 'butt' on a
+                    continuous line, irrelevant). Geometry-safe:
+                    round caps only widen the visible dash; the
+                    bbox of the path is unchanged so overlap-test
+                    invariants hold. data-edge-flow-rail-linecap
+                    attr exposes the value for tests. */}
                 <path
                   id={`flow-path-${index}`}
                   d={path}
@@ -4222,8 +4707,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={pal.flowPath}
                   strokeWidth="1"
                   strokeDasharray="2 12"
+                  strokeLinecap="round"
                   opacity={Math.min(1, (isLight ? 0.4 : 0.75) * fresh * edgeOpacityMul)}
                   data-edge-flow-rail={link.key}
+                  data-edge-flow-rail-linecap="round"
                   style={{ transition: 'opacity 300ms ease-out, stroke 300ms ease-out' }}
                 />
                 {!reducedMotion && (
@@ -4588,14 +5075,137 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           R251 closes the per-edge surface theme-toggle
                           smoothness — every theme-driven property on
                           every edge element now eases under cyber↔light. */}
+                      {/* Round 367 / Loop: edge midpoint badge rest
+                          stroke-width 1 → 1.25. Sibling visual-weight
+                          bump family (7th canvas anchor now):
+                            R287 minimap viewport stroke 1 → 1.5
+                            R295 legend swatch base radius 5.5 → 6
+                            R359 recent-row pip base radius 1.6 → 1.8
+                            R360 hub digit fontSize 11 → 12
+                            R361 edge-badge digit fontSize 10 → 11
+                            R365 hub-highlight base radius 5 → 5.5
+                            R367 edge-badge rest stroke 1 → 1.25 (this round)
+                          Cold edge badges gain ~25 % stroke presence
+                          (1.25/1.0 = 1.25). Stays clear of the R51
+                          overlap-test sentinel values (1.5 / 3 reserved
+                          for node strokes — the test selector is gated
+                          to g[data-node] ancestors so this edge-internal
+                          circle is invisible to that probe anyway, but
+                          1.25 is a safe non-sentinel value regardless).
+                          R188 transition list 'stroke-width 300ms ease-
+                          out' still smoothes the hot/pin flip — now
+                          1.25 → 2 instead of 1 → 2, same ease pace.
+                          data-edge-badge-stroke-width-rest exposes the
+                          new baseline for tests. */}
+                      {/* Round 371 / Loop: edge-badge cyber opacity 0.82
+                          → 0.85. Sibling theme-consistency polish to R370
+                          hub hover-ring 0.7 → 0.8. R251 designed this
+                          badge with opacity 0.82 (cyber) / 0.95 (light)
+                          — 13 % delta. Cyber-theme dark bg needs more
+                          alpha to read as 'present'; R371 narrows the
+                          gap to 10 %, bringing the badge closer to light
+                          theme's 0.95 floor. Light stays at 0.95
+                          (already in the legibility band). data-edge-
+                          badge-opacity attr exposes the resolved value.
+                          Theme-consistency polish family:
+                            R246/R247  panel transition family
+                            R251       edge badge fill/opacity baseline
+                            R370       hub hover-ring cyber 0.7 → 0.8
+                            R371       edge badge cyber 0.82 → 0.85 (this round)
+                          R164 r=9/10.5 hover-lift + R188/R251 transition
+                          list + R367 strokeWidth=1.25 cold rest preserved. */}
+                      {/* Round 394 / Loop: edge-badge gains a hover
+                          strokeWidth tier (1.5) between cold rest
+                          (R367 1.25) and pin/hot (2). Pre-R394 the
+                          badge lifted only its radius on hover (R164
+                          9 → 10.5); the stroke stayed at cold rest
+                          1.25 unless pin/hot kicked in, so a plain
+                          hover felt half-lifted — geometry expanded
+                          while the contour stayed thin. R394 adds
+                          strokeWidth=1.5 on isHoveredEdge so hover
+                          now lifts both r AND stroke in concert —
+                          same pattern R385 used for the hub hover-
+                          ring (1.5 → 1.75) where the ring's three
+                          hover axes (r grow / opacity fade-in /
+                          stroke thicken) all rise together.
+                          Three-tier stroke hierarchy now:
+                            cold rest          1.25  (R367)
+                            hovered            1.5   (R394 — this round)
+                            pinned / hot       2.0   (R188)
+                          R51 sentinel concern: strokeWidth=1.5 is
+                          one of the two sentinels reserved for node
+                          detection, but the R51 selector is gated
+                          to `g[data-node]` ancestors so this edge-
+                          internal circle is invisible to the probe
+                          (same lesson R177 hub hover-ring + R367
+                          cold rest documented). 300ms strokeWidth
+                          transition already in the style list eases
+                          the new tier naturally. data-edge-badge-
+                          stroke-width-hover attr exposes the hover
+                          value for tests. */}
+                      {/* Round 395 / Loop: edge-badge gains a third
+                          hover axis — opacity 0.85 (cyber) / 0.95
+                          (light) → 1.0 on isHoveredEdge. Pre-R395
+                          hovering thickened the stroke (R394 1.25 →
+                          1.5) and grew the radius (R164 9 → 10.5)
+                          but the badge's translucency stayed put at
+                          R371's rest alpha (cyber 0.85 / light 0.95).
+                          R395 lifts hover to a clean 1.0 — fully
+                          opaque — so the hovered badge reads as
+                          "in focus" against the dim siblings.
+                          Three-axis hover-lift parity now complete:
+                            hub hover-ring (R177/R370/R385):
+                              r 14 → 17, opacity 0 → 0.8 cyber, sw 1.5 → 1.75
+                            edge badge (R164/R394/R395):
+                              r 9 → 10.5, sw 1.25 → 1.5, opacity → 1.0
+                          200ms opacity transition (already in the
+                          style list) eases the new axis naturally.
+                          R371 rest opacity (0.85 cyber / 0.95 light)
+                          preserved as the resting alpha — R395
+                          adds an isHoveredEdge override on top.
+                          data-edge-badge-opacity-hover attr exposes
+                          the hover value for tests. */}
+                      {/* Round 396 / Loop: extend the R395 opacity → 1.0
+                          lift to the pinned state. Pre-R396 the badge
+                          shared `r=10.5` on both hover AND pin (R164
+                          unified-lift) but R395's opacity lift fired
+                          ONLY on isHoveredEdge — pinned badges stayed
+                          at R371 rest alpha (cyber 0.85 / light 0.95).
+                          That left pin (sticky selection) reading
+                          softer than hover (transient preview), even
+                          though pin is the stronger commitment.
+                          R396 unifies hover + pin at opacity=1.0
+                          so the same data-edge-badge-lifted='true'
+                          surface uniformly carries full alpha. Pin
+                          stroke (R188 sw=2 + pal.legendHeadline color)
+                          continues to differentiate pin from hover —
+                          the opacity track now closes the lift parity.
+                          The new gate (isHoveredEdge || isPinned)
+                          mirrors the existing R164 r-lift gate, so
+                          the badge has a single "active state"
+                          signature across r + opacity.
+                          200ms opacity transition (already in style
+                          list) eases pin/unpin naturally. R371 rest
+                          opacity preserved as the resting alpha.
+                          data-edge-badge-opacity-hover renamed
+                          semantically to -active (covers hover+pin)
+                          via the new -opacity-active attr; the
+                          legacy -opacity-hover attr kept for R395
+                          test compatibility. */}
                       <circle
                         cx={badgeX} cy={badgeY}
                         r={isHoveredEdge || isPinned ? 10.5 : 9}
                         fill={pal.legendBox.fill}
                         stroke={isPinned ? pal.legendHeadline : isHot ? hotStroke : pal.flowEdge}
-                        strokeWidth={isPinned ? 2 : isHot ? 2 : 1}
-                        opacity={isLight ? 0.95 : 0.82}
+                        strokeWidth={isPinned ? 2 : isHot ? 2 : isHoveredEdge ? 1.5 : 1.25}
+                        opacity={(isHoveredEdge || isPinned) ? 1 : (isLight ? 0.95 : 0.85)}
                         data-edge-badge-lifted={(isHoveredEdge || isPinned) ? 'true' : 'false'}
+                        data-edge-badge-stroke-width-rest="1.25"
+                        data-edge-badge-stroke-width-hover="1.5"
+                        data-edge-badge-opacity={(isHoveredEdge || isPinned) ? 1 : (isLight ? 0.95 : 0.85)}
+                        data-edge-badge-opacity-rest={isLight ? 0.95 : 0.85}
+                        data-edge-badge-opacity-hover="1"
+                        data-edge-badge-opacity-active="1"
                         style={{ transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out' }}
                       />
                       {/* Round 224 / Loop: edge badge text gains the 4th
@@ -4634,11 +5244,39 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         x={badgeX} y={badgeY + 3}
                         textAnchor="middle"
                         fill={pal.legendHeadline}
-                        fontSize="10"
+                        /* Round 361 / Loop: edge midpoint badge text
+                           fontSize 10 → 11. Sibling visual-weight bump
+                           to R360 hub digit 11 → 12. The badge digit
+                           is the per-edge equivalent of the hub digit
+                           — a high-information scalar (link.count) at
+                           a stable canvas position. Pre-R361 fontSize=
+                           10 + R220 letter-spacing 0.4 + R224 tabular-
+                           nums made the digit READABLE but small
+                           against the r=9 / 18-px badge envelope;
+                           fontSize=11 nudges the glyph ~10 % bigger
+                           (bbox ~7×10 px from ~6×9 px) so the count
+                           reads more cleanly at glance — still well
+                           inside the r=9 idle circle and the r=10.5
+                           hover/pin lift (R164). y=badgeY+3 empirical
+                           vertical centring kept (1px drift at the
+                           bumped size is below the noise floor in
+                           the on-curve flow path).
+                           Visual-weight bump family:
+                             R287 minimap viewport stroke 1 → 1.5
+                             R295 legend swatch base radius 5.5 → 6
+                             R359 recent-row pip base radius 1.6 → 1.8
+                             R360 hub digit fontSize 11 → 12
+                             R361 edge-badge digit fontSize 10 → 11 (this round)
+                           data-edge-badge-text-font-size attr exposes
+                           the value for tests. R220 pin/hot letter-
+                           spacing tween + R224 tabular-nums + R188
+                           stroke-width pin/hot transitions all preserved. */
+                        fontSize="11"
                         fontFamily="monospace"
                         fontWeight="700"
                         data-edge-badge-text={link.key}
                         data-edge-badge-text-pin={(isPinned || isHot) ? 'true' : 'false'}
+                        data-edge-badge-text-font-size="11"
                         style={{
                           pointerEvents: 'none',
                           fontVariantNumeric: 'tabular-nums',
@@ -4754,19 +5392,68 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          : workingCount <= 2 ? 1
                          : workingCount <= 5 ? 2
                          : 3;
+              // Round 404 / Loop: hub-halo cyber trough opacity 0.08 →
+              // 0.10. Pre-R404 the breath's low-point sat at α=0.08
+              // cyber (per R84 family tuning) — the halo nearly faded
+              // out at trough on the dark canvas. R404 lifts cyber
+              // trough to 0.10. Per-bucket peak amplitudes [0.16/0.20/
+              // 0.26/0.32] stay exactly tuned.
+              //
+              // Round 405 / Loop: hub-halo LIGHT trough 0.32 → 0.34 —
+              // symmetric +0.02 lift to mirror R404's cyber treatment
+              // across both themes. Pre-R405 only cyber got the lift
+              // (R404 docstring noted "light already at the strong
+              // end" as deliberate); but the cyber/light delta in
+              // R404 was an inconsistency in the family pattern.
+              // R405 closes the symmetry — both themes get +0.02
+              // baseline lift, so the breath low-point reads with
+              // matching confidence regardless of theme. Light peak
+              // array [0.52/0.58/0.65/0.72] stays tuned.
+              //
+              // Stale-state legibility lift family (5 anchors now):
+              //   R317 subordinate-text gray-500 → gray-400
+              //   R358 freshness floor 0.25 → 0.30
+              //   R372 minimap offline-dot opacity 0.5 → 0.6
+              //   R404 hub-halo cyber trough 0.08 → 0.10
+              //   R405 hub-halo light trough 0.32 → 0.34  (this round)
+              //
+              // R84 per-bucket peak/dur + R245 ease-in-out spline
+              // keySplines all preserved. Test fixture probes the
+              // SMIL <animate> values via data-topo-hub-halo-trough
+              // attr (now exposes both light + cyber resolved values).
               const peakLight   = [0.52, 0.58, 0.65, 0.72][busy];
               const peakDark    = [0.16, 0.20, 0.26, 0.32][busy];
-              const troughLight = 0.32;
-              const troughDark  = 0.08;
+              const troughLight = 0.34;
+              const troughDark  = 0.10;
               const dur         = [4.0, 3.2, 2.7, 2.4][busy];
               const valuesLight = `${troughLight};${peakLight};${troughLight}`;
               const valuesDark  = `${troughDark};${peakDark};${troughDark}`;
+              // Round 408 / Loop: hub-halo radius 18 → 20. The
+              // grounding halo (the breathing outer circle around
+              // the hub center) is the canvas's signature breath
+              // element — R84 family. R408 bumps r=18 → 20 so the
+              // breath extends slightly further while keeping 4px
+              // clearance before the spoke origin (still room for
+              // spoke start anchors). Visual presence on the
+              // canvas focal point lifts ~23% area (π·20²/π·18²
+              // = 1.23) without changing the per-bucket opacity
+              // envelope or breath rhythm. Visual-weight bump
+              // family 13th anchor — pairs with R404/R405 trough
+              // lifts so the halo now breathes both with more
+              // visible amplitude AND more visual footprint.
+              // R84 per-bucket peak/dur invariants + R244 calc-
+              // Mode='spline' + R245 ease-in-out keySplines all
+              // preserved. data-topo-hub-halo-radius attr exposes
+              // value for tests.
               return (
                 <circle
-                  cx={cx} cy={cy} r="18"
+                  cx={cx} cy={cy} r="20"
                   fill={isLight ? '#d1fae5' : '#10b981'}
                   opacity={isLight ? 0.42 : 0.12}
                   data-hub-busyness={busy}
+                  data-topo-hub-halo-radius="20"
+                  data-topo-hub-halo-trough={isLight ? troughLight : troughDark}
+                  data-topo-hub-halo-peak={isLight ? peakLight : peakDark}
                   /* Round 253 / Loop: hub grounding halo fill transition
                      for theme toggle. Pre-R253 the base fill (cyber
                      #10b981 ↔ light #d1fae5) snapped while R244's SMIL
@@ -4865,11 +5552,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 textAnchor="middle"
                 dy="0.36em"
                 fill={isLight ? '#d1fae5' : '#ecfdf5'}
-                fontSize="11"
+                /* Round 360 / Loop: hub working-count digit fontSize 11
+                   → 12. The hub is the canvas's focal point — its digit
+                   is the most-read scalar on the whole topology. R130
+                   sized it at 11 (well inside the r=10 / 20-px core);
+                   R360 nudges it to 12 (~13 px wide × 12 px tall, still
+                   well inside the 20-px diameter) for ~9 % more presence.
+                   Sibling visual-weight bump family:
+                     R287 minimap viewport stroke 1 → 1.5
+                     R295 legend swatch base radius 5.5 → 6
+                     R359 recent-row pip radius 1.6 → 1.8
+                     R360 hub digit fontSize 11 → 12  (this round)
+                   The R209 scale-1.08-on-hub-hover, R225 tabular-nums,
+                   R253 fill transition, R213 always-mount opacity gate
+                   all preserved. data-topo-hub-working-count-font-size
+                   attr exposes the value for tests. */
+                fontSize="12"
                 fontFamily="monospace"
                 fontWeight="700"
                 opacity={workingCount > 0 ? 1 : 0}
                 data-topo-hub-working-count={workingCount}
+                data-topo-hub-working-count-font-size="12"
                 data-topo-hub-working-count-hovered={hoveredHub ? 'true' : 'false'}
                 data-topo-hub-working-count-visible={workingCount > 0 ? 'true' : 'false'}
                 // Round 209 / Loop: hub workingCount digit scales 1.0 →
@@ -4910,12 +5613,53 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 {workingCount}
               </text>
             {/* decorative highlight (visible when workingCount === 0) */}
+            {/* Round 365 / Loop: hub-center 'lit-lamp' decorative highlight
+                circle r 5 → 5.5. Sibling visual-weight bump family —
+                each round lifts one canvas anchor's geometric presence
+                without disturbing its bbox envelope:
+                  R287 minimap viewport stroke 1 → 1.5
+                  R295 legend swatch base radius 5.5 → 6
+                  R359 recent-row pip base radius 1.6 → 1.8
+                  R360 hub digit fontSize 11 → 12
+                  R361 edge-badge digit fontSize 10 → 11
+                  R365 hub-highlight base radius 5 → 5.5  (this round)
+                The highlight only renders when workingCount === 0
+                (decorative 'lamp lit but idle' state per R130 + R213
+                always-mount opacity-gate). At idle, the 0.5-px radius
+                bump (21 % area, π*5.5² / π*5² = 1.21) lifts the lamp's
+                presence — still well inside the r=10 hub-core (R130).
+                opacity=0 when working preserved so the hub-digit's R130
+                takeover stays seamless. R213 always-mount opacity-gate
+                + 300ms opacity transition + pointerEvents:none all
+                preserved. data-topo-hub-highlight-radius attr exposes
+                the value for tests. */}
+            {/* Round 386 / Loop: hub-highlight idle opacity 0.9 → 0.95.
+                When workingCount===0 the highlight paints as the visible
+                idle "lamp lit but no work" core (R130 takeover gate).
+                Pre-R386 idle opacity was 0.9 — a ~6 % fade against full
+                paint that read as slightly-dimmed-ghost on the focal
+                point. R386 lifts to 0.95 (idle alpha gap halved 0.10
+                → 0.05) so the canvas anchor reads more confidently
+                as a present-but-idle state rather than a faded ghost.
+                Theme-consistency / canvas-presence polish family (4th
+                anchor):
+                  R370 hub hover-ring opacity 0.7 → 0.8 cyber
+                  R371 edge-badge rest opacity 0.82 → 0.85 cyber
+                  R372 minimap offline-dot opacity 0.5 → 0.6
+                  R386 hub-highlight idle opacity 0.9 → 0.95 (this round)
+                opacity=0 when working preserved so the hub-digit's
+                R130 takeover stays seamless. 300ms opacity transition
+                + R213 always-mount opacity-gate + pointerEvents:none
+                + R365 r=5.5 all preserved. data-topo-hub-highlight-
+                opacity attr exposes the resolved value for tests. */}
             <circle
-              cx={cx} cy={cy} r="5"
+              cx={cx} cy={cy} r="5.5"
               fill="#d1fae5"
-              opacity={workingCount > 0 ? 0 : 0.9}
+              opacity={workingCount > 0 ? 0 : 0.95}
               data-topo-hub-highlight
               data-topo-hub-highlight-visible={workingCount > 0 ? 'false' : 'true'}
+              data-topo-hub-highlight-radius="5.5"
+              data-topo-hub-highlight-opacity={workingCount > 0 ? 0 : 0.95}
               style={{
                 pointerEvents: 'none',
                 transition: 'opacity 300ms ease-out',
@@ -4946,15 +5690,46 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 R142 group boxes, R143/R144 rows, R164 edge badges,
                 R177 hub ring). prefers-reduced-motion respected via
                 R29 globals.css blanket. */}
+            {/* Round 385 / Loop: hub hover-ring strokeWidth 1.5 → 1.75.
+                Sibling visual-weight bump (11th anchor) to R367 edge-
+                badge rest stroke 1 → 1.25. The ring is only visible
+                during hub hover (opacity=0 rest, R177 + R370 control
+                the hover-state alpha) so the change manifests purely
+                as a thicker hover-state ring on the canvas focal
+                point. R177 r 14 → 17 grow + R370 opacity 0 → 0.8
+                already lift the hover cue; R385 adds stroke weight
+                as the third lift axis. Stays clear of R51 overlap-
+                test sentinel value 3 (1.75 is non-sentinel); the
+                R51 selector is gated to g[data-node] ancestors so
+                this hub-internal circle is invisible to the probe
+                regardless. R253 stroke transition + pointerEvents:
+                none preserved. data-topo-hub-hover-ring-stroke-width
+                attr exposes the value for tests. */}
             <circle
               cx={cx} cy={cy}
               r={hoveredHub ? 17 : 14}
               fill="none"
               stroke={isLight ? '#059669' : '#10b981'}
-              strokeWidth="1.5"
-              opacity={hoveredHub ? (isLight ? 0.85 : 0.7) : 0}
+              strokeWidth="1.75"
+              /* Round 370 / Loop: hub hover-ring cyber opacity 0.7 →
+                 0.8. R177 designed the hub hover-ring at opacity-0 →
+                 0.85 (light) / 0 → 0.7 (cyber). The 15 % gap between
+                 the two themes meant cyber-theme operators got a
+                 noticeably softer hover cue than light-theme users
+                 against backgrounds that should equalise (dark bg
+                 needs more luminance to read as 'on'). R370 bumps
+                 cyber 0.7 → 0.8, narrowing the theme gap to 5 % —
+                 sibling theme-consistency polish to R251 edge badge
+                 fill/opacity (cyber 0.82 / light 0.95) and R246/R247
+                 panel transition families. Light theme 0.85 stays
+                 as is (already in the legibility band). data-topo-
+                 hub-hover-ring-opacity attr exposes the value for
+                 tests. */
+              opacity={hoveredHub ? (isLight ? 0.85 : 0.8) : 0}
               data-topo-hub-hover-ring
               data-topo-hub-hover-ring-radius={hoveredHub ? 17 : 14}
+              data-topo-hub-hover-ring-stroke-width="1.75"
+              data-topo-hub-hover-ring-opacity={hoveredHub ? (isLight ? 0.85 : 0.8) : 0}
               /* Round 253 / Loop: hub hover ring also gets stroke
                  transition for theme toggle (cyber #10b981 ↔ light
                  #059669). The opacity + r transitions stay for hover
@@ -5383,14 +6158,49 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         keyTimes="0;0.5;1"
                         keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
                       />
+                      {/* Round 409 / Loop: active-node pulse peak
+                          opacity lift — cyber 0.18 → 0.20 / light
+                          0.12 → 0.14. The R243 pulse is the per-
+                          node "this alias has recent flow" breath;
+                          its peak amplitude was tuned in R243 but
+                          sat at 0.18 cyber / 0.12 light — visible
+                          but understated against the surrounding
+                          status halos (R407 lifted offline halos
+                          0.25→0.30 cyber; online halos sit at 0.65
+                          cyber). R409 lifts peak +0.02 on both
+                          themes so the active-state breath reads
+                          more confidently at its high-point while
+                          the trough (0.04 cyber / 0.02 light)
+                          stays put — breath amplitude widens
+                          slightly (cyber 0.14 → 0.16; light 0.10
+                          → 0.12) without changing rhythm or dur.
+                          Theme-consistency / canvas-presence family
+                          (9 anchors now):
+                            R370 hub hover-ring         0.7  → 0.8   cyber
+                            R371 edge-badge rest        0.82 → 0.85  cyber
+                            R372 minimap offline-dot    0.5  → 0.6
+                            R386 hub-highlight idle     0.9  → 0.95
+                            R387 hover-detail panel     0.94 → 0.97  cyber
+                            R391 hub-spoke active       0.7  → 0.8
+                            R392 minimap online-dot     0.9  → 0.95
+                            R403 click-ripple start     0.7  → 0.8
+                            R409 active-node pulse peak (this round)
+                              cyber 0.18 → 0.20
+                              light 0.12 → 0.14
+                          R243 always-mount opacity-gate + R243
+                          ease-in-out keySplines + r animation
+                          (radius+8 ↔ radius+22) preserved.
+                          data-node-pulse-peak attr exposes the
+                          resolved per-theme peak for tests. */}
                       <animate
                         attributeName="opacity"
-                        values={isLight ? '0.12;0.02;0.12' : '0.18;0.04;0.18'}
+                        values={isLight ? '0.14;0.02;0.14' : '0.20;0.04;0.20'}
                         dur="2.4s"
                         repeatCount="indefinite"
                         calcMode="spline"
                         keyTimes="0;0.5;1"
                         keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
+                        data-node-pulse-peak={isLight ? '0.14' : '0.20'}
                       />
                     </circle>
                   </g>
@@ -5435,12 +6245,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     parent stays for status flips. data-node-halo-
                     breath-offset surfaces the chosen offset for
                     test introspection. */}
+                {/* Round 407 / Loop: offline node halo opacity lift —
+                    cyber 0.25 → 0.30 and light 0.4 → 0.45. Pre-R407
+                    offline node halos faded to α=0.25 cyber (75 %
+                    dim) / α=0.4 light. On the dark canvas the 0.25
+                    halo read as "nearly gone" — exactly the
+                    legibility floor R404/R405 just lifted on the
+                    hub-halo and R372 lifted on minimap offline dots.
+                    R407 closes the same family at the per-node halo
+                    surface: +0.05 lift on both themes so offline
+                    anchors stay legibly present without crossing into
+                    "could be online" territory (online cyber 0.65 /
+                    light 0.85 unchanged — the 0.30/0.65 cyber ratio
+                    still gives 2.17× contrast for online/offline).
+                    Stale-state legibility lift family (7 anchors now):
+                      R317 subordinate-text gray-500 → gray-400
+                      R358 freshness floor 0.25 → 0.30
+                      R372 minimap offline-dot 0.5 → 0.6
+                      R404 hub-halo cyber trough 0.08 → 0.10
+                      R405 hub-halo light trough 0.32 → 0.34
+                      R406 edge freshness floor 0.35 → 0.40
+                      R407 node halo offline opacity (this round)
+                        cyber 0.25 → 0.30
+                        light 0.4  → 0.45
+                    R278 retired-breath gate + R12 status.halo color
+                    + R226 phase stagger code-path preserved (the
+                    breath stays disabled per Vincent's R278 ask;
+                    only the BASE opacity floor shifts here). transi-
+                    tion list ('fill,opacity' 300ms ease-out) unchanged.
+                    data-node-halo-offline-opacity attr exposes the
+                    resolved value for tests. */}
                 <circle
                   cx={pos.x}
                   cy={pos.y}
                   r={radius + 8}
                   fill={status.halo}
-                  opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.4 : 0.25)}
+                  opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.45 : 0.30)}
+                  data-node-halo-offline-opacity={isOnline ? undefined : (isLight ? 0.45 : 0.30)}
                   className="transition-[fill,opacity] duration-300 ease-out"
                   data-node-halo-breath={!reducedMotion && session.status === 'working' ? 'on' : 'off'}
                   data-node-halo-breath-offset={
@@ -6071,26 +6912,122 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const detailY = pos.y - detailH / 2;
                   return (
                     <g transform={`translate(${detailX}, ${detailY})`} data-topo-hover-detail={session.alias} style={{ pointerEvents: 'none' }}>
+                      {/* Round 387 / Loop: hover-detail panel cyber backdrop
+                          opacity 0.94 → 0.97. The hover-detail card is
+                          ALWAYS rendered in active-hover context (it IS
+                          the hover product), so it should carry the
+                          same backdrop weight as the R348 recent-signal /
+                          legend panel HOVER state (which lifts 0.92 →
+                          0.97 cyber). Pre-R387 the card sat at 0.94
+                          cyber, leaving a 0.03 alpha gap against the
+                          R348 panel-hover state — small but visible
+                          when the hover-detail floats next to a hovered
+                          recent-signal panel. R387 unifies them at 0.97
+                          so all active-hover panels paint with the same
+                          confident backdrop opacity in cyber. Light
+                          stays at 0.98 (already at the strong end —
+                          R348 light also stays at 0.97/0.98 max).
+                          Theme-consistency / canvas-presence polish
+                          family (5th anchor):
+                            R370 hub hover-ring opacity      0.7  → 0.8   cyber
+                            R371 edge-badge rest opacity     0.82 → 0.85  cyber
+                            R372 minimap offline-dot opacity 0.5  → 0.6
+                            R386 hub-highlight idle opacity  0.9  → 0.95
+                            R387 hover-detail panel opacity  0.94 → 0.97  cyber  (this round)
+                          data-topo-hover-detail-opacity attr exposes
+                          the resolved value for tests. R348 drop-shadow
+                          + rx=8 + stroke=pal.legendAccent + fill=pal.
+                          labelBox.fill all preserved. */}
+                      {/* Round 390 / Loop: hover-detail card rx 8 → 10.
+                          Corner-radius cascade family — the hover-detail
+                          card is a panel-tier surface (192×88 floating
+                          info card with drop-shadow + stroke), so its
+                          corner radius should match the R331 panel tier
+                          (rx=10) used by the recent-signal and legend
+                          panels. Pre-R390 it shared rx=8 with the R332
+                          minimap and R375/R376 segmented-control tier
+                          (Layout-toggle, nodeSize, zoom wrappers),
+                          which is the "compact chrome control" tier —
+                          a tier mismatch for a content-bearing panel.
+                          Corner-radius cascade (6 anchors now):
+                            R330 canvas             rx 12  (root)
+                            R331 panels             rx 10  (recent-signal, legend)
+                            R332 minimap           rx 8   (compact chrome)
+                            R375 Layout-toggle     rx 8   (segmented control)
+                            R376 nodeSize/zoom     rx 8   (segmented control)
+                            R390 hover-detail      rx 10  (panel — this round)
+                          Pure paint change; no layout shift (rx grows
+                          the corner curve INWARD without changing the
+                          card's outer bbox). data-topo-hover-detail-
+                          rx attr exposes the resolved value for tests.
+                          R348 drop-shadow + stroke + R387 opacity all
+                          preserved. */}
                       <rect
-                        x="0" y="0" width={detailW} height={detailH} rx="8"
+                        x="0" y="0" width={detailW} height={detailH} rx="10"
                         fill={pal.labelBox.fill}
                         stroke={pal.legendAccent}
-                        opacity={isLight ? 0.98 : 0.94}
+                        opacity={isLight ? 0.98 : 0.97}
+                        data-topo-hover-detail-opacity={isLight ? 0.98 : 0.97}
+                        data-topo-hover-detail-rx="10"
                         style={{ filter: isLight ? 'drop-shadow(0 4px 12px rgba(15,23,42,0.16))' : 'drop-shadow(0 4px 12px rgba(0,0,0,0.6))' }}
                       />
                       <text x="10" y="16" fontSize="9" fontFamily="monospace" fill={pal.legendAccent} fontWeight="700">
                         {v.id !== 'unknown' ? v.label : '—'}
                       </text>
-                      <text x="10" y="32" fontSize="10" fontFamily="monospace" fill={pal.legendHeadline}>
+                      {/* Round 389 / Loop: hover-detail model line (y=32)
+                          fontWeight 400 → 600. R388 lifted body lines
+                          (runtime/host/task at fontSize=9) to fw=500;
+                          R389 closes the typography hierarchy by giving
+                          the model name (the dominant subhead text in
+                          the card) its own weight tier. Three-tier
+                          ladder now reads cleanly:
+                            vendor   fontSize=9  fw=700  (label badge)
+                            model    fontSize=10 fw=600  (subhead — this round)
+                            body 3×  fontSize=9  fw=500  (R388)
+                          One tier step per dimension (size + weight)
+                          between adjacent levels — classic editorial
+                          hierarchy idiom adapted to a 192×88 SVG card.
+                          Sibling to the chip-internal-hierarchy arc
+                          (R333-R341/R362/R369) which uses fw=600/500
+                          for digit/unit pairs; R389 applies the same
+                          fw=600 to a content-bearing identity line.
+                          data-topo-hover-detail-model-fw attr exposes
+                          the resolved value for tests. pal.legendHeadline
+                          fill preserved (R389 doesn't touch color). */}
+                      <text x="10" y="32" fontSize="10" fontFamily="monospace" fontWeight="600" fill={pal.legendHeadline} data-topo-hover-detail-model-fw="600">
                         {session.model || 'model · pending'}
                       </text>
-                      <text x="10" y="48" fontSize="9" fontFamily="monospace" fill={pal.legendText}>
+                      {/* Round 388 / Loop: hover-detail body lines (the
+                          three fontSize=9 lines: runtime, host, task)
+                          gain fontWeight=500. Small-text fw lift family
+                          (6th anchor) — fontSize 9-10 px text reads
+                          consistently bolder at fw=500 than at the
+                          default 400 weight at small sizes, especially
+                          on the cyber-theme backdrop where stroke-
+                          rendering is the limiting factor.
+                          Sibling lifts in this family:
+                            R363 recent-row alias text         400 → 500
+                            R364 legend-row label              400 → 500
+                            R366 group-label count tspan       400 → 500
+                            R368 +N more flows footer          400 → 500
+                            R373 pressure-bar kicker (font-medium)
+                            R388 hover-detail body lines       400 → 500 (this round)
+                          Tier structure preserved:
+                            y=16 vendor (fw=700, headline)
+                            y=32 model  (fontSize=10, subhead by size)
+                            y=48 runtime / y=64 host / y=80 task (body, now fw=500)
+                          The y=80 task line keeps opacity=0.7 so its
+                          caption-tier identity stays distinct from the
+                          y=48 / y=64 body lines despite shared fw.
+                          data-topo-hover-detail-body-fw attr exposes
+                          the resolved value for tests. */}
+                      <text x="10" y="48" fontSize="9" fontFamily="monospace" fontWeight="500" fill={pal.legendText} data-topo-hover-detail-body-fw="500">
                         {rt ? rt.label : 'runtime · pending'}
                       </text>
-                      <text x="10" y="64" fontSize="9" fontFamily="monospace" fill={pal.legendText}>
+                      <text x="10" y="64" fontSize="9" fontFamily="monospace" fontWeight="500" fill={pal.legendText} data-topo-hover-detail-body-fw="500">
                         host · {session.server || 'unknown'}
                       </text>
-                      <text x="10" y="80" fontSize="9" fontFamily="monospace" fill={pal.legendText} opacity="0.7">
+                      <text x="10" y="80" fontSize="9" fontFamily="monospace" fontWeight="500" fill={pal.legendText} opacity="0.7" data-topo-hover-detail-body-fw="500">
                         {session.task ? truncate(session.task, 28) : 'no recent task'}
                       </text>
                     </g>
@@ -6154,14 +7091,41 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 keySplines="0.25 0.1 0.25 1"
                 fill="freeze"
               />
+              {/* Round 403 / Loop: click-ripple SMIL initial opacity
+                  0.7 → 0.8. Pre-R403 the ripple's opacity animation
+                  faded from 0.7 to 0 over 500ms, providing a clean
+                  click-feedback pulse. Theme-consistency / canvas-
+                  presence polish family (R370 hub hover-ring +
+                  R391 hub-spoke active) already lifted paired
+                  hover-state alphas from 0.7 → 0.8. R403 brings
+                  click-feedback into that same alpha — three canvas
+                  state-feedback indicators (hover-ring, active spoke,
+                  click ripple) now share a uniform 0.8 start alpha
+                  so the visual "I responded" signal carries the
+                  same weight regardless of which state fired it.
+                  Pre-R403 invariants preserved: 500ms duration,
+                  R227 calcMode='spline' + ease-out keySplines
+                  (0.25 0.1 0.25 1), fill='freeze', concurrent r
+                  animation. Theme-consistency family (8 anchors):
+                    R370 hub hover-ring        0.7  → 0.8
+                    R371 edge-badge rest       0.82 → 0.85 cyber
+                    R372 minimap offline-dot   0.5  → 0.6
+                    R386 hub-highlight idle    0.9  → 0.95
+                    R387 hover-detail panel    0.94 → 0.97 cyber
+                    R391 hub-spoke active      0.7  → 0.8
+                    R392 minimap online-dot    0.9  → 0.95
+                    R403 click-ripple start    0.7  → 0.8  (this round)
+                  data-click-ripple-start-opacity attr exposes the
+                  resolved value for tests. */}
               <animate
                 attributeName="opacity"
-                values="0.7;0"
+                values="0.8;0"
                 dur="0.5s"
                 calcMode="spline"
                 keyTimes="0;1"
                 keySplines="0.25 0.1 0.25 1"
                 fill="freeze"
+                data-click-ripple-start-opacity="0.8"
               />
             </circle>
           )}
@@ -6236,7 +7200,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               x="0" y="0" width="230" height="88" rx="10"
               fill={pal.legendBox.fill}
               stroke={pal.legendBox.stroke}
-              opacity={isLight ? 0.97 : 0.92}
+              // Round 348 / Loop: recent-signal panel rect opacity hover-
+              // state bump — joins the panel-hover cue stack (R135 drop-
+              // shadow boost + R345 title letter-spacing tween 0.3 → 0.4
+              // + R266 fill theme-flip). Cyber 0.92 → 0.97, light 0.97 →
+              // 1.0 on hoveredPanel === 'recent'. The panel "solidifies"
+              // on hover — pure paint-level change, geometry-safe (bbox
+              // unchanged so topo-overlap-test invariants hold). The
+              // R247 transition list already includes `opacity 200ms
+              // ease-out` so the value tween is automatic. Sibling
+              // change at legend panel rect below (~line 7222).
+              opacity={hoveredPanel === 'recent' ? (isLight ? 1 : 0.97) : (isLight ? 0.97 : 0.92)}
               style={{
                 /* R135: drop-shadow intensifies on panel hover. Base
                    shadow (2px / 6px blur) signals card elevation
@@ -6359,8 +7333,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               const alpha = ageSec <= 30
                 ? 1
                 : ageSec <= 300
-                  ? 1 - ((ageSec - 30) / 270) * 0.75
-                  : 0.25;
+                  ? 1 - ((ageSec - 30) / 270) * 0.70 /* R358: floor 0.25 → 0.30 lift across 3 freshness scopes */
+                  : 0.30; /* R358: stale floor lifted 0.25 → 0.30 — 20% legibility bump while preserving fresh/stale ratio */
               // Dark cyan-400 / light teal-600 with alpha — same
               // palette as R161's chip bullet so the two scopes
               // visually align even side-by-side.
@@ -6373,6 +7347,21 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   textAnchor="end"
                   fontSize="10"
                   fontFamily="monospace"
+                  // Round 349 / Loop: editorial letter-spacing 0.2 on the
+                  // recent-signal panel header count. Sits one tier below
+                  // the R301 panel title letterSpacing="0.3" so the panel
+                  // header reads as a 2-step hierarchy (title 0.3 / count
+                  // 0.2). Sibling change on the legend panel count below
+                  // closes the panel-pair editorial symmetry. Joins the
+                  // R285 / R289 / R301 / R302 / R304 / R325 editorial-
+                  // letterspacing tier at the panel-summary scope. The
+                  // R162 freshness fill, R225 tabular-nums, R311 fw=600,
+                  // R336 unit-tspan opacity-0.7 split all preserved —
+                  // the tier propagates to all descendant tspans via
+                  // SVG inheritance. data-recent-panel-count-letter-
+                  // spacing exposes the value for tests.
+                  letterSpacing="0.2"
+                  data-recent-panel-count-letter-spacing="0.2"
                 >
                   {/* Round 225 / Loop: tabular-nums on the panel-header
                       flow-count tspan. The "{N} flows" string lives in
@@ -6841,17 +7830,58 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       const alpha = ageSec <= 30
                         ? 1
                         : ageSec <= 300
-                          ? 1 - ((ageSec - 30) / 270) * 0.75
-                          : 0.25;
+                          ? 1 - ((ageSec - 30) / 270) * 0.70 /* R358: floor 0.25 → 0.30 lift across 3 freshness scopes */
+                          : 0.30; /* R358: stale floor lifted 0.25 → 0.30 — 20% legibility bump while preserving fresh/stale ratio */
                       return (
                         <circle
                           cx={10}
                           cy={38 + index * 16 - 3}
-                          r={1.6}
+                          /* Round 359 / Loop: recency pip base radius
+                             1.6 → 1.8. Sibling lift to R358's freshness-
+                             floor bump (alpha 0.25 → 0.30) — pre-R358/
+                             R359 the stale pip painted at r=1.6 + α=0.25
+                             which read as near-invisible chrome. R358
+                             gave it more alpha; R359 gives it more area
+                             (1.8² / 1.6² ≈ 1.27, so ~27 % more glyph)
+                             so the pip stays distinguishable across the
+                             freshness ramp. Geometry: 1.8-radius dot
+                             centred at (10, row_y - 3) is bbox 3.6×3.6,
+                             still well inside the 7-px left margin
+                             (x=6 rect-start → x=13 text-start) the R160
+                             pip was placed in. Overlap-test reads the
+                             parent row rect's bbox, not this pip's, so
+                             grid+ring invariants hold. Matches the same
+                             1.6 → 1.8 visual-weight bump R295 applied
+                             to the legend swatch (5.5 → 6 base radius)
+                             and R287 to the minimap viewport stroke
+                             (1 → 1.5). data-recent-row-freshness-radius
+                             attr exposes the value for tests. */
+                          /* Round 383 / Loop: recency pip base radius
+                             1.8 → 2.0. Continues the R359 lift
+                             trajectory — pip area grows ~23 % (π·2²/
+                             π·1.8² ≈ 1.23) for a clearer at-a-glance
+                             freshness anchor in each row. Bbox 4.0×4.0
+                             still inside the 7-px R160 left margin
+                             (3-px remaining clearance vs 3.4 at r=1.8
+                             — geometry-safe margin holds). Sibling
+                             visual-weight bump family (9th anchor now):
+                               R287 minimap viewport stroke 1 → 1.5
+                               R295 legend swatch base radius 5.5 → 6
+                               R359 recent-row pip base radius 1.6 → 1.8
+                               R360 hub digit fontSize 11 → 12
+                               R361 edge-badge digit fontSize 10 → 11
+                               R365 hub-highlight base radius 5 → 5.5
+                               R367 edge-badge rest stroke 1 → 1.25
+                               R374 pressure-bar height 1.5 → 2
+                               R383 recent-row pip radius 1.8 → 2.0  (this round)
+                             data-recent-row-freshness-radius attr
+                             bumps to '2.0' for tests. */
+                          r={2.0}
                           fill={pal.legendAccent}
                           opacity={alpha}
                           data-recent-row-freshness={link.key}
                           data-recent-row-freshness-alpha={alpha.toFixed(2)}
+                          data-recent-row-freshness-radius="2.0"
                           style={{ pointerEvents: 'none', transition: 'opacity 200ms ease-out' }}
                         />
                       );
@@ -6881,8 +7911,28 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       fill={isRowActive ? pal.legendHeadline : pal.legendText}
                       fontSize="9"
                       fontFamily="monospace"
+                      /* Round 363 / Loop: recent-row text fontWeight 400
+                         → 500 (font-medium tier). At fontSize=9 the
+                         default-weight 400 glyphs read thin against the
+                         panel chrome (pal.legendBox.fill with 0.92/0.97
+                         opacity); the 100-weight bump lifts the alias→
+                         alias text into the legibility band without
+                         changing geometry. The R320 count tspan fw=600
+                         (cold) / fw=700 (hot) override still wins
+                         locally via inline fontWeight on the inner
+                         tspan, so the count-vs-alias hierarchy stays
+                         intact:
+                           alias  fw 500  (R363, this round)
+                           count  fw 600/700  (R320)
+                         Sibling typography lift to R362 chip-row digit
+                         500 → 600 — both nudge a within-element data
+                         tier without disturbing the surrounding family
+                         baseline. data-recent-row-text-font-weight attr
+                         exposes the value for tests. */
+                      fontWeight="500"
                       data-recent-row-text={link.key}
                       data-recent-row-text-pinned={isRowPinned ? 'true' : 'false'}
+                      data-recent-row-text-font-weight="500"
                       style={{
                         transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
                         letterSpacing: isRowPinned ? '0.5px' : '0px',
@@ -7144,6 +8194,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       surface. transition list extends letter-spacing
                       200ms ease-out alongside the existing opacity/
                       fill easings. */}
+                  {/* Round 368 / Loop: `+N more flows` footer text gains
+                      fontWeight=500 (font-medium tier). Sibling small-
+                      text fw lift family with R363 recent-row alias
+                      + R364 legend-row label + R366 group-label count
+                      — all four lifts share the same theory: at small
+                      fontSize (9-11 px) against panel chrome, SVG-
+                      default fw 400 sits at the legibility floor;
+                      fw 500 brings the glyph into the deliberate-data
+                      band. fontStyle=italic + opacity 0.55 rest + R325
+                      letterSpacing 0.2 baseline + R344 hover-spread
+                      0.2 → 0.3 + R195 cyan fill on hover all preserved
+                      — the fw bump just thickens the italic stroke.
+                      Hover-state punch (R195 fill + R325 opacity 0.55
+                      → 0.85 + R344 letter-spacing + R133 underline)
+                      stays as is, so the rest-vs-hover delta still
+                      reads clearly. data-recent-panel-more-font-weight
+                      attr exposes the value for tests. */}
                   <text
                     x="115" y="82"
                     textAnchor="middle"
@@ -7151,11 +8218,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fontSize="9"
                     fontFamily="monospace"
                     fontStyle="italic"
+                    fontWeight="500"
                     letterSpacing={hoveredRecentMore ? '0.3' : '0.2'}
                     opacity={hoveredRecentMore ? 0.85 : 0.55}
                     textDecoration={hoveredRecentMore ? 'underline' : 'none'}
                     data-recent-panel-more={moreCount}
                     data-recent-panel-more-hovered={hoveredRecentMore ? 'true' : 'false'}
+                    data-recent-panel-more-font-weight="500"
                     style={{ transition: 'opacity 150ms ease-out, fill 200ms ease-out, letter-spacing 200ms ease-out' }}
                   >
                     {`+ ${moreCount}`}
@@ -7208,7 +8277,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               x="0" y="0" width="224" height="88" rx="10"
               fill={pal.legendBox.fill}
               stroke={pal.legendBox.stroke}
-              opacity={isLight ? 0.97 : 0.92}
+              // R348 sibling — legend panel rect opacity hover-state
+              // bump 0.92 → 0.97 (cyber) / 0.97 → 1 (light) on
+              // hoveredPanel === 'legend'. Pairs with the recent-signal
+              // panel rect above so the two corner panels' hover cues
+              // stay symmetric. Geometry-safe (paint-only).
+              opacity={hoveredPanel === 'legend' ? (isLight ? 1 : 0.97) : (isLight ? 0.97 : 0.92)}
               style={{
                 filter: hoveredPanel === 'legend'
                   ? (isLight ? 'drop-shadow(0 4px 12px rgba(15,23,42,0.14))'
@@ -7297,7 +8371,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <text
               x="211" y="21" textAnchor="end"
               fill={pal.legendAccent} fontSize="10" fontFamily="monospace" fontWeight="600"
+              // R349 sibling — legend panel header count picks up
+              // letterSpacing="0.2", one tier below the R301 panel
+              // title 0.3. Pairs with the recent-signal panel count
+              // letter-spacing above so the two corner panels' header
+              // typography stays editorially symmetric.
+              letterSpacing="0.2"
               data-legend-panel-count
+              data-legend-panel-count-letter-spacing="0.2"
               style={{
                 transition: 'fill 200ms ease-out',
                 fontVariantNumeric: 'tabular-nums',
@@ -7518,14 +8599,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       so this legend-internal circle is invisible to
                       that probe. pointerEvents:none so the ring can't
                       intercept the row click that produced it. */}
+                  {/* Round 402 / Loop: legend pin-ring strokeWidth 1.5
+                      → 1.75. Sibling visual-weight bump (12th anchor)
+                      to R385 hub hover-ring strokeWidth 1.5 → 1.75 —
+                      both are pin/hover state indicators painted as
+                      stroke-only circles outside their target swatch
+                      with the R51 sentinel value 1.5. R402 lifts to
+                      1.75 (matching R385's choice) so the pin signal
+                      reads slightly heavier without crossing the
+                      R51 sentinel band (3 reserved for offline node).
+                      The R51 selector is gated to g[data-node]
+                      ancestors so this legend-internal circle (lives
+                      under a <g data-legend-status>) is invisible
+                      to the probe — same lesson R177/R385 documented.
+                      Visual-weight bump family (12 anchors now):
+                        R287 minimap viewport stroke   1   → 1.5
+                        R295 legend swatch radius      5.5 → 6
+                        R359 recent-row pip radius     1.6 → 1.8
+                        R360 hub digit fontSize        11  → 12
+                        R361 edge-badge digit fontSize 10  → 11
+                        R365 hub-highlight radius      5   → 5.5
+                        R367 edge-badge rest stroke    1   → 1.25
+                        R374 pressure-bar height       1.5 → 2
+                        R383 recent-row pip radius     1.8 → 2.0
+                        R384 minimap online dot        1.7 → 1.9
+                        R385 hub hover-ring stroke     1.5 → 1.75
+                        R402 legend pin-ring stroke    1.5 → 1.75  (this round)
+                      R181 always-mount opacity gate + 150ms transition
+                      + pointerEvents:none all preserved. data-legend-
+                      pin-ring-stroke-width attr exposes the value for
+                      tests. */}
                   <circle
                     cx="16" cy={row.y0} r="8"
                     fill="none"
                     stroke={row.fill}
-                    strokeWidth="1.5"
+                    strokeWidth="1.75"
                     opacity={isPinned ? 1 : 0}
                     data-legend-pin-ring={row.key}
                     data-legend-pin-ring-pinned={isPinned ? 'true' : 'false'}
+                    data-legend-pin-ring-stroke-width="1.75"
                     style={{
                       pointerEvents: 'none',
                       transition: 'opacity 150ms ease-out',
@@ -7552,8 +8664,31 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fill={hoveredStatus === row.key || isPinned ? pal.legendHeadline : pal.legendText}
                     fontSize="11"
                     fontFamily="monospace"
+                    /* Round 364 / Loop: legend-row label fontWeight 400
+                       → 500. Sibling typography lift to R363 recent-row
+                       text fw 400 → 500. Both surfaces render small
+                       monospace text against panel chrome at fontSize
+                       9-11 where SVG-default fw 400 sits at the
+                       legibility floor. font-medium tier (500) gives
+                       the label a more deliberate-data register.
+                       The R309 per-row count text (separate element
+                       below at x=215 textAnchor=end) keeps its own
+                       fontWeight 600 inline override, so the count >
+                       label hierarchy stays intact at the legend
+                       scope same as R363 holds it at the recent-row
+                       scope:
+                         legend  label  fw 500  (R364, this round)
+                         legend  count  fw 600  (R309)
+                         recent  alias  fw 500  (R363)
+                         recent  count  fw 600/700  (R320)
+                       data-legend-row-label-font-weight attr exposes
+                       the value for tests. R219 letter-spacing pin
+                       tween + R55 fill transition + R181 always-mount
+                       pin ring all preserved. */
+                    fontWeight="500"
                     data-legend-row-label={row.key}
                     data-legend-row-label-pinned={isPinned ? 'true' : 'false'}
+                    data-legend-row-label-font-weight="500"
                     style={{
                       transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
                       letterSpacing: isPinned ? '0.5px' : '0px',
@@ -7872,14 +9007,63 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const isOn = s.status !== 'offline' || !!sseN;
                   const st = nodeStatus(s, isOn, isLight);
                   return (
+                    /* Round 372 / Loop: minimap offline-dot opacity
+                       0.5 → 0.6. Sibling stale-state legibility lift
+                       to R358 freshness ramp floor 0.25 → 0.30 + R317
+                       subordinate-text-lift family. Pre-R372 R198
+                       drew offline dots at α=0.5 (44 % below online
+                       0.9). The minimap is a small overlay against
+                       the canvas backdrop — at α=0.5 offline dots
+                       sat at the legibility floor when the minimap
+                       mounted (only on non-default view). R372 lifts
+                       offline 0.5 → 0.6 for +20 % relative presence;
+                       online stays at 0.9 so the offline/online
+                       contrast ratio is now 0.6/0.9 ≈ 0.67 (vs prior
+                       0.5/0.9 ≈ 0.56) — still a clear two-tier
+                       distinction. R198 opacity + fill + r transition
+                       list preserved so status flips still ease
+                       smoothly. data-topo-minimap-dot-opacity attr
+                       exposes the resolved value for tests. */
                     <circle
                       key={s.alias}
                       cx={p.x * sx} cy={p.y * sy}
-                      r={isOn ? 1.7 : 1.2}
+                      /* Round 384 / Loop: minimap online dot radius 1.7
+                         → 1.9. Sibling visual-weight bump (10th anchor)
+                         to R383 recent-row pip 1.8 → 2.0. R198 designed
+                         the dots at 1.7 (online) / 1.2 (offline) — at
+                         the minimap's 120 × 82 scale these read clearly
+                         but the online ↔ offline contrast was modest
+                         (1.7/1.2 = 1.42×). R384 bumps online to 1.9 so
+                         the tier delta widens to 1.58× (1.9/1.2). Pair
+                         completes minimap-dot legibility polish:
+                           R358 (era R372) offline opacity 0.5 → 0.6
+                           R384            online radius 1.7 → 1.9 (this round)
+                         R198 transition list (opacity + fill + r 200ms)
+                         preserved so status flips still ease smoothly.
+                         data-topo-minimap-dot-radius attr exposes the
+                         resolved value for tests. */
+                      /* Round 392 / Loop: minimap online dot opacity
+                         0.9 → 0.95. Theme-consistency / canvas-presence
+                         polish family (7th anchor) — mirrors R386's
+                         hub-highlight idle 0.9 → 0.95 lift on the
+                         minimap surface: the online-dot's idle alpha
+                         gap (0.10 against full presence) halves to
+                         0.05, so the live-fleet anchors on the minimap
+                         read more confidently. Offline dot stays at
+                         R372 0.6 — the binary online/offline contrast
+                         ratio shifts from 0.6/0.9 ≈ 0.67 to 0.6/0.95
+                         ≈ 0.63, preserved as a clear two-tier
+                         distinction. R198 opacity + fill + r transition
+                         list + R384 r=1.9 + R372 offline 0.6 all
+                         preserved. data-topo-minimap-dot-opacity attr
+                         bumps to '0.95' for tests. */
+                      r={isOn ? 1.9 : 1.2}
                       fill={st.primary}
-                      opacity={isOn ? 0.9 : 0.5}
+                      opacity={isOn ? 0.95 : 0.6}
                       data-topo-minimap-dot={s.alias}
                       data-topo-minimap-dot-online={isOn ? 'true' : 'false'}
+                      data-topo-minimap-dot-opacity={isOn ? 0.95 : 0.6}
+                      data-topo-minimap-dot-radius={isOn ? 1.9 : 1.2}
                       style={{
                         transition: 'opacity 200ms ease-out, fill 200ms ease-out, r 200ms ease-out',
                       } as React.CSSProperties}
@@ -7920,17 +9104,66 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     information element to lift it above ambient
                     chrome. opacity 0.9 stays — strokeWidth alone
                     does the lifting. */}
+                {/* Round 379 / Loop: minimap viewport rect picks up
+                    strokeLinejoin='round'. Pre-R379 the rect's 4
+                    corners painted with default 'miter' joins —
+                    sharp 90° corners with a small miter overshoot
+                    (≈ strokeWidth × 1.4 = 2.1 px at sw=1.5). R379
+                    rounds the joins so corners arc smoothly through
+                    a quarter-circle of radius ≈ strokeWidth/2. At
+                    sw=1.5 that's a 0.75-px radius — subtle but
+                    matches the same stroke-softening vocabulary R288
+                    chrome icons (zoom/reset/fullscreen) and R378
+                    flow-rail already speak. Geometry-safe: stroke-
+                    linejoin only affects the corner overshoot, the
+                    rect's bbox is unchanged. R287 strokeWidth=1.5 +
+                    R346 hover-state strokeWidth/opacity bump + R199
+                    smoothView x/y/w/h transition all preserved.
+                    data-topo-minimap-viewport-linejoin attr exposes
+                    the value for tests. */}
+                {/* Round 393 / Loop: minimap viewport rect rx 0 → 2.
+                    Pre-R393 the cyan-stroked viewport rect (the frame
+                    showing what's currently visible on the canvas)
+                    drew with sharp corners inside the R332 rounded
+                    minimap container (rx=8). A small frame with sharp
+                    corners sitting inside a rounded container reads
+                    as visually loud — the 90° corners catch the eye
+                    against the soft container edge. R393 adds rx=2
+                    so the viewport corners get a subtle radius that
+                    matches the family's softening idiom on a sub-
+                    element scale. The R379 strokeLinejoin='round'
+                    already softens stroke joins; R393 adds a complete
+                    geometric soften via rx.
+                    Corner-radius cascade (7 anchors now):
+                      R330 canvas             rx 12
+                      R331 panels             rx 10
+                      R332 minimap container  rx 8
+                      R375 Layout-toggle      rx 8
+                      R376 nodeSize/zoom      rx 8
+                      R390 hover-detail       rx 10
+                      R393 minimap viewport   rx 2  (this round, sub-element)
+                    The 2-px radius is intentionally small — the
+                    viewport rect is typically only 30-50px wide,
+                    where rx=2 reads as "rounded enough to not snap"
+                    without feeling pillowy. data-topo-minimap-
+                    viewport-rx attr exposes the resolved value
+                    for tests. R346 hover-state tweens (strokeWidth
+                    + opacity) preserved verbatim. */}
                 <rect
                   x={Math.max(0, rectX)} y={Math.max(0, rectY)}
                   width={Math.max(0, Math.min(MW - Math.max(0, rectX), rectW))}
                   height={Math.max(0, Math.min(MH - Math.max(0, rectY), rectH))}
+                  rx="2"
                   fill="none" stroke={pal.legendAccent}
                   // R346: strokeWidth + opacity tween on container hover.
                   strokeWidth={hoveredMinimap ? '1.75' : '1.5'}
+                  strokeLinejoin="round"
                   opacity={hoveredMinimap ? '1' : '0.9'}
                   data-topo-minimap-viewport
+                  data-topo-minimap-viewport-rx="2"
                   data-topo-minimap-viewport-smooth={smoothView ? 'true' : 'false'}
                   data-topo-minimap-viewport-hover={hoveredMinimap ? 'true' : 'false'}
+                  data-topo-minimap-viewport-linejoin="round"
                   style={{
                     transition: smoothView
                       ? 'x 280ms ease-out, y 280ms ease-out, width 280ms ease-out, height 280ms ease-out, stroke-width 200ms ease-out, opacity 200ms ease-out'
@@ -7989,8 +9222,22 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               own transition-colors. Same R254 holdover pattern that
               R263 just closed at the canvas wrapper scope, now at the
               chrome strip's nodeSize sub-wrapper scope. */}
+          {/* Round 376 / Loop: nodeSize wrapper rounded-md → rounded-lg.
+              Sibling polish to R375 Layout-toggle wrapper. Three
+              chrome-strip segmented controls now all share rounded-lg
+              at the wrapper tier:
+                R375 Layout-toggle wrapper  rounded-lg  8 px
+                R376 nodeSize  wrapper      rounded-lg  8 px (this round)
+                R376 zoom      wrapper      rounded-lg  8 px (this round)
+              Individual atomic chrome buttons (reset, fullscreen) keep
+              rounded-md (6 px) as their own atomic-button tier — the
+              chrome strip's typography now expresses a clear two-tier
+              hierarchy: 'segmented control container' (rounded-lg)
+              vs 'standalone button' (rounded-md). Pure paint change,
+              no layout shift. */}
           <div
-            className="flex items-center rounded-md border overflow-hidden"
+            className="flex items-center rounded-lg border overflow-hidden"
+            data-topo-chrome-nodesize-radius="rounded-lg"
             style={{
               background: pal.legendBox.fill,
               borderColor: pal.containerBorder,
@@ -8070,8 +9317,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-topo-chrome-view-group-leader marks the boundary surface
               for the test probe; data-topo-chrome-fleet-group-trailer marks
               the nodeSize wrapper's right edge for the gap measurement. */}
+          {/* R376 sibling — zoom wrapper rounded-md → rounded-lg.
+              Closes the chrome-strip segmented-control corner radius
+              cascade (Layout R375 + nodeSize R376 + zoom R376). */}
           <div
-            className="ml-1.5 flex items-center rounded-md border overflow-hidden"
+            className="ml-1.5 flex items-center rounded-lg border overflow-hidden"
+            data-topo-chrome-zoom-wrapper-radius="rounded-lg"
             style={{
               background: pal.legendBox.fill,
               borderColor: pal.containerBorder,
@@ -8087,7 +9338,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // R196: press-state deepens bg one tier above hover (white/5
               // → white/10) so mouse-down has a tactile dim before the
               // R186 icon pop fires on release.
-              className="px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // R352: `group` lets the inner svg respond via group-hover.
+              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
               style={{ color: pal.legendText }}
               aria-label="Zoom out"
               title="Zoom out (−)"
@@ -8095,11 +9347,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               {/* R186: icon pop on click. CSS animation runs once;
                   React removes the class after 240ms so a quick
                   re-click can replay. */}
+              {/* Round 352 / Loop: zoom-out icon picks up group-hover:
+                  scale-110 — sibling to R350 reset hover-rotate. Pre-
+                  R352 hovering the zoom button only changed the bg
+                  (white/5); the icon inside stayed perfectly still.
+                  R352 lifts the icon 10% on hover for a tactile "this
+                  button does something" cue. The R186 anet-chrome-pop
+                  keyframe (220ms scale 1→1.06→1) still owns transform
+                  during click via CSS-animation precedence over
+                  transition-transform; after the pop ends + className
+                  is removed, the group-hover scale-110 picks up
+                  smoothly. `transform-gpu` hint promotes the svg to
+                  its own compositor layer for crisper edges during
+                  the scale tween. Sibling change on zoom-in icon
+                  below. */}
               <svg
                 width="12" height="12" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
                 aria-hidden
-                className={chromePopping === 'zoom-out' ? 'anet-chrome-pop' : undefined}
+                className={`transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu${chromePopping === 'zoom-out' ? ' anet-chrome-pop' : ''}`}
                 data-topo-chrome-zoom-out-icon
               ><path d="M5 12h14" /></svg>
             </button>
@@ -8145,11 +9411,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 chromePopping === 'zoom-in' || chromePopping === 'zoom-out'
                   ? 'true' : 'false'
               }
+              data-topo-chrome-zoom-level-hover={hoveredZoomLevel ? 'true' : 'false'}
+              onMouseEnter={() => setHoveredZoomLevel(true)}
+              onMouseLeave={() => setHoveredZoomLevel(false)}
               style={{
                 color: pal.legendText,
                 borderColor: pal.containerBorder,
                 minWidth: 46,
                 display: 'inline-block',
+                // R347: letter-spacing hover tween — extends R344/R345
+                // hover-letter-spacing family into the chrome strip.
+                letterSpacing: hoveredZoomLevel ? '0.5px' : '0',
                 /* Round 264 / Loop: zoom level readout gains theme-toggle
                    transition. The span has theme-driven color (pal.
                    legendText) + border-x (pal.containerBorder via the
@@ -8158,7 +9430,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    on theme flip while siblings eased. Sibling treatment
                    to the nodeSize + zoom wrapper transitions added this
                    round. */
-                transition: 'color 200ms ease-out, border-color 200ms ease-out',
+                transition: 'color 200ms ease-out, border-color 200ms ease-out, letter-spacing 200ms ease-out',
               }}
               title="Current zoom level"
             >
@@ -8169,18 +9441,22 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-topo-chrome-zoom-in
               data-topo-chrome-zoom-in-popping={chromePopping === 'zoom-in' ? 'true' : 'false'}
               // R196: press-state (mirror of zoom-out above).
-              className="px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // R352: `group` lets the inner svg respond via group-hover.
+              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
               style={{ color: pal.legendText }}
               aria-label="Zoom in"
               title="Zoom in (+)"
             >
               {/* R186: icon pop on click. Same one-shot CSS animation
                   as zoom-out; React removes the class after 240ms. */}
+              {/* R352 sibling — zoom-in icon picks up the same
+                  group-hover:scale-110 family. Mirror change at
+                  the zoom-out icon above. */}
               <svg
                 width="12" height="12" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
                 aria-hidden
-                className={chromePopping === 'zoom-in' ? 'anet-chrome-pop' : undefined}
+                className={`transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu${chromePopping === 'zoom-in' ? ' anet-chrome-pop' : ''}`}
                 data-topo-chrome-zoom-in-icon
               ><path d="M12 5v14M5 12h14" /></svg>
             </button>
@@ -8189,9 +9465,35 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             onClick={() => { armResetSpin(); resetView(); }}
             data-topo-chrome-reset
             data-topo-chrome-reset-spinning={resetSpinning ? 'true' : 'false'}
+            data-topo-chrome-reset-hover={hoveredReset ? 'true' : 'false'}
+            // R350: hover state drives the icon transform below.
+            onMouseEnter={() => setHoveredReset(true)}
+            onMouseLeave={() => setHoveredReset(false)}
+            onFocus={() => setHoveredReset(true)}
+            onBlur={() => setHoveredReset(false)}
             // R196: press-state deepens before R184 reset-spin fires on
             // release — mouse-down dim then 450ms spin = full handshake.
-            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+            /* Round 400 / Loop · milestone: chrome reset + fullscreen
+               buttons gain hover:-translate-y-px lift — closes the
+               hover-lift gesture vocabulary across every standalone
+               interactive HTML element in TopoGraph. Segmented
+               controls (zoom -/+, nodeSize S/M/L, Layout Ring/Grid)
+               intentionally stay planted: lifting one segment of a
+               unified strip would tear the visual unity of the
+               segmented control. Only the standalone chrome buttons
+               (reset, fullscreen) get the lift.
+               Gesture vocabulary post-R400 (now complete across HTML):
+                 chip-row chips (3×)  -1 px  R398, R399
+                 filter pin pills (4×) -1 px R397
+                 recent-signal row    -1 px  R143
+                 legend row           -1 px  R144
+                 reset button         -1 px  R400 (this round)
+                 fullscreen button    -1 px  R400 (this round)
+               Every standalone interactive HTML surface in TopoGraph
+               now lifts on hover. data-topo-chrome-reset-hover-lift
+               attr surfaces the lift for tests. */
+            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+            data-topo-chrome-reset-hover-lift="true"
             style={{ background: pal.legendBox.fill, borderColor: pal.containerBorder, color: pal.legendText }}
             aria-label="Reset view"
             title="Reset zoom + pan (0, or double-click the canvas)"
@@ -8218,6 +9520,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               aria-hidden
               className={resetSpinning ? 'anet-reset-spin' : undefined}
               data-topo-chrome-reset-icon
+              // R350: hover-rotate preview of the R184 click-spin.
+              // Gated on !resetSpinning so the anet-reset-spin keyframe
+              // owns transform during its 450ms run. transformOrigin
+              // 'center' so rotation pivots around the icon's centre
+              // (default would be top-left and the icon would arc).
+              style={{
+                transform: hoveredReset && !resetSpinning ? 'rotate(-8deg)' : 'rotate(0deg)',
+                transformOrigin: 'center',
+                transition: 'transform 200ms ease-out',
+              }}
+              data-topo-chrome-reset-icon-hover={hoveredReset && !resetSpinning ? 'true' : 'false'}
             >
               <path d="M3 12a9 9 0 1 0 9-9 9 9 0 0 0-6.4 2.6L3 8" />
               <path d="M3 3v5h5" />
@@ -8251,11 +9564,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                its inactive state benefits from the same "hover previews
                active state" idiom R163 designed. Sibling treatment to
                the nodeSize buttons at line ~6711. */
-            className={`p-1.5 rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
+            // R353: `group` lets the inner svg respond via group-hover —
+            // sibling to R352 zoom buttons. Closes the chrome-strip per-
+            // icon hover-affordance arc (zoom-out / zoom-in / reset /
+            // fullscreen now all carry an icon-level hover gesture in
+            // addition to the bg hover).
+            // R400: hover translateY(-1px) lift — see reset button above for family doc.
+            className={`group p-1.5 rounded-md border hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
               isFullscreen
                 ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25'
                 : 'hover:bg-cyan-500/5 active:bg-cyan-500/15'
             }${chromePopping === 'fullscreen' ? ' anet-chrome-pop' : ''}`}
+            data-topo-chrome-fullscreen-hover-lift="true"
             style={{
               borderColor: pal.containerBorder,
               ...(isFullscreen
@@ -8270,12 +9590,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 at the reset icon above. data-topo-chrome-fullscreen-
                 icon attribute exposes BOTH variants (entered / exited)
                 for the round's stroke-width regression probe. */}
+            {/* Round 353 / Loop: fullscreen icon (both enter + exit
+                variants) picks up the R352 family group-hover:scale-110.
+                Pre-R353 hovering the button only changed the bg; the
+                icon stayed still. R353 lifts the icon 10 % on hover —
+                same gesture vocabulary as the zoom buttons. transform-
+                gpu hint promotes the svg to its own compositor layer
+                for crisper edges during the scale tween. Closes the
+                chrome-strip per-icon hover-affordance arc. */}
             {isFullscreen ? (
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden data-topo-chrome-fullscreen-icon="exit">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu" data-topo-chrome-fullscreen-icon="exit">
                 <path d="M8 3v4a1 1 0 0 1-1 1H3M21 8h-4a1 1 0 0 1-1-1V3M3 16h4a1 1 0 0 1 1 1v4M16 21v-4a1 1 0 0 1 1-1h4" />
               </svg>
             ) : (
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden data-topo-chrome-fullscreen-icon="enter">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu" data-topo-chrome-fullscreen-icon="enter">
                 <path d="M3 8V5a2 2 0 0 1 2-2h3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M21 16v3a2 2 0 0 1-2 2h-3" />
               </svg>
             )}