@sleep2agi/agent-network-dashboard 0.5.1-preview.4 → 0.5.1-preview.41

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";
@@ -1026,6 +1046,42 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // navigation footer. Drives the on-hover opacity boost + underline
   // that signals interactivity, mirroring the hoveredHub idiom above.
   const [hoveredRecentMore, setHoveredRecentMore] = useState(false);
+  // Round 346 / Loop: minimap-container hover affordance. The minimap
+  // is a click-target (role=button at line ~7810, recenter-on-click +
+  // Enter→resetView) but pre-R346 nothing visually changed on hover —
+  // the only hint was the `cursor: crosshair` style. R346 lifts the
+  // viewport rect (strokeWidth 1.5 → 1.75 + opacity 0.9 → 1.0) when
+  // the user enters the minimap, marking "this is the recenter target
+  // and it's alive". Sibling polish to the R332 minimap rounded-md →
+  // rounded-lg corner family — that round refined geometry, this one
+  // gives the viewport indicator inside the geometry a hover state.
+  // 280ms ease-out transition list matches R199 smoothView vocabulary
+  // so the visual joins the existing rhythm on the same rect.
+  const [hoveredMinimap, setHoveredMinimap] = useState(false);
+  // Round 347 / Loop: zoom-level readout hover-state letter-spacing
+  // tween (0 → 0.5 px). The readout sandwiched between zoom-out /
+  // zoom-in is a passive percent display — pre-R347 it had no hover
+  // feedback at all (only a `title` tooltip). R347 extends the R344
+  // (`+N more flows` footer) + R345 (panel titles) hover-letter-
+  // spacing family from panel/footer surfaces into the HTML chrome
+  // strip. Hovering the readout spreads its digits 0.5 px, signalling
+  // "this is alive". tabular-nums + minWidth: 46 from R225 still lock
+  // the column so the tween doesn't shove neighbouring controls.
+  // 200ms ease-out joins the existing R264 color/border transition
+  // list on the same span.
+  const [hoveredZoomLevel, setHoveredZoomLevel] = useState(false);
+  // Round 350 / Loop: reset-button icon hover-rotate preview of the
+  // R184 click-spin. Pre-R350 hovering the reset button only changed
+  // the button bg (white/5); the icon inside stayed perfectly still.
+  // R350 nudges the icon -8° on hover — a tactile hint that this
+  // button rotates the icon on click. When the click fires, the
+  // R184 anet-reset-spin keyframe animation overrides the hover
+  // transform for its 450 ms run (CSS animations win over transitions
+  // on the same property); when the animation ends + React removes
+  // the className, the inline transform eases back to whatever the
+  // hover state says — either -8° (still hovering) or 0 (mouse left).
+  // 350th-round milestone polish.
+  const [hoveredReset, setHoveredReset] = useState(false);
   // R135: panel-wide hover-elevation. The recent-signal + legend
   // panels both already host clickable rows (R56/R116 recent rows,
   // R55/R61 legend rows) and a clickable footer (R133), so the
@@ -1787,12 +1843,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               while honoring R328's wider baseline rhythm. data-topo-
               chrome-layout-trailer attr unchanged — it still marks
               the boundary surface for the gap probe. */}
+          {/* Round 375 / Loop: Layout-toggle wrapper rounded-md → rounded-
+              lg (6 → 8 px). Extends the corner-radius cascade family
+              to the chrome-strip layout-toggle wrapper:
+                R330 canvas wrapper        rounded-xl  12 px
+                R331 SVG panels            rx=10       10 px
+                R332 minimap container     rounded-lg   8 px
+                R375 Layout-toggle wrapper rounded-lg   8 px  (this round)
+              Pre-R375 the wrapper at rounded-md (6 px) was the only
+              chrome-strip container still using the smaller corner
+              radius — both R330 outer wrapper and R332 minimap sit at
+              ≥ 8 px, so the Layout toggle's 6 px stood out as a
+              tighter corner against the family. R375 brings it into
+              the rounded-lg tier where the minimap already lives.
+              Pure paint change — overflow-hidden still clips the
+              inner buttons' bg-cyan-500/15 tints; no layout shift.
+              R268 border-color + 200ms transition + R329 mr-0.5 +
+              data-topo-chrome-layout-trailer all preserved. */}
           <div
-            className="mr-0.5 inline-flex rounded-md border overflow-hidden"
+            className="mr-0.5 inline-flex rounded-lg border overflow-hidden"
             style={{ borderColor: pal.containerBorder, transition: 'border-color 200ms ease-out' }}
             role="group"
             aria-label="Topology layout"
             data-topo-chrome-layout-trailer
+            data-topo-chrome-layout-radius="rounded-lg"
           >
             <button
               onClick={() => { popChrome('layout-ring'); if (layout !== 'ring') toggleLayout(); }}
@@ -1826,7 +1900,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  weight; cyan-400/60 + ring-inset retained. The
                  R163/R196 hover/active deeps + R249 chrome-pop
                  click feedback continue unchanged. */
-              className={`px-2.5 py-1 transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              // R351: hover:tracking-wide extends the R344/R345/R347
+              // hover-letter-spacing family to a 4th surface (chrome-
+              // strip Ring/Grid pair). transition-colors className
+              // dropped in favour of an inline transition spec that
+              // bundles bg/color (150ms ease) + letter-spacing
+              // (200ms ease-out) — Tailwind's transition-colors
+              // doesn't list letter-spacing, so without this the
+              // hover:tracking-wide would snap. Sibling change on
+              // the Grid button below.
+              className={`px-2.5 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out' }}
             >
               Ring
             </button>
@@ -1843,14 +1927,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // Round 306 / Loop: focus-visible:ring-2 → ring-1 sibling
               // change to Ring above — unifies focus-ring width across
               // all chrome buttons.
-              className={`px-2.5 py-1 border-l transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
+              // R351 sibling — Grid button picks up hover:tracking-wide
+              // + inline transition spec. Same vocabulary as Ring.
+              className={`px-2.5 py-1 border-l focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
               /* Round 268 / Loop: Grid button's left border (the
                  internal divider between Ring and Grid) picks up
                  pal.containerBorder, matching the wrapper change at
                  line ~1460 and the chrome strip's segmented borders
-                 (nodeSize, zoom). transition-colors className covers
-                 the border-color eased on theme toggle. */
-              style={{ borderColor: pal.containerBorder }}
+                 (nodeSize, zoom). The R268 transition-colors className
+                 used to carry the border-color ease; R351 unfolds the
+                 transition list into the inline spec below so the
+                 letter-spacing tween rides alongside without snapping
+                 the border-color flip — border-color 200ms ease-out
+                 keeps R268's theme-toggle smoothness intact. */
+              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out' }}
             >
               Grid
             </button>
@@ -2011,7 +2101,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       pattern: small label spans demote, value stays
                       prominent. data-working-chip-unit exposes the
                       span for tests. */}
-                  {workingCount}<span className="opacity-70" data-working-chip-unit> working</span>
+                  {/* Round 362 / Loop: digit picks up font-semibold
+                      (fw 500 → 600) for within-chip weight tier. The
+                      chip's outer className stays at font-medium (R313
+                      data-weight baseline); the digit overrides to
+                      semibold so it reads heavier than its " working"
+                      unit (which keeps fw 500 + R338 opacity-70).
+                      Joins the R333-R341 chip-internal-hierarchy arc
+                      at the chip-count scope. Sibling edits on the
+                      online + active-links chip digits below. data-
+                      working-chip-digit attr exposes the digit span. */}
+                  <span className="font-semibold" data-working-chip-digit>{workingCount}</span><span className="opacity-70" data-working-chip-unit> working</span>
                 </span>
                 <span
                   // Round 201 / Loop: online chip — mirror of the working
@@ -2074,7 +2174,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   }}
                 >
                   {/* R337 sibling — online chip unit demotion. */}
-                  {onlineNodes.length}<span className="opacity-70" data-online-chip-unit> online</span>
+                  {/* R362 sibling — online-chip digit gains font-semibold. */}
+                  <span className="font-semibold" data-online-chip-digit>{onlineNodes.length}</span><span className="opacity-70" data-online-chip-unit> online</span>
                 </span>
               </>
             );
@@ -2201,8 +2302,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')}
@@ -2259,7 +2397,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"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedStatus(null)}
               style={{
@@ -2273,12 +2414,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedStatus}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span>{pinnedStatus}<span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear ${pinnedStatus} filter`}
                 onClick={(e) => { e.stopPropagation(); setPinnedStatus(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2297,7 +2452,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"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedGroup(null)}
               style={{
@@ -2307,12 +2463,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedGroup}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span>{pinnedGroup}<span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear group filter ${pinnedGroup}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedGroup(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2347,7 +2517,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"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear vendor filter'}
               onClick={() => setPinnedVendor(null)}
               style={{
@@ -2357,12 +2528,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 cursor: 'pointer',
               }}
             >
-              <span><span className="hidden sm:inline opacity-70" data-filter-prefix>filter: </span>{pinnedVendor}<span className="opacity-70 tabular-nums" data-filter-pill-count> · {matchCount}</span></span>
+              <span><span className="hidden sm:inline opacity-70 transition-opacity duration-200 group-hover:opacity-100" data-filter-prefix>filter: </span>{pinnedVendor}<span className="opacity-70 tabular-nums transition-opacity duration-200 group-hover:opacity-100" data-filter-pill-count> · {matchCount}</span></span>
               <button
                 type="button"
                 aria-label={`Clear vendor filter ${pinnedVendor}`}
                 onClick={(e) => { e.stopPropagation(); setPinnedVendor(null); }}
-                className="ml-0.5 leading-none hover:opacity-70"
+                /* Round 356 / Loop: filter pin pill × buttons gain
+                   hover:scale-110 (Tailwind 4 modern CSS `scale` property,
+                   not legacy transform). Sibling polish to R354 vendor
+                   letter glyph + R350/R352/R353 chrome icon hover-scales.
+                   Pre-R356 the × had only hover:opacity-70 — the target
+                   dimmed under cursor but didn't lift. R356 adds a 10 %
+                   scale on hover so the click-target reads as "press me"
+                   alongside the dim. transform-gpu hint promotes the
+                   button to its own compositor layer for crisper edges
+                   during the scale tween. transition-transform duration-
+                   200 matches the chrome icon hover-scale timing family.
+                   inline-block is default for <button> so no display
+                   tweak needed. replace_all covers all 4 filter pin
+                   pills (status / group / vendor / edge) at once. */
+                className="ml-0.5 leading-none hover:opacity-70 transition-transform duration-200 ease-out hover:scale-110 transform-gpu"
                 style={{ background: 'transparent', color: 'inherit', cursor: 'pointer', padding: 0 }}
               >×</button>
             </span>
@@ -2439,7 +2624,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>
@@ -2750,7 +2949,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
@@ -2884,7 +3140,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     the 5th chip surface in the R333/R335/R336/R337
                     chip-internal-hierarchy arc. data-active-links-
                     chip-unit exposes the unit span for tests. */}
-                {flowLinks.length}<span className="opacity-70" data-active-links-chip-unit> active link{flowLinks.length === 1 ? '' : 's'}</span>
+                {/* R362 sibling — active-links chip digit gains font-semibold. */}
+                <span className="font-semibold" data-active-links-chip-digit>{flowLinks.length}</span><span className="opacity-70" data-active-links-chip-unit> active link{flowLinks.length === 1 ? '' : 's'}</span>
                 {rel ? (() => {
                   // Round 161 / Loop: extend R160's recency-pip
                   // vocabulary up one scope — from per-flow row to
@@ -2909,8 +3166,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)})`
@@ -2927,7 +3184,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)}
@@ -3695,7 +3973,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
@@ -3895,12 +4200,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-
@@ -4203,6 +4529,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     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}
@@ -4210,8 +4553,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={pal.flowPath}
                   strokeWidth="1"
                   strokeDasharray="2 12"
+                  strokeLinecap="round"
                   opacity={Math.min(1, (isLight ? 0.4 : 0.75) * fresh * edgeOpacityMul)}
                   data-edge-flow-rail={link.key}
+                  data-edge-flow-rail-linecap="round"
                   style={{ transition: 'opacity 300ms ease-out, stroke 300ms ease-out' }}
                 />
                 {!reducedMotion && (
@@ -4576,14 +4921,55 @@ 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. */}
                       <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 : 1.25}
+                        opacity={isLight ? 0.95 : 0.85}
                         data-edge-badge-lifted={(isHoveredEdge || isPinned) ? 'true' : 'false'}
+                        data-edge-badge-stroke-width-rest="1.25"
+                        data-edge-badge-opacity={isLight ? 0.95 : 0.85}
                         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
@@ -4622,11 +5008,39 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         x={badgeX} y={badgeY + 3}
                         textAnchor="middle"
                         fill={pal.legendHeadline}
-                        fontSize="10"
+                        /* Round 361 / Loop: edge midpoint badge text
+                           fontSize 10 → 11. Sibling visual-weight bump
+                           to R360 hub digit 11 → 12. The badge digit
+                           is the per-edge equivalent of the hub digit
+                           — a high-information scalar (link.count) at
+                           a stable canvas position. Pre-R361 fontSize=
+                           10 + R220 letter-spacing 0.4 + R224 tabular-
+                           nums made the digit READABLE but small
+                           against the r=9 / 18-px badge envelope;
+                           fontSize=11 nudges the glyph ~10 % bigger
+                           (bbox ~7×10 px from ~6×9 px) so the count
+                           reads more cleanly at glance — still well
+                           inside the r=9 idle circle and the r=10.5
+                           hover/pin lift (R164). y=badgeY+3 empirical
+                           vertical centring kept (1px drift at the
+                           bumped size is below the noise floor in
+                           the on-curve flow path).
+                           Visual-weight bump family:
+                             R287 minimap viewport stroke 1 → 1.5
+                             R295 legend swatch base radius 5.5 → 6
+                             R359 recent-row pip base radius 1.6 → 1.8
+                             R360 hub digit fontSize 11 → 12
+                             R361 edge-badge digit fontSize 10 → 11 (this round)
+                           data-edge-badge-text-font-size attr exposes
+                           the value for tests. R220 pin/hot letter-
+                           spacing tween + R224 tabular-nums + R188
+                           stroke-width pin/hot transitions all preserved. */
+                        fontSize="11"
                         fontFamily="monospace"
                         fontWeight="700"
                         data-edge-badge-text={link.key}
                         data-edge-badge-text-pin={(isPinned || isHot) ? 'true' : 'false'}
+                        data-edge-badge-text-font-size="11"
                         style={{
                           pointerEvents: 'none',
                           fontVariantNumeric: 'tabular-nums',
@@ -4853,11 +5267,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 textAnchor="middle"
                 dy="0.36em"
                 fill={isLight ? '#d1fae5' : '#ecfdf5'}
-                fontSize="11"
+                /* Round 360 / Loop: hub working-count digit fontSize 11
+                   → 12. The hub is the canvas's focal point — its digit
+                   is the most-read scalar on the whole topology. R130
+                   sized it at 11 (well inside the r=10 / 20-px core);
+                   R360 nudges it to 12 (~13 px wide × 12 px tall, still
+                   well inside the 20-px diameter) for ~9 % more presence.
+                   Sibling visual-weight bump family:
+                     R287 minimap viewport stroke 1 → 1.5
+                     R295 legend swatch base radius 5.5 → 6
+                     R359 recent-row pip radius 1.6 → 1.8
+                     R360 hub digit fontSize 11 → 12  (this round)
+                   The R209 scale-1.08-on-hub-hover, R225 tabular-nums,
+                   R253 fill transition, R213 always-mount opacity gate
+                   all preserved. data-topo-hub-working-count-font-size
+                   attr exposes the value for tests. */
+                fontSize="12"
                 fontFamily="monospace"
                 fontWeight="700"
                 opacity={workingCount > 0 ? 1 : 0}
                 data-topo-hub-working-count={workingCount}
+                data-topo-hub-working-count-font-size="12"
                 data-topo-hub-working-count-hovered={hoveredHub ? 'true' : 'false'}
                 data-topo-hub-working-count-visible={workingCount > 0 ? 'true' : 'false'}
                 // Round 209 / Loop: hub workingCount digit scales 1.0 →
@@ -4898,12 +5328,33 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 {workingCount}
               </text>
             {/* decorative highlight (visible when workingCount === 0) */}
+            {/* Round 365 / Loop: hub-center 'lit-lamp' decorative highlight
+                circle r 5 → 5.5. Sibling visual-weight bump family —
+                each round lifts one canvas anchor's geometric presence
+                without disturbing its bbox envelope:
+                  R287 minimap viewport stroke 1 → 1.5
+                  R295 legend swatch base radius 5.5 → 6
+                  R359 recent-row pip base radius 1.6 → 1.8
+                  R360 hub digit fontSize 11 → 12
+                  R361 edge-badge digit fontSize 10 → 11
+                  R365 hub-highlight base radius 5 → 5.5  (this round)
+                The highlight only renders when workingCount === 0
+                (decorative 'lamp lit but idle' state per R130 + R213
+                always-mount opacity-gate). At idle, the 0.5-px radius
+                bump (21 % area, π*5.5² / π*5² = 1.21) lifts the lamp's
+                presence — still well inside the r=10 hub-core (R130).
+                opacity=0 when working preserved so the hub-digit's R130
+                takeover stays seamless. R213 always-mount opacity-gate
+                + 300ms opacity transition + pointerEvents:none all
+                preserved. data-topo-hub-highlight-radius attr exposes
+                the value for tests. */}
             <circle
-              cx={cx} cy={cy} r="5"
+              cx={cx} cy={cy} r="5.5"
               fill="#d1fae5"
               opacity={workingCount > 0 ? 0 : 0.9}
               data-topo-hub-highlight
               data-topo-hub-highlight-visible={workingCount > 0 ? 'false' : 'true'}
+              data-topo-hub-highlight-radius="5.5"
               style={{
                 pointerEvents: 'none',
                 transition: 'opacity 300ms ease-out',
@@ -4940,9 +5391,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               fill="none"
               stroke={isLight ? '#059669' : '#10b981'}
               strokeWidth="1.5"
-              opacity={hoveredHub ? (isLight ? 0.85 : 0.7) : 0}
+              /* 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-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
@@ -6224,7 +6690,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               x="0" y="0" width="230" height="88" rx="10"
               fill={pal.legendBox.fill}
               stroke={pal.legendBox.stroke}
-              opacity={isLight ? 0.97 : 0.92}
+              // Round 348 / Loop: recent-signal panel rect opacity hover-
+              // state bump — joins the panel-hover cue stack (R135 drop-
+              // shadow boost + R345 title letter-spacing tween 0.3 → 0.4
+              // + R266 fill theme-flip). Cyber 0.92 → 0.97, light 0.97 →
+              // 1.0 on hoveredPanel === 'recent'. The panel "solidifies"
+              // on hover — pure paint-level change, geometry-safe (bbox
+              // unchanged so topo-overlap-test invariants hold). The
+              // R247 transition list already includes `opacity 200ms
+              // ease-out` so the value tween is automatic. Sibling
+              // change at legend panel rect below (~line 7222).
+              opacity={hoveredPanel === 'recent' ? (isLight ? 1 : 0.97) : (isLight ? 0.97 : 0.92)}
               style={{
                 /* R135: drop-shadow intensifies on panel hover. Base
                    shadow (2px / 6px blur) signals card elevation
@@ -6276,7 +6752,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 title (line ~6556) — both panels share the same
                 editorial-text-spacing convention. data-recent-panel-
                 title handle unchanged so R266 test still resolves. */}
-            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight="700" letterSpacing="0.3" style={{ transition: 'fill 200ms ease-out' }} data-recent-panel-title>recent signal</text>
+            {/* Round 345 / Loop: recent-signal panel title gains
+                letter-spacing tween 0.3 → 0.4 on panel hover.
+                hoveredPanel === 'recent' is set by the panel <g>
+                wrapper's onMouseEnter (line ~6263 area). Sibling to
+                R344 hover-letter-spacing applied to the +N more
+                flows footer — same gesture vocabulary at a panel-
+                title scope: hovering the panel chrome spreads the
+                title 0.1 px, signalling "this is a coherent unit
+                you're entering". transition list extends letter-
+                spacing 200ms ease-out alongside existing fill 200ms. */}
+            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight="700" letterSpacing={hoveredPanel === 'recent' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out' }} data-recent-panel-title>recent signal</text>
             {/* R96: header count now matches what the rows show. Pre-R96
                 this read "X msgs" off the raw messages array, but the
                 rows below render DEDUPED flowLinks — so a fleet with 10
@@ -6337,8 +6823,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.
@@ -6351,6 +6837,21 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   textAnchor="end"
                   fontSize="10"
                   fontFamily="monospace"
+                  // Round 349 / Loop: editorial letter-spacing 0.2 on the
+                  // recent-signal panel header count. Sits one tier below
+                  // the R301 panel title letterSpacing="0.3" so the panel
+                  // header reads as a 2-step hierarchy (title 0.3 / count
+                  // 0.2). Sibling change on the legend panel count below
+                  // closes the panel-pair editorial symmetry. Joins the
+                  // R285 / R289 / R301 / R302 / R304 / R325 editorial-
+                  // letterspacing tier at the panel-summary scope. The
+                  // R162 freshness fill, R225 tabular-nums, R311 fw=600,
+                  // R336 unit-tspan opacity-0.7 split all preserved —
+                  // the tier propagates to all descendant tspans via
+                  // SVG inheritance. data-recent-panel-count-letter-
+                  // spacing exposes the value for tests.
+                  letterSpacing="0.2"
+                  data-recent-panel-count-letter-spacing="0.2"
                 >
                   {/* Round 225 / Loop: tabular-nums on the panel-header
                       flow-count tspan. The "{N} flows" string lives in
@@ -6819,17 +7320,38 @@ 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. */
+                          r={1.8}
                           fill={pal.legendAccent}
                           opacity={alpha}
                           data-recent-row-freshness={link.key}
                           data-recent-row-freshness-alpha={alpha.toFixed(2)}
+                          data-recent-row-freshness-radius="1.8"
                           style={{ pointerEvents: 'none', transition: 'opacity 200ms ease-out' }}
                         />
                       );
@@ -6859,8 +7381,28 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       fill={isRowActive ? pal.legendHeadline : pal.legendText}
                       fontSize="9"
                       fontFamily="monospace"
+                      /* Round 363 / Loop: recent-row text fontWeight 400
+                         → 500 (font-medium tier). At fontSize=9 the
+                         default-weight 400 glyphs read thin against the
+                         panel chrome (pal.legendBox.fill with 0.92/0.97
+                         opacity); the 100-weight bump lifts the alias→
+                         alias text into the legibility band without
+                         changing geometry. The R320 count tspan fw=600
+                         (cold) / fw=700 (hot) override still wins
+                         locally via inline fontWeight on the inner
+                         tspan, so the count-vs-alias hierarchy stays
+                         intact:
+                           alias  fw 500  (R363, this round)
+                           count  fw 600/700  (R320)
+                         Sibling typography lift to R362 chip-row digit
+                         500 → 600 — both nudge a within-element data
+                         tier without disturbing the surrounding family
+                         baseline. data-recent-row-text-font-weight attr
+                         exposes the value for tests. */
+                      fontWeight="500"
                       data-recent-row-text={link.key}
                       data-recent-row-text-pinned={isRowPinned ? 'true' : 'false'}
+                      data-recent-row-text-font-weight="500"
                       style={{
                         transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
                         letterSpacing: isRowPinned ? '0.5px' : '0px',
@@ -7111,6 +7653,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       preserved for the <title> tooltip — only the SVG
                       render splits. data-recent-panel-more-unit exposes
                       the unit tspan for tests. */}
+                  {/* Round 344 / Loop: footer hover gains letter-spacing
+                      tween 0.2 → 0.3. R325 set rest letter-spacing
+                      0.2 to join the editorial-spacing family; R344
+                      adds a 0.1px hover spread that layers on top of
+                      R195 cyan fill + R325 spacing + R133 underline
+                      so the footer reads "lit up and spaced" on
+                      hover — sibling to R218/R219/R220 pin-signature
+                      letter-spacing family applied to a hover-only
+                      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"
@@ -7118,12 +7688,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fontSize="9"
                     fontFamily="monospace"
                     fontStyle="italic"
-                    letterSpacing="0.2"
+                    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'}
-                    style={{ transition: 'opacity 150ms ease-out, fill 200ms ease-out' }}
+                    data-recent-panel-more-font-weight="500"
+                    style={{ transition: 'opacity 150ms ease-out, fill 200ms ease-out, letter-spacing 200ms ease-out' }}
                   >
                     {`+ ${moreCount}`}
                     <tspan opacity="0.7" data-recent-panel-more-unit>{` more flow${moreCount === 1 ? '' : 's'}`}</tspan>
@@ -7175,7 +7747,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               x="0" y="0" width="224" height="88" rx="10"
               fill={pal.legendBox.fill}
               stroke={pal.legendBox.stroke}
-              opacity={isLight ? 0.97 : 0.92}
+              // R348 sibling — legend panel rect opacity hover-state
+              // bump 0.92 → 0.97 (cyber) / 0.97 → 1 (light) on
+              // hoveredPanel === 'legend'. Pairs with the recent-signal
+              // panel rect above so the two corner panels' hover cues
+              // stay symmetric. Geometry-safe (paint-only).
+              opacity={hoveredPanel === 'legend' ? (isLight ? 1 : 0.97) : (isLight ? 0.97 : 0.92)}
               style={{
                 filter: hoveredPanel === 'legend'
                   ? (isLight ? 'drop-shadow(0 4px 12px rgba(15,23,42,0.14))'
@@ -7198,7 +7775,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 surrounding chrome eased; R266 closes both at once. */}
             {/* R301: sibling to recent-signal panel title above —
                 same letterSpacing 0.3 for editorial parity. */}
-            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight="700" letterSpacing="0.3" style={{ transition: 'fill 200ms ease-out' }} data-legend-panel-title>legend</text>
+            {/* R345 sibling — legend panel title same hover letter-
+                spacing tween 0.3 → 0.4 on panel hover. */}
+            <text x="13" y="21" fill={pal.legendHeadline} fontSize="12" fontFamily="monospace" fontWeight="700" letterSpacing={hoveredPanel === 'legend' ? '0.4' : '0.3'} style={{ transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out' }} data-legend-panel-title>legend</text>
             {/* Round 257 / Loop: legend panel header count picks up the
                 symmetric 13L/13R inner-padding pattern from the recent-
                 signal panel. Pre-R257 the legend header was 13px from
@@ -7262,7 +7841,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             <text
               x="211" y="21" textAnchor="end"
               fill={pal.legendAccent} fontSize="10" fontFamily="monospace" fontWeight="600"
+              // R349 sibling — legend panel header count picks up
+              // letterSpacing="0.2", one tier below the R301 panel
+              // title 0.3. Pairs with the recent-signal panel count
+              // letter-spacing above so the two corner panels' header
+              // typography stays editorially symmetric.
+              letterSpacing="0.2"
               data-legend-panel-count
+              data-legend-panel-count-letter-spacing="0.2"
               style={{
                 transition: 'fill 200ms ease-out',
                 fontVariantNumeric: 'tabular-nums',
@@ -7517,8 +8103,31 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fill={hoveredStatus === row.key || isPinned ? pal.legendHeadline : pal.legendText}
                     fontSize="11"
                     fontFamily="monospace"
+                    /* Round 364 / Loop: legend-row label fontWeight 400
+                       → 500. Sibling typography lift to R363 recent-row
+                       text fw 400 → 500. Both surfaces render small
+                       monospace text against panel chrome at fontSize
+                       9-11 where SVG-default fw 400 sits at the
+                       legibility floor. font-medium tier (500) gives
+                       the label a more deliberate-data register.
+                       The R309 per-row count text (separate element
+                       below at x=215 textAnchor=end) keeps its own
+                       fontWeight 600 inline override, so the count >
+                       label hierarchy stays intact at the legend
+                       scope same as R363 holds it at the recent-row
+                       scope:
+                         legend  label  fw 500  (R364, this round)
+                         legend  count  fw 600  (R309)
+                         recent  alias  fw 500  (R363)
+                         recent  count  fw 600/700  (R320)
+                       data-legend-row-label-font-weight attr exposes
+                       the value for tests. R219 letter-spacing pin
+                       tween + R55 fill transition + R181 always-mount
+                       pin ring all preserved. */
+                    fontWeight="500"
                     data-legend-row-label={row.key}
                     data-legend-row-label-pinned={isPinned ? 'true' : 'false'}
+                    data-legend-row-label-font-weight="500"
                     style={{
                       transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
                       letterSpacing: isPinned ? '0.5px' : '0px',
@@ -7804,7 +8413,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   resetView();
                 }
               }}
+              // R346: viewport rect hover affordance driven by parent.
+              onMouseEnter={() => setHoveredMinimap(true)}
+              onMouseLeave={() => setHoveredMinimap(false)}
+              onFocus={() => setHoveredMinimap(true)}
+              onBlur={() => setHoveredMinimap(false)}
               data-topo-minimap
+              data-topo-minimap-hovered={hoveredMinimap ? 'true' : 'false'}
             >
               <svg width={MW} height={MH} viewBox={`0 0 ${MW} ${MH}`} style={{ display: 'block' }}>
                 {/* Round 198 / Loop: minimap dots gain smooth status
@@ -7831,14 +8446,32 @@ 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}
                       fill={st.primary}
-                      opacity={isOn ? 0.9 : 0.5}
+                      opacity={isOn ? 0.9 : 0.6}
                       data-topo-minimap-dot={s.alias}
                       data-topo-minimap-dot-online={isOn ? 'true' : 'false'}
+                      data-topo-minimap-dot-opacity={isOn ? 0.9 : 0.6}
                       style={{
                         transition: 'opacity 200ms ease-out, fill 200ms ease-out, r 200ms ease-out',
                       } as React.CSSProperties}
@@ -7879,17 +8512,40 @@ 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. */}
                 <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))}
-                  fill="none" stroke={pal.legendAccent} strokeWidth="1.5" opacity="0.9"
+                  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-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'
-                      : 'none',
+                      ? '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'
+                      : 'stroke-width 200ms ease-out, opacity 200ms ease-out',
                   } as React.CSSProperties}
                 />
               </svg>
@@ -7944,8 +8600,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,
@@ -8025,8 +8695,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,
@@ -8042,7 +8716,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 (−)"
@@ -8050,11 +8725,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>
@@ -8100,11 +8789,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 chromePopping === 'zoom-in' || chromePopping === 'zoom-out'
                   ? 'true' : 'false'
               }
+              data-topo-chrome-zoom-level-hover={hoveredZoomLevel ? 'true' : 'false'}
+              onMouseEnter={() => setHoveredZoomLevel(true)}
+              onMouseLeave={() => setHoveredZoomLevel(false)}
               style={{
                 color: pal.legendText,
                 borderColor: pal.containerBorder,
                 minWidth: 46,
                 display: 'inline-block',
+                // R347: letter-spacing hover tween — extends R344/R345
+                // hover-letter-spacing family into the chrome strip.
+                letterSpacing: hoveredZoomLevel ? '0.5px' : '0',
                 /* Round 264 / Loop: zoom level readout gains theme-toggle
                    transition. The span has theme-driven color (pal.
                    legendText) + border-x (pal.containerBorder via the
@@ -8113,7 +8808,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    on theme flip while siblings eased. Sibling treatment
                    to the nodeSize + zoom wrapper transitions added this
                    round. */
-                transition: 'color 200ms ease-out, border-color 200ms ease-out',
+                transition: 'color 200ms ease-out, border-color 200ms ease-out, letter-spacing 200ms ease-out',
               }}
               title="Current zoom level"
             >
@@ -8124,18 +8819,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>
@@ -8144,6 +8843,12 @@ 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"
@@ -8173,6 +8878,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" />
@@ -8206,7 +8922,12 @@ 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).
+            className={`group p-1.5 rounded-md border transition-colors 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'
@@ -8225,12 +8946,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>
             )}