@sleep2agi/agent-network-dashboard 0.5.3-preview.13 → 0.5.3-preview.131

package/app/components/TopoGraph.tsx

@@ -240,11 +240,30 @@ function FreshnessChip({ sessions }: { sessions: unknown }) {
      stale-onset to direct attention. */
   if (!stale) return null;
   return (
+    /* Round 505 / Loop — FreshnessChip mount animation. Pre-R505 the
+       chip popped into the chip-row instantly when SWR data crossed
+       the 10s stale threshold; users saw an abrupt amber pill appear
+       mid-row. R505 adds the existing `anet-fade-in` class so the
+       chip eases through opacity 0→1 over 150ms (R51 globals.css
+       keyframe) on first appearance. The chip itself only renders
+       when stale (R275 conditional), so the fade plays exactly when
+       the stale signal first arrives — perfectly aligned with the
+       semantic. Mount-once via React reconciliation (key not used
+       since FreshnessChip is a singleton in the parent).
+       a11y respected via R29 blanket — `@media (prefers-reduced-
+       motion: reduce)` neutralizes anet-fade-in to `animation:none`
+       (globals.css line 1083-1089 includes anet-fade-in in the
+       blanket list). Reduced-motion users see the chip pop instantly,
+       same as pre-R505 behavior — no regression.
+       Pure paint-axis addition (opacity animation, no geometry),
+       bbox unchanged. data-freshness-chip-mount-fade attr exposes
+       the gate for tests. */
     <span
-      className={`${baseClass} ${colorClass}`}
+      className={`${baseClass} ${colorClass} anet-fade-in`}
       title={stale ? `Last sync ${sec}s ago — SWR refresh may be lagging` : `Live data · refreshes every 5s · last sync ${sec}s ago`}
       data-freshness-chip
       data-freshness-chip-stale={stale ? 'true' : 'false'}
+      data-freshness-chip-mount-fade="true"
     >
       {/* Round 272 / Loop: swap prefix word to match color state so
           text and color point the same way. Pre-R272 the chip read
@@ -1123,6 +1142,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // hover state says — either -8° (still hovering) or 0 (mouse left).
   // 350th-round milestone polish.
   const [hoveredReset, setHoveredReset] = useState(false);
+  // R595: hover state for the chrome fullscreen button — drives the
+  // brightness(1.15) filter on hover, sibling to hoveredReset above.
+  // Same pattern as R593 hoveredZoomLevel + R594 hoveredReset; closes
+  // the standalone chrome button pair (reset + fullscreen) at
+  // brightness parity.
+  const [hoveredFullscreen, setHoveredFullscreen] = 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
@@ -1706,7 +1731,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             width) = 166px total title-block width vs 168px pre-R298 —
             no measurable layout shift, just a deliberate tighter
             grouping. */}
-        <div className="flex items-center gap-2.5">
+        {/* Round 554 / Loop — title-block wrapper picks up `group` so
+            the H2 below can subscribe to `group-hover:tracking-tighter`.
+            Pairs with R548/R549 brand-logo hover gestures: cursor
+            sweeping anywhere across the title cluster fires the brand
+            logo's scale-105 + rotate-6 + breath ↔ AND tightens the
+            H2's tracking from -0.025em → -0.05em.
+            Makes the title-block read as one coherent hover cluster —
+            brand mark provides the loud gesture (scale + rotate), H2
+            provides the subtle editorial gesture (kerning tighten).
+            data-topo-section-titleblock-group attr surfaces the gate
+            for tests. */}
+        <div className="group flex items-center gap-2.5" data-topo-section-titleblock-group>
           {/* Round 297 / Loop: brand-logo color picks up the 200ms ease-
               out transition. Pre-R297 the moon glyph had theme-
               conditional color (cyber #67e8f9 cyan ↔ light #0d9488
@@ -1730,13 +1766,162 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               overpowering the h2 at text-lg/font-semibold (R286).
               viewBox 32×32 unchanged so the inner crescent geometry
               scales proportionally. */}
+          {/* Round 548 / Loop — title-block brand logo gains subtle
+              hover-scale gesture. Pre-R548 the 40×40 crescent was
+              fully static — no hover affordance. R548 adds hover:
+              scale-105 (Tailwind 4 emits as `scale: 1.05`) so the
+              brand mark gently responds to attention as the user's
+              cursor sweeps across the title block. 5% scale is
+              intentionally subtle (vs R350 chrome icon hover-scale-
+              110): the brand logo is a passive identity mark, not
+              an interactive control, so the gesture stays small.
+              cursor: default to clarify non-clickability (the SVG
+              isn't a button; just a brand element).
+              transition-transform duration-200 ease-out matches the
+              dashboard's R350-family hover-scale cadence so the
+              brand logo's response shares the same motion vocabulary
+              as the chrome strip's icon scales. transform-gpu hint
+              promotes the SVG to its own compositor layer for crisp
+              edges during the tween.
+              Brand-mark delight gesture family (1 anchor):
+                R548  title-block brand logo  hover:scale-105
+              The crescent at canvas top-left (data-topo-brand-
+              canvas-mark) and the watermark at bottom-left (data-
+              topo-brand-watermark) are intentionally LEFT STATIC —
+              both have pointerEvents:none and exist as ambient
+              decoration with their own breath/recede dynamics
+              (R519/R525/R526/R528). The title-block logo is the
+              ONLY brand surface that's a candidate for hover affordance,
+              since it sits in the chrome-band where the cursor
+              naturally passes during normal use. */}
+          {/* Round 549 / Loop — extends R548 (hover:scale-105) with a
+              subtle hover:rotate-6 rotation. Pairs scale + rotate on
+              the brand mark, same idiom as R547 added to the pill ×
+              close buttons (scale-110 + rotate-12) but at gentler
+              amounts: 105% vs 110% scale and 6° vs 12° rotation —
+              brand marks want restraint vs interactive close buttons.
+
+              The crescent-moon shape (curved cutout via mask) reads
+              visually distinct as it rotates — the asymmetric cutout
+              swings into a fresh angle, telegraphing "this brand mark
+              is alive without being loud". The 6° landing lands the
+              moon's cusp pointing slightly NE rather than straight up,
+              a small but legible reveal of the shape's geometry.
+
+              Tailwind 4 emits BOTH `scale: 1.05` AND `rotate: 6deg`
+              as INDIVIDUAL CSS properties (not a combined transform
+              string — see R547 banked pattern). The className keeps
+              transition-transform so both axes ease at the same 200ms
+              cadence; transform-gpu hint stays so the compositor
+              promotes both axes to GPU layers.
+
+              data-topo-brand-logo-hover-rotate attr surfaces the
+              landing rotation for tests. Pair with R548's
+              data-topo-brand-logo-hover-scale attr — both attrs
+              advertise the dual-axis hover signature. */}
+          {/* Round 553 / Loop — title-block brand logo gains subtle
+              idle opacity breath (~0.92 ↔ 1, 5s ease-in-out cycle).
+              5th anchor in the 呼吸感 breath family, slotting into
+              the ascending cadence ladder between hub idle (4s) and
+              watermark (6s):
+                row hot       3s
+                hub idle      4s
+                brand logo    5s   ← this round
+                watermark     6s
+                crescent      7s
+              Composes cleanly with R548 hover:scale-105 + R549
+              hover:rotate-6 — opacity, scale, and rotate are
+              independent CSS properties; the moon keeps breathing
+              as it scales and rotates on hover. Layered effect
+              reads as "this brand mark is alive even before you
+              touch it, and lights up further on hover".
+              Reduced-motion gate: component-side `!reducedMotion`
+              toggles the className (canonical TopoGraph breath
+              pattern); R29 globals.css blanket provides a
+              defense-in-depth fallback (animation-duration →
+              0.001ms under prefers-reduced-motion: reduce).
+              data-topo-brand-logo-breath attr exposes the gate
+              state for tests. */}
+          {/* Round 557 / Loop — brand logo gains 4th hover axis:
+              hover:brightness-110 (filter). Adds a chromatic axis
+              to the brand-mark hover signature alongside R548
+              scale, R549 rotate, R553 idle breath:
+                R548  hover:scale-105       transform-scale
+                R549  hover:rotate-6        transform-rotate
+                R553  idle breath (5s)      opacity (animation)
+                R557  hover:brightness-110  filter        ← this round
+              All 4 axes ride on INDEPENDENT CSS properties (scale,
+              rotate, opacity, filter) — they compose freely without
+              clobbering each other. The cyan/teal crescent gains a
+              soft +10% brightness boost on hover, layered on top of
+              the existing scale + rotate lift + ongoing idle breath.
+              Why +10% (vs more aggressive 125/150): brand mark wants
+              restraint. The eye reads the brightness shift as "this
+              mark lights up under attention" without crossing into
+              "this mark is now glowing".
+              Implementation: className extends transition-transform
+              → transition-[transform,filter] so the brightness
+              tweens at the same 200ms ease-out cadence as the scale
+              + rotate axes — one motion-coherent 3-property hover
+              lift on the className tier (plus the inline color 200ms
+              transition for theme-toggle eases).
+              Brand-mark family axis count: 4 hover-state axes
+              cleanly factor across:
+                geometry (scale + rotate)
+                paint    (opacity breath + brightness on hover)
+              Cluster reads as "alive, lifting, and lighting up under
+              attention" — three independent gesture vocabularies on
+              one surface.
+              data-topo-brand-logo-hover-brightness attr surfaces
+              the landing value for tests. */}
           <svg
             width="40" height="40" viewBox="0 0 32 32" aria-hidden
-            className="shrink-0"
+            /* R604 — brand 书生 logo gains hover-drop-shadow as 5th
+               axis (4 hover + 1 always-on breath). Tailwind v4 arbitrary
+               drop-shadow with currentColor — the glow inherits the
+               brand-mark's own colour (light teal #0d9488 / cyber cyan
+               #67e8f9 per inline style.color). 8px radius reads as a
+               "lit up under attention" halo without overwhelming the
+               40×40 logo footprint.
+
+               Tailwind v4 emits filter utilities through CSS-var system
+               (--tw-drop-shadow, --tw-brightness) that combine in the
+               `filter` shorthand — so hover:brightness-110 + hover:
+               drop-shadow-[0_0_8px_currentColor] stack instead of
+               clobbering each other. Same banked R564/R570 "halo +
+               glow" pattern, now at the brand-mark scope.
+
+               Brand-logo hover signature now 5 axes:
+                 R548  hover:scale-105       transform-scale
+                 R549  hover:rotate-6        transform-rotate
+                 R553  idle breath (5s)      opacity (always-on)
+                 R557  hover:brightness-110  filter brightness
+                 R604  hover:drop-shadow     filter drop-shadow  ← this round
+
+               Existing inline transition already covers 'filter 200ms
+               ease-out' (R557 cadence) — both brightness AND drop-
+               shadow ease at the same beat. */
+            className={`shrink-0 transition-[transform,filter] duration-200 ease-out hover:scale-105 hover:rotate-6 hover:brightness-110 hover:drop-shadow-[0_0_8px_currentColor] transform-gpu${!reducedMotion ? ' anet-topo-brand-logo-breath' : ''}`}
             data-topo-brand-logo
+            data-topo-brand-logo-hover-scale="1.05"
+            data-topo-brand-logo-hover-rotate="6deg"
+            data-topo-brand-logo-hover-brightness="1.1"
+            data-topo-brand-logo-hover-drop-shadow="0_0_8px_currentColor"
+            data-topo-brand-logo-breath={!reducedMotion ? 'true' : 'false'}
             style={{
               color: isLight ? '#0d9488' : '#67e8f9',
-              transition: 'color 200ms ease-out',
+              cursor: 'default',
+              // R557 — extend transition list to include filter (and
+              // re-spec transform for cadence parity) so the new
+              // hover:brightness-110 axis eases at 200ms alongside
+              // the existing color 200ms (theme-toggle ease) and the
+              // className-based hover:scale-105 / hover:rotate-6.
+              // Inline transition is a shorthand and overrides the
+              // className's transition-[transform,filter] — listing
+              // all axes here ensures the eased property set covers
+              // color (theme) + transform (scale + rotate) + filter
+              // (brightness) at uniform 200ms ease-out.
+              transition: 'color 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out',
             }}
           >
             <mask id="s2a-titleblock-moon-mask">
@@ -1784,7 +1969,40 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               R300 marks the milestone of 25 rounds (R275-R300) of
               continuous TopoGraph polish + codex's Vincent 5215/
               5222 logo asset+integration work. */}
-          <div className="text-xs uppercase text-gray-500 tracking-widest leading-tight font-medium" data-topo-section-kicker>Network Topology</div>
+          {/* Round 555 / Loop — kicker "Network Topology" gains group-
+              hover affordance via the R554 wrapper's `group` flag,
+              closing the title-block cluster's hover coverage at 3
+              surfaces (brand logo + H2 + kicker).
+              Picks up the small-label SPREAD direction (R554 banked
+              "small labels SPREAD on hover / large headlines TIGHTEN"
+              — kicker is xs uppercase, definitely a small label) plus
+              a color brighten (text-gray-500 #6b7280 → text-gray-400
+              #9ca3af).
+              Spread: tracking-widest (0.1em rest) → 0.13em hover —
+              +30% kerning bump. At text-xs (12px) the per-gap shift
+              is 1.2px → 1.56px (+0.36px/gap), legible without
+              overshooting the rest's tracking-widest editorial base.
+              Color: text-gray-500 → text-gray-400 — one tier lighter,
+              same idiom as R296 (kicker rest tone-up from gray-600 to
+              gray-500), now extended at the hover-state tier.
+              transition-[letter-spacing,color] duration-200 ease-out
+              matches the 200ms cadence of R554 H2 ls + the rest of
+              the hover-ls family (R344/R345/R347/R351/R420/R427/R431/
+              R432/R434/R527/R539).
+              Title-block cluster signature post-R555 (3 surfaces):
+                brand logo  loud      scale + rotate + breath
+                                       (R548/R549/R553)
+                H2          subtle    tracking-tighter
+                                       (R554, editorial-tighten)
+                kicker      subtle    tracking-spread + color lift
+                                       (R555, data-spread)  ← this round
+              Two of the three surfaces are typographic; the brand
+              logo carries the geometric+chromatic motion. Cluster
+              reads as ONE coherent hover unit through three
+              independent gesture vocabularies.
+              data-topo-section-kicker-hover-tracking + -hover-color
+              attrs expose the landing values for tests. */}
+          <div className="text-xs uppercase text-gray-500 group-hover:text-gray-400 tracking-widest group-hover:tracking-[0.13em] transition-[letter-spacing,color] duration-200 ease-out leading-tight font-medium" data-topo-section-kicker data-topo-section-kicker-hover-tracking="0.13em" data-topo-section-kicker-hover-color="text-gray-400">Network Topology</div>
           {/* Round 286 / Loop: title 'Command mesh' adopts tracking-tight
               (-0.025em) to complement R285 kicker tracking-widest. Wide
               eyebrow + tight headline is the conventional editorial
@@ -1796,7 +2014,62 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               cumulatively legible across 12 characters. font-semibold
               (600) stays — tracking-tight does the heavy lifting for
               the editorial register. */}
-          <h2 className="text-lg text-white font-semibold leading-tight tracking-tight" data-topo-section-title>Command mesh</h2>
+          {/* Round 554 / Loop — H2 "Command mesh" gains group-hover-
+              gated tracking-tighter via the wrapper's R554 `group`
+              flag. Pre-R554 the H2 was fully static (R286 tracking-
+              tight only at rest). R554 adds an editorial-tighten
+              gesture: when cursor sweeps anywhere across the title
+              cluster (brand logo OR title text), the headline tightens
+              from -0.025em → -0.05em.
+              Inverts the typical hover-letter-spacing direction:
+                small labels (chip counts, panel titles, edge digits)
+                  SPREAD on hover    → "data telegraphing"
+                large headlines (h2 Command mesh)
+                  TIGHTEN on hover   → "editorial emphasis"
+              Both directions are coherent design language — small
+              data wants spacing for legibility; large headlines want
+              tightening for designed-headline polish. Same idiom as
+              the conventional editorial pairing of "wide kicker +
+              tight headline" R285/R286 set up (kicker spreads 0.1em
+              tracking-widest; headline tightens -0.025em tracking-
+              tight) — R554 deepens that pairing's tighten side at
+              the hover-state tier.
+              At text-lg (18px) the shift is -0.45px → -0.9px per
+              gap (~5.4px total tightening across "Command mesh" 12
+              chars). Subtle but legible when the cursor sweeps in.
+              transition-[letter-spacing] duration-200 ease-out
+              matches the 200ms hover-ls cadence used at R344/R345/
+              R347/R351/R420/R427/R431/R432/R434/R527/R539 family
+              anchors.
+              data-topo-section-title-hover-tracking attr surfaces
+              the landing tracking class for tests. */}
+          {/* Round 556 / Loop — H2 "Command mesh" gains a 2nd
+              editorial-emphasis axis: group-hover:font-bold paired
+              with R554's group-hover:tracking-tighter. Both lifts
+              fire on the same R554 wrapper's `group` flag (hover
+              anywhere in the title cluster → BOTH H2 axes intensify
+              simultaneously).
+              H2 hover signature post-R556 (2 typographic axes
+              intensify together):
+                rest    font-semibold 600 + tracking-tight   -0.025em
+                hover   font-bold      700 + tracking-tighter -0.05em
+              Editorial emphasis through TWO axes — heavier AND
+              tighter on hover. Mirrors the conventional "designed-
+              headline emphasis" idiom (heavier + tighter = more
+              authoritative; the eye reads both axes as intensifying
+              the same semantic).
+              Hover-fw family extension (6 anchors now):
+                R416  chip-row count digit       (chip group-hover)
+                R420  chrome zoom-level          (hover)
+                R425  hub-center digit           (hub hover)
+                R520  +N more flows footer       (recent panel hover)
+                R521  chrome nodeSize S/M/L      (inactive hover)
+                R556  title-block H2             (cluster group-hover) ← this round
+              Transition list extends to include 'font-weight 200ms
+              ease-out' alongside the existing 'letter-spacing'
+              200ms cadence. data-topo-section-title-hover-fw attr
+              surfaces the landing weight for tests. */}
+          <h2 className="text-lg text-white font-semibold group-hover:font-bold leading-tight tracking-tight group-hover:tracking-tighter transition-[letter-spacing,font-weight] duration-200 ease-out" data-topo-section-title data-topo-section-title-hover-tracking="tracking-tighter" data-topo-section-title-hover-fw="700">Command mesh</h2>
           </div>
         </div>
         {/* Round 328 / Loop: chip-row strip wrapper gap 2 → 2.5
@@ -1966,8 +2239,75 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // overlays the release-pop. Matching `transform-gpu`
               // promotes the layer so the scale doesn't trigger
               // layout/paint thrash. Sibling change on Grid 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 active:scale-95 transform-gpu ${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, transform 150ms ease-out' }}
+              /* Round 522 / Loop — extends R521's typography-preview
+                 idiom (chrome nodeSize hover:font-medium 400 → 500) to
+                 the Ring/Grid layout toggle's inactive variant. Pre-
+                 R522 the inactive Ring/Grid had `hover:text-cyan-300
+                 hover:bg-cyan-500/5` (R270 color + bg previews of the
+                 active state) but no typography preview — the active
+                 variant uses `font-medium` (fw 500), inactive sat at
+                 default fw 400 even on hover. R522 adds `hover:font-
+                 medium` to the inactive Ring/Grid so the rest-vs-hover
+                 transition previews the typography state the click
+                 would commit to, matching the click commits's locked
+                 weight.
+                 font-weight 150ms appended to the transition list
+                 matching the existing 150ms color/bg cadence at this
+                 button — when hover lifts color (gray-400 → cyan-300)
+                 + bg (transparent → cyan-500/5) + fw (400 → 500), all
+                 3 ease at the same 150ms beat.
+                 Hover-fw family extension (6 anchors): R416/R420/R425/
+                 R520/R521/R522. R522 closes the chrome toggle group
+                 typography preview at the last remaining toggle —
+                 layout (Ring/Grid). After R521 (nodeSize) + R522
+                 (layout), every multi-state chrome toggle has hover-
+                 fw preview on its inactive variant.
+                 data-topo-chrome-layout-hover-preview-fw="500" attr
+                 on inactive button exposes the polish for tests. */
+              /* Round 552 / Loop — chrome active-variant gains hover:
+                 text-cyan-200, lifting text one brightness tier alongside
+                 the existing hover:bg-cyan-500/20 bg deepen. Coordinated
+                 4-anchor edit (replace_all touched 4 sibling lines sharing
+                 the identical active-variant className substring):
+                   Ring   (this line)        layout === 'ring'
+                   Grid   (line ~2097)       layout === 'grid'
+                   S/M/L  (line ~12635)      nodeScale === v
+                   Fscrn  (line ~13030)      isFullscreen
+                 Pre-R552 the active variant's hover state only deepened bg
+                 (cyan-500/15 → /20); text stayed planted at cyan-300. The
+                 inactive variant already lifts text on hover (text-gray-400
+                 → text-cyan-300). R552 brings parity: active variant lifts
+                 text one tier brighter (cyan-300 → cyan-200) on hover,
+                 mirroring the inactive variant's "text brightens on hover"
+                 gesture at the next brightness step.
+                 Brightness ladder snapshot (cyan):
+                   cyan-400  brand chrome focus ring
+                   cyan-300  active-variant rest    ←─┐
+                                                      │  +1 tier on hover
+                   cyan-200  active-variant hover  ←─┘  (this round)
+                 Pure paint axis (text color); bbox/geometry unchanged.
+                 transition-colors already in the class list so the cyan-
+                 300 → cyan-200 swap eases at the existing 200ms cadence.
+                 hover-color brighten family extension at the chrome strip
+                 active-variant scope; sibling to the inactive variant's
+                 R163/R178/R179/R270 hover:text-cyan-300 idiom. */
+              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 hover:brightness-[1.15] active:scale-95 transform-gpu ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 hover:text-cyan-200 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15 hover:font-medium'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              data-topo-chrome-layout-hover-preview-fw={layout === 'ring' ? null : '500'}
+              data-topo-chrome-layout-ring-brightness-hover="1.15"
+              /* R597 — Ring/Grid segmented buttons gain hover:
+                 brightness-[1.15] (37+38th anchors in per-element
+                 brightness family, 6+7th HTML). Paired-anchor round
+                 mirroring R596's zoom +/- closure at the second
+                 segmented control. Same segmented-unity rule
+                 (brightness = pure paint, no geometry break).
+                 Inline transition list extends with 'filter 150ms
+                 ease' so brightness eases under the existing R522
+                 150ms beat that bg/color/fw share (letter-spacing
+                 + transform on their own 200ms/150ms cadences).
+                 R557 banked pattern: when an element has both
+                 inline transition AND new transition-driven axis,
+                 extend the INLINE list — not the className. */
+              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out, transform 150ms ease-out, font-weight 150ms ease, filter 150ms ease' }}
             >
               Ring
             </button>
@@ -1989,7 +2329,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // R492 sibling — Grid button picks up active:scale-95
               // press feedback + transform in transition list. Same
               // vocabulary as Ring above.
-              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 active:scale-95 transform-gpu ${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 522 sibling — Grid button mirrors Ring above:
+                 inactive variant gains `hover:font-medium` typography
+                 preview + font-weight 150ms in inline transition list.
+                 Same idiom, same family (R522 chrome layout). */
+              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 hover:brightness-[1.15] active:scale-95 transform-gpu ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 hover:text-cyan-200 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15 hover:font-medium'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
+              data-topo-chrome-layout-hover-preview-fw={layout === 'grid' ? null : '500'}
+              data-topo-chrome-layout-grid-brightness-hover="1.15"
               /* Round 268 / Loop: Grid button's left border (the
                  internal divider between Ring and Grid) picks up
                  pal.containerBorder, matching the wrapper change at
@@ -2001,8 +2347,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  the border-color flip — border-color 200ms ease-out
                  keeps R268's theme-toggle smoothness intact.
                  R492 adds `transform 150ms ease-out` so active:scale-95
-                 eases smoothly. */
-              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out, transform 150ms ease-out' }}
+                 eases smoothly.
+                 R597 sibling — Grid button mirrors Ring above:
+                 hover:brightness-[1.15] + filter 150ms ease in
+                 the inline transition list. */
+              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out, transform 150ms ease-out, font-weight 150ms ease, filter 150ms ease' }}
             >
               Grid
             </button>
@@ -2035,6 +2384,41 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // lists once for both chips to share.
             const workingAliases = onlineNodes.filter(s => s.status === 'working').map(s => s.alias);
             const onlineAliases  = onlineNodes.map(s => s.alias);
+            /* Round 565 (50-round milestone) / Loop — extend the
+               inspection-overrides-encoding family to a 7th anchor at
+               the chip-row chip scope. Computes the hovered alias's
+               status tier (same idiom as R562/R563) so each chip's
+               className can include the "lit" bg/border treatment when
+               operator hovers a node matching its tier.
+               Family progression — 7 anchors complete:
+                 R484  recent-row timestamp     alias hover
+                 R485  edge particle opacity    alias hover
+                 R486  minimap dot opacity      alias hover
+                 R561  group-label + ants-gate  member-alias hover
+                 R562  legend-swatch r + glow   member-alias status match
+                 R563  pressure-seg brightness  member-alias status match
+                 R565  chip-row chip bg/border  member-alias status match ← this round
+               Status-tier-match feedback now SATURATES across panel
+               chrome at 4 surfaces simultaneously:
+                 minimap dot (R486)
+                 legend swatch (R562)
+                 pressure-seg (R563)
+                 chip-row chip (R565)  ← this round
+               When operator hovers a 'working' node alias, ALL FOUR
+               surfaces light up in green; 'idle' → all four in teal;
+               'offline' → all four in slate. The eye gets 4-way
+               confirmation of "your inspected node is in this tier"
+               across every persistent status-reference surface. */
+            const hoveredAliasTierKey: 'working' | 'idle' | 'offline' | null = (() => {
+              if (!hoveredAlias) return null;
+              const s = onlineNodes.find(n => n.alias === hoveredAlias)
+                     ?? offlineNodes.find(n => n.alias === hoveredAlias);
+              if (!s) return null;
+              if (s.status === 'working') return 'working';
+              return offlineNodes.includes(s) ? 'offline' : 'idle';
+            })();
+            const isWorkingChipLit = hoveredAliasTierKey === 'working';
+            const isOnlineChipLit  = hoveredAliasTierKey === 'idle';
             const truncate = (list: string[]) => {
               const head = list.slice(0, 8).join(', ');
               const tail = list.length > 8 ? ` + ${list.length - 8} more` : '';
@@ -2127,13 +2511,19 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // R398 hover-lift conditional. Composes with hover:-
                   // translate-y-px for the same lift-and-compress
                   // tactile signature R493 brought to reset/fullscreen.
+                  /* R565: when isWorkingChipLit (operator hovers a working
+                     node), chip stays in its "lit" bg-green-500/15 +
+                     border-green-500/30 state at rest. Same visual as
+                     hover; member-alias-matching pins the lift without
+                     requiring cursor on the chip. */
                   className={`group 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 hover:-translate-y-px active:scale-95'
+                      ? `${isWorkingChipLit ? 'bg-green-500/15 border-green-500/30' : 'bg-green-500/10 border-green-500/20'} text-green-300 hover:bg-green-500/15 hover:border-green-500/30 hover:-translate-y-px active:scale-95`
                       : 'bg-green-500/10 text-green-300 border-green-500/20'
                   }`}
                   data-chip-hover-lift={workingCount > 0 ? 'true' : 'false'}
                   data-chip-group-hover-brighten="true"
+                  data-working-chip-member-alias-lit={isWorkingChipLit ? 'true' : 'false'}
                   data-working-chip
                   data-working-chip-aliases={workingAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'working' ? 'true' : 'false'}
@@ -2213,7 +2603,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       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 transition-[font-weight] duration-200 group-hover:font-bold" data-working-chip-digit>{workingCount}</span><span className="opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-working-chip-unit> working</span>
+                  {/* Round 539 / Loop — chip-row digit gains group-hover:
+                      tracking-wide alongside the existing R362 group-
+                      hover:font-bold. Pre-R539 the chip digit lifted
+                      only on the font-weight axis (600 → 700 on chip
+                      hover); R539 adds the kerning axis (tracking
+                      normal → tracking-wide ≈ 0.025em ≈ 0.3px on a 12px
+                      digit) so hover lifts BOTH typography axes
+                      together — same idiom R420/R517 establish at the
+                      chrome zoom-level (letter-spacing + fontWeight
+                      hover delta) and R531/R530 mirror at the panel
+                      label scope. transition-[font-weight] extends to
+                      transition-[font-weight,letter-spacing] for the
+                      smooth dual-axis tween.
+                      Sibling treatment across the 3 chip-row digits
+                      (working / online / active-links) — single concept
+                      replicated at 3 surfaces by replace_all.
+                      Hover-letter-spacing family extension (12 anchors
+                      now): R344/R345/R347/R420/R427/R431/R432/R433/
+                      R434/R517/R518 + R539 (this round). */}
+                  <span className="font-semibold transition-[font-weight,letter-spacing] duration-200 group-hover:font-bold group-hover:tracking-wide" data-working-chip-digit>{workingCount}</span><span className="opacity-70 transition-[opacity,letter-spacing] duration-200 group-hover:opacity-100 group-hover:tracking-wide" data-working-chip-unit> working</span>
                 </span>
                 <span
                   // Round 201 / Loop: online chip — mirror of the working
@@ -2232,13 +2641,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // R494 sibling — online chip joins the active:scale-95 press
                   // family (gated on onlineNodes.length > 0 clickable branch,
                   // same conditional pattern as the working chip above).
+                  /* R565: same lit-on-member-alias-match pattern as
+                     working chip — online chip routes hover to 'idle'
+                     tier (see onMouseEnter below), so its member-alias
+                     gate is `hoveredAliasTierKey === 'idle'`. */
                   className={`group 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 hover:-translate-y-px active:scale-95'
+                      ? `${isOnlineChipLit ? 'bg-cyan-500/15 border-cyan-500/30' : 'bg-cyan-500/10 border-cyan-500/20'} text-cyan-300 hover:bg-cyan-500/15 hover:border-cyan-500/30 hover:-translate-y-px active:scale-95`
                       : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'
                   }`}
                   data-chip-hover-lift={onlineNodes.length > 0 ? 'true' : 'false'}
                   data-chip-group-hover-brighten="true"
+                  data-online-chip-member-alias-lit={isOnlineChipLit ? 'true' : 'false'}
                   data-online-chip
                   data-online-chip-aliases={onlineAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'idle' ? 'true' : 'false'}
@@ -2284,7 +2698,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 >
                   {/* R337 sibling — online chip unit demotion. */}
                   {/* R362 sibling — online-chip digit gains font-semibold. */}
-                  <span className="font-semibold transition-[font-weight] duration-200 group-hover:font-bold" data-online-chip-digit>{onlineNodes.length}</span><span className="opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-online-chip-unit> online</span>
+                  {/* R539 sibling — online chip digit. Same idiom as
+                      working chip above (group-hover:tracking-wide). */}
+                  <span className="font-semibold transition-[font-weight,letter-spacing] duration-200 group-hover:font-bold group-hover:tracking-wide" data-online-chip-digit>{onlineNodes.length}</span><span className="opacity-70 transition-[opacity,letter-spacing] duration-200 group-hover:opacity-100 group-hover:tracking-wide" data-online-chip-unit> online</span>
                 </span>
               </>
             );
@@ -2299,6 +2715,31 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             const o = offlineNodes.length;
             const total = w + i + o;
             if (total === 0) return null;
+            /* Round 563 / Loop — inspection-overrides-encoding family
+               6th anchor at the pressure-bar segment scope. When
+               operator hovers a NODE ALIAS on the canvas, the segment
+               matching that node's status tier lights up with its
+               R210 brightness + R542 drop-shadow treatment — mirror
+               of R562 legend-swatch pattern at the pressure-bar scope.
+               Family progression (6 anchors):
+                 R484  recent-row timestamp     alias hover
+                 R485  edge particle opacity    alias hover
+                 R486  minimap dot opacity      alias hover
+                 R561  group-label + ants-gate  member-alias hover
+                 R562  legend-swatch r + glow   member-alias status match
+                 R563  pressure-seg brightness  member-alias status match ← this round
+               Same status-tier-match computation as R562 (banked
+               idiom): find the hovered alias's session, map to
+               working/idle/offline tier, then per-segment check
+               `hoveredAliasRowKey === key`. Computed once at IIFE
+               scope, used inside the seg() closure. */
+            const hoveredSession = hoveredAlias
+              ? (onlineNodes.find(s => s.alias === hoveredAlias) ?? offlineNodes.find(s => s.alias === hoveredAlias))
+              : null;
+            const hoveredAliasTierKey: 'working' | 'idle' | 'offline' | null = !hoveredSession ? null
+              : hoveredSession.status === 'working' ? 'working'
+              : offlineNodes.includes(hoveredSession) ? 'offline'
+              : 'idle';
             // Round 60 / Loop: each segment toggles a sticky filter via
             // `pinnedStatus`. Click the working segment → all non-working
             // nodes dim; click again → release. Segments share width with
@@ -2311,6 +2752,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             const seg = (n: number, color: string, key: 'working' | 'idle' | 'offline', label: string) => {
               if (n === 0) return null;
               const isPinned = pinnedStatus === key;
+              // R563: member-alias-matching flag — when operator hovers
+              // a node alias whose status matches this segment's tier.
+              const isMemberAliasMatching = hoveredAliasTierKey === key;
+              const isSegLit = hoveredStatus === key || isMemberAliasMatching;
               // R102: list the aliases that match this segment's bucket
               // so the title answers WHICH n, not just HOW MANY. Closes
               // the last "info-density gap" in the chip-row surfaces
@@ -2330,6 +2775,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-pressure-seg={key}
                   data-pressure-seg-aliases={matchAliases.join(',')}
                   data-pressure-seg-hovered={hoveredStatus === key ? 'true' : 'false'}
+                  data-pressure-seg-member-alias-matching={isMemberAliasMatching ? 'true' : 'false'}
+                  data-pressure-seg-lit={isSegLit ? 'true' : 'false'}
                   role="button"
                   tabIndex={0}
                   aria-pressed={isPinned}
@@ -2373,7 +2820,47 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     height: '100%',
                     cursor: 'pointer',
                     boxShadow: isPinned ? `inset 0 0 0 1px ${color}, inset 0 0 0 2px rgba(255,255,255,0.6)` : undefined,
-                    filter: hoveredStatus === key ? 'brightness(1.2)' : undefined,
+                    /* Round 542 / Loop — pressure-bar segments gain
+                       drop-shadow tier-color glow on hover, stacked
+                       on R210 brightness(1.2). Sibling to R537 legend
+                       swatch + R541 vendor chip glow at the chip-row
+                       scope — three same-pattern surfaces (legend
+                       swatch / vendor chip / pressure segment) all
+                       radiate their identity color on hover.
+                       3rd anchor in the chip-row tier-color paint
+                       glow sub-family:
+                         R537  legend swatch  row.fill (status hex)
+                         R541  vendor chip    v.color (hsl via color-mix)
+                         R542  pressure seg   color (status hex)  ← this round
+                       Stacked filter syntax (brightness + drop-shadow
+                       in same filter declaration): `brightness(1.2)
+                       drop-shadow(...)`. CSS filter supports multiple
+                       functions; they apply left-to-right. Brightness
+                       boosts the segment's own color, drop-shadow
+                       paints the outer halo. Together: hovered seg
+                       looks "lit up" with both inner glow + outer
+                       halo in its tier color.
+                       Hue: `${color}99` hex+alpha (60%) — color here
+                       is a 6-char hex (e.g., '#22c55e' for working
+                       cyber, '#0d9488' for idle light), not hsl, so
+                       hex+alpha concat works (unlike R541 vendor
+                       which needed color-mix for hsl). Banked
+                       pattern: hex sources use hex+alpha; hsl/color()
+                       sources use color-mix.
+                       2px blur (vs R537's 3px) since pressure-seg is
+                       small (h-2 = 8px tall, variable width) — a
+                       smaller blur keeps the glow tight to the
+                       segment without bleeding into neighbors.
+                       filter is paint-only; bbox unchanged; R51
+                       overlap-test invariants hold. Transition list
+                       already includes `filter` (post-R524). */
+                    /* R563: filter lifts on EITHER direct hover OR member-
+                       alias-matching (operator inspecting a node whose
+                       status matches this segment's tier). Same R210
+                       brightness + R542 drop-shadow value across both
+                       gate sources — uniform visual response, distinct
+                       semantic gates. */
+                    filter: isSegLit ? `brightness(1.2) drop-shadow(0 0 2px ${color}99)` : undefined,
                     transition: 'width 220ms ease-out, box-shadow 150ms ease-out, filter 150ms ease-out',
                   }}
                   onClick={(e) => {
@@ -2518,6 +3005,33 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               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 active:scale-95 transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedStatus(null)}
+              /* Round 543 / Loop — status filter pill gains always-on
+                 tier-color drop-shadow when rendered. Pre-R543 the
+                 pill carried bg-tint + tier-color text + border but
+                 no outer paint extent — it sat as a flat tinted chip
+                 in the chip row. R543 adds an outer glow at the
+                 pill's text color so the pill radiates a soft tier-
+                 colored halo signaling "this filter is active." Pin
+                 pill only renders when pinnedStatus is set (the JSX
+                 gate above), so the drop-shadow appearing reinforces
+                 the visual "active pin" state.
+                 Sibling pattern: R477 legend pin-ring also paints a
+                 pin-gated tier-color drop-shadow. Pin pill follows
+                 the same "pin-gated paint glow" semantics but at the
+                 chip-row scope vs the panel-row scope. The chip-row
+                 tier-color glow trio (R537/R541/R542 hover-gated)
+                 plus R543 (pin-gated, this round) closes the chip-
+                 row paint-glow family across BOTH gate types
+                 (hover for transient affordance, pin for sticky
+                 active-state visual).
+                 Hue: explicit tier color (extracted from the
+                 existing `color` ternary). 0x99 alpha (~60%) +
+                 3px blur. Stays inside the same color hierarchy
+                 as the pill's own text/border (currentColor).
+                 R543 status pill scope only — R543's pattern can
+                 future-extend to group/vendor/edge filter pills
+                 (3 more variants at lines 2683/2755/2824). Out of
+                 scope to keep R543 single-pill. */
               style={{
                 background: pinnedStatus === 'working' ? (isLight ? '#05966914' : '#22c55e1f')
                           : pinnedStatus === 'idle'    ? (isLight ? '#0d948814' : '#2dd4bf1f')
@@ -2527,6 +3041,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           : (isLight ? '#475569' : '#9ca3af'),
                 borderColor: 'currentColor',
                 cursor: 'pointer',
+                filter: `drop-shadow(0 0 3px ${
+                  pinnedStatus === 'working' ? (isLight ? '#047857' : '#86efac')
+                  : pinnedStatus === 'idle'  ? (isLight ? '#0f766e' : '#5eead4')
+                  : (isLight ? '#475569' : '#9ca3af')
+                }99)`,
               }}
             >
               {/* Round 412 / Loop: filter pin pill VALUE picks up the
@@ -2540,7 +3059,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   to R333/R335-R341/R362/R369/R389/R410. data-filter-
                   value attr surfaces the value span for tests.
                   4-pill replace family — status / group / vendor / edge. */}
-              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedStatus}</span><span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-[opacity,letter-spacing] duration-200 group-hover:opacity-100 group-hover:tracking-wide" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedStatus}</span><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`}
@@ -2559,7 +3078,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    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"
+                /* Round 547 / Loop — extends pill × close-button hover
+                   gesture from scale-110 (R356) + opacity-70 to ALSO
+                   include rotate-12 on hover. Pre-R547 the × dimmed
+                   and grew on hover; R547 adds a 12° twist so the
+                   close action telegraphs "discarding/spinning away"
+                   with a small delight gesture. Composes with
+                   transition-transform (existing) — Tailwind's
+                   hover:rotate-12 + hover:scale-110 stack into one
+                   transform under the same 200ms ease-out tween.
+                   Applied to all 4 pill × buttons (status / group /
+                   vendor / edge) via replace_all since the className
+                   is identical. Closes the pill × hover gesture
+                   vocabulary at 3 axes:
+                     hover:opacity-70  paint dim
+                     hover:scale-110   geometry grow (R356)
+                     hover:rotate-12   geometry twist (R547, this round)
+                   Hover-gesture parity across the 4-pill family. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 hover:rotate-12 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2588,15 +3124,42 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               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 active:scale-95 transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedGroup(null)}
+              /* Round 544 / Loop — extends R543 pin-active filter-pill
+                 drop-shadow pattern to the GROUP pill (2nd of 4 pill
+                 variants). Pre-R544 the group pill carried bg-tint +
+                 pal.legendAccent text/border but no outer paint glow.
+                 R544 adds the matching cyan-accent drop-shadow so the
+                 group pin pill radiates the same paint glow as R543
+                 status pill — pin-active visual signal at chip-row
+                 scope.
+                 Hue: pal.legendAccent (cyber #67e8f9 cyan-300 /
+                 light #0d9488 teal-600). Uses color-mix() syntax
+                 because pal.legendAccent may resolve to hex; same
+                 syntax works for both hex and hsl sources (banked
+                 R541 lesson). 60% alpha + 3px blur — same intensity
+                 as R543 status pill so the pin-active visual signal
+                 reads with matching brightness across pill variants.
+                 Pin-active tier-color paint glow sub-family
+                 (CLOSED progressively):
+                   R477  legend pin-ring  (panel-row, row.fill)
+                   R543  status pill      (chip-row, tier-color)
+                   R544  group pill       (chip-row, legendAccent)
+                       ← this round
+                 Out of scope: vendor pill (line ~2755) + edge pill
+                 (line ~2824) — can future-extend in subsequent
+                 rounds (R545/R546). Both use the same R543 idiom:
+                 always-on drop-shadow when rendered, color from the
+                 pill's existing text color. */
               style={{
                 background: isLight ? '#67e8f914' : '#67e8f91f',
                 color: pal.legendAccent,
                 borderColor: 'currentColor',
                 cursor: 'pointer',
+                filter: `drop-shadow(0 0 3px color-mix(in srgb, ${pal.legendAccent} 60%, transparent))`,
               }}
             >
               {/* R412: see status pill above — filter value fw=600 data tier. */}
-              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedGroup}</span><span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-[opacity,letter-spacing] duration-200 group-hover:opacity-100 group-hover:tracking-wide" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedGroup}</span><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}`}
@@ -2615,7 +3178,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    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"
+                /* Round 547 / Loop — extends pill × close-button hover
+                   gesture from scale-110 (R356) + opacity-70 to ALSO
+                   include rotate-12 on hover. Pre-R547 the × dimmed
+                   and grew on hover; R547 adds a 12° twist so the
+                   close action telegraphs "discarding/spinning away"
+                   with a small delight gesture. Composes with
+                   transition-transform (existing) — Tailwind's
+                   hover:rotate-12 + hover:scale-110 stack into one
+                   transform under the same 200ms ease-out tween.
+                   Applied to all 4 pill × buttons (status / group /
+                   vendor / edge) via replace_all since the className
+                   is identical. Closes the pill × hover gesture
+                   vocabulary at 3 axes:
+                     hover:opacity-70  paint dim
+                     hover:scale-110   geometry grow (R356)
+                     hover:rotate-12   geometry twist (R547, this round)
+                   Hover-gesture parity across the 4-pill family. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 hover:rotate-12 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2660,15 +3240,35 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               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 active:scale-95 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)}
+              /* Round 545 / Loop — extends pin-active filter-pill drop-
+                 shadow pattern to VENDOR pill (3rd of 4 pill variants
+                 after R543 status + R544 group). vendorColor is HSL
+                 format (banked R541 lesson — vendorDist.color sources
+                 from mono.text in vendorIdentity.ts, which is `hsl(...)`),
+                 so the filter uses color-mix() syntax — same as R544.
+                 60% alpha + 3px blur, matching R543/R544 intensity for
+                 consistent pin-active visual signal across all pill
+                 variants.
+                 Pin-active tier-color paint glow sub-family (progressive
+                 extension, 1 pill variant remaining):
+                   R477  legend pin-ring  (panel-row, row.fill, hex+alpha)
+                   R543  status pill      (chip-row, tier-color, hex+alpha)
+                   R544  group pill       (chip-row, legendAccent, color-mix)
+                   R545  vendor pill      (chip-row, vendorColor, color-mix)
+                       ← this round
+                 Out of scope: edge pill (line ~2824 pre-R545, now ~2900+).
+                 Final 1/4 pill remaining for a future round closes the
+                 sub-family. */
               style={{
                 background: `${vendorColor}1f`,
                 color: vendorColor,
                 borderColor: 'currentColor',
                 cursor: 'pointer',
+                filter: `drop-shadow(0 0 3px color-mix(in srgb, ${vendorColor} 60%, transparent))`,
               }}
             >
               {/* R412: see status pill above — filter value fw=600 data tier. */}
-              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedVendor}</span><span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-[opacity,letter-spacing] duration-200 group-hover:opacity-100 group-hover:tracking-wide" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedVendor}</span><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}`}
@@ -2687,7 +3287,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    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"
+                /* Round 547 / Loop — extends pill × close-button hover
+                   gesture from scale-110 (R356) + opacity-70 to ALSO
+                   include rotate-12 on hover. Pre-R547 the × dimmed
+                   and grew on hover; R547 adds a 12° twist so the
+                   close action telegraphs "discarding/spinning away"
+                   with a small delight gesture. Composes with
+                   transition-transform (existing) — Tailwind's
+                   hover:rotate-12 + hover:scale-110 stack into one
+                   transform under the same 200ms ease-out tween.
+                   Applied to all 4 pill × buttons (status / group /
+                   vendor / edge) via replace_all since the className
+                   is identical. Closes the pill × hover gesture
+                   vocabulary at 3 axes:
+                     hover:opacity-70  paint dim
+                     hover:scale-110   geometry grow (R356)
+                     hover:rotate-12   geometry twist (R547, this round)
+                   Hover-gesture parity across the 4-pill family. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 hover:rotate-12 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2726,11 +3343,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               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 active:scale-95 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)}
+              /* Round 546 / Loop — CLOSES pin-active filter-pill drop-
+                 shadow sub-family at the 4th and final pill variant
+                 (edge pill). R543 (status) + R544 (group) + R545
+                 (vendor) covered the first three; R546 closes at
+                 edge.
+                 Pin-active tier-color paint glow sub-family CLOSED
+                 (4 anchors):
+                   R477  legend pin-ring  (panel-row, row.fill)
+                   R543  status pill      (chip-row, tier-color text)
+                   R544  group pill       (chip-row, legendAccent)
+                   R545  vendor pill      (chip-row, vendorColor)
+                   R546  edge pill        (chip-row, pal.flowEdge)
+                       ← this round, family CLOSED
+                 All 4 filter pin pills now radiate paint glow in the
+                 same hue family as their text/border on render —
+                 pin-active visual signal uniform across the chip-row
+                 pill family.
+                 pal.flowEdge is theme-driven (dynamic); color-mix
+                 syntax safe-defaults regardless of resolved format
+                 (banked R541/R544/R545 pattern). 60% alpha + 3px blur
+                 — same intensity as R543/R544/R545 for consistent
+                 cross-pill visual signal. */
               style={{
                 background: isLight ? `${pal.flowEdge}14` : `${pal.flowEdge}1f`,
                 color: pal.flowEdge,
                 borderColor: 'currentColor',
                 cursor: 'pointer',
+                filter: `drop-shadow(0 0 3px color-mix(in srgb, ${pal.flowEdge} 60%, transparent))`,
               }}
             >
               {/* R412: filter pin pill value (edge variant) picks up fw=600.
@@ -2783,7 +3423,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    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"
+                /* Round 547 / Loop — extends pill × close-button hover
+                   gesture from scale-110 (R356) + opacity-70 to ALSO
+                   include rotate-12 on hover. Pre-R547 the × dimmed
+                   and grew on hover; R547 adds a 12° twist so the
+                   close action telegraphs "discarding/spinning away"
+                   with a small delight gesture. Composes with
+                   transition-transform (existing) — Tailwind's
+                   hover:rotate-12 + hover:scale-110 stack into one
+                   transform under the same 200ms ease-out tween.
+                   Applied to all 4 pill × buttons (status / group /
+                   vendor / edge) via replace_all since the className
+                   is identical. Closes the pill × hover gesture
+                   vocabulary at 3 axes:
+                     hover:opacity-70  paint dim
+                     hover:scale-110   geometry grow (R356)
+                     hover:rotate-12   geometry twist (R547, this round)
+                   Hover-gesture parity across the 4-pill family. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 hover:rotate-12 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -3105,6 +3762,41 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     // for older browsers the chip falls back to its idle
                     // transparent bg (graceful degradation — the canvas-
                     // dim effect still fires regardless).
+                    /* Round 541 / Loop — vendor letter chip gains drop-
+                       shadow glow on hover/pin using its OWN vendor
+                       identity color (v.color). Sibling to R537 legend-
+                       swatch tier-color glow at the chip-row scope.
+                       Pre-R541 the vendor chip lifted on multiple
+                       axes (R354 inner-glyph scale-1.1, R202 bg color-
+                       mix tint, R180 box-shadow pin-mirror inset, R401
+                       hover-translate-y -1px, R496 active:scale-95
+                       press) but no paint-axis glow extending past
+                       the chip's bbox. R541 adds the outer glow at
+                       the paint axis so the vendor chip's identity
+                       color radiates beyond the chip on attention —
+                       same idiom as legend swatch tier-color glow.
+                       2-tier alpha ladder (mirrors R538 group-label):
+                         pin (committed)   v.color 99 (~60%)
+                         hover (preview)   v.color 66 (~40%)
+                         rest              none
+                       Pin is brighter to distinguish locked vs preview
+                       at the paint axis. The R180 inset box-shadow
+                       (pin-mirror) and R541 outer drop-shadow compose
+                       at pin — inside chrome reads as "this is pinned"
+                       (inset white double-ring), outside paint reads
+                       as "vendor identity is locked" (vendor-colour
+                       outer glow). Hover gets only the outer glow.
+                       3px blur tuned to read as soft chip-halo without
+                       overwhelming adjacent chips in the chip row.
+                       filter property is in the .anet-topo-chip-focus
+                       class transition list (R524 banked fix), so the
+                       filter eases at 200ms naturally.
+                       Drop-shadow visual-polish family — R541 adds
+                       chip-row tier-color paint glow as another anchor
+                       in the same family pattern R537 established.
+                       data-vendor-glow attr ('pin' | 'hover' | 'false')
+                       exposes the gate state for tests. */
+                    data-vendor-glow={isPinned ? 'pin' : hoveredVendor === v.initial ? 'hover' : 'false'}
                     style={{
                       cursor: 'pointer',
                       backgroundColor: (hoveredVendor === v.initial && !isPinned)
@@ -3113,7 +3805,15 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       boxShadow: isPinned
                         ? `inset 0 0 0 1px ${v.color}, inset 0 0 0 2px rgba(255,255,255,0.45)`
                         : undefined,
-                      transition: 'box-shadow 150ms ease-out, background-color 200ms ease-out',
+                      /* R578 sibling — vendor chip stacks brightness(1.15)
+                         onto R541 drop-shadow. Closes chip-row tier-color
+                         glow trio at consistent stacked-filter pattern. */
+                      filter: isPinned
+                        ? `drop-shadow(0 0 3px color-mix(in srgb, ${v.color} 60%, transparent)) brightness(1.15)`
+                        : hoveredVendor === v.initial
+                          ? `drop-shadow(0 0 3px color-mix(in srgb, ${v.color} 40%, transparent)) brightness(1.15)`
+                          : undefined,
+                      transition: 'box-shadow 150ms ease-out, background-color 200ms ease-out, filter 200ms ease-out',
                     }}
                     onMouseEnter={() => setHoveredVendor(v.initial)}
                     onMouseLeave={() => setHoveredVendor(prev => prev === v.initial ? null : prev)}
@@ -3205,7 +3905,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         since the glyph (R369 fw=600) stays at full
                         opacity. R333 :{count} format preserved. */}
                     <span
-                      className="text-gray-400 tabular-nums opacity-70 transition-opacity duration-200 group-hover:opacity-100"
+                      className="text-gray-400 tabular-nums opacity-70 transition-[opacity,letter-spacing] duration-200 group-hover:opacity-100 group-hover:tracking-wide"
                       data-vendor-letter-count-suffix
                     >:{v.count}</span>
                   </span>
@@ -3355,7 +4055,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     chip-internal-hierarchy arc. data-active-links-
                     chip-unit exposes the unit span for tests. */}
                 {/* R362 sibling — active-links chip digit gains font-semibold. */}
-                <span className="font-semibold transition-[font-weight] duration-200 group-hover:font-bold" data-active-links-chip-digit>{flowLinks.length}</span><span className="opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-active-links-chip-unit> active link{flowLinks.length === 1 ? '' : 's'}</span>
+                {/* R539 sibling — active-links chip digit. Same idiom
+                    as working + online above. */}
+                <span className="font-semibold transition-[font-weight,letter-spacing] duration-200 group-hover:font-bold group-hover:tracking-wide" data-active-links-chip-digit>{flowLinks.length}</span><span className="opacity-70 transition-[opacity,letter-spacing] duration-200 group-hover:opacity-100 group-hover:tracking-wide" 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
@@ -3569,6 +4271,36 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  on the canvas root for non-visual consumers.
              Composed from existing onlineNodes / workingCount /
              offlineNodes / flowLinks — no new state. */
+          /* Round 502 / Loop — categorical density-tier paired with the
+             R469 numeric counts. data-topo-fleet-density-tier classifies
+             the fleet size into 5 buckets so external consumers (CSS
+             selectors, Playwright probes, future density-conditional
+             polish gates like R109 dense-label collapse at 16+ nodes)
+             can branch on a stable tier name without re-deriving the
+             threshold logic from the raw numeric. Buckets:
+               'empty'      — onlineNodes.length === 0
+               'sparse'     — 1-3 nodes
+               'normal'     — 4-15 nodes
+               'dense'      — 16-30 nodes  (matches R109 collapse gate)
+               'very-dense' — 31+ nodes
+             Picks the gate boundaries that already drive CONDITIONAL
+             RENDER decisions elsewhere (R109 denseLayout = >16, R110
+             plain-text fallback) so the tier name is semantically
+             aligned with the visual mode the canvas already switches
+             to. Composed from existing onlineNodes — no new state.
+             12th attr in the canvas state surface set (R462/R466/R467/
+             R469×4/R471×2/R487/R488/R502). 12 attrs covers: build
+             identity, transient/sticky inspection modes, fleet split
+             numerics, fleet density tier, canvas layout/theme, canvas
+             zoom, hover identity. A test harness can snapshot the
+             full canvas state with 12 getAttribute calls. */
+          data-topo-fleet-density-tier={
+            onlineNodes.length === 0 ? 'empty' :
+            onlineNodes.length <= 3 ? 'sparse' :
+            onlineNodes.length <= 15 ? 'normal' :
+            onlineNodes.length <= 30 ? 'dense' :
+            'very-dense'
+          }
           data-topo-online-count={onlineNodes.length}
           data-topo-working-count={workingCount}
           data-topo-offline-count={offlineNodes.length}
@@ -3634,6 +4366,119 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
              categorical) — separate dedicated attrs if/when needed.
              Root svg attribute set now 11 attrs total. */
           data-topo-hovered-alias={hoveredAlias ?? ''}
+          /* Round 504 / Loop — categorical pin-aspect attr paired with
+             R467 any-pinned boolean and R488 hovered-alias identity.
+             Pre-R504 the canvas state surface set told tests WHETHER
+             any pin was active (R467 boolean) but tests had to enumerate
+             4 individual state vars to determine WHICH pin axis fired:
+                 pinnedStatus    legend-row status filter
+                 pinnedGroup     prefix-cluster lock
+                 pinnedVendor    vendor-chip filter
+                 pinnedEdgeKey   edge-focus
+             R504 surfaces the active aspect as a single categorical
+             attribute: data-topo-pinned-aspect ∈
+                 'none'    no pin active
+                 'status'  pinnedStatus only
+                 'group'   pinnedGroup only
+                 'vendor'  pinnedVendor only
+                 'edge'    pinnedEdgeKey only
+                 'multi'   2 or more pins active simultaneously
+             ('multi' covers cross-cutting filters — e.g. user pins
+             status='working' AND vendor='claude' simultaneously to
+             narrow the canvas. Each pin axis is independently
+             dismissable via Esc / individual chip click, so multi
+             states are reachable and worth surfacing as a distinct
+             tier.)
+             13th attr in the canvas state surface set after R502.
+             Composed from 4 existing state vars — no new state. */
+          /* Round 512 / Loop — 14th canvas state attr. groupBoxes.length
+             surfaces the count of cluster boxes currently rendered in
+             grid layout (always 0 in ring). Paired with R502 categorical
+             density tier + R469 fleet numerics for a complete cluster-
+             cardinality surface:
+               R469  data-topo-online-count       node-count
+               R502  data-topo-fleet-density-tier categorical
+               R512  data-topo-cluster-count      cluster-count  ← this round
+             Use cases:
+               - Playwright: assert orphan-band existence by
+                 `cluster-count === N + 1` vs prefix-only `=== N`
+               - external CSS: `[data-topo-cluster-count='1']` to apply
+                 single-cluster grid-specific layout adjustments
+               - future polish gates: cluster-count > N could trigger
+                 dense-grid mode
+             Composed from existing `groupBoxes.length` — no new state.
+             Always renders (0 in ring layout, N in grid), so tests can
+             rely on attribute presence + value. */
+          data-topo-cluster-count={groupBoxes.length}
+          /* Round 513 / Loop — 15th canvas state attr. Surfaces the
+             user's prefers-reduced-motion preference directly on the
+             root SVG so external CSS / Playwright tests can branch on
+             a11y state without re-reading the media query.
+             reducedMotion is already in component scope (R29 a11y
+             blanket reads it via a useEffect listener); R513 just
+             exposes it as a stable attribute handle.
+             Use cases:
+               - Playwright: assert reduced-motion gates from one attr
+                 read instead of mocking media-query state per test
+               - External CSS hooks: `[data-topo-prefers-reduced-motion=
+                 "true"]` to apply paint-only overrides (e.g. mute
+                 hover glows entirely on a11y instead of just
+                 disabling transitions)
+               - Future polish rounds: any motion-gated render can
+                 read this attr server-side without the media-query
+                 hydration mismatch risk
+             'true' / 'false' string values (consistent with R466/R467
+             boolean attrs). */
+          data-topo-prefers-reduced-motion={reducedMotion ? 'true' : 'false'}
+          /* Round 515 / Loop — 16th canvas state attr. Surfaces the
+             fullscreen-mode state directly on root SVG so external
+             consumers don't have to traverse the chrome strip's
+             `data-topo-chrome-fullscreen-active` button attr (which
+             measures the BUTTON state, not the canvas state — they
+             agree, but reading from the root is semantically cleaner
+             for canvas-state probes).
+             Composed from existing isFullscreen React state (R103
+             fullscreen toggle).
+             Use cases:
+               - Playwright: assert canvas mode in one attr read
+                 (paired with R471 data-topo-layout for ring/grid +
+                 R487 data-topo-zoom for zoom level + R513 reduced-
+                 motion for a11y mode = 4-axis canvas-mode probe)
+               - External CSS: `[data-topo-fullscreen="true"]` to
+                 apply fullscreen-only paint adjustments outside the
+                 React tree (e.g. body-level scrollbar hide)
+             'true' / 'false' string values (consistent with R466/
+             R467/R513 boolean attrs). */
+          data-topo-fullscreen={isFullscreen ? 'true' : 'false'}
+          /* Round 516 / Loop — 17th canvas state attr. Surfaces the
+             grid layout's content-bottom y-coordinate so tests can
+             verify grid content doesn't extend past the viewBox or
+             collide with chrome elements positioned below the canvas.
+             Composed from existing gridContentBottom derived state
+             (computed at line ~915 from gy0 + totalRows * cellH + 8).
+             In ring layout, gridContentBottom is 0 (no grid). In grid
+             layout it's the actual pixel y-coordinate where the
+             cluster bands end.
+             Use cases:
+               - Playwright: assert grid layout doesn't exceed viewBox
+                 height (680) without re-computing the layout math
+               - External CSS: `[data-topo-grid-content-bottom='0']` to
+                 distinguish ring-mode (no grid content) from grid-mode
+                 in CSS without parsing layout attr
+               - Future polish gates: if cluster count grows large
+                 enough to push grid bottom past viewBox, can trigger
+                 a 'compact' mode automatically */
+          data-topo-grid-content-bottom={gridContentBottom}
+          data-topo-pinned-aspect={(() => {
+            const aspects: string[] = [];
+            if (pinnedStatus) aspects.push('status');
+            if (pinnedGroup) aspects.push('group');
+            if (pinnedVendor) aspects.push('vendor');
+            if (pinnedEdgeKey) aspects.push('edge');
+            if (aspects.length === 0) return 'none';
+            if (aspects.length === 1) return aspects[0];
+            return 'multi';
+          })()}
           /* Round 466 / Loop — aggregate hover signal on the root SVG.
              Exposes a single boolean `data-topo-any-hover` that
              reflects whether ANY hover state in the topology is
@@ -3876,7 +4721,38 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 const x = ((seed * 13) % 1000);
                 const y = ((seed * 7) % 680);
                 const r = (i % 3 === 0) ? 1.2 : 0.7;
-                return <circle key={i} cx={x} cy={y} r={r} fill="#a5b4fc" opacity={0.35 + (i % 4) * 0.05} data-topo-starfield-dot={i} />;
+                /* Round 523 / Loop — 配色 family extension to a 3rd anchor.
+                   Pre-R523 all 14 starfield dots painted at the same
+                   hardcoded `#a5b4fc` (indigo-300). The starfield's role
+                   is atmospheric depth (R45, R291 comment), but a flat
+                   single-hue field reads more like a regular dot grid
+                   than a star field — real starlight has color
+                   temperature variation (blue-white hot stars / yellow
+                   sun-like / cool red).
+                   R523 cycles a 3-color deterministic rotation based on
+                   `i % 3`:
+                     i % 3 === 0  →  #a5b4fc  indigo-300  (original, cool)
+                     i % 3 === 1  →  #67e8f9  cyan-300    (cyber accent, hot)
+                     i % 3 === 2  →  #cbd5e1  slate-300   (neutral, warm white)
+                   All three hues sit inside the cyber theme's palette
+                   family (indigo / cyan / slate) so the starfield reads
+                   varied-but-coherent rather than rainbow. At opacity
+                   0.5 (parent <g>) * 0.35-0.50 (per-dot) the temperature
+                   shifts are gentle but perceptible — closes the gap
+                   between 'dot grid' and 'star field'.
+                   配色 family extension (3 anchors): R509/R510 hub-
+                   highlight cross-theme fill + R523 starfield color
+                   temperature variation. Light theme unaffected
+                   (starfield gated `!isLight` so light theme stays
+                   clean per R45's original 'white surface stays clean'
+                   intent).
+                   Deterministic on `i` — no JS hydration mismatch,
+                   same SSR/client output. data-topo-starfield-dot-hue
+                   attr exposes the resolved hue category for tests. */
+                const hues = ['#a5b4fc', '#67e8f9', '#cbd5e1'] as const;
+                const hueNames = ['indigo', 'cyan', 'slate'] as const;
+                const hueIdx = i % 3;
+                return <circle key={i} cx={x} cy={y} r={r} fill={hues[hueIdx]} opacity={0.35 + (i % 4) * 0.05} data-topo-starfield-dot={i} data-topo-starfield-dot-hue={hueNames[hueIdx]} />;
               })}
             </g>
           )}
@@ -4414,8 +5290,60 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-topo-hub-spoke-stroke-width={spokeStrokeWidth}
                   data-topo-hub-spoke-stroke-width-active="2.25"
                   data-topo-hub-spoke-linecap="round"
+                  /* Round 533 / Loop — extends drop-shadow visual-polish
+                     family to a 9th anchor: hub spokes gain filter:drop-
+                     shadow glow on hub-hover. Subtle 1.5px cyan/teal blur
+                     applied across ALL spokes simultaneously when the
+                     user hovers the hub — the network mesh visually
+                     "lights up" in response to focal attention. Sibling
+                     to R476 hub-digit + R532 hub-highlight glow at the
+                     same gate (hoveredHub && !reducedMotion); together
+                     the three anchors (digit + highlight disc + spokes)
+                     form a unified focal-cluster glow that signals
+                     "you're focused on the hub" across geometry,
+                     paint, and mesh-extent axes.
+                     Theme-aware glow palette matches the spoke stroke
+                     family:
+                       light: rgba(13, 148, 136, 0.4)   teal-600
+                       cyber: rgba(34, 211, 238, 0.4)   cyan-400
+                     0.4 alpha keeps the glow subtle across N spokes
+                     (30+ at peak fleet sizes) — loud bloom across many
+                     edges would compete with the focal cluster itself.
+                     1.5px blur is conservative; tuned so each spoke
+                     gains a faint outer halo rather than a wide bloom.
+                     filter is paint-only; bbox unchanged; existing
+                     R241 transition list extends to 'filter 250ms
+                     ease-out' matching the spoke transition cadence
+                     (250ms, distinct from the 200ms hub-cluster
+                     cadence — spokes ease slightly slower since they
+                     respond to per-alias state, not just hub state).
+                     data-topo-hub-spoke-glow attr exposes the gate
+                     state for tests. */
+                  data-topo-hub-spoke-glow={!reducedMotion && hoveredHub ? 'true' : 'false'}
+                  /* Round 580 (65-round milestone) — hub-spokes complete
+                     the hub-cluster brightness coverage at 5/5 concentric
+                     elements. Stacks brightness(1.15) onto R533's drop-
+                     shadow — same R564/R570/R571/R572/R573/R574/R575/
+                     R577/R578/R579 stacked-filter pattern.
+                     Hub-cluster brightness now FULLY CLOSED:
+                       hub digit       (R575)  innermost typo
+                       hub-highlight   (R574)  middle disc
+                       hub-hover-ring  (R579)  outer ring boundary
+                       hub-halo        (R577)  outermost atmosphere
+                       hub-spokes      (R580)  mesh radial lines ← this round
+                     5 concentric elements + N mesh radial lines all lift
+                     uniformly through stacked drop-shadow + brightness on
+                     hub-hover. The hub focal cluster now responds as ONE
+                     unified motion-coherent paint pulse from center
+                     outward through every layer. */
+                  data-topo-hub-spoke-brightness={!reducedMotion && hoveredHub ? '1.15' : '1'}
                   style={{
-                    transition: 'stroke 250ms ease-out, stroke-width 250ms ease-out, opacity 250ms ease-out',
+                    transition: 'stroke 250ms ease-out, stroke-width 250ms ease-out, opacity 250ms ease-out, filter 250ms ease-out',
+                    filter: !reducedMotion && hoveredHub
+                      ? (isLight
+                          ? 'drop-shadow(0 0 1.5px rgba(13, 148, 136, 0.4)) brightness(1.15)'
+                          : 'drop-shadow(0 0 1.5px rgba(34, 211, 238, 0.4)) brightness(1.15)')
+                      : undefined,
                     ...(isActiveSpoke ? {} : {
                       animationDelay: `${-(idx * 0.25)}s`,
                       // CSS var consumed by `.anet-topo-spoke-flow`
@@ -4436,6 +5364,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               a node click. Restrained dashed container + group-name label. */}
           {groupBoxes.map((box, boxIdx) => {
             const isHovered = activeGroup === box.key;
+            /* Round 561 / Loop — inspection-overrides-encoding family
+               4th anchor. When operator hovers a NODE ALIAS on the
+               canvas, the group-label that CONTAINS that node lifts
+               to full opacity, signalling "this is the cluster
+               whose member you're inspecting".
+               Family progression (4 anchors now):
+                 R484  recent-row timestamp   brightens on alias hover
+                 R485  edge particle opacity  lifts on alias hover
+                 R486  minimap dot opacity    lifts on alias hover
+                 R561  group-label opacity    lifts on member-alias hover ← this round
+               Pure paint axis (opacity only) — same restraint as
+               R486. NOT bundled into the existing `isHovered` flag
+               so the marching-ants live animation (gated on
+               `!isPinned && !isHovered`) keeps running; the box
+               rect stroke widen / fill brighten / letter-spacing
+               / filter glow gates stay tied to direct label
+               hover/pin semantics.
+               Mirror of R486's pattern: `hoveredAlias === s.alias`
+               extends a focused opacity branch independent from
+               the rest-state encoding (online/offline). R561 here:
+               `groupKeys[hoveredAlias] === box.key` extends a
+               cluster-awareness opacity branch independent from
+               the existing isHovered / isPinned semantics. */
+            const isMemberAliasHovered = !!hoveredAlias && groupKeys[hoveredAlias] === box.key;
             // R68: distinguish "locked by click" from "currently hovered".
             // R63 made pinned and hovered identical (both hit isHovered
             // via activeGroup). A user with one team pinned should see at
@@ -4563,12 +5515,75 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   //   pinned   → fill 0.08 / 0.13, stroke 3 px (locked)
                   //   hovered  → fill 0.05 / 0.09, stroke 2 px (inspecting)
                   //   idle     → fill 0.025 / 0.045, stroke 1.5 px dashed
-                  fillOpacity={isPinned ? (isLight ? 0.08 : 0.13)
-                              : isHovered ? (isLight ? 0.05 : 0.09)
-                              : (isLight ? 0.025 : 0.045)}
+                  /* Round 506 / Loop — category-differentiation family
+                     3rd anchor. Orphan band rest-state fillOpacity drops
+                     slightly below prefix-group rest (0.025/0.045 →
+                     0.015/0.028). Adds a 3rd independent paint
+                     differentiator to the orphan visual signature:
+                       R499  fontStyle: italic    (label text)
+                       R503  '3 6' dash pattern   (rect stroke)
+                       R506  lower fillOpacity    (rect fill)  ← this round
+                     Three independent channels (typography + stroke
+                     pattern + fill density) collectively encode the
+                     catchall semantic at rest. Pin and hover branches
+                     UNCHANGED (still 0.05/0.09 hover, 0.08/0.13 pin) —
+                     orphan box gets full visual emphasis on inspection
+                     identical to prefix groups; the differentiation
+                     lives ONLY in the unsolicited rest state. The
+                     ~40% drop (0.045 → 0.028 cyber, 0.025 → 0.015
+                     light) is subtle enough that the orphan box stays
+                     visible at rest, just quieter — matches the
+                     "misc bucket, less attention-deserving" semantic
+                     without losing the visual anchor.
+                     Pure paint axis; bbox unchanged; R51 SVG sentinel
+                     safety untouched (overlap-test gates to g[data-
+                     node], cluster rect invisible to it).
+                     data-group-box-fill-opacity attr surfaces the
+                     resolved value for tests. */
+                  fillOpacity={
+                    isPinned ? (isLight ? 0.08 : 0.13)
+                    : isHovered ? (isLight ? 0.05 : 0.09)
+                    : box.isOrphan ? (isLight ? 0.015 : 0.028)
+                    : (isLight ? 0.025 : 0.045)
+                  }
+                  data-group-box-fill-opacity={
+                    isPinned ? (isLight ? 0.08 : 0.13)
+                    : isHovered ? (isLight ? 0.05 : 0.09)
+                    : box.isOrphan ? (isLight ? 0.015 : 0.028)
+                    : (isLight ? 0.025 : 0.045)
+                  }
                   stroke={(isPinned || isHovered) ? pal.legendAccent : pal.ringStroke}
                   strokeWidth={isPinned ? 3 : isHovered ? 2 : 1.5}
-                  strokeDasharray={(isPinned || isHovered) ? 'none' : '6 6'}
+                  /* Round 503 / Loop — category-differentiation family
+                     2nd anchor (R499 = orphan label italic, 1st anchor).
+                     Orphan band rest-state strokeDasharray switches from
+                     '6 6' (prefix-group default) to '3 6' (tighter
+                     dashes). Pre-R503 the rect dash pattern was uniform
+                     across all bands; combined with R499's italic label,
+                     the orphan box now has TWO independent paint/
+                     typography differentiators at rest:
+                       R499  fontStyle: italic  (label text)
+                       R503  '3 6' dash pattern (rect stroke)  ← this round
+                     The R85 marching-ants animation continues to work
+                     with the new dash size (uses --march-dur custom
+                     property, dash-length-agnostic) — orphan's ants
+                     just have a different visual rhythm than prefix-
+                     group ants, reinforcing the catchall semantic.
+                     Pinned/hovered orphan still gets 'none' (solid
+                     stroke) so the hover/pin affordance is preserved
+                     — the differentiation lives ONLY in the rest
+                     state, never blocking inspection.
+                     Pure paint axis; no geometry change; bbox unchanged
+                     (strokeDasharray is paint-only). R51 SVG sentinel
+                     safety untouched (overlap-test gates to g[data-
+                     node], this cluster rect is invisible to it).
+                     data-group-box-orphan attr surfaces the gate for
+                     tests + future polish references. */
+                  strokeDasharray={
+                    (isPinned || isHovered) ? 'none' :
+                    box.isOrphan ? '3 6' : '6 6'
+                  }
+                  data-group-box-orphan={box.isOrphan ? 'true' : 'false'}
                   /* Round 380 / Loop: cluster box stroke gets round
                      linecap + round linejoin. Sibling SVG stroke-
                      softening polish to R378 flow-rail linecap + R379
@@ -4598,6 +5613,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-group-box-linecap="round"
                   data-group-box-linejoin="round"
                   data-group-box-geom-transition="x,y,width,height"
+                  data-group-box-brightness={(isPinned || isHovered) ? '1.15' : '1'}
                   // 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
@@ -4614,10 +5630,29 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // motion layers (hub / ring / group) keep a coherent
                   // tempo grammar. Default 12s when working=0 doesn't
                   // matter — the className is only applied when working>0.
-                  data-group-box-live={!isPinned && !isHovered && box.statuses.working > 0 ? 'true' : 'false'}
+                  /* Round 561 — marching-ants gate refined to halt only
+                     on direct-label-hover (or pin), NOT on member-alias-
+                     hover. Pre-R561 `isHovered` covered BOTH cases via
+                     the line 1044 fallback `hoveredGroup ?? (hoveredAlias
+                     → groupKeys[hoveredAlias])` — so hovering ANY member
+                     node halted the ants, treating indirect inspection
+                     the same as direct attention.
+                     R561 differentiates: ants now keep running during
+                     member-alias hover (indirect / cluster-awareness
+                     inspection), halting ONLY on direct label hover or
+                     pin. The cluster's live signal stays alive while
+                     operator inspects member nodes — distinct visual
+                     telegraph for "directly attending this cluster"
+                     vs "inspecting one of its members".
+                     Gate uses `hoveredGroupLabel === box.key` directly
+                     (the LABEL hover state) instead of `isHovered`
+                     (which combines label-hover + member-alias-hover
+                     via activeGroup). data-group-box-live + the live
+                     className both flip on the same refined gate. */
+                  data-group-box-live={!isPinned && hoveredGroupLabel !== box.key && box.statuses.working > 0 ? 'true' : 'false'}
                   data-group-box-march-dur={marchDur}
                   data-group-box-lifted={(isPinned || isHovered) ? 'true' : 'false'}
-                  className={!isPinned && !isHovered && box.statuses.working > 0 ? 'anet-topo-groupbox-live' : undefined}
+                  className={!isPinned && hoveredGroupLabel !== box.key && box.statuses.working > 0 ? 'anet-topo-groupbox-live' : undefined}
                   // R142: drop-shadow filter when pinned or hovered. Box
                   // visually "rises off the canvas" — same vocabulary
                   // R18 KPI cards + R135 overlay panels use. Idle group
@@ -4628,6 +5663,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // is preserved.
                   filter={(isPinned || isHovered) ? 'url(#topo-groupbox-lift)' : undefined}
                   style={{
+                    /* R587 — group box gains stacked brightness(1.15)
+                       on hover/pin. 26th anchor in per-element
+                       brightness family, 19th in stacked-filter
+                       sub-pattern. Inline style.filter overrides the
+                       attribute filter (kept intact for the R142
+                       documentation trail); stacked syntax preserves
+                       the R142 url(#topo-groupbox-lift) SVG drop-shadow
+                       lift on hover/pin, with brightness layered on
+                       top.
+
+                       Same R582/R583 stacked-filter pattern at the
+                       group-cluster scope.
+
+                       Group box inspection signature now 6 layers
+                       (spans paint + stroke + geometry + filter):
+                         R68   fillOpacity 0.045 → 0.13 (cyber pin)
+                         R68   strokeWidth 1.5 → 2 → 3
+                         R68   stroke tint → legendAccent
+                         R503  strokeDasharray → 'none' on activation
+                         R142  filter → url(#topo-groupbox-lift)
+                         R587  filter stack → brightness(1.15)  ← this round
+
+                       Same existing transition list already includes
+                       'filter 200ms ease-out' (R142 cadence). No
+                       transition change needed. */
+                    filter: (isPinned || isHovered)
+                      ? 'url(#topo-groupbox-lift) brightness(1.15)'
+                      : undefined,
                     /* Round 248 / Loop: append fill 200ms ease-out to
                        the existing R66 transition list. Pre-R248 the
                        rect's fill (isLight ? '#0f172a' (slate-900) :
@@ -4806,7 +5869,32 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        exposes the geometry-axis presence for tests. */
                     data-group-label-tint-transition="200ms"
                     data-group-label-tint-geom-transition="x,width,rx"
-                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out, x 200ms ease-out, width 200ms ease-out, rx 200ms ease-out' }}
+                    data-group-label-tint-brightness={(pinnedGroup === box.key || hoveredGroupLabel === box.key) ? '1.15' : '1'}
+                    style={{
+                      /* R610 — group label tint rect gains filter
+                         brightness(1.15) on the same pin OR hover-label
+                         gate that drives the fill swap. The pal.legend-
+                         Accent cyan/teal fill (0.20 pin / 0.13 hover
+                         alpha) lifts +15% — small but perceivable lift
+                         that ties the tint band's paint axis to its
+                         already-strong fill/opacity/geometry response
+                         on inspection.
+
+                         Pin/hover-gated brightness family extension:
+                         tint-band joins the legend pin-ring (R607) +
+                         group box (R587) + group label text (R571) +
+                         flow-arrow on legend hover (R609) at the
+                         panel-tier brightness coverage.
+
+                         Pure paint axis; no geometry shift. transition
+                         list extends with 'filter 200ms ease-out'
+                         alongside the existing 200ms fill/opacity/geom
+                         cadence. */
+                      filter: (pinnedGroup === box.key || hoveredGroupLabel === box.key)
+                        ? 'brightness(1.15)'
+                        : undefined,
+                      transition: 'fill 200ms ease-out, opacity 200ms ease-out, x 200ms ease-out, width 200ms ease-out, rx 200ms ease-out, filter 200ms ease-out',
+                    }}
                   />
                 {/* Round 218 / Loop: group label gains a letter-spacing
                     transition on pin — the text subtly spaces out
@@ -4888,8 +5976,54 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   fontSize="9"
                   fontFamily="monospace"
                   fontWeight={isPinned ? '800' : '700'}
-                  opacity={isPinned || isHovered ? 1 : 0.55}
+                  /* Round 551 / Loop — category-differentiation family
+                     4th anchor. Orphan band ("其他" catchall) rest-state
+                     LABEL opacity drops 0.55 → 0.4 (~27% relative dim),
+                     mirroring R506's rect fillOpacity drop pattern at
+                     the label-paint tier. Adds a 4th independent
+                     channel to the orphan visual signature at rest:
+                       R499  fontStyle italic    (typography style)
+                       R503  '3 6' dash pattern  (rect stroke)
+                       R506  lower rect fill-opacity (rect fill)
+                       R551  lower label opacity (label paint)  ← this round
+                     Four independent channels (typography style +
+                     stroke pattern + rect fill density + label paint
+                     density) collectively encode the catchall semantic
+                     at rest — orphan band reads as "misc bucket, less
+                     attention-deserving" through every available paint
+                     channel, no chrome / color / geometry change.
+                     Pin and hover branches UNCHANGED — orphan label
+                     restores to full opacity 1 on inspection, same as
+                     prefix groups. The differentiation lives ONLY in
+                     the unsolicited rest state. The ~27% drop (0.55 →
+                     0.4) is dimmer than R506's ~40% (rect could
+                     tolerate it; small 9px text needs more residual
+                     paint to stay legible) — orphan label stays
+                     readable when scanning, just clearly quieter.
+                     Pure paint axis; bbox unchanged; R51 SVG sentinel
+                     safety untouched (overlap-test gates to g[data-
+                     node], this group-label is invisible to it).
+                     transition list (R55/R432/R457/R479: fill, ls,
+                     fw, filter all 200ms) already eases opacity since
+                     `opacity 300ms ease-out` lives in the parent <text>
+                     CSS — wait, only filter/ls/fw/fill 200ms are
+                     listed. Need to add 'opacity 200ms ease-out' for
+                     smooth orphan opacity flip on pin/hover transitions
+                     (currently opacity 0.55 → 1 was snapping).
+                     data-group-label-opacity attr exposes the resolved
+                     value for tests. */
+                  /* Round 561 — opacity ladder gains inspection-
+                     overrides-encoding branch via isMemberAliasHovered.
+                     Resolution order (most-emphatic first):
+                       isPinned || isHovered            → 1   (direct attention)
+                       isMemberAliasHovered             → 1   (R561 inspection)
+                       box.isOrphan                     → 0.4 (R551 orphan rest)
+                       (default)                        → 0.55
+                     R484/R485/R486-family mirror. */
+                  opacity={isPinned || isHovered || isMemberAliasHovered ? 1 : box.isOrphan ? 0.4 : 0.55}
+                  data-group-label-opacity={isPinned || isHovered || isMemberAliasHovered ? 1 : box.isOrphan ? 0.4 : 0.55}
                   data-group-label-hovered={isHovered && !isPinned ? 'true' : 'false'}
+                  data-group-label-member-alias-hovered={isMemberAliasHovered ? 'true' : 'false'}
                   data-group-label-font-weight={isPinned ? '800' : '700'}
                   /* Round 479 / Loop — extend drop-shadow visual-polish
                      family to a 4th anchor: group-label parent text
@@ -4912,7 +6046,28 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      transition list extends to include 'filter 200ms
                      ease-out' alongside the existing fill/ls/fw/opacity
                      200ms tweens. */
-                  data-group-label-glow={isPinned ? 'true' : 'false'}
+                  /* Round 538 / Loop — extends R479 group-label drop-
+                     shadow from pin-only to ALSO fire on hover, with
+                     a 2-tier alpha ladder matching the R432 letter-
+                     spacing 3-tier (hover at 0.25px / pin at 0.5px)
+                     pattern. Pre-R538 the paint axis was binary (lit
+                     on pin, dark on hover); R538 adds a softer hover
+                     glow that distinguishes from the stronger pin
+                     glow without losing the "active state lights up"
+                     gesture.
+                     2-tier alpha ladder:
+                       pin (committed)    cyan 80 hex (~50% alpha)
+                       hover (preview)    cyan 4d hex (~30% alpha)
+                       rest               none
+                     Pin signature stays distinctively brighter, but
+                     hover now telegraphs paint-axis attention too.
+                     Sibling to R534 edge-badge hover-precedence
+                     extension at the drop-shadow family. R479 hue
+                     (pal.legendAccent) preserved across both tiers.
+                     data-group-label-glow attr upgraded from binary
+                     ('true'/'false') to 3-value ('pin' | 'hover' |
+                     'false') so tests can distinguish gate cause. */
+                  data-group-label-glow={isPinned ? 'pin' : isHovered ? 'hover' : 'false'}
                   /* Round 499 / Loop — orphan band "其他" label gets
                      fontStyle: italic to visually distinguish the
                      catchall from real prefix-group bands. Pre-R499
@@ -4934,18 +6089,51 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      advances the "信息密度" axis by encoding
                      category-distinction into a single typography
                      channel without adding visual chrome. */
+                  /* Round 571 / Loop — group-label parent text joins the
+                     per-element brightness consistency family (R501/
+                     R558/R564/R567/R570) at uniform +15%. 8th anchor.
+                     Stacks brightness(1.15) onto the existing R479/R538
+                     drop-shadow filter — same R564/R570 stacked filter
+                     pattern (drop-shadow + brightness in one CSS chain).
+                     Pre-R571 the group-label parent text lifted in 5
+                     axes on hover/pin (fill + ls 3-tier + fw on pin +
+                     drop-shadow + opacity) but the glyph chromatically
+                     stayed at flat fill brightness. R571 adds the
+                     brightness axis to the glyph itself for cross-
+                     element consistency with the rest of the per-
+                     element brightness family.
+                     Filter chain on isPinned: `drop-shadow(0 0 3px
+                     ${pal.legendAccent}80) brightness(1.15)`.
+                     On isHovered (weaker tier):                `drop-
+                     shadow(0 0 3px ${pal.legendAccent}4d) brightness(1.15)`.
+                     Rest:                                       undefined.
+                     Per-element brightness family — 8 anchors at +15%:
+                       R501  vendor.logo image
+                       R558  vendor monogram
+                       R558  prefix-group fallback
+                       R564  alias text (stacked w/ DS)
+                       R567  node sub-text
+                       R570  edge-badge digit
+                       R571  group-label parent text  ← this round
+                     transition list already includes 'filter 200ms ease-
+                     out' from R479 — no change needed. R432 ls + R457
+                     fw + R479 drop-shadow + R551 orphan opacity all
+                     preserved. */
                   style={{
                     transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
                     letterSpacing: isPinned ? '0.5px' :
                                    isHovered ? '0.25px' : '0px',
                     fontStyle: box.isOrphan ? 'italic' : undefined,
                     filter: isPinned
-                      ? `drop-shadow(0 0 3px ${pal.legendAccent}80)`
-                      : undefined,
+                      ? `drop-shadow(0 0 3px ${pal.legendAccent}80) brightness(1.15)`
+                      : isHovered
+                        ? `drop-shadow(0 0 3px ${pal.legendAccent}4d) brightness(1.15)`
+                        : undefined,
                   }}
                   data-group-label={box.key}
                   data-group-label-pinned={isPinned ? 'true' : 'false'}
                   data-group-label-orphan={box.isOrphan ? 'true' : 'false'}
+                  data-group-label-brightness={(isPinned || isHovered) ? '1.15' : '1'}
                 >
                   {box.key}
                   {/* Round 19 / Loop: member-count chip. Inline tspan stays
@@ -5407,6 +6595,19 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     unchanged at the join with the arrow marker).
                     data-edge-visible-linecap attr exposes the value
                     for tests. */}
+                {/* Round 582 — edge visible flow path joins per-element
+                    brightness family at 21st anchor. Stacks
+                    brightness(1.15) with the existing url(#topo-glow)
+                    SVG filter (cyber) or applies plain brightness
+                    (light). CSS filter accepts mixed url() + function
+                    values; inline style.filter overrides any
+                    attribute-level filter. Closes edge-tier brightness
+                    sub-family at 2 surfaces:
+                      R581 flow-rail (dashed underline)  brightness
+                      R582 visible path (primary curve)  brightness ← this round
+                    transition list extends to include 'filter 300ms
+                    ease-out' matching the existing opacity/sw/stroke
+                    cadence. */}
                 <path
                   d={path}
                   fill="none"
@@ -5414,15 +6615,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   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"
                   data-edge-visible-endpoint-hovered={isEndpointHoveredEdge ? 'true' : 'false'}
                   data-edge-visible-stroke-width={renderWidth}
+                  data-edge-visible-brightness={(isHoveredEdge || isEndpointHoveredEdge) ? '1.15' : '1'}
                   style={{
                     pointerEvents: 'none',
-                    transition: 'opacity 300ms ease-out, stroke-width 300ms ease-out, stroke 300ms ease-out',
+                    transition: 'opacity 300ms ease-out, stroke-width 300ms ease-out, stroke 300ms ease-out, filter 300ms ease-out',
+                    filter: (isHoveredEdge || isEndpointHoveredEdge)
+                      ? (isLight ? 'brightness(1.15)' : 'url(#topo-glow) brightness(1.15)')
+                      : (isLight ? undefined : 'url(#topo-glow)'),
                   }}
                 />
                 {/* Round 378 / Loop: edge flow-path dashed-rail picks
@@ -5472,7 +6676,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-edge-flow-rail-linecap="round"
                   data-edge-flow-rail-stroke-width={(isHoveredEdge || isEndpointHoveredEdge) ? 1.5 : 1}
                   data-edge-flow-rail-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
-                  style={{ transition: 'opacity 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out' }}
+                  /* Round 581 — flow-rail joins per-element brightness
+                     family at 20th anchor. Adds brightness(1.15) on
+                     edge hover or endpoint hover. Joins R437 sw-lift
+                     paint pattern at the dashed-underline tier — when
+                     an edge is in focus, the rail's stroke widens
+                     (R437) AND brightens (R581) together, reading
+                     as a coherent rail-lift gesture under the flow.
+                     transition list extends to include 'filter 300ms
+                     ease-out' matching the R245/R437 cadence on this
+                     surface. */
+                  data-edge-flow-rail-brightness={(isHoveredEdge || isEndpointHoveredEdge) ? '1.15' : '1'}
+                  style={{
+                    transition: 'opacity 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, filter 300ms ease-out',
+                    filter: (isHoveredEdge || isEndpointHoveredEdge)
+                      ? 'brightness(1.15)'
+                      : undefined,
+                  }}
                 />
                 {!reducedMotion && (
                   /* Round 103 / Loop: phase-stagger the particles so
@@ -5542,7 +6762,31 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     data-edge-particle-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
                     data-edge-particle-opacity-rest={Math.min(1, fresh * edgeOpacityMul).toFixed(2)}
                     data-edge-particle-opacity-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
-                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out, r 200ms ease-out' }}
+                    /* Round 583 — flow particle joins per-element
+                       brightness family at 22nd anchor. Adds
+                       brightness(1.15) on edge hover or endpoint
+                       hover, joining R485 opacity inspection-override
+                       + R422 r-lift (4 → 4.5) + R164 hover-r-lift
+                       (4.5 → 5.5). Particle now has 4-axis active
+                       signature on edge inspection:
+                         R485 opacity (freshness → 1.0)
+                         R164 r 4.5 → 5.5
+                         R422 r-base 4 → 4.5 (visual-weight bump)
+                         R583 brightness(1.15)  ← this round
+                       Particle becomes the brightest paint element
+                       along the edge during inspection. */
+                    data-edge-particle-brightness={(isHoveredEdge || isEndpointHoveredEdge) ? '1.15' : '1'}
+                    style={{
+                      transition: 'fill 200ms ease-out, opacity 200ms ease-out, r 200ms ease-out, filter 200ms ease-out',
+                      /* R583 — stack brightness(1.15) onto the existing
+                         url(#topo-glow) (cyber) or apply plain brightness
+                         (light). Inline style.filter overrides attribute
+                         filter; stacked syntax preserves the cyber glow
+                         on hover. Same R582 visible-path stack pattern. */
+                      filter: (isHoveredEdge || isEndpointHoveredEdge)
+                        ? (isLight ? 'brightness(1.15)' : 'url(#topo-glow) brightness(1.15)')
+                        : undefined,
+                    }}
                   >
                     <animateMotion
                       dur={`${duration}s`}
@@ -6032,11 +7276,77 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         data-edge-badge-opacity-rest={isLight ? 0.95 : 0.85}
                         data-edge-badge-opacity-hover="1"
                         data-edge-badge-opacity-active="1"
-                        data-edge-badge-glow={isHot ? 'true' : 'false'}
+                        data-edge-badge-glow={(isHoveredEdge || isPinned) ? 'hover' : isHot ? 'hot' : 'false'}
+                        data-edge-badge-brightness={(isHoveredEdge || isPinned || isHot) ? '1.15' : '1'}
+                        /* Round 534 / Loop — extends edge-badge drop-shadow
+                           coverage from hot-only (R480 amber) to also fire
+                           on hover/pin with a cyan accent glow. Pre-R534
+                           the badge's hover/pin lifted r (R164 9 → 10.5)
+                           + sw (R394 1.25 → 1.5) + opacity (R395/R396 →
+                           1.0), but the paint axis stayed at the badge's
+                           rest fill — no glow to telegraph "in focus" at
+                           the paint layer. R534 closes that 4-axis hover-
+                           lift parity by adding drop-shadow glow on
+                           (hovered || pinned).
+                           Precedence: (hover || pin) wins over isHot when
+                           BOTH true — interactive signal (user is
+                           inspecting) overrides informational signal
+                           (hot lane). When only isHot fires (no hover/
+                           pin) the amber R480 glow remains; the hover/
+                           pin case paints cyan/teal `pal.legendAccent`
+                           at 0x99 alpha (~60%) — bright enough to read
+                           as "lit" but won't overwhelm at small badge
+                           size (r=10.5).
+                           Edge-badge 4-axis hover-lift parity now:
+                             R164  r          9    → 10.5
+                             R394  stroke-wd  1.25 → 1.5
+                             R395  opacity    rest → 1.0
+                             R534  filter     none → drop-shadow glow ← this round
+                           Drop-shadow visual-polish family extension —
+                           edge-badge surface upgraded from single-gate
+                           (R480 isHot) to two-gate (isHot OR hover-pin).
+                           transition list already includes filter 200ms
+                           ease-out (R480). data-edge-badge-glow attr
+                           upgraded from `isHot ? true : false` to a
+                           3-value string: 'hot' | 'hover' | 'false' so
+                           tests can distinguish gate cause.
+                           R51 sentinel safety: badge is edge-internal
+                           (not g[data-node] ancestor); filter is paint-
+                           only; bbox unchanged. */
                         style={{
-                          filter: isHot
-                            ? `drop-shadow(0 0 3px ${hotStroke}80)`
-                            : undefined,
+                          /* R603 — edge-badge CIRCLE stacks brightness(1.15)
+                             onto the R534/R480 drop-shadow filter on hover/
+                             pin/hot. 5th hover axis on the badge ring
+                             (after R164 r, R394 sw, R395 opacity, R534
+                             filter drop-shadow → R603 filter brightness).
+
+                             Brings the CIRCLE's brightness coverage to
+                             parity with the DIGIT's R570 brightness:
+                             both elements (ring + text) now brighten
+                             together on the same 3-state gate
+                             (hover/pin/hot). The whole edge-badge reads
+                             as one coherent "lit up under attention"
+                             unit at the brightness axis.
+
+                             Banked R564/R570 stacked-filter pattern:
+                             `drop-shadow(...) brightness(1.15)` chains
+                             the SVG drop-shadow halo + brightness lift
+                             in one CSS filter chain on the same element.
+
+                             Per-element brightness family extension —
+                             edge-badge circle joins as a stacked-filter
+                             anchor. Hot-only state gets amber drop-shadow
+                             + brightness; hover/pin gets cyan/teal drop-
+                             shadow + brightness; rest gets neither.
+
+                             transition list already includes 'filter
+                             200ms ease-out' (R534 cadence). No
+                             transition change needed. */
+                          filter: (isHoveredEdge || isPinned)
+                            ? `drop-shadow(0 0 3px ${pal.legendAccent}99) brightness(1.15)`
+                            : isHot
+                              ? `drop-shadow(0 0 3px ${hotStroke}80) brightness(1.15)`
+                              : undefined,
                           transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
                         }}
                       />
@@ -6126,6 +7436,31 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         data-edge-badge-text={link.key}
                         data-edge-badge-text-pin={(isPinned || isHot) ? 'true' : 'false'}
                         data-edge-badge-text-font-size="11"
+                        /* Round 570 / Loop — edge-badge digit joins the per-
+                           element brightness consistency family (R501/R558/
+                           R564/R567) at uniform +15%. 7th anchor.
+                           Gate: (isHoveredEdge || isPinned || isHot) — same
+                           3-tier set as R431 ls (with hover the mid step
+                           and pin/hot the strong step). Brightness lifts
+                           uniformly across all 3 active sub-states; the
+                           ls/fw axes still distinguish hover from pin/hot.
+                           Pure paint axis on the digit glyph; bbox
+                           unchanged. The R540 badge-circle drop-shadow
+                           sits on the parent CIRCLE element (separate
+                           filter); the digit's filter is independent and
+                           doesn't compound with circle filter (different
+                           SVG element).
+                           Per-element brightness family — 7 anchors at +15%:
+                             R501  vendor.logo image
+                             R558  vendor monogram
+                             R558  prefix-group fallback
+                             R564  alias text (stacked w/ DS)
+                             R567  node sub-text
+                             R570  edge-badge digit  ← this round
+                           Plus runtime badge drop-shadow (R559) on same
+                           isNodeActive gate. data-edge-badge-text-brightness
+                           attr surfaces the lift for tests. */
+                        data-edge-badge-text-brightness={(isHoveredEdge || isPinned || isHot) ? '1.15' : '1'}
                         style={{
                           pointerEvents: 'none',
                           fontVariantNumeric: 'tabular-nums',
@@ -6144,7 +7479,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                              now): R344/R345/R347/R351/R420/R427/R431. */
                           letterSpacing: (isPinned || isHot) ? '0.4px' :
                                          isHoveredEdge ? '0.2px' : '0px',
-                          transition: 'letter-spacing 300ms ease-out, font-weight 300ms ease-out',
+                          filter: (isHoveredEdge || isPinned || isHot)
+                            ? 'brightness(1.15)'
+                            : undefined,
+                          transition: 'letter-spacing 300ms ease-out, font-weight 300ms ease-out, filter 300ms ease-out',
                         }}
                       >{link.count}</text>
                     </g>
@@ -6336,6 +7674,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-hub-busyness={busy}
                   data-topo-hub-halo-radius={haloR}
                   data-topo-hub-halo-hovered={isHaloHovered ? 'true' : 'false'}
+                  data-topo-hub-halo-glow={!reducedMotion && hoveredHub ? 'true' : 'false'}
                   data-topo-hub-halo-trough={isLight ? troughLight : troughDark}
                   data-topo-hub-halo-peak={isLight ? peakLight : peakDark}
                   /* Round 253 / Loop: hub grounding halo fill transition
@@ -6347,10 +7686,59 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      conflict.
                      R451: r as CSS property (R197/R198 idiom) so the
                      hover-radius tween eases smoothly under the same
-                     200ms cadence as fill. */
+                     200ms cadence as fill.
+                     R536: extends hub-cluster glow QUARTET (R476 digit
+                     + R532 disc + R535 ring + R533 spokes) to a 5th
+                     tier — the halo gains drop-shadow at the outermost
+                     concentric ring on hub-hover. 2px blur + 0.3 alpha
+                     keeps the halo's glow subtle since (a) the halo is
+                     the LARGEST hub element (r=22 hover) and a heavier
+                     glow would bleed visibly past the ring tier into
+                     the spoke origin, and (b) the halo already SMIL-
+                     animates opacity (R84/R244 breath), so the visible
+                     glow pulses with the breath — an atmospheric
+                     "breathing glow" idiom rather than a static rim.
+                     Hub-cluster glow QUINTET (R476/R532/R533/R535/R536):
+                       digit (typo center)    3px emerald 0.6
+                       disc (r=5.5/6)         3px emerald 0.6
+                       ring (r=14/17)         3px emerald 0.5
+                       halo (r=20/22)         2px emerald 0.3  ← this round
+                       spokes (mesh)          1.5px cyan/teal 0.4
+                     Emerald palette continues through the focal-disc
+                     family (digit/disc/ring/halo); spokes break out
+                     into cyan/teal at the mesh tier. The 4-step alpha
+                     ladder 0.6→0.6→0.5→0.3 reads as the focal cluster
+                     fading outward — the OUTERMOST emerald glow is the
+                     softest, the focal digit is the brightest.
+                     filter is paint-only; SMIL animate on opacity
+                     continues independently (attribute vs CSS-property
+                     non-conflicting). transition list extends to
+                     'filter 200ms ease-out' alongside fill + r.
+                     Drop-shadow visual-polish family extension (12
+                     anchors). preview.50 milestone round. data-topo-
+                     hub-halo-glow attr exposes the gate state. */
+                  data-topo-hub-halo-brightness={!reducedMotion && hoveredHub ? '1.15' : '1'}
+                  /* Round 577 — hub-halo joins per-element brightness
+                     family at 15th anchor. Stacks brightness(1.15)
+                     onto R536's hub-hover drop-shadow — closes the
+                     hub-cluster focal brightness coverage at 3
+                     concentric elements:
+                       hub digit       (R575)
+                       hub-highlight   (R574)
+                       hub-halo        (R577)  ← this round
+                     All 3 hub focal elements now lift through stacked
+                     drop-shadow + brightness on hub-hover. Halo is
+                     the OUTERMOST so a slight chromatic lift reads as
+                     the focal cluster intensifying its ambient glow
+                     outward. */
                   style={{
                     r: `${haloR}px`,
-                    transition: 'fill 200ms ease-out, r 200ms ease-out',
+                    filter: !reducedMotion && hoveredHub
+                      ? (isLight
+                          ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.3)) brightness(1.15)'
+                          : 'drop-shadow(0 0 2px rgba(52, 211, 153, 0.3)) brightness(1.15)')
+                      : undefined,
+                    transition: 'fill 200ms ease-out, r 200ms ease-out, filter 200ms ease-out',
                   } as React.CSSProperties}
                 >
                   {/* Round 244 / Loop: hub grounding halo breath gets
@@ -6431,7 +7819,50 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-topo-hub-core
                   data-topo-hub-core-hovered={isCoreHovered ? 'true' : 'false'}
                   data-topo-hub-core-fill={coreFill}
-                  style={{ transition: 'fill 200ms ease-out' }}
+                  data-topo-hub-core-glow={isCoreHovered ? 'true' : 'false'}
+                  data-topo-hub-core-brightness={isCoreHovered ? '1.15' : '1'}
+                  /* R614 — hub-core gains stacked drop-shadow + brightness
+                     on hub-hover. Extends hub-cluster brightness coverage
+                     to a 6th concentric element (innermost emerald r=10
+                     disc), beyond R580's 5/5 closure (digit + highlight +
+                     hover-ring + halo + spokes).
+
+                     Hub-cluster concentric brightness coverage now 6/6:
+                       hub digit       (R575)  innermost typo
+                       hub-core        (R614)  innermost emerald disc  ← this round
+                       hub-highlight   (R574)  middle disc
+                       hub-hover-ring  (R579)  outer ring boundary
+                       hub-halo        (R577)  outermost atmosphere
+                       hub-spokes      (R580)  mesh radial lines
+
+                     Compounds R441's fill brighten (emerald-600→500 or
+                     emerald-500→400) with stacked drop-shadow + brightness.
+                     Triple-paint multiplicative interaction at hub-core:
+                       R441 fill swap (emerald tier brighter) ×
+                       R614 brightness(1.15) ×
+                       R614 drop-shadow (emerald halo)
+                     The focal anchor reads as fully "lit and pulled
+                     forward" on hub-hover, with paint-chroma + glow +
+                     brightness all firing in unison.
+
+                     Theme-aware drop-shadow palette matches the cluster:
+                       light: rgba(16, 185, 129, 0.5)   emerald-500
+                       cyber: rgba(52, 211, 153, 0.5)   emerald-400
+                     2px blur — slightly tighter than the halo's 2px
+                     (R536) since core is smallest concentric element.
+                     0.5 alpha matches the hover-ring (R535).
+
+                     Same banked R582/R583 stacked-filter pattern.
+                     transition list extends with 'filter 200ms ease-out'
+                     alongside the existing fill 200ms cadence. */
+                  style={{
+                    filter: isCoreHovered
+                      ? (isLight
+                          ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.5)) brightness(1.15)'
+                          : 'drop-shadow(0 0 2px rgba(52, 211, 153, 0.5)) brightness(1.15)')
+                      : undefined,
+                    transition: 'fill 200ms ease-out, filter 200ms ease-out',
+                  }}
                 />
               );
             })()}
@@ -6510,6 +7941,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 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-brightness={!reducedMotion && hoveredHub ? '1.15' : '1'}
                 data-topo-hub-working-count-visible={workingCount > 0 ? 'true' : 'false'}
                 // Round 209 / Loop: hub workingCount digit scales 1.0 →
                 // 1.08 on hub-hover, matching R177's r 14→17 ring grow.
@@ -6560,22 +7992,109 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    so the glow eases under the same cadence as the
                    scale + fw + fill axes. */
                 data-topo-hub-working-count-glow={!reducedMotion && hoveredHub ? 'true' : 'false'}
+                /* Round 507 / Loop — focal recede. When ANY non-hub
+                   canvas surface is hovered (a node / an edge / a
+                   group label / a legend row / a vendor chip), the
+                   hub-center workingCount digit fades to 0.85 opacity,
+                   signaling "you're inspecting elsewhere, hub recedes
+                   to background." When the user un-hovers (or hovers
+                   the hub itself), opacity returns to 1.0. Pure paint
+                   polish at the canvas's most prominent focal point.
+                   Hits 信息密度 + 动效 themes — the hub digit gives
+                   way visually to the surface under inspection,
+                   reinforcing the "this is the focal point right now"
+                   gesture without requiring users to track which
+                   surface holds attention.
+                   Gate excludes hoveredHub specifically: hovering the
+                   hub itself should LIFT the digit (R425 fw bump +
+                   R476 glow + R209 scale 1.08) — the existing hover-
+                   on-hub signature is intact; only inspection
+                   ELSEWHERE recedes the hub.
+                   Composed from existing hoveredAlias / hoveredEdge-
+                   Key / hoveredGroupLabel / hoveredStatus / hovered-
+                   Vendor — no new state. 300ms ease-out opacity
+                   transition already in the style list (existing R213
+                   transition spec), so the fade rides on existing
+                   infrastructure.
+                   data-topo-hub-recede attr surfaces the gate state
+                   for tests. */
+                data-topo-hub-recede={
+                  (hoveredAlias || hoveredEdgeKey || hoveredGroupLabel ||
+                   hoveredStatus || hoveredVendor) && !hoveredHub ? 'true' : 'false'
+                }
+                /* Round 527 / Loop — focal-amplify family extension to a
+                   2nd anchor. R511 introduced focal-amplify at the hub-
+                   highlight disc (base opacity 0.95 → 1.0 on hover); R527
+                   extends to the hub-center workingCount digit with a
+                   letter-spacing tween 0 → 0.3px on hub-hover.
+                   Composes with existing 3-axis hub-hover signature on
+                   this element:
+                     R209  transform scale(1.08)        geometry
+                     R425  fontWeight 700 → 800         typography weight
+                     R476  filter drop-shadow glow      paint
+                     R527  letter-spacing 0 → 0.3px     typography kerning ← this round
+                   tabular-nums (R225) preserved — each digit cell keeps
+                   fixed width; the inter-digit advance grows by 0.3px
+                   per gap. Single-digit counts (1-9) show no kerning
+                   effect; multi-digit counts (10+) show the spread as
+                   info-density signaling. Sibling to R427/R431/R432/
+                   R433/R434 (hover-letter-spacing family at panel-text
+                   scope) — R527 brings the same idiom to the canvas's
+                   most-read scalar.
+                   Reduced-motion gate matches R209 scale, R425 fw, R476
+                   filter — !reducedMotion gates the lift; reducedMotion
+                   users see static digit baseline regardless of hover.
+                   Focal-amplify family extension (2 anchors): R511 hub-
+                   highlight opacity / R527 hub-digit letter-spacing.
+                   transition list extends to include `letter-spacing
+                   200ms ease-out`, matching the cadence of the other
+                   hub-hover axes. data-topo-hub-working-count-letter-
+                   spacing attr exposes the resolved value for tests. */
+                data-topo-hub-working-count-letter-spacing={!reducedMotion && hoveredHub ? '0.3px' : '0px'}
                 style={{
                   pointerEvents: 'none',
                   transform: !reducedMotion && hoveredHub ? 'scale(1.08)' : 'scale(1)',
                   transformBox: 'fill-box',
                   transformOrigin: 'center',
+                  opacity: (hoveredAlias || hoveredEdgeKey || hoveredGroupLabel ||
+                            hoveredStatus || hoveredVendor) && !hoveredHub
+                    ? 0.85
+                    : 1,
+                  /* Round 575 (60-round milestone) — hub digit joins per-
+                     element brightness family at 14th anchor. Stacks
+                     brightness(1.15) onto R476's hub-hover drop-shadow
+                     — same R564/R570/R571/R572/R573/R574 pattern (drop-
+                     shadow + brightness in one filter chain). Closes
+                     the hub-cluster focal-element brightness coverage
+                     symmetrically: hub digit + hub-highlight disc
+                     (R574) now BOTH have stacked filter on hub-hover.
+                     Hub digit hub-hover signature post-R575 — 5 active
+                     axes:
+                       R209 scale 1.08         (geometry)
+                       R425 fw 700 → 800        (typography)
+                       R527 ls 0 → 0.3px        (typography)
+                       R476 drop-shadow glow    (paint halo)
+                       R575 brightness(1.15)    (paint glow) ← this round
+                     Hub-cluster focal cluster (digit + highlight) now
+                     has UNIFIED 5-axis hub-hover signature reading as
+                     one tightly-coupled motion-coherent lift. */
                   filter: !reducedMotion && hoveredHub
                     ? (isLight
-                        ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.6))'
-                        : 'drop-shadow(0 0 3px rgba(52, 211, 153, 0.6))')
+                        ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.6)) brightness(1.15)'
+                        : 'drop-shadow(0 0 3px rgba(52, 211, 153, 0.6)) brightness(1.15)')
                     : undefined,
+                  letterSpacing: !reducedMotion && hoveredHub ? '0.3px' : '0px',
                   /* R425: font-weight 200ms appended so the hover fw
                      bump 700 → 800 eases under the same cadence as
                      R209 scale + R253 fill + R213 opacity.
                      R476: filter 200ms appended so the new drop-
-                     shadow glow eases at the same cadence. */
-                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
+                     shadow glow eases at the same cadence.
+                     R507: opacity 300ms (existing in list) covers
+                     the new focal-recede fade.
+                     R527: letter-spacing 200ms appended so the new
+                     hover-kerning bump eases at the same cadence
+                     as the other axes. */
+                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out, letter-spacing 200ms ease-out',
                   fontVariantNumeric: 'tabular-nums',
                 }}
               >
@@ -6621,20 +8140,188 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 + 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.5"
-              fill="#d1fae5"
-              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}
-              data-topo-hub-highlight-breath={!reducedMotion && workingCount === 0 ? 'true' : 'false'}
-              style={{
-                pointerEvents: 'none',
-                transition: 'opacity 300ms ease-out',
-              }}
-            >
+            {/* Round 508 / Loop — focal-recede pattern 2nd anchor.
+                Extends R507's hub-digit recede to the hub-highlight
+                circle so the hub focal CLUSTER (digit at z-top + this
+                idle-state highlight beneath) recedes as a unit when
+                canvas attention is elsewhere. Computed once: a single
+                non-hub-hover gate drives BOTH the digit (R507) AND
+                this highlight (R508) so they always co-move.
+                Recede multiplies the visible opacity by 0.85 — when
+                workingCount===0 the rest opacity 0.95 becomes 0.81
+                during external-hover; when workingCount>0 the
+                opacity stays 0 (invisible) regardless of recede.
+                Additionally, when recede is active the SMIL breath
+                animation halts (animate node un-mounts) so the
+                receded state reads as quietly static, not pulsing
+                at 0.85↔1.0 against the recede multiplier (which
+                would visually conflict — competing 15% drops). On
+                un-hover the animate re-mounts and breath resumes.
+                data-topo-hub-recede on both digit AND highlight
+                provides a stable test handle for the unified-recede
+                gate.
+                Composed from existing hover state vars — no new
+                state. Pure paint axis. */}
+            {(() => {
+              const hubRecede = !!((hoveredAlias || hoveredEdgeKey || hoveredGroupLabel ||
+                                    hoveredStatus || hoveredVendor) && !hoveredHub);
+              /* Round 511 / Loop — hub-highlight gains a 3rd opacity tier
+                 (hovered-amplify). Pre-R511 the highlight had 2 visible
+                 states: rest (0.95) and recede (0.81 = 0.95 × 0.85).
+                 When the hub itself was hovered, the digit got R425 fw
+                 lift + R476 drop-shadow + R209 scale-1.08, but the
+                 highlight disc sibling stayed at 0.95 — the focal
+                 cluster lifted in 3 channels (typography/paint/scale)
+                 but the highlight didn't participate.
+                 R511 closes that asymmetry: when hoveredHub is true,
+                 highlight base opacity lifts to 1.0 (5% boost from
+                 rest 0.95). Cluster now lifts as a unit on hub-hover,
+                 just like it recedes as a unit on non-hub-hover
+                 (R508).
+                 3-state opacity ladder:
+                   hub-hovered:        baseOpacity = 1.0   (R511 NEW)
+                   rest (no hover):    baseOpacity = 0.95  (existing)
+                   non-hub canvas hov: baseOpacity × 0.85 = 0.81 (R508)
+                 Composes cleanly: hubRecede gate requires !hoveredHub,
+                 so the hovered-amplify and recede states are mutually
+                 exclusive (they can't both fire). breathActive
+                 continues to halt on either non-rest state (recede OR
+                 hub-hover would visually compete with the 0.85↔1
+                 breath — clean for the unit-lift semantic too). */
+              const baseOpacity = workingCount > 0 ? 0
+                                : hoveredHub ? 1.0
+                                : 0.95;
+              const resolvedOpacity = hubRecede ? baseOpacity * 0.85 : baseOpacity;
+              const breathActive = !reducedMotion && workingCount === 0 && !hubRecede && !hoveredHub;
+              /* Round 529 / Loop — focal-amplify family 3rd anchor.
+                 Hub-highlight gains geometric amplify r 5.5 → 6 on
+                 hub-hover, mirroring R451's hub-halo r 20 → 22 hover
+                 pattern. Pre-R529 the highlight had paint-axis
+                 amplify only (R511 opacity 0.95 → 1.0 on hub-hover);
+                 R529 adds geometric amplify so the focal disc
+                 BREATHES outward on hub attention, like the halo
+                 does. Composes with the existing 2-axis hub-hover
+                 lift on this element:
+                   R511  opacity 0.95 → 1.0   paint (focal-amplify 1st)
+                   R529  r       5.5  → 6     geometry (this round)
+                 Implementation matches R451: CSS `r` property
+                 (R197/R198 idiom) for smooth interpolation. SVG
+                 attribute `r="5.5"` provides SSR fallback and serves
+                 as default; inline style.r overrides for animated
+                 value. transition list extends to include `r 200ms
+                 ease-out`, matching the fill cadence (also 200ms);
+                 opacity transition stays at 300ms (existing).
+                 r 6 sits well inside the existing visual envelope
+                 (next-larger sibling r=10 hub core, r=14 hub hover
+                 ring). The 0.5px lift is +9% radius / +19% area —
+                 enough to read as 'lift' without breaching the core
+                 boundary or invalidating overlap-test invariants.
+                 SMIL animate on opacity continues independently
+                 (animateAttr='opacity' vs CSS-property r — non-
+                 conflicting, same pattern R451 noted for halo).
+                 Focal-amplify family extension (3 anchors):
+                   R511  hub-highlight opacity 0.95 → 1.0
+                   R527  hub-digit letter-spacing 0 → 0.3px
+                   R529  hub-highlight radius 5.5 → 6  ← this round
+                 data-topo-hub-highlight-radius attr now reports the
+                 dynamic value (was static '5.5'). */
+              const highlightR = !reducedMotion && hoveredHub ? 6 : 5.5;
+              return (
+                <circle
+                  cx={cx} cy={cy} r="5.5"
+                  /* Round 509 / Loop — 配色 cross-theme cleanup. Pre-R509
+                     the hub-highlight fill was hardcoded `#d1fae5`
+                     (emerald-100, a pale tone). On the light theme this
+                     near-white green ran against a pale background at
+                     0.95 opacity — the disc was effectively invisible.
+                     Matches the existing R253 halo theme-inversion
+                     pattern (line ~6481): light theme picks the dark
+                     vibrant emerald (#10b981 emerald-600), dark theme
+                     keeps the pale emerald (#d1fae5 emerald-100). Both
+                     read at the same 0.95 opacity against their
+                     respective backdrops — light gets a saturated
+                     focal dot; dark keeps the soft glow signature.
+                     Pure paint axis (fill change only); bbox unchanged;
+                     R51 SVG sentinel safety untouched.
+                     transition list already includes `fill 200ms`?
+                     Actually the existing transition spec is `opacity
+                     300ms ease-out` — fill change on theme toggle
+                     will be instant. That's acceptable: theme toggle
+                     is a discrete event, and the halo (line 6500)
+                     already snaps fill on theme toggle the same way
+                     (`fill 200ms ease-out` was added later to halo
+                     via R253). Future round could add `fill 200ms`
+                     to highlight too if theme-switch flicker is
+                     noticed. */
+                  fill={isLight ? '#10b981' : '#d1fae5'}
+                  opacity={resolvedOpacity}
+                  data-topo-hub-highlight
+                  data-topo-hub-highlight-visible={workingCount > 0 ? 'false' : 'true'}
+                  data-topo-hub-highlight-radius={highlightR}
+                  data-topo-hub-highlight-opacity={resolvedOpacity}
+                  data-topo-hub-highlight-breath={breathActive ? 'true' : 'false'}
+                  data-topo-hub-highlight-recede={hubRecede ? 'true' : 'false'}
+                  data-topo-hub-highlight-hovered={!reducedMotion && hoveredHub ? 'true' : 'false'}
+                  data-topo-hub-highlight-glow={!reducedMotion && hoveredHub ? 'true' : 'false'}
+                  /* Round 574 — hub-highlight joins per-element brightness
+                     family at 13th anchor. Stacks brightness(1.15) onto
+                     R532's drop-shadow filter — same R564/R570/R571/R572/
+                     R573 pattern (drop-shadow + brightness in one filter
+                     chain). Hub idle disc now has 3 active hub-hover
+                     axes: R511 opacity 0.95 → 1.0 + R529 r 5.5 → 6 +
+                     R574 brightness(1.15). data-topo-hub-highlight-
+                     brightness attr surfaces the lift. */
+                  data-topo-hub-highlight-brightness={!reducedMotion && hoveredHub ? '1.15' : '1'}
+                  /* Round 510 / Loop — R509 follow-on: theme-toggle fill
+                     ease. Pre-R510 the hub-highlight transition spec only
+                     listed `opacity 300ms ease-out`. When R509 introduced
+                     theme-conditional fill (#d1fae5 ↔ #10b981), the fill
+                     change SNAPPED on theme toggle because the transition
+                     list didn't include `fill`. R510 extends to `fill
+                     200ms ease-out` so theme cycles smoothly through the
+                     emerald palette. 200ms timing matches the R253 halo
+                     fill transition (line ~6500) — both hub-cluster
+                     theme transitions now share a cadence so the focal
+                     cluster (digit + highlight + halo) eases as a unit.
+                     R508's recede opacity transition unchanged (300ms);
+                     fill is independent.
+                     R529: r as CSS property (R197/R198 idiom) + `r
+                     200ms ease-out` appended to transition list so
+                     the new hub-hover radius lift (5.5 → 6) eases
+                     under the same fill cadence. SVG attr r="5.5"
+                     above provides SSR fallback; inline style.r
+                     wins the cascade for the dynamic value.
+                     R532: filter drop-shadow glow on hub-hover —
+                     sibling to R476 hub-digit drop-shadow at the
+                     same gate (hoveredHub && !reducedMotion). Two
+                     adjacent hub focal elements (digit + highlight
+                     disc) now BOTH glow on hub-hover, reading as
+                     one unified focal cluster. Emerald palette
+                     matches R476:
+                       light: drop-shadow(0 0 2px rgba(16,185,129,0.6))   emerald-500
+                       cyber: drop-shadow(0 0 3px rgba(52,211,153,0.6))   emerald-400
+                     filter is paint-only (bbox unchanged); SMIL
+                     animate on opacity continues independently
+                     (animateAttr='opacity' vs CSS-property filter
+                     — non-conflicting). transition list extends to
+                     'filter 200ms ease-out' alongside fill/r.
+                     Drop-shadow visual-polish family extension
+                     (8 anchors): R476 hub-digit / R477 legend pin-
+                     ring / R478 recent freshness / hot edge / group
+                     label / zoom-state / node alias + R532 hub-
+                     highlight (this round). data-topo-hub-highlight-
+                     glow attr exposes the gate state. */
+                  style={{
+                    pointerEvents: 'none',
+                    r: `${highlightR}px`,
+                    filter: !reducedMotion && hoveredHub
+                      ? (isLight
+                          ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.6)) brightness(1.15)'
+                          : 'drop-shadow(0 0 3px rgba(52, 211, 153, 0.6)) brightness(1.15)')
+                      : undefined,
+                    transition: 'opacity 300ms ease-out, fill 200ms ease-out, r 200ms ease-out, filter 200ms ease-out',
+                  } as React.CSSProperties}
+                >
               {/* Round 497 / Loop — idle-state breath (呼吸感 theme pivot
                   from the R492-R496 press-family arc). Pre-R497 the hub
                   idle highlight read as a static dim disc — present but
@@ -6655,10 +8342,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   rather than a pulse, matching the "quiet" semantic.
                   data-topo-hub-highlight-breath attr exposes the
                   resolved gate state for tests. */}
-              {!reducedMotion && workingCount === 0 && (
+              {breathActive && (
                 <animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite" />
               )}
             </circle>
+              );
+            })()}
             {/* R115 / Loop: hover hint ring. Stroke-only circle at r=14
                 that fades in when the hub is hovered — the same idea
                 R44 used for node avatars (group-hover stroke). r=14
@@ -6724,13 +8413,54 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               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
-                 lift; stroke closes the theme-snap. */
+              /* Round 535 / Loop — completes the hub-cluster glow
+                 QUARTET by adding drop-shadow to the hub-hover-ring.
+                 Pre-R535 the hub-hover trio (R476 digit + R532 highlight
+                 disc + R533 spokes) glowed in unified emerald (digit/
+                 disc) + cyan/teal (spokes) on hub-hover, but the ring
+                 itself — the outermost solid emerald boundary at
+                 r=14→17 — stayed flat. R535 adds the matching emerald
+                 drop-shadow to the ring so the FULL hub-cluster glows
+                 across all four concentric surfaces on hub-hover:
+                   digit (typography center)  drop-shadow 0 0 3px emerald
+                   highlight disc (r=5.5/6)   drop-shadow 0 0 3px emerald
+                   hover-ring (r=14/17)       drop-shadow 0 0 3px emerald ← this round
+                   spokes (mesh)              drop-shadow 0 0 1.5px cyan/teal
+                 The ring is only visible on hub-hover (opacity=0 rest);
+                 adding drop-shadow at the same gate means the glow shows
+                 the moment the ring shows — no extra state needed.
+                 Same R476/R532 emerald palette since the ring sits
+                 inside the focal-disc tier (its color is also emerald
+                 #059669/#10b981).
+                 transition list extends to include 'filter 200ms ease-
+                 out' alongside the existing 180ms opacity/r — slight
+                 cadence mismatch (180 vs 200) is acceptable; the filter
+                 only appears AFTER the ring fades in via opacity, and
+                 the 200ms vs 180ms 20ms tail difference is below
+                 perceptual threshold.
+                 Drop-shadow visual-polish family extension (11 anchors):
+                 the hub-cluster glow quartet (R476/R532/R533/R535) plus
+                 the 7 non-hub anchors (R477/R478/R479/R480/R481/R483/
+                 R534) makes for a thoroughly polished glow vocabulary
+                 across the canvas.
+                 data-topo-hub-hover-ring-glow attr exposes the gate
+                 state for tests. */
+              data-topo-hub-hover-ring-glow={!reducedMotion && hoveredHub ? 'true' : 'false'}
+              /* Round 579 — hub-hover-ring joins per-element brightness
+                 family at 18th anchor. Stacks brightness(1.15) onto
+                 R535's drop-shadow — same R564/R570/R571/R572/R573/R574/
+                 R575/R577/R578 stacked-filter pattern. Closes hub-
+                 cluster brightness at 4 concentric elements (digit
+                 R575 + highlight R574 + halo R577 + hover-ring R579). */
+              data-topo-hub-hover-ring-brightness={!reducedMotion && hoveredHub ? '1.15' : '1'}
               style={{
                 pointerEvents: 'none',
-                transition: 'opacity 180ms ease-out, r 180ms ease-out, stroke 200ms ease-out',
+                filter: !reducedMotion && hoveredHub
+                  ? (isLight
+                      ? 'drop-shadow(0 0 3px rgba(16, 185, 129, 0.5)) brightness(1.15)'
+                      : 'drop-shadow(0 0 3px rgba(52, 211, 153, 0.5)) brightness(1.15)')
+                  : undefined,
+                transition: 'opacity 180ms ease-out, r 180ms ease-out, stroke 200ms ease-out, filter 200ms ease-out',
               }}
             />
           </g>)}
@@ -7091,7 +8821,42 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       strokeWidth="2.5"
                       opacity={isChat ? (isLight ? 0.85 : 0.95) : 0}
                       filter={!isLight && isChat ? 'url(#topo-glow)' : undefined}
-                      style={{ pointerEvents: 'none', transition: 'opacity 200ms ease-out, stroke 200ms ease-out, filter 200ms ease-out' }}
+                      data-node-chat-ring-brightness={isChat ? '1.15' : '1'}
+                      /* 🎯 R615 — 100th consecutive visible-polish round.
+                         Chat-target ring (visible only when chatAlias ===
+                         session.alias) stacks brightness(1.15) onto its
+                         existing url(#topo-glow) SVG filter on cyber, or
+                         plain brightness on light. Same R582/R583 stacked-
+                         filter pattern.
+
+                         INTRODUCES A NEW 4th BRIGHTNESS GATE TYPE — chat-
+                         target-gated. The cross-gate brightness family
+                         taxonomy now spans 4 distinct trigger conditions:
+                           hover-gated:         R501-R613 (many surfaces)
+                           pin/active-gated:    R571 + R587 + R607 + R609-R612
+                           freshness-gated:     R606 (recent-row pip)
+                           chat-target-gated:   R615 (this round, chat ring)
+
+                         When the user opens a chat popover with a specific
+                         node, that node's surrounding ring (r=radius+14)
+                         identifies the chat target with status.primary
+                         stroke. R615 adds +15% brightness so the
+                         identification ring reads brighter — the active
+                         chat partner is unmistakable on the canvas.
+
+                         Inline style.filter overrides the attribute
+                         filter; stacked syntax preserves the url(#topo-
+                         glow) on cyber. Same pattern banked at R582
+                         visible-path + R583 particle + R584 status-ring. */
+                      style={{
+                        pointerEvents: 'none',
+                        filter: isChat
+                          ? (isLight
+                              ? 'brightness(1.15)'
+                              : 'url(#topo-glow) brightness(1.15)')
+                          : undefined,
+                        transition: 'opacity 200ms ease-out, stroke 200ms ease-out, filter 200ms ease-out',
+                      } as React.CSSProperties}
                       data-chat-target-ring
                       data-chat-target-active={isChat ? 'true' : 'false'}
                       data-chat-target-breath={!reducedMotion && isChat ? 'on' : 'off'}
@@ -7507,10 +9272,38 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       data-edge-endpoint-active={isEndpoint ? 'true' : 'false'}
                       data-edge-endpoint-ring-stroke-width={isEndpoint ? 2.4 : 1.6}
                       data-edge-endpoint-ring-radius={endpointR}
+                      data-edge-endpoint-ring-brightness={isEndpoint ? '1.15' : '1'}
                       style={{
                         pointerEvents: 'none',
                         r: `${endpointR}px`,
-                        transition: 'opacity 180ms ease-out, stroke-width 180ms ease-out, r 180ms ease-out',
+                        /* R585 — endpoint emphasis ring gains filter
+                           brightness(1.15) when an edge endpoint
+                           activates. 24th anchor in per-element
+                           brightness family, and the FOURTH edge-tier
+                           paint layer:
+                             rail          (R581)
+                             visible path  (R582)
+                             flow particle (R583)
+                             endpoint ring (R585)  ← this round
+                           Edge-tier brightness coverage closes at 4/4
+                           paint surfaces. The endpoint ring is the
+                           edge's affinity marker at the connected
+                           nodes — when an edge lights up, all four
+                           paint surfaces brighten together for a
+                           single coherent edge-active gesture spanning
+                           the curve + the node ends.
+                           Endpoint ring 4-axis active signature now:
+                             opacity   R182  0    → 0.85/0.9
+                             sw        R233  1.6  → 2.4
+                             r         R442  +7   → +8
+                             brightness R585  —   → 1.15  ← this round
+                           Plain brightness (no url-filter stack) since
+                           the endpoint ring has no rest-time filter
+                           attribute. Inline style.filter undefined at
+                           rest (no flicker; opacity=0 already hides
+                           the ring). */
+                        filter: isEndpoint ? 'brightness(1.15)' : undefined,
+                        transition: 'opacity 180ms ease-out, stroke-width 180ms ease-out, r 180ms ease-out, filter 180ms ease-out',
                       } as React.CSSProperties}
                     />
                   );
@@ -7586,8 +9379,40 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       data-node-status-ring={status.label}
                       data-node-status-ring-hovered={isRingHovered ? 'true' : 'false'}
                       data-node-status-ring-stroke-width={ringStrokeWidth}
+                      data-node-status-ring-brightness={isRingHovered ? '1.15' : '1'}
                       style={{
-                        transition: 'fill 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out',
+                        /* R584 — status ring gets brightness(1.15) on
+                           hover. 23rd anchor in per-element brightness
+                           family. Stacks with url(#topo-glow) on
+                           cyber+online to preserve the SVG glow filter;
+                           plain brightness on light or cyber+offline.
+                           Same R582/R583 stacked-filter pattern: inline
+                           style.filter overrides the attribute filter,
+                           stacked syntax preserves the glow on hover.
+
+                           Per-node hover signature now 10 layers (added
+                           to the R438 stack):
+                             R26  group translateY -2px
+                             R217 stroke tint
+                             R142 drop-shadow boost
+                             R427 alias letter-spacing
+                             R428 sub-text letter-spacing
+                             R429 body opacity 0.94 → 1.0
+                             R430 hub-spoke α+
+                             R435 hub-spoke sw+
+                             R438 status-ring sw +0.5
+                             R584 status-ring brightness(1.15)  ← this round
+
+                           Per-element brightness family: 23 anchors.
+                           Stacked-filter sub-pattern: 17 anchors. */
+                        filter: isRingHovered
+                          ? (isLight
+                              ? 'brightness(1.15)'
+                              : (isOnline
+                                  ? 'url(#topo-glow) brightness(1.15)'
+                                  : 'brightness(1.15)'))
+                          : undefined,
+                        transition: 'fill 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, filter 300ms ease-out',
                       }}
                     />
                   );
@@ -7643,6 +9468,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const internByAlias = /书生|书小生|intern/i.test(session.alias);
 
                   if (isIntern || internByAlias || vendor.logo) {
+                    /* Round 501 / Loop — vendor avatar inside node circles
+                       gains a hover-gated brightness lift. Pre-R501 the
+                       avatar <image> was the only per-node surface with
+                       NO hover treatment: R26 lifted the card, R242 tinted
+                       the card stroke, R427 spread the alias letter-
+                       spacing, R500 added the alias drop-shadow, R208
+                       lifted the runtime badge ring, R443 thickened
+                       the badge icon stroke, R177 brightened the
+                       halo — but the most visually-prominent element
+                       (the vendor logo / 书生 coin centred in each node)
+                       stayed paint-static. R501 closes the per-node
+                       hover-affordance arc by adding a 15% brightness
+                       lift on hover.
+                       Implementation: CSS filter: brightness(1.15)
+                       when hoveredAlias === session.alias. Pure paint
+                       axis on the <image> element — no geometry change,
+                       no bbox shift. Modern-browser supported (Chrome 64+
+                       / FF 56+ / Safari 9.1+).
+                       Hits 节点视觉 theme. data-node-avatar-hovered
+                       attr surfaces the gate for tests.
+                       Gated on !reducedMotion as a courtesy (brightness
+                       transition < ~50ms still feels instant; the gate
+                       avoids the transition cycle for a11y users). */
+                    const isAvatarHovered = !reducedMotion && hoveredAlias === session.alias;
                     return (
                       <image
                         href={vendor.logo ?? '/intern_avatar.png'}
@@ -7651,9 +9500,137 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         width={size}
                         height={size}
                         preserveAspectRatio="xMidYMid meet"
+                        data-node-avatar={session.alias}
+                        data-node-avatar-hovered={isAvatarHovered ? 'true' : 'false'}
+                        data-node-avatar-rotate={isAvatarHovered ? '3' : '0'}
+                        data-node-avatar-scale={isAvatarHovered ? '1.05' : '1'}
+                        data-node-avatar-drop-shadow={isAvatarHovered ? `0 0 4px ${pal.legendAccent}99` : 'none'}
+                        style={{
+                          /* R600 milestone — node vendor avatar gains
+                             hover-rotate-3 via Tailwind v4 individual
+                             `rotate` CSS property. 6th anchor in hover-
+                             rotate idiom (R350 reset / R547 pill × /
+                             R549 brand logo / R576 fullscreen / R599
+                             runtime badge / R600 node avatar).
+
+                             Same +3° "wobble awake" tilt as R576
+                             fullscreen + R599 runtime badge — the
+                             vendor logo (Claude/OpenAI/etc.) at the
+                             center of every node gently tilts under
+                             cursor. Most visible per-node element gains
+                             a rotation signal on top of R501's
+                             brightness lift.
+
+                             transform-origin pinned to the node center
+                             (pos.x, pos.y) so the logo rotates around
+                             its own visual centre, not the <image>
+                             element's default bbox top-left.
+
+                             Per-node hover signature now 11 axes:
+                               R26  group translateY -2px
+                               R217 stroke tint
+                               R142 drop-shadow boost
+                               R427 alias letter-spacing
+                               R428 sub-text letter-spacing
+                               R429 body opacity 0.94 → 1.0
+                               R430 hub-spoke α+
+                               R435 hub-spoke sw+
+                               R438 status-ring sw +0.5
+                               R584 status-ring brightness(1.15)
+                               R600 avatar rotate 0 → 3deg  ← this round
+
+                             Hover-rotate idiom family (6 anchors):
+                               R350 chrome reset icon       -8°
+                               R547 chip pill × close       (rotate)
+                               R549 brand 书生 logo         (rotate)
+                               R576 chrome fullscreen icon  +3°
+                               R599 node runtime badge      +3°
+                               R600 node vendor avatar      +3°  ← milestone
+
+                             transition list extends 'rotate 200ms
+                             ease-out' alongside the existing 'filter
+                             200ms ease-out' — both axes ride one beat. */
+                          rotate: isAvatarHovered ? '3deg' : '0deg',
+                          /* R602 — per-node avatar gains hover-scale-1.05.
+                             Mirrors R548 brand 书生 logo's scale-105 idiom
+                             at the per-node tier. Stacks with R600 rotate
+                             + R501 brightness so the avatar gets a 3-axis
+                             hover signature (scale + rotate + brightness)
+                             matching the brand-logo polish vocabulary.
+                             Tailwind v4 individual `scale` CSS property
+                             (banked R547 sibling to `rotate`) — independent
+                             of SVG <image>'s x/y/width/height attributes;
+                             composes cleanly with rotate. transform-origin
+                             shared with R600 — pivots around node center.
+                             Pure paint axis: SVG bbox attributes unchanged
+                             at rest, so overlap-test invariant holds (the
+                             probe reads attributes, not visual bbox post-
+                             CSS transform). Scale only fires on hover. */
+                          scale: isAvatarHovered ? '1.05' : '1',
+                          transformOrigin: `${pos.x}px ${pos.y}px`,
+                          /* R605 — per-node avatar gains drop-shadow on
+                             hover, stacked with R501 brightness(1.15).
+                             4th hover axis on the avatar (brightness +
+                             rotate + scale + drop-shadow), bringing
+                             avatar coverage closer to brand 书生 logo's
+                             5-axis signature (only missing R553 always-
+                             on breath, which would be visually noisy
+                             across 30 nodes).
+
+                             Color: pal.legendAccent at 0x99 alpha (~60%)
+                             — cyan/teal accent matches the edge-tier
+                             vocabulary (R534 edge-badge hover-glow,
+                             R478 recent-row pip glow, R479 group-label
+                             glow). The avatar joins the "lit by accent
+                             on attention" family at the per-node tier.
+
+                             4px blur radius reads tight on the avatar's
+                             14-28px footprint — smaller than R604 brand
+                             logo's 8px (40×40 footprint) for size
+                             proportionality.
+
+                             Same R582/R583 stacked-filter pattern.
+                             transition list already includes 'filter
+                             200ms ease-out' from R501; no transition
+                             change needed.
+
+                             Per-node avatar hover signature now 4 axes:
+                               R501/R558  brightness 1   → 1.15
+                               R600/R601  rotate     0   → 3deg
+                               R602       scale      1   → 1.05
+                               R605       drop-shadow → pal.legendAccent  ← this round */
+                          filter: isAvatarHovered
+                            ? `drop-shadow(0 0 4px ${pal.legendAccent}99) brightness(1.15)`
+                            : undefined,
+                          transition: 'filter 200ms ease-out, rotate 200ms ease-out, scale 200ms ease-out',
+                        }}
                       />
                     );
                   }
+                  /* Round 558 / Loop — closes the per-node avatar hover-
+                     affordance arc by extending R501's brightness lift
+                     (image-branch only) to the TWO remaining avatar
+                     variants: vendor monogram + prefix-group hue-hashed
+                     initial fallback. Pre-R558 only the vendor.logo
+                     image branch lifted on hover; the other two
+                     variants stayed paint-static under attention.
+
+                     Per-node avatar hover-brightness family (3 anchors,
+                     all gated on !reducedMotion && hoveredAlias matches):
+                       R501  vendor.logo image          filter on <image>
+                       R558  vendor monogram            filter on wrapping <g>
+                       R558  prefix-group fallback      filter on wrapping <g>
+
+                     Implementation: each fallback branch returns a
+                     fragment with <circle> + <text> as siblings.
+                     Wrapping them in a single <g> with the filter
+                     centralizes the paint axis. Same brightness(1.15)
+                     value as R501 for cross-branch consistency. Same
+                     transition cadence (filter 200ms ease-out).
+
+                     data-node-avatar-monogram-hovered + -fallback-
+                     hovered attrs surface the gates for tests. */
+                  const isAvatarFallbackHovered = !reducedMotion && hoveredAlias === session.alias;
                   if (vendor.id !== 'unknown') {
                     // Known model house, logo asset not in public/vendors/
                     // yet — vendor-tinted monogram stands in.
@@ -7673,7 +9650,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        where less visual weight signals "we don't know
                        what this is" appropriately. */
                     return (
-                      <>
+                      <g
+                        data-node-avatar-monogram={session.alias}
+                        data-node-avatar-monogram-hovered={isAvatarFallbackHovered ? 'true' : 'false'}
+                        data-node-avatar-monogram-rotate={isAvatarFallbackHovered ? '3' : '0'}
+                        data-node-avatar-monogram-scale={isAvatarFallbackHovered ? '1.05' : '1'}
+                        data-node-avatar-monogram-drop-shadow={isAvatarFallbackHovered ? `0 0 4px ${pal.legendAccent}99` : 'none'}
+                        style={{
+                          /* R601 — vendor-monogram fallback gains hover-
+                             rotate-3 mirroring R600's image-branch
+                             closure. Per-node avatar rotate coverage
+                             now 2/3 (image R600, monogram R601 here;
+                             prefix-group fallback completes 3/3 below).
+                             Same R558 closure-of-arc semantics applied
+                             to the rotate axis — what brightness did
+                             for the avatar 3-branch arc (R501 image +
+                             R558 monogram + R558 fallback), rotate
+                             now does (R600 + R601 monogram + R601
+                             fallback).
+                             transform-origin pinned to node center
+                             (pos.x, pos.y) — same idiom as R600. */
+                          rotate: isAvatarFallbackHovered ? '3deg' : '0deg',
+                          /* R602 sibling — vendor monogram fallback
+                             gains hover-scale-1.05 to match the image
+                             branch above. Per-node avatar scale coverage
+                             now 2/3 (image R602, monogram R602 here;
+                             prefix-group fallback completes 3/3 below). */
+                          scale: isAvatarFallbackHovered ? '1.05' : '1',
+                          transformOrigin: `${pos.x}px ${pos.y}px`,
+                          /* R605 sibling — monogram fallback gains
+                             stacked drop-shadow + brightness filter
+                             on hover, mirroring the image branch above. */
+                          filter: isAvatarFallbackHovered
+                            ? `drop-shadow(0 0 4px ${pal.legendAccent}99) brightness(1.15)`
+                            : undefined,
+                          transition: 'filter 200ms ease-out, rotate 200ms ease-out, scale 200ms ease-out',
+                        }}
+                      >
                         <circle cx={pos.x} cy={pos.y} r={ar} fill={vendor.mono.bg} stroke={vendor.mono.ring} strokeWidth="1.5" />
                         {/* Round 284 / Loop: known-vendor monogram letter
                             swaps fontFamily monospace → system sans-serif.
@@ -7705,14 +9718,51 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         >
                           {vendor.initial}
                         </text>
-                      </>
+                      </g>
                     );
                   }
                   // Round 106 (issue #83): hue keyed to the prefix group,
                   // not the full alias — every 通信* node shares one color.
                   const c = aliasAvatarColors(groupKeys[session.alias] || session.alias);
                   return (
-                    <>
+                    <g
+                      data-node-avatar-fallback={session.alias}
+                      data-node-avatar-fallback-hovered={isAvatarFallbackHovered ? 'true' : 'false'}
+                      data-node-avatar-fallback-rotate={isAvatarFallbackHovered ? '3' : '0'}
+                      data-node-avatar-fallback-scale={isAvatarFallbackHovered ? '1.05' : '1'}
+                      data-node-avatar-fallback-drop-shadow={isAvatarFallbackHovered ? `0 0 4px ${pal.legendAccent}99` : 'none'}
+                      style={{
+                        /* R601 — prefix-group hue-hashed initial fallback
+                           gains hover-rotate-3 closing per-node avatar
+                           rotate coverage at 3/3 branches (image R600 +
+                           monogram R601 + fallback R601 here).
+                           Same idiom across all 3 branches: rotate 3deg
+                           on hover, transform-origin pinned to node
+                           center, transition 'rotate 200ms ease-out'
+                           alongside the existing 'filter 200ms' filter
+                           transition from R558. Whatever the vendor-
+                           detection branch resolves to (image / monogram
+                           / hue-hashed initial), the user gets the same
+                           +3° wobble-awake gesture on alias hover. */
+                        rotate: isAvatarFallbackHovered ? '3deg' : '0deg',
+                        /* R602 sibling — prefix-group hue-hashed fallback
+                           gains hover-scale-1.05 closing per-node avatar
+                           scale coverage at 3/3 branches (image + monogram
+                           + fallback all share the same scale-1.05 +
+                           rotate-3deg + brightness-1.15 hover signature). */
+                        scale: isAvatarFallbackHovered ? '1.05' : '1',
+                        transformOrigin: `${pos.x}px ${pos.y}px`,
+                        /* R605 sibling — prefix-group hue-hashed fallback
+                           gains stacked drop-shadow + brightness filter
+                           on hover. Closes per-node avatar drop-shadow
+                           coverage at 3/3 branches (image + monogram +
+                           fallback all share the same stacked filter). */
+                        filter: isAvatarFallbackHovered
+                          ? `drop-shadow(0 0 4px ${pal.legendAccent}99) brightness(1.15)`
+                          : undefined,
+                        transition: 'filter 200ms ease-out, rotate 200ms ease-out, scale 200ms ease-out',
+                      }}
+                    >
                       <circle cx={pos.x} cy={pos.y} r={ar} fill={c.bg} stroke={c.ring} strokeWidth="1" />
                       <text
                         x={pos.x}
@@ -7726,7 +9776,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       >
                         {aliasInitial(session.alias)}
                       </text>
-                    </>
+                    </g>
                   );
                 })()}
                 {/* Issue #96: runtime badge — small corner glyph marking the
@@ -7757,7 +9807,106 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // badge-active exposes the gate for tests.
                   const isNodeActive = !reducedMotion && hoveredAlias === session.alias;
                   return (
-                    <g style={{ pointerEvents: 'none' }}>
+                    /* Round 559 / Loop — runtime badge outer <g> picks up
+                       a drop-shadow glow on node hover, using the runtime's
+                       own identity color (rt.color, hex). 16th anchor in
+                       the drop-shadow visual-polish family. Pairs with
+                       existing R208 ring r-lift + R443 icon sw-lift for
+                       a 3-axis runtime-badge hover signature now spanning
+                       geometry + stroke + paint glow:
+                         R208  ring r        7   → 8     (online)
+                         R208  ring sw       1.5 → 2
+                         R443  icon sw       2.4 → 2.8
+                         R559  outer filter  none → drop-shadow(rt.color)  ← this round
+                       Filter on the OUTER <g> applies uniformly to both
+                       the ring <circle> and the inner icon <path> —
+                       single paint-axis lift covers both layers in one
+                       motion-coherent gesture.
+                       Hue: `${rt.color}99` hex+alpha (60%) — rt.color is
+                       6-digit hex (#a78bfa / #38bdf8 / #34d399 / #fbbf24
+                       per lib/vendorIdentity.ts), so hex+alpha concat is
+                       safe (banked R541 pattern: hex sources use hex+
+                       alpha; only hsl/color()/dynamic sources need color-
+                       mix).
+                       2px blur reads tight on a small badge (r=7 online
+                       / r=5.5 offline). transition list adds 'filter
+                       150ms ease-out' matching the R208 ring r/sw cadence
+                       at this surface.
+                       Drop-shadow visual-polish family extension (16
+                       anchors now): R476/R477/R478/R479/R480/R481 +
+                       R500/R532-R536/R537/R538/R540/R543-R546/R550 +
+                       R559 (this round).
+                       data-runtime-badge-glow attr surfaces the gate
+                       for tests. */
+                    <g
+                      data-runtime-badge-glow={isNodeActive ? 'true' : 'false'}
+                      data-runtime-badge-brightness={isNodeActive ? '1.15' : '1'}
+                      data-runtime-badge-rotate={isNodeActive ? '3' : '0'}
+                      style={{
+                        pointerEvents: 'none',
+                        /* R599 — runtime badge gains hover-rotate-3.
+                           5th anchor in hover-rotate idiom (R350 reset
+                           -8° / R547 pill × / R549 brand logo / R576
+                           fullscreen +3° / R599 runtime badge +3°).
+                           Same +3° tilt as R576 fullscreen icon — at the
+                           14×14 badge scale, a 3° rotation reads as a
+                           subtle "wobble awake under attention" gesture
+                           that doesn't overwhelm the small surface.
+                           Applied via CSS individual `rotate` property
+                           (Tailwind v4 banked R547 — independent of SVG
+                           transform attribute, composes cleanly with
+                           the inner <g>'s translate+scale transform).
+                           transform-origin pinned to the badge center
+                           (bx, by) so rotation pivots around the
+                           visual centre, not the outer <g>'s default
+                           bbox corner — keeps the ring and icon spinning
+                           in place rather than orbiting offset.
+                           Runtime badge hover signature now 6 axes —
+                           densest per-node element in TopoGraph:
+                             R208  ring r          7   → 8
+                             R208  ring sw         1.5 → 2
+                             R443  icon sw         2.4 → 2.8
+                             R559  outer filter    none → drop-shadow(rt.color)
+                             R586  outer filter    stack brightness(1.15)
+                             R599  outer rotate    0   → 3deg  ← this round
+                           transition list extends with 'rotate 150ms
+                           ease-out' matching R586/R559 cadence at this
+                           surface. Six axes all ride one 150ms beat.
+                           Hover-rotate idiom family extension
+                           (5 anchors): R350 / R547 / R549 / R576 / R599. */
+                        rotate: isNodeActive ? '3deg' : '0deg',
+                        transformOrigin: `${bx}px ${by}px`,
+                        /* R586 — runtime badge outer <g> stacks
+                           brightness(1.15) onto the existing R559
+                           drop-shadow on node hover. 25th anchor in
+                           per-element brightness family, 18th in
+                           stacked-filter sub-pattern.
+
+                           Runtime badge hover signature now CLOSED
+                           at 4 axes (geometry + stroke + paint glow
+                           + paint brightness):
+                             R208  ring r         7   → 8
+                             R208  ring sw        1.5 → 2
+                             R443  icon sw        2.4 → 2.8
+                             R559  outer filter   none → drop-shadow(rt.color)
+                             R586  outer filter   stack brightness(1.15)  ← this round
+
+                           The drop-shadow + brightness stack is the
+                           banked R564/R570 "halo + glow" pattern —
+                           drop-shadow paints the colored halo, brightness
+                           lifts the underlying paint (ring stroke +
+                           icon path both gain ~15% luminance). Single
+                           CSS filter chain on the outer <g> covers
+                           both child layers uniformly.
+
+                           Same R208/R443/R559 150ms cadence preserved
+                           via the existing transition. */
+                        filter: isNodeActive
+                          ? `drop-shadow(0 0 2px ${rt.color}99) brightness(1.15)`
+                          : undefined,
+                        transition: 'filter 150ms ease-out, rotate 150ms ease-out',
+                      }}
+                    >
                       <circle
                         cx={bx} cy={by} r={br}
                         fill={pal.containerBg}
@@ -8010,11 +10159,39 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         data-node-label-card-elevation={
                           !reducedMotion && hoveredAlias === session.alias ? 'hover' : 'idle'
                         }
+                        data-node-label-card-brightness={!reducedMotion && hoveredAlias === session.alias ? '1.15' : '1'}
                         style={{
+                          /* R613 — per-node label card stacks brightness
+                             (1.15) onto R142's hover drop-shadow. Same
+                             banked R582/R583 stacked-filter pattern.
+                             4th paint axis on the card's hover signature:
+                               R217  stroke tint   → pal.legendAccent
+                               R211  fill ease     200ms
+                               R142  drop-shadow   rest → hover (deeper)
+                               R613  brightness    1   → 1.15  ← this round
+
+                             The card's bg fill (pal.labelBox.fill: dark
+                             navy on cyber / white on light) lifts +15%
+                             alongside the existing drop-shadow
+                             elevation — cyber theme reads as "card lit
+                             warmer under attention" since the dark fill
+                             gains visible luminance from the +15%
+                             multiplication. Light theme bg is already
+                             near-white so brightness barely shifts the
+                             rect, but the cyan-tinted stroke (R217)
+                             still lifts visibly through the brightness
+                             filter.
+
+                             Drop-shadow exists at BOTH rest + hover
+                             tiers (R142); brightness only stacks on
+                             the hover tier. Rest stays at plain DS.
+
+                             Existing 'filter 220ms ease-out' transition
+                             covers brightness at the same cadence. */
                           filter: !reducedMotion && hoveredAlias === session.alias
                             ? (isLight
-                                ? 'drop-shadow(0 3px 8px rgba(15,23,42,0.20))'
-                                : 'drop-shadow(0 4px 12px rgba(0,0,0,0.60))')
+                                ? 'drop-shadow(0 3px 8px rgba(15,23,42,0.20)) brightness(1.15)'
+                                : 'drop-shadow(0 4px 12px rgba(0,0,0,0.60)) brightness(1.15)')
                             : (isLight
                                 ? 'drop-shadow(0 1px 2px rgba(15,23,42,0.08))'
                                 : 'drop-shadow(0 1px 2px rgba(0,0,0,0.30))'),
@@ -8124,10 +10301,63 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           letterSpacing:
                             chatAlias    === session.alias ? '0.5px' :
                             hoveredAlias === session.alias ? '0.3px' : '0px',
-                          filter: !reducedMotion && hoveredAlias === session.alias
-                            ? `drop-shadow(0 0 2px ${status.text}80)`
+                          /* Round 564 / Loop — alias text filter stacks
+                             brightness(1.15) on top of R500's drop-shadow
+                             on hover. Mirrors R542 pressure-seg pattern
+                             (brightness + drop-shadow in one stacked
+                             filter declaration). Pre-R564 hover added
+                             only a drop-shadow halo around the glyph;
+                             post-R564 the glyph ALSO brightens, so the
+                             identity text reads as both "glowing" AND
+                             "lit up" under attention — dual paint axes
+                             through one filter chain.
+                             CSS filter supports multiple functions
+                             applied left-to-right. brightness(1.15)
+                             lifts the per-status text color (status.text:
+                             green/teal/slate per tier) by 15%; the drop-
+                             shadow then paints the outer halo in the
+                             status-tier hue. Together: the alias glyph
+                             both intensifies its identity color AND
+                             radiates outward in that same color.
+                             Same +15% brightness as R501 vendor logo
+                             avatar (banked per-node hover-brightness
+                             pattern). Consistent +15% across all per-
+                             node identity surfaces (logo, monogram,
+                             fallback avatar from R558, AND now alias
+                             text). Cross-element brightness consistency.
+                             data-node-alias-brightness attr surfaces
+                             the lift for tests. */
+                          /* R616 — extends R564 alias text brightness
+                             gate to ALSO fire on chatAlias === alias.
+                             2nd anchor in chat-target-gated brightness
+                             family (sibling to R615 chat ring).
+
+                             Pre-R616: filter only fired on hoveredAlias
+                             match. The chat-target stayed at flat fill
+                             color while the chat ring glowed around it
+                             — visual disparity between identification
+                             elements that should read as a unified
+                             "this is the chat partner" gesture.
+
+                             Post-R616: alias text brightens on EITHER
+                             hover OR chat-target. Mirrors the existing
+                             3-tier letter-spacing (R427/R427-chat) which
+                             already responds to both gates. The chat
+                             partner's alias text now reads:
+                               +15% brighter (R616)
+                               +0.5px letter-spaced (R427-chat tier)
+                               surrounded by a glowing ring (R615)
+                             Unified identification gesture across 3
+                             axes when chat is open.
+
+                             Same drop-shadow + brightness filter chain
+                             (no separate color for chat — same R564
+                             pattern, just expanded gate). */
+                          filter: !reducedMotion && (hoveredAlias === session.alias || chatAlias === session.alias)
+                            ? `drop-shadow(0 0 2px ${status.text}80) brightness(1.15)`
                             : undefined,
                         }}
+                        data-node-alias-brightness={!reducedMotion && (hoveredAlias === session.alias || chatAlias === session.alias) ? '1.15' : '1'}
                       >
                         {truncate(session.alias, fullMax)}
                       </text>
@@ -8167,6 +10397,31 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           alias > status hierarchy holds at the type
                           level. data-node-sub-text-font-weight attr
                           exposes the value for tests. */}
+                      {/* Round 567 / Loop — node sub-text joins the per-
+                          node hover-brightness consistency family. Pre-
+                          R567 sub-text had only fill brighten (R211) +
+                          ls 0→0.2 (R428); the alias text above lifted
+                          via R500 drop-shadow + R564 brightness(1.15)
+                          stacked. R567 adds brightness(1.15) to sub-
+                          text on the same isNodeActive gate so it
+                          chromatically lifts together with the alias.
+                          Per-node hover-brightness consistency family
+                          — 6 anchors at uniform +15%:
+                            R501  vendor.logo image          filter on <image>
+                            R558  vendor monogram            filter on <g>
+                            R558  prefix-group fallback      filter on <g>
+                            R564  alias text (stacked w/ DS) brightness(1.15)
+                            R567  node sub-text              brightness(1.15)  ← this round
+                            (+ R559 runtime badge drop-shadow tier-color glow)
+                          Now every per-node identity surface (3 avatar
+                          variants + alias + sub-text + badge) lifts
+                          together on node hover with consistent visual
+                          response.
+                          Pure paint axis; bbox unchanged. transition
+                          list extends to include 'filter 200ms ease-
+                          out' matching R428 ls cadence at this scope.
+                          data-node-sub-text-brightness attr exposes
+                          the lift for tests. */}
                       <text
                         x="0" y={subY} textAnchor="middle"
                         fill={status.primary}
@@ -8174,10 +10429,29 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         fontWeight="500"
                         data-node-sub-text={session.alias}
                         data-node-sub-text-hovered={hoveredAlias === session.alias ? 'true' : 'false'}
+                        data-node-sub-text-chat-target={chatAlias === session.alias ? 'true' : 'false'}
                         data-node-sub-text-font-weight="500"
+                        data-node-sub-text-brightness={!reducedMotion && (hoveredAlias === session.alias || chatAlias === session.alias) ? '1.15' : '1'}
+                        /* R617 — extends R567 sub-text brightness gate
+                           to ALSO fire on chatAlias === alias. 3rd anchor
+                           in chat-target-gated brightness family (R615
+                           chat ring + R616 alias text + R617 sub-text).
+
+                           Both per-node text lines (alias + sub-text)
+                           now brighten together when their node is the
+                           chat partner — unified "this is the chat
+                           partner" gesture across all per-node text
+                           identification surfaces.
+
+                           Same R567 plain brightness(1.15) filter (no
+                           drop-shadow stack at sub-text scope per R567).
+                           Same gate-union pattern as R616. */
                         style={{
-                          transition: 'fill 300ms ease-out, letter-spacing 200ms ease-out',
+                          transition: 'fill 300ms ease-out, letter-spacing 200ms ease-out, filter 200ms ease-out',
                           letterSpacing: hoveredAlias === session.alias ? '0.2px' : '0px',
+                          filter: !reducedMotion && (hoveredAlias === session.alias || chatAlias === session.alias)
+                            ? 'brightness(1.15)'
+                            : undefined,
                         }}
                       >
                         {status.label}{isOnline && sseCountFor != null ? ` sse:${sseCountFor}` : ''}
@@ -8440,7 +10714,38 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               strokeWidth="2"
               opacity="0"
               data-click-ripple
-              style={{ pointerEvents: 'none' }}
+              data-click-ripple-glow={`0 0 4px ${clickRipple.color}99`}
+              style={{
+                pointerEvents: 'none',
+                /* R608 — click-ripple gains drop-shadow glow that
+                   matches the ripple's stroke color. The expanding
+                   ring (r0+4 → r0+30 over 500ms) now visually pulses
+                   outward as a "lit" ring rather than a plain stroke
+                   line — the user's "I clicked" moment reads more
+                   confidently as a feedback signal.
+
+                   Color: clickRipple.color (status.primary from the
+                   click target: green for working / teal for idle /
+                   slate for offline; cyan for hub clicks) at 0x99
+                   alpha (~60%) — matches the source element's status
+                   identity, so the ripple inherits the visual hue of
+                   what the user clicked.
+
+                   4px blur radius is the same as R605 avatar
+                   drop-shadow; reads as soft halo, not loud bloom,
+                   at the ripple's wide 30+ px expansion range.
+
+                   Drop-shadow visual-polish family extension —
+                   click-feedback surface adds 1 more anchor to the
+                   family (now ~23 anchors with R604/R605 + R608).
+
+                   The SMIL animates r and opacity for 500ms; filter
+                   is static (no animation needed — the opacity fade
+                   carries the visual decay automatically). No
+                   transition needed since the element is created
+                   fresh each click. */
+                filter: `drop-shadow(0 0 4px ${clickRipple.color}99)`,
+              }}
             >
               <animate
                 attributeName="r"
@@ -8654,7 +10959,55 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 200ms ease-out' alongside R345's ls + R55's fill
                 200ms. data-recent-panel-title-fw exposes the
                 resolved weight for tests. */}
-            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight={activeEdgeKey ? '800' : '700'} letterSpacing={hoveredPanel === 'recent' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out' }} data-recent-panel-title data-recent-panel-title-fw={activeEdgeKey ? '800' : '700'} data-recent-panel-title-active={activeEdgeKey ? 'true' : 'false'}>recent signal</text>
+            {/* Round 550 / Loop — drop-shadow visual-polish family
+                extends to a 14th anchor: the recent-panel header
+                title gains a soft pal.legendAccent glow when the
+                panel has an active row (activeEdgeKey). Pre-R550
+                the title's state-flip on active was 2-axis (R482
+                fw 700→800 + R345 ls 0.3→0.4 when panel-hovered);
+                R550 adds the paint axis so the title brightens
+                paint-wise alongside the typographic tightening when
+                a row inside its panel is locked.
+
+                Hue: pal.legendAccent + hex alpha '80' (~50%) — same
+                strength as R479 group-label pin-glow at the parent
+                panel-title scope. 2px blur reads soft; cyan accent
+                ties the title visually to the active row's pin
+                colour (cyber: cyan-300 / light: teal-600). Hex+alpha
+                concat safe — pal.legendAccent is '#67e8f9' (cyber)
+                or '#0d9488' (light), both 6-digit hex (banked R541:
+                hex sources use hex+alpha; only hsl/color()/dynamic
+                sources need color-mix).
+
+                Drop-shadow visual-polish family extension (14
+                anchors now):
+                  R476  hub digit          hover-gated emerald
+                  R477  legend pin-ring    pin-gated   row.fill
+                  R478  recent-row pip     freshness   cyan
+                  R479  group-label text   pin-gated   cyan
+                  R532-R536 hub-cluster glow QUINTET
+                  R537  legend swatch      hover/pin   row.fill
+                  R538  group-label hover-precedence
+                  R540  edge-badge text    pin-gated   cyan
+                  R543-R546 pin-active pill 4-variant arc
+                  R550  recent-panel title pin-gated   cyan  ← this round
+                  R550  legend-panel title pin-gated   cyan  ← sibling (next text below)
+
+                filter is paint-only; bbox unchanged; overlap-test
+                invariants hold. transition list extends to include
+                'filter 200ms ease-out' alongside R345 ls + R482 fw
+                + R55 fill 200ms — one motion-coherent 3-axis active-
+                state lift.
+                data-recent-panel-title-glow attr exposes the gate
+                state for tests. */}
+            {/* Round 573 / Loop — recent panel-title joins per-element
+                brightness family at 11th anchor. Stacks brightness(1.15)
+                onto R550's active-gated drop-shadow. Mirrors R572
+                panel-row text pattern at the panel-TITLE tier — both
+                panels now have brightness in their active signature
+                at BOTH chrome tiers (title + row text), completing
+                the panel paint-axis cascade. */}
+            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight={activeEdgeKey ? '800' : '700'} letterSpacing={hoveredPanel === 'recent' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out', filter: activeEdgeKey ? `drop-shadow(0 0 2px ${pal.legendAccent}80) brightness(1.15)` : undefined }} data-recent-panel-title data-recent-panel-title-fw={activeEdgeKey ? '800' : '700'} data-recent-panel-title-active={activeEdgeKey ? 'true' : 'false'} data-recent-panel-title-glow={activeEdgeKey ? 'true' : 'false'} data-recent-panel-title-brightness={activeEdgeKey ? '1.15' : '1'}>recent signal</text>
             {/* R96: header count now matches what the rows show. Pre-R96
                 this read "X msgs" off the raw messages array, but the
                 rows below render DEDUPED flowLinks — so a fleet with 10
@@ -8729,21 +11082,59 @@ 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 566 / Loop — recent-panel-count gains hover-
+                     state letter-spacing tween (0.2 → 0.4 on hovered-
+                     Panel === 'recent'). Pairs with R424 fw 600→700
+                     on the same gate. Count now has 2-axis hover
+                     signature (fw + ls), matching the panel title's
+                     R345 ls + R482 fw lift pattern at the panel-
+                     header data-tspan scope. R349 editorial 0.2
+                     baseline preserved at rest — only hover lifts.
+                     Sibling treatment on the legend-panel count
+                     below closes the panel-pair symmetry. */
+                  letterSpacing={hoveredPanel === 'recent' ? '0.4' : '0.2'}
+                  data-recent-panel-count-letter-spacing={hoveredPanel === 'recent' ? '0.4' : '0.2'}
+                  data-recent-panel-count-brightness={hoveredPanel === 'recent' ? '1.15' : '1'}
+                  style={{
+                    /* R589 — recent-signal panel count <text> root gains
+                       brightness(1.15) on hoveredPanel === 'recent'.
+                       28th anchor in per-element brightness family.
+                       Sibling to R588 at the legend panel; closes
+                       panel-pair brightness symmetry at the header-
+                       count scope.
+
+                       Panel-pair title↔count brightness parity now
+                       complete:
+                         legend  title  pinnedStatus gate    (R571 family)
+                         legend  count  hoveredPanel gate    (R588)
+                         recent  title  activeEdgeKey gate   (R571 family)
+                         recent  count  hoveredPanel gate    (R589)  ← this round
+
+                       All 4 panel-header text elements respond on the
+                       brightness axis — full symmetric closure.
+
+                       Recent-signal panel count hover signature now
+                       3 axes (mirrors R588 legend count closure):
+                         R311/R424  fontWeight 600 → 700
+                         R349/R566  letter-spacing 0.2 → 0.4
+                         R589       brightness 1 → 1.15  ← this round
+
+                       Filter applied at <text> root (the parent here);
+                       the nested fw-changing tspan inherits the lift
+                       via SVG inheritance — unlike applying to tspan
+                       directly, which is unreliable cross-browser.
+
+                       The R162 freshness-tinted fill (cyan/teal alpha
+                       1.0 → 0.30 by ageSec) gets the +15% multiplied
+                       in — fresh data (alpha=1) reads dramatically
+                       brighter on hover; stale data (alpha=0.30) gets
+                       a proportionally smaller absolute lift. Hover
+                       brightness is freshness-amplifying at this
+                       surface — coherent with the panel's "freshness
+                       is the primary signal" semantic. */
+                    filter: hoveredPanel === 'recent' ? 'brightness(1.15)' : undefined,
+                    transition: 'letter-spacing 200ms ease-out, filter 200ms ease-out',
+                  }}
                 >
                   {/* Round 225 / Loop: tabular-nums on the panel-header
                       flow-count tspan. The "{N} flows" string lives in
@@ -9208,7 +11599,39 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                               : 1}
                       data-recent-row-tint={link.key}
                       data-recent-row-tint-transition="200ms"
-                      style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out' }}
+                      data-recent-row-tint-brightness={isRowActive ? '1.15' : '1'}
+                      /* R611 — recent-row tint rect brightness on
+                         hover/pin. Sibling to R610 group-label tint
+                         rect — closes panel-row tint rect brightness
+                         parity across both panel scopes:
+                           R610  group label tint rect (pin/hover-label)
+                           R611  recent-row tint rect (hover/pin row)  ← this round
+
+                         Same banked R582/R583 stacked-filter pattern
+                         (here plain brightness — no drop-shadow stack
+                         since the tint rect doesn't carry one). The
+                         pal.legendAccent cyan/teal fill (0.18-0.22 pin
+                         / 0.10-0.14 hover alpha) lifts +15% — small
+                         but perceivable lift that ties the row tint
+                         paint axis to its fill/opacity response on
+                         row inspection.
+
+                         Pin/hover-gated brightness family at panel tier
+                         now 6 anchors:
+                           R571  group label text       (pin)
+                           R587  group cluster box      (pin/hover)
+                           R607  legend pin-ring        (pin)
+                           R609  legend flow-arrow      (panel-hover)
+                           R610  group label tint rect  (pin/hover-label)
+                           R611  recent-row tint rect   (hover/pin row)  ← this round
+
+                         transition list extends with 'filter 200ms
+                         ease-out' alongside the existing 200ms
+                         fill/opacity cadence. */
+                      style={{
+                        filter: isRowActive ? 'brightness(1.15)' : undefined,
+                        transition: 'fill 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
+                      }}
                     />
                     {/* Round 160 / Loop: recency pip. Canvas flow edges
                         fade by freshness (R10: full intensity ≤30s →
@@ -9344,11 +11767,38 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           data-recent-row-freshness-radius={(isRowHovered || isRowPinned) ? 2.5 : 2.0}
                           data-recent-row-freshness-lifted={(isRowHovered || isRowPinned) ? 'true' : 'false'}
                           data-recent-row-freshness-glow={alpha > 0.7 ? 'true' : 'false'}
+                          data-recent-row-freshness-brightness={alpha > 0.7 ? '1.15' : '1'}
                           style={{
                             pointerEvents: 'none',
                             r: `${(isRowHovered || isRowPinned) ? 2.5 : 2.0}px`,
+                            /* R606 — recent-row freshness pip stacks
+                               brightness(1.15) onto R478's freshness-gated
+                               drop-shadow. Same alpha > 0.7 gate so both
+                               effects activate together when the signal
+                               is "live" (~30s window per R10 freshness
+                               ramp) and ease off in lockstep as data
+                               ages past ~45s.
+
+                               Pip 4-axis freshness/hover signature now:
+                                 R10   opacity tracks alpha (freshness)
+                                 R447  r 2.0 → 2.5 (hover/pin)
+                                 R478  drop-shadow on alpha > 0.7
+                                 R606  brightness(1.15) on alpha > 0.7  ← this round
+
+                               R478 + R606 share one filter chain on the
+                               same gate — banked R582/R583 stacked-filter
+                               pattern at the recent-row pip scope. The
+                               fresh signal reads ~15% brighter + glows
+                               cyan; the stale signal sits at flat
+                               legendAccent fill with no filter.
+
+                               Hover brightness is freshness-gated here
+                               (vs hover-gated elsewhere) — matches the
+                               "this signal is live" semantic that R478
+                               established. data-recent-row-freshness-
+                               brightness attr exposes the gate for tests. */
                             filter: alpha > 0.7
-                              ? `drop-shadow(0 0 3px ${pal.legendAccent}80)`
+                              ? `drop-shadow(0 0 3px ${pal.legendAccent}80) brightness(1.15)`
                               : undefined,
                             transition: 'opacity 200ms ease-out, r 200ms ease-out, filter 200ms ease-out',
                           } as React.CSSProperties}
@@ -9398,11 +11848,46 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          tier without disturbing the surrounding family
                          baseline. data-recent-row-text-font-weight attr
                          exposes the value for tests. */
-                      fontWeight="500"
+                      /* Round 530 / Loop — extends hover-fw family
+                         (R416/R420/R425/R520/R521/R522, 6 anchors) to
+                         a 7th anchor: recent-row alias text gains
+                         fontWeight 500 → 600 on (isRowHovered ||
+                         isRowPinned). Pre-R530 R363 set fw=500
+                         statically; hover/pin lifted other axes
+                         (R55 fill brighten / R434 letter-spacing
+                         3-tier / R143 translateY / R104 row bg-
+                         tint / R474 cadence) but the fw stayed
+                         flat — same asymmetry R520 closed at the
+                         +N more footer.
+                         R530 mirrors R520's pattern at the row-
+                         text scope. Hover OR pin (isRowActive
+                         union) lifts fw to 600, matching the count
+                         tspan's cold-state tier (R320 fw=600), so
+                         on active state the alias label reads at
+                         the same data tier as the count it sits
+                         next to. Inner count tspan has its own
+                         explicit fontWeight (600 or 700 per R320/
+                         R445) so parent fw lift doesn't bleed
+                         (inheritance overridden).
+                         Hover-fw family extension (7 anchors):
+                           R416  chip-row count digit
+                           R420  chrome zoom-level
+                           R425  hub-center digit
+                           R520  +N more flows footer
+                           R521  chrome nodeSize S/M/L inactive
+                           R522  chrome layout Ring/Grid inactive
+                           R530  recent-row alias text  ← this round
+                         transition list extends to include
+                         'font-weight 200ms ease-out', matching the
+                         R474 cadence of the existing fill +
+                         letter-spacing axes on this element.
+                         data-recent-row-text-font-weight attr
+                         flips '500' → '600' on isRowActive. */
+                      fontWeight={(isRowHovered || isRowPinned) ? '600' : '500'}
                       data-recent-row-text={link.key}
                       data-recent-row-text-pinned={isRowPinned ? 'true' : 'false'}
                       data-recent-row-text-hovered={!isRowPinned && isRowHovered ? 'true' : 'false'}
-                      data-recent-row-text-font-weight="500"
+                      data-recent-row-text-font-weight={(isRowHovered || isRowPinned) ? '600' : '500'}
                       /* Round 434 / Loop: recent-signal row text extends
                          from R220's pin-only letter-spacing (0 → 0.5 on
                          isRowPinned) to a 3-tier scale matching R433
@@ -9451,11 +11936,49 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          spacing values unchanged; R363 fw + R55 fill
                          brighten unchanged — only the timing axis
                          shifts. */
+                      /* Round 568 / Loop — extends the drop-shadow visual-
+                         polish family (16 anchors after R559) to a 17th
+                         anchor at the recent-row text scope. Adds a soft
+                         pal.legendAccent glow on isRowHovered || isRow-
+                         Pinned, completing the row's hover/pin signature
+                         at 4 paint+typography axes:
+                           R55   fill brighten         (fill)
+                           R434  letter-spacing 3-tier (typography kerning)
+                           R530  fontWeight 500 → 600  (typography weight)
+                           R568  drop-shadow glow      (paint glow)  ← this round
+                         Mirror of R550 panel-title pin-gated glow pattern,
+                         applied at the panel-ROW tier rather than panel-
+                         TITLE tier. Hue: pal.legendAccent + hex alpha 80
+                         (~50%) — same strength as R479 group-label /
+                         R550 panel-title glows for cross-element
+                         consistency. 2px blur (smaller than R478 pip's
+                         3px since text is fontSize 9 and a heavier blur
+                         would bleed into adjacent row text); blur 2px
+                         keeps the glow tight to the row's text glyphs.
+                         transition list extends to include 'filter
+                         200ms ease-out' matching the R474 200ms cadence
+                         of the existing 3 axes.
+                         data-recent-row-text-glow attr surfaces the
+                         gate for tests. */
                       data-recent-row-text-transition="200ms"
+                      data-recent-row-text-glow={(isRowHovered || isRowPinned) ? 'true' : 'false'}
+                      /* Round 572 / Loop — per-element brightness family
+                         9th anchor at recent-row text scope. Stacks
+                         brightness(1.15) onto R568's drop-shadow in
+                         one filter chain (same R564/R570/R571 pattern).
+                         Glyph BOTH glows (R568 drop-shadow halo) AND
+                         brightens (R572 inner lift) simultaneously.
+                         Cross-element brightness consistency: same +15%
+                         across alias / sub-text / edge-badge / group-
+                         label / and now recent-row text. */
+                      data-recent-row-text-brightness={(isRowHovered || isRowPinned) ? '1.15' : '1'}
                       style={{
-                        transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
+                        transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
                         letterSpacing: isRowPinned ? '0.5px' :
                                        isRowHovered ? '0.25px' : '0px',
+                        filter: (isRowHovered || isRowPinned)
+                          ? `drop-shadow(0 0 2px ${pal.legendAccent}80) brightness(1.15)`
+                          : undefined,
                       }}
                     >
                       {/* R138 / Loop: typography unification with the rest
@@ -9627,9 +12150,51 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         data-recent-row-ts={link.key}
                         data-recent-row-ts-alpha={tsAlpha.toFixed(2)}
                         data-recent-row-ts-lifted={(isRowHovered || isRowPinned) ? 'true' : 'false'}
+                        data-recent-row-ts-brightness={(isRowHovered || isRowPinned) ? '1.15' : '1'}
                         style={{
                           pointerEvents: 'none',
-                          transition: 'opacity 200ms ease-out',
+                          /* R591 — recent-row timestamp gains filter
+                             brightness(1.15) on row hover/pin. 30th
+                             anchor in per-element brightness family.
+                             Closes recent-row 3-element brightness
+                             coverage:
+                               recent-row text  (R572, parent <text>
+                                                 filter — count tspan
+                                                 inherits)
+                               recent-row ts    (R591, sibling <text>
+                                                 — its own filter)  ← this round
+
+                             Symmetric with the legend-row R590 closure
+                             pattern: when a sibling text element can't
+                             inherit the row's brightness via ancestor
+                             filter, it needs its own filter. R590
+                             solved this for legend-count; R591 does
+                             the same for recent-ts.
+
+                             Triple multiplicative interaction at this
+                             surface:
+                               opacity: tsAlpha (R191 freshness 1.0 →
+                                       0.25 by ageSec) → 1.0 on hover/pin
+                                       (R484)
+                               fill:   pal.legendText (neutral gray)
+                               brightness: 1.0 → 1.15 on hover/pin
+
+                             Stale-data hover semantic: a stale row's
+                             timestamp at tsAlpha=0.25 gets opacity 0.25
+                             × brightness 1.0 at rest, but jumps to
+                             opacity 1.0 × brightness 1.15 on hover —
+                             revealing the dim metadata at maximum
+                             legibility under attention. Hover brightness
+                             is freshness-overriding at this surface,
+                             same as R589's freshness-amplifying behavior
+                             at the recent-panel count above.
+
+                             data-recent-row-ts-brightness attr exposes
+                             the gate for tests. */
+                          filter: (isRowHovered || isRowPinned)
+                            ? 'brightness(1.15)'
+                            : undefined,
+                          transition: 'opacity 200ms ease-out, filter 200ms ease-out',
                           fontVariantNumeric: 'tabular-nums',
                         }}
                       >
@@ -9803,6 +12368,39 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       stays as is, so the rest-vs-hover delta still
                       reads clearly. data-recent-panel-more-font-weight
                       attr exposes the value for tests. */}
+                  {/* Round 520 / Loop — extends the `+N more flows` footer
+                      to a 5-axis hover signature by adding fontWeight
+                      500 → 600 on hover. Pre-R520 the footer carried 4
+                      hover axes:
+                        R195   fill           legendText → legendAccent
+                        R325   letter-spacing 0.2 → 0.3px (R344 tween)
+                        R325   opacity        0.55 → 0.85
+                        R133   underline      none → underline
+                      R368 had set fontWeight 500 statically as a sibling
+                      to R363/R364/R366 small-text fw lift family — but
+                      the footer's hover state didn't carry a fontWeight
+                      DELTA the way other interactive surfaces do (chip-
+                      row counts R416, chrome zoom-level R420, hub digit
+                      R425). R520 adds the missing weight axis: fw 500
+                      → 600 on hover, so the footer reads "thickening AND
+                      lighting up" under cursor — same idiom as the
+                      chrome zoom-level R420 / chip-row digit R416 hover-
+                      bold pattern, applied at the panel nav-action
+                      surface.
+                      data-recent-panel-more-font-weight attr value
+                      flips from '500' → '600' on hover (was static
+                      '500' pre-R520).
+                      Bonus closure — R475 panel-text cadence: pre-R520
+                      the footer's transition list had `opacity 150ms`
+                      while R475 unified panel-text transitions at
+                      200ms. R518 closed the same gap at legend-count.
+                      R520 closes the LAST panel-text 150ms holdout
+                      here AND adds the new font-weight 200ms axis. All
+                      4 transition properties (opacity / fill / letter-
+                      spacing / font-weight) now uniform 200ms at the
+                      footer — same cadence as legend-label / legend-
+                      count / recent-row alias / recent-row count /
+                      group-label. */}
                   <text
                     x="115" y="82"
                     textAnchor="middle"
@@ -9810,14 +12408,49 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fontSize="9"
                     fontFamily="monospace"
                     fontStyle="italic"
-                    fontWeight="500"
+                    fontWeight={hoveredRecentMore ? '600' : '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' }}
+                    data-recent-panel-more-font-weight={hoveredRecentMore ? '600' : '500'}
+                    data-recent-panel-more-transition="200ms"
+                    data-recent-panel-more-brightness={hoveredRecentMore ? '1.15' : '1'}
+                    style={{
+                      /* R592 — +N more flows footer gains filter
+                         brightness(1.15) on hover. 31st anchor in
+                         per-element brightness family. Closes the
+                         footer's hover signature at 6 axes — the
+                         densest hover signature on any topology
+                         surface:
+                           R195  fill           legendText → legendAccent
+                           R325  letter-spacing 0.2 → 0.3 (R344 tween)
+                           R325  opacity        0.55 → 0.85
+                           R133  underline      none → underline
+                           R520  fontWeight     500 → 600
+                           R592  brightness     1 → 1.15  ← this round
+
+                         The footer is the recent-signal panel's
+                         primary nav affordance into /messages — when
+                         user hovers it, EVERYTHING about it shifts:
+                         color (cyan), size (fw), spacing (ls), opacity
+                         (0.85), decoration (underline), brightness
+                         (+15%). 6-axis hover signature reads as "this
+                         is the most actionable thing on the panel —
+                         click me".
+
+                         Triple-paint multiplicative interaction:
+                         opacity 0.85 × cyan fill × brightness(1.15)
+                         — the cyan reads dramatically brighter than
+                         a plain fill swap would.
+
+                         Existing transition list extends with 'filter
+                         200ms ease-out' matching the existing 200ms
+                         cadence across all 5 other axes. */
+                      filter: hoveredRecentMore ? 'brightness(1.15)' : undefined,
+                      transition: 'opacity 200ms ease-out, fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
+                    }}
                   >
                     {`+ ${moreCount}`}
                     <tspan opacity="0.7" data-recent-panel-more-unit>{` more flow${moreCount === 1 ? '' : 's'}`}</tspan>
@@ -9924,7 +12557,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                data-legend-panel-title-fw + -active exposed for tests. */}
             {/* R345 sibling — legend panel title same hover letter-
                 spacing tween 0.3 → 0.4 on panel hover. */}
-            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight={pinnedStatus ? '800' : '700'} letterSpacing={hoveredPanel === 'legend' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out' }} data-legend-panel-title data-legend-panel-title-fw={pinnedStatus ? '800' : '700'} data-legend-panel-title-active={pinnedStatus ? 'true' : 'false'}>legend</text>
+            {/* Round 550 sibling — legend-panel header title mirrors
+                the recent-panel title above: drop-shadow glow on
+                pin-gated active state (pinnedStatus). Same hue
+                (pal.legendAccent + hex alpha 80), same 2px blur,
+                same 200ms ease-out cadence. Family lifts to 15
+                anchors with this sibling (counted as R550-sibling
+                for accounting parity with R532-R536 hub-cluster
+                glow quintet pattern — two co-shipping anchors
+                under a single round number).
+                data-legend-panel-title-glow attr added. */}
+            {/* Round 573 sibling — legend panel-title 12th anchor.
+                Same stacked filter pattern at the legend-panel-title
+                scope. Both panel titles now lift in lockstep. */}
+            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight={pinnedStatus ? '800' : '700'} letterSpacing={hoveredPanel === 'legend' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out', filter: pinnedStatus ? `drop-shadow(0 0 2px ${pal.legendAccent}80) brightness(1.15)` : undefined }} data-legend-panel-title data-legend-panel-title-fw={pinnedStatus ? '800' : '700'} data-legend-panel-title-active={pinnedStatus ? 'true' : 'false'} data-legend-panel-title-glow={pinnedStatus ? 'true' : 'false'} data-legend-panel-title-brightness={pinnedStatus ? '1.15' : '1'}>legend</text>
             {/* Round 257 / Loop: legend panel header count picks up the
                 symmetric 13L/13R inner-padding pattern from the recent-
                 signal panel. Pre-R257 the legend header was 13px from
@@ -10001,11 +12647,42 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // 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"
+              /* Round 566 / Loop — legend panel-count gains hover-state
+                 letter-spacing tween (0.2 → 0.4 on hoveredPanel ===
+                 'legend'). Pairs with existing R310 fw 600→700 on the
+                 same gate — count now has 2-axis hover signature (fw
+                 + ls), matching the panel title's R345 ls + R482 fw
+                 lift pattern at the panel-header data-tspan scope.
+                 Hover-letter-spacing family extension (R566 = 2 sibling
+                 anchors at recent + legend panel-count). */
+              letterSpacing={hoveredPanel === 'legend' ? '0.4' : '0.2'}
               data-legend-panel-count
-              data-legend-panel-count-letter-spacing="0.2"
+              data-legend-panel-count-letter-spacing={hoveredPanel === 'legend' ? '0.4' : '0.2'}
+              data-legend-panel-count-brightness={hoveredPanel === 'legend' ? '1.15' : '1'}
               style={{
-                transition: 'fill 200ms ease-out, font-weight 200ms ease-out',
+                /* R588 — legend panel count gains brightness(1.15) on
+                   panel hover. 27th anchor in per-element brightness
+                   family. Closes title↔count parity at the legend
+                   panel header — the title already has brightness
+                   (R571/R567 lineage on pinnedStatus gate at line
+                   ~11926); the count now matches at the broader
+                   hoveredPanel gate.
+
+                   Legend panel count hover signature now 3 axes:
+                     R310/R424  fontWeight 600 → 700
+                     R349/R566  letter-spacing 0.2 → 0.4
+                     R588       brightness 1 → 1.15  ← this round
+
+                   The cyan numeral (pal.legendAccent) lifts ~15%
+                   alongside the typographic tightening — 3-axis
+                   panel-count hover signal at full visual presence.
+
+                   Pure paint filter on <text> root element (NOT a
+                   nested tspan — SVG filter on tspan is unreliable
+                   cross-browser; the parent <text> takes the filter
+                   and inherits to children). */
+                filter: hoveredPanel === 'legend' ? 'brightness(1.15)' : undefined,
+                transition: 'fill 200ms ease-out, font-weight 200ms ease-out, letter-spacing 200ms ease-out, filter 200ms ease-out',
                 fontVariantNumeric: 'tabular-nums',
               }}
             >{sessions.length}<tspan opacity="0.7" data-legend-panel-count-unit> node{sessions.length === 1 ? '' : 's'}</tspan></text>
@@ -10082,6 +12759,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               const isPinned = pinnedStatus === row.key;
               const isRowHovered = hoveredStatus === row.key;
               const isLifted = isRowHovered || isPinned;
+              /* Round 562 / Loop — inspection-overrides-encoding family
+                 5th anchor at the legend-swatch scope. When operator
+                 hovers a NODE ALIAS on the canvas, the legend swatch
+                 that matches that node's status tier lifts r + drop-
+                 shadow (R197 + R537 axes) — telegraphing "your
+                 inspected node is in this status group".
+                 Mirror of R486 minimap-dot inspection-override at the
+                 legend-swatch scope.
+                 Family progression (5 anchors):
+                   R484  recent-row timestamp on alias hover
+                   R485  edge particle opacity on alias hover
+                   R486  minimap dot opacity to 1.0 on alias hover
+                   R561  group-label opacity-1 + ants-gate refinement
+                   R562  legend-swatch r+glow on member-alias-matching ← this round
+                 Restraint: ONLY swatch lifts, NOT label/fill/ls/fw
+                 axes. Direct row-hover gets full treatment; inspection
+                 signal gets swatch-only lift — distinct "lighter"
+                 visual register matching R561's ants-gate approach
+                 (indirect inspection ≠ direct attention). */
+              const hoveredSession = hoveredAlias
+                ? (onlineNodes.find(s => s.alias === hoveredAlias) ?? offlineNodes.find(s => s.alias === hoveredAlias))
+                : null;
+              const hoveredAliasRowKey: 'working' | 'idle' | 'offline' | null = !hoveredSession ? null
+                : hoveredSession.status === 'working' ? 'working'
+                : offlineNodes.includes(hoveredSession) ? 'offline'
+                : 'idle';
+              const isMemberAliasMatching = hoveredAliasRowKey === row.key;
+              const isSwatchLifted = isLifted || isMemberAliasMatching;
               return (
                 <g
                   key={row.key}
@@ -10184,7 +12889,38 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                             : 1}
                     data-legend-row-tinted={isPinned ? 'pinned' : hoveredStatus === row.key ? 'hover' : 'none'}
                     data-legend-row-tint-transition="200ms"
-                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out' }}
+                    data-legend-row-tint-brightness={(hoveredStatus === row.key || isPinned) ? '1.15' : '1'}
+                    /* R612 — legend-row tint rect brightness on hover/
+                       pin. Sibling to R610 group-label tint + R611
+                       recent-row tint — closes the PANEL-ROW TINT RECT
+                       BRIGHTNESS TRIO at full parity:
+                         R610  group label tint rect (pin/hover-label)
+                         R611  recent-row tint rect  (hover/pin row)
+                         R612  legend-row tint rect  (hover/pin row)  ← this round
+
+                       All 3 panel-row tint rects (group / recent /
+                       legend) now lift +15% brightness alongside their
+                       fill/opacity response under inspection.
+
+                       Note: row.fill here is the TIER COLOR (green for
+                       working / teal for idle / slate for offline)
+                       rather than the cyan pal.legendAccent used by
+                       group + recent panels. Each tier brightens its
+                       OWN hue by +15% — the row reads as "this status
+                       lit up" with the row's status-identifying color
+                       intensified. Per-tier brightness lift carries
+                       semantic information at the legend scope.
+
+                       Pin/hover-gated brightness family at panel tier
+                       now 7 anchors (R571/R587/R607/R609/R610/R611/
+                       R612). transition list extends with 'filter
+                       200ms ease-out' alongside fill/opacity. */
+                    style={{
+                      filter: (hoveredStatus === row.key || isPinned)
+                        ? 'brightness(1.15)'
+                        : undefined,
+                      transition: 'fill 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
+                    }}
                   />
                   {/* Round 197 / Loop: swatch dot scales r 5.5 → 7 when its
                       row is hovered or pinned. Pre-R197 the swatch was a
@@ -10213,15 +12949,50 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       R181 pin ring (6 + 0 stroke vs 8 - 0.75 inner
                       ≈ 7.25). data-legend-swatch is unchanged so
                       R197 / R55 / R61 tests probe the same handle. */}
+                  {/* Round 537 / Loop — extends drop-shadow visual-polish
+                      family (12 anchors after R536) to a 13th anchor: the
+                      legend swatch gains drop-shadow glow on hover/pin
+                      using its OWN row fill color (working green / idle
+                      teal / offline slate). Pre-R537 the swatch lifted
+                      only r (R197/R295 6 → 7) on attention — geometry
+                      axis only, no paint glow. R537 adds the paint axis,
+                      composing with R181/R402 pin-ring (separate concen-
+                      tric circle in the same row.fill color) so on
+                      hover/pin the SWATCH AND its pin-ring both contri-
+                      bute to a unified tier-coloured glow signature.
+                      Hue: row.fill (status hex) concatenated with `99`
+                      hex alpha (~60%). Working green / idle teal /
+                      offline slate each glow in their OWN tier color
+                      — the legend acts as a color-keyed status mirror.
+                      3px blur reads soft; 60% alpha legible without
+                      overwhelming the swatch's own paint.
+                      Drop-shadow visual-polish family extension (13
+                      anchors). filter is paint-only; bbox unchanged.
+                      transition list extends to include 'filter 150ms
+                      ease-out', matching the existing R197 r 150ms
+                      cadence at this swatch. data-legend-swatch-glow
+                      attr exposes the gate state for tests. */}
                   <circle
                     cx="16" cy={row.y0}
                     r="6"
                     fill={row.fill}
                     data-legend-swatch={row.key}
-                    data-legend-swatch-state={isPinned ? 'pinned' : isRowHovered ? 'hover' : 'idle'}
+                    data-legend-swatch-state={isPinned ? 'pinned' : isRowHovered ? 'hover' : isMemberAliasMatching ? 'member-alias-matching' : 'idle'}
+                    data-legend-swatch-glow={isSwatchLifted ? 'true' : 'false'}
+                    data-legend-swatch-member-alias-matching={isMemberAliasMatching ? 'true' : 'false'}
+                    /* Round 578 — legend swatch joins per-element brightness
+                       family at 16th anchor. Stacks brightness(1.15) onto
+                       R537 drop-shadow. Closes chip-row tier-color glow
+                       trio at consistent stacked-filter pattern alongside
+                       R542 pressure-seg (already stacks brightness 1.2)
+                       and the sibling vendor chip (R578-sibling). */
+                    data-legend-swatch-brightness={isSwatchLifted ? '1.15' : '1'}
                     style={{
-                      r: isRowHovered || isPinned ? '7px' : '6px',
-                      transition: 'r 150ms ease-out',
+                      r: isSwatchLifted ? '7px' : '6px',
+                      filter: isSwatchLifted
+                        ? `drop-shadow(0 0 3px ${row.fill}99) brightness(1.15)`
+                        : undefined,
+                      transition: 'r 150ms ease-out, filter 150ms ease-out',
                     } as React.CSSProperties}
                   />
                   {/* R61 pinned-state ring — concentric stroke at r=8 in
@@ -10303,10 +13074,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     data-legend-pin-ring-pinned={isPinned ? 'true' : 'false'}
                     data-legend-pin-ring-stroke-width="1.75"
                     data-legend-pin-ring-glow={isPinned ? 'true' : 'false'}
+                    data-legend-pin-ring-brightness={isPinned ? '1.15' : '1'}
                     style={{
                       pointerEvents: 'none',
+                      /* R607 — legend pin-ring stacks brightness(1.15)
+                         onto R477's pin-gated drop-shadow. Extends the
+                         pin-gated brightness family to a 3rd anchor:
+                           R571  group label text   (pin-gated)
+                           R587  group cluster box  (pin-gated)
+                           R607  legend pin-ring    (pin-gated)  ← this round
+                         Same banked R582/R583 stacked-filter pattern.
+                         Pin-ring 3-axis pin signature now:
+                           R181 opacity     0 → 1
+                           R477 drop-shadow → row.fill 88 alpha
+                           R607 brightness  1 → 1.15  ← this round
+                         The row.fill tier color (green working / teal
+                         idle / slate offline) brightens ~15% alongside
+                         the drop-shadow halo — the pin-ring reads as
+                         "lit + locked" instead of just "locked". The
+                         color signal (which tier you pinned) reads more
+                         vividly under the brightness lift.
+                         Existing 'filter 200ms ease-out' transition
+                         covers brightness ease at the same cadence. */
                       filter: isPinned
-                        ? `drop-shadow(0 0 3px ${row.fill}88)`
+                        ? `drop-shadow(0 0 3px ${row.fill}88) brightness(1.15)`
                         : undefined,
                       transition: 'opacity 150ms ease-out, filter 200ms ease-out',
                     }}
@@ -10353,11 +13144,42 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        the value for tests. R219 letter-spacing pin
                        tween + R55 fill transition + R181 always-mount
                        pin ring all preserved. */
-                    fontWeight="500"
+                    /* Round 531 / Loop — extends hover-fw family (R416/
+                       R420/R425/R520/R521/R522/R530, 7 anchors) to an
+                       8th anchor at the legend-row label. Pre-R531
+                       R364 set fw=500 statically; hover/pin lifted
+                       other axes (R55 fill brighten / R433 letter-
+                       spacing 3-tier / R181 pin ring) but the fw
+                       stayed flat. R531 mirrors R530's recent-row
+                       alias pattern at the legend-row label scope.
+                       Hover OR pin (hoveredStatus===row.key ||
+                       isPinned) lifts fw to 600, matching the
+                       legend-row count tier (R309 fw=600 / R446
+                       pin lift 600→700). Active label now reads at
+                       the count's data tier — sibling treatment to
+                       R530 recent-row.
+                       Hover-fw family extension (8 anchors):
+                         R416  chip-row count digit
+                         R420  chrome zoom-level
+                         R425  hub-center digit
+                         R520  +N more flows footer
+                         R521  chrome nodeSize S/M/L inactive
+                         R522  chrome layout Ring/Grid inactive
+                         R530  recent-row alias text
+                         R531  legend-row label  ← this round
+                       Two panel-row label surfaces (R530 recent-
+                       row alias + R531 legend-row label) now have
+                       parallel hover-fw signatures. R475 cadence
+                       at 200ms already covers font-weight via the
+                       existing transition list extension at this
+                       element. data-legend-row-label-font-weight
+                       attr flips '500' → '600' on isActive (was
+                       static '500' pre-R531). */
+                    fontWeight={(hoveredStatus === row.key || isPinned) ? '600' : '500'}
                     data-legend-row-label={row.key}
                     data-legend-row-label-pinned={isPinned ? 'true' : 'false'}
                     data-legend-row-label-hovered={!isPinned && hoveredStatus === row.key ? 'true' : 'false'}
-                    data-legend-row-label-font-weight="500"
+                    data-legend-row-label-font-weight={(hoveredStatus === row.key || isPinned) ? '600' : '500'}
                     /* Round 433 / Loop: legend-row text extends from
                        R219's pin-only letter-spacing (0px → 0.5px on
                        isPinned) to a 3-tier scale matching the R432
@@ -10399,10 +13221,46 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        unchanged; R55 fill brighten unchanged — only
                        the timing axis shifts. */
                     data-legend-row-label-transition="200ms"
+                    /* Round 569 / Loop — extends R568's panel-row drop-
+                       shadow pattern to the SIBLING legend-row label.
+                       Symmetric closure of the panel-row drop-shadow
+                       across both panel surfaces (recent + legend).
+                       Pre-R569 the legend-row label had 3 hover/pin
+                       axes (R55 fill + R433 ls 3-tier + R531 fw); R569
+                       adds the 4th paint axis to match R568 recent-
+                       row text exactly.
+                       Two-tier paint-axis cascade now SYMMETRIC across
+                       both side panels:
+                         recent panel  title (R550) + row text (R568)
+                         legend panel  title (R550-sibling) + label (R569) ← this round
+                       Each panel has glow at BOTH chrome tiers (title
+                       active + row hover/pin). The 4-axis row signature
+                       (fill + ls + fw + glow) is now identical at both
+                       panel-row text scopes — completes the panel-row
+                       text-treatment parity.
+                       Hue/blur/cadence: same as R568 (pal.legendAccent
+                       + hex alpha 80, 2px blur, 200ms ease-out). Gate
+                       matches R531/R433 (hoveredStatus === row.key ||
+                       isPinned) — single boolean drives all 4 axes
+                       together for motion-coherent state-flip.
+                       Drop-shadow family extends to 18 anchors total
+                       (R568 was 17; R569 = 18).
+                       data-legend-row-label-glow attr added for tests. */
+                    data-legend-row-label-glow={(hoveredStatus === row.key || isPinned) ? 'true' : 'false'}
+                    /* Round 572 / Loop — sibling to recent-row text above.
+                       Stacks brightness(1.15) onto R569's drop-shadow at
+                       legend-row label scope (10th anchor in per-element
+                       brightness family). Matches recent-row text 4-axis
+                       signature exactly: fill + ls + fw + drop-shadow +
+                       brightness now BOTH panel-row text surfaces. */
+                    data-legend-row-label-brightness={(hoveredStatus === row.key || isPinned) ? '1.15' : '1'}
                     style={{
-                      transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
+                      transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
                       letterSpacing: isPinned ? '0.5px' :
                                      hoveredStatus === row.key ? '0.25px' : '0px',
+                      filter: (hoveredStatus === row.key || isPinned)
+                        ? `drop-shadow(0 0 2px ${pal.legendAccent}80) brightness(1.15)`
+                        : undefined,
                     }}
                   >{row.label}</text>
                   {/* R95: live count anchored to the right edge of the
@@ -10534,7 +13392,74 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     data-legend-count-pinned={isPinned ? 'true' : 'false'}
                     data-legend-count-font-weight={isPinned ? '700' : '600'}
                     data-legend-count-fill={row.count > 0 && (hoveredStatus === row.key || isPinned) ? 'tier' : 'neutral'}
-                    style={{ pointerEvents: 'none', transition: 'opacity 150ms ease-out, fill 150ms ease-out, font-weight 150ms ease-out', fontVariantNumeric: 'tabular-nums' }}
+                    /* Round 518 / Loop — extends R433's 3-tier hover-
+                       letter-spacing tween from the legend-row LABEL
+                       (text at x=30) to the SIBLING legend-row COUNT
+                       digit (this text at x=215). Pre-R518 the row's
+                       label spread on hover/pin (R433: 0/0.25/0.5px)
+                       while the count digit at the row's right edge
+                       stayed dead-typographic — same row, two halves,
+                       asymmetric kerning gesture. R518 mirrors the
+                       3-tier scale at the count so the WHOLE row's
+                       typography reads as one unit under cursor: label
+                       + count spread together at matching values.
+                       Tabular-nums (R225) makes the kerning still
+                       visible on 2-digit counts — each digit cell
+                       keeps its fixed width, but the inter-digit
+                       advance grows. R518 also closes R475's panel-
+                       row TEXT cadence at the count surface — R475
+                       lifted the label text transitions to 200ms but
+                       the count was missed; R518 lifts opacity / fill
+                       / font-weight from 150 → 200ms AND adds the new
+                       letter-spacing axis at 200ms. One transition
+                       list, one cadence, one motion-coherent multi-
+                       axis hover/pin signature across the row.
+                       Hover-letter-spacing family extension (10
+                       anchors now): R344/R345/R347/R420/R427/R431/
+                       R432/R433/R517/R518. R518 closes the legend-
+                       row pair (label R433 + count R518). data-
+                       legend-count-letter-spacing attr exposes the
+                       resolved value for tests. */
+                    data-legend-count-letter-spacing={isPinned ? '0.5px' : hoveredStatus === row.key ? '0.25px' : '0px'}
+                    data-legend-count-transition="200ms"
+                    /* R590 — legend-row count gains filter brightness(1.15)
+                       on hover/pin. 29th anchor in per-element brightness
+                       family. Closes legend-row label↔count brightness
+                       parity within each row:
+                         legend label (R572, 10th anchor — stacks w/ DS)
+                         legend count (R590 ← this round, plain brightness)
+                       Plain brightness (no DS stack) because the count
+                       has its own multi-axis hover signature already
+                       (opacity 0.65 → 1.0, fill neutral → row.fill tier
+                       color, fw 600 → 700 on pin, letter-spacing 3-tier)
+                       — adding brightness amplifies the tier-color fill
+                       to its hover-locked brightest possible.
+                       Triple multiplicative interaction: opacity 1.0 ×
+                       tier-color fill × brightness(1.15) — the count
+                       reads as confidently "this is the active tier".
+                       Existing transition list extends with 'filter
+                       200ms ease-out' matching the existing 200ms
+                       cadence across opacity / fill / fw / letter-
+                       spacing.
+                       Legend-row scope now has parity with recent-row:
+                       both row text and count surfaces brighten +15%
+                       on row inspection. Recent-row count INHERITS its
+                       brightness via the parent <text>'s R572 filter
+                       (single ancestor filter covers all child tspans);
+                       legend-row count is a sibling <text> so it needs
+                       its OWN filter — R590 supplies that.
+                       data-legend-count-brightness attr exposes gate. */
+                    data-legend-count-brightness={(hoveredStatus === row.key || isPinned) ? '1.15' : '1'}
+                    style={{
+                      pointerEvents: 'none',
+                      filter: (hoveredStatus === row.key || isPinned)
+                        ? 'brightness(1.15)'
+                        : undefined,
+                      transition: 'opacity 200ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out, letter-spacing 200ms ease-out, filter 200ms ease-out',
+                      fontVariantNumeric: 'tabular-nums',
+                      letterSpacing: isPinned ? '0.5px' :
+                                     hoveredStatus === row.key ? '0.25px' : '0px',
+                    }}
                   >{row.count}</text>
                 </g>
               );
@@ -10553,7 +13478,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 logically tied to the row it demonstrates; control point
                 proportionally shifts so apex stays mid-arc between
                 rows 2 and 3. */}
-            <path d="M140,68 Q164,44 196,68" fill="none" stroke={pal.flowEdge} strokeWidth="3" markerEnd="url(#topo-arrow)" data-legend-flow-arrow style={{ pointerEvents: 'none', transition: 'stroke 200ms ease-out' }} />
+            <path
+              d="M140,68 Q164,44 196,68"
+              fill="none"
+              stroke={pal.flowEdge}
+              strokeWidth="3"
+              markerEnd="url(#topo-arrow)"
+              data-legend-flow-arrow
+              data-legend-flow-arrow-glow={hoveredPanel === 'legend' ? 'true' : 'false'}
+              data-legend-flow-arrow-brightness={hoveredPanel === 'legend' ? '1.15' : '1'}
+              style={{
+                pointerEvents: 'none',
+                /* R609 — legend flow-arrow gains stacked drop-shadow +
+                   brightness on hoveredPanel === 'legend'. Banked
+                   R582/R583 stacked-filter pattern at the legend
+                   decoration scope.
+
+                   The arrow is the legend's "what an edge flow looks
+                   like" representation — when user hovers the legend
+                   panel to inspect rows, the demo arrow lights up
+                   too, tying it visually to the panel-wide hover
+                   gesture. Same pal.flowEdge cyan/teal hue as live
+                   edges, so the demo and the real edges share a
+                   coherent visual vocabulary.
+
+                   Pure paint axis: drop-shadow halo + brightness
+                   stack on the same panel-hover gate. transition
+                   list extends with 'filter 200ms ease-out'
+                   alongside the existing stroke 200ms cadence.
+
+                   data-legend-flow-arrow-glow + -brightness attrs
+                   expose the gate for tests. */
+                filter: hoveredPanel === 'legend'
+                  ? `drop-shadow(0 0 3px ${pal.flowEdge}80) brightness(1.15)`
+                  : undefined,
+                transition: 'stroke 200ms ease-out, filter 200ms ease-out',
+              }}
+            />
           </g>
 
           {/* Round 282 / Loop: sleep2agi brand watermark per Vincent
@@ -10593,6 +13554,74 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               spacing as typographic intent. Stays well inside the
               bottom-left corner; opacity 0.4 unchanged so the
               watermark stays a watermark. */}
+          {/* Round 519 / Loop — 呼吸感 family 3rd anchor. Pre-R519 the
+              breath family had 2 anchors (R497 hub idle digit + R498
+              recent-row hot pulse). Both signal active state — the
+              digit when canvas is idle (no work pending), the recent
+              row when fresh signal arrives. R519 adds a SLOW ambient
+              breath to the brand watermark — present always, not gated
+              on activity state. The watermark IS the canvas-corner
+              register that says "the canvas is alive even when nothing
+              is happening"; a 6s opacity pulse around its 0.4 mean
+              (±0.08 swing → 0.32 ↔ 0.48) reads as ambient liveness
+              rather than foreground signal.
+              Why 6s (not R497's 4s): the breath family now spans
+              activity registers (R497 4s — idle-focal: present and
+              waiting; R498 ~3s — hot signal: just arrived) and now
+              ambient register (R519 6s — corner watermark: always-on
+              background). Slower cadence keeps the watermark in the
+              background; ~10 pct slower than R497 keeps it out of
+              phase so the two anchors never beat together visibly.
+              Gate: !reducedMotion. Inside the prefers-reduced-motion
+              media query, SMIL animate isn't covered by globals.css
+              R29 (which only kills CSS animation property), so we
+              gate at JSX level — when reducedMotion is true the
+              <animate> child isn't mounted and opacity stays at the
+              static 0.4. data-topo-brand-watermark-breath attr
+              exposes the gate state for tests.
+              呼吸感 family extension (3 anchors): R497 hub idle / R498
+              recent-row hot / R519 brand watermark ambient. */}
+          {/* Round 525 / Loop — focal-recede family 3rd anchor. R507
+              receded the hub-center workingCount digit; R508 receded
+              the hub-highlight disc; both fade to 0.85× when any non-
+              hub canvas surface is hovered (alias / edge / group /
+              status / vendor) — the "you're inspecting elsewhere"
+              gesture. R525 extends the pattern to the brand watermark
+              at canvas bottom-left, the always-on decorative brand
+              element. Pre-R525 the watermark stayed at its R519
+              breath baseline (0.32-0.48 SMIL pulse) regardless of
+              canvas attention; post-R525 it fades to 70% wrapper
+              opacity (effective 0.224-0.336 with breath) when canvas
+              attention is elsewhere, matching the same focal-recede
+              semantic R507/R508 establish at the hub focal cluster.
+              Implementation: wrap the existing <text> in a <g>
+              wrapper whose opacity multiplies with the inner text's
+              SMIL-animated opacity. SVG opacity composes
+              multiplicatively across the parent/child chain, so:
+                normal: g.opacity=1.0  × text.opacity(SMIL 0.32-0.48) = 0.32-0.48
+                recede: g.opacity=0.7  × text.opacity(SMIL 0.32-0.48) = 0.224-0.336
+              SMIL on inner text continues running through both
+              states; only the wrapper opacity flips. 300ms ease-out
+              transition on wrapper (matches R508 hub-highlight recede
+              transition).
+              Gate matches R507/R508 — focal-recede is a UNIFIED
+              non-hub-canvas-hover signal driving multiple anchors,
+              so all three (hub digit / hub-highlight / brand
+              watermark) fade together as the canvas's decorative
+              register, leaving only the surface under inspection
+              foregrounded.
+              Focal-recede family extension (3 anchors): R507 hub
+              digit / R508 hub-highlight / R525 brand watermark. */}
+          <g
+            opacity={(hoveredAlias || hoveredEdgeKey || hoveredGroupLabel ||
+                      hoveredStatus || hoveredVendor) && !hoveredHub ? 0.7 : 1}
+            data-topo-brand-watermark-wrapper
+            data-topo-brand-watermark-recede={
+              (hoveredAlias || hoveredEdgeKey || hoveredGroupLabel ||
+               hoveredStatus || hoveredVendor) && !hoveredHub ? 'true' : 'false'
+            }
+            style={{ pointerEvents: 'none', transition: 'opacity 300ms ease-out' }}
+          >
           <text
             x="16" y="672"
             fontSize="11" fontFamily="monospace" fontWeight="600"
@@ -10600,8 +13629,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             fill={pal.legendText}
             opacity="0.4"
             data-topo-brand-watermark
+            data-topo-brand-watermark-breath={reducedMotion ? 'false' : 'true'}
             style={{ pointerEvents: 'none', transition: 'fill 200ms ease-out' }}
-          >sleep2agi</text>
+          >sleep2agi{!reducedMotion && (
+            <animate attributeName="opacity" values="0.32;0.48;0.32" dur="6s" repeatCount="indefinite" />
+          )}</text>
+          </g>
           {/* v0.10.0 Hero 3 Wave 1 / RFC §3.I (Vincent 5215 + 通信龙
               lead-autonomy Q4 dual-anchor minimal): canvas top-left
               crescent moon brand mark, visible ONLY when the
@@ -10636,10 +13669,47 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               the R175 panel-fade-in uses for cascade rhythm. data-
               topo-brand-canvas-mark-visible exposes the gate for
               tests. */}
+          {/* Round 526 / Loop — focal-recede family 4th anchor.
+              Symmetric polish to R525 (watermark recede). The
+              brand crescent at canvas top-left is the second
+              decorative brand element on the canvas; pre-R526 it
+              stayed at flat opacity 0.35 (when visible) regardless
+              of canvas attention. R526 multiplies its visible
+              opacity by 0.7 when ANY non-hub canvas surface is
+              hovered, matching R525's deeper-recede semantic for
+              decorative brand elements (vs hub focal cluster's
+              0.85× recede at R507/R508).
+              Composes cleanly with existing flowLinks gate:
+                normal,    flowLinks=0: opacity = 0.35 * 1.0  = 0.350
+                recede,    flowLinks=0: opacity = 0.35 * 0.7  = 0.245
+                invisible, flowLinks>0: opacity = 0.00 * any  = 0.000
+              Multiplicative chain means recede only matters when
+              crescent is visible (quiet canvas, flowLinks=0) —
+              exactly when canvas attention elsewhere should
+              dim the decorative register. 300ms transition
+              already covers both axes (the existing visibility
+              opacity ramp + the new recede multiplier easing).
+              Focal-recede family extension (4 anchors): R507 hub
+              digit / R508 hub-highlight / R525 watermark / R526
+              crescent (this round). Canvas brand surfaces (R525
+              watermark + R526 crescent) now BOTH carry focal-
+              recede at the same 0.7 multiplier, fading as a
+              decorative pair when the canvas's focal attention
+              shifts elsewhere.
+              data-topo-brand-canvas-mark-recede attr exposes the
+              gate state for tests. */}
           <g
-            opacity={flowLinks.length === 0 ? 0.35 : 0}
+            opacity={(flowLinks.length === 0 ? 0.35 : 0) * (
+              (hoveredAlias || hoveredEdgeKey || hoveredGroupLabel ||
+               hoveredStatus || hoveredVendor) && !hoveredHub ? 0.7 : 1
+            )}
             data-topo-brand-canvas-mark
             data-topo-brand-canvas-mark-visible={flowLinks.length === 0 ? 'true' : 'false'}
+            data-topo-brand-canvas-mark-recede={
+              (hoveredAlias || hoveredEdgeKey || hoveredGroupLabel ||
+               hoveredStatus || hoveredVendor) && !hoveredHub ? 'true' : 'false'
+            }
+            data-topo-brand-canvas-mark-breath={reducedMotion ? 'false' : 'true'}
             style={{ pointerEvents: 'none', transition: 'opacity 300ms ease-out, fill 200ms ease-out' }}
           >
             <defs>
@@ -10649,11 +13719,44 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 <circle cx="17.5" cy="13" r="10" fill="black" />
               </mask>
             </defs>
+            {/* Round 528 / Loop — 呼吸感 family 4th anchor. Symmetric
+                polish to R519 watermark ambient breath. The brand
+                crescent at canvas top-left is the second decorative
+                canvas brand surface; pre-R528 it stayed at the static
+                composed opacity (wrapper 0.35 × no inner anim = flat).
+                Post-R528 the inner <rect>'s fill-opacity breathes
+                0.8 ↔ 1.0 on a 7s cycle, composing multiplicatively
+                with the wrapper's recede gate:
+                  normal visible: 0.35 × (0.8-1.0) = 0.280-0.350
+                  recede visible: 0.245 × (0.8-1.0) = 0.196-0.245
+                  invisible:      0 × any            = 0
+                7s cadence intentionally OUT OF PHASE with R519
+                watermark's 6s — the two ambient anchors never beat
+                together visibly when both visible. R497 hub idle
+                breath (4s) is the loudest; R498 recent-row hot pulse
+                (~3s) is the most-active; R519 watermark (6s) +
+                R528 crescent (7s) are the quietest ambient pair.
+                呼吸感 family extension (4 anchors):
+                  R497  hub idle digit       4s  active-idle register
+                  R498  recent-row hot pulse 3s  active-fresh register
+                  R519  watermark ambient    6s  ambient (always-on)
+                  R528  crescent ambient     7s  ambient (quiet-only) ← this round
+                SMIL <animate> on fill-opacity (not parent opacity) so
+                the wrapper's React-controlled gate compositions stay
+                intact. Gated on !reducedMotion at JSX level —
+                reducedMotion users see the inner rect at default
+                fill-opacity=1.0 (no SMIL mounted, wrapper's static
+                composed opacity wins). data-topo-brand-canvas-mark-
+                breath attr exposes the gate state. */}
             <rect
               x="16" y="16" width="28" height="28"
               fill={pal.legendText}
               mask="url(#s2a-canvas-corner-mask)"
-            />
+            >
+              {!reducedMotion && (
+                <animate attributeName="fill-opacity" values="0.8;1;0.8" dur="7s" repeatCount="indefinite" />
+              )}
+            </rect>
           </g>
         </svg>
 
@@ -11005,12 +14108,32 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      (the minimap viewport is small, ~120×82 px).
                      Filter is paint-only — bbox unchanged. transition
                      list extends to include 'filter 200ms ease-out'
-                     so the glow eases when zoom crosses 1.5x. */
-                  data-topo-minimap-viewport-glow={view.zoom > 1.5 ? 'true' : 'false'}
+                     so the glow eases when zoom crosses 1.5x.
+                     R540: extends the drop-shadow to also fire on
+                     hoveredMinimap with HOVER PRECEDENCE over zoom-
+                     state. Pre-R540 the viewport drop-shadow was
+                     zoom-only (single gate); R540 adds an
+                     interactional gate at lighter blur intensity.
+                     Hover wins when both true — interactional signal
+                     (user is inspecting) trumps informational signal
+                     (you're zoomed). Sibling to R534 edge-badge
+                     hover-precedence + R538 group-label hover-tier
+                     extensions.
+                     2-tier alpha ladder:
+                       hover (interactional)  legendAccent 99 (~60%)
+                       zoom > 1.5 (info)      legendAccent 80 (~50%)
+                       rest                   none
+                     data-topo-minimap-viewport-glow attr upgraded
+                     binary ('true'/'false') → 3-value ('hover' |
+                     'zoom' | 'false') so tests can distinguish
+                     gate cause. */
+                  data-topo-minimap-viewport-glow={hoveredMinimap ? 'hover' : view.zoom > 1.5 ? 'zoom' : 'false'}
                   style={{
-                    filter: view.zoom > 1.5
-                      ? `drop-shadow(0 0 2px ${pal.legendAccent}80)`
-                      : undefined,
+                    filter: hoveredMinimap
+                      ? `drop-shadow(0 0 2px ${pal.legendAccent}99)`
+                      : view.zoom > 1.5
+                        ? `drop-shadow(0 0 2px ${pal.legendAccent}80)`
+                        : undefined,
                     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, filter 200ms ease-out'
                       : 'stroke-width 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
@@ -11151,7 +14274,57 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 // transition-colors only — without the transform transition,
                 // active:scale-95 would hard-cut. transform-gpu promotes the
                 // layer so scale doesn't trigger paint thrash.
-                className={`px-2 py-1 transition-colors transition-transform duration-200 ease-out transform-gpu active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${idx > 0 ? 'border-l' : ''} ${nodeScale === v ? '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 === popKey ? ' anet-chrome-pop' : ''}`}
+                /* Round 521 / Loop — extends R270's hover-preview pattern
+                   (inactive toggle hover previews the active state's
+                   visual register) to the TYPOGRAPHY axis at the chrome
+                   nodeSize S/M/L surface. Pre-R521 the inactive variant
+                   had `hover:bg-cyan-500/5` (R270 bg preview) but no
+                   typography preview — active variant uses `font-medium`
+                   (fw 500), inactive variant sat at default fw 400 even
+                   on hover.
+                   R521 adds `hover:font-medium` + `transition-[font-
+                   weight]` to the inactive variant so hovering an
+                   inactive S/M/L letter thickens the glyph 400 → 500,
+                   previewing the typography of the active state the
+                   click would commit to. Sibling to R421 chrome zoom-
+                   level fontWeight hover delta (rest 500 → hover 600)
+                   and R520 footer fontWeight hover (500 → 600) — same
+                   idiom: thicken-on-hover for chrome surfaces with a
+                   pre-commit gesture.
+                   `font-medium` (500) matches the ACTIVE variant's
+                   fw exactly — the inactive hover landing weight equals
+                   the active locked weight, so clicking commits to a
+                   typography state the eye already saw 'on the way in'.
+                   Hover-fw family extension (5 anchors now):
+                     R416  chip-row count digit  rest 500 → hover 700/600
+                     R420  chrome zoom-level     rest 500 → hover 600
+                     R425  hub-center digit      rest 700 → hover 800
+                     R520  +N more flows footer  rest 500 → hover 600
+                     R521  chrome nodeSize S/M/L inactive rest 400 → hover 500 ← this round
+                   Active variant `font-medium` unchanged so the rest-vs-
+                   active typography distinction stays intact when the
+                   user IS clicked-in (active stays at fw 500, inactive
+                   rest at fw 400, inactive hover preview at fw 500).
+                   data-topo-chrome-nodesize-hover-preview-fw="500" attr
+                   exposes the polish for tests. */
+                /* R598 — nodeSize S/M/L segmented buttons gain hover:
+                   brightness-[1.15] (39+40+41st anchors, 8+9+10th HTML).
+                   Final segmented chrome control to close brightness
+                   coverage. After R598 all three segmented controls
+                   (zoom + layout + nodeSize) have full hover-brightness
+                   parity.
+                   Tailwind v4 arbitrary `[transition-property:color,
+                   background-color,transform,font-weight,filter]`
+                   replaces the chain of `transition-colors transition-
+                   transform transition-[font-weight]` so the filter
+                   property joins the existing 200ms cadence at the
+                   same beat. Segmented-unity rule (R400) preserved —
+                   brightness is pure paint, no geometric break.
+                   data-topo-chrome-nodesize-brightness-hover='1.15'
+                   attr documents the hover value for tests. */
+                className={`px-2 py-1 [transition-property:color,background-color,transform,font-weight,filter] duration-200 ease-out transform-gpu active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:brightness-[1.15] ${idx > 0 ? 'border-l' : ''} ${nodeScale === v ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 hover:text-cyan-200 active:bg-cyan-500/25' : 'hover:bg-cyan-500/5 active:bg-cyan-500/15 hover:font-medium'}${chromePopping === popKey ? ' anet-chrome-pop' : ''}`}
+                data-topo-chrome-nodesize-hover-preview-fw={nodeScale === v ? null : '500'}
+                data-topo-chrome-nodesize-brightness-hover="1.15"
                 style={{ color: nodeScale === v ? undefined : pal.legendText, borderColor: pal.containerBorder }}
               >
                 {lbl}
@@ -11189,6 +14362,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               onClick={() => { popChrome('zoom-out'); zoomByDiscrete(1 / 1.2); }}
               data-topo-chrome-zoom-out
               data-topo-chrome-zoom-out-popping={chromePopping === 'zoom-out' ? 'true' : 'false'}
+              data-topo-chrome-zoom-out-brightness-hover="1.15"
               // 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.
@@ -11197,7 +14371,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // press-feedback family (R492 + nodeSize above). transition-
               // transform + duration-200 + ease-out + transform-gpu added
               // since the className had only transition-colors.
-              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors transition-transform duration-200 ease-out transform-gpu active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              /* R596 — zoom-out segmented button gains hover:brightness-[1.15]
+                 (35th anchor in per-element brightness family, 4th HTML).
+                 Sibling to zoom-in below — paired-anchor round closing the
+                 entire zoom trio at brightness parity (R593 zoom-level
+                 readout + R596 zoom-out + zoom-in).
+
+                 Segmented-control constraint preserved: brightness is pure
+                 paint (no geometry shift) so it doesn't break the R400
+                 segmented-unity rule (which only excludes geometric hover-
+                 lift like translateY). Each segment can brighten
+                 independently while the strip stays planted as one unit.
+
+                 Tailwind v4 arbitrary `[transition-property:...]` replaces
+                 `transition-colors transition-transform` so the filter
+                 property joins the existing 200ms cadence — bg / color /
+                 transform / filter all ease in unison.
+
+                 data-topo-chrome-zoom-out-brightness-hover='1.15' attr
+                 documents the hover value for tests. */
+              className="group px-2 py-1 hover:bg-white/5 hover:brightness-[1.15] active:bg-white/10 [transition-property:color,background-color,transform,filter] duration-200 ease-out transform-gpu active:scale-95 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 (−)"
@@ -11289,13 +14482,66 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   ? 'true' : 'false'
               }
               data-topo-chrome-zoom-level-hover={hoveredZoomLevel ? 'true' : 'false'}
+              /* Round 517 / Loop — extends the chrome zoom-level readout
+                 from 2-axis (R347 letter-spacing + R420 fontWeight) to
+                 3-axis hover signature by adding a color brighten to
+                 pal.legendHeadline. Pre-R517 the readout's color stayed
+                 at pal.legendText on hover; the digits got tighter
+                 kerning (0→0.5px) and heavier weight (500→600) but
+                 stayed the same legendText gray tone. R517 lifts color
+                 to legendHeadline on hover so the readout brightens
+                 into the headline tier at the same beat — matching the
+                 R55/R197/R239 hover-deepen-own-hue idiom that legend-
+                 row label + count carry at panel scope. Chrome strip's
+                 only data display now has full 3-axis hover signature
+                 (letter-spacing + fontWeight + color), parity with the
+                 chip-row chips' own hover-brighten pattern.
+                 Implementation: inline color uses the same hoveredZoom-
+                 Level state as R347/R420 — no new state. Transition
+                 already includes 'color 200ms ease-out' (R264) so the
+                 brighten eases under the same cadence as the kerning +
+                 weight tweens — one motion-coherent 3-axis lift.
+                 data-topo-chrome-zoom-level-color attr exposes the
+                 resolved color string for tests. */
+              data-topo-chrome-zoom-level-color={hoveredZoomLevel ? 'headline' : 'text'}
+              /* R593 — chrome zoom-level readout gains filter
+                 brightness(1.15) on hover. 32nd anchor in per-element
+                 brightness family. FIRST HTML-element brightness
+                 anchor outside the SVG canvas (the readout is an
+                 HTML <span>, not SVG).
+
+                 Closes the chrome zoom-level readout's hover signature
+                 at 4 AXES:
+                   R347  letter-spacing  0    → 0.5px
+                   R420  fontWeight      500  → 600
+                   R517  color           legendText → legendHeadline
+                   R593  brightness      1    → 1.15  ← this round
+
+                 The chrome strip's only data display now has full
+                 4-axis hover signature — color brightens to headline
+                 tier, glyph thickens, kerning spreads, AND brightness
+                 lifts another +15% on top of the color swap.
+
+                 Triple-paint multiplicative interaction:
+                   color (legendHeadline) × brightness(1.15) — the
+                   headline tier reads dramatically brighter than a
+                   plain color swap.
+
+                 Transition list extends with 'filter 200ms ease-out'
+                 matching the existing 200ms cadence across all 4 axes
+                 — motion-coherent state-flip.
+
+                 data-topo-chrome-zoom-level-brightness attr exposes
+                 the gate for tests. */
+              data-topo-chrome-zoom-level-brightness={hoveredZoomLevel ? '1.15' : '1'}
               onMouseEnter={() => setHoveredZoomLevel(true)}
               onMouseLeave={() => setHoveredZoomLevel(false)}
               style={{
-                color: pal.legendText,
+                color: hoveredZoomLevel ? pal.legendHeadline : pal.legendText,
                 borderColor: pal.containerBorder,
                 minWidth: 46,
                 display: 'inline-block',
+                filter: hoveredZoomLevel ? 'brightness(1.15)' : undefined,
                 // R347: letter-spacing hover tween — extends R344/R345
                 // hover-letter-spacing family into the chrome strip.
                 letterSpacing: hoveredZoomLevel ? '0.5px' : '0',
@@ -11325,7 +14571,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, letter-spacing 200ms ease-out, font-weight 200ms ease-out',
+                transition: 'color 200ms ease-out, border-color 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
               }}
               title="Current zoom level"
             >
@@ -11335,13 +14581,16 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               onClick={() => { popChrome('zoom-in'); zoomByDiscrete(1.2); }}
               data-topo-chrome-zoom-in
               data-topo-chrome-zoom-in-popping={chromePopping === 'zoom-in' ? 'true' : 'false'}
+              data-topo-chrome-zoom-in-brightness-hover="1.15"
               // R196: press-state (mirror of zoom-out above).
               // R352: `group` lets the inner svg respond via group-hover.
               // R493 — zoom +/− buttons join the chrome-strip active:scale-95
               // press-feedback family (R492 + nodeSize above). transition-
               // transform + duration-200 + ease-out + transform-gpu added
               // since the className had only transition-colors.
-              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors transition-transform duration-200 ease-out transform-gpu active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              /* R596 sibling — zoom-in mirrors zoom-out above. 36th anchor
+                 in per-element brightness family, 5th HTML. */
+              className="group px-2 py-1 hover:bg-white/5 hover:brightness-[1.15] active:bg-white/10 [transition-property:color,background-color,transform,filter] duration-200 ease-out transform-gpu active:scale-95 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 (+)"
@@ -11400,9 +14649,49 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // active state during press = hover-lift (-1px) + scale-95
             // composes as translateY(-1px) scale(0.95) — lift-and-compress
             // for tactile click feel.
-            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 hover:-translate-y-px active:scale-95 transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 hover:-translate-y-px active:scale-95 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 }}
+            /* R594 — chrome reset button gains filter brightness(1.15)
+               on hoveredReset. 33rd anchor in per-element brightness
+               family, 2nd HTML-element anchor (R593 zoom-level was
+               the first).
+
+               Closes reset button hover signature at 5 axes:
+                 R400  button hover-lift  translateY(-1px)
+                 R350  icon hover-rotate  -8°
+                 R453  icon stroke-width  2.5 → 2.8
+                 R514  icon scale         1.0 → 1.10
+                 R594  button brightness  1   → 1.15  ← this round
+
+               The reset button now has the densest hover signature
+               among the 2 standalone chrome buttons (reset + fullscreen
+               from R400). When user hovers, the entire button lifts
+               (-1px), brightens (+15%), AND its icon rotates (-8°),
+               thickens (+0.3 sw), and scales up (+10%). Inside +
+               outside motion-coherent.
+
+               Triple-paint multiplicative interaction at this surface:
+                 bg (hover:bg-white/5) × border (pal.containerBorder)
+                 × color (pal.legendText) ALL get brightness(1.15)
+                 multiplied in — the button's chrome stack uniformly
+                 brightens, reading as "this control is awake under
+                 your cursor".
+
+               Inline transition shorthand replaces the className-
+               based `transition-colors transition-transform` (R557
+               banked: when adding new transition-driven hover axes
+               to an element, extend the INLINE list — inline
+               overrides className). All 5 transition properties (bg
+               / color / border / transform / filter) now ride one
+               200ms ease-out beat. */
+            data-topo-chrome-reset-brightness={hoveredReset ? '1.15' : '1'}
+            style={{
+              background: pal.legendBox.fill,
+              borderColor: pal.containerBorder,
+              color: pal.legendText,
+              filter: hoveredReset ? 'brightness(1.15)' : undefined,
+              transition: 'color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out',
+            }}
             aria-label="Reset view"
             title="Reset zoom + pan (0, or double-click the canvas)"
           >
@@ -11448,8 +14737,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // 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).
+              /* Round 514 / Loop — extends R352/R353 chrome icon hover-
+                 scale family to the reset button. Pre-R514 the reset
+                 icon had hover-rotate (-8°, R350) + hover-sw (2.5→2.8,
+                 R453) but no hover-scale, while zoom-out (R352), zoom-
+                 in (R352), and fullscreen (R353) icons all carried
+                 `group-hover:scale-110`. R514 brings the reset icon
+                 into the same 3-axis hover signature (rotate + sw +
+                 scale) as the rest of the chrome strip.
+                 Implementation: inline transform composes rotate +
+                 scale into one string. `transform: rotate(-8deg)
+                 scale(1.1)` on hover; `rotate(0) scale(1)` at rest.
+                 transformOrigin 'center' applies to both — rotation
+                 pivots around centre AND scale grows from centre.
+                 The Tailwind `group-hover:scale-110` approach can't
+                 work here because inline `style.transform` overrides
+                 className-based transforms; compose the multi-axis
+                 transform inline instead.
+                 Chrome icon hover gesture parity (post-R514):
+                   zoom-out         scale-110 + sw-lift (R352/R454)
+                   zoom-in          scale-110 + sw-lift (R352/R454)
+                   fullscreen       scale-110 + sw-lift (R353/R455)
+                   reset            scale-1.1 + sw-lift + rotate -8°
+                                    (R514 + R453 + R350)
+                 reset gets the EXTRA rotate axis because R350's spin
+                 preview semantic is reset-specific — the rotation
+                 hints at the click-spin (R184) the button will fire. */
               style={{
-                transform: hoveredReset && !resetSpinning ? 'rotate(-8deg)' : 'rotate(0deg)',
+                transform: hoveredReset && !resetSpinning ? 'rotate(-8deg) scale(1.1)' : 'rotate(0deg) scale(1)',
                 transformOrigin: 'center',
                 transition: 'transform 200ms ease-out, stroke-width 200ms ease-out',
               }}
@@ -11473,9 +14788,15 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               classes win specificity. */}
           <button
             onClick={() => { popChrome('fullscreen'); toggleFullscreen(); }}
+            onMouseEnter={() => setHoveredFullscreen(true)}
+            onMouseLeave={() => setHoveredFullscreen(false)}
+            onFocus={() => setHoveredFullscreen(true)}
+            onBlur={() => setHoveredFullscreen(false)}
             data-topo-chrome-fullscreen
             data-topo-chrome-fullscreen-active={isFullscreen ? 'true' : 'false'}
             data-topo-chrome-fullscreen-popping={chromePopping === 'fullscreen' ? 'true' : 'false'}
+            data-topo-chrome-fullscreen-hover={hoveredFullscreen ? 'true' : 'false'}
+            data-topo-chrome-fullscreen-brightness={hoveredFullscreen ? '1.15' : '1'}
             // R196: fullscreen also picks up press-state — active variant
             // deepens cyan-500/20 → cyan-500/25 on press; non-active
             // deepens white/5 → white/10.
@@ -11495,17 +14816,48 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // R400: hover translateY(-1px) lift — see reset button above for family doc.
             // R493 — fullscreen joins active:scale-95 press family (same as
             // reset above: lift-and-compress compound transform on press).
-            className={`group p-1.5 rounded-md border hover:-translate-y-px active:scale-95 transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
+            className={`group p-1.5 rounded-md border hover:-translate-y-px active:scale-95 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'
+                ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 hover:text-cyan-200 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"
+            /* R595 — chrome fullscreen button gains filter brightness(1.15)
+               on hoveredFullscreen. 34th anchor in per-element brightness
+               family, 3rd HTML-element anchor (R593 zoom-level + R594
+               reset). Sibling to R594 — closes the standalone chrome
+               button pair (reset + fullscreen) at full brightness parity.
+
+               Per the R400 family doc, reset + fullscreen are the only
+               two standalone (non-segmented) chrome buttons. Both now
+               share the same 5-axis hover signature pattern:
+                 button hover-lift translateY(-1px)  R400
+                 icon hover-scale  1.0 → 1.10        R353 (full) / R514 (reset)
+                 icon stroke-width 2.5 → 2.8         R455 (full) / R453 (reset)
+                 icon hover-rotate                    R576 (full +3°) / R350 (reset -8°)
+                 button brightness 1 → 1.15          R595 (full) / R594 (reset)
+
+               Inline transition shorthand replaces the className-based
+               `transition-colors transition-transform` (R557 banked:
+               inline overrides className for transition-driven hover
+               axes). 5 transition properties (bg / color / border /
+               transform / filter) ride one 200ms ease-out beat.
+
+               Active-variant interaction: when isFullscreen=true the
+               className applies cyan bg + cyan text. brightness(1.15)
+               on top makes the active+hovered state read at maximum
+               vivid cyan — the user knows they're poised to EXIT
+               fullscreen with extra visual confirmation.
+
+               data-topo-chrome-fullscreen-brightness attr exposes
+               the gate for tests. */
             style={{
               borderColor: pal.containerBorder,
               ...(isFullscreen
                 ? {}
                 : { background: pal.legendBox.fill, color: pal.legendText }),
+              filter: hoveredFullscreen ? 'brightness(1.15)' : undefined,
+              transition: 'color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out',
             }}
             aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
             title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
@@ -11531,12 +14883,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 + R455 fullscreen (this round). transition-[transform,
                 stroke-width] expands existing transition-transform
                 so the sw lift eases under R352 scale-110 cadence. */}
+            {/* Round 576 / Loop — fullscreen icon picks up hover-rotate-3.
+                Joins R350 reset / R547 pill × / R549 brand logo at 4th
+                anchor in hover-rotate idiom. Corner arrows rotate 3° on
+                hover — subtle "preparing to transform" gesture (enter
+                or exit fullscreen). Tailwind v4 emits individual rotate
+                property (banked R547) — sits alongside group-hover:
+                scale-110 in independent rotate axis. */}
             {isFullscreen ? (
-              <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,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:[stroke-width:2.8] transform-gpu" 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,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:rotate-3 group-hover:[stroke-width:2.8] 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 className="transition-[transform,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:[stroke-width:2.8] transform-gpu" data-topo-chrome-fullscreen-icon="enter">
+              // R576 sibling — enter variant also picks up rotate-3.
+              <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,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:rotate-3 group-hover:[stroke-width:2.8] 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>
             )}