@sleep2agi/agent-network-dashboard 0.5.3-preview.4 → 0.5.3-preview.40

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
@@ -867,12 +886,19 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           // R63 label render + R86 hover-pin keying + #99 tooltip
           // member listing, so all the existing group-box machinery
           // applies uniformly to the orphan bucket too.
+          // Round 499 / Loop — surface `isOrphan` flag on the box
+          // shape so downstream renderers (label text, future polish)
+          // can apply orphan-specific typography (italic) without
+          // re-deriving the flag from key === '其他' (key matching
+          // would also catch a legitimate "其他" prefix-group, this
+          // flag is canonical from the band assignment pass).
           return {
             key: band.isOrphan
               ? '其他'
               : band.members.length
                 ? groupKeys[band.members[0].alias]
                 : '',
+            isOrphan: !!band.isOrphan,
             count: band.members.length,
             statuses: { working: w, idle: i, offline: o },
             x: minX - GROUP_PAD,
@@ -977,7 +1003,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       groupKeys,
       // #111: group boxes are a grid-layout feature only — radially scattered
       // ring nodes can't be cleanly boxed. Ring keeps the #83 prefix hue.
-      groupBoxes: [] as { key: string; count: number; statuses: { working: number; idle: number; offline: number }; x: number; y: number; w: number; h: number }[],
+      groupBoxes: [] as { key: string; isOrphan?: boolean; count: number; statuses: { working: number; idle: number; offline: number }; x: number; y: number; w: number; h: number }[],
       // ring fits within VIEWBOX_H by construction (offlineRadius=325 + centre at y=330)
       gridContentBottom: 0,
     };
@@ -1943,8 +1969,50 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // doesn't list letter-spacing, so without this the
               // hover:tracking-wide would snap. Sibling change on
               // the Grid button below.
-              className={`px-2.5 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
-              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out' }}
+              // Round 492 / Loop — add `active:scale-95` press feedback
+              // alongside R196's `active:bg-cyan-500/25` color-deepen.
+              // Pre-R492 the chrome-strip Ring/Grid buttons had color
+              // tactile (deeper cyan on mouse-down) + R249 chrome-pop
+              // on release, but no transform during the press itself —
+              // the button stayed planted between mouse-down and pop.
+              // Adding `active:scale-95` (5% compression) on the
+              // pressed pseudo-state, with `transform 150ms ease-out`
+              // bundled into the inline transition list, gives haptic-
+              // like push-back feedback. The press-down (down to 95%
+              // scale) eases in over 150ms in sync with the bg/color
+              // deepen; the release auto-springs back to scale-100 via
+              // the same transition, then R249's anet-chrome-pop class
+              // overlays the release-pop. Matching `transform-gpu`
+              // promotes the layer so the scale doesn't trigger
+              // layout/paint thrash. Sibling change on Grid below.
+              /* 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. */
+              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 hover:font-medium'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              data-topo-chrome-layout-hover-preview-fw={layout === 'ring' ? null : '500'}
+              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out, transform 150ms ease-out, font-weight 150ms ease' }}
             >
               Ring
             </button>
@@ -1963,7 +2031,15 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // all chrome buttons.
               // R351 sibling — Grid button picks up hover:tracking-wide
               // + inline transition spec. Same vocabulary as Ring.
-              className={`px-2.5 py-1 border-l focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
+              // R492 sibling — Grid button picks up active:scale-95
+              // press feedback + transform in transition list. Same
+              // vocabulary as Ring above.
+              /* 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 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 hover:font-medium'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
+              data-topo-chrome-layout-hover-preview-fw={layout === 'grid' ? null : '500'}
               /* Round 268 / Loop: Grid button's left border (the
                  internal divider between Ring and Grid) picks up
                  pal.containerBorder, matching the wrapper change at
@@ -1973,8 +2049,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  transition list into the inline spec below so the
                  letter-spacing tween rides alongside without snapping
                  the border-color flip — border-color 200ms ease-out
-                 keeps R268's theme-toggle smoothness intact. */
-              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out' }}
+                 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, font-weight 150ms ease' }}
             >
               Grid
             </button>
@@ -2091,9 +2169,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // to R355 filter pin pill inner-span hover-brighten.
                   // Hover-brighten family extends from filter pills to
                   // chip-row chips at the inner-span scope.
+                  // Round 494 / Loop — chip-row working chip joins the
+                  // active:scale-95 press-feedback family (R492 Ring/Grid +
+                  // R493 chrome-strip rest). Gated on the clickable branch
+                  // (workingCount > 0) — when the chip is a placeholder
+                  // at count=0, scale-95 stays off to match the existing
+                  // R398 hover-lift conditional. Composes with hover:-
+                  // translate-y-px for the same lift-and-compress
+                  // tactile signature R493 brought to reset/fullscreen.
                   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'
+                      ? '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'
                       : 'bg-green-500/10 text-green-300 border-green-500/20'
                   }`}
                   data-chip-hover-lift={workingCount > 0 ? 'true' : 'false'}
@@ -2193,9 +2279,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      same digit-jitter physics on count crossings). */
                   // R398: hover translate-y lift on clickable variant — see working chip above.
                   // R414: `group` parent + inner unit span group-hover-brighten — see working chip above.
+                  // 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).
                   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'
+                      ? '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'
                       : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'
                   }`}
                   data-chip-hover-lift={onlineNodes.length > 0 ? 'true' : 'false'}
@@ -2470,7 +2559,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // R355: `group` lets the inner opacity-70 spans (prefix
               // `filter:` + count `· N`) brighten to 100 % on pill hover.
               // Sibling treatment on group + vendor pills below.
-              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 — filter pills (3 sibling `group` variants) join the
+              // active:scale-95 press-feedback family. R490's !important
+              // transition list on .anet-topo-chip-focus already covers
+              // transform, so just appending active:scale-95 to the
+              // className wires the press tactile in one token. Compound
+              // with R400-era hover:-translate-y-px gives lift-and-compress.
+              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)}
               style={{
@@ -2534,7 +2629,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
               // R355 sibling — `group` parent + group-hover on inner spans.
-              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 — filter pills (3 sibling `group` variants) join the
+              // active:scale-95 press-feedback family. R490's !important
+              // transition list on .anet-topo-chip-focus already covers
+              // transform, so just appending active:scale-95 to the
+              // className wires the press tactile in one token. Compound
+              // with R400-era hover:-translate-y-px gives lift-and-compress.
+              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)}
               style={{
@@ -2600,7 +2701,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
               // R355 sibling — `group` parent + group-hover on inner spans.
-              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 — filter pills (3 sibling `group` variants) join the
+              // active:scale-95 press-feedback family. R490's !important
+              // transition list on .anet-topo-chip-focus already covers
+              // transform, so just appending active:scale-95 to the
+              // className wires the press tactile in one token. Compound
+              // with R400-era hover:-translate-y-px gives lift-and-compress.
+              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)}
               style={{
@@ -2663,7 +2770,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={link.count}
               data-filter-match-aliases={`${link.from},${link.to}`}
               data-active-filter-edge-hot={isHot ? 'true' : 'false'}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 sibling — 4th filter pill (no `group` prefix variant)
+              // joins active:scale-95 press family alongside the 3 group
+              // variants above. Same recipe.
+              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)}
               style={{
@@ -3013,7 +3123,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     // — sibling to R355 filter-pill prefix/suffix + R414
                     // chip-row unit brighten. Closes the inner-span
                     // hover-brighten family at the vendor chip surface.
-                    className="group tabular-nums font-medium inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu hover:-translate-y-px"
+                    // R496 — vendor letter chip joins active:scale-95 press
+                    // family. Last vendor-row clickable joining the family
+                    // R495 cashed via R490's transition-cascade dividend.
+                    // Same compound w/ R401 hover-lift idiom — lift-and-
+                    // compress on press, springs back on release.
+                    className="group tabular-nums font-medium inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu hover:-translate-y-px active:scale-95"
                     data-vendor-letter={v.initial}
                     data-vendor-letter-count={v.count}
                     data-vendor-letter-hover-lift="true"
@@ -3251,9 +3366,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    data-chip-hover-lift attr exposes the lift surface
                    state ('true' clickable, 'false' empty) for tests. */
                 // R414: `group` parent + inner unit span group-hover-brighten — see working chip above.
+                // R496 — active-links chip joins active:scale-95 press
+                // family. Sibling to working+online chips (R494). Gated
+                // on `isInteractive` (flowLinks.length > 0) — same R399
+                // conditional pattern used for hover-lift.
                 className={`group tabular-nums font-medium hidden sm:inline px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu ${
                   isInteractive
-                    ? 'bg-gray-500/10 text-gray-400 border-gray-500/20 hover:bg-cyan-500/10 hover:text-cyan-200 hover:border-cyan-500/30 hover:-translate-y-px'
+                    ? 'bg-gray-500/10 text-gray-400 border-gray-500/20 hover:bg-cyan-500/10 hover:text-cyan-200 hover:border-cyan-500/30 hover:-translate-y-px active:scale-95'
                     : 'bg-gray-500/10 text-gray-400 border-gray-500/20'
                 }`}
                 data-chip-hover-lift={isInteractive ? 'true' : 'false'}
@@ -3500,6 +3619,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}
@@ -3565,6 +3714,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
@@ -3807,7 +4069,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>
           )}
@@ -4494,12 +4787,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
@@ -4844,16 +5200,39 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      ease-out' alongside the existing fill/ls/fw/opacity
                      200ms tweens. */
                   data-group-label-glow={isPinned ? 'true' : 'false'}
+                  /* Round 499 / Loop — orphan band "其他" label gets
+                     fontStyle: italic to visually distinguish the
+                     catchall from real prefix-group bands. Pre-R499
+                     the orphan box label rendered identically to
+                     prefix-group labels (Hero D fontSize=9, fw=700,
+                     opacity 0.55 rest), so users had to read the
+                     literal text "其他" to identify the catchall. R499
+                     adds a pure-typography differentiation: italic
+                     signals "this is the misc bucket, not a real
+                     named group" while preserving full opacity
+                     affordance on hover/pin — the orphan box stays
+                     equally inspectable, just typographically marked
+                     as a different category. No geometry change
+                     (italic shifts glyph slant within the same bbox),
+                     no opacity loss, no behavior change. Sibling to
+                     R432 letter-spacing 3-tier + R457 pin fw-lift +
+                     R479 pin drop-shadow at the group-label scope.
+                     Falls under 配色 / 节点视觉 themes per the prompt;
+                     advances the "信息密度" axis by encoding
+                     category-distinction into a single typography
+                     channel without adding visual chrome. */
                   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,
                   }}
                   data-group-label={box.key}
                   data-group-label-pinned={isPinned ? 'true' : 'false'}
+                  data-group-label-orphan={box.isOrphan ? 'true' : 'false'}
                 >
                   {box.key}
                   {/* Round 19 / Loop: member-count chip. Inline tspan stays
@@ -6468,11 +6847,45 @@ 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'
+                }
                 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,
                   filter: !reducedMotion && hoveredHub
                     ? (isLight
                         ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.6))'
@@ -6482,7 +6895,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      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. */
+                     shadow glow eases at the same cadence.
+                     R507: opacity 300ms (existing in list) covers
+                     the new focal-recede fade. */
                   transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
                   fontVariantNumeric: 'tabular-nums',
                 }}
@@ -6529,19 +6944,138 @@ 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}
-              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;
+              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="5.5"
+                  data-topo-hub-highlight-opacity={resolvedOpacity}
+                  data-topo-hub-highlight-breath={breathActive ? 'true' : 'false'}
+                  data-topo-hub-highlight-recede={hubRecede ? 'true' : 'false'}
+                  /* 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. */
+                  style={{
+                    pointerEvents: 'none',
+                    transition: 'opacity 300ms ease-out, fill 200ms ease-out',
+                  }}
+                >
+              {/* 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
+                  motionless, visually mute. R497 adds a 4s opacity breath
+                  (0.85 ↔ 1.0 ↔ 0.85) so the hub reads "alive but quiet"
+                  instead of "frozen", giving the empty-fleet state a
+                  subtle living signature.
+                  Gates:
+                    - !reducedMotion (R29 a11y blanket) — reducedMotion
+                      users see static 0.95 disc, no animate
+                    - workingCount === 0 — when fleet is busy, the
+                      highlight is invisible (opacity=0) so the animate
+                      would waste paint cycles. Gating saves work.
+                  SMIL <animate> overrides the static opacity={0.95}
+                  during its run; falls back to 0.95 when reducedMotion
+                  flips on (the animate node simply doesn't render).
+                  4s cycle is long enough to feel like ambient breath
+                  rather than a pulse, matching the "quiet" semantic.
+                  data-topo-hub-highlight-breath attr exposes the
+                  resolved gate state for tests. */}
+              {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
@@ -7526,6 +8060,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'}
@@ -7534,6 +8092,12 @@ 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'}
+                        style={{
+                          filter: isAvatarHovered ? 'brightness(1.15)' : undefined,
+                          transition: 'filter 200ms ease-out',
+                        }}
                       />
                     );
                   }
@@ -7957,6 +8521,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           R211 fill 300ms + R305 letter-spacing 200ms
                           transition list preserved; only the
                           conditional gets a middle case. */}
+                      {/* Round 500 / Loop — milestone round, opens
+                          per-node alias drop-shadow polish. Extends the
+                          R476-R481 drop-shadow visual-polish family to a
+                          7th anchor: hovered alias text gains a soft
+                          status-coloured text-glow. Pre-R500 hover on
+                          a node triggered card-lift (R26 translateY) +
+                          card-stroke (R242 tint) + alias letter-spacing
+                          (R427 0.3px tier) but the alias TEXT itself had
+                          no paint-axis cue beyond fill (R211). R500 adds
+                          a drop-shadow on the text glyph itself, so the
+                          identity glyph itself lights up under attention
+                          — matching the R476 idiom (hub-digit emerald
+                          glow on hover) at the per-node identity scope.
+                          2px blur radius at 50% alpha — subtler than the
+                          R476 hub-digit (3px at 60%) because the alias
+                          text is smaller and more numerous (1 per node)
+                          so an aggressive glow would multiply into
+                          visual noise. Status-coloured (status.text) so
+                          the glow inherits the node's working/idle/
+                          offline palette — green/cyan/gray respectively.
+                          Drop-shadow visual-polish family — 7 anchors:
+                            R476 hub digit          hover-gated emerald
+                            R477 legend pin-ring    pin-gated   row.fill
+                            R478 recent-row pip     fresh-gated cyan
+                            R479 group-label text   pin-gated   cyan
+                            R480 hot-lane edge      hot-gated   amber
+                            R481 zoom-state minimap zoom-gated  cyan
+                            R500 node alias text    hover-gated status.text ← this round
+                          Filter is paint-only; bbox unchanged; overlap-
+                          test invariants hold (R51 selector gated to
+                          g[data-node] descendants with strokeWidth
+                          sentinels; text element doesn't carry stroke).
+                          transition list extends to include 'filter
+                          200ms ease-out' alongside the existing fill
+                          300ms + letter-spacing 200ms tweens.
+                          data-node-alias-glow attr surfaces the hover
+                          gate for tests. */}
                       <text
                         x="0" y="1" textAnchor="middle"
                         fill={status.text}
@@ -7964,11 +8565,15 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         data-node-alias-text={session.alias}
                         data-node-alias-chat-target={chatAlias === session.alias ? 'true' : 'false'}
                         data-node-alias-hovered={hoveredAlias === session.alias ? 'true' : 'false'}
+                        data-node-alias-glow={!reducedMotion && hoveredAlias === session.alias ? 'true' : 'false'}
                         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:
                             chatAlias    === session.alias ? '0.5px' :
                             hoveredAlias === session.alias ? '0.3px' : '0px',
+                          filter: !reducedMotion && hoveredAlias === session.alias
+                            ? `drop-shadow(0 0 2px ${status.text}80)`
+                            : undefined,
                         }}
                       >
                         {truncate(session.alias, fullMax)}
@@ -9378,12 +9983,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                             under the same R320 fill cadence. data-
                             recent-row-count-pinned attr exposes the
                             pin gate for tests. */}
+                      {/* Round 498 / Loop — hot-count subtle pulse. Pre-
+                          R498 the hot row count signaled via color (R127
+                          amber fill) + weight (R320 fw-700) + (R445 pin
+                          lift) but stayed visually motionless. R498 adds
+                          a 3s opacity breath (0.85↔1.0) on the digit when
+                          isHot && !reducedMotion — gentle "alive" signal
+                          on the lane carrying ≥ 10 messages, drawing
+                          glance without becoming noisy. Sibling of R497
+                          hub-idle-breath in the 呼吸感 theme arc; same
+                          0.85↔1.0 amplitude. Class adds an animation-
+                          only paint axis; no layout / bbox change. R29
+                          blanket also catches `animation-duration` for
+                          reducedMotion users, but the component-side
+                          gate makes the intent explicit and avoids
+                          a node tree thrash for those users (className
+                          stays absent rather than present-but-paused). */}
                       <tspan
                         fill={isHot ? hotStroke : undefined}
                         fontWeight={(isHot || isRowPinned) ? '700' : '600'}
+                        className={isHot && !reducedMotion ? 'anet-recent-hot-pulse' : undefined}
                         data-recent-row-count
                         data-recent-row-count-pinned={isRowPinned ? 'true' : 'false'}
                         data-recent-row-count-font-weight={(isHot || isRowPinned) ? '700' : '600'}
+                        data-recent-row-count-hot-pulse={isHot && !reducedMotion ? 'true' : 'false'}
                         {...(isHot ? { 'data-recent-row-count-hot': 'true' } : {})}
                         style={{
                           transition: 'fill 300ms ease-out, font-weight 200ms ease-out',
@@ -9627,6 +10250,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"
@@ -9634,14 +10290,15 @@ 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"
+                    style={{ transition: 'opacity 200ms ease-out, fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out' }}
                   >
                     {`+ ${moreCount}`}
                     <tspan opacity="0.7" data-recent-panel-more-unit>{` more flow${moreCount === 1 ? '' : 's'}`}</tspan>
@@ -10358,7 +11015,43 @@ 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"
+                    style={{
+                      pointerEvents: 'none',
+                      transition: 'opacity 200ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out, letter-spacing 200ms ease-out',
+                      fontVariantNumeric: 'tabular-nums',
+                      letterSpacing: isPinned ? '0.5px' :
+                                     hoveredStatus === row.key ? '0.25px' : '0px',
+                    }}
                   >{row.count}</text>
                 </g>
               );
@@ -10417,6 +11110,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"
@@ -10424,8 +11185,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
@@ -10460,10 +11225,46 @@ 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'
+            }
             style={{ pointerEvents: 'none', transition: 'opacity 300ms ease-out, fill 200ms ease-out' }}
           >
             <defs>
@@ -10967,7 +11768,49 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    / fullscreen) preview their active state on hover.
                    Pure actions (zoom -/+, reset) stay white — they
                    aren't toggles, have no active state to preview. */
-                className={`px-2 py-1 transition-colors 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 493 / Loop — extends R492 chrome-strip press-feedback
+                // family to nodeSize S/M/L buttons. Adds active:scale-95
+                // alongside the existing color-deepen (R196) + chrome-pop
+                // (R249). transition-transform + duration-200 + ease-out
+                // + transform-gpu added since this className previously had
+                // 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.
+                /* 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. */
+                className={`px-2 py-1 transition-colors transition-transform transition-[font-weight] 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 hover:font-medium'}${chromePopping === popKey ? ' anet-chrome-pop' : ''}`}
+                data-topo-chrome-nodesize-hover-preview-fw={nodeScale === v ? null : '500'}
                 style={{ color: nodeScale === v ? undefined : pal.legendText, borderColor: pal.containerBorder }}
               >
                 {lbl}
@@ -11009,7 +11852,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // → white/10) so mouse-down has a tactile dim before the
               // R186 icon pop fires on release.
               // R352: `group` lets the inner svg respond via group-hover.
-              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // 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"
               style={{ color: pal.legendText }}
               aria-label="Zoom out"
               title="Zoom out (−)"
@@ -11101,10 +11948,32 @@ 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'}
               onMouseEnter={() => setHoveredZoomLevel(true)}
               onMouseLeave={() => setHoveredZoomLevel(false)}
               style={{
-                color: pal.legendText,
+                color: hoveredZoomLevel ? pal.legendHeadline : pal.legendText,
                 borderColor: pal.containerBorder,
                 minWidth: 46,
                 display: 'inline-block',
@@ -11149,7 +12018,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-topo-chrome-zoom-in-popping={chromePopping === 'zoom-in' ? 'true' : 'false'}
               // R196: press-state (mirror of zoom-out above).
               // R352: `group` lets the inner svg respond via group-hover.
-              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // 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"
               style={{ color: pal.legendText }}
               aria-label="Zoom in"
               title="Zoom in (+)"
@@ -11201,7 +12074,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                Every standalone interactive HTML surface in TopoGraph
                now lifts on hover. data-topo-chrome-reset-hover-lift
                attr surfaces the lift for tests. */
-            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+            // R493 — reset button joins the chrome-strip active:scale-95
+            // press-feedback family. The button already has transition-
+            // transform + transform-gpu (R350 reset spin + R400 hover lift),
+            // so just appending active:scale-95 plugs straight in. Compound
+            // 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"
             data-topo-chrome-reset-hover-lift="true"
             style={{ background: pal.legendBox.fill, borderColor: pal.containerBorder, color: pal.legendText }}
             aria-label="Reset view"
@@ -11249,8 +12129,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',
               }}
@@ -11294,7 +12200,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // fullscreen now all carry an icon-level hover gesture in
             // addition to the bg hover).
             // R400: hover translateY(-1px) lift — see reset button above for family doc.
-            className={`group p-1.5 rounded-md border hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
+            // 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 ${
               isFullscreen
                 ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25'
                 : 'hover:bg-cyan-500/5 active:bg-cyan-500/15'