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

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":7223957,"timestamp":176663590644,"id":14,"parentId":1,"tags":{},"startTime":1778984635837,"traceId":"2c0450a1e4686fb4"},{"name":"turbopack-build-events","duration":106,"timestamp":176663924536,"id":15,"parentId":1,"tags":{},"startTime":1778984636171,"traceId":"2c0450a1e4686fb4"},{"name":"run-typescript","duration":10352446,"timestamp":176670828246,"id":16,"parentId":1,"tags":{},"startTime":1778984643075,"traceId":"2c0450a1e4686fb4"},{"name":"static-check","duration":890218,"timestamp":176681380300,"id":19,"parentId":1,"tags":{},"startTime":1778984653627,"traceId":"2c0450a1e4686fb4"},{"name":"static-generation","duration":689987,"timestamp":176682285637,"id":109,"parentId":1,"tags":{},"startTime":1778984654532,"traceId":"2c0450a1e4686fb4"},{"name":"telemetry-flush","duration":19208,"timestamp":176683013876,"id":118,"parentId":1,"tags":{},"startTime":1778984655260,"traceId":"2c0450a1e4686fb4"},{"name":"next-build","duration":19695241,"timestamp":176663337877,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778984635584,"traceId":"2c0450a1e4686fb4"}]
+[{"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
@@ -4742,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'}
@@ -6284,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',
                 }}
               >
@@ -8806,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"
@@ -8813,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 →
@@ -8915,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}
                         />
                       );
@@ -9009,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',
                       }}
@@ -9666,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"
@@ -9674,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
@@ -9759,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"
@@ -9768,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
@@ -9845,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.1",
+  "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-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);

package/scripts/topo-hub-digit-glow-test.mjs

@@ -0,0 +1,105 @@
+/* Round 476 verification: hub working-count digit gains filter:
+ * drop-shadow glow on hub-hover. Stacks with the existing 4-axis
+ * hub-hover gesture (R209 scale + R425 fw + R253 fill + R213
+ * opacity). data-topo-hub-working-count-glow attr exposes the gate.
+ *
+ * Contract:
+ *   - at rest (no hover): data-topo-hub-working-count-glow='false',
+ *     filter is empty / 'none'
+ *   - on mouseenter hub-core: glow='true', filter starts with
+ *     'drop-shadow'
+ *   - source-file conditional wired (cyber + light theme variants)
+ *   - transition list extends to include 'filter 200ms ease-out'
+ */
+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 at least one working session so the digit renders (R213 opacity gate)
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('a·1', 'working'), mk('a·2', 'idle'), mk('a·3', 'working'),
+  ] } });
+});
+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-topo-hub-working-count]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const readDigit = () => page.evaluate(() => {
+  const t = document.querySelector('[data-topo-hub-working-count]');
+  if (!t) return null;
+  const cs = getComputedStyle(t);
+  return {
+    glow:    t.getAttribute('data-topo-hub-working-count-glow'),
+    count:   t.getAttribute('data-topo-hub-working-count'),
+    filter:  cs.filter,
+    transition: cs.transition,
+  };
+});
+
+const restProbe = await readDigit();
+
+// Hover the hub via the hover-trigger surface (hub <g> or core)
+await page.hover('[data-topo-hub-core]');
+await page.waitForTimeout(400);
+const hoverProbe = await readDigit();
+
+// Leave hub
+await page.mouse.move(2, 2);
+await page.waitForTimeout(400);
+const restAgainProbe = await readDigit();
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceGlowAttr   = /data-topo-hub-working-count-glow=/.test(src);
+const sourceDropShadow = /drop-shadow\(0 0 \dpx rgba\(/.test(src);
+const sourceFilterTween = /filter 200ms ease-out/.test(src);
+
+await browser.close();
+
+const restGlowFalse = restProbe?.glow === 'false';
+const hoverGlowTrue = hoverProbe?.glow === 'true';
+const restAgainFalse = restAgainProbe?.glow === 'false';
+// Computed filter — at rest should be 'none' or empty; on hover should
+// contain 'drop-shadow'.
+const restFilterEmpty = restProbe?.filter === 'none' || !restProbe?.filter;
+const hoverFilterHasShadow = /drop-shadow/.test(hoverProbe?.filter || '');
+
+const results = {
+  rest_glow_false:        restGlowFalse,
+  hover_glow_true:        hoverGlowTrue,
+  rest_again_false:       restAgainFalse,
+  rest_filter_none:       restFilterEmpty,
+  hover_filter_dropshadow: hoverFilterHasShadow,
+  source_glow_attr:       sourceGlowAttr,
+  source_drop_shadow:     sourceDropShadow,
+  source_filter_tween:    sourceFilterTween,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hub digit drop-shadow glow:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(restProbe),
+  '\n  hover:', JSON.stringify(hoverProbe));
+process.exit(ok ? 0 : 1);

package/scripts/topo-layout-theme-attrs-test.mjs

@@ -0,0 +1,91 @@
+/* Round 471 verification: root svg surfaces 2 canvas-level mode
+ * attrs (data-topo-layout + data-topo-theme). Completes the
+ * R462/R466/R467/R469 root-svg state surface set; canvas root
+ * now carries 9 cross-cutting attrs.
+ *
+ * Contract:
+ *   - cyber theme + grid layout fixture →
+ *     data-topo-layout='grid' + data-topo-theme='cyber'
+ *   - 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();
+
+async function probe(theme, layout) {
+  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: '/' }]);
+  // Playwright addInitScript takes only ONE arg — pass {theme, layout}
+  // as a struct instead of two positional params.
+  await ctx.addInitScript((arg) => {
+    try {
+      localStorage.setItem('anet-theme', arg.theme);
+      localStorage.setItem('anet-topo-layout', arg.layout);
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, { theme, layout });
+  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('a·1', 'working'), mk('a·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('svg[data-topo-layout]', { timeout: 15000 });
+  // Give React extra time to hydrate + run useEffects that restore
+  // layout/theme from localStorage (live probe showed ~2500ms).
+  await page.waitForTimeout(2800);
+  // Wait for the localStorage-restore useEffect (line 592-620) to
+  // run + React to commit the state — layout starts at 'ring' default
+  // and flips to the localStorage value on mount. The data-attr won't
+  // reflect the saved value until after the first effect tick. Live
+  // probe showed ~2500ms is enough.
+  await page.waitForFunction(
+    (expected) => document.querySelector('svg[viewBox="0 0 1000 680"]')?.getAttribute('data-topo-layout') === expected,
+    layout,
+    { timeout: 10000 },
+  ).catch(() => {});
+  const attrs = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return {
+      layout: svg?.getAttribute('data-topo-layout'),
+      theme:  svg?.getAttribute('data-topo-theme'),
+    };
+  });
+  await browser.close();
+  return attrs;
+}
+
+const cyberGrid = await probe('cyber', 'grid');
+const lightRing = await probe('light', 'ring');
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceLayout = /data-topo-layout=\{layout\}/.test(src);
+const sourceTheme  = /data-topo-theme=\{isLight \? 'light' : 'cyber'\}/.test(src);
+
+const results = {
+  cyber_grid_layout: cyberGrid.layout === 'grid',
+  cyber_grid_theme:  cyberGrid.theme === 'cyber',
+  light_ring_layout: lightRing.layout === 'ring',
+  light_ring_theme:  lightRing.theme === 'light',
+  source_layout:     sourceLayout,
+  source_theme:      sourceTheme,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} svg layout+theme attrs:`, JSON.stringify(results),
+  '\n  cyber+grid:', JSON.stringify(cyberGrid),
+  '\n  light+ring:', JSON.stringify(lightRing));
+process.exit(ok ? 0 : 1);