@sleep2agi/agent-network-dashboard 0.5.1-preview.10 → 0.5.1-preview.100

package/app/components/TopoGraph.tsx

@@ -194,7 +194,27 @@ function FreshnessChip({ sessions }: { sessions: unknown }) {
   // tier (R312-R314 family); the amber bg/text/border still does
   // the warning-state work, the weight just keeps the chip in the
   // same data-typography ladder as its siblings.
-  const baseClass = "hidden sm:inline px-2.5 py-1 rounded-md font-mono font-medium border transition-colors duration-300";
+  // Round 377 / Loop: FreshnessChip baseClass picks up `tabular-nums`.
+  // The chip-row's last untouched chip joins the R224-R357 broader
+  // tabular-nums sweep:
+  //   R224 edge badge digit
+  //   R225 hub digit / panel header counts / recent row count
+  //   R232 chip row counts (working / online / active-links)
+  //   R321 recent row timestamp
+  //   R322 recent panel hot count
+  //   R323 filter pin pill counts
+  //   R333 vendor count suffix
+  //   R357 active-links freshness suffix wrapper
+  //   R377 FreshnessChip body  (this round)
+  // `font-mono` already gives equal-width glyphs but `tabular-nums`
+  // is the explicit-invariant the rest of the chip row carries.
+  // FreshnessChip body reads `lag · {sec}s` — the {sec} digit grows
+  // every second; tabular-nums explicitly locks digit width so the
+  // chip stays planted as the seconds counter ticks past 9 → 10 →
+  // 99 → 100. R187 transition-colors duration-300 + R275 stale-only
+  // render gate + R315 font-medium R313 family alignment all
+  // preserved.
+  const baseClass = "hidden sm:inline px-2.5 py-1 rounded-md font-mono font-medium tabular-nums border transition-colors duration-300";
   const colorClass = stale
     ? "bg-amber-500/10 text-amber-300 border-amber-500/20"
     : "bg-gray-500/10 text-gray-400 border-gray-500/20";
@@ -237,7 +257,21 @@ function FreshnessChip({ sessions }: { sessions: unknown }) {
           duration-300 still eases the bg/color flip. Title (hover
           tooltip) still spells out the full meaning in either
           state. */}
-      {stale ? 'lag' : 'live'} · {sec}s
+      {/* Round 410 / Loop: FreshnessChip body picks up the chip-
+          internal-hierarchy arc. Pre-R410 the body rendered as a
+          single text node `lag · {sec}s` with the parent's font-
+          medium (fw=500) applied uniformly. R410 splits the digit
+          and unit into separate spans so the chip's internal
+          typography mirrors the family pattern R333-R341/R362/R369/
+          R389 established for the chip row:
+            digit  (fw=600)  data tier
+            unit   (fw=500 + opacity=0.7)  label tier
+          The `lag` prefix stays at the chip's baseline (fw=500
+          from parent font-medium) — it labels the state, not a
+          data value. data-freshness-chip-digit / -unit attrs
+          surface the spans for tests. tabular-nums + transition-
+          colors + R275 stale-only gate all preserved. */}
+      {stale ? 'lag' : 'live'} · <span className="font-semibold" data-freshness-chip-digit>{sec}</span><span className="opacity-70" data-freshness-chip-unit>s</span>
     </span>
   );
 }
@@ -1050,6 +1084,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // 200ms ease-out joins the existing R264 color/border transition
   // list on the same span.
   const [hoveredZoomLevel, setHoveredZoomLevel] = useState(false);
+  // Round 350 / Loop: reset-button icon hover-rotate preview of the
+  // R184 click-spin. Pre-R350 hovering the reset button only changed
+  // the button bg (white/5); the icon inside stayed perfectly still.
+  // R350 nudges the icon -8° on hover — a tactile hint that this
+  // button rotates the icon on click. When the click fires, the
+  // R184 anet-reset-spin keyframe animation overrides the hover
+  // transform for its 450 ms run (CSS animations win over transitions
+  // on the same property); when the animation ends + React removes
+  // the className, the inline transform eases back to whatever the
+  // hover state says — either -8° (still hovering) or 0 (mouse left).
+  // 350th-round milestone polish.
+  const [hoveredReset, setHoveredReset] = useState(false);
   // R135: panel-wide hover-elevation. The recent-signal + legend
   // panels both already host clickable rows (R56/R116 recent rows,
   // R55/R61 legend rows) and a clickable footer (R133), so the
@@ -1811,12 +1857,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               while honoring R328's wider baseline rhythm. data-topo-
               chrome-layout-trailer attr unchanged — it still marks
               the boundary surface for the gap probe. */}
+          {/* Round 375 / Loop: Layout-toggle wrapper rounded-md → rounded-
+              lg (6 → 8 px). Extends the corner-radius cascade family
+              to the chrome-strip layout-toggle wrapper:
+                R330 canvas wrapper        rounded-xl  12 px
+                R331 SVG panels            rx=10       10 px
+                R332 minimap container     rounded-lg   8 px
+                R375 Layout-toggle wrapper rounded-lg   8 px  (this round)
+              Pre-R375 the wrapper at rounded-md (6 px) was the only
+              chrome-strip container still using the smaller corner
+              radius — both R330 outer wrapper and R332 minimap sit at
+              ≥ 8 px, so the Layout toggle's 6 px stood out as a
+              tighter corner against the family. R375 brings it into
+              the rounded-lg tier where the minimap already lives.
+              Pure paint change — overflow-hidden still clips the
+              inner buttons' bg-cyan-500/15 tints; no layout shift.
+              R268 border-color + 200ms transition + R329 mr-0.5 +
+              data-topo-chrome-layout-trailer all preserved. */}
           <div
-            className="mr-0.5 inline-flex rounded-md border overflow-hidden"
+            className="mr-0.5 inline-flex rounded-lg border overflow-hidden"
             style={{ borderColor: pal.containerBorder, transition: 'border-color 200ms ease-out' }}
             role="group"
             aria-label="Topology layout"
             data-topo-chrome-layout-trailer
+            data-topo-chrome-layout-radius="rounded-lg"
           >
             <button
               onClick={() => { popChrome('layout-ring'); if (layout !== 'ring') toggleLayout(); }}
@@ -1850,7 +1914,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  weight; cyan-400/60 + ring-inset retained. The
                  R163/R196 hover/active deeps + R249 chrome-pop
                  click feedback continue unchanged. */
-              className={`px-2.5 py-1 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              // R351: hover:tracking-wide extends the R344/R345/R347
+              // hover-letter-spacing family to a 4th surface (chrome-
+              // strip Ring/Grid pair). transition-colors className
+              // dropped in favour of an inline transition spec that
+              // bundles bg/color (150ms ease) + letter-spacing
+              // (200ms ease-out) — Tailwind's transition-colors
+              // doesn't list letter-spacing, so without this the
+              // hover:tracking-wide would snap. Sibling change on
+              // the Grid button below.
+              className={`px-2.5 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out' }}
             >
               Ring
             </button>
@@ -1867,14 +1941,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // Round 306 / Loop: focus-visible:ring-2 → ring-1 sibling
               // change to Ring above — unifies focus-ring width across
               // all chrome buttons.
-              className={`px-2.5 py-1 border-l transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
+              // R351 sibling — Grid button picks up hover:tracking-wide
+              // + inline transition spec. Same vocabulary as Ring.
+              className={`px-2.5 py-1 border-l focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
               /* Round 268 / Loop: Grid button's left border (the
                  internal divider between Ring and Grid) picks up
                  pal.containerBorder, matching the wrapper change at
                  line ~1460 and the chrome strip's segmented borders
-                 (nodeSize, zoom). transition-colors className covers
-                 the border-color eased on theme toggle. */
-              style={{ borderColor: pal.containerBorder }}
+                 (nodeSize, zoom). The R268 transition-colors className
+                 used to carry the border-color ease; R351 unfolds the
+                 transition list into the inline spec below so the
+                 letter-spacing tween rides alongside without snapping
+                 the border-color flip — border-color 200ms ease-out
+                 keeps R268's theme-toggle smoothness intact. */
+              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out' }}
             >
               Grid
             </button>
@@ -1961,11 +2041,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      7th surface in the info-density tabular-nums
                      sweep — and the first on the HTML side
                      (previous 6 were SVG <text>/<tspan>). */
-                  className={`tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors duration-200 ${
+                  /* Round 398 / Loop: chip-row chips gain hover translateY
+                     (-1px) lift on the CLICKABLE variant only (workingCount
+                     > 0 here / onlineNodes.length > 0 below / activeLinks
+                     > 0 deeper). Pre-R398 the chips brightened bg + border
+                     on hover (R201) but didn't lift — only their clickable
+                     siblings (filter pin pills R397, recent rows R143,
+                     legend rows R144) acknowledged cursor entry with a
+                     translate-y. R398 closes the chip-row by extending
+                     the same gesture to the static header chips, gated
+                     on the clickable role so empty chips (which have
+                     no role="button") stay planted at their R205
+                     opacity-50 receded paint. transition-transform
+                     + duration-200 + ease-out + transform-gpu added
+                     alongside existing transition-colors so the lift
+                     and the color tween share rhythm.
+                     Gesture-vocabulary table (post-R398):
+                       recent-signal row  -1 px  (R143)
+                       legend row         -1 px  (R144)
+                       group cluster box  fill+sw lift (R142)
+                       filter pin pills   -1 px  (R397)
+                       chip-row chips     -1 px  (R398, this round)
+                     Empty chips: no lift. Pin-mirror chips: no
+                     conflict (R180 inset double-ring is a box-shadow
+                     not a transform). new data-chip-hover-lift attr
+                     surfaces the lift surface for tests. */
+                  // R414: chip-row chips gain `group` so inner unit
+                  // span brightens via group-hover:opacity-100 — sibling
+                  // 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.
+                  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'
+                      ? 'bg-green-500/10 text-green-300 border-green-500/20 hover:bg-green-500/15 hover:border-green-500/30 hover:-translate-y-px'
                       : 'bg-green-500/10 text-green-300 border-green-500/20'
                   }`}
+                  data-chip-hover-lift={workingCount > 0 ? 'true' : 'false'}
+                  data-chip-group-hover-brighten="true"
                   data-working-chip
                   data-working-chip-aliases={workingAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'working' ? 'true' : 'false'}
@@ -2035,7 +2147,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       pattern: small label spans demote, value stays
                       prominent. data-working-chip-unit exposes the
                       span for tests. */}
-                  {workingCount}<span className="opacity-70" data-working-chip-unit> working</span>
+                  {/* Round 362 / Loop: digit picks up font-semibold
+                      (fw 500 → 600) for within-chip weight tier. The
+                      chip's outer className stays at font-medium (R313
+                      data-weight baseline); the digit overrides to
+                      semibold so it reads heavier than its " working"
+                      unit (which keeps fw 500 + R338 opacity-70).
+                      Joins the R333-R341 chip-internal-hierarchy arc
+                      at the chip-count scope. Sibling edits on the
+                      online + active-links chip digits below. data-
+                      working-chip-digit attr exposes the digit span. */}
+                  <span className="font-semibold transition-[font-weight] duration-200 group-hover:font-bold" data-working-chip-digit>{workingCount}</span><span className="opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-working-chip-unit> working</span>
                 </span>
                 <span
                   // Round 201 / Loop: online chip — mirror of the working
@@ -2049,11 +2171,15 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   /* Round 232 / Loop: tabular-nums on online chip
                      (sibling treatment to working chip — same row,
                      same digit-jitter physics on count crossings). */
-                  className={`tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors duration-200 ${
+                  // R398: hover translate-y lift on clickable variant — see working chip above.
+                  // R414: `group` parent + inner unit span group-hover-brighten — see 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'
+                      ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20 hover:bg-cyan-500/15 hover:border-cyan-500/30 hover:-translate-y-px'
                       : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'
                   }`}
+                  data-chip-hover-lift={onlineNodes.length > 0 ? 'true' : 'false'}
+                  data-chip-group-hover-brighten="true"
                   data-online-chip
                   data-online-chip-aliases={onlineAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'idle' ? 'true' : 'false'}
@@ -2098,7 +2224,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   }}
                 >
                   {/* R337 sibling — online chip unit demotion. */}
-                  {onlineNodes.length}<span className="opacity-70" data-online-chip-unit> online</span>
+                  {/* R362 sibling — online-chip digit gains font-semibold. */}
+                  <span className="font-semibold transition-[font-weight] duration-200 group-hover:font-bold" data-online-chip-digit>{onlineNodes.length}</span><span className="opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-online-chip-unit> online</span>
                 </span>
               </>
             );
@@ -2225,8 +2352,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 title={`${w} working · ${i} idle · ${o} offline`}
                 data-fleet-pressure
               >
-                <span className="text-[10px] tracking-wide">pressure</span>
-                <span className="inline-flex h-1.5 w-16 rounded-full overflow-hidden" style={{ background: 'rgb(75 85 99 / 0.25)' }}>
+                {/* Round 373 / Loop: pressure-bar kicker label gains
+                    font-medium (fw 400 → 500). Sibling small-text fw
+                    lift family with R363 recent-row alias + R364
+                    legend-row label + R366 group-label count + R368
+                    +N more flows footer — extends to a 5th surface
+                    (the chip-row's 'pressure' label). At fontSize
+                    10 px tracking-wide against the chip's gray bg,
+                    the default fw 400 sat below the deliberate-data
+                    band; fw 500 brings it into parity with the
+                    chip-row 'working / online / active links' unit
+                    spans (chip-level font-medium R313). data-fleet-
+                    pressure-kicker attr exposes the kicker for tests. */}
+                <span className="text-[10px] tracking-wide font-medium" data-fleet-pressure-kicker>pressure</span>
+                {/* Round 374 / Loop: pressure-bar height h-1.5 → h-2
+                    (6 → 8 px) — sibling visual-weight bump (8th anchor
+                    in the family):
+                      R287 minimap viewport stroke 1 → 1.5
+                      R295 legend swatch base radius 5.5 → 6
+                      R359 recent-row pip base radius 1.6 → 1.8
+                      R360 hub digit fontSize 11 → 12
+                      R361 edge-badge digit fontSize 10 → 11
+                      R365 hub-highlight base radius 5 → 5.5
+                      R367 edge-badge rest stroke 1 → 1.25
+                      R374 pressure-bar height 1.5 → 2  (this round)
+                    +33 % bar height gives the working/idle/offline
+                    segments more visibility — at h-1.5 the 3-segment
+                    proportion bar was readable but slim; at h-2 the
+                    segments parse cleanly even when one tier is
+                    < 10 % share. Geometry-safe: items-center flex
+                    centers the bar inside the chip's py-1 (4 px top +
+                    4 px bottom) — bar at 8 px stays comfortably
+                    inside the 10-px text-row height. R165 segment
+                    width transitions + R210 brightness hover + R83
+                    pin-mirror box-shadow on segments all preserved
+                    (segments inherit width from parent so the height
+                    bump propagates without segment-side edits).
+                    data-fleet-pressure-bar-height attr exposes the
+                    height token for tests. */}
+                <span className="inline-flex h-2 w-16 rounded-full overflow-hidden" style={{ background: 'rgb(75 85 99 / 0.25)' }} data-fleet-pressure-bar-height="h-2">
                   {seg(w, isLight ? '#059669' : '#22c55e', 'working', 'working')}
                   {seg(i, isLight ? '#0d9488' : '#2dd4bf', 'idle',    'idle')}
                   {seg(o, isLight ? '#94a3b8' : '#6b7280', 'offline', 'offline')}
@@ -2283,7 +2447,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="status"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              // R355: `group` lets the inner opacity-70 spans (prefix
+              // `filter:` + count `· N`) brighten to 100 % on pill hover.
+              // Sibling treatment on group + vendor pills below.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedStatus(null)}
               style={{
@@ -2297,12 +2464,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedStatus}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              {/* Round 412 / Loop: filter pin pill VALUE picks up the
+                  chip-internal-hierarchy arc. Pre-R412 the value span
+                  (pinnedStatus / pinnedGroup / pinnedVendor) inherited
+                  the parent's font-medium (fw=500); prefix and suffix
+                  were opacity-70 label-tier but the VALUE itself sat
+                  at the same baseline weight. R412 wraps the value in
+                  a font-semibold span (fw=600) so the pill now reads
+                  with proper data-tier emphasis — sibling treatment
+                  to R333/R335-R341/R362/R369/R389/R410. data-filter-
+                  value attr surfaces the value span for tests.
+                  4-pill replace family — status / group / vendor / edge. */}
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedStatus}</span><span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear ${pinnedStatus} filter`}
                 onClick={(e) => { e.stopPropagation(); setPinnedStatus(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2321,7 +2513,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="group"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              // R355 sibling — `group` parent + group-hover on inner spans.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedGroup(null)}
               style={{
@@ -2331,12 +2524,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedGroup}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              {/* R412: see status pill above — filter value fw=600 data tier. */}
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedGroup}</span><span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear group filter ${pinnedGroup}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedGroup(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2371,7 +2579,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="vendor"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              // R355 sibling — `group` parent + group-hover on inner spans.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear vendor filter'}
               onClick={() => setPinnedVendor(null)}
               style={{
@@ -2381,12 +2590,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedVendor}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              {/* R412: see status pill above — filter value fw=600 data tier. */}
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span><span className="font-semibold" data-filter-value>{pinnedVendor}</span><span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear vendor filter ${pinnedVendor}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedVendor(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2419,7 +2643,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={link.count}
               data-filter-match-aliases={`${link.from},${link.to}`}
               data-active-filter-edge-hot={isHot ? 'true' : 'false'}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={`${link.from} → ${link.to} (${link.count} msg${link.count === 1 ? '' : 's'}${isHot ? ', hot lane · ≥ 10' : ''}) — click to clear`}
               onClick={() => setPinnedEdgeKey(null)}
               style={{
@@ -2429,9 +2653,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
+              {/* R412: filter pin pill value (edge variant) picks up fw=600.
+                  Sibling treatment to the status/group/vendor pills above. */}
               <span>
                 <span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>
-                {link.from}→{link.to}
+                <span className="font-semibold" data-filter-value>{link.from}→{link.to}</span>
                 {/* Round 323 / Loop: edge filter pill count digit picks
                     up tabular-nums (Tailwind class on both cold +
                     hot branches). Sibling treatment to the status /
@@ -2463,7 +2689,21 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 type="button"
                 aria-label={`Clear edge filter ${link.from} → ${link.to}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedEdgeKey(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2728,9 +2968,35 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        vendor letter chips ('A:N', 'O:N', '书:N',
                        '?:N'). They display vendor-distribution
                        data; same tier as the sibling data chips. */
-                    className="tabular-nums font-medium inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus"
+                    /* Round 401 / Loop: vendor letter chip closes the
+                       hover-lift gesture family at its last unaddressed
+                       interactive HTML surface. R397/R398/R399 lifted
+                       filter pin pills + chip-row chips (working /
+                       online / active-links); R400 lifted standalone
+                       chrome buttons (reset / fullscreen). The vendor
+                       letter chips (A:N / O:N / 书:N / ?:N) are
+                       sibling interactive chips in the same chip-row
+                       — clickable to toggle the vendor filter pin —
+                       but were not yet on the hover-lift family.
+                       R401 closes the gap with hover:-translate-y-px
+                       + transition-transform + transform-gpu added
+                       to the className. The inline transition list
+                       (box-shadow + background-color) keeps eaching
+                       independently — different property axes compose
+                       cleanly. Existing R354 glyph scale-1.1 (inner
+                       span) + R202 chip bg color-mix + R180 pin-mirror
+                       box-shadow + R354 glyph hover transform all
+                       preserved. data-vendor-letter-hover-lift attr
+                       surfaces the lift for tests. */
+                    // R417: `group` parent enables the count suffix to
+                    // brighten on chip hover via group-hover:opacity-100
+                    // — 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"
                     data-vendor-letter={v.initial}
                     data-vendor-letter-count={v.count}
+                    data-vendor-letter-hover-lift="true"
                     data-vendor-pinned={isPinned ? 'true' : 'false'}
                     data-vendor-hovered={hoveredVendor === v.initial ? 'true' : 'false'}
                     data-vendor-aliases={aliases.join(',')}
@@ -2774,7 +3040,64 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       }
                     }}
                   >
-                    <span style={{ color: v.color }}>{v.initial}</span>
+                    {/* Round 354 / Loop: vendor letter glyph scales
+                        1.0 → 1.1 on hover. R88 already dims OTHER
+                        vendors on hover via canvas-wide opacity
+                        masking; R202 added a chip-level bg tint
+                        (color-mix 12 % alpha) so the chip itself
+                        responds. R354 closes the trio with a glyph-
+                        level lift: the focused vendor LETTER actively
+                        rises (transform scale) rather than the chip
+                        merely changing colour. Three layers of positive
+                        feedback on the hovered vendor + canvas-wide
+                        negative feedback on the others — a clean
+                        figure/ground separation.
+
+                        display: inline-block is required for transform
+                        to apply (inline elements ignore transform).
+                        transformOrigin: 'center' so the glyph pivots
+                        around its centre instead of arcing from the
+                        baseline anchor. transition rides the existing
+                        Tailwind 4 transform/scale list (no new
+                        property — Tailwind already lists transform in
+                        the default transition-property set). 200ms
+                        matches the R202 chip bg-tint timing so the
+                        glyph lift and chip background ease in concert. */}
+                    {/* Round 369 / Loop: vendor letter glyph picks up
+                        fontWeight 600 (font-semibold). The glyph is the
+                        vendor identifier — the DATA the operator scans
+                        in this chip (A / O / 书 / C / G / ?). R333 set
+                        the count suffix `:N` to text-gray-400 + tabular-
+                        nums and (via parent inheritance) fw 500. Pre-
+                        R369 the LETTER also inherited fw 500 from the
+                        chip's font-medium — letter and count read at
+                        the same weight, contradicting the data-vs-label
+                        hierarchy the rest of the chip-row already speaks.
+                        R369 lifts the letter to fw 600 so the chip now
+                        reads as the same two-tier pattern R362 closed
+                        on the working / online / active-links chips:
+                          chip      digit/letter  fw 600  (data)
+                          chip      unit/count    fw 500  (label)
+                        Sibling treatment to R362 — extends the R333-R341
+                        chip-internal-hierarchy arc to the vendor-letter
+                        chip surface (9th surface family). R354 transform-
+                        scale-on-hover + R88 canvas-dim-others + R202
+                        chip bg color-mix all preserved on the same span.
+                        data-vendor-letter-glyph-font-weight attr exposes
+                        the value for tests. */}
+                    <span
+                      data-vendor-letter-glyph={v.initial}
+                      data-vendor-letter-glyph-hover={hoveredVendor === v.initial ? 'true' : 'false'}
+                      data-vendor-letter-glyph-font-weight="600"
+                      style={{
+                        color: v.color,
+                        display: 'inline-block',
+                        fontWeight: 600,
+                        transform: hoveredVendor === v.initial ? 'scale(1.1)' : 'scale(1)',
+                        transformOrigin: 'center',
+                        transition: 'transform 200ms ease-out',
+                      }}
+                    >{v.initial}</span>
                     {/* Round 333 / Loop: vendor count suffix `:{N}` joins
                         the R317 subordinate-text-lift family (gray-500 →
                         gray-400) plus picks up tabular-nums for digit
@@ -2787,8 +3110,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         reads it as "deliberate subordinate metadata"
                         rather than near-invisible chrome. data-vendor-
                         letter-count exposes the span for tests. */}
+                    {/* R417: count suffix opacity-70 + group-hover:
+                        opacity-100 brightens on chip hover. Inner-span
+                        hover-brighten family (3rd anchor) — sibling to
+                        R355 filter pill prefix/suffix and R414 chip-row
+                        unit. Effective shade at rest: text-gray-400 ×
+                        70 % alpha; on hover: full gray-400. The label-
+                        tier-vs-glyph differentiation persists on hover
+                        since the glyph (R369 fw=600) stays at full
+                        opacity. R333 :{count} format preserved. */}
                     <span
-                      className="text-gray-400 tabular-nums"
+                      className="text-gray-400 tabular-nums opacity-70 transition-opacity duration-200 group-hover:opacity-100"
                       data-vendor-letter-count-suffix
                     >:{v.count}</span>
                   </span>
@@ -2876,11 +3208,36 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    (third chip in the row — matches working + online
                    chip treatment so all three digits in the chip row
                    stay width-stable across counter crossings). */
-                className={`tabular-nums font-medium hidden sm:inline px-2.5 py-1 rounded-md border anet-topo-chip-focus ${
+                /* Round 399 / Loop: active-links chip closes the 3-chip
+                   chip-row by extending R398's hover translateY(-1px)
+                   lift onto the third (rightmost) chip. The R398 family
+                   already covered working + online chips on the
+                   clickable variant; R399 adds the same gate (isInter-
+                   active = flowLinks.length > 0) so empty active-links
+                   stays planted at R206's opacity-50 receded paint.
+                   transition-transform + ease-out + transform-gpu join
+                   the inline transition list (different property axes
+                   compose cleanly: inline handles color/bg/border/
+                   opacity, className handles transform).
+                   Gesture-vocabulary table (post-R399 — now complete
+                   across the chip-row):
+                     working chip      -1 px  (R398)
+                     online chip       -1 px  (R398)
+                     active-links chip -1 px  (R399, this round)
+                     filter pin pills  -1 px  (R397)
+                     recent-signal row -1 px  (R143)
+                     legend row        -1 px  (R144)
+                   Every interactive chip in TopoGraph lifts on hover.
+                   data-chip-hover-lift attr exposes the lift surface
+                   state ('true' clickable, 'false' empty) for tests. */
+                // R414: `group` parent + inner unit span group-hover-brighten — see working chip above.
+                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'
+                    ? 'bg-gray-500/10 text-gray-400 border-gray-500/20 hover:bg-cyan-500/10 hover:text-cyan-200 hover:border-cyan-500/30 hover:-translate-y-px'
                     : 'bg-gray-500/10 text-gray-400 border-gray-500/20'
                 }`}
+                data-chip-hover-lift={isInteractive ? 'true' : 'false'}
+                data-chip-group-hover-brighten="true"
                 data-active-links-chip
                 data-active-links-flow-count={flowLinks.length}
                 data-active-links-clickable={isInteractive ? 'true' : 'false'}
@@ -2908,7 +3265,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     the 5th chip surface in the R333/R335/R336/R337
                     chip-internal-hierarchy arc. data-active-links-
                     chip-unit exposes the unit span for tests. */}
-                {flowLinks.length}<span className="opacity-70" data-active-links-chip-unit> active link{flowLinks.length === 1 ? '' : 's'}</span>
+                {/* R362 sibling — active-links chip digit gains font-semibold. */}
+                <span className="font-semibold transition-[font-weight] duration-200 group-hover:font-bold" data-active-links-chip-digit>{flowLinks.length}</span><span className="opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-active-links-chip-unit> active link{flowLinks.length === 1 ? '' : 's'}</span>
                 {rel ? (() => {
                   // Round 161 / Loop: extend R160's recency-pip
                   // vocabulary up one scope — from per-flow row to
@@ -2933,8 +3291,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const alpha = ageSec <= 30
                     ? 1
                     : ageSec <= 300
-                      ? 1 - ((ageSec - 30) / 270) * 0.75
-                      : 0.25;
+                      ? 1 - ((ageSec - 30) / 270) * 0.70 /* R358: floor 0.25 → 0.30 lift across 3 freshness scopes */
+                      : 0.30; /* R358: stale floor lifted 0.25 → 0.30 — 20% legibility bump while preserving fresh/stale ratio */
                   // Cyan dark / teal light to match palette legendAccent.
                   const dotColor = isLight
                     ? `rgba(13, 148, 136, ${alpha.toFixed(2)})`
@@ -2951,7 +3309,28 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // color: dotColor — the lift only affects the trailing
                   // literal "last {rel}" text.
                   return (
-                    <span className="text-gray-400">
+                    // Round 357 / Loop: active-links chip freshness
+                    // suffix wrapper picks up `tabular-nums` for digit
+                    // width-lock. Pre-R357 the literal "last {rel}"
+                    // text (e.g. "last 5s ago", "last 10s ago",
+                    // "last 1m ago") had natural-figure digits — the
+                    // freshness ticker updates every second, so the
+                    // 9→10 boundary on the seconds counter and the
+                    // 59→60s → 1m flip both jittered ~1-2 px of glyph
+                    // width which propagated through the chip-row's
+                    // inline-flex layout, nudging the freshness DOT
+                    // and the chip's left edge. Tabular-nums on the
+                    // wrapper applies to all descendant digits only
+                    // (letters render at natural widths) so the
+                    // ticker stays planted across every count cross.
+                    // Joins the R224-R232 info-density tabular-nums
+                    // sweep at the chip-row freshness scope. Pure
+                    // paint-level change, no geometry shift on rest.
+                    // The R342 text-gray-400 lift + R161 dot freshness
+                    // alpha ramp + R317 subordinate-text-lift family
+                    // all preserved. data-active-links-freshness-
+                    // wrapper attr exposes the wrapper for tests.
+                    <span className="text-gray-400 tabular-nums" data-active-links-freshness-wrapper>
                       <span
                         data-active-links-freshness-dot
                         data-active-links-freshness-alpha={alpha.toFixed(2)}
@@ -3615,19 +3994,174 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  active surfaces the activity state for test probes
                  (active spokes don't carry the bucket/dur attrs so
                  they need their own data anchor). */
+              // Round 382 / Loop: hub-spoke path picks up
+              // strokeLinecap='round'. Sibling polish to R378 flow-
+              // rail dashes + R380 group box dashes — three dashed-
+              // stroke surfaces now share 'round' linecap:
+              //   R378 flow-rail   '2 12'  -> soft 3-px pills
+              //   R380 group box   '6 6'   -> soft 7.5-px pills
+              //   R382 hub spoke   '6 14'  -> soft 7-px pills (this round)
+              // For idle spokes (dashed at sw=1), each 6-px dash gains
+              // 0.5-px round caps and reads as a soft pill instead of
+              // a sharp 6 x 1 rectangle. Active spokes (solid, no
+              // dasharray) have caps mostly hidden by the hub center +
+              // node radius. Geometry-safe; paint-only. R51 sentinel
+              // strokeWidth 1.5/3 untouched (idle=1, active=2). data-
+              // topo-hub-spoke-linecap attr exposes the value for tests.
+              // Round 419 / Loop: hub-spoke idle opacity 0.45 → 0.50.
+              // Stale-state legibility lift family 9th anchor — pairs
+              // with R391 (active 0.7 → 0.8) and R415 (active sw 2 →
+              // 2.25) so the same spoke path is now polished on BOTH
+              // active AND idle tiers. Pre-R419 idle spokes painted
+              // at α=0.45 with R46 anet-topo-spoke-flow dashed
+              // animation; the dashed pulses sat at the "background
+              // chatter" floor — visible but understated. R419
+              // lifts to 0.50 so idle spokes read more confidently
+              // while the active/idle contrast ratio stays clear
+              // (0.8/0.50 = 1.6× vs prior 0.8/0.45 = 1.78×; still
+              // a sharp two-tier distinction).
+              // Stale-state legibility lift family (9 anchors now):
+              //   R317 subordinate-text gray-500 → gray-400
+              //   R358 freshness floor 0.25 → 0.30
+              //   R372 minimap offline-dot 0.5 → 0.6
+              //   R404 hub-halo cyber trough 0.08 → 0.10
+              //   R405 hub-halo light trough 0.32 → 0.34
+              //   R406 edge freshness floor 0.35 → 0.40
+              //   R407 node halo offline opacity (cyber + light)
+              //   R413 active-node pulse trough (cyber + light)
+              //   R419 hub-spoke idle opacity 0.45 → 0.50 (this round)
+              // data-topo-hub-spoke-opacity attr (R391) updates to
+              // surface the resolved per-state value.
+              //
+              // Round 415 / Loop: hub-spoke active strokeWidth 2 → 2.25.
+              // Pairs with R391 (active opacity 0.7 → 0.8) so the same
+              // active-state path lifts BOTH stroke weight AND opacity
+              // in concert. Pre-R415 active strokes sat at sw=2 — clear
+              // step over idle sw=1, but a touch lighter than the
+              // weight family's other "active" indicators (R385 hub
+              // hover-ring sw=1.75 / R402 legend pin-ring sw=1.75 /
+              // R367 edge-badge rest sw=1.25). R415 bumps to 2.25 so
+              // the active spoke reads with proportional weight to its
+              // role — the line connecting the focal point to the
+              // active node deserves the heaviest active stroke in the
+              // family (after pin/hot edge-badge sw=2). Stays clear of
+              // R51 sentinels (1.5 / 3) at 2.25.
+              // Visual-weight bump family (14 anchors now):
+              //   R287 minimap viewport stroke    1   → 1.5
+              //   R295 legend swatch radius       5.5 → 6
+              //   R359 recent-row pip radius      1.6 → 1.8
+              //   R360 hub digit fontSize         11  → 12
+              //   R361 edge-badge digit fontSize  10  → 11
+              //   R365 hub-highlight radius       5   → 5.5
+              //   R367 edge-badge rest stroke     1   → 1.25
+              //   R374 pressure-bar height        1.5 → 2
+              //   R383 recent-row pip radius      1.8 → 2.0
+              //   R384 minimap online dot         1.7 → 1.9
+              //   R385 hub hover-ring stroke      1.5 → 1.75
+              //   R402 legend pin-ring stroke     1.5 → 1.75
+              //   R408 hub-halo radius            18  → 20
+              //   R415 hub-spoke active stroke    2   → 2.25  (this round)
+              // R382 strokeLinecap='round' + R391 opacity 0.45/0.8 +
+              // R51-safe idle sw=1 all preserved. 250ms transition
+              // list already covers stroke-width — the new tier eases
+              // naturally. data-topo-hub-spoke-stroke-width-active
+              // attr surfaces the active value for tests.
+              //
+              // Round 391 / Loop: hub-spoke active opacity 0.7 → 0.8.
+              // Pre-R391 active spokes (the spoke connecting the hub
+              // to the currently-active alias — hovered or pinned)
+              // lifted opacity from rest 0.45 to active 0.7 — a clear
+              // step but slightly understated against the canvas
+              // chrome. R391 lifts active to 0.8 so the "this spoke
+              // connects to your active node" signal reads with
+              // matching weight to the R370 hub hover-ring opacity
+              // (0.7 → 0.8 cyber) — paired canvas signals now share
+              // the same active-state alpha (0.8) so when a user
+              // hovers a node, both the spoke and the hub-ring lift
+              // to identical opacity. Rest 0.45 invariant preserved.
+              // Theme-consistency / canvas-presence polish family
+              // (6th anchor):
+              //   R370 hub hover-ring opacity      0.7  → 0.8   cyber
+              //   R371 edge-badge rest opacity     0.82 → 0.85  cyber
+              //   R372 minimap offline-dot opacity 0.5  → 0.6
+              //   R386 hub-highlight idle opacity  0.9  → 0.95
+              //   R387 hover-detail panel opacity  0.94 → 0.97  cyber
+              //   R391 hub-spoke active opacity    0.7  → 0.8   (this round)
+              // Idle path (45% alpha + dashed flow animation) entirely
+              // untouched — R391 is an active-state-only lift.
+              // data-topo-hub-spoke-opacity attr exposes the resolved
+              // value for tests. R382 strokeLinecap='round' + R51
+              // sentinel-safe sw (1 idle / 2 active) preserved.
+              /* Round 430 / Loop: hub-spoke opacity hover lift on
+                 hoveredAlias === session.alias. Adds a "this node's
+                 spoke" affordance to the node-hover gesture — in a
+                 dense ring layout the spokes are visually quiet
+                 (idle α=0.50 dashed, active α=0.80 solid) so hovering
+                 a node didn't telegraph which line connects to it.
+                 R430 lifts the matched spoke's opacity:
+                   idle    0.50 → 0.70   (hover-α=0.70, +0.20)
+                   active  0.80 → 0.95   (hover-α=0.95, +0.15)
+                 The +0.15-to-0.20 lift keeps the active/idle two-tier
+                 distinction (0.95 vs 0.70 still a clear gap) while
+                 making the hovered-node's spoke visibly brighter than
+                 every other spoke at its own activity tier. R241
+                 transition list already covers opacity 250ms so the
+                 lift eases for free. Sibling to R429 label-card body
+                 solidity lift — both surface a single-node-focused
+                 attention cue with the same easing cadence.
+                 Stacks with the 6-layer node hover cue stack at the
+                 inter-node-link scope:
+                   R26  group translateY -2px           (per-node)
+                   R217 stroke tint legendAccent        (per-node card)
+                   R142 drop-shadow boost               (per-node card)
+                   R427 alias letter-spacing            (per-node text)
+                   R428 sub-text letter-spacing         (per-node text)
+                   R429 body opacity 0.94 → 1.0         (per-node card)
+                   R430 spoke opacity α+ (this round)   (link to hub)
+                 data-topo-hub-spoke-hovered exposes the gate. */
+              const isHoveredSpoke = !reducedMotion && hoveredAlias === session.alias;
+              const spokeOpacity = isActiveSpoke
+                ? (isHoveredSpoke ? 0.95 : 0.80)
+                : (isHoveredSpoke ? 0.70 : 0.50);
+              /* Round 435 / Loop: hub-spoke stroke-width hover lift —
+                 sibling to R430 opacity hover at the same surface. When
+                 hoveredAlias matches, BOTH opacity AND stroke-width
+                 lift on the matched spoke so the eye registers a
+                 2-axis "this node's spoke" gesture (paint + geometry).
+                   idle    1.00 → 1.25  (Δ +0.25, +25%)
+                   active  2.25 → 2.50  (Δ +0.25, +11%)
+                 Same +0.25 absolute delta keeps the idle/active visual
+                 progression consistent — at rest sw ratio 2.25:1 = 2.25,
+                 on hover 2.50:1.25 = 2.0; both still clearly two-tier.
+                 R241 transition list already covers stroke-width 250ms
+                 so the lift eases for free.
+                 R51 sentinel-safe: spoke is canvas <path>, not
+                 data-node <circle> (the sentinel selector is gated to
+                 g[data-node] descendants). 1.25 and 2.5 are not in the
+                 reserved {1.5, 3} set so the overlap-test sentinel
+                 attribute selector wouldn't match either way. */
+              const spokeStrokeWidth = isActiveSpoke
+                ? (isHoveredSpoke ? 2.5 : 2.25)
+                : (isHoveredSpoke ? 1.25 : 1);
               return (
                 <path
                   key={`hub-${session.alias}`}
                   d={path}
                   fill="none"
                   stroke={isActiveSpoke ? pal.spokeStroke.active : pal.spokeStroke.idle}
-                  strokeWidth={isActiveSpoke ? 2 : 1}
+                  strokeWidth={spokeStrokeWidth}
                   strokeDasharray={isActiveSpoke ? 'none' : '6 14'}
-                  opacity={isActiveSpoke ? 0.7 : 0.45}
+                  strokeLinecap="round"
+                  opacity={spokeOpacity}
                   className={isActiveSpoke ? undefined : 'anet-topo-spoke-flow'}
                   data-topo-spoke-bucket={isActiveSpoke ? undefined : busy}
                   data-topo-spoke-dur={isActiveSpoke ? undefined : spokeDur}
                   data-topo-hub-spoke-active={isActiveSpoke ? 'true' : 'false'}
+                  data-topo-hub-spoke-hovered={isHoveredSpoke ? 'true' : 'false'}
+                  data-topo-hub-spoke-opacity={spokeOpacity}
+                  data-topo-hub-spoke-stroke-width={spokeStrokeWidth}
+                  data-topo-hub-spoke-stroke-width-active="2.25"
+                  data-topo-hub-spoke-linecap="round"
                   style={{
                     transition: 'stroke 250ms ease-out, stroke-width 250ms ease-out, opacity 250ms ease-out',
                     ...(isActiveSpoke ? {} : {
@@ -3719,7 +4253,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={(isPinned || isHovered) ? pal.legendAccent : pal.ringStroke}
                   strokeWidth={isPinned ? 3 : isHovered ? 2 : 1.5}
                   strokeDasharray={(isPinned || isHovered) ? 'none' : '6 6'}
+                  /* Round 380 / Loop: cluster box stroke gets round
+                     linecap + round linejoin. Sibling SVG stroke-
+                     softening polish to R378 flow-rail linecap + R379
+                     minimap viewport linejoin — extends the family to
+                     the group cluster boundary box (grid layout only):
+                       R288 chrome icons         strokeLinecap='round'
+                       R378 flow-rail dashes     strokeLinecap='round'
+                       R380 group box dashes     strokeLinecap='round' (this round)
+                       R379 viewport rect        strokeLinejoin='round'
+                       R380 group box corners    strokeLinejoin='round' (this round)
+                     Linecap rounds the R85 '6 6' marching-ants dash
+                     pills at rest — each 6 px dash gains a ~0.75 px
+                     round cap (sw=1.5 idle), reading as soft pills
+                     instead of sharp 6 × 1.5 px rectangles. Linejoin
+                     rounds the 4 sharp 90° corners (any state — solid
+                     or dashed); at sw=1.5 the join arc is ~0.75 px,
+                     matching R379 viewport vocabulary. Geometry-safe:
+                     stroke-* properties only affect paint, not bbox.
+                     The R51 sentinel 1.5/3 strokeWidth values stay
+                     intact (the overlap probe is gated to g[data-
+                     node], so this cluster-internal rect is invisible
+                     to it anyway). data-group-box-linecap + -linejoin
+                     attrs expose the values for tests. */
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                   data-group-box-pinned={isPinned ? 'true' : 'false'}
+                  data-group-box-linecap="round"
+                  data-group-box-linejoin="round"
                   // R85: ambient "marching ants" drift on the perimeter
                   // when this group has at least one working member, and
                   // neither pin nor hover is active (those treatments
@@ -3876,6 +4437,32 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     matches R142 fill timing so all the group-label
                     state-flip channels (fill colour, rect stroke,
                     rect drop-shadow, label tracking) ease as one. */}
+                {/* Round 432 / Loop: extend the group-label letter-
+                    spacing tween from 2-tier (rest/pin) to 3-tier
+                    (rest/hover/pin → 0/0.25/0.5). Pre-R432 R218
+                    spread the text only on pin; hover got an
+                    R63 fill brighten (legendText → legendHeadline)
+                    but no typographic axis of its own. R432 adds
+                    the missing mid tier so hover telegraphs through
+                    BOTH the fill brighten AND a subtle kerning
+                    spread — sibling pattern to R427 node-alias
+                    (0/0.3/0.5) and R431 edge-badge (0/0.2/0.4) at
+                    group-label scope. Pin tier (0.5) still wins.
+                    Subtler mid tier (0.25 vs alias 0.3) because the
+                    group label is a structural anchor — too much
+                    spread would steal weight from the per-node
+                    alias identity it groups. Hover-letter-spacing
+                    family extension (8 anchors now):
+                      R344 chip count digit
+                      R345 panel title
+                      R347 active-links chip
+                      R351 vendor chip
+                      R420 zoom-level chip
+                      R427 node alias text
+                      R431 edge-badge digit
+                      R432 group label text (this round)
+                    R218 transition list ('fill 200ms, letter-spacing
+                    200ms') untouched — additive conditional case. */}
                 <text
                   x={box.x + 12}
                   y={box.y + 14}
@@ -3883,9 +4470,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   fontSize="13"
                   fontFamily="monospace"
                   fontWeight="700"
+                  data-group-label-hovered={isHovered && !isPinned ? 'true' : 'false'}
                   style={{
                     transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
-                    letterSpacing: isPinned ? '0.5px' : '0px',
+                    letterSpacing: isPinned ? '0.5px' :
+                                   isHovered ? '0.25px' : '0px',
                   }}
                   data-group-label={box.key}
                   data-group-label-pinned={isPinned ? 'true' : 'false'}
@@ -3919,12 +4508,33 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       lives at a fixed dx=6 offset from the name, so a
                       digit-width jitter at 9→10 used to shift the
                       whole count visibly. Tabular locks it. */}
+                  {/* Round 366 / Loop: group label member-count tspan
+                      fontWeight 400 → 500. Sibling polish to R363
+                      recent-row alias text fw 400 → 500 + R364 legend-
+                      row label fw 400 → 500 — closes the per-row 'count
+                      is fw 500 against label-tier fw 700' pattern at
+                      the group-label scope (grid layout cluster mark).
+                      Hierarchy snapshot post-R366 across all 3 row
+                      surfaces:
+                        recent  count(hot/cold)  fw 700/600  (R320)
+                        recent  alias            fw 500      (R363)
+                        legend  count            fw 600      (R309)
+                        legend  label            fw 500      (R364)
+                        group   name             fw 700      (legacy)
+                        group   count            fw 500      (R366, this round)
+                      Monospace family + R225 tabular-nums lock digit
+                      width, so the fw bump is paint-only — bbox
+                      unchanged + overlap-test invariants hold. R229
+                      fill-inherit from parent label (hover-deepen-own-
+                      hue family) preserved. data-group-label-count-
+                      font-weight attr exposes the value for tests. */}
                   <tspan
                     dx="6"
                     fontSize="11"
-                    fontWeight="400"
+                    fontWeight="500"
                     data-group-label-count={box.key}
                     data-group-label-count-value={box.count}
+                    data-group-label-count-font-weight="500"
                     style={{ fontVariantNumeric: 'tabular-nums' }}
                   >· {box.count}</tspan>
                   {/* Round 58 / Loop: status mix pip strip. Compact text-
@@ -4055,13 +4665,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // synchronised per-edge animation set.
             const stagger = (index * 0.37) % duration;
             // Round 10 / Loop: freshness fade. An edge that fired ≤30s ago
-            // stays at full intensity; over 5 minutes it decays to ~35%.
-            // Surfaces "what's happening now" vs background chatter without
-            // hiding old flow entirely (some context still useful). `now`
-            // captured at useMemo-recompute time (every 5s message refresh)
-            // — accuracy is within the poll interval, plenty.
+            // stays at full intensity; over 5 minutes it decays to a
+            // floor. Surfaces "what's happening now" vs background
+            // chatter without hiding old flow entirely (some context
+            // still useful). `now` captured at useMemo-recompute time
+            // (every 5s message refresh) — accuracy is within the poll
+            // interval, plenty.
+            //
+            // Round 406 / Loop: edge freshness fade floor 0.35 → 0.40.
+            // Stale-state legibility lift family (6th anchor) — pre-
+            // R406 edges older than 5 minutes faded to α=0.35 (a 65 %
+            // dim against full intensity). The decay rate is the same
+            // 1 - ageMs/300s curve; only the FLOOR shifts. Sibling
+            // treatment to:
+            //   R317 subordinate-text gray-500 → gray-400
+            //   R358 freshness ramp floor 0.25 → 0.30
+            //   R372 minimap offline-dot opacity 0.5 → 0.6
+            //   R404 hub-halo cyber trough 0.08 → 0.10
+            //   R405 hub-halo light trough 0.32 → 0.34
+            //   R406 edge freshness floor 0.35 → 0.40 (this round)
+            // Edges past 5min now sit at 40% intensity instead of 35%
+            // — they still recede against fresh edges but read
+            // legibly enough to convey "this conversation existed".
+            // ageMs threshold for the 5-minute decay unchanged; the
+            // decay curve shape (linear) unchanged. The visual delta
+            // is most pronounced on edges between 5-60 minutes old —
+            // where the floor was binding pre-R406.
             const ageMs = link.last_at ? Math.max(0, Date.now() - Date.parse(link.last_at)) : 0;
-            const fresh = Math.max(0.35, 1 - ageMs / (5 * 60 * 1000));
+            const fresh = Math.max(0.40, 1 - ageMs / (5 * 60 * 1000));
             // Round 16 arrow-tier binning — keep `topo-arrow` as the
             // medium tier id so the legend swatch picks it up unchanged.
             const arrowId = link.count <= 2 ? 'topo-arrow-s'
@@ -4126,7 +4757,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // tracks it even at low message counts (width was 3 → 4.5 on
             // hover). 1.4× is enough to read as "lifted" without
             // breaching the 16-px hitbox bound.
-            const renderWidth = isHoveredEdge ? Math.min(width * 1.4, 10) : width;
+            // Round 436 / Loop: extend the thickening to the
+            // "hovered-endpoint" case — when hoveredAlias matches one
+            // of this edge's endpoints, lift width by 1.15× (capped at
+            // 8 px to stay clear of the 16-px hitbox). Pre-R436 the
+            // edgeOpacityMul=1.7 (line 4703) lifted the matched edge's
+            // OPACITY when an endpoint was hovered but the stroke-WIDTH
+            // stayed at base — so the edge faded brighter without
+            // thickening, leaving the paint+geometry axes mismatched.
+            // Mirror of R430/R435 hub-spoke pattern (opacity + stroke-
+            // width co-lift on hoveredAlias); R436 brings the same
+            // dual-axis "this node's link" gesture to the edge scope.
+            // 1.15× is subtler than isHoveredEdge=1.4× because
+            // endpoint-hover lifts MANY edges at once (every edge
+            // incident on the hovered node) while edge-hover lifts ONE
+            // — the gesture should read as "highlighted" not "loud".
+            // R166 stroke-width 300ms transition already in the
+            // visible-path style list so the lift eases for free.
+            const isEndpointHoveredEdge = !!hoveredAlias && (link.from === hoveredAlias || link.to === hoveredAlias);
+            const renderWidth = isHoveredEdge ? Math.min(width * 1.4, 10)
+                              : isEndpointHoveredEdge ? Math.min(width * 1.15, 8)
+                              : width;
             return (
               <g
                 key={link.key}
@@ -4213,30 +4864,89 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     online chips to splice in additional properties
                     beside Tailwind's). data-edge-flow-rail attr
                     surfaces the path for test introspection. */}
+                {/* Round 381 / Loop: edge visible flow path picks up
+                    strokeLinecap='round'. Sibling polish to R378
+                    flow-rail dashed linecap — both flow-element paths
+                    (visible primary + dashed secondary rail) now share
+                    'round' linecap vocabulary. The visible path runs
+                    source-node → dest-node as one continuous line, so
+                    the dest-end is covered by the markerEnd arrow and
+                    the source-end usually sits inside the source-node
+                    circle. At certain alignments (post-zoom, post-
+                    layout-switch transitions), the source-end may peek
+                    out by a fraction of a px past the node edge —
+                    round caps render that overshoot as a smooth half-
+                    disc instead of a sharp rectangle. Pure paint
+                    refinement, geometry-safe (bbox of the stroke
+                    unchanged at the join with the arrow marker).
+                    data-edge-visible-linecap attr exposes the value
+                    for tests. */}
                 <path
                   d={path}
                   fill="none"
                   stroke={pal.flowEdge}
                   strokeWidth={renderWidth}
+                  strokeLinecap="round"
                   opacity={Math.min(1, (isLight ? 0.22 : 0.28) * fresh * edgeOpacityMul)}
                   filter={isLight ? undefined : 'url(#topo-glow)'}
                   markerEnd={`url(#${arrowId})`}
                   data-edge-visible={link.key}
+                  data-edge-visible-linecap="round"
+                  data-edge-visible-endpoint-hovered={isEndpointHoveredEdge ? 'true' : 'false'}
+                  data-edge-visible-stroke-width={renderWidth}
                   style={{
                     pointerEvents: 'none',
                     transition: 'opacity 300ms ease-out, stroke-width 300ms ease-out, stroke 300ms ease-out',
                   }}
                 />
+                {/* Round 378 / Loop: edge flow-path dashed-rail picks
+                    up strokeLinecap='round'. Pre-R378 the rail
+                    rendered '2 12' dashes as sharp 1×2 rectangles
+                    against the canvas backdrop; default 'butt' caps
+                    leave dash ends square. R378 rounds each cap so
+                    the dashes read as soft 3-px pills (1 px stroke +
+                    0.5 px round cap each end). The flow-rail is the
+                    secondary 'invisible-spine' line that gives the
+                    R57 spoke flow a directional rail to slide along
+                    — rounding the dashes softens its presence
+                    against the primary visible flow path (R245 has
+                    no strokeLinecap so it inherits 'butt' on a
+                    continuous line, irrelevant). Geometry-safe:
+                    round caps only widen the visible dash; the
+                    bbox of the path is unchanged so overlap-test
+                    invariants hold. data-edge-flow-rail-linecap
+                    attr exposes the value for tests. */}
                 <path
                   id={`flow-path-${index}`}
                   d={path}
                   fill="none"
                   stroke={pal.flowPath}
-                  strokeWidth="1"
+                  /* Round 437 / Loop: flow-rail strokeWidth hover lift —
+                     1 → 1.5 on (isHoveredEdge || isEndpointHoveredEdge).
+                     Pre-R437 the dashed rail sat at sw=1 always while the
+                     visible flow path above it lifted (R50 ×1.4 on
+                     isHoveredEdge / R436 ×1.15 on isEndpointHoveredEdge).
+                     The two edge paint layers were mismatched on hover:
+                     top layer thickened, underline stayed thin — so the
+                     hover gesture lifted only half the edge surface.
+                     R437 lifts the underline too so the whole edge
+                     reads as "raised" on hover, not just its bright
+                     top stripe. Same +0.5 absolute delta R435 used at
+                     hub-spoke scope (1→1.25 there, slightly bigger
+                     here because the rail's base 1 is at the kerning
+                     floor and needs more lift to register).
+                     Transition list extends to include stroke-width
+                     300ms so the new lift eases under the same R166
+                     cadence as the visible path's stroke-width. */
+                  strokeWidth={(isHoveredEdge || isEndpointHoveredEdge) ? 1.5 : 1}
                   strokeDasharray="2 12"
+                  strokeLinecap="round"
                   opacity={Math.min(1, (isLight ? 0.4 : 0.75) * fresh * edgeOpacityMul)}
                   data-edge-flow-rail={link.key}
-                  style={{ transition: 'opacity 300ms ease-out, stroke 300ms ease-out' }}
+                  data-edge-flow-rail-linecap="round"
+                  data-edge-flow-rail-stroke-width={(isHoveredEdge || isEndpointHoveredEdge) ? 1.5 : 1}
+                  data-edge-flow-rail-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
+                  style={{ transition: 'opacity 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out' }}
                 />
                 {!reducedMotion && (
                   /* Round 103 / Loop: phase-stagger the particles so
@@ -4251,25 +4961,40 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      multiple). Edge order is stable (sorted by recent
                      activity), so the offsets feel calm rather than
                      reshuffling each refresh. */
+                  /* Round 422 / Loop: edge flow particle radius 4 → 4.5.
+                     Visual-weight bump family (15th anchor) — particles
+                     riding along the edge animateMotion path get +0.5px
+                     radius lift, increasing visual area by ~27%
+                     (π·4.5² / π·4² = 1.27). Sibling magnitude to R383
+                     recent-row pip 1.8 → 2.0 (+25% area), R384 minimap
+                     online dot 1.7 → 1.9 (+25% area). R251 fill +
+                     R252 transitions + R103 phase-stagger animateMotion
+                     all preserved. data-edge-particle-radius attr
+                     exposes the value for tests. */
                   <circle
-                    r="4"
+                    /* 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}
-                    /* 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`}
@@ -4600,14 +5325,137 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           R251 closes the per-edge surface theme-toggle
                           smoothness — every theme-driven property on
                           every edge element now eases under cyber↔light. */}
+                      {/* Round 367 / Loop: edge midpoint badge rest
+                          stroke-width 1 → 1.25. Sibling visual-weight
+                          bump family (7th canvas anchor now):
+                            R287 minimap viewport stroke 1 → 1.5
+                            R295 legend swatch base radius 5.5 → 6
+                            R359 recent-row pip base radius 1.6 → 1.8
+                            R360 hub digit fontSize 11 → 12
+                            R361 edge-badge digit fontSize 10 → 11
+                            R365 hub-highlight base radius 5 → 5.5
+                            R367 edge-badge rest stroke 1 → 1.25 (this round)
+                          Cold edge badges gain ~25 % stroke presence
+                          (1.25/1.0 = 1.25). Stays clear of the R51
+                          overlap-test sentinel values (1.5 / 3 reserved
+                          for node strokes — the test selector is gated
+                          to g[data-node] ancestors so this edge-internal
+                          circle is invisible to that probe anyway, but
+                          1.25 is a safe non-sentinel value regardless).
+                          R188 transition list 'stroke-width 300ms ease-
+                          out' still smoothes the hot/pin flip — now
+                          1.25 → 2 instead of 1 → 2, same ease pace.
+                          data-edge-badge-stroke-width-rest exposes the
+                          new baseline for tests. */}
+                      {/* Round 371 / Loop: edge-badge cyber opacity 0.82
+                          → 0.85. Sibling theme-consistency polish to R370
+                          hub hover-ring 0.7 → 0.8. R251 designed this
+                          badge with opacity 0.82 (cyber) / 0.95 (light)
+                          — 13 % delta. Cyber-theme dark bg needs more
+                          alpha to read as 'present'; R371 narrows the
+                          gap to 10 %, bringing the badge closer to light
+                          theme's 0.95 floor. Light stays at 0.95
+                          (already in the legibility band). data-edge-
+                          badge-opacity attr exposes the resolved value.
+                          Theme-consistency polish family:
+                            R246/R247  panel transition family
+                            R251       edge badge fill/opacity baseline
+                            R370       hub hover-ring cyber 0.7 → 0.8
+                            R371       edge badge cyber 0.82 → 0.85 (this round)
+                          R164 r=9/10.5 hover-lift + R188/R251 transition
+                          list + R367 strokeWidth=1.25 cold rest preserved. */}
+                      {/* Round 394 / Loop: edge-badge gains a hover
+                          strokeWidth tier (1.5) between cold rest
+                          (R367 1.25) and pin/hot (2). Pre-R394 the
+                          badge lifted only its radius on hover (R164
+                          9 → 10.5); the stroke stayed at cold rest
+                          1.25 unless pin/hot kicked in, so a plain
+                          hover felt half-lifted — geometry expanded
+                          while the contour stayed thin. R394 adds
+                          strokeWidth=1.5 on isHoveredEdge so hover
+                          now lifts both r AND stroke in concert —
+                          same pattern R385 used for the hub hover-
+                          ring (1.5 → 1.75) where the ring's three
+                          hover axes (r grow / opacity fade-in /
+                          stroke thicken) all rise together.
+                          Three-tier stroke hierarchy now:
+                            cold rest          1.25  (R367)
+                            hovered            1.5   (R394 — this round)
+                            pinned / hot       2.0   (R188)
+                          R51 sentinel concern: strokeWidth=1.5 is
+                          one of the two sentinels reserved for node
+                          detection, but the R51 selector is gated
+                          to `g[data-node]` ancestors so this edge-
+                          internal circle is invisible to the probe
+                          (same lesson R177 hub hover-ring + R367
+                          cold rest documented). 300ms strokeWidth
+                          transition already in the style list eases
+                          the new tier naturally. data-edge-badge-
+                          stroke-width-hover attr exposes the hover
+                          value for tests. */}
+                      {/* Round 395 / Loop: edge-badge gains a third
+                          hover axis — opacity 0.85 (cyber) / 0.95
+                          (light) → 1.0 on isHoveredEdge. Pre-R395
+                          hovering thickened the stroke (R394 1.25 →
+                          1.5) and grew the radius (R164 9 → 10.5)
+                          but the badge's translucency stayed put at
+                          R371's rest alpha (cyber 0.85 / light 0.95).
+                          R395 lifts hover to a clean 1.0 — fully
+                          opaque — so the hovered badge reads as
+                          "in focus" against the dim siblings.
+                          Three-axis hover-lift parity now complete:
+                            hub hover-ring (R177/R370/R385):
+                              r 14 → 17, opacity 0 → 0.8 cyber, sw 1.5 → 1.75
+                            edge badge (R164/R394/R395):
+                              r 9 → 10.5, sw 1.25 → 1.5, opacity → 1.0
+                          200ms opacity transition (already in the
+                          style list) eases the new axis naturally.
+                          R371 rest opacity (0.85 cyber / 0.95 light)
+                          preserved as the resting alpha — R395
+                          adds an isHoveredEdge override on top.
+                          data-edge-badge-opacity-hover attr exposes
+                          the hover value for tests. */}
+                      {/* Round 396 / Loop: extend the R395 opacity → 1.0
+                          lift to the pinned state. Pre-R396 the badge
+                          shared `r=10.5` on both hover AND pin (R164
+                          unified-lift) but R395's opacity lift fired
+                          ONLY on isHoveredEdge — pinned badges stayed
+                          at R371 rest alpha (cyber 0.85 / light 0.95).
+                          That left pin (sticky selection) reading
+                          softer than hover (transient preview), even
+                          though pin is the stronger commitment.
+                          R396 unifies hover + pin at opacity=1.0
+                          so the same data-edge-badge-lifted='true'
+                          surface uniformly carries full alpha. Pin
+                          stroke (R188 sw=2 + pal.legendHeadline color)
+                          continues to differentiate pin from hover —
+                          the opacity track now closes the lift parity.
+                          The new gate (isHoveredEdge || isPinned)
+                          mirrors the existing R164 r-lift gate, so
+                          the badge has a single "active state"
+                          signature across r + opacity.
+                          200ms opacity transition (already in style
+                          list) eases pin/unpin naturally. R371 rest
+                          opacity preserved as the resting alpha.
+                          data-edge-badge-opacity-hover renamed
+                          semantically to -active (covers hover+pin)
+                          via the new -opacity-active attr; the
+                          legacy -opacity-hover attr kept for R395
+                          test compatibility. */}
                       <circle
                         cx={badgeX} cy={badgeY}
                         r={isHoveredEdge || isPinned ? 10.5 : 9}
                         fill={pal.legendBox.fill}
                         stroke={isPinned ? pal.legendHeadline : isHot ? hotStroke : pal.flowEdge}
-                        strokeWidth={isPinned ? 2 : isHot ? 2 : 1}
-                        opacity={isLight ? 0.95 : 0.82}
+                        strokeWidth={isPinned ? 2 : isHot ? 2 : isHoveredEdge ? 1.5 : 1.25}
+                        opacity={(isHoveredEdge || isPinned) ? 1 : (isLight ? 0.95 : 0.85)}
                         data-edge-badge-lifted={(isHoveredEdge || isPinned) ? 'true' : 'false'}
+                        data-edge-badge-stroke-width-rest="1.25"
+                        data-edge-badge-stroke-width-hover="1.5"
+                        data-edge-badge-opacity={(isHoveredEdge || isPinned) ? 1 : (isLight ? 0.95 : 0.85)}
+                        data-edge-badge-opacity-rest={isLight ? 0.95 : 0.85}
+                        data-edge-badge-opacity-hover="1"
+                        data-edge-badge-opacity-active="1"
                         style={{ transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out' }}
                       />
                       {/* Round 224 / Loop: edge badge text gains the 4th
@@ -4646,16 +5494,75 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         x={badgeX} y={badgeY + 3}
                         textAnchor="middle"
                         fill={pal.legendHeadline}
-                        fontSize="10"
+                        /* Round 361 / Loop: edge midpoint badge text
+                           fontSize 10 → 11. Sibling visual-weight bump
+                           to R360 hub digit 11 → 12. The badge digit
+                           is the per-edge equivalent of the hub digit
+                           — a high-information scalar (link.count) at
+                           a stable canvas position. Pre-R361 fontSize=
+                           10 + R220 letter-spacing 0.4 + R224 tabular-
+                           nums made the digit READABLE but small
+                           against the r=9 / 18-px badge envelope;
+                           fontSize=11 nudges the glyph ~10 % bigger
+                           (bbox ~7×10 px from ~6×9 px) so the count
+                           reads more cleanly at glance — still well
+                           inside the r=9 idle circle and the r=10.5
+                           hover/pin lift (R164). y=badgeY+3 empirical
+                           vertical centring kept (1px drift at the
+                           bumped size is below the noise floor in
+                           the on-curve flow path).
+                           Visual-weight bump family:
+                             R287 minimap viewport stroke 1 → 1.5
+                             R295 legend swatch base radius 5.5 → 6
+                             R359 recent-row pip base radius 1.6 → 1.8
+                             R360 hub digit fontSize 11 → 12
+                             R361 edge-badge digit fontSize 10 → 11 (this round)
+                           data-edge-badge-text-font-size attr exposes
+                           the value for tests. R220 pin/hot letter-
+                           spacing tween + R224 tabular-nums + R188
+                           stroke-width pin/hot transitions all preserved. */
+                        fontSize="11"
                         fontFamily="monospace"
-                        fontWeight="700"
+                        /* R426 — edge-badge digit fontWeight 700 → 800 on
+                           (isPinned || isHot). 4th anchor on the "data
+                           tightens under attention" typographic-weight
+                           pattern:
+                             R416 chip-digit  (chip-row hover trigger)
+                             R424 panel-digit (panel hover trigger)
+                             R425 hub-digit   (hub hover trigger)
+                             R426 edge-badge-digit (pin/hot trigger) ← this
+                           The badge digit is the per-edge equivalent of
+                           the hub digit (R361 sibling fontSize bump
+                           reasoning). Stacks with R188 stroke-width pin/
+                           hot lift (1.25 → 1.5) + R220 letter-spacing pin/
+                           hot tween (0 → 0.4) for a 3-axis pin/hot signa-
+                           ture (edge structure + text spacing + text
+                           weight). The R408 transition is letter-spacing
+                           300ms; R426 appends font-weight 300ms so the
+                           weight bump co-eases under the same cadence. */
+                        fontWeight={(isPinned || isHot) ? '800' : '700'}
                         data-edge-badge-text={link.key}
                         data-edge-badge-text-pin={(isPinned || isHot) ? 'true' : 'false'}
+                        data-edge-badge-text-font-size="11"
                         style={{
                           pointerEvents: 'none',
                           fontVariantNumeric: 'tabular-nums',
-                          letterSpacing: (isPinned || isHot) ? '0.4px' : '0px',
-                          transition: 'letter-spacing 300ms ease-out',
+                          /* R431 — edge-badge digit 3-tier letter-spacing:
+                             rest 0 / isHoveredEdge 0.2 / (isPinned || isHot) 0.4.
+                             Mirrors R427 node-alias 3-tier (rest/hover/chat-
+                             target → 0/0.3/0.5) at edge-badge scope. Pre-R431
+                             letter-spacing only fired on pin/hot (R220) while
+                             pure edge hover lifted stroke (R394) + opacity
+                             (R395) + radius (R164) but left the text dead-
+                             typographic. R431 adds the missing typographic
+                             spacing axis to the edge-hover gesture so the
+                             text rises with the badge geometry. Pin/hot
+                             tier (0.4) still wins; hover is the mid step.
+                             Hover-letter-spacing family extension (7 anchors
+                             now): R344/R345/R347/R351/R420/R427/R431. */
+                          letterSpacing: (isPinned || isHot) ? '0.4px' :
+                                         isHoveredEdge ? '0.2px' : '0px',
+                          transition: 'letter-spacing 300ms ease-out, font-weight 300ms ease-out',
                         }}
                       >{link.count}</text>
                     </g>
@@ -4766,19 +5673,68 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          : workingCount <= 2 ? 1
                          : workingCount <= 5 ? 2
                          : 3;
+              // Round 404 / Loop: hub-halo cyber trough opacity 0.08 →
+              // 0.10. Pre-R404 the breath's low-point sat at α=0.08
+              // cyber (per R84 family tuning) — the halo nearly faded
+              // out at trough on the dark canvas. R404 lifts cyber
+              // trough to 0.10. Per-bucket peak amplitudes [0.16/0.20/
+              // 0.26/0.32] stay exactly tuned.
+              //
+              // Round 405 / Loop: hub-halo LIGHT trough 0.32 → 0.34 —
+              // symmetric +0.02 lift to mirror R404's cyber treatment
+              // across both themes. Pre-R405 only cyber got the lift
+              // (R404 docstring noted "light already at the strong
+              // end" as deliberate); but the cyber/light delta in
+              // R404 was an inconsistency in the family pattern.
+              // R405 closes the symmetry — both themes get +0.02
+              // baseline lift, so the breath low-point reads with
+              // matching confidence regardless of theme. Light peak
+              // array [0.52/0.58/0.65/0.72] stays tuned.
+              //
+              // Stale-state legibility lift family (5 anchors now):
+              //   R317 subordinate-text gray-500 → gray-400
+              //   R358 freshness floor 0.25 → 0.30
+              //   R372 minimap offline-dot opacity 0.5 → 0.6
+              //   R404 hub-halo cyber trough 0.08 → 0.10
+              //   R405 hub-halo light trough 0.32 → 0.34  (this round)
+              //
+              // R84 per-bucket peak/dur + R245 ease-in-out spline
+              // keySplines all preserved. Test fixture probes the
+              // SMIL <animate> values via data-topo-hub-halo-trough
+              // attr (now exposes both light + cyber resolved values).
               const peakLight   = [0.52, 0.58, 0.65, 0.72][busy];
               const peakDark    = [0.16, 0.20, 0.26, 0.32][busy];
-              const troughLight = 0.32;
-              const troughDark  = 0.08;
+              const troughLight = 0.34;
+              const troughDark  = 0.10;
               const dur         = [4.0, 3.2, 2.7, 2.4][busy];
               const valuesLight = `${troughLight};${peakLight};${troughLight}`;
               const valuesDark  = `${troughDark};${peakDark};${troughDark}`;
+              // Round 408 / Loop: hub-halo radius 18 → 20. The
+              // grounding halo (the breathing outer circle around
+              // the hub center) is the canvas's signature breath
+              // element — R84 family. R408 bumps r=18 → 20 so the
+              // breath extends slightly further while keeping 4px
+              // clearance before the spoke origin (still room for
+              // spoke start anchors). Visual presence on the
+              // canvas focal point lifts ~23% area (π·20²/π·18²
+              // = 1.23) without changing the per-bucket opacity
+              // envelope or breath rhythm. Visual-weight bump
+              // family 13th anchor — pairs with R404/R405 trough
+              // lifts so the halo now breathes both with more
+              // visible amplitude AND more visual footprint.
+              // R84 per-bucket peak/dur invariants + R244 calc-
+              // Mode='spline' + R245 ease-in-out keySplines all
+              // preserved. data-topo-hub-halo-radius attr exposes
+              // value for tests.
               return (
                 <circle
-                  cx={cx} cy={cy} r="18"
+                  cx={cx} cy={cy} r="20"
                   fill={isLight ? '#d1fae5' : '#10b981'}
                   opacity={isLight ? 0.42 : 0.12}
                   data-hub-busyness={busy}
+                  data-topo-hub-halo-radius="20"
+                  data-topo-hub-halo-trough={isLight ? troughLight : troughDark}
+                  data-topo-hub-halo-peak={isLight ? peakLight : peakDark}
                   /* Round 253 / Loop: hub grounding halo fill transition
                      for theme toggle. Pre-R253 the base fill (cyber
                      #10b981 ↔ light #d1fae5) snapped while R244's SMIL
@@ -4877,11 +5833,40 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 textAnchor="middle"
                 dy="0.36em"
                 fill={isLight ? '#d1fae5' : '#ecfdf5'}
-                fontSize="11"
+                /* Round 360 / Loop: hub working-count digit fontSize 11
+                   → 12. The hub is the canvas's focal point — its digit
+                   is the most-read scalar on the whole topology. R130
+                   sized it at 11 (well inside the r=10 / 20-px core);
+                   R360 nudges it to 12 (~13 px wide × 12 px tall, still
+                   well inside the 20-px diameter) for ~9 % more presence.
+                   Sibling visual-weight bump family:
+                     R287 minimap viewport stroke 1 → 1.5
+                     R295 legend swatch base radius 5.5 → 6
+                     R359 recent-row pip radius 1.6 → 1.8
+                     R360 hub digit fontSize 11 → 12  (this round)
+                   The R209 scale-1.08-on-hub-hover, R225 tabular-nums,
+                   R253 fill transition, R213 always-mount opacity gate
+                   all preserved. data-topo-hub-working-count-font-size
+                   attr exposes the value for tests. */
+                fontSize="12"
                 fontFamily="monospace"
-                fontWeight="700"
+                /* R425 — hub digit fontWeight 700 → 800 on hoveredHub.
+                   Closes the "data tightens under attention" pattern
+                   across three focal scopes: chip-digit (R416, chip
+                   scope) → panel-digit (R424, panel-header scope) →
+                   hub-digit (R425, hub focal scope). The hub digit is
+                   the most-read scalar on the topology; adding a weight
+                   axis on hover stacks with the R209 scale-1.08 + R177
+                   ring grow + R370 halo opacity + R386 highlight
+                   opacity hub-hover gestures, giving the focal point
+                   a typographic axis alongside its scale/structure cues.
+                   R360 fontSize=12 + R225 tabular-nums + R209 scale +
+                   R253 fill transition all preserved. Transition list
+                   extends to include font-weight 200ms ease-out. */
+                fontWeight={hoveredHub ? '800' : '700'}
                 opacity={workingCount > 0 ? 1 : 0}
                 data-topo-hub-working-count={workingCount}
+                data-topo-hub-working-count-font-size="12"
                 data-topo-hub-working-count-hovered={hoveredHub ? 'true' : 'false'}
                 data-topo-hub-working-count-visible={workingCount > 0 ? 'true' : 'false'}
                 // Round 209 / Loop: hub workingCount digit scales 1.0 →
@@ -4915,19 +5900,63 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   transform: !reducedMotion && hoveredHub ? 'scale(1.08)' : 'scale(1)',
                   transformBox: 'fill-box',
                   transformOrigin: 'center',
-                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out',
+                  /* R425: font-weight 200ms appended so the hover fw
+                     bump 700 → 800 eases under the same cadence as
+                     R209 scale + R253 fill + R213 opacity. */
+                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out',
                   fontVariantNumeric: 'tabular-nums',
                 }}
               >
                 {workingCount}
               </text>
             {/* decorative highlight (visible when workingCount === 0) */}
+            {/* Round 365 / Loop: hub-center 'lit-lamp' decorative highlight
+                circle r 5 → 5.5. Sibling visual-weight bump family —
+                each round lifts one canvas anchor's geometric presence
+                without disturbing its bbox envelope:
+                  R287 minimap viewport stroke 1 → 1.5
+                  R295 legend swatch base radius 5.5 → 6
+                  R359 recent-row pip base radius 1.6 → 1.8
+                  R360 hub digit fontSize 11 → 12
+                  R361 edge-badge digit fontSize 10 → 11
+                  R365 hub-highlight base radius 5 → 5.5  (this round)
+                The highlight only renders when workingCount === 0
+                (decorative 'lamp lit but idle' state per R130 + R213
+                always-mount opacity-gate). At idle, the 0.5-px radius
+                bump (21 % area, π*5.5² / π*5² = 1.21) lifts the lamp's
+                presence — still well inside the r=10 hub-core (R130).
+                opacity=0 when working preserved so the hub-digit's R130
+                takeover stays seamless. R213 always-mount opacity-gate
+                + 300ms opacity transition + pointerEvents:none all
+                preserved. data-topo-hub-highlight-radius attr exposes
+                the value for tests. */}
+            {/* Round 386 / Loop: hub-highlight idle opacity 0.9 → 0.95.
+                When workingCount===0 the highlight paints as the visible
+                idle "lamp lit but no work" core (R130 takeover gate).
+                Pre-R386 idle opacity was 0.9 — a ~6 % fade against full
+                paint that read as slightly-dimmed-ghost on the focal
+                point. R386 lifts to 0.95 (idle alpha gap halved 0.10
+                → 0.05) so the canvas anchor reads more confidently
+                as a present-but-idle state rather than a faded ghost.
+                Theme-consistency / canvas-presence polish family (4th
+                anchor):
+                  R370 hub hover-ring opacity 0.7 → 0.8 cyber
+                  R371 edge-badge rest opacity 0.82 → 0.85 cyber
+                  R372 minimap offline-dot opacity 0.5 → 0.6
+                  R386 hub-highlight idle opacity 0.9 → 0.95 (this round)
+                opacity=0 when working preserved so the hub-digit's
+                R130 takeover stays seamless. 300ms opacity transition
+                + R213 always-mount opacity-gate + pointerEvents:none
+                + R365 r=5.5 all preserved. data-topo-hub-highlight-
+                opacity attr exposes the resolved value for tests. */}
             <circle
-              cx={cx} cy={cy} r="5"
+              cx={cx} cy={cy} r="5.5"
               fill="#d1fae5"
-              opacity={workingCount > 0 ? 0 : 0.9}
+              opacity={workingCount > 0 ? 0 : 0.95}
               data-topo-hub-highlight
               data-topo-hub-highlight-visible={workingCount > 0 ? 'false' : 'true'}
+              data-topo-hub-highlight-radius="5.5"
+              data-topo-hub-highlight-opacity={workingCount > 0 ? 0 : 0.95}
               style={{
                 pointerEvents: 'none',
                 transition: 'opacity 300ms ease-out',
@@ -4958,15 +5987,46 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 R142 group boxes, R143/R144 rows, R164 edge badges,
                 R177 hub ring). prefers-reduced-motion respected via
                 R29 globals.css blanket. */}
+            {/* Round 385 / Loop: hub hover-ring strokeWidth 1.5 → 1.75.
+                Sibling visual-weight bump (11th anchor) to R367 edge-
+                badge rest stroke 1 → 1.25. The ring is only visible
+                during hub hover (opacity=0 rest, R177 + R370 control
+                the hover-state alpha) so the change manifests purely
+                as a thicker hover-state ring on the canvas focal
+                point. R177 r 14 → 17 grow + R370 opacity 0 → 0.8
+                already lift the hover cue; R385 adds stroke weight
+                as the third lift axis. Stays clear of R51 overlap-
+                test sentinel value 3 (1.75 is non-sentinel); the
+                R51 selector is gated to g[data-node] ancestors so
+                this hub-internal circle is invisible to the probe
+                regardless. R253 stroke transition + pointerEvents:
+                none preserved. data-topo-hub-hover-ring-stroke-width
+                attr exposes the value for tests. */}
             <circle
               cx={cx} cy={cy}
               r={hoveredHub ? 17 : 14}
               fill="none"
               stroke={isLight ? '#059669' : '#10b981'}
-              strokeWidth="1.5"
-              opacity={hoveredHub ? (isLight ? 0.85 : 0.7) : 0}
+              strokeWidth="1.75"
+              /* Round 370 / Loop: hub hover-ring cyber opacity 0.7 →
+                 0.8. R177 designed the hub hover-ring at opacity-0 →
+                 0.85 (light) / 0 → 0.7 (cyber). The 15 % gap between
+                 the two themes meant cyber-theme operators got a
+                 noticeably softer hover cue than light-theme users
+                 against backgrounds that should equalise (dark bg
+                 needs more luminance to read as 'on'). R370 bumps
+                 cyber 0.7 → 0.8, narrowing the theme gap to 5 % —
+                 sibling theme-consistency polish to R251 edge badge
+                 fill/opacity (cyber 0.82 / light 0.95) and R246/R247
+                 panel transition families. Light theme 0.85 stays
+                 as is (already in the legibility band). data-topo-
+                 hub-hover-ring-opacity attr exposes the value for
+                 tests. */
+              opacity={hoveredHub ? (isLight ? 0.85 : 0.8) : 0}
               data-topo-hub-hover-ring
               data-topo-hub-hover-ring-radius={hoveredHub ? 17 : 14}
+              data-topo-hub-hover-ring-stroke-width="1.75"
+              data-topo-hub-hover-ring-opacity={hoveredHub ? (isLight ? 0.85 : 0.8) : 0}
               /* Round 253 / Loop: hub hover ring also gets stroke
                  transition for theme toggle (cyber #10b981 ↔ light
                  #059669). The opacity + r transitions stay for hover
@@ -5395,14 +6455,51 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         keyTimes="0;0.5;1"
                         keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
                       />
+                      {/* Round 409 / Loop: active-node pulse peak
+                          opacity lift — cyber 0.18 → 0.20 / light
+                          0.12 → 0.14. Theme-consistency / canvas-
+                          presence family 9th anchor. R243 family
+                          rhythm preserved.
+                          Round 413 / Loop: trough lift mirrors R409
+                          peak — cyber 0.04 → 0.05 / light 0.02 →
+                          0.03. Stale-state legibility lift family
+                          8th anchor — pairs with R404 (hub-halo
+                          cyber trough 0.08 → 0.10) and R405 (light
+                          trough 0.32 → 0.34). The per-node breath's
+                          low-point now reads slightly above the
+                          "nearly gone" zone while preserving the
+                          breath amplitude (cyber Δ 0.16 vs Δ pre-
+                          R409+R413 of 0.14; light Δ 0.11 vs 0.10).
+                          Both peak (R409) AND trough (R413) lift
+                          together so the active-pulse signal stays
+                          confidently present at both ends of its
+                          2.4s cycle.
+                          Stale-state legibility lift family (8):
+                            R317 subordinate-text gray-500→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+light)
+                            R413 active-node pulse trough (this round)
+                              cyber 0.04 → 0.05
+                              light 0.02 → 0.03
+                          R243 always-mount opacity-gate + R243
+                          ease-in-out keySplines + r animation
+                          (radius+8 ↔ radius+22) preserved.
+                          data-node-pulse-peak + new -pulse-trough
+                          attrs expose resolved per-theme values. */}
                       <animate
                         attributeName="opacity"
-                        values={isLight ? '0.12;0.02;0.12' : '0.18;0.04;0.18'}
+                        values={isLight ? '0.14;0.03;0.14' : '0.20;0.05;0.20'}
                         dur="2.4s"
                         repeatCount="indefinite"
                         calcMode="spline"
                         keyTimes="0;0.5;1"
                         keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
+                        data-node-pulse-peak={isLight ? '0.14' : '0.20'}
+                        data-node-pulse-trough={isLight ? '0.03' : '0.05'}
                       />
                     </circle>
                   </g>
@@ -5447,12 +6544,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     parent stays for status flips. data-node-halo-
                     breath-offset surfaces the chosen offset for
                     test introspection. */}
+                {/* Round 407 / Loop: offline node halo opacity lift —
+                    cyber 0.25 → 0.30 and light 0.4 → 0.45. Pre-R407
+                    offline node halos faded to α=0.25 cyber (75 %
+                    dim) / α=0.4 light. On the dark canvas the 0.25
+                    halo read as "nearly gone" — exactly the
+                    legibility floor R404/R405 just lifted on the
+                    hub-halo and R372 lifted on minimap offline dots.
+                    R407 closes the same family at the per-node halo
+                    surface: +0.05 lift on both themes so offline
+                    anchors stay legibly present without crossing into
+                    "could be online" territory (online cyber 0.65 /
+                    light 0.85 unchanged — the 0.30/0.65 cyber ratio
+                    still gives 2.17× contrast for online/offline).
+                    Stale-state legibility lift family (7 anchors now):
+                      R317 subordinate-text gray-500 → gray-400
+                      R358 freshness floor 0.25 → 0.30
+                      R372 minimap offline-dot 0.5 → 0.6
+                      R404 hub-halo cyber trough 0.08 → 0.10
+                      R405 hub-halo light trough 0.32 → 0.34
+                      R406 edge freshness floor 0.35 → 0.40
+                      R407 node halo offline opacity (this round)
+                        cyber 0.25 → 0.30
+                        light 0.4  → 0.45
+                    R278 retired-breath gate + R12 status.halo color
+                    + R226 phase stagger code-path preserved (the
+                    breath stays disabled per Vincent's R278 ask;
+                    only the BASE opacity floor shifts here). transi-
+                    tion list ('fill,opacity' 300ms ease-out) unchanged.
+                    data-node-halo-offline-opacity attr exposes the
+                    resolved value for tests. */}
                 <circle
                   cx={pos.x}
                   cy={pos.y}
                   r={radius + 8}
                   fill={status.halo}
-                  opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.4 : 0.25)}
+                  opacity={isOnline ? (isLight ? 0.85 : 0.65) : (isLight ? 0.45 : 0.30)}
+                  data-node-halo-offline-opacity={isOnline ? undefined : (isLight ? 0.45 : 0.30)}
                   className="transition-[fill,opacity] duration-300 ease-out"
                   data-node-halo-breath={!reducedMotion && session.status === 'working' ? 'on' : 'off'}
                   data-node-halo-breath-offset={
@@ -5604,20 +6732,62 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     stroke-width="3"/"1.5" still works against the
                     DOM attribute value (React-rendered, not
                     interpolated). */}
-                <circle
-                  cx={pos.x}
-                  cy={pos.y}
-                  r={radius}
-                  fill={isOnline ? pal.nodeFill.online : pal.nodeFill.offline}
-                  stroke={status.primary}
-                  strokeWidth={isOnline ? 3 : 1.5}
-                  strokeDasharray={isOnline ? 'none' : '5 5'}
-                  filter={isOnline && !isLight ? 'url(#topo-glow)' : undefined}
-                  data-node-status-ring={status.label}
-                  style={{
-                    transition: 'fill 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out',
-                  }}
-                />
+                {(() => {
+                  /* Round 438 / Loop: status ring strokeWidth hover lift —
+                     when hoveredAlias matches, the node's status ring
+                     thickens by +0.5: online 3 → 3.5, offline 1.5 → 2.
+                     Same absolute delta as R435 hub-spoke (idle 1→1.25
+                     used Δ +0.25 because rest base was thinner; status
+                     ring's heavier rest values 1.5/3 need a bigger
+                     +0.5 to register as visible thickening).
+                     Status-ring axis joins the node-hover cue stack
+                     (now 9 layers including link surfaces):
+                       R26  group translateY -2px           per-node geometry
+                       R217 stroke tint legendAccent        per-node card
+                       R142 drop-shadow boost               per-node card
+                       R427 alias letter-spacing            per-node text
+                       R428 sub-text letter-spacing         per-node text
+                       R429 body opacity 0.94 → 1.0         per-node card
+                       R430 hub-spoke α+                    link to hub (paint)
+                       R435 hub-spoke sw+                   link to hub (geo)
+                       R94  edge α 1.7×                     inter-node link (paint)
+                       R436 edge sw 1.15×                   inter-node link (geo)
+                       R437 flow-rail sw 1 → 1.5            edge paint-layer
+                       R438 status-ring sw +0.5             ring geometry  ← this round
+                     R51 sentinel safety: rest values 3 / 1.5 unchanged
+                     so the overlap-test selector `circle[stroke-width=
+                     "3"]` / `circle[stroke-width="1.5"]` inside
+                     g[data-node] still matches at rest. Hover values
+                     3.5 / 2 are not in the reserved {1.5, 3} set so
+                     the selector wouldn't match them anyway; but the
+                     test runs WITHOUT hover so this never matters
+                     in practice. R167 stroke-width 300ms transition
+                     already in the style list eases the lift for
+                     free. data-node-status-ring-hovered exposes the
+                     gate for tests. */
+                  const isRingHovered = !reducedMotion && hoveredAlias === session.alias;
+                  const ringStrokeWidth = isOnline
+                    ? (isRingHovered ? 3.5 : 3)
+                    : (isRingHovered ? 2 : 1.5);
+                  return (
+                    <circle
+                      cx={pos.x}
+                      cy={pos.y}
+                      r={radius}
+                      fill={isOnline ? pal.nodeFill.online : pal.nodeFill.offline}
+                      stroke={status.primary}
+                      strokeWidth={ringStrokeWidth}
+                      strokeDasharray={isOnline ? 'none' : '5 5'}
+                      filter={isOnline && !isLight ? 'url(#topo-glow)' : undefined}
+                      data-node-status-ring={status.label}
+                      data-node-status-ring-hovered={isRingHovered ? 'true' : 'false'}
+                      data-node-status-ring-stroke-width={ringStrokeWidth}
+                      style={{
+                        transition: 'fill 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out',
+                      }}
+                    />
+                  );
+                })()}
                 {/* v0.10.0 Hero 1+2 / §3.F server-health node-ring tint.
                     When the host server this agent runs on is in the
                     `red` tier (CPU/Mem/Disk worst-of ≥ 85% per
@@ -5941,14 +7111,69 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           220ms cadence the existing filter/stroke
                           pair uses — coordinated 4-property easing
                           across the card. */}
+                      {/* Round 411 / Loop: node label card rx 6 → 8.
+                          Pre-R411 the per-node label card painted at
+                          rx=6, sitting one tier BELOW the R332/R375/
+                          R376 compact-chrome tier (rx=8). Inside the
+                          corner-radius cascade family the cards used
+                          to be the only "smaller" tier — but the
+                          label card is a content-bearing surface
+                          (alias + sub text + ring), not a sub-
+                          element decoration. R411 lifts rx=6 → 8
+                          to align with the compact-chrome / segmented-
+                          control tier so all "compact card" surfaces
+                          read with the same corner radius.
+                          Corner-radius cascade (8 anchors now):
+                            R330 canvas             rx 12  (root)
+                            R331 panels             rx 10  (recent-signal, legend)
+                            R332 minimap container  rx 8   (compact chrome)
+                            R375 Layout-toggle      rx 8   (segmented control)
+                            R376 nodeSize/zoom      rx 8   (segmented control)
+                            R390 hover-detail       rx 10  (panel)
+                            R393 minimap viewport   rx 2   (sub-element)
+                            R411 node label card    rx 6 → 8  (compact card, this round)
+                          Pure paint — rx grows the corner curve
+                          inward without changing the card's outer
+                          cardW × cardH bbox (cardW=92/cardH=22 for
+                          standard nodes per R23 / R187 sizing). R217
+                          hover-stroke cyan tint + R142 drop-shadow
+                          + R246 fill+opacity 220ms transition list
+                          + R211 alias/sub text-fill ease all
+                          preserved. data-node-label-card-rx attr
+                          exposes the value for tests. */}
+                      {/* Round 429 / Loop: node label-card body opacity
+                          0.94 → 1.0 on hover (cyber theme). Sibling
+                          treatment to R348 panel rect opacity lift —
+                          0.92 → 0.97 cyber / 0.97 → 1.0 light at the
+                          panel scope. Pre-R429 the cyber theme card
+                          sat at 0.94 always; on hover R217 tinted the
+                          stroke + R142 grew the drop-shadow + R26
+                          lifted the group + R427/R428 spaced the text
+                          but the rect itself never solidified —
+                          the card glowed brighter through the
+                          shadow but the body alpha gap (6 pct) stayed
+                          fixed. R429 lifts the body to full alpha on
+                          hover so the card reads as a confidently
+                          present surface under the cursor (matching
+                          the panel-pair pattern). Light theme stays
+                          at 1.0 in both states (already maxed). R246
+                          transition list already covers opacity 220ms
+                          so the lift eases for free. R217 stroke tint
+                          + R142 drop-shadow + R211 fill ease all
+                          preserved (additive opacity branch only). */}
                       <rect
-                        x={-cardW / 2} y={cardTopY} width={cardW} height={cardH} rx="6"
+                        x={-cardW / 2} y={cardTopY} width={cardW} height={cardH} rx="8"
                         fill={pal.labelBox.fill}
                         stroke={!reducedMotion && hoveredAlias === session.alias
                           ? pal.legendAccent
                           : pal.labelBox.stroke}
-                        opacity={isLight ? 1 : 0.94}
+                        opacity={
+                          !reducedMotion && hoveredAlias === session.alias
+                            ? 1
+                            : (isLight ? 1 : 0.94)
+                        }
                         data-node-label-card={session.alias}
+                        data-node-label-card-rx="8"
                         data-node-label-card-elevation={
                           !reducedMotion && hoveredAlias === session.alias ? 'hover' : 'idle'
                         }
@@ -5992,25 +7217,72 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           transition list extends 'letter-spacing
                           200ms ease-out' so it eases alongside the
                           existing 300ms fill transition. */}
+                      {/* Round 427 / Loop: extend the node alias label
+                          letter-spacing family to a 3-tier scale —
+                          rest 0px → hover 0.3px → chat-target 0.5px.
+                          Pre-R427 the alias text shifted only when
+                          chat was actively pinned (R305); pure node-
+                          hover left the text dead-typographic while
+                          the surrounding card lifted (R26 translateY
+                          + R242 stroke + filter cues). R427 adds the
+                          missing typographic axis to the hover gesture
+                          so the alias text rises with the card.
+                          The chat-target tier still wins (0.5 > 0.3)
+                          so the pin signature stays at the top of the
+                          scale — hover is the mid tier between rest
+                          and chat-target.
+                          Hover-letter-spacing family extension:
+                            R344 chip count digit
+                            R345 panel title (R423 sibling)
+                            R347 active-links chip
+                            R351 vendor chip
+                            R420 zoom-level chip
+                            R427 node alias text (this round)
+                          R211 fill 300ms + R305 letter-spacing 200ms
+                          transition list preserved; only the
+                          conditional gets a middle case. */}
                       <text
                         x="0" y="1" textAnchor="middle"
                         fill={status.text}
                         fontSize={aliasFs} fontFamily="monospace" fontWeight="700"
                         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'}
                         style={{
                           transition: 'fill 300ms ease-out, letter-spacing 200ms ease-out',
-                          letterSpacing: chatAlias === session.alias ? '0.5px' : '0px',
+                          letterSpacing:
+                            chatAlias    === session.alias ? '0.5px' :
+                            hoveredAlias === session.alias ? '0.3px' : '0px',
                         }}
                       >
                         {truncate(session.alias, fullMax)}
                       </text>
+                      {/* Round 428 / Loop: node sub-text (status label
+                          line beneath the alias) adopts hover letter-
+                          spacing tween 0 → 0.2px on hoveredAlias.
+                          Sibling treatment to R427 alias-text hover
+                          tween (0 → 0.3) — the alias is the primary
+                          identity (top-tier kerning 0.3), the sub-text
+                          is the secondary status line (one tier lower
+                          at 0.2). Now both lines of the label card
+                          telegraph hover typographically as one unit,
+                          matching the R26 card lift + R242 stroke
+                          tint + R975 filter cues. Subtler delta on
+                          the sub-text (0.2 vs alias 0.3) preserves
+                          the alias > status visual hierarchy at the
+                          hover scope. R211 fill 300ms transition
+                          preserved (additive letter-spacing branch
+                          + appended 'letter-spacing 200ms ease-out'). */}
                       <text
                         x="0" y={subY} textAnchor="middle"
                         fill={status.primary}
                         fontSize={subFs} fontFamily="monospace"
                         data-node-sub-text={session.alias}
-                        style={{ transition: 'fill 300ms ease-out' }}
+                        data-node-sub-text-hovered={hoveredAlias === session.alias ? 'true' : 'false'}
+                        style={{
+                          transition: 'fill 300ms ease-out, letter-spacing 200ms ease-out',
+                          letterSpacing: hoveredAlias === session.alias ? '0.2px' : '0px',
+                        }}
                       >
                         {status.label}{isOnline && sseCountFor != null ? ` sse:${sseCountFor}` : ''}
                       </text>
@@ -6083,26 +7355,122 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const detailY = pos.y - detailH / 2;
                   return (
                     <g transform={`translate(${detailX}, ${detailY})`} data-topo-hover-detail={session.alias} style={{ pointerEvents: 'none' }}>
+                      {/* Round 387 / Loop: hover-detail panel cyber backdrop
+                          opacity 0.94 → 0.97. The hover-detail card is
+                          ALWAYS rendered in active-hover context (it IS
+                          the hover product), so it should carry the
+                          same backdrop weight as the R348 recent-signal /
+                          legend panel HOVER state (which lifts 0.92 →
+                          0.97 cyber). Pre-R387 the card sat at 0.94
+                          cyber, leaving a 0.03 alpha gap against the
+                          R348 panel-hover state — small but visible
+                          when the hover-detail floats next to a hovered
+                          recent-signal panel. R387 unifies them at 0.97
+                          so all active-hover panels paint with the same
+                          confident backdrop opacity in cyber. Light
+                          stays at 0.98 (already at the strong end —
+                          R348 light also stays at 0.97/0.98 max).
+                          Theme-consistency / canvas-presence polish
+                          family (5th anchor):
+                            R370 hub hover-ring opacity      0.7  → 0.8   cyber
+                            R371 edge-badge rest opacity     0.82 → 0.85  cyber
+                            R372 minimap offline-dot opacity 0.5  → 0.6
+                            R386 hub-highlight idle opacity  0.9  → 0.95
+                            R387 hover-detail panel opacity  0.94 → 0.97  cyber  (this round)
+                          data-topo-hover-detail-opacity attr exposes
+                          the resolved value for tests. R348 drop-shadow
+                          + rx=8 + stroke=pal.legendAccent + fill=pal.
+                          labelBox.fill all preserved. */}
+                      {/* Round 390 / Loop: hover-detail card rx 8 → 10.
+                          Corner-radius cascade family — the hover-detail
+                          card is a panel-tier surface (192×88 floating
+                          info card with drop-shadow + stroke), so its
+                          corner radius should match the R331 panel tier
+                          (rx=10) used by the recent-signal and legend
+                          panels. Pre-R390 it shared rx=8 with the R332
+                          minimap and R375/R376 segmented-control tier
+                          (Layout-toggle, nodeSize, zoom wrappers),
+                          which is the "compact chrome control" tier —
+                          a tier mismatch for a content-bearing panel.
+                          Corner-radius cascade (6 anchors now):
+                            R330 canvas             rx 12  (root)
+                            R331 panels             rx 10  (recent-signal, legend)
+                            R332 minimap           rx 8   (compact chrome)
+                            R375 Layout-toggle     rx 8   (segmented control)
+                            R376 nodeSize/zoom     rx 8   (segmented control)
+                            R390 hover-detail      rx 10  (panel — this round)
+                          Pure paint change; no layout shift (rx grows
+                          the corner curve INWARD without changing the
+                          card's outer bbox). data-topo-hover-detail-
+                          rx attr exposes the resolved value for tests.
+                          R348 drop-shadow + stroke + R387 opacity all
+                          preserved. */}
                       <rect
-                        x="0" y="0" width={detailW} height={detailH} rx="8"
+                        x="0" y="0" width={detailW} height={detailH} rx="10"
                         fill={pal.labelBox.fill}
                         stroke={pal.legendAccent}
-                        opacity={isLight ? 0.98 : 0.94}
+                        opacity={isLight ? 0.98 : 0.97}
+                        data-topo-hover-detail-opacity={isLight ? 0.98 : 0.97}
+                        data-topo-hover-detail-rx="10"
                         style={{ filter: isLight ? 'drop-shadow(0 4px 12px rgba(15,23,42,0.16))' : 'drop-shadow(0 4px 12px rgba(0,0,0,0.6))' }}
                       />
                       <text x="10" y="16" fontSize="9" fontFamily="monospace" fill={pal.legendAccent} fontWeight="700">
                         {v.id !== 'unknown' ? v.label : '—'}
                       </text>
-                      <text x="10" y="32" fontSize="10" fontFamily="monospace" fill={pal.legendHeadline}>
+                      {/* Round 389 / Loop: hover-detail model line (y=32)
+                          fontWeight 400 → 600. R388 lifted body lines
+                          (runtime/host/task at fontSize=9) to fw=500;
+                          R389 closes the typography hierarchy by giving
+                          the model name (the dominant subhead text in
+                          the card) its own weight tier. Three-tier
+                          ladder now reads cleanly:
+                            vendor   fontSize=9  fw=700  (label badge)
+                            model    fontSize=10 fw=600  (subhead — this round)
+                            body 3×  fontSize=9  fw=500  (R388)
+                          One tier step per dimension (size + weight)
+                          between adjacent levels — classic editorial
+                          hierarchy idiom adapted to a 192×88 SVG card.
+                          Sibling to the chip-internal-hierarchy arc
+                          (R333-R341/R362/R369) which uses fw=600/500
+                          for digit/unit pairs; R389 applies the same
+                          fw=600 to a content-bearing identity line.
+                          data-topo-hover-detail-model-fw attr exposes
+                          the resolved value for tests. pal.legendHeadline
+                          fill preserved (R389 doesn't touch color). */}
+                      <text x="10" y="32" fontSize="10" fontFamily="monospace" fontWeight="600" fill={pal.legendHeadline} data-topo-hover-detail-model-fw="600">
                         {session.model || 'model · pending'}
                       </text>
-                      <text x="10" y="48" fontSize="9" fontFamily="monospace" fill={pal.legendText}>
+                      {/* Round 388 / Loop: hover-detail body lines (the
+                          three fontSize=9 lines: runtime, host, task)
+                          gain fontWeight=500. Small-text fw lift family
+                          (6th anchor) — fontSize 9-10 px text reads
+                          consistently bolder at fw=500 than at the
+                          default 400 weight at small sizes, especially
+                          on the cyber-theme backdrop where stroke-
+                          rendering is the limiting factor.
+                          Sibling lifts in this family:
+                            R363 recent-row alias text         400 → 500
+                            R364 legend-row label              400 → 500
+                            R366 group-label count tspan       400 → 500
+                            R368 +N more flows footer          400 → 500
+                            R373 pressure-bar kicker (font-medium)
+                            R388 hover-detail body lines       400 → 500 (this round)
+                          Tier structure preserved:
+                            y=16 vendor (fw=700, headline)
+                            y=32 model  (fontSize=10, subhead by size)
+                            y=48 runtime / y=64 host / y=80 task (body, now fw=500)
+                          The y=80 task line keeps opacity=0.7 so its
+                          caption-tier identity stays distinct from the
+                          y=48 / y=64 body lines despite shared fw.
+                          data-topo-hover-detail-body-fw attr exposes
+                          the resolved value for tests. */}
+                      <text x="10" y="48" fontSize="9" fontFamily="monospace" fontWeight="500" fill={pal.legendText} data-topo-hover-detail-body-fw="500">
                         {rt ? rt.label : 'runtime · pending'}
                       </text>
-                      <text x="10" y="64" fontSize="9" fontFamily="monospace" fill={pal.legendText}>
+                      <text x="10" y="64" fontSize="9" fontFamily="monospace" fontWeight="500" fill={pal.legendText} data-topo-hover-detail-body-fw="500">
                         host · {session.server || 'unknown'}
                       </text>
-                      <text x="10" y="80" fontSize="9" fontFamily="monospace" fill={pal.legendText} opacity="0.7">
+                      <text x="10" y="80" fontSize="9" fontFamily="monospace" fontWeight="500" fill={pal.legendText} opacity="0.7" data-topo-hover-detail-body-fw="500">
                         {session.task ? truncate(session.task, 28) : 'no recent task'}
                       </text>
                     </g>
@@ -6166,14 +7534,41 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 keySplines="0.25 0.1 0.25 1"
                 fill="freeze"
               />
+              {/* Round 403 / Loop: click-ripple SMIL initial opacity
+                  0.7 → 0.8. Pre-R403 the ripple's opacity animation
+                  faded from 0.7 to 0 over 500ms, providing a clean
+                  click-feedback pulse. Theme-consistency / canvas-
+                  presence polish family (R370 hub hover-ring +
+                  R391 hub-spoke active) already lifted paired
+                  hover-state alphas from 0.7 → 0.8. R403 brings
+                  click-feedback into that same alpha — three canvas
+                  state-feedback indicators (hover-ring, active spoke,
+                  click ripple) now share a uniform 0.8 start alpha
+                  so the visual "I responded" signal carries the
+                  same weight regardless of which state fired it.
+                  Pre-R403 invariants preserved: 500ms duration,
+                  R227 calcMode='spline' + ease-out keySplines
+                  (0.25 0.1 0.25 1), fill='freeze', concurrent r
+                  animation. Theme-consistency family (8 anchors):
+                    R370 hub hover-ring        0.7  → 0.8
+                    R371 edge-badge rest       0.82 → 0.85 cyber
+                    R372 minimap offline-dot   0.5  → 0.6
+                    R386 hub-highlight idle    0.9  → 0.95
+                    R387 hover-detail panel    0.94 → 0.97 cyber
+                    R391 hub-spoke active      0.7  → 0.8
+                    R392 minimap online-dot    0.9  → 0.95
+                    R403 click-ripple start    0.7  → 0.8  (this round)
+                  data-click-ripple-start-opacity attr exposes the
+                  resolved value for tests. */}
               <animate
                 attributeName="opacity"
-                values="0.7;0"
+                values="0.8;0"
                 dur="0.5s"
                 calcMode="spline"
                 keyTimes="0;1"
                 keySplines="0.25 0.1 0.25 1"
                 fill="freeze"
+                data-click-ripple-start-opacity="0.8"
               />
             </circle>
           )}
@@ -6247,17 +7642,21 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <rect
               x="0" y="0" width="230" height="88" rx="10"
               fill={pal.legendBox.fill}
-              stroke={pal.legendBox.stroke}
-              // Round 348 / Loop: recent-signal panel rect opacity hover-
-              // state bump — joins the panel-hover cue stack (R135 drop-
-              // shadow boost + R345 title letter-spacing tween 0.3 → 0.4
-              // + R266 fill theme-flip). Cyber 0.92 → 0.97, light 0.97 →
-              // 1.0 on hoveredPanel === 'recent'. The panel "solidifies"
-              // on hover — pure paint-level change, geometry-safe (bbox
-              // unchanged so topo-overlap-test invariants hold). The
-              // R247 transition list already includes `opacity 200ms
-              // ease-out` so the value tween is automatic. Sibling
-              // change at legend panel rect below (~line 7222).
+              // Round 423 / Loop: panel rect stroke tints to legendAccent
+              // (cyan) on hover — sibling to R217 label-card stroke
+              // hover-tint at the panel scope. Pre-R423 the panel rect
+              // stroke painted pal.legendBox.stroke (neutral) regardless
+              // of hover state, while every other panel hover cue stacked:
+              //   R135 drop-shadow boost
+              //   R348 rect opacity 0.92 → 0.97 cyber
+              //   R345 title letter-spacing 0.3 → 0.4
+              //   R423 rect stroke → legendAccent  (this round)
+              // Four hover layers now telegraph "you're entering this
+              // panel" through structural, paint, and typographic axes
+              // simultaneously. R247 transition list already covers
+              // stroke 200ms ease-out so the tint eases naturally.
+              // Sibling change at the legend panel rect below.
+              stroke={hoveredPanel === 'recent' ? pal.legendAccent : pal.legendBox.stroke}
               opacity={hoveredPanel === 'recent' ? (isLight ? 1 : 0.97) : (isLight ? 0.97 : 0.92)}
               style={{
                 /* R135: drop-shadow intensifies on panel hover. Base
@@ -6381,8 +7780,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               const alpha = ageSec <= 30
                 ? 1
                 : ageSec <= 300
-                  ? 1 - ((ageSec - 30) / 270) * 0.75
-                  : 0.25;
+                  ? 1 - ((ageSec - 30) / 270) * 0.70 /* R358: floor 0.25 → 0.30 lift across 3 freshness scopes */
+                  : 0.30; /* R358: stale floor lifted 0.25 → 0.30 — 20% legibility bump while preserving fresh/stale ratio */
               // Dark cyan-400 / light teal-600 with alpha — same
               // palette as R161's chip bullet so the two scopes
               // visually align even side-by-side.
@@ -6450,13 +7849,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       tests + count value reads still resolve via
                       .textContent. data-recent-panel-count-unit on
                       the inner unit tspan for R336 introspection. */}
+                  {/* R424 — recent-signal panel count digit fontWeight
+                      600 → 700 on panel hover. Closes the 5-layer panel
+                      hover cue stack with a typographic-weight axis at
+                      the panel-header data scope: depth (R135 drop-
+                      shadow) + solidity (R348 fill opacity) + spacing
+                      (R345 title letter-spacing) + edge color (R423
+                      stroke tint) + weight (THIS, digit fw). Sibling
+                      pattern to R416 chip-digit-hover-bold at chip
+                      scope — same "data tightens under attention"
+                      idiom now at the panel-header data scope. R311
+                      base fw=600 + R225 tabular-nums + R162 fill
+                      transition + R336 unit-tspan opacity-0.7 all
+                      preserved; only the weight axis tweens via R247's
+                      transition shape (added font-weight to the list). */}
                   <tspan
                     fill={freshFill}
-                    fontWeight="600"
+                    fontWeight={hoveredPanel === 'recent' ? '700' : '600'}
                     data-recent-panel-count
                     data-recent-panel-count-freshness-alpha={alpha.toFixed(2)}
                     style={{
-                      transition: 'fill 200ms ease-out',
+                      transition: 'fill 200ms ease-out, font-weight 200ms ease-out',
                       fontVariantNumeric: 'tabular-nums',
                     }}
                   >{flowLinks.length}<tspan opacity="0.7" data-recent-panel-count-unit> flows</tspan></tspan>
@@ -6878,17 +8291,58 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       const alpha = ageSec <= 30
                         ? 1
                         : ageSec <= 300
-                          ? 1 - ((ageSec - 30) / 270) * 0.75
-                          : 0.25;
+                          ? 1 - ((ageSec - 30) / 270) * 0.70 /* R358: floor 0.25 → 0.30 lift across 3 freshness scopes */
+                          : 0.30; /* R358: stale floor lifted 0.25 → 0.30 — 20% legibility bump while preserving fresh/stale ratio */
                       return (
                         <circle
                           cx={10}
                           cy={38 + index * 16 - 3}
-                          r={1.6}
+                          /* Round 359 / Loop: recency pip base radius
+                             1.6 → 1.8. Sibling lift to R358's freshness-
+                             floor bump (alpha 0.25 → 0.30) — pre-R358/
+                             R359 the stale pip painted at r=1.6 + α=0.25
+                             which read as near-invisible chrome. R358
+                             gave it more alpha; R359 gives it more area
+                             (1.8² / 1.6² ≈ 1.27, so ~27 % more glyph)
+                             so the pip stays distinguishable across the
+                             freshness ramp. Geometry: 1.8-radius dot
+                             centred at (10, row_y - 3) is bbox 3.6×3.6,
+                             still well inside the 7-px left margin
+                             (x=6 rect-start → x=13 text-start) the R160
+                             pip was placed in. Overlap-test reads the
+                             parent row rect's bbox, not this pip's, so
+                             grid+ring invariants hold. Matches the same
+                             1.6 → 1.8 visual-weight bump R295 applied
+                             to the legend swatch (5.5 → 6 base radius)
+                             and R287 to the minimap viewport stroke
+                             (1 → 1.5). data-recent-row-freshness-radius
+                             attr exposes the value for tests. */
+                          /* Round 383 / Loop: recency pip base radius
+                             1.8 → 2.0. Continues the R359 lift
+                             trajectory — pip area grows ~23 % (π·2²/
+                             π·1.8² ≈ 1.23) for a clearer at-a-glance
+                             freshness anchor in each row. Bbox 4.0×4.0
+                             still inside the 7-px R160 left margin
+                             (3-px remaining clearance vs 3.4 at r=1.8
+                             — geometry-safe margin holds). Sibling
+                             visual-weight bump family (9th anchor now):
+                               R287 minimap viewport stroke 1 → 1.5
+                               R295 legend swatch base radius 5.5 → 6
+                               R359 recent-row pip base radius 1.6 → 1.8
+                               R360 hub digit fontSize 11 → 12
+                               R361 edge-badge digit fontSize 10 → 11
+                               R365 hub-highlight base radius 5 → 5.5
+                               R367 edge-badge rest stroke 1 → 1.25
+                               R374 pressure-bar height 1.5 → 2
+                               R383 recent-row pip radius 1.8 → 2.0  (this round)
+                             data-recent-row-freshness-radius attr
+                             bumps to '2.0' for tests. */
+                          r={2.0}
                           fill={pal.legendAccent}
                           opacity={alpha}
                           data-recent-row-freshness={link.key}
                           data-recent-row-freshness-alpha={alpha.toFixed(2)}
+                          data-recent-row-freshness-radius="2.0"
                           style={{ pointerEvents: 'none', transition: 'opacity 200ms ease-out' }}
                         />
                       );
@@ -6918,11 +8372,65 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       fill={isRowActive ? pal.legendHeadline : pal.legendText}
                       fontSize="9"
                       fontFamily="monospace"
+                      /* Round 363 / Loop: recent-row text fontWeight 400
+                         → 500 (font-medium tier). At fontSize=9 the
+                         default-weight 400 glyphs read thin against the
+                         panel chrome (pal.legendBox.fill with 0.92/0.97
+                         opacity); the 100-weight bump lifts the alias→
+                         alias text into the legibility band without
+                         changing geometry. The R320 count tspan fw=600
+                         (cold) / fw=700 (hot) override still wins
+                         locally via inline fontWeight on the inner
+                         tspan, so the count-vs-alias hierarchy stays
+                         intact:
+                           alias  fw 500  (R363, this round)
+                           count  fw 600/700  (R320)
+                         Sibling typography lift to R362 chip-row digit
+                         500 → 600 — both nudge a within-element data
+                         tier without disturbing the surrounding family
+                         baseline. data-recent-row-text-font-weight attr
+                         exposes the value for tests. */
+                      fontWeight="500"
                       data-recent-row-text={link.key}
                       data-recent-row-text-pinned={isRowPinned ? 'true' : 'false'}
+                      data-recent-row-text-hovered={!isRowPinned && isRowHovered ? 'true' : 'false'}
+                      data-recent-row-text-font-weight="500"
+                      /* Round 434 / Loop: recent-signal row text extends
+                         from R220's pin-only letter-spacing (0 → 0.5 on
+                         isRowPinned) to a 3-tier scale matching R433
+                         legend-row at the sibling panel-row scope:
+                           rest               → 0px
+                           isRowHovered       → 0.25px   ← this round
+                           isRowPinned        → 0.5px   (R220 preserved)
+                         Pre-R434 R220 noted: "Hover stays at default
+                         tracking — the spread is pin-exclusive so
+                         users can read pinned vs hovered at the text
+                         alone." R427-R433 established a 3-tier pattern
+                         across 4 surfaces (node-alias, edge-badge,
+                         group-label, legend-row) where hover gets a
+                         subtler intermediate kerning step distinct
+                         from the pin tier's stronger spread — the
+                         locked vs preview discrimination R220 wanted
+                         is preserved (0.5 > 0.25) AND hover gets a
+                         typographic axis of its own. R434 completes
+                         the 5-surface arc.
+                         5-surface 3-tier letter-spacing pattern now
+                         spans every interactive label on TopoGraph
+                         that distinguishes hover from pin:
+                           node-alias  (R427)   0 / 0.3  / 0.5
+                           edge-badge  (R431)   0 / 0.2  / 0.4
+                           group-label (R432)   0 / 0.25 / 0.5
+                           legend-row  (R433)   0 / 0.25 / 0.5
+                           recent-row  (R434)   0 / 0.25 / 0.5  ← this round
+                         Hover-letter-spacing family extension
+                         (10 anchors now): R344/R345/R347/R351/R420/
+                         R427/R431/R432/R433/R434. R55 fill 150ms +
+                         R220 letter-spacing 150ms transition kept
+                         (additive conditional case, no new property). */
                       style={{
                         transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
-                        letterSpacing: isRowPinned ? '0.5px' : '0px',
+                        letterSpacing: isRowPinned ? '0.5px' :
+                                       isRowHovered ? '0.25px' : '0px',
                       }}
                     >
                       {/* R138 / Loop: typography unification with the rest
@@ -6994,7 +8502,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       >
                         {link.count}
                       </tspan>
-                      {' · '}{truncate(link.content, 8)}
+                      {/* Round 418 / Loop: recent-row content preview
+                          gains opacity=0.7 wrapper — subordinate-text
+                          tier at the SVG-text scope. Pre-R418 the
+                          truncated content preview (e.g. " · hi there")
+                          inherited the row's full opacity, reading at
+                          the same emphasis as the alias text and
+                          count digit. R418 wraps it in a <tspan> at
+                          opacity=0.7 so the preview reads as
+                          subordinate metadata — sibling to R333-R341/
+                          R362/R369/R389/R410/R412 chip-internal-
+                          hierarchy "label tier" (opacity-70) at the
+                          HTML scope, and R317 subordinate-text-lift
+                          gray-500 → gray-400 family. The leading
+                          " · " separator stays at full opacity so
+                          the row punctuation rhythm holds. data-
+                          recent-row-content-tspan attr surfaces the
+                          subordinate wrapper for tests. */}
+                      {' · '}
+                      <tspan opacity="0.7" data-recent-row-content-tspan>{truncate(link.content, 8)}</tspan>
                     </text>
                     {lastAt ? (
                       /* Round 321 / Loop: lastAt freshness timestamp picks
@@ -7181,6 +8707,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       surface. transition list extends letter-spacing
                       200ms ease-out alongside the existing opacity/
                       fill easings. */}
+                  {/* Round 368 / Loop: `+N more flows` footer text gains
+                      fontWeight=500 (font-medium tier). Sibling small-
+                      text fw lift family with R363 recent-row alias
+                      + R364 legend-row label + R366 group-label count
+                      — all four lifts share the same theory: at small
+                      fontSize (9-11 px) against panel chrome, SVG-
+                      default fw 400 sits at the legibility floor;
+                      fw 500 brings the glyph into the deliberate-data
+                      band. fontStyle=italic + opacity 0.55 rest + R325
+                      letterSpacing 0.2 baseline + R344 hover-spread
+                      0.2 → 0.3 + R195 cyan fill on hover all preserved
+                      — the fw bump just thickens the italic stroke.
+                      Hover-state punch (R195 fill + R325 opacity 0.55
+                      → 0.85 + R344 letter-spacing + R133 underline)
+                      stays as is, so the rest-vs-hover delta still
+                      reads clearly. data-recent-panel-more-font-weight
+                      attr exposes the value for tests. */}
                   <text
                     x="115" y="82"
                     textAnchor="middle"
@@ -7188,11 +8731,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fontSize="9"
                     fontFamily="monospace"
                     fontStyle="italic"
+                    fontWeight="500"
                     letterSpacing={hoveredRecentMore ? '0.3' : '0.2'}
                     opacity={hoveredRecentMore ? 0.85 : 0.55}
                     textDecoration={hoveredRecentMore ? 'underline' : 'none'}
                     data-recent-panel-more={moreCount}
                     data-recent-panel-more-hovered={hoveredRecentMore ? 'true' : 'false'}
+                    data-recent-panel-more-font-weight="500"
                     style={{ transition: 'opacity 150ms ease-out, fill 200ms ease-out, letter-spacing 200ms ease-out' }}
                   >
                     {`+ ${moreCount}`}
@@ -7244,7 +8789,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <rect
               x="0" y="0" width="224" height="88" rx="10"
               fill={pal.legendBox.fill}
-              stroke={pal.legendBox.stroke}
+              // R423 sibling — legend panel rect stroke tints to
+              // legendAccent on hover (mirrors recent-signal panel
+              // above). 4-layer hover cue stack now symmetric across
+              // both side panels.
+              stroke={hoveredPanel === 'legend' ? pal.legendAccent : pal.legendBox.stroke}
               // R348 sibling — legend panel rect opacity hover-state
               // bump 0.92 → 0.97 (cyber) / 0.97 → 1 (light) on
               // hoveredPanel === 'legend'. Pairs with the recent-signal
@@ -7336,9 +8885,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 R336 introspection; the parent .textContent still
                 reads "{N} node(s)" so existing R310 count tests via
                 textContent unchanged. */}
+            {/* R424 sibling — legend panel count digit fontWeight 600
+                → 700 on panel hover. Closes 5-layer panel hover cue
+                stack symmetric across both side panels (recent-signal
+                + legend): depth (R135) + solidity (R348) + spacing
+                (R345) + edge color (R423) + weight (R424). R310 base
+                fw=600 + R292 tabular-nums + R266 fill transition + R336
+                unit-tspan opacity-0.7 all preserved. Same "data tightens
+                under attention" idiom R416 established at chip scope. */}
             <text
               x="211" y="21" textAnchor="end"
-              fill={pal.legendAccent} fontSize="10" fontFamily="monospace" fontWeight="600"
+              fill={pal.legendAccent} fontSize="10" fontFamily="monospace" fontWeight={hoveredPanel === 'legend' ? '700' : '600'}
               // R349 sibling — legend panel header count picks up
               // letterSpacing="0.2", one tier below the R301 panel
               // title 0.3. Pairs with the recent-signal panel count
@@ -7348,7 +8905,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-legend-panel-count
               data-legend-panel-count-letter-spacing="0.2"
               style={{
-                transition: 'fill 200ms ease-out',
+                transition: 'fill 200ms ease-out, font-weight 200ms ease-out',
                 fontVariantNumeric: 'tabular-nums',
               }}
             >{sessions.length}<tspan opacity="0.7" data-legend-panel-count-unit> node{sessions.length === 1 ? '' : 's'}</tspan></text>
@@ -7567,14 +9124,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       so this legend-internal circle is invisible to
                       that probe. pointerEvents:none so the ring can't
                       intercept the row click that produced it. */}
+                  {/* Round 402 / Loop: legend pin-ring strokeWidth 1.5
+                      → 1.75. Sibling visual-weight bump (12th anchor)
+                      to R385 hub hover-ring strokeWidth 1.5 → 1.75 —
+                      both are pin/hover state indicators painted as
+                      stroke-only circles outside their target swatch
+                      with the R51 sentinel value 1.5. R402 lifts to
+                      1.75 (matching R385's choice) so the pin signal
+                      reads slightly heavier without crossing the
+                      R51 sentinel band (3 reserved for offline node).
+                      The R51 selector is gated to g[data-node]
+                      ancestors so this legend-internal circle (lives
+                      under a <g data-legend-status>) is invisible
+                      to the probe — same lesson R177/R385 documented.
+                      Visual-weight bump family (12 anchors now):
+                        R287 minimap viewport stroke   1   → 1.5
+                        R295 legend swatch radius      5.5 → 6
+                        R359 recent-row pip radius     1.6 → 1.8
+                        R360 hub digit fontSize        11  → 12
+                        R361 edge-badge digit fontSize 10  → 11
+                        R365 hub-highlight radius      5   → 5.5
+                        R367 edge-badge rest stroke    1   → 1.25
+                        R374 pressure-bar height       1.5 → 2
+                        R383 recent-row pip radius     1.8 → 2.0
+                        R384 minimap online dot        1.7 → 1.9
+                        R385 hub hover-ring stroke     1.5 → 1.75
+                        R402 legend pin-ring stroke    1.5 → 1.75  (this round)
+                      R181 always-mount opacity gate + 150ms transition
+                      + pointerEvents:none all preserved. data-legend-
+                      pin-ring-stroke-width attr exposes the value for
+                      tests. */}
                   <circle
                     cx="16" cy={row.y0} r="8"
                     fill="none"
                     stroke={row.fill}
-                    strokeWidth="1.5"
+                    strokeWidth="1.75"
                     opacity={isPinned ? 1 : 0}
                     data-legend-pin-ring={row.key}
                     data-legend-pin-ring-pinned={isPinned ? 'true' : 'false'}
+                    data-legend-pin-ring-stroke-width="1.75"
                     style={{
                       pointerEvents: 'none',
                       transition: 'opacity 150ms ease-out',
@@ -7601,11 +9189,61 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fill={hoveredStatus === row.key || isPinned ? pal.legendHeadline : pal.legendText}
                     fontSize="11"
                     fontFamily="monospace"
+                    /* Round 364 / Loop: legend-row label fontWeight 400
+                       → 500. Sibling typography lift to R363 recent-row
+                       text fw 400 → 500. Both surfaces render small
+                       monospace text against panel chrome at fontSize
+                       9-11 where SVG-default fw 400 sits at the
+                       legibility floor. font-medium tier (500) gives
+                       the label a more deliberate-data register.
+                       The R309 per-row count text (separate element
+                       below at x=215 textAnchor=end) keeps its own
+                       fontWeight 600 inline override, so the count >
+                       label hierarchy stays intact at the legend
+                       scope same as R363 holds it at the recent-row
+                       scope:
+                         legend  label  fw 500  (R364, this round)
+                         legend  count  fw 600  (R309)
+                         recent  alias  fw 500  (R363)
+                         recent  count  fw 600/700  (R320)
+                       data-legend-row-label-font-weight attr exposes
+                       the value for tests. R219 letter-spacing pin
+                       tween + R55 fill transition + R181 always-mount
+                       pin ring all preserved. */
+                    fontWeight="500"
                     data-legend-row-label={row.key}
                     data-legend-row-label-pinned={isPinned ? 'true' : 'false'}
+                    data-legend-row-label-hovered={!isPinned && hoveredStatus === row.key ? 'true' : 'false'}
+                    data-legend-row-label-font-weight="500"
+                    /* Round 433 / Loop: legend-row text extends from
+                       R219's pin-only letter-spacing (0px → 0.5px on
+                       isPinned) to a 3-tier scale matching the R432
+                       group-label pattern:
+                         rest             → 0px
+                         hoveredStatus    → 0.25px   ← this round
+                         isPinned         → 0.5px   (R219 preserved)
+                       Pre-R433 hover already brightened the fill
+                       (hoveredStatus===row.key || isPinned matches the
+                       legendHeadline branch) but the letter-form
+                       stayed dead-typographic on transient hover —
+                       only the pin tier carried a kerning signature.
+                       R433 adds the missing mid tier so hover
+                       telegraphs through BOTH fill brighten AND a
+                       subtle 0.25-px kerning spread, mirroring
+                       R427/R431/R432 at legend-row scope. Pin tier
+                       still wins so the locked vs preview distinction
+                       at the type level stays intact.
+                       Hover-letter-spacing family extension (9 anchors
+                       now): R344/R345/R347/R351/R420/R427/R431/R432/
+                       R433. 3-tier letter-spacing pattern now spans 4
+                       surfaces (node-alias R427, edge-badge R431,
+                       group-label R432, legend-row R433). R55 fill
+                       150ms + R219 letter-spacing 150ms transition
+                       untouched — additive conditional case. */
                     style={{
                       transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
-                      letterSpacing: isPinned ? '0.5px' : '0px',
+                      letterSpacing: isPinned ? '0.5px' :
+                                     hoveredStatus === row.key ? '0.25px' : '0px',
                     }}
                   >{row.label}</text>
                   {/* R95: live count anchored to the right edge of the
@@ -7921,14 +9559,75 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const isOn = s.status !== 'offline' || !!sseN;
                   const st = nodeStatus(s, isOn, isLight);
                   return (
+                    /* Round 372 / Loop: minimap offline-dot opacity
+                       0.5 → 0.6. Sibling stale-state legibility lift
+                       to R358 freshness ramp floor 0.25 → 0.30 + R317
+                       subordinate-text-lift family. Pre-R372 R198
+                       drew offline dots at α=0.5 (44 % below online
+                       0.9). The minimap is a small overlay against
+                       the canvas backdrop — at α=0.5 offline dots
+                       sat at the legibility floor when the minimap
+                       mounted (only on non-default view). R372 lifts
+                       offline 0.5 → 0.6 for +20 % relative presence;
+                       online stays at 0.9 so the offline/online
+                       contrast ratio is now 0.6/0.9 ≈ 0.67 (vs prior
+                       0.5/0.9 ≈ 0.56) — still a clear two-tier
+                       distinction. R198 opacity + fill + r transition
+                       list preserved so status flips still ease
+                       smoothly. data-topo-minimap-dot-opacity attr
+                       exposes the resolved value for tests. */
                     <circle
                       key={s.alias}
                       cx={p.x * sx} cy={p.y * sy}
-                      r={isOn ? 1.7 : 1.2}
+                      /* Round 384 / Loop: minimap online dot radius 1.7
+                         → 1.9. Sibling visual-weight bump (10th anchor)
+                         to R383 recent-row pip 1.8 → 2.0. R198 designed
+                         the dots at 1.7 (online) / 1.2 (offline) — at
+                         the minimap's 120 × 82 scale these read clearly
+                         but the online ↔ offline contrast was modest
+                         (1.7/1.2 = 1.42×). R384 bumps online to 1.9 so
+                         the tier delta widens to 1.58× (1.9/1.2). Pair
+                         completes minimap-dot legibility polish:
+                           R358 (era R372) offline opacity 0.5 → 0.6
+                           R384            online radius 1.7 → 1.9 (this round)
+                         R198 transition list (opacity + fill + r 200ms)
+                         preserved so status flips still ease smoothly.
+                         data-topo-minimap-dot-radius attr exposes the
+                         resolved value for tests. */
+                      /* Round 392 / Loop: minimap online dot opacity
+                         0.9 → 0.95. Theme-consistency / canvas-presence
+                         polish family (7th anchor) — mirrors R386's
+                         hub-highlight idle 0.9 → 0.95 lift on the
+                         minimap surface: the online-dot's idle alpha
+                         gap (0.10 against full presence) halves to
+                         0.05, so the live-fleet anchors on the minimap
+                         read more confidently. Offline dot stays at
+                         R372 0.6 — the binary online/offline contrast
+                         ratio shifts from 0.6/0.9 ≈ 0.67 to 0.6/0.95
+                         ≈ 0.63, preserved as a clear two-tier
+                         distinction. R198 opacity + fill + r transition
+                         list + R384 r=1.9 + R372 offline 0.6 all
+                         preserved. data-topo-minimap-dot-opacity attr
+                         bumps to '0.95' for tests. */
+                      /* Round 421 / Loop: online dot opacity 0.95 → 1.0
+                         on minimap container hover. Sibling to R346
+                         viewport rect strokeWidth/opacity hover tween.
+                         When the user hovers the minimap container,
+                         the live-fleet anchors brighten from R392
+                         baseline (0.95) to full opacity in concert
+                         with the R346 viewport rect lift. Offline
+                         stays at R372 0.6 — hover state focuses
+                         attention on the ACTIVE anchors, not the
+                         stale ones. data-topo-minimap-dot-opacity
+                         attr (R392) reflects the resolved hover-
+                         state value for tests. */
+                      r={isOn ? 1.9 : 1.2}
                       fill={st.primary}
-                      opacity={isOn ? 0.9 : 0.5}
+                      opacity={isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6}
                       data-topo-minimap-dot={s.alias}
                       data-topo-minimap-dot-online={isOn ? 'true' : 'false'}
+                      data-topo-minimap-dot-opacity={isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6}
+                      data-topo-minimap-dot-radius={isOn ? 1.9 : 1.2}
                       style={{
                         transition: 'opacity 200ms ease-out, fill 200ms ease-out, r 200ms ease-out',
                       } as React.CSSProperties}
@@ -7969,17 +9668,66 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     information element to lift it above ambient
                     chrome. opacity 0.9 stays — strokeWidth alone
                     does the lifting. */}
+                {/* Round 379 / Loop: minimap viewport rect picks up
+                    strokeLinejoin='round'. Pre-R379 the rect's 4
+                    corners painted with default 'miter' joins —
+                    sharp 90° corners with a small miter overshoot
+                    (≈ strokeWidth × 1.4 = 2.1 px at sw=1.5). R379
+                    rounds the joins so corners arc smoothly through
+                    a quarter-circle of radius ≈ strokeWidth/2. At
+                    sw=1.5 that's a 0.75-px radius — subtle but
+                    matches the same stroke-softening vocabulary R288
+                    chrome icons (zoom/reset/fullscreen) and R378
+                    flow-rail already speak. Geometry-safe: stroke-
+                    linejoin only affects the corner overshoot, the
+                    rect's bbox is unchanged. R287 strokeWidth=1.5 +
+                    R346 hover-state strokeWidth/opacity bump + R199
+                    smoothView x/y/w/h transition all preserved.
+                    data-topo-minimap-viewport-linejoin attr exposes
+                    the value for tests. */}
+                {/* Round 393 / Loop: minimap viewport rect rx 0 → 2.
+                    Pre-R393 the cyan-stroked viewport rect (the frame
+                    showing what's currently visible on the canvas)
+                    drew with sharp corners inside the R332 rounded
+                    minimap container (rx=8). A small frame with sharp
+                    corners sitting inside a rounded container reads
+                    as visually loud — the 90° corners catch the eye
+                    against the soft container edge. R393 adds rx=2
+                    so the viewport corners get a subtle radius that
+                    matches the family's softening idiom on a sub-
+                    element scale. The R379 strokeLinejoin='round'
+                    already softens stroke joins; R393 adds a complete
+                    geometric soften via rx.
+                    Corner-radius cascade (7 anchors now):
+                      R330 canvas             rx 12
+                      R331 panels             rx 10
+                      R332 minimap container  rx 8
+                      R375 Layout-toggle      rx 8
+                      R376 nodeSize/zoom      rx 8
+                      R390 hover-detail       rx 10
+                      R393 minimap viewport   rx 2  (this round, sub-element)
+                    The 2-px radius is intentionally small — the
+                    viewport rect is typically only 30-50px wide,
+                    where rx=2 reads as "rounded enough to not snap"
+                    without feeling pillowy. data-topo-minimap-
+                    viewport-rx attr exposes the resolved value
+                    for tests. R346 hover-state tweens (strokeWidth
+                    + opacity) preserved verbatim. */}
                 <rect
                   x={Math.max(0, rectX)} y={Math.max(0, rectY)}
                   width={Math.max(0, Math.min(MW - Math.max(0, rectX), rectW))}
                   height={Math.max(0, Math.min(MH - Math.max(0, rectY), rectH))}
+                  rx="2"
                   fill="none" stroke={pal.legendAccent}
                   // R346: strokeWidth + opacity tween on container hover.
                   strokeWidth={hoveredMinimap ? '1.75' : '1.5'}
+                  strokeLinejoin="round"
                   opacity={hoveredMinimap ? '1' : '0.9'}
                   data-topo-minimap-viewport
+                  data-topo-minimap-viewport-rx="2"
                   data-topo-minimap-viewport-smooth={smoothView ? 'true' : 'false'}
                   data-topo-minimap-viewport-hover={hoveredMinimap ? 'true' : 'false'}
+                  data-topo-minimap-viewport-linejoin="round"
                   style={{
                     transition: smoothView
                       ? 'x 280ms ease-out, y 280ms ease-out, width 280ms ease-out, height 280ms ease-out, stroke-width 200ms ease-out, opacity 200ms ease-out'
@@ -8038,8 +9786,22 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               own transition-colors. Same R254 holdover pattern that
               R263 just closed at the canvas wrapper scope, now at the
               chrome strip's nodeSize sub-wrapper scope. */}
+          {/* Round 376 / Loop: nodeSize wrapper rounded-md → rounded-lg.
+              Sibling polish to R375 Layout-toggle wrapper. Three
+              chrome-strip segmented controls now all share rounded-lg
+              at the wrapper tier:
+                R375 Layout-toggle wrapper  rounded-lg  8 px
+                R376 nodeSize  wrapper      rounded-lg  8 px (this round)
+                R376 zoom      wrapper      rounded-lg  8 px (this round)
+              Individual atomic chrome buttons (reset, fullscreen) keep
+              rounded-md (6 px) as their own atomic-button tier — the
+              chrome strip's typography now expresses a clear two-tier
+              hierarchy: 'segmented control container' (rounded-lg)
+              vs 'standalone button' (rounded-md). Pure paint change,
+              no layout shift. */}
           <div
-            className="flex items-center rounded-md border overflow-hidden"
+            className="flex items-center rounded-lg border overflow-hidden"
+            data-topo-chrome-nodesize-radius="rounded-lg"
             style={{
               background: pal.legendBox.fill,
               borderColor: pal.containerBorder,
@@ -8119,8 +9881,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-topo-chrome-view-group-leader marks the boundary surface
               for the test probe; data-topo-chrome-fleet-group-trailer marks
               the nodeSize wrapper's right edge for the gap measurement. */}
+          {/* R376 sibling — zoom wrapper rounded-md → rounded-lg.
+              Closes the chrome-strip segmented-control corner radius
+              cascade (Layout R375 + nodeSize R376 + zoom R376). */}
           <div
-            className="ml-1.5 flex items-center rounded-md border overflow-hidden"
+            className="ml-1.5 flex items-center rounded-lg border overflow-hidden"
+            data-topo-chrome-zoom-wrapper-radius="rounded-lg"
             style={{
               background: pal.legendBox.fill,
               borderColor: pal.containerBorder,
@@ -8136,7 +9902,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // R196: press-state deepens bg one tier above hover (white/5
               // → white/10) so mouse-down has a tactile dim before the
               // R186 icon pop fires on release.
-              className="px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // R352: `group` lets the inner svg respond via group-hover.
+              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
               style={{ color: pal.legendText }}
               aria-label="Zoom out"
               title="Zoom out (−)"
@@ -8144,11 +9911,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               {/* R186: icon pop on click. CSS animation runs once;
                   React removes the class after 240ms so a quick
                   re-click can replay. */}
+              {/* Round 352 / Loop: zoom-out icon picks up group-hover:
+                  scale-110 — sibling to R350 reset hover-rotate. Pre-
+                  R352 hovering the zoom button only changed the bg
+                  (white/5); the icon inside stayed perfectly still.
+                  R352 lifts the icon 10% on hover for a tactile "this
+                  button does something" cue. The R186 anet-chrome-pop
+                  keyframe (220ms scale 1→1.06→1) still owns transform
+                  during click via CSS-animation precedence over
+                  transition-transform; after the pop ends + className
+                  is removed, the group-hover scale-110 picks up
+                  smoothly. `transform-gpu` hint promotes the svg to
+                  its own compositor layer for crisper edges during
+                  the scale tween. Sibling change on zoom-in icon
+                  below. */}
               <svg
                 width="12" height="12" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
                 aria-hidden
-                className={chromePopping === 'zoom-out' ? 'anet-chrome-pop' : undefined}
+                className={`transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu${chromePopping === 'zoom-out' ? ' anet-chrome-pop' : ''}`}
                 data-topo-chrome-zoom-out-icon
               ><path d="M5 12h14" /></svg>
             </button>
@@ -8205,6 +9986,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 // R347: letter-spacing hover tween — extends R344/R345
                 // hover-letter-spacing family into the chrome strip.
                 letterSpacing: hoveredZoomLevel ? '0.5px' : '0',
+                // Round 420 / Loop: zoom-level readout gains a SECOND
+                // hover axis — fontWeight 500 → 600 on hover. Sibling
+                // to R347 (same element, hover letter-spacing tween).
+                // The chrome strip's only data display now has a two-
+                // axis hover signature (letter-spacing + fontWeight),
+                // matching the R416 chip-row chip digit hover-bold
+                // pattern at the chrome scope. Pre-R420 hovering only
+                // spread the digits 0 → 0.5px; the weight stayed at
+                // R332's 'font-medium' (500) baseline. Post-R420
+                // hover lifts BOTH letter-spacing AND weight so the
+                // percent reads with the same data-tier emphasis
+                // intensification the chip-row chips do on hover.
+                // Inline fontWeight overrides the className's
+                // 'font-medium' since they target the same property.
+                // 200ms transition list extends to font-weight for
+                // smooth easing. data-topo-chrome-zoom-level-hover
+                // attr surfaces the hover state for tests.
+                fontWeight: hoveredZoomLevel ? 600 : 500,
                 /* Round 264 / Loop: zoom level readout gains theme-toggle
                    transition. The span has theme-driven color (pal.
                    legendText) + border-x (pal.containerBorder via the
@@ -8213,7 +10012,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    on theme flip while siblings eased. Sibling treatment
                    to the nodeSize + zoom wrapper transitions added this
                    round. */
-                transition: 'color 200ms ease-out, border-color 200ms ease-out, letter-spacing 200ms ease-out',
+                transition: 'color 200ms ease-out, border-color 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out',
               }}
               title="Current zoom level"
             >
@@ -8224,18 +10023,22 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-topo-chrome-zoom-in
               data-topo-chrome-zoom-in-popping={chromePopping === 'zoom-in' ? 'true' : 'false'}
               // R196: press-state (mirror of zoom-out above).
-              className="px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // R352: `group` lets the inner svg respond via group-hover.
+              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
               style={{ color: pal.legendText }}
               aria-label="Zoom in"
               title="Zoom in (+)"
             >
               {/* R186: icon pop on click. Same one-shot CSS animation
                   as zoom-out; React removes the class after 240ms. */}
+              {/* R352 sibling — zoom-in icon picks up the same
+                  group-hover:scale-110 family. Mirror change at
+                  the zoom-out icon above. */}
               <svg
                 width="12" height="12" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
                 aria-hidden
-                className={chromePopping === 'zoom-in' ? 'anet-chrome-pop' : undefined}
+                className={`transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu${chromePopping === 'zoom-in' ? ' anet-chrome-pop' : ''}`}
                 data-topo-chrome-zoom-in-icon
               ><path d="M12 5v14M5 12h14" /></svg>
             </button>
@@ -8244,9 +10047,35 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             onClick={() => { armResetSpin(); resetView(); }}
             data-topo-chrome-reset
             data-topo-chrome-reset-spinning={resetSpinning ? 'true' : 'false'}
+            data-topo-chrome-reset-hover={hoveredReset ? 'true' : 'false'}
+            // R350: hover state drives the icon transform below.
+            onMouseEnter={() => setHoveredReset(true)}
+            onMouseLeave={() => setHoveredReset(false)}
+            onFocus={() => setHoveredReset(true)}
+            onBlur={() => setHoveredReset(false)}
             // R196: press-state deepens before R184 reset-spin fires on
             // release — mouse-down dim then 450ms spin = full handshake.
-            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+            /* Round 400 / Loop · milestone: chrome reset + fullscreen
+               buttons gain hover:-translate-y-px lift — closes the
+               hover-lift gesture vocabulary across every standalone
+               interactive HTML element in TopoGraph. Segmented
+               controls (zoom -/+, nodeSize S/M/L, Layout Ring/Grid)
+               intentionally stay planted: lifting one segment of a
+               unified strip would tear the visual unity of the
+               segmented control. Only the standalone chrome buttons
+               (reset, fullscreen) get the lift.
+               Gesture vocabulary post-R400 (now complete across HTML):
+                 chip-row chips (3×)  -1 px  R398, R399
+                 filter pin pills (4×) -1 px R397
+                 recent-signal row    -1 px  R143
+                 legend row           -1 px  R144
+                 reset button         -1 px  R400 (this round)
+                 fullscreen button    -1 px  R400 (this round)
+               Every standalone interactive HTML surface in TopoGraph
+               now lifts on hover. data-topo-chrome-reset-hover-lift
+               attr surfaces the lift for tests. */
+            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+            data-topo-chrome-reset-hover-lift="true"
             style={{ background: pal.legendBox.fill, borderColor: pal.containerBorder, color: pal.legendText }}
             aria-label="Reset view"
             title="Reset zoom + pan (0, or double-click the canvas)"
@@ -8273,6 +10102,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               aria-hidden
               className={resetSpinning ? 'anet-reset-spin' : undefined}
               data-topo-chrome-reset-icon
+              // R350: hover-rotate preview of the R184 click-spin.
+              // Gated on !resetSpinning so the anet-reset-spin keyframe
+              // owns transform during its 450ms run. transformOrigin
+              // 'center' so rotation pivots around the icon's centre
+              // (default would be top-left and the icon would arc).
+              style={{
+                transform: hoveredReset && !resetSpinning ? 'rotate(-8deg)' : 'rotate(0deg)',
+                transformOrigin: 'center',
+                transition: 'transform 200ms ease-out',
+              }}
+              data-topo-chrome-reset-icon-hover={hoveredReset && !resetSpinning ? 'true' : 'false'}
             >
               <path d="M3 12a9 9 0 1 0 9-9 9 9 0 0 0-6.4 2.6L3 8" />
               <path d="M3 3v5h5" />
@@ -8306,11 +10146,18 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                its inactive state benefits from the same "hover previews
                active state" idiom R163 designed. Sibling treatment to
                the nodeSize buttons at line ~6711. */
-            className={`p-1.5 rounded-md border transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
+            // R353: `group` lets the inner svg respond via group-hover —
+            // sibling to R352 zoom buttons. Closes the chrome-strip per-
+            // icon hover-affordance arc (zoom-out / zoom-in / reset /
+            // fullscreen now all carry an icon-level hover gesture in
+            // addition to the bg hover).
+            // R400: hover translateY(-1px) lift — see reset button above for family doc.
+            className={`group p-1.5 rounded-md border hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
               isFullscreen
                 ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25'
                 : 'hover:bg-cyan-500/5 active:bg-cyan-500/15'
             }${chromePopping === 'fullscreen' ? ' anet-chrome-pop' : ''}`}
+            data-topo-chrome-fullscreen-hover-lift="true"
             style={{
               borderColor: pal.containerBorder,
               ...(isFullscreen
@@ -8325,12 +10172,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 at the reset icon above. data-topo-chrome-fullscreen-
                 icon attribute exposes BOTH variants (entered / exited)
                 for the round's stroke-width regression probe. */}
+            {/* Round 353 / Loop: fullscreen icon (both enter + exit
+                variants) picks up the R352 family group-hover:scale-110.
+                Pre-R353 hovering the button only changed the bg; the
+                icon stayed still. R353 lifts the icon 10 % on hover —
+                same gesture vocabulary as the zoom buttons. transform-
+                gpu hint promotes the svg to its own compositor layer
+                for crisper edges during the scale tween. Closes the
+                chrome-strip per-icon hover-affordance arc. */}
             {isFullscreen ? (
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden data-topo-chrome-fullscreen-icon="exit">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu" data-topo-chrome-fullscreen-icon="exit">
                 <path d="M8 3v4a1 1 0 0 1-1 1H3M21 8h-4a1 1 0 0 1-1-1V3M3 16h4a1 1 0 0 1 1 1v4M16 21v-4a1 1 0 0 1 1-1h4" />
               </svg>
             ) : (
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden data-topo-chrome-fullscreen-icon="enter">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden className="transition-transform duration-200 ease-out group-hover:scale-110 transform-gpu" data-topo-chrome-fullscreen-icon="enter">
                 <path d="M3 8V5a2 2 0 0 1 2-2h3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M21 16v3a2 2 0 0 1-2 2h-3" />
               </svg>
             )}