@sleep2agi/agent-network-dashboard 0.5.1-preview.99 → 0.5.2-preview.0

package/app/components/TopoGraph.tsx

@@ -8,6 +8,7 @@ import { aliasAvatarColors, aliasInitial } from './AliasAvatar';
 import { ChatPopover } from './ChatPopover';
 import { vendorForModel, runtimeIdentity, identityLine } from '../lib/vendorIdentity';
 import { parseHubTime, relativeAgo } from '../lib/time';
+import { DASHBOARD_VERSION } from '../lib/version';
 
 /** v0.10.0 Hero 1+2 / §3.F server-health hook — fetches the normalized
  *  /api/hub/servers payload (preview.370 unblocked real-data via the
@@ -3457,6 +3458,108 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             return `Agent network topology — ${parts.join(' · ')}. Tab to navigate nodes, double-click canvas to reset view.`;
           })()}
           data-topo-canvas-aria
+          /* Round 469 / Loop — fleet-split numeric attrs on the root
+             svg. The aria-label already encodes online/working/offline
+             /flow counts in text form (R7 origin) but DOM probes had
+             to PARSE the label string to extract the numbers. R469
+             surfaces them as 4 numeric data-attrs alongside the R462
+             dashboard-version + R466 any-hover + R467 any-pinned set
+             that already live on the root svg:
+               data-topo-online-count      total online sessions
+               data-topo-working-count     subset currently working
+               data-topo-offline-count     offline / ghost-purged
+               data-topo-flow-count        active flow links
+             Use cases:
+               - Playwright: one-line `svg.getAttribute('data-topo-
+                 working-count')` instead of parsing aria-label
+               - external CSS: data-attribute selectors for empty
+                 vs populated states (`[data-topo-online-count='0']`)
+               - a11y enrichment: screen-reader scripts can read the
+                 numeric attrs directly
+               - hub-aria parity: the hub-center text already shows
+                 `workingCount` digit (R130); R469 puts the same scalar
+                 on the canvas root for non-visual consumers.
+             Composed from existing onlineNodes / workingCount /
+             offlineNodes / flowLinks — no new state. */
+          data-topo-online-count={onlineNodes.length}
+          data-topo-working-count={workingCount}
+          data-topo-offline-count={offlineNodes.length}
+          data-topo-flow-count={flowLinks.length}
+          /* 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
+             active. Composed from the existing per-surface hover
+             vars; doesn't introduce new state. Useful for:
+               - Playwright tests asserting "topology entered a hover
+                 mode" without enumerating per-surface attrs
+               - external CSS hooks targeting `[data-topo-any-hover=
+                 "true"]` to dim adjacent UI (e.g. chrome strip)
+                 while the user is inspecting the canvas
+               - debug overlays that visualise hover dwell-time
+             The 6 hover sources contributing:
+               hoveredAlias       (node circle / card / alias text)
+               hoveredHub         (hub center, halo, ring)
+               hoveredEdgeKey     (flow link path / particle / endpoint)
+               hoveredGroupLabel  (cluster name / count / pips)
+               hoveredStatus      (legend row)
+               hoveredVendor      (vendor chip in chip row)
+             Read-only computed attr — zero re-render cost beyond the
+             React update that already fires when any of those state
+             vars flips. Geometry / paint untouched. */
+          data-topo-any-hover={
+            (hoveredAlias || hoveredHub || hoveredEdgeKey || hoveredGroupLabel ||
+             hoveredStatus || hoveredVendor) ? 'true' : 'false'
+          }
+          /* Round 467 / Loop — pin-aggregate sibling to R466 hover-
+             aggregate. Exposes `data-topo-any-pinned` reflecting
+             whether ANY sticky inspection mode is active. Composed
+             from the 4 pinned state vars:
+               pinnedStatus    (legend row click → status filter)
+               pinnedGroup     (group label click → cluster lock)
+               pinnedVendor    (vendor chip click → vendor filter)
+               pinnedEdgeKey   (edge click → edge focus)
+             Together with R466 the root svg now carries a 2-bit
+             inspection-mode surface:
+               data-topo-any-hover  — transient (mouse hover)
+               data-topo-any-pinned — sticky (click-to-lock)
+             Useful for:
+               - Playwright tests: one-line query for either mode
+               - external CSS hooks: render a persistent "filter
+                 active" badge when pinned, distinct from the
+                 transient hover dim
+               - Esc-handler tests: assert all 4 pins clear after
+                 the universal-cancel Escape press (R62/R63/R88/
+                 R116 — single Esc collapses every pin)
+             Read-only computed disjunction; no new state, zero
+             re-render cost beyond the React pin-flip updates. */
+          data-topo-any-pinned={
+            (pinnedStatus || pinnedGroup || pinnedVendor || pinnedEdgeKey) ? 'true' : 'false'
+          }
+          /* Round 462 / Loop — surface DASHBOARD_VERSION on the root SVG
+             element as `data-dashboard-version`. Directly closes the
+             feedback_dash_zombie_port_3000.md memory rule: "verify ships
+             via SVG DOM, not tmux 'Ready' — zombie next-servers + stale
+             global installs silently serve old code". Pre-R462 the only
+             ways to know which preview the dash was serving were:
+               1. parse the npm registry for the latest tag (network)
+               2. fetch /api/dashboard/version (API surface, no DOM)
+               3. inspect the /login footer or /settings page (off-route)
+             Test scripts that probe TopoGraph DOM (overlap, group-label
+             tint, pip strip, etc.) couldn't tell whether the dash was
+             actually serving the build they expected to verify. R462
+             threads DASHBOARD_VERSION through to the root <svg> so:
+               - Playwright probes can read svg[data-dashboard-version]
+                 directly + fail-fast on stale-build mismatch
+               - the memory rule's manual zombie check ("inspect SVG
+                 dom") becomes a one-attr probe
+               - operators DOM-inspect to confirm the live version
+                 matches the npm tag without leaving the topology page
+             Geometry/visual impact: ZERO (data-* attrs don't paint).
+             The version string is build-time injected via the existing
+             DASHBOARD_VERSION constant (R51 footer + R51 settings page
+             already consume it from app/lib/version.ts → reads
+             package.json pkg.version). No business logic added. */
+          data-dashboard-version={DASHBOARD_VERSION}
           onPointerDown={onPointerDown}
           onPointerMove={onPointerMove}
           onPointerUp={onPointerUp}
@@ -4203,10 +4306,31 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // reused on the data attribute + the inline custom property.
             const w = box.statuses.working;
             const marchDur = w >= 6 ? 8 : w >= 4 ? 10 : w >= 2 ? 12 : 14;
+            // Round 468 / Loop — single-tier classifier. Surfaces the
+            // semantic the R319 pip-strip already encodes implicitly:
+            // a cluster where every member sits in one status tier
+            // renders as `name · count` only (offending duplicate pip
+            // dropped). Pre-R468 that "all members in tier X" fact
+            // was visible to the eye (no pips) but not queryable from
+            // the DOM. R468 attaches the classifier as
+            // `data-group-tier`:
+            //   'all-working' — w===count, fleet uniformly busy
+            //   'all-idle'    — i===count, fleet uniformly waiting
+            //   'all-offline' — o===count, fleet uniformly down
+            //   'mixed'       — at least 2 tiers present
+            // Sibling R466/R467 pattern — expose composed state as a
+            // data-attr without changing paint. Use cases: Playwright
+            // assertions, external CSS hooks, accessibility enrichment.
+            const groupTier =
+              box.statuses.working === box.count ? 'all-working' :
+              box.statuses.idle    === box.count ? 'all-idle' :
+              box.statuses.offline === box.count ? 'all-offline' :
+                                                    'mixed';
             return (
               <g
                 key={`grp-${box.key}`}
                 data-group={box.key}
+                data-group-tier={groupTier}
                 // Round 173 / Loop: group boxes pick up the first-paint
                 // fade-in wave alongside R9 staggered nodes (0-540ms)
                 // and R172 staggered edges (280-980ms). Pre-R173 the
@@ -4241,7 +4365,29 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   y={box.y}
                   width={box.w}
                   height={box.h}
-                  rx="14"
+                  /* Round 464 / Loop: group-box rx 14 → 16 on isPinned.
+                     Geometric softening at the corner radius — locked
+                     groups read with subtly rounder shoulders than
+                     hovered/idle. +2px reads as a calm \"settled in\"
+                     posture (subtler than a fill or stroke bump but
+                     unmistakable across the whole cluster boundary).
+                     Pin signature on the group-box rect now spans 7
+                     axes:
+                       R63   text fill brighten
+                       R142  drop-shadow filter
+                       R432  text letter-spacing 0→0.5
+                       R444  count tspan fw 500→600
+                       R457  parent text fw 700→800
+                       codex p.125  text opacity 0.55→1
+                       R464  corner rx 14→16  (this round)
+                     transition list (R461) already covers x/y/width/
+                     height 200ms ease-out; appended `rx 200ms ease-
+                     out` so the rounding eases alongside the geometry
+                     axes. SVG2 CSS animation on rx: Chrome 95+ /
+                     Safari 16+ / FF 70+ (same matrix as x/y/w/h).
+                     data-group-box-rx exposes the resolved value. */
+                  rx={isPinned ? '16' : '14'}
+                  data-group-box-rx={isPinned ? '16' : '14'}
                   fill={isLight ? '#0f172a' : '#a5b4fc'}
                   // R68: 3-tier opacity + stroke ladder.
                   //   pinned   → fill 0.08 / 0.13, stroke 3 px (locked)
@@ -4281,6 +4427,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-group-box-pinned={isPinned ? 'true' : 'false'}
                   data-group-box-linecap="round"
                   data-group-box-linejoin="round"
+                  data-group-box-geom-transition="x,y,width,height"
                   // R85: ambient "marching ants" drift on the perimeter
                   // when this group has at least one working member, and
                   // neither pin nor hover is active (those treatments
@@ -4318,8 +4465,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        while stroke / fill-opacity / filter all eased.
                        Closes the last theme-toggle snap on the group
                        box surface — same idiom R246 + R247 used at
-                       per-node label-card and side-panel scopes. */
-                    transition: 'stroke 200ms ease-out, stroke-width 200ms ease-out, fill-opacity 200ms ease-out, filter 200ms ease-out, fill 200ms ease-out',
+                       per-node label-card and side-panel scopes.
+                       Round 461 / Loop: extend the transition list to
+                       all 4 geometry axes (x, y, width, height) so
+                       when a cluster grows / shrinks (member joins,
+                       leaves, prefix rebalance, dense toggle, status
+                       flip) the BIG outer container slides into the
+                       new bounds at the same 200ms cadence the R460
+                       inner hitbox tint rect now uses. Pre-R461 the
+                       outer 200×140 px box snap-jumped on cluster
+                       resize while the inner 160×18 hitbox slid —
+                       jarring two-rate motion at the same surface.
+                       R461 unifies both rects to slide as one, with
+                       the parent box driving the visual envelope and
+                       the inner hitbox tracking the bottom-edge tint.
+                       Hero D #147 motion-coherence at the FULL cluster
+                       container tier (not just the label tint).
+                       data-group-box-geom-transition attr exposed. */
+                    transition: 'stroke 200ms ease-out, stroke-width 200ms ease-out, fill-opacity 200ms ease-out, filter 200ms ease-out, fill 200ms ease-out, x 200ms ease-out, y 200ms ease-out, width 200ms ease-out, height 200ms ease-out, rx 200ms ease-out',
                     pointerEvents: 'none',
                     // CSS var consumed by `.anet-topo-groupbox-live`
                     // (line 877 of globals.css). React's CSSProperties
@@ -4397,27 +4560,83 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       ].filter(Boolean).join('\n')}</title>
                     );
                   })()}
+                  {/* v0.11.0 #147 Hero D — Vincent 5401: "太大太丑,
+                     都放到框的右下角的小字". First-cut bottom-right
+                     placement collided with bottom-row nodes (cluster
+                     geometry has no bottom padding; only GROUP_TOP=12
+                     top band). Pivoted to Option C from #147 spec:
+                     keep top-left anchor BUT shrink fontSize (13 → 9)
+                     and dim default opacity (1 → 0.55, hover/pin
+                     restore to 1). Satisfies "太大太丑" via the size +
+                     opacity axes while keeping the existing geometry
+                     contract that topo-overlap-test gates. Hitbox
+                     rect width tightens to min(box.w-12, 160) to
+                     track the narrower label render. */}
+                  {/* Round 465 / Loop — hitbox tint rect rx 4 → 5 on
+                     pinnedGroup match. Mirrors R464 (parent group-box
+                     rx 14 → 16 on isPinned) at the hitbox tier. The
+                     R460 hitbox carried fixed rx=4 since codex p.125
+                     pivoted it to the bottom-of-band position; the
+                     pin-state geometric softening was only on the BIG
+                     outer container, not the small hitbox underneath.
+                     R465 adds +1 px corner rounding on pin so the
+                     tint rect echoes the parent's locked posture at
+                     its own scale (8% relative bump matches R464's
+                     14→16 ≈ 14% scaled to the smaller rect).
+                     Transition list (R460 fill/opacity/x/width 200ms
+                     ease-out) extends to include `rx 200ms ease-out`
+                     so the rounding eases under the same cadence.
+                     SVG2 CSS animation on rx: Chrome 95+ / Safari
+                     16+ / FF 70+ (same matrix as x/y/w/h).
+                     data-group-label-tint-rx exposes the resolved
+                     value for tests. */}
                   <rect
                     x={box.x + 6}
                     y={box.y + 2}
-                    width={Math.min(box.w - 12, 240)}
-                    height={20}
-                    rx="4"
-                    /* R107 / Loop: list-item tint extends to the SVG
-                       group labels — same idiom R104 added to recent-
-                       signal rows and R105 to the legend rows. The
-                       tint colour is pal.legendAccent (cyan) since
-                       groups don't carry an inherent swatch the way
-                       legend rows do; this matches R68's group-box
-                       isPinned/isHovered accent stroke for consistency.
-                       hover < pinned opacity so locked vs preview is
-                       discriminable at a glance. */
+                    width={Math.min(box.w - 12, 160)}
+                    height={18}
+                    rx={pinnedGroup === box.key ? '5' : '4'}
+                    data-group-label-tint-rx={pinnedGroup === box.key ? '5' : '4'}
                     fill={pinnedGroup === box.key || hoveredGroupLabel === box.key ? pal.legendAccent : 'transparent'}
                     opacity={pinnedGroup === box.key ? (isLight ? 0.16 : 0.20)
                             : hoveredGroupLabel === box.key ? (isLight ? 0.09 : 0.13)
                             : 1}
                     data-group-label-tinted={pinnedGroup === box.key ? 'pinned' : hoveredGroupLabel === box.key ? 'hover' : 'none'}
-                    style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
+                    /* Round 459 / Loop — cadence-sync follow-on to codex
+                       preview.125 (Hero D #147). Codex's parent <text>
+                       transition list now reads:
+                         'fill 200ms, letter-spacing 200ms,
+                          font-weight 200ms, opacity 200ms'
+                       — 200ms ease-out across every axis. The label
+                       hitbox tint rect underneath was still at 150ms
+                       (legacy R107 cadence), so the tint snapped in
+                       50ms ahead of the parent label brightening —
+                       a small but perceivable mistimed cascade when
+                       hovering or clicking to pin a cluster. R459
+                       lifts both axes to 200ms to lock the tint
+                       under the label as one motion-coherent state
+                       flip. Hover/pin/unpin all feel as a single
+                       unified ease rather than "tint pops, label
+                       follows". data-group-label-tint-transition
+                       attr exposes the timing for tests. */
+                    /* Round 460 / Loop — extend the R459-200ms tint rect
+                       transition list to include `x` + `width` so the
+                       hitbox slides into place when a cluster grows or
+                       shrinks (member joins / leaves / status change
+                       re-pricing box.w). Pre-R460 every resize snap-
+                       jumped the hitbox bounds — a small but visible
+                       glitch right at the moment the operator's
+                       attention is on the cluster. SVG2 CSS animation
+                       on geometry attrs has shipped in Chrome 95+ /
+                       Safari 16+ / FF 70+; the runtime gracefully
+                       no-ops on older browsers. Sibling motion idiom
+                       to R134 / R141 / R142 (panel rect transitions)
+                       at the group-label hitbox tier.
+                       data-group-label-tint-geom-transition attr
+                       exposes the geometry-axis presence for tests. */
+                    data-group-label-tint-transition="200ms"
+                    data-group-label-tint-geom-transition="x,width,rx"
+                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out, x 200ms ease-out, width 200ms ease-out, rx 200ms ease-out' }}
                   />
                 {/* Round 218 / Loop: group label gains a letter-spacing
                     transition on pin — the text subtly spaces out
@@ -4463,16 +4682,47 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       R432 group label text (this round)
                     R218 transition list ('fill 200ms, letter-spacing
                     200ms') untouched — additive conditional case. */}
+                {/* Round 457 / Loop: group label parent text fontWeight
+                    700 → 800 on isPinned. Adds typographic weight axis
+                    to the group-label parent text, sibling to R432
+                    letter-spacing tween at the same surface. Pre-R457
+                    pin lifted ls 0 → 0.5px (R218→R432 3-tier) but the
+                    fw stayed planted at R63's 700 — locked groups
+                    read as wider-but-same-weight. R457 adds the
+                    weight axis so pinned groups read as tightened
+                    AND wider, matching the R416/R424/R425/R426/R444/
+                    R445/R446 "data tightens under attention" idiom
+                    (now extended to the parent-text scope at the
+                    group-label tier). R63 fill brighten + R432
+                    letter-spacing 0/0.25/0.5 3-tier + R55 transition
+                    list all preserved; extends to include 'font-
+                    weight 200ms ease-out' so the bump eases under
+                    the same cadence. */}
+                {/* v0.11.0 #147 Hero D — Vincent 5401 ask: "dash 网络
+                   图里面这个工程的名字也太大了, 超级丑". Per Vincent
+                   screenshot 实测. Initial attempt moved label to
+                   bottom-right (#147 spec Option A); topo-overlap-test
+                   caught 7 grid collisions because cluster boxes have
+                   no bottom padding. Pivot to Option C: keep top-left
+                   anchor, shrink fontSize 13 → 9 (-31%, watermark
+                   register), dim default opacity 1 → 0.55 (hover/pin
+                   restore to 1). Net Twitter-grok improvement:
+                   cluster labels no longer dominate the canvas at
+                   rest; operator still hovers to find specific groups.
+                   Position unchanged to preserve the existing
+                   geometry that overlap-test gates. */}
                 <text
                   x={box.x + 12}
-                  y={box.y + 14}
+                  y={box.y + 12}
                   fill={isHovered ? pal.legendHeadline : pal.legendText}
-                  fontSize="13"
+                  fontSize="9"
                   fontFamily="monospace"
-                  fontWeight="700"
+                  fontWeight={isPinned ? '800' : '700'}
+                  opacity={isPinned || isHovered ? 1 : 0.55}
                   data-group-label-hovered={isHovered && !isPinned ? 'true' : 'false'}
+                  data-group-label-font-weight={isPinned ? '800' : '700'}
                   style={{
-                    transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
+                    transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, opacity 200ms ease-out',
                     letterSpacing: isPinned ? '0.5px' :
                                    isHovered ? '0.25px' : '0px',
                   }}
@@ -4528,14 +4778,47 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       fill-inherit from parent label (hover-deepen-own-
                       hue family) preserved. data-group-label-count-
                       font-weight attr exposes the value for tests. */}
+                  {/* Round 444 / Loop: group label count tspan
+                      fontWeight 500 → 600 on isPinned. Extends the
+                      "data tightens under attention" typographic-
+                      weight pattern to a 5th anchor at the group-
+                      label-count scope:
+                        R416 chip-digit       (chip hover)
+                        R424 panel-digit      (panel hover)
+                        R425 hub-digit        (hub hover)
+                        R426 edge-badge-digit (pin/hot)
+                        R444 group-label-count (pinned)   ← this round
+                      Same idiom — when the group is locked, its
+                      member-count tightens typographically alongside
+                      the R432 letter-spacing spread (0 → 0.5px) on
+                      the parent label. Hover keeps rest fw (500) so
+                      the locked vs preview distinction at the type
+                      level stays intact — same gate R432 used.
+                      Monospace + R225 tabular-nums lock the digit
+                      width across fw changes; bbox unchanged; overlap-
+                      test invariants hold. transition list adds
+                      'font-weight 200ms ease-out' matching R432
+                      letter-spacing cadence. R229 fill-inherit
+                      preserved (parent text fill still drives the
+                      hover/pin color). data-group-label-count-font-
+                      weight + -pinned attrs exposed for tests. */}
+                  {/* v0.11.0 #147 — count tspan tracks parent fontSize:
+                     11 → 8 to match the new 9px label scale (parent
+                     dropped 13 → 9 with same -2px gap to the count
+                     suffix). dx="4" replaces dx="6" — the smaller
+                     glyph baseline doesn't need the wider gutter. */}
                   <tspan
-                    dx="6"
-                    fontSize="11"
-                    fontWeight="500"
+                    dx="4"
+                    fontSize="8"
+                    fontWeight={isPinned ? '600' : '500'}
                     data-group-label-count={box.key}
                     data-group-label-count-value={box.count}
-                    data-group-label-count-font-weight="500"
-                    style={{ fontVariantNumeric: 'tabular-nums' }}
+                    data-group-label-count-pinned={isPinned ? 'true' : 'false'}
+                    data-group-label-count-font-weight={isPinned ? '600' : '500'}
+                    style={{
+                      fontVariantNumeric: 'tabular-nums',
+                      transition: 'font-weight 200ms ease-out',
+                    }}
                   >· {box.count}</tspan>
                   {/* Round 58 / Loop: status mix pip strip. Compact text-
                       based chips (e.g. "2w 1i") so the strip stays inside
@@ -4592,11 +4875,36 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       breakdown. Multi-tier groups (e.g. `alpha · 3
                       2w 1i`) render unchanged — those pips genuinely
                       add breakdown info that the total doesn't carry. */}
+                  {/* Round 458 / Loop — Hero D #147 finishing polish on top of
+                      N站牛/codex preview.125 (Option C: top-left label fontSize
+                      13→9 + opacity 0.55 rest / 1 hover+pin, count tspan 11→8).
+                      That ship left the 3 status pips at fontSize=11 — visibly
+                      DOMINATING the now-9px parent label they trail. Result on
+                      a 5-member cluster: `alpha · 5 3w 2i` renders inside-out
+                      as "tiny name + tiny count + BIG bright pips" rather than
+                      a coherent right-tail of metadata. R458 scales the 3 pips
+                      to fontSize=8 (matches count tspan) and tightens dx 8/4/4
+                      → 6/3/3 (gutter ratio 0.73/0.36 glyph-widths @ 11px ≈
+                      0.75/0.38 glyph-widths @ 8px — same visual rhythm at the
+                      smaller scale). The whole group-label bottom-right strip
+                      now reads as a unified 9/8/8/8 typographic ladder:
+                        name (parent <text>)     fontSize 9   fw 700/800
+                        · count    (1st tspan)   fontSize 8   fw 500/600
+                        Nw         (2nd tspan)   fontSize 8   fw 600
+                        Ni         (3rd tspan)   fontSize 8   fw 600
+                        No         (4th tspan)   fontSize 8   fw 600
+                      Closes Vincent /goal 5401 ("太大太丑") at the pip-strip
+                      tier; with codex preview.125 the spec is fully realized.
+                      Geometry-only attribute changes — bbox tightens slightly
+                      (8px chars vs 11px chars stay inside the original 240px
+                      hitbox max) so topo-overlap-test invariants hold.
+                      tabular-nums + anet-fade-in + theme-eased fill 200ms
+                      preserved on every tspan. */}
                   {box.statuses.working > 0 && box.statuses.working !== box.count && (
                     <tspan
-                      dx="8"
+                      dx="6"
                       fill={isLight ? '#059669' : '#22c55e'}
-                      fontSize="11"
+                      fontSize="8"
                       fontWeight="600"
                       className="anet-fade-in"
                       data-group-pip="working"
@@ -4605,9 +4913,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   )}
                   {box.statuses.idle > 0 && box.statuses.idle !== box.count && (
                     <tspan
-                      dx="4"
+                      dx="3"
                       fill={isLight ? '#0d9488' : '#2dd4bf'}
-                      fontSize="11"
+                      fontSize="8"
                       fontWeight="600"
                       className="anet-fade-in"
                       data-group-pip="idle"
@@ -4616,9 +4924,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   )}
                   {box.statuses.offline > 0 && box.statuses.offline !== box.count && (
                     <tspan
-                      dx="4"
+                      dx="3"
                       fill={isLight ? '#94a3b8' : '#6b7280'}
-                      fontSize="11"
+                      fontSize="8"
                       fontWeight="600"
                       className="anet-fade-in"
                       data-group-pip="offline"
@@ -4972,25 +5280,29 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      all preserved. data-edge-particle-radius attr
                      exposes the value for tests. */
                   <circle
-                    r="4.5"
+                    /* Round 439 / Loop: edge flow particle radius hover
+                       lift — r 4.5 → 5.5 on (isHoveredEdge ||
+                       isEndpointHoveredEdge). Continues edge paint-
+                       layer parity arc (R436 visible path sw / R437
+                       flow-rail sw / R439 particle r) so the whole
+                       edge surface — including the moving particle —
+                       lifts on hover, not just the static stripes.
+                       +1px radius gives ~50% area boost. Subtler than
+                       1.4× sw bump on visible path because the
+                       particle is already small + motion-bright;
+                       +1px reads as "the dot caught attention"
+                       without overshadowing the path lift. R252
+                       transition list extends to include r 200ms so
+                       the size change eases under the same fill/
+                       opacity cadence. */
+                    r={(isHoveredEdge || isEndpointHoveredEdge) ? 5.5 : 4.5}
                     fill={pal.flowParticle}
                     filter={isLight ? undefined : 'url(#topo-glow)'}
                     opacity={Math.min(1, fresh * edgeOpacityMul)}
                     data-edge-particle={link.key}
-                    data-edge-particle-radius="4.5"
-                    /* Round 252 / Loop: particle picks up fill +
-                       opacity transition for theme-toggle smoothing.
-                       Pre-R252 pal.flowParticle (cyber #fef08a yellow
-                       ↔ light #f59e0b amber) snapped on theme toggle
-                       while every other edge element eased (R245
-                       paths, R251 badge, R242 chat-target, R233
-                       endpoint ring). opacity is freshness-driven so
-                       it transitions per-frame as fresh decays anyway
-                       — but adding opacity to the explicit transition
-                       list also covers theme toggle (R3 className
-                       transition-opacity duration-300 was previously
-                       absent on this circle). */
-                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out' }}
+                    data-edge-particle-radius={(isHoveredEdge || isEndpointHoveredEdge) ? 5.5 : 4.5}
+                    data-edge-particle-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
+                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out, r 200ms ease-out' }}
                   >
                     <animateMotion
                       dur={`${duration}s`}
@@ -5722,13 +6034,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // Mode='spline' + R245 ease-in-out keySplines all
               // preserved. data-topo-hub-halo-radius attr exposes
               // value for tests.
+              /* Round 451 / Loop: hub center halo radius lift on
+                 hoveredHub — r 20 → 22 (+2px, ~21% area). Adds another
+                 geometric axis to the hub-hover signature stack
+                 alongside R177 ring radius lift + R209 digit scale +
+                 R425 digit fw + R370 halo opacity + R386 highlight
+                 opacity + R441 core fill chroma. Pre-R451 the halo
+                 r stayed planted at R408's 20px while the rest of
+                 the hub structure responded to hover. R451 makes
+                 the halo breath outward on hover so the focal pulse
+                 intensifies under attention. SMIL `<animate>` on
+                 opacity continues independently (animateAttr=
+                 'opacity' vs CSS-property r — non-conflicting). R408
+                 base radius 20 preserved as rest; +2 hover delta
+                 keeps clearance from the R177 hub-hover-ring at
+                 r=17 hover (halo is BEHIND the ring, halo r=22 sits
+                 5px beyond the ring's hover-r=17, still well within
+                 the hub canvas envelope). data-topo-hub-halo-radius
+                 attr now reports the dynamic value. */
+              const isHaloHovered = !reducedMotion && hoveredHub;
+              const haloR = isHaloHovered ? 22 : 20;
               return (
                 <circle
-                  cx={cx} cy={cy} r="20"
+                  cx={cx} cy={cy}
                   fill={isLight ? '#d1fae5' : '#10b981'}
                   opacity={isLight ? 0.42 : 0.12}
                   data-hub-busyness={busy}
-                  data-topo-hub-halo-radius="20"
+                  data-topo-hub-halo-radius={haloR}
+                  data-topo-hub-halo-hovered={isHaloHovered ? 'true' : 'false'}
                   data-topo-hub-halo-trough={isLight ? troughLight : troughDark}
                   data-topo-hub-halo-peak={isLight ? peakLight : peakDark}
                   /* Round 253 / Loop: hub grounding halo fill transition
@@ -5737,8 +6070,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      animate on opacity continued running. CSS fill
                      transition is independent of the SMIL animate
                      (different attributes), so they compose without
-                     conflict. */
-                  style={{ transition: 'fill 200ms ease-out' }}
+                     conflict.
+                     R451: r as CSS property (R197/R198 idiom) so the
+                     hover-radius tween eases smoothly under the same
+                     200ms cadence as fill. */
+                  style={{
+                    r: `${haloR}px`,
+                    transition: 'fill 200ms ease-out, r 200ms ease-out',
+                  } as React.CSSProperties}
                 >
                   {/* Round 244 / Loop: hub grounding halo breath gets
                       ease-in-out keySplines, matching the active-node
@@ -5783,12 +6122,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 attr added for test introspection (the parent <g> at
                 line 3587 has data-topo-hub but the core specifically
                 is the canvas anchor). */}
-            <circle
-              cx={cx} cy={cy} r="10"
-              fill={isLight ? '#059669' : '#10b981'}
-              data-topo-hub-core
-              style={{ transition: 'fill 200ms ease-out' }}
-            />
+            {(() => {
+              /* Round 441 / Loop: hub center core fill brighten on
+                 hoveredHub. Pre-R441 the core was static (cyber
+                 emerald-500 #10b981 / light emerald-600 #059669) and
+                 the hub-hover gesture lifted ring radius (R177) +
+                 digit scale (R209) + digit fw (R425) + halo opacity
+                 (R370) + highlight opacity (R386) but the focal core
+                 ITSELF stayed planted at rest tone. R441 shifts the
+                 fill one emerald tier brighter on hover so the canvas
+                 anchor itself responds:
+                   cyber  emerald-500 → emerald-400  (#10b981 → #34d399)
+                   light  emerald-600 → emerald-500  (#059669 → #10b981)
+                 Same +100 step on the emerald scale across both themes.
+                 Pure paint axis; no geometry change. R248 fill 200ms
+                 transition already in the style list eases the shift.
+                 Closes the chroma axis on the hub-hover gesture stack:
+                   R177 ring radius lift          geometry
+                   R209 digit scale 1.08          geometry
+                   R425 digit fw 700 → 800        typography
+                   R370 halo opacity 0.7 → 0.8    paint
+                   R386 highlight opacity         paint
+                   R441 core fill brighten        chroma             ← this round
+                 data-topo-hub-core-hovered + -fill attrs exposed
+                 for tests. */
+              const isCoreHovered = !reducedMotion && hoveredHub;
+              const coreFill = isLight
+                ? (isCoreHovered ? '#10b981' : '#059669')
+                : (isCoreHovered ? '#34d399' : '#10b981');
+              return (
+                <circle
+                  cx={cx} cy={cy} r="10"
+                  fill={coreFill}
+                  data-topo-hub-core
+                  data-topo-hub-core-hovered={isCoreHovered ? 'true' : 'false'}
+                  data-topo-hub-core-fill={coreFill}
+                  style={{ transition: 'fill 200ms ease-out' }}
+                />
+              );
+            })()}
             {/* R130 / Loop: when workingCount > 0, the decorative inner
                 highlight gets replaced with the workingCount digit. The
                 R84 busyness breath already encodes the same metric
@@ -6570,13 +6942,77 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     tion list ('fill,opacity' 300ms ease-out) unchanged.
                     data-node-halo-offline-opacity attr exposes the
                     resolved value for tests. */}
+                {(() => {
+                  /* Round 440 / Loop: node halo opacity hover lift —
+                     lifts toward full on the matched node. Pure paint
+                     axis: rest values unchanged for un-hovered halos,
+                     hover state lifts the matched halo's alpha by
+                     +0.15 on each tier:
+                       online cyber  0.65 → 0.80
+                       online light  0.85 → 1.00 (capped)
+                       offline cyber 0.30 → 0.45
+                       offline light 0.45 → 0.60
+                     Same paint-only mental model as R430 hub-spoke
+                     opacity lift + R429 label-card body opacity lift,
+                     now at the per-node halo scope. No geometry
+                     change so R51 sentinels stay safe and the overlap-
+                     test invariant is unchanged (test runs at rest).
+                     Closes a chroma/presence axis on the per-node
+                     hover signature alongside the 12-layer cue stack
+                     (R26/R217/R142/R427/R428/R429 card + R430/R435/
+                     R436/R437/R94 link + R438 ring). R407 offline
+                     halo opacity floor (cyber 0.30 / light 0.45) is
+                     the rest branch unchanged. Existing transition-
+                     [fill,opacity] duration-300 className handles
+                     the easing. data-node-halo-hovered exposes the
+                     gate; data-node-halo-resolved-opacity exposes
+                     the four-state resolved value for tests. */
+                  const isHaloHovered = !reducedMotion && hoveredAlias === session.alias;
+                  /* Round 456 / Loop: light-theme offline node halo
+                     rest opacity 0.45 → 0.50. Stale-state legibility
+                     lift family extension (10th anchor) at the per-
+                     node halo light-theme scope:
+                       R317 subordinate-text gray-500 → gray-400
+                       R358 freshness floor 0.25 → 0.30
+                       R372 minimap offline-dot 0.5 → 0.6
+                       R404 hub-halo cyber trough 0.08 → 0.10
+                       R405 hub-halo light trough 0.32 → 0.34
+                       R406 edge freshness floor 0.35 → 0.40
+                       R407 node halo offline opacity
+                            cyber 0.25 → 0.30
+                            light 0.4  → 0.45
+                       R419 hub-spoke idle 0.45 → 0.50
+                       R452 dense alias rest 0.9 → 0.95
+                       R456 node halo offline LIGHT 0.45 → 0.50  ← this round
+                     Pre-R456 light-theme offline halo at 0.45 sat at
+                     the upper end of "near-floor" but read as soft-
+                     focus on the lighter canvas; +0.05 (~11 % opacity
+                     gain) lifts it to 0.50 — the midpoint between
+                     R407 rest 0.45 and R440 hover 0.60 — closing the
+                     gap so offline halos read more confidently as
+                     present-but-stale anchors. Cyber theme stays at
+                     R407's 0.30 (cyber backdrop is dark; the cyber
+                     offline halo against #080814 contains a stronger
+                     contrast envelope than light, so doesn't need
+                     the same lift). R440 hover 0.45→0.60 light + R12
+                     status.halo color + R407 transition list all
+                     preserved. */
+                  const haloOpacity = (() => {
+                    if (isOnline) {
+                      return isLight ? (isHaloHovered ? 1   : 0.85) : (isHaloHovered ? 0.80 : 0.65);
+                    }
+                    return isLight ? (isHaloHovered ? 0.60 : 0.50) : (isHaloHovered ? 0.45 : 0.30);
+                  })();
+                  return (
                 <circle
                   cx={pos.x}
                   cy={pos.y}
                   r={radius + 8}
                   fill={status.halo}
-                  opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.45 : 0.30)}
+                  opacity={haloOpacity}
                   data-node-halo-offline-opacity={isOnline ? undefined : (isLight ? 0.45 : 0.30)}
+                  data-node-halo-hovered={isHaloHovered ? 'true' : 'false'}
+                  data-node-halo-resolved-opacity={haloOpacity}
                   className="transition-[fill,opacity] duration-300 ease-out"
                   data-node-halo-breath={!reducedMotion && session.status === 'working' ? 'on' : 'off'}
                   data-node-halo-breath-offset={
@@ -6635,6 +7071,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     />
                   )}
                 </circle>
+                  );
+                })()}
                 {/* Round 111 / Loop: edge-endpoint emphasis ring. R49
                     already keeps endpoint nodes at opacity 1 while
                     others dim when an edge is hovered, but the
@@ -6691,11 +7129,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      ring stroke-width). data-edge-endpoint-ring-
                      stroke-width attr surfaces the chosen value for
                      test introspection. */
+                  /* Round 442 / Loop: endpoint emphasis ring radius
+                     hover lift — r=radius+7 → radius+8 on isEndpoint,
+                     closing a 3-axis hover-elevation parity at endpoint
+                     ring scope (r + sw + opacity):
+                       opacity  R182  0    → 0.85/0.9
+                       sw       R233  1.6  → 2.4
+                       r        R442  +7   → +8        ← this round
+                     Mirrors the 3-axis trios already established at
+                     hub hover-ring (R177/R370/R385) and edge badge
+                     (R164/R394/R395). Pre-R442 the endpoint ring
+                     faded in + thickened on edge-hover but its radius
+                     stayed locked at radius+7 — only the paint/weight
+                     axes lifted while the GEOMETRY stayed unchanged.
+                     +1px (~radius+7 to radius+8) gives a subtle outward
+                     pulse on hover without crowding the status ring
+                     (which sits at radius from R438 sw3.5 hover) or
+                     the halo (radius+8 from R440 opacity hover — the
+                     endpoint ring sits at the SAME radius as the halo
+                     but with stroke=cyan vs fill=status.halo so they
+                     don't visually collide). The transition list
+                     extends to include 'r 180ms ease-out' so the new
+                     axis eases under the same R233 cadence. SVG `r`
+                     on a <circle> uses CSS-property syntax for inter-
+                     polation (same idiom R197/R198 used on the
+                     legend swatch). data-edge-endpoint-ring-radius
+                     attr exposes the resolved value for tests. */
+                  const endpointR = isEndpoint ? radius + 8 : radius + 7;
                   return (
                     <circle
                       cx={pos.x}
                       cy={pos.y}
-                      r={radius + 7}
                       fill="none"
                       stroke={pal.flowEdge}
                       strokeWidth={isEndpoint ? 2.4 : 1.6}
@@ -6703,7 +7167,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       data-edge-endpoint-ring
                       data-edge-endpoint-active={isEndpoint ? 'true' : 'false'}
                       data-edge-endpoint-ring-stroke-width={isEndpoint ? 2.4 : 1.6}
-                      style={{ pointerEvents: 'none', transition: 'opacity 180ms ease-out, stroke-width 180ms ease-out' }}
+                      data-edge-endpoint-ring-radius={endpointR}
+                      style={{
+                        pointerEvents: 'none',
+                        r: `${endpointR}px`,
+                        transition: 'opacity 180ms ease-out, stroke-width 180ms ease-out, r 180ms ease-out',
+                      } as React.CSSProperties}
                     />
                   );
                 })()}
@@ -6963,8 +7432,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           transition: 'r 150ms ease-out, stroke-width 150ms ease-out',
                         } as React.CSSProperties}
                       />
+                      {/* Round 443 / Loop: runtime badge inner-icon
+                         strokeWidth lift on node hover — 2.4 → 2.8 on
+                         isNodeActive. Pre-R443 the outer badge ring
+                         lifted (R208 r + sw both grow on hover) but
+                         the inner icon path stayed locked at sw=2.4.
+                         The two layers of the runtime badge were
+                         out of phase: ring thickened, icon stayed
+                         thin. R443 closes the 2-axis hover signature
+                         on the badge so both ring and icon lift
+                         together. +0.4 absolute delta matches the
+                         R208 ring's +0.5 sw delta (badge ring 1.5 →
+                         2.0 absolute), proportional to the icon's
+                         heavier base of 2.4. Pure paint axis;
+                         strokeLinecap='round' + strokeLinejoin='round'
+                         preserved. transition list extends to include
+                         'stroke-width 150ms ease-out' matching R208
+                         outer-ring cadence. data-runtime-badge-icon
+                         + -active attrs exposed for tests. */}
                       <g transform={`translate(${bx - icon / 2} ${by - icon / 2}) scale(${icon / 24})`}>
-                        <path d={rt.iconPath} fill="none" stroke={rt.color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
+                        <path
+                          d={rt.iconPath}
+                          fill="none"
+                          stroke={rt.color}
+                          strokeWidth={isNodeActive ? '2.8' : '2.4'}
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          data-runtime-badge-icon={session.alias}
+                          data-runtime-badge-icon-active={isNodeActive ? 'true' : 'false'}
+                          data-runtime-badge-icon-stroke-width={isNodeActive ? '2.8' : '2.4'}
+                          style={{ transition: 'stroke-width 150ms ease-out' }}
+                        />
                       </g>
                     </g>
                   );
@@ -7269,12 +7767,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           hover scope. R211 fill 300ms transition
                           preserved (additive letter-spacing branch
                           + appended 'letter-spacing 200ms ease-out'). */}
+                      {/* Round 448 / Loop: node sub-text fontWeight
+                          400 → 500 (font-medium). Sibling to R363
+                          (recent-row text fw 400→500) + R364 (legend-
+                          row label fw 400→500) — same "small mono
+                          text at fontSize=9-11 needs 500-tier weight
+                          for legibility" pattern, now applied to the
+                          per-node sub-text line. At fontSize=8-9
+                          monospace against the label-card chrome
+                          (pal.labelBox.fill cyber #020617 / light
+                          #ffffff), the default fw=400 sits at the
+                          legibility floor; fw=500 (font-medium) lifts
+                          it into a clearly readable band without
+                          changing geometry. R211 fill 300ms +
+                          R428 letter-spacing 0→0.2 hover + R427
+                          alias-text + R429 body opacity all preserved.
+                          Pure typography lift; no layout shift; the
+                          alias-text fw=700 (R427) still wins so the
+                          alias > status hierarchy holds at the type
+                          level. data-node-sub-text-font-weight attr
+                          exposes the value for tests. */}
                       <text
                         x="0" y={subY} textAnchor="middle"
                         fill={status.primary}
                         fontSize={subFs} fontFamily="monospace"
+                        fontWeight="500"
                         data-node-sub-text={session.alias}
                         data-node-sub-text-hovered={hoveredAlias === session.alias ? 'true' : 'false'}
+                        data-node-sub-text-font-weight="500"
                         style={{
                           transition: 'fill 300ms ease-out, letter-spacing 200ms ease-out',
                           letterSpacing: hoveredAlias === session.alias ? '0.2px' : '0px',
@@ -7301,6 +7821,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     // CSS pseudo-class; only the transition-property
                     // moves to inline. Big fleets benefit most — this is
                     // the path users see when their dashboard is busiest.
+                    /* Round 452 / Loop: dense plain-text alias rest
+                       opacity 0.9 → 0.95. Closes the alpha gap on the
+                       dense fleet's per-node label, sibling to R449
+                       legend-count-active 0.95→1.0 and R450 minimap
+                       viewport rest 0.9→0.95 — same "close the
+                       active-presence alpha gap" idiom applied here
+                       to the dense-mode alias text at fontSize=9-10
+                       monospace. Pre-R452 dense aliases at α=0.9 sat
+                       just below full alpha; for un-hovered nodes in
+                       a busy >16-node fleet this is the only label
+                       readable, so the 10% alpha gap added a subtle
+                       "soft-focused chrome" feel where the labels
+                       should read as definitive. +0.05 lift makes
+                       them confidently present without erasing the
+                       status.text + R110 stroke halo + paintOrder
+                       layering. R26 group-hover translate + R212
+                       fill 300ms transition + R110 stroke=container-
+                       Bg halo all preserved. data-node-dense-alias-
+                       text-opacity attr exposes the resolved value
+                       for tests. */
                     <text
                       x={pos.x}
                       y={pos.y + radius + denseDrop}
@@ -7309,9 +7849,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       fontSize={denseFs}
                       fontFamily="monospace"
                       fontWeight="700"
-                      opacity={0.9}
+                      opacity={0.95}
                       className="group-hover:-translate-y-[1.5px]"
                       data-node-dense-alias-text={session.alias}
+                      data-node-dense-alias-text-opacity="0.95"
                       style={{
                         pointerEvents: 'none',
                         paintOrder: 'stroke',
@@ -8333,13 +8874,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                                R383 recent-row pip radius 1.8 → 2.0  (this round)
                              data-recent-row-freshness-radius attr
                              bumps to '2.0' for tests. */
-                          r={2.0}
+                          /* Round 447 / Loop: recent-row freshness pip
+                             radius lift on (isRowHovered || isRowPinned)
+                             — r 2.0 → 2.5 (+0.5px, sibling to R442
+                             endpoint-ring r lift). Adds a geometric
+                             axis to the recent-row hover/pin gesture
+                             alongside R143 translateY + R104 row bg-
+                             tint + R434 letter-spacing + R445 count
+                             fw. Pre-R447 the pip stayed at r=2.0 always
+                             — the freshness alpha (R162) tracked
+                             recency but didn't telegraph "this row is
+                             in focus" geometrically. R447 lifts the
+                             pip outward by 25% area (π·2.5² / π·2.0²
+                             = 1.56) on attention, closing a 5-axis
+                             row-attention signature (geometry + paint
+                             + typography + spacing + position).
+                             SVG `r` as CSS property for interpolation
+                             (R197/R198 idiom). transition list extends
+                             to include 'r 200ms ease-out' matching the
+                             opacity cadence. data-recent-row-freshness-
+                             lifted attr exposes the gate for tests. */
                           fill={pal.legendAccent}
                           opacity={alpha}
                           data-recent-row-freshness={link.key}
                           data-recent-row-freshness-alpha={alpha.toFixed(2)}
-                          data-recent-row-freshness-radius="2.0"
-                          style={{ pointerEvents: 'none', transition: 'opacity 200ms ease-out' }}
+                          data-recent-row-freshness-radius={(isRowHovered || isRowPinned) ? 2.5 : 2.0}
+                          data-recent-row-freshness-lifted={(isRowHovered || isRowPinned) ? 'true' : 'false'}
+                          style={{
+                            pointerEvents: 'none',
+                            r: `${(isRowHovered || isRowPinned) ? 2.5 : 2.0}px`,
+                            transition: 'opacity 200ms ease-out, r 200ms ease-out',
+                          } as React.CSSProperties}
                         />
                       );
                     })()}
@@ -8486,13 +9051,36 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           distinct, plus the fill flip from legendText
                           → amber carries the dramatic part of the cue).
                           Sibling treatment in the data-weight tier. */}
+                      {/* Round 445 / Loop: extend the R320 cold/hot fw
+                          binary (600/700) to ALSO fire on isRowPinned —
+                          pinned-cold now lifts to 700 alongside the
+                          existing hot-triggered lift. Sibling to R444
+                          group-label-count-pin (500→600) at the
+                          recent-row scope. Both panel-row counts now
+                          respond to pin with a typographic weight lift,
+                          part of the "data tightens under attention"
+                          family (R416/R424/R425/R426/R444/R445).
+                          Effective tiers:
+                            cold + un-pinned     → fw 600
+                            cold + pinned        → fw 700  ← this round
+                            hot  (any pin state) → fw 700  (R320 preserved)
+                            hot is still amber-filled (R127); cold pin
+                            stays at the parent fill, so the two routes
+                            to fw=700 are visually distinct (color vs
+                            no color). transition list adds 'font-
+                            weight 200ms ease-out' so the lift eases
+                            under the same R320 fill cadence. data-
+                            recent-row-count-pinned attr exposes the
+                            pin gate for tests. */}
                       <tspan
                         fill={isHot ? hotStroke : undefined}
-                        fontWeight={isHot ? '700' : '600'}
+                        fontWeight={(isHot || isRowPinned) ? '700' : '600'}
                         data-recent-row-count
+                        data-recent-row-count-pinned={isRowPinned ? 'true' : 'false'}
+                        data-recent-row-count-font-weight={(isHot || isRowPinned) ? '700' : '600'}
                         {...(isHot ? { 'data-recent-row-count-hot': 'true' } : {})}
                         style={{
-                          transition: 'fill 300ms ease-out',
+                          transition: 'fill 300ms ease-out, font-weight 200ms ease-out',
                           fontVariantNumeric: 'tabular-nums',
                         }}
                       >
@@ -9318,20 +9906,60 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       labels to single status words, the count
                       becomes proportionally more important; this
                       round emphasizes that role typographically. */}
+                  {/* Round 446 / Loop: legend per-row count fontWeight
+                      lift 600 → 700 on isPinned. Mirror of R444 group-
+                      label-count + R445 recent-row-count at the
+                      legend-row scope. Closes the 3-panel-row family
+                      for the "data tightens under attention" pattern —
+                      every panel-row count now responds to pin with a
+                      typographic-weight bump:
+                        R444 group-label-count   500 → 600
+                        R445 recent-row-count    600 → 700  (cold-pin route)
+                        R446 legend-row-count    600 → 700  ← this round
+                      Hover gate (hoveredStatus===row.key) keeps rest
+                      fw=600 so the locked-vs-preview distinction at
+                      the type level stays intact — same gate R433 used
+                      on the parent <text> letter-spacing tween. R309
+                      fw=600 baseline + R204 empty-row opacity dim +
+                      R225 tabular-nums all preserved. transition list
+                      extends to include 'font-weight 150ms ease-out'
+                      matching R433 fill/letter-spacing cadence.
+                      data-legend-count-pinned + -font-weight attrs
+                      exposed for tests. */}
                   <text
                     x="215" y={row.y1}
                     textAnchor="end"
                     fill={row.count > 0 && (hoveredStatus === row.key || isPinned) ? row.fill : pal.legendText}
                     fontSize="11"
                     fontFamily="monospace"
-                    fontWeight="600"
+                    fontWeight={isPinned ? '700' : '600'}
+                    /* Round 449 / Loop: legend-row count active-state
+                       opacity 0.95 → 1.0 on (hoveredStatus===row.key
+                       || isPinned). Pre-R449 R204 lifted populated-row
+                       active opacity from rest 0.65 to 0.95 — visibly
+                       brighter but kept a 5 pct alpha gap (1 - 0.95).
+                       R449 closes the gap to 1.0 so the active count
+                       reads as confidently present alongside the R446
+                       fw=600→700 + R433 letter-spacing tween. Theme-
+                       consistency / canvas-presence family extension
+                       (7th anchor on the active-presence lift sub-
+                       family): R370 hub hover-ring 0.7→0.8, R371 edge-
+                       badge rest 0.82→0.85, R372 minimap offline-dot
+                       0.5→0.6, R386 hub-highlight idle 0.9→0.95, R387
+                       hover-detail panel 0.94→0.97, R429 label-card
+                       body 0.94→1.0, R449 legend-count active 0.95→1.0
+                       ← this round. Empty-row opacity (R204: 0.28
+                       light / 0.30 cyber) and idle 0.65 rest both
+                       preserved. */
                     opacity={row.count === 0
                       ? (isLight ? 0.28 : 0.30)
-                      : (hoveredStatus === row.key || isPinned ? 0.95 : 0.65)}
+                      : (hoveredStatus === row.key || isPinned ? 1 : 0.65)}
                     data-legend-count={row.key}
                     data-legend-count-empty={row.count === 0 ? 'true' : 'false'}
+                    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', fontVariantNumeric: 'tabular-nums' }}
+                    style={{ pointerEvents: 'none', transition: 'opacity 150ms ease-out, fill 150ms ease-out, font-weight 150ms ease-out', fontVariantNumeric: 'tabular-nums' }}
                   >{row.count}</text>
                 </g>
               );
@@ -9718,7 +10346,29 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // R346: strokeWidth + opacity tween on container hover.
                   strokeWidth={hoveredMinimap ? '1.75' : '1.5'}
                   strokeLinejoin="round"
-                  opacity={hoveredMinimap ? '1' : '0.9'}
+                  /* Round 450 / Loop · milestone: minimap viewport rest
+                     opacity 0.9 → 0.95. Closes half the alpha gap on
+                     the wayfinding indicator while preserving the
+                     R346 hover delta to 1.0. Pre-R450 the rest viewport
+                     sat at 0.9 (10 pct alpha gap) — adequate but
+                     under-confident for the user's primary "you are
+                     here" indicator on the minimap. R450 lifts to 0.95
+                     so the rest read is more present without erasing
+                     the hover lift cue (the +0.05 rest-to-hover delta
+                     is small but pairs with R346 sw 1.5→1.75 to keep
+                     hover clearly distinguishable). Sibling to R449
+                     legend-count active opacity 0.95→1.0 — same
+                     "close the active-presence alpha gap" idiom now
+                     applied to the REST tier of the wayfinding rect
+                     (the minimap viewport stays at canvas-presence
+                     register even when un-hovered since it's the
+                     spatial referent). Theme-consistency / canvas-
+                     presence family (8th anchor on the active-
+                     presence lift sub-arc).
+                     R287 strokeWidth=1.5 + R379 strokeLinejoin='round'
+                     + R346 hover-state tweens + R393 rx=2 + R199
+                     smoothView x/y/w/h transition all preserved. */
+                  opacity={hoveredMinimap ? '1' : '0.95'}
                   data-topo-minimap-viewport
                   data-topo-minimap-viewport-rx="2"
                   data-topo-minimap-viewport-smooth={smoothView ? 'true' : 'false'}
@@ -9921,11 +10571,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   its own compositor layer for crisper edges during
                   the scale tween. Sibling change on zoom-in icon
                   below. */}
+              {/* Round 454 / Loop: extend R453 chrome reset icon hover
+                  sw lift to zoom +/− icons via Tailwind arbitrary class
+                  group-hover:[stroke-width:2.8]. Chrome icon hover sw
+                  lift family now 5 anchors:
+                    R208 runtime badge outer ring   1.5 → 2
+                    R443 runtime badge inner icon   2.4 → 2.8
+                    R453 chrome reset icon          2.5 → 2.8
+                    R454 chrome zoom-out icon       2.5 → 2.8  ← this round
+                    R454 chrome zoom-in icon        2.5 → 2.8  ← this round
+                  Tailwind v4 arbitrary-value group-hover variant
+                  resolves [stroke-width:2.8] as a CSS property which
+                  overrides the static strokeWidth='2.5' attribute on
+                  hover. transition-[stroke-width] appended to the
+                  existing transition-transform list so the sw tween
+                  eases under the same 200ms cadence as R352 group-
+                  hover:scale-110. R186 anet-chrome-pop keyframe still
+                  owns transform during click via CSS-animation
+                  precedence over transition-transform. Sibling change
+                  on zoom-in icon below. */}
               <svg
                 width="12" height="12" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
                 aria-hidden
-                className={`transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu${chromePopping === 'zoom-out' ? ' anet-chrome-pop' : ''}`}
+                className={`transition-[transform,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:[stroke-width:2.8] transform-gpu${chromePopping === 'zoom-out' ? ' anet-chrome-pop' : ''}`}
                 data-topo-chrome-zoom-out-icon
               ><path d="M5 12h14" /></svg>
             </button>
@@ -10030,11 +10699,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               {/* R352 sibling — zoom-in icon picks up the same
                   group-hover:scale-110 family. Mirror change at
                   the zoom-out icon above. */}
+              {/* R454 sibling — zoom-in icon picks up the same
+                  group-hover:[stroke-width:2.8] family lift. */}
               <svg
                 width="12" height="12" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
                 aria-hidden
-                className={`transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu${chromePopping === 'zoom-in' ? ' anet-chrome-pop' : ''}`}
+                className={`transition-[transform,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:[stroke-width:2.8] transform-gpu${chromePopping === 'zoom-in' ? ' anet-chrome-pop' : ''}`}
                 data-topo-chrome-zoom-in-icon
               ><path d="M12 5v14M5 12h14" /></svg>
             </button>
@@ -10091,13 +10762,28 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 (2.5) all share one weight. View-box (24×24) and
                 display size (13×13) unchanged, so geometry stays
                 pixel-stable — only the stroke deepens. */}
+            {/* Round 453 / Loop: chrome reset icon strokeWidth hover
+                lift — 2.5 → 2.8 on hoveredReset && !resetSpinning.
+                Sibling to R443 runtime badge inner-icon sw lift
+                (2.4→2.8) — both chrome icons now thicken on hover
+                for tactile feedback. Pre-R453 reset hover was a
+                rotate-only cue (R350); R453 adds a stroke-weight
+                axis so the affordance reads with both motion (R350
+                rotate -8°) AND geometry (R453 sw +0.3). Gated on
+                !resetSpinning so the R184 spin keyframe owns paint
+                during its 450ms run. 200ms stroke-width transition
+                appended to the style list matches R350 transform
+                cadence. data-topo-chrome-reset-icon-stroke-width
+                attr exposes the resolved value for tests. */}
             <svg
               width="13" height="13" viewBox="0 0 24 24"
-              fill="none" stroke="currentColor" strokeWidth="2.5"
+              fill="none" stroke="currentColor"
+              strokeWidth={hoveredReset && !resetSpinning ? '2.8' : '2.5'}
               strokeLinecap="round" strokeLinejoin="round"
               aria-hidden
               className={resetSpinning ? 'anet-reset-spin' : undefined}
               data-topo-chrome-reset-icon
+              data-topo-chrome-reset-icon-stroke-width={hoveredReset && !resetSpinning ? '2.8' : '2.5'}
               // R350: hover-rotate preview of the R184 click-spin.
               // Gated on !resetSpinning so the anet-reset-spin keyframe
               // owns transform during its 450ms run. transformOrigin
@@ -10106,7 +10792,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               style={{
                 transform: hoveredReset && !resetSpinning ? 'rotate(-8deg)' : 'rotate(0deg)',
                 transformOrigin: 'center',
-                transition: 'transform 200ms ease-out',
+                transition: 'transform 200ms ease-out, stroke-width 200ms ease-out',
               }}
               data-topo-chrome-reset-icon-hover={hoveredReset && !resetSpinning ? 'true' : 'false'}
             >
@@ -10176,12 +10862,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 gpu hint promotes the svg to its own compositor layer
                 for crisper edges during the scale tween. Closes the
                 chrome-strip per-icon hover-affordance arc. */}
+            {/* R455 — fullscreen ENTER + EXIT icons pick up the same
+                group-hover:[stroke-width:2.8] family lift as the
+                zoom +/− icons (R454) and chrome reset icon (R453).
+                Chrome icon hover sw lift family now 6 anchors —
+                R208/R443 runtime badge + R453/R454-zoom-out/zoom-in
+                + R455 fullscreen (this round). transition-[transform,
+                stroke-width] expands existing transition-transform
+                so the sw lift eases under R352 scale-110 cadence. */}
             {isFullscreen ? (
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu" data-topo-chrome-fullscreen-icon="exit">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-[transform,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:[stroke-width:2.8] transform-gpu" data-topo-chrome-fullscreen-icon="exit">
                 <path d="M8 3v4a1 1 0 0 1-1 1H3M21 8h-4a1 1 0 0 1-1-1V3M3 16h4a1 1 0 0 1 1 1v4M16 21v-4a1 1 0 0 1 1-1h4" />
               </svg>
             ) : (
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu" data-topo-chrome-fullscreen-icon="enter">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-[transform,stroke-width] duration-200 ease-out group-hover:scale-110 group-hover:[stroke-width:2.8] transform-gpu" data-topo-chrome-fullscreen-icon="enter">
                 <path d="M3 8V5a2 2 0 0 1 2-2h3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M21 16v3a2 2 0 0 1-2 2h-3" />
               </svg>
             )}