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

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":7290010,"timestamp":176329576850,"id":14,"parentId":1,"tags":{},"startTime":1778984301823,"traceId":"64d36f3e62fb7597"},{"name":"turbopack-build-events","duration":116,"timestamp":176329934689,"id":15,"parentId":1,"tags":{},"startTime":1778984302181,"traceId":"64d36f3e62fb7597"},{"name":"run-typescript","duration":10461921,"timestamp":176336876132,"id":16,"parentId":1,"tags":{},"startTime":1778984309122,"traceId":"64d36f3e62fb7597"},{"name":"static-check","duration":870136,"timestamp":176347547833,"id":19,"parentId":1,"tags":{},"startTime":1778984319794,"traceId":"64d36f3e62fb7597"},{"name":"static-generation","duration":622100,"timestamp":176348435521,"id":109,"parentId":1,"tags":{},"startTime":1778984320682,"traceId":"64d36f3e62fb7597"},{"name":"telemetry-flush","duration":25650,"timestamp":176349095910,"id":118,"parentId":1,"tags":{},"startTime":1778984321342,"traceId":"64d36f3e62fb7597"},{"name":"next-build","duration":19793552,"timestamp":176329328036,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778984301574,"traceId":"64d36f3e62fb7597"}]
+[{"name":"run-turbopack","duration":7066537,"timestamp":180466032127,"id":14,"parentId":1,"tags":{},"startTime":1778988438278,"traceId":"2c9b0a2821672176"},{"name":"turbopack-build-events","duration":111,"timestamp":180466373402,"id":15,"parentId":1,"tags":{},"startTime":1778988438620,"traceId":"2c9b0a2821672176"},{"name":"run-typescript","duration":10551465,"timestamp":180473107342,"id":16,"parentId":1,"tags":{},"startTime":1778988445354,"traceId":"2c9b0a2821672176"},{"name":"static-check","duration":849794,"timestamp":180483841042,"id":19,"parentId":1,"tags":{},"startTime":1778988456087,"traceId":"2c9b0a2821672176"},{"name":"static-generation","duration":667122,"timestamp":180484705909,"id":109,"parentId":1,"tags":{},"startTime":1778988456952,"traceId":"2c9b0a2821672176"},{"name":"telemetry-flush","duration":19279,"timestamp":180485406138,"id":118,"parentId":1,"tags":{},"startTime":1778988457652,"traceId":"2c9b0a2821672176"},{"name":"next-build","duration":19628296,"timestamp":180465797163,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778988438043,"traceId":"2c9b0a2821672176"}]

package/app/components/TopoGraph.tsx

@@ -3485,6 +3485,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           data-topo-working-count={workingCount}
           data-topo-offline-count={offlineNodes.length}
           data-topo-flow-count={flowLinks.length}
+          /* Round 471 / Loop — surface 2 remaining canvas-level mode
+             attrs alongside the R462/R466/R467/R469 set. Pre-R471 the
+             root svg exposed 7 attrs but tests probing "what layout
+             is active" had to query DOM internals (data-topo-chrome-
+             layout-active on the chrome button row) or parse the URL
+             for theme. R471 puts both modes on the root for one-stop
+             snapshot reads:
+               data-topo-layout — 'ring' | 'grid'
+               data-topo-theme  — 'cyber' | 'light'
+             Together with R469 the canvas root now carries 9 cross-
+             cutting attrs (1 build identity + 2 inspection mode + 4
+             fleet split + 2 layout/theme). Test harness can read the
+             FULL canvas state with 9 getAttribute calls; no traversal
+             into chrome strip / theme provider / panel rows.
+             Composed from existing `layout` (R138 ring↔grid toggle
+             state) + `isLight` (R12 theme palette gate) — no new
+             state, zero re-render cost. */
+          data-topo-layout={layout}
+          data-topo-theme={isLight ? 'light' : 'cyber'}
           /* 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
@@ -4347,8 +4366,29 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 // style below (1 / 0.28 based on filter pin state).
                 // data-group-fade-delay exposes the computed delay for
                 // test probes.
-                className="transition-opacity anet-fade-in"
+                /* Round 470 / Loop — sync the R8 out-of-focus dim
+                   transition cadence from Tailwind's `transition-
+                   opacity` default (150ms ease-in-out) to 200ms
+                   ease-out to match the rest of the cluster's
+                   motion vocabulary. Hero D #147 stack established
+                   200ms ease-out across every cluster axis:
+                     parent text   (codex p.125)
+                     parent rect   (R461 xywh + R464 rx + R248 paint)
+                     hitbox rect   (R459 fill+opacity + R460 x+width
+                                    + R465 rx)
+                   The wrapper <g>'s opacity flip (1 → 0.28 when
+                   another group is active) was the LAST surface
+                   still at 150ms — when the user hovers a group
+                   label, out-of-focus groups dimmed 50ms faster
+                   than the focused group's tint brightened, a
+                   small but perceivable rate-desync. R470 lifts
+                   the wrapper to 200ms ease-out. duration-200 +
+                   ease-out are Tailwind v4 utility classes; the
+                   anet-fade-in mount-once keyframe stays in the
+                   className for first-paint stagger (R173). */
+                className="transition-opacity duration-200 ease-out anet-fade-in"
                 data-group-fade-delay={Math.min(boxIdx, 8) * 60}
+                data-group-fade-transition="200ms"
                 // R63: drop the blanket pointerEvents:'none' that
                 // previously sat here. Chrome's SVG impl doesn't let a
                 // child override a parent's `none` even though the spec
@@ -4721,10 +4761,35 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   opacity={isPinned || isHovered ? 1 : 0.55}
                   data-group-label-hovered={isHovered && !isPinned ? 'true' : 'false'}
                   data-group-label-font-weight={isPinned ? '800' : '700'}
+                  /* Round 479 / Loop — extend drop-shadow visual-polish
+                     family to a 4th anchor: group-label parent text
+                     on isPinned. Continues the R476/R477/R478 arc:
+                       R476  hub digit           hover-gated     emerald
+                       R477  legend pin-ring     pin-gated       row.fill
+                       R478  recent-row pip      freshness-gated cyan
+                       R479  group-label text    pin-gated       cyan
+                     Hue: pal.legendAccent at 0x80 alpha (≈50%) — same
+                     accent family R107/R477 use for tint surfaces. 3px
+                     blur reads as a soft cyan halo around the locked
+                     cluster name. Stacks with the R432 letter-spacing
+                     spread + R457 fw lift + R63 fill brighten + R142
+                     drop-shadow on the parent rect — pin signature on
+                     group label scope now spans typography + chroma +
+                     paint + container-lift + text-glow.
+                     Filter is paint-only; bbox unchanged; overlap-test
+                     invariants hold (R51 selector gated to g[data-node]
+                     descendants, this label is invisible to the probe).
+                     transition list extends to include 'filter 200ms
+                     ease-out' alongside the existing fill/ls/fw/opacity
+                     200ms tweens. */
+                  data-group-label-glow={isPinned ? 'true' : 'false'}
                   style={{
-                    transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, opacity 200ms ease-out',
+                    transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out, font-weight 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
                     letterSpacing: isPinned ? '0.5px' :
                                    isHovered ? '0.25px' : '0px',
+                    filter: isPinned
+                      ? `drop-shadow(0 0 3px ${pal.legendAccent}80)`
+                      : undefined,
                   }}
                   data-group-label={box.key}
                   data-group-label-pinned={isPinned ? 'true' : 'false'}
@@ -6263,15 +6328,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 /* Round 253 / Loop: append fill 200ms to the hub
                    digit transition list — theme toggle (cyber #ecfdf5
                    ↔ light #d1fae5) was the last hub-area snap. */
+                /* Round 476 / Loop — hub working-count digit gains a
+                   filter: drop-shadow glow on hub-hover. Stacks with
+                   the existing 4-axis hub-hover gesture stack on this
+                   element:
+                     R209  transform: scale(1.08)    geometry
+                     R425  fontWeight 700 → 800      typography
+                     R253  fill ease-out             chroma (theme)
+                     R213  opacity gate              fade (count cross)
+                     R476  filter drop-shadow glow   paint (this round)
+                   The glow uses the cyber emerald-400 (#34d399) /
+                   light emerald-500 (#10b981) hue family so the
+                   chroma stays inside the hub-area palette. Subtle
+                   2-3 px blur radius at 0.6 opacity — visible but
+                   not loud, reads as "the focal digit lit up under
+                   attention".
+                   Reduced-motion users skip the filter via the
+                   !reducedMotion gate (R29 a11y blanket).
+                   Filter is a paint-only attribute — bbox stays
+                   the same, R51 overlap-test invariants hold.
+                   transition list extends to 'filter 200ms ease-out'
+                   so the glow eases under the same cadence as the
+                   scale + fw + fill axes. */
+                data-topo-hub-working-count-glow={!reducedMotion && hoveredHub ? 'true' : 'false'}
                 style={{
                   pointerEvents: 'none',
                   transform: !reducedMotion && hoveredHub ? 'scale(1.08)' : 'scale(1)',
                   transformBox: 'fill-box',
                   transformOrigin: 'center',
+                  filter: !reducedMotion && hoveredHub
+                    ? (isLight
+                        ? 'drop-shadow(0 0 2px rgba(16, 185, 129, 0.6))'
+                        : 'drop-shadow(0 0 3px rgba(52, 211, 153, 0.6))')
+                    : undefined,
                   /* R425: font-weight 200ms appended so the hover fw
                      bump 700 → 800 eases under the same cadence as
-                     R209 scale + R253 fill + R213 opacity. */
-                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out',
+                     R209 scale + R253 fill + R213 opacity.
+                     R476: filter 200ms appended so the new drop-
+                     shadow glow eases at the same cadence. */
+                  transition: 'transform 200ms ease-out, opacity 300ms ease-out, fill 200ms ease-out, font-weight 200ms ease-out, filter 200ms ease-out',
                   fontVariantNumeric: 'tabular-nums',
                 }}
               >
@@ -8785,6 +8880,22 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         the chip-row pills. R116: pinned rows tint
                         stronger than hovered ones so locked vs preview
                         is discriminable. */}
+                    {/* Round 472 / Loop — cadence-sync follow-on to the
+                       R459/R460/R461/R464/R465/R470 200ms uniform
+                       motion stack established at the cluster scope.
+                       This R104 recent-signal row tint rect was still
+                       at the legacy 150ms cadence — when a user
+                       hovers/pins a recent-signal row, the tint
+                       snapped in 50ms ahead of the rest of the row's
+                       state-change cascade (R143 translateY,
+                       R220+R434 letter-spacing, R434 fill tween).
+                       R472 lifts to 200ms ease-out to match. Same
+                       sibling idiom R459 closed at the group-label
+                       hitbox tier; now applied at the recent-signal
+                       row tier. data-recent-row-tint-transition attr
+                       exposes the cadence for tests.
+                       Geometry/paint logic unchanged — purely the
+                       transition timing. */}
                     <rect
                       x="6" y={38 + index * 16 - 10}
                       width="218" height="14" rx="3"
@@ -8792,7 +8903,9 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       opacity={isRowPinned ? (isLight ? 0.18 : 0.22)
                               : isRowHovered ? (isLight ? 0.10 : 0.14)
                               : 1}
-                      style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
+                      data-recent-row-tint={link.key}
+                      data-recent-row-tint-transition="200ms"
+                      style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out' }}
                     />
                     {/* Round 160 / Loop: recency pip. Canvas flow edges
                         fade by freshness (R10: full intensity ≤30s →
@@ -8894,16 +9007,47 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                              to include 'r 200ms ease-out' matching the
                              opacity cadence. data-recent-row-freshness-
                              lifted attr exposes the gate for tests. */
+                          /* Round 478 / Loop — extend the R476/R477
+                             drop-shadow vocabulary to a third anchor:
+                             the recent-row freshness pip on `alpha
+                             > 0.7` (just-fired flow within ~30s per
+                             R10 freshness ramp). Gate is FRESHNESS-
+                             driven not pin/hover-driven, so the glow
+                             reads as "this signal is live" rather
+                             than "user is inspecting". As the alpha
+                             decays past 0.7 (≈45s after last fire),
+                             the glow eases off — natural breathing
+                             feel that tracks actual data freshness.
+                             Hue: pal.legendAccent at 0.5 alpha so
+                             the glow inherits the row's accent color
+                             family. 2.5-3px blur reads as soft
+                             radiance, not loud bloom.
+                             Drop-shadow visual-polish family now 3
+                             anchors:
+                               R476  hub digit         hover-gated
+                               R477  legend pin-ring   pin-gated
+                               R478  recent freshness  freshness-gated
+                             Each anchor uses a different state gate
+                             but the same `filter: drop-shadow` paint
+                             vocabulary. Filter affects paint only —
+                             bbox unchanged, overlap-test invariants
+                             hold. Transition list extends to include
+                             'filter 200ms ease-out' alongside
+                             R10/R447 opacity + r tweens. */
                           fill={pal.legendAccent}
                           opacity={alpha}
                           data-recent-row-freshness={link.key}
                           data-recent-row-freshness-alpha={alpha.toFixed(2)}
                           data-recent-row-freshness-radius={(isRowHovered || isRowPinned) ? 2.5 : 2.0}
                           data-recent-row-freshness-lifted={(isRowHovered || isRowPinned) ? 'true' : 'false'}
+                          data-recent-row-freshness-glow={alpha > 0.7 ? 'true' : 'false'}
                           style={{
                             pointerEvents: 'none',
                             r: `${(isRowHovered || isRowPinned) ? 2.5 : 2.0}px`,
-                            transition: 'opacity 200ms ease-out, r 200ms ease-out',
+                            filter: alpha > 0.7
+                              ? `drop-shadow(0 0 3px ${pal.legendAccent}80)`
+                              : undefined,
+                            transition: 'opacity 200ms ease-out, r 200ms ease-out, filter 200ms ease-out',
                           } as React.CSSProperties}
                         />
                       );
@@ -8988,8 +9132,25 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          R427/R431/R432/R433/R434. R55 fill 150ms +
                          R220 letter-spacing 150ms transition kept
                          (additive conditional case, no new property). */
+                      /* Round 474 / Loop — cadence-sync follow-on to
+                         R472. R472 lifted the recent-row TINT RECT
+                         to 200ms but the row TEXT alongside still
+                         ran 150ms — same panel-row scope, two
+                         different rates. When a user hovered/pinned
+                         a row the rect background brightened in
+                         200ms while the text fill + letter-spacing
+                         finished in 150ms. R474 closes that internal
+                         desync by lifting the text transitions to
+                         match. Whole recent-row state-flip now
+                         eases at 200ms ease-out across rect AND
+                         text. data-recent-row-text-transition='200ms'
+                         attr exposed for tests. R434 3-tier letter-
+                         spacing values unchanged; R363 fw + R55 fill
+                         brighten unchanged — only the timing axis
+                         shifts. */
+                      data-recent-row-text-transition="200ms"
                       style={{
-                        transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
+                        transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
                         letterSpacing: isRowPinned ? '0.5px' :
                                        isRowHovered ? '0.25px' : '0px',
                       }}
@@ -9645,6 +9806,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       now ~1.25px below hitbox center (vs ~2.25px pre).
                       No height change, no test ripple (other than this
                       one), no R260/R268/R270 chrome regressions. */}
+                  {/* Round 473 / Loop — final cadence-sync follow-on,
+                     closing the legacy 150ms transition at the
+                     LEGEND-ROW tint scope. R459 (group-label hitbox)
+                     + R472 (recent-row hitbox) already lifted the
+                     two sibling panel-row hitboxes to 200ms; the
+                     legend-row was the last per-row tint still
+                     snapping at 150ms.
+                     After R473 the 200ms ease-out vocabulary is
+                     uniform across ALL three panel-row scopes —
+                     group-label, recent-signal, and legend — so
+                     hover/pin state-change cascades read coherently
+                     at every panel-tier surface. data-legend-row-
+                     tint-transition='200ms' attr exposed for tests.
+                     Geometry/paint unchanged. */}
                   <rect
                     x="6" y={row.y0 - 11}
                     width="170" height="22" rx="3"
@@ -9653,7 +9828,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                             : hoveredStatus === row.key ? (isLight ? 0.08 : 0.12)
                             : 1}
                     data-legend-row-tinted={isPinned ? 'pinned' : hoveredStatus === row.key ? 'hover' : 'none'}
-                    style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
+                    data-legend-row-tint-transition="200ms"
+                    style={{ transition: 'fill 200ms ease-out, opacity 200ms ease-out' }}
                   />
                   {/* Round 197 / Loop: swatch dot scales r 5.5 → 7 when its
                       row is hovered or pinned. Pre-R197 the swatch was a
@@ -9738,6 +9914,30 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       + pointerEvents:none all preserved. data-legend-
                       pin-ring-stroke-width attr exposes the value for
                       tests. */}
+                  {/* Round 477 / Loop — legend pin-ring gains a filter:
+                     drop-shadow glow on isPinned. Extends R476's
+                     drop-shadow idiom from hub-digit (focal scope)
+                     to the legend-row pin-ring (sibling pin-state
+                     surface). When a status row is pinned, the
+                     concentric ring around the swatch now lights
+                     up with a colour-matched halo using row.fill,
+                     reinforcing "this filter is locked" via a
+                     glow layer above the R402 sw bump + R181
+                     opacity fade-in.
+                     Hue: row.fill at 0.55 alpha — picks up each
+                     status tier's signature colour (working green /
+                     idle teal / offline slate). 3px blur stays
+                     subtle but unmistakable when the row is locked.
+                     Reduced-motion users skip the filter via R29
+                     a11y blanket (transition-duration → 0.001ms
+                     so the glow appears/disappears instantly with
+                     pin toggle).
+                     Filter is paint-only — bbox unchanged, R51
+                     overlap-test gated to g[data-node] descendants
+                     so this legend-internal ring is invisible to
+                     the probe anyway. Transition list extends to
+                     include 'filter 200ms ease-out' so the glow
+                     eases under the same cadence as opacity. */}
                   <circle
                     cx="16" cy={row.y0} r="8"
                     fill="none"
@@ -9747,9 +9947,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     data-legend-pin-ring={row.key}
                     data-legend-pin-ring-pinned={isPinned ? 'true' : 'false'}
                     data-legend-pin-ring-stroke-width="1.75"
+                    data-legend-pin-ring-glow={isPinned ? 'true' : 'false'}
                     style={{
                       pointerEvents: 'none',
-                      transition: 'opacity 150ms ease-out',
+                      filter: isPinned
+                        ? `drop-shadow(0 0 3px ${row.fill}88)`
+                        : undefined,
+                      transition: 'opacity 150ms ease-out, filter 200ms ease-out',
                     }}
                   />
                   {/* Round 219 / Loop: legend row text gains the same
@@ -9824,8 +10028,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                        group-label R432, legend-row R433). R55 fill
                        150ms + R219 letter-spacing 150ms transition
                        untouched — additive conditional case. */
+                    /* Round 475 / Loop — final closure of the panel-row
+                       text scope cadence-sync. R473 lifted the legend-
+                       row TINT RECT to 200ms; R474 lifted the recent-
+                       row TEXT to 200ms; R475 closes the matching
+                       legend-row text desync — fill + letter-spacing
+                       both 150 → 200ms ease-out. After R475 the 3-tier
+                       panel-row cadence family is fully 200ms across
+                       BOTH rect and text at every panel-row scope
+                       (group-label / recent-row / legend-row). Hover/
+                       pin state-flip at any panel-row tier reads as
+                       one motion-coherent unit. data-legend-row-
+                       label-transition='200ms' attr exposed for tests.
+                       R433 3-tier letter-spacing values (0/0.25/0.5)
+                       unchanged; R55 fill brighten unchanged — only
+                       the timing axis shifts. */
+                    data-legend-row-label-transition="200ms"
                     style={{
-                      transition: 'fill 150ms ease-out, letter-spacing 150ms ease-out',
+                      transition: 'fill 200ms ease-out, letter-spacing 200ms ease-out',
                       letterSpacing: isPinned ? '0.5px' :
                                      hoveredStatus === row.key ? '0.25px' : '0px',
                     }}

package/package.json

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

package/scripts/topo-group-fade-cadence-test.mjs

@@ -0,0 +1,92 @@
+/* Round 470 verification: group <g> wrapper opacity transition
+ * cadence sync 150ms → 200ms. The R8 out-of-focus dim was the
+ * last cluster surface still at Tailwind's `transition-opacity`
+ * default cadence (150ms); R470 lifts it to 200ms ease-out to
+ * match the rest of the Hero D #147 200ms motion vocabulary.
+ *
+ * Contract:
+ *   - every <g data-group> carries className containing
+ *     'transition-opacity duration-200 ease-out'
+ *   - data-group-fade-transition='200ms' attr exposed
+ *   - computed transition-duration is '0.2s' (200ms)
+ *   - source-file utility classes 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', 'grid');
+    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,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha·1', 'working'),
+    mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'),
+    mk('beta·2',  '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: 'domcontentloaded' });
+await page.waitForSelector('[data-group][data-group-fade-transition]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const groups = await page.evaluate(() => {
+  const gs = [...document.querySelectorAll('[data-group]')];
+  return gs.map(g => {
+    const cs = getComputedStyle(g);
+    return {
+      key:       g.getAttribute('data-group'),
+      className: g.getAttribute('class') || '',
+      fadeAttr:  g.getAttribute('data-group-fade-transition'),
+      duration:  cs.transitionDuration,
+      timing:    cs.transitionTimingFunction,
+      property:  cs.transitionProperty,
+    };
+  });
+});
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceCN  = /className="transition-opacity duration-200 ease-out anet-fade-in"/.test(src);
+const sourceAttr = /data-group-fade-transition="200ms"/.test(src);
+
+await browser.close();
+
+const allCN200    = groups.every(g => /transition-opacity duration-200 ease-out/.test(g.className));
+const allAttr200  = groups.every(g => g.fadeAttr === '200ms');
+const allDur200   = groups.every(g => g.duration === '0.2s' || /(^|, )0\.2s/.test(g.duration));
+const allEaseOut  = groups.every(g => /ease(-out)?|cubic-bezier\(0,\s*0,\s*0\.2,\s*1\)/.test(g.timing) || g.timing.includes('cubic-bezier'));
+
+const results = {
+  groups_count_ge_2:   groups.length >= 2,
+  all_classname_200:   allCN200,
+  all_attr_200:        allAttr200,
+  all_computed_200ms:  allDur200,
+  all_easing_ease_out: allEaseOut,
+  source_classname:    sourceCN,
+  source_attr:         sourceAttr,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group <g> fade cadence 150→200:`, JSON.stringify(results),
+  '\n  sample:', JSON.stringify(groups[0]));
+process.exit(ok ? 0 : 1);

package/scripts/topo-group-label-glow-test.mjs

@@ -0,0 +1,104 @@
+/* Round 479 verification: group-label parent text gains filter:
+ * drop-shadow glow on isPinned. 4th anchor in the R476/R477/R478
+ * drop-shadow visual-polish family.
+ *
+ * Contract:
+ *   - at rest (no group pinned): every group label has data-group-
+ *     label-glow='false' AND computed filter === 'none'
+ *   - click a group-label hitbox: that group's label flips to
+ *     glow='true' + filter starts with 'drop-shadow' using
+ *     pal.legendAccent at 0x80 alpha
+ *   - sibling group labels stay rest (no spillover)
+ *   - source-file conditional 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', 'grid');
+    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,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha·1', 'working'), mk('alpha·2', 'idle'),
+    mk('beta·1',  'working'), mk('beta·2',  '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-group-label-glow]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const readAll = () => page.evaluate(() => {
+  const labels = [...document.querySelectorAll('[data-group-label-glow]')];
+  return labels.map(l => {
+    const cs = getComputedStyle(l);
+    return {
+      key:    l.getAttribute('data-group-label'),
+      glow:   l.getAttribute('data-group-label-glow'),
+      filter: cs.filter,
+    };
+  });
+});
+
+const rest = await readAll();
+const firstKey = rest[0]?.key;
+
+// Click hitbox to pin the first group
+let pinned = null;
+if (firstKey) {
+  const hit = await page.$(`[data-group-label-hit="${firstKey}"]`);
+  if (hit) {
+    await hit.click();
+    await page.waitForTimeout(400);
+    pinned = await readAll();
+  }
+}
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceGlowAttr = /data-group-label-glow=\{isPinned/.test(src);
+const sourceDropShadow = /drop-shadow\(0 0 3px \$\{pal\.legendAccent\}80\)/.test(src);
+
+await browser.close();
+
+const restCount     = rest.length;
+const restAllFalse  = rest.every(r => r.glow === 'false' && r.filter === 'none');
+const pinnedTarget  = pinned?.find(r => r.key === firstKey);
+const pinTargetGlow = pinnedTarget?.glow === 'true';
+const pinTargetHasShadow = pinnedTarget && /drop-shadow/.test(pinnedTarget.filter);
+const pinSiblingsStill = pinned ? pinned.filter(r => r.key !== firstKey).every(r => r.glow === 'false') : false;
+
+const results = {
+  rest_count_ge_2:     restCount >= 2,
+  rest_all_false:      restAllFalse,
+  pinned_target_glow:  pinTargetGlow,
+  pinned_target_shadow: pinTargetHasShadow,
+  pinned_siblings_rest: pinSiblingsStill,
+  source_glow_attr:    sourceGlowAttr,
+  source_drop_shadow:  sourceDropShadow,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group-label drop-shadow glow:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  pinned target:', JSON.stringify(pinnedTarget));
+process.exit(ok ? 0 : 1);