@sleep2agi/agent-network-dashboard 0.5.3-preview.0 → 0.5.3-preview.10

package/app/components/TopoGraph.tsx

@@ -1943,8 +1943,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // doesn't list letter-spacing, so without this the
               // hover:tracking-wide would snap. Sibling change on
               // the Grid button below.
-              className={`px-2.5 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
-              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out' }}
+              // Round 492 / Loop — add `active:scale-95` press feedback
+              // alongside R196's `active:bg-cyan-500/25` color-deepen.
+              // Pre-R492 the chrome-strip Ring/Grid buttons had color
+              // tactile (deeper cyan on mouse-down) + R249 chrome-pop
+              // on release, but no transform during the press itself —
+              // the button stayed planted between mouse-down and pop.
+              // Adding `active:scale-95` (5% compression) on the
+              // pressed pseudo-state, with `transform 150ms ease-out`
+              // bundled into the inline transition list, gives haptic-
+              // like push-back feedback. The press-down (down to 95%
+              // scale) eases in over 150ms in sync with the bg/color
+              // deepen; the release auto-springs back to scale-100 via
+              // the same transition, then R249's anet-chrome-pop class
+              // overlays the release-pop. Matching `transform-gpu`
+              // promotes the layer so the scale doesn't trigger
+              // layout/paint thrash. Sibling change on Grid below.
+              className={`px-2.5 py-1 focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide active:scale-95 transform-gpu ${layout === 'ring' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-ring' ? ' anet-chrome-pop' : ''}`}
+              style={{ transition: 'background-color 150ms ease, color 150ms ease, letter-spacing 200ms ease-out, transform 150ms ease-out' }}
             >
               Ring
             </button>
@@ -1963,7 +1979,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // all chrome buttons.
               // R351 sibling — Grid button picks up hover:tracking-wide
               // + inline transition spec. Same vocabulary as Ring.
-              className={`px-2.5 py-1 border-l focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${chromePopping === 'layout-grid' ? ' anet-chrome-pop' : ''}`}
+              // R492 sibling — Grid button picks up active:scale-95
+              // press feedback + transform in transition list. Same
+              // vocabulary as Ring above.
+              className={`px-2.5 py-1 border-l focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset hover:tracking-wide active:scale-95 transform-gpu ${layout === 'grid' ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'text-gray-400 hover:text-cyan-300 hover:bg-cyan-500/5 active:bg-cyan-500/15'} ${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
@@ -1973,8 +1992,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  transition list into the inline spec below so the
                  letter-spacing tween rides alongside without snapping
                  the border-color flip — border-color 200ms ease-out
-                 keeps R268's theme-toggle smoothness intact. */
-              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out' }}
+                 keeps R268's theme-toggle smoothness intact.
+                 R492 adds `transform 150ms ease-out` so active:scale-95
+                 eases smoothly. */
+              style={{ borderColor: pal.containerBorder, transition: 'background-color 150ms ease, color 150ms ease, border-color 200ms ease-out, letter-spacing 200ms ease-out, transform 150ms ease-out' }}
             >
               Grid
             </button>
@@ -2091,9 +2112,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // to R355 filter pin pill inner-span hover-brighten.
                   // Hover-brighten family extends from filter pills to
                   // chip-row chips at the inner-span scope.
+                  // Round 494 / Loop — chip-row working chip joins the
+                  // active:scale-95 press-feedback family (R492 Ring/Grid +
+                  // R493 chrome-strip rest). Gated on the clickable branch
+                  // (workingCount > 0) — when the chip is a placeholder
+                  // at count=0, scale-95 stays off to match the existing
+                  // R398 hover-lift conditional. Composes with hover:-
+                  // translate-y-px for the same lift-and-compress
+                  // tactile signature R493 brought to reset/fullscreen.
                   className={`group tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors transition-transform duration-200 ease-out transform-gpu ${
                     workingCount > 0
-                      ? 'bg-green-500/10 text-green-300 border-green-500/20 hover:bg-green-500/15 hover:border-green-500/30 hover:-translate-y-px'
+                      ? 'bg-green-500/10 text-green-300 border-green-500/20 hover:bg-green-500/15 hover:border-green-500/30 hover:-translate-y-px active:scale-95'
                       : 'bg-green-500/10 text-green-300 border-green-500/20'
                   }`}
                   data-chip-hover-lift={workingCount > 0 ? 'true' : 'false'}
@@ -2193,9 +2222,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      same digit-jitter physics on count crossings). */
                   // R398: hover translate-y lift on clickable variant — see working chip above.
                   // R414: `group` parent + inner unit span group-hover-brighten — see working chip above.
+                  // R494 sibling — online chip joins the active:scale-95 press
+                  // family (gated on onlineNodes.length > 0 clickable branch,
+                  // same conditional pattern as the working chip above).
                   className={`group tabular-nums font-medium px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-colors transition-transform duration-200 ease-out transform-gpu ${
                     onlineNodes.length > 0
-                      ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20 hover:bg-cyan-500/15 hover:border-cyan-500/30 hover:-translate-y-px'
+                      ? 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20 hover:bg-cyan-500/15 hover:border-cyan-500/30 hover:-translate-y-px active:scale-95'
                       : 'bg-cyan-500/10 text-cyan-300 border-cyan-500/20'
                   }`}
                   data-chip-hover-lift={onlineNodes.length > 0 ? 'true' : 'false'}
@@ -2470,7 +2502,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // R355: `group` lets the inner opacity-70 spans (prefix
               // `filter:` + count `· N`) brighten to 100 % on pill hover.
               // Sibling treatment on group + vendor pills below.
-              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 — filter pills (3 sibling `group` variants) join the
+              // active:scale-95 press-feedback family. R490's !important
+              // transition list on .anet-topo-chip-focus already covers
+              // transform, so just appending active:scale-95 to the
+              // className wires the press tactile in one token. Compound
+              // with R400-era hover:-translate-y-px gives lift-and-compress.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px active:scale-95 transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedStatus(null)}
               style={{
@@ -2534,7 +2572,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
               // R355 sibling — `group` parent + group-hover on inner spans.
-              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 — filter pills (3 sibling `group` variants) join the
+              // active:scale-95 press-feedback family. R490's !important
+              // transition list on .anet-topo-chip-focus already covers
+              // transform, so just appending active:scale-95 to the
+              // className wires the press tactile in one token. Compound
+              // with R400-era hover:-translate-y-px gives lift-and-compress.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px active:scale-95 transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedGroup(null)}
               style={{
@@ -2600,7 +2644,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
               // R355 sibling — `group` parent + group-hover on inner spans.
-              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 — filter pills (3 sibling `group` variants) join the
+              // active:scale-95 press-feedback family. R490's !important
+              // transition list on .anet-topo-chip-focus already covers
+              // transform, so just appending active:scale-95 to the
+              // className wires the press tactile in one token. Compound
+              // with R400-era hover:-translate-y-px gives lift-and-compress.
+              className="group inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px active:scale-95 transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear vendor filter'}
               onClick={() => setPinnedVendor(null)}
               style={{
@@ -2663,7 +2713,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={link.count}
               data-filter-match-aliases={`${link.from},${link.to}`}
               data-active-filter-edge-hot={isHot ? 'true' : 'false'}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px transform-gpu" data-topo-filter-pill-hover-lift="true"
+              // R495 sibling — 4th filter pill (no `group` prefix variant)
+              // joins active:scale-95 press family alongside the 3 group
+              // variants above. Same recipe.
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono font-medium text-xs border anet-fade-in anet-topo-chip-focus transition-transform duration-200 ease-out hover:-translate-y-px active:scale-95 transform-gpu" data-topo-filter-pill-hover-lift="true"
               title={`${link.from} → ${link.to} (${link.count} msg${link.count === 1 ? '' : 's'}${isHot ? ', hot lane · ≥ 10' : ''}) — click to clear`}
               onClick={() => setPinnedEdgeKey(null)}
               style={{
@@ -3013,7 +3066,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     // — sibling to R355 filter-pill prefix/suffix + R414
                     // chip-row unit brighten. Closes the inner-span
                     // hover-brighten family at the vendor chip surface.
-                    className="group tabular-nums font-medium inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu hover:-translate-y-px"
+                    // R496 — vendor letter chip joins active:scale-95 press
+                    // family. Last vendor-row clickable joining the family
+                    // R495 cashed via R490's transition-cascade dividend.
+                    // Same compound w/ R401 hover-lift idiom — lift-and-
+                    // compress on press, springs back on release.
+                    className="group tabular-nums font-medium inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu hover:-translate-y-px active:scale-95"
                     data-vendor-letter={v.initial}
                     data-vendor-letter-count={v.count}
                     data-vendor-letter-hover-lift="true"
@@ -3251,9 +3309,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    data-chip-hover-lift attr exposes the lift surface
                    state ('true' clickable, 'false' empty) for tests. */
                 // R414: `group` parent + inner unit span group-hover-brighten — see working chip above.
+                // R496 — active-links chip joins active:scale-95 press
+                // family. Sibling to working+online chips (R494). Gated
+                // on `isInteractive` (flowLinks.length > 0) — same R399
+                // conditional pattern used for hover-lift.
                 className={`group tabular-nums font-medium hidden sm:inline px-2.5 py-1 rounded-md border anet-topo-chip-focus transition-transform duration-200 ease-out transform-gpu ${
                   isInteractive
-                    ? 'bg-gray-500/10 text-gray-400 border-gray-500/20 hover:bg-cyan-500/10 hover:text-cyan-200 hover:border-cyan-500/30 hover:-translate-y-px'
+                    ? 'bg-gray-500/10 text-gray-400 border-gray-500/20 hover:bg-cyan-500/10 hover:text-cyan-200 hover:border-cyan-500/30 hover:-translate-y-px active:scale-95'
                     : 'bg-gray-500/10 text-gray-400 border-gray-500/20'
                 }`}
                 data-chip-hover-lift={isInteractive ? 'true' : 'false'}
@@ -3545,8 +3607,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                R469 data-topo-flow-count
                R471 data-topo-layout          canvas mode
                R471 data-topo-theme           canvas mode
-               R487 data-topo-zoom            canvas zoom (this round) */
+               R487 data-topo-zoom            canvas zoom */
           data-topo-zoom={view.zoom.toFixed(2)}
+          /* Round 488 / Loop — pairs the R466 hover-aggregate BOOLEAN
+             with the corresponding hover IDENTITY attr. Pre-R488 a
+             test harness could query "is anything hovered" but had to
+             traverse per-node `data-node` elements with focus-state
+             attrs to recover WHICH alias. R488 surfaces it directly
+             at canvas root. Empty string when null (always-present
+             attr, consistent with the 10-attr state-surface set —
+             never `undefined`-collapsed so observers can rely on a
+             single `getAttribute('data-topo-hovered-alias')` returning
+             either '' or the alias string).
+             Note: only the `hoveredAlias` axis (R466's first source)
+             gets the identity twin in R488. The other 5 hover sources
+             (hoveredHub / hoveredEdgeKey / hoveredGroupLabel / hovered
+             Status / hoveredVendor) are non-alias-shaped (hub center
+             is singleton; edge has `from→to` key; status/vendor are
+             categorical) — separate dedicated attrs if/when needed.
+             Root svg attribute set now 11 attrs total. */
+          data-topo-hovered-alias={hoveredAlias ?? ''}
           /* Round 466 / Loop — aggregate hover signal on the root SVG.
              Exposes a single boolean `data-topo-any-hover` that
              reflects whether ANY hover state in the topology is
@@ -6519,11 +6599,36 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-topo-hub-highlight-visible={workingCount > 0 ? 'false' : 'true'}
               data-topo-hub-highlight-radius="5.5"
               data-topo-hub-highlight-opacity={workingCount > 0 ? 0 : 0.95}
+              data-topo-hub-highlight-breath={!reducedMotion && workingCount === 0 ? 'true' : 'false'}
               style={{
                 pointerEvents: 'none',
                 transition: 'opacity 300ms ease-out',
               }}
-            />
+            >
+              {/* Round 497 / Loop — idle-state breath (呼吸感 theme pivot
+                  from the R492-R496 press-family arc). Pre-R497 the hub
+                  idle highlight read as a static dim disc — present but
+                  motionless, visually mute. R497 adds a 4s opacity breath
+                  (0.85 ↔ 1.0 ↔ 0.85) so the hub reads "alive but quiet"
+                  instead of "frozen", giving the empty-fleet state a
+                  subtle living signature.
+                  Gates:
+                    - !reducedMotion (R29 a11y blanket) — reducedMotion
+                      users see static 0.95 disc, no animate
+                    - workingCount === 0 — when fleet is busy, the
+                      highlight is invisible (opacity=0) so the animate
+                      would waste paint cycles. Gating saves work.
+                  SMIL <animate> overrides the static opacity={0.95}
+                  during its run; falls back to 0.95 when reducedMotion
+                  flips on (the animate node simply doesn't render).
+                  4s cycle is long enough to feel like ambient breath
+                  rather than a pulse, matching the "quiet" semantic.
+                  data-topo-hub-highlight-breath attr exposes the
+                  resolved gate state for tests. */}
+              {!reducedMotion && workingCount === 0 && (
+                <animate attributeName="opacity" values="0.85;1;0.85" dur="4s" repeatCount="indefinite" />
+              )}
+            </circle>
             {/* R115 / Loop: hover hint ring. Stroke-only circle at r=14
                 that fades in when the hub is hovered — the same idea
                 R44 used for node avatars (group-hover stroke). r=14
@@ -6866,7 +6971,17 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     in when the cursor enters the node, signalling clickability
                     (real-user feedback for the chat-popover open). Pure CSS via
                     Tailwind group-hover, so it costs nothing per frame and
-                    respects prefers-reduced-motion via the global media query. */}
+                    respects prefers-reduced-motion via the global media query.
+                    Round 489 / Loop — duration harmonized from 150ms → 200ms
+                    to join the Hero D #147 motion-coherence stack (R459-R475
+                    cluster surfaces + cadence-sync family). R2 originally
+                    picked 150ms for a "snappier feel" before the 200ms ease-
+                    out vocabulary was banked as the canvas-wide motion
+                    default. Bringing this ring into the family means hover-
+                    in / hover-out / cluster cadence / pip-strip transitions
+                    all settle on the same timing — the canvas now reads as
+                    one motion vocabulary instead of two competing tempos.
+                    11th surface in the motion-coherence stack. */}
                 <circle
                   cx={pos.x}
                   cy={pos.y}
@@ -6878,7 +6993,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   // exact widths and would mis-count this invisible hover
                   // ring as a node footprint.
                   strokeWidth="2"
-                  className="opacity-0 group-hover:opacity-70 transition-opacity duration-150"
+                  className="opacity-0 group-hover:opacity-70 transition-opacity duration-200"
                   style={{ pointerEvents: 'none' }}
                 />
                 {/* Round 11 / Loop: chat-focus ring — when the ChatPopover is
@@ -10939,7 +11054,15 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                    / fullscreen) preview their active state on hover.
                    Pure actions (zoom -/+, reset) stay white — they
                    aren't toggles, have no active state to preview. */
-                className={`px-2 py-1 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${idx > 0 ? 'border-l' : ''} ${nodeScale === v ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'hover:bg-cyan-500/5 active:bg-cyan-500/15'}${chromePopping === popKey ? ' anet-chrome-pop' : ''}`}
+                // Round 493 / Loop — extends R492 chrome-strip press-feedback
+                // family to nodeSize S/M/L buttons. Adds active:scale-95
+                // alongside the existing color-deepen (R196) + chrome-pop
+                // (R249). transition-transform + duration-200 + ease-out
+                // + transform-gpu added since this className previously had
+                // transition-colors only — without the transform transition,
+                // active:scale-95 would hard-cut. transform-gpu promotes the
+                // layer so scale doesn't trigger paint thrash.
+                className={`px-2 py-1 transition-colors transition-transform duration-200 ease-out transform-gpu active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset ${idx > 0 ? 'border-l' : ''} ${nodeScale === v ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25' : 'hover:bg-cyan-500/5 active:bg-cyan-500/15'}${chromePopping === popKey ? ' anet-chrome-pop' : ''}`}
                 style={{ color: nodeScale === v ? undefined : pal.legendText, borderColor: pal.containerBorder }}
               >
                 {lbl}
@@ -10981,7 +11104,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // → white/10) so mouse-down has a tactile dim before the
               // R186 icon pop fires on release.
               // R352: `group` lets the inner svg respond via group-hover.
-              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // R493 — zoom +/− buttons join the chrome-strip active:scale-95
+              // press-feedback family (R492 + nodeSize above). transition-
+              // transform + duration-200 + ease-out + transform-gpu added
+              // since the className had only transition-colors.
+              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors transition-transform duration-200 ease-out transform-gpu active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
               style={{ color: pal.legendText }}
               aria-label="Zoom out"
               title="Zoom out (−)"
@@ -11121,7 +11248,11 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-topo-chrome-zoom-in-popping={chromePopping === 'zoom-in' ? 'true' : 'false'}
               // R196: press-state (mirror of zoom-out above).
               // R352: `group` lets the inner svg respond via group-hover.
-              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
+              // R493 — zoom +/− buttons join the chrome-strip active:scale-95
+              // press-feedback family (R492 + nodeSize above). transition-
+              // transform + duration-200 + ease-out + transform-gpu added
+              // since the className had only transition-colors.
+              className="group px-2 py-1 hover:bg-white/5 active:bg-white/10 transition-colors transition-transform duration-200 ease-out transform-gpu active:scale-95 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 focus-visible:ring-inset"
               style={{ color: pal.legendText }}
               aria-label="Zoom in"
               title="Zoom in (+)"
@@ -11173,7 +11304,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                Every standalone interactive HTML surface in TopoGraph
                now lifts on hover. data-topo-chrome-reset-hover-lift
                attr surfaces the lift for tests. */
-            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
+            // R493 — reset button joins the chrome-strip active:scale-95
+            // press-feedback family. The button already has transition-
+            // transform + transform-gpu (R350 reset spin + R400 hover lift),
+            // so just appending active:scale-95 plugs straight in. Compound
+            // active state during press = hover-lift (-1px) + scale-95
+            // composes as translateY(-1px) scale(0.95) — lift-and-compress
+            // for tactile click feel.
+            className="p-1.5 rounded-md border hover:bg-white/5 active:bg-white/10 hover:-translate-y-px active:scale-95 transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60"
             data-topo-chrome-reset-hover-lift="true"
             style={{ background: pal.legendBox.fill, borderColor: pal.containerBorder, color: pal.legendText }}
             aria-label="Reset view"
@@ -11266,7 +11404,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // fullscreen now all carry an icon-level hover gesture in
             // addition to the bg hover).
             // R400: hover translateY(-1px) lift — see reset button above for family doc.
-            className={`group p-1.5 rounded-md border hover:-translate-y-px transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
+            // R493 — fullscreen joins active:scale-95 press family (same as
+            // reset above: lift-and-compress compound transform on press).
+            className={`group p-1.5 rounded-md border hover:-translate-y-px active:scale-95 transition-colors transition-transform duration-200 ease-out transform-gpu focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-cyan-400/60 ${
               isFullscreen
                 ? 'bg-cyan-500/15 text-cyan-300 font-medium hover:bg-cyan-500/20 active:bg-cyan-500/25'
                 : 'hover:bg-cyan-500/5 active:bg-cyan-500/15'

package/app/globals.css

@@ -900,10 +900,47 @@ body {
    and doesn't fight box-shadow, so we use it here. `currentColor`
    inherits the chip's own accent (green for working, cyan for online,
    per-vendor for letters, etc.). Only fires on :focus-visible
-   (keyboard) — mouse focus stays unstyled. */
-.anet-topo-chip-focus:focus-visible {
-  outline: 2px solid currentColor;
+   (keyboard) — mouse focus stays unstyled.
+   Round 490 / Loop — focus outline transitions on color rather than
+   hard-cutting. Pre-R490 the keyboard focus ring snapped in/out
+   instantly (no `transition` declaration), while every other hover/
+   pin state on the same chip eased through the Hero D 200ms ease-out
+   vocabulary (R459-R475 cluster + R489 hover ring). Keyboard users
+   tabbing through chips saw discontinuous focus jumps — pointer
+   users saw smooth motion. R490 unifies the two by holding a
+   permanent transparent outline (no painted footprint, no layout
+   shift — `outline` is drawn outside the border-box and doesn't
+   trigger reflow) and transitioning ONLY outline-color when focus
+   arrives/leaves. The cyber-theme dark canvas keyboard nav now
+   reads as one motion vocabulary with pointer hover. */
+.anet-topo-chip-focus {
+  outline: 2px solid transparent;
   outline-offset: 1px;
+  /* R490 (revised) — Tailwind utility classes on the chips (transition-
+     colors / transition-transform / duration-200) set their own
+     `transition-property` list at the same selector specificity (0,1,0),
+     and since Tailwind's stylesheet loads after globals.css they win
+     the cascade — without `!important` my outline-color transition is
+     ignored. The unified list below replaces Tailwind's narrower list
+     with a superset (color, bg, border, opacity, box-shadow, transform
+     all preserved) plus `outline-color` for R490. All at 200ms ease-
+     out, matching the chip-row's existing Tailwind duration-200 ease-
+     out so visible animations on the chip are unchanged.
+     Trade-off: chips with inline `style.transition` (e.g. R210
+     pressure-bar segments at 220ms width / 150ms boxShadow / 150ms
+     filter, line 2338 in TopoGraph.tsx) keep their inline value
+     because inline style wins over class rules regardless of
+     !important. That's intentional — those custom timings were
+     deliberate and stay scoped to their element. */
+  transition-property:
+    outline-color, color, background-color, border-color,
+    text-decoration-color, fill, stroke, opacity, box-shadow, transform
+    !important;
+  transition-duration: 200ms !important;
+  transition-timing-function: ease-out !important;
+}
+.anet-topo-chip-focus:focus-visible {
+  outline-color: currentColor;
 }
 
 /* R156 — focus-visible outline for SVG-side TopoGraph interactives.
@@ -914,10 +951,35 @@ body {
    R144/R151/R152). Browser default focus outline on SVG is hard
    to spot against the canvas; explicit cyan-300 ring matches the
    dashboard's legendAccent. 2-px outline-offset gives breathing
-   room around the painted bounding box. */
-.anet-topo-svg-focus:focus-visible {
-  outline: 2px solid #67e8f9;
+   room around the painted bounding box.
+   Round 491 / Loop — SVG-side counterpart to R490's chip-focus
+   outline-color transition. Pre-R491 keyboard focus on SVG g
+   elements (recent rows, legend rows, group labels, edge badges,
+   nodes, "+N more") snapped instantly; HTML chips (post-R490) now
+   ease through 200ms ease-out but SVG g still hard-cut. Same
+   baseline-transparent + transition-outline-color recipe brings
+   the SVG canvas into the unified keyboard motion vocabulary —
+   keyboard users tabbing between chip-row and SVG canvas see
+   ONE smooth fade timing instead of HTML-smooth-then-SVG-snap.
+   The cyan-300 (#67e8f9) target color matches R156's original
+   choice (legendAccent visual identity); only the transition
+   timing is new.
+   Note on cascade: SVG g elements rarely carry Tailwind
+   transition-* utility classes (Tailwind defaults are HTML-
+   centric), so the (0,1,0) specificity of .anet-topo-svg-focus
+   typically wins without !important. Adding !important defensively
+   anyway since the React component may add future inline styles
+   or Tailwind classes. Same trade-off as R490 (inline
+   style.transition still wins if added). */
+.anet-topo-svg-focus {
+  outline: 2px solid transparent;
   outline-offset: 2px;
+  transition-property: outline-color !important;
+  transition-duration: 200ms !important;
+  transition-timing-function: ease-out !important;
+}
+.anet-topo-svg-focus:focus-visible {
+  outline-color: #67e8f9;
 }
 
 /* Round 46 — animated dashed spokes flowing from hub outward. Each spoke

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.3-preview.0",
+  "version": "0.5.3-preview.10",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/topo-chip-row-press-test.mjs

@@ -0,0 +1,93 @@
+/* Round 494 verification: chip-row working + online chips gain
+ * `active:scale-95` press feedback, gated on the clickable branch
+ * (workingCount > 0 / onlineNodes.length > 0). Extends the chrome-
+ * strip press family (R492 Ring/Grid + R493 5 chrome buttons) into
+ * the chip-row scope.
+ *
+ * Verifies per chip:
+ *  - DOM element resolvable (data-working-chip / data-online-chip)
+ *  - className contains `active:scale-95` (since fixture has both chips
+ *    with > 0 count → clickable branch active)
+ *  - computed transition-property includes `transform`
+ *  - source-file regex confirms class string wired
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1200 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.setItem('anet-topo-layout', 'ring');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // Need both working and online > 0 so both chip variants enter clickable branch
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha·a1', 'working'),
+    mk('alpha·a2', 'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'networkidle' });
+await page.waitForSelector('[data-working-chip]', { timeout: 15000 });
+await page.waitForTimeout(1000);
+
+const probe = async (sel) => {
+  return await page.evaluate((s) => {
+    const el = document.querySelector(s);
+    if (!el) return null;
+    const cs = window.getComputedStyle(el);
+    return {
+      cls: el.className || '',
+      cls_has_scale95: /active:scale-95/.test(el.className || ''),
+      cls_has_translate: /hover:-translate-y-px/.test(el.className || ''),
+      tp: cs.transitionProperty,
+      td: cs.transitionDuration,
+      tp_has_transform: /transform/i.test(cs.transitionProperty || ''),
+    };
+  }, sel);
+};
+
+const wInfo = await probe('[data-working-chip]');
+const oInfo = await probe('[data-online-chip]');
+
+await browser.close();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sWorking = /workingCount > 0\s*\?\s*'bg-green-500\/10 text-green-300 border-green-500\/20 hover:bg-green-500\/15 hover:border-green-500\/30 hover:-translate-y-px active:scale-95'/.test(src);
+const sOnline  = /onlineNodes\.length > 0\s*\?\s*'bg-cyan-500\/10 text-cyan-300 border-cyan-500\/20 hover:bg-cyan-500\/15 hover:border-cyan-500\/30 hover:-translate-y-px active:scale-95'/.test(src);
+
+const results = {
+  working_dom_found:    !!wInfo,
+  working_has_scale95:  wInfo && wInfo.cls_has_scale95,
+  working_has_lift:     wInfo && wInfo.cls_has_translate,
+  working_tp_transform: wInfo && wInfo.tp_has_transform,
+  online_dom_found:     !!oInfo,
+  online_has_scale95:   oInfo && oInfo.cls_has_scale95,
+  online_has_lift:      oInfo && oInfo.cls_has_translate,
+  online_tp_transform:  oInfo && oInfo.tp_has_transform,
+  source_working_wired: sWorking,
+  source_online_wired:  sOnline,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip-row working+online active:scale-95 (R494):`, JSON.stringify(results),
+  '\n  working tp:', wInfo && wInfo.tp,
+  '\n  online  tp:', oInfo && oInfo.tp);
+process.exit(ok ? 0 : 1);