@sleep2agi/agent-network-dashboard 0.5.1-preview.2 → 0.5.1-preview.20

package/app/components/TopoGraph.tsx

@@ -1026,6 +1026,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
@@ -1826,7 +1862,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 +1889,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>
@@ -2259,7 +2311,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 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 +2328,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 +2366,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 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 +2377,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 +2431,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 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 +2442,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>
@@ -2395,7 +2494,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={link.count}
               data-filter-match-aliases={`${link.from},${link.to}`}
               data-active-filter-edge-hot={isHot ? 'true' : 'false'}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in anet-topo-chip-focus"
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus"
               title={`${link.from} → ${link.to} (${link.count} msg${link.count === 1 ? '' : 's'}${isHot ? ', hot lane · ≥ 10' : ''}) — click to clear`}
               onClick={() => setPinnedEdgeKey(null)}
               style={{
@@ -2439,7 +2538,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 +2863,40 @@ 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. */}
+                    <span
+                      data-vendor-letter-glyph={v.initial}
+                      data-vendor-letter-glyph-hover={hoveredVendor === v.initial ? 'true' : 'false'}
+                      style={{
+                        color: v.color,
+                        display: 'inline-block',
+                        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
@@ -2909,14 +3055,46 @@ 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)})`
                     : `rgba(34, 211, 238, ${alpha.toFixed(2)})`;
+                  // Round 342 / Loop: active-links chip freshness suffix
+                  // wrapper text-gray-500 → text-gray-400 (R317
+                  // subordinate-text-lift family applied to chrome
+                  // inactive Layout toggle + R333 vendor count suffix).
+                  // The "last 5s ago" suffix is chip-subordinate
+                  // metadata; gray-500 sat near-invisible against the
+                  // chip's outer color, gray-400 lifts it into the band
+                  // where the eye reads it as deliberate freshness
+                  // annotation. The freshness DOT keeps its own inline
+                  // color: dotColor — the lift only affects the trailing
+                  // literal "last {rel}" text.
                   return (
-                    <span className="text-gray-500">
+                    // 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)}
@@ -6213,7 +6391,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
@@ -6265,7 +6453,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
@@ -6326,8 +6524,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.
@@ -6340,6 +6538,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
@@ -6808,17 +7021,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' }}
                         />
                       );
@@ -7100,6 +7334,17 @@ 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. */}
                   <text
                     x="115" y="82"
                     textAnchor="middle"
@@ -7107,12 +7352,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     fontSize="9"
                     fontFamily="monospace"
                     fontStyle="italic"
-                    letterSpacing="0.2"
+                    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' }}
+                    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>
@@ -7164,7 +7409,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))'
@@ -7187,7 +7437,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
@@ -7251,7 +7503,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',
@@ -7793,7 +8052,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
@@ -7872,13 +8137,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   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'}
+                  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'}
                   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>
@@ -8031,7 +8300,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 (−)"
@@ -8039,11 +8309,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>
@@ -8089,11 +8373,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
@@ -8102,7 +8392,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"
             >
@@ -8113,18 +8403,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>
@@ -8133,6 +8427,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"
@@ -8162,6 +8462,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" />
@@ -8195,7 +8506,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'
@@ -8214,12 +8530,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>
             )}