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

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":5978558,"timestamp":180822290369,"id":14,"parentId":1,"tags":{},"startTime":1778988794537,"traceId":"3d0010a9212a1fa1"},{"name":"turbopack-build-events","duration":95,"timestamp":180822579535,"id":15,"parentId":1,"tags":{},"startTime":1778988794826,"traceId":"3d0010a9212a1fa1"},{"name":"run-typescript","duration":9740495,"timestamp":180828286955,"id":16,"parentId":1,"tags":{},"startTime":1778988800533,"traceId":"3d0010a9212a1fa1"},{"name":"static-check","duration":761394,"timestamp":180838220234,"id":19,"parentId":1,"tags":{},"startTime":1778988810467,"traceId":"3d0010a9212a1fa1"},{"name":"static-generation","duration":655125,"timestamp":180838997327,"id":109,"parentId":1,"tags":{},"startTime":1778988811244,"traceId":"3d0010a9212a1fa1"},{"name":"telemetry-flush","duration":34437,"timestamp":180839687385,"id":118,"parentId":1,"tags":{},"startTime":1778988811934,"traceId":"3d0010a9212a1fa1"},{"name":"next-build","duration":17661477,"timestamp":180822060373,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778988794307,"traceId":"3d0010a9212a1fa1"}]

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'}
@@ -5771,6 +5815,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           via the new -opacity-active attr; the
                           legacy -opacity-hover attr kept for R395
                           test compatibility. */}
+                      {/* Round 480 / Loop — 5th anchor in the drop-shadow
+                         visual-polish family. Gates on isHot (link.
+                         count >= 10, R129 hot-lane threshold) so the
+                         badge gets a warm-amber halo when its edge
+                         crosses the high-traffic boundary.
+                         Drop-shadow family ledger now:
+                           R476  hub digit       hover-gated      emerald
+                           R477  legend pin-ring pin-gated        row.fill
+                           R478  freshness pip   freshness-gated  cyan
+                           R479  group label     pin-gated        cyan
+                           R480  edge badge      hot-lane-gated   amber  ← this round
+                         5th gate type — traffic volume — joins hover,
+                         pin, freshness, pin. Each polish anchor uses
+                         a distinct semantic gate but the same paint
+                         vocabulary. Hue: hotStroke (amber-tinted
+                         palette member) at 0x80 alpha — picks up the
+                         R126/R188 hot-edge accent colour family so
+                         the glow reads as a chromatic extension of
+                         the existing hot-lane stroke. 3-px blur
+                         radius reads as soft heat rather than
+                         emergency klaxon.
+                         R51 sentinel safety: badge sw=2 only matters
+                         when the overlap probe runs on g[data-node]
+                         descendants, which this edge-internal badge
+                         is not. Filter is paint-only, bbox unchanged.
+                         transition list extends to include 'filter
+                         200ms ease-out' so the heat halo eases on
+                         the count-crosses-threshold flip. */}
                       <circle
                         cx={badgeX} cy={badgeY}
                         r={isHoveredEdge || isPinned ? 10.5 : 9}
@@ -5785,7 +5857,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         data-edge-badge-opacity-rest={isLight ? 0.95 : 0.85}
                         data-edge-badge-opacity-hover="1"
                         data-edge-badge-opacity-active="1"
-                        style={{ transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out' }}
+                        data-edge-badge-glow={isHot ? 'true' : 'false'}
+                        style={{
+                          filter: isHot
+                            ? `drop-shadow(0 0 3px ${hotStroke}80)`
+                            : undefined,
+                          transition: 'r 180ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out, fill 200ms ease-out, opacity 200ms ease-out, filter 200ms ease-out',
+                        }}
                       />
                       {/* Round 224 / Loop: edge badge text gains the 4th
                           pin-signature typography. Pre-R224 the digit
@@ -6284,15 +6362,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 +8914,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 +8937,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 +9041,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 +9166,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 +9840,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 +9862,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 +9948,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 +9981,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 +10062,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.11",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/topo-edge-badge-hot-glow-test.mjs

@@ -0,0 +1,101 @@
+/* Round 480 verification: edge badge circle gains filter: drop-
+ * shadow glow on isHot (link.count >= 10). 5th anchor in the
+ * R476/R477/R478/R479 drop-shadow family — first traffic-volume-
+ * gated variant.
+ *
+ * Contract:
+ *   - cold edge (count < 10): data-edge-badge-glow='false' AND
+ *     computed filter === 'none'
+ *   - hot edge (count >= 10): glow='true' AND computed filter
+ *     starts with 'drop-shadow' using hotStroke @ 0x80 alpha
+ *   - 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 nowIso = () => new Date().toISOString();
+const sessionFresh = 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: sessionFresh, updated_at: sessionFresh, last_seen_at: sessionFresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('a·1', 'working'), mk('a·2', 'idle'), mk('b·1', 'working'),
+  ] } });
+});
+// Build messages: 12 from a·1 → a·2 (HOT, count=12 >= 10)
+//                  2 from b·1 → a·1 (cold, count=2 < 10)
+const hotMessages = [];
+for (let i = 0; i < 12; i++) {
+  hotMessages.push({
+    id: `hot-${i}`, from_alias: 'a·1', to_alias: 'a·2',
+    content: `m${i}`, created_at: nowIso(),
+  });
+}
+const coldMessages = [
+  { id: 'c1', from_alias: 'b·1', to_alias: 'a·1', content: 'c1', created_at: nowIso() },
+  { id: 'c2', from_alias: 'b·1', to_alias: 'a·1', content: 'c2', created_at: nowIso() },
+];
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: {
+  messages: [...hotMessages, ...coldMessages],
+} }));
+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-edge-badge-glow]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const probe = await page.evaluate(() => {
+  const badges = [...document.querySelectorAll('[data-edge-badge-glow]')];
+  return badges.map(b => {
+    const cs = getComputedStyle(b);
+    return {
+      glow:   b.getAttribute('data-edge-badge-glow'),
+      filter: cs.filter,
+    };
+  });
+});
+
+const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceGlowAttr   = /data-edge-badge-glow=\{isHot/.test(src);
+const sourceDropShadow = /drop-shadow\(0 0 3px \$\{hotStroke\}80\)/.test(src);
+const sourceFilterTween = /filter 200ms ease-out/.test(src);
+
+await browser.close();
+
+const hot = probe.find(b => b.glow === 'true');
+const cold = probe.find(b => b.glow === 'false');
+
+const results = {
+  badges_count_ge_2:        probe.length >= 2,
+  hot_badge_found:          !!hot,
+  hot_filter_has_drop:      hot && /drop-shadow/.test(hot.filter),
+  cold_badge_found:         !!cold,
+  cold_filter_none:         cold?.filter === 'none',
+  source_glow_attr:         sourceGlowAttr,
+  source_drop_shadow:       sourceDropShadow,
+  source_filter_tween:      sourceFilterTween,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge hot-lane drop-shadow:`, JSON.stringify(results),
+  '\n  hot badge:', JSON.stringify(hot),
+  '\n  cold badge:', JSON.stringify(cold));
+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);