@sleep2agi/agent-network-dashboard 0.4.6-preview.31 → 0.4.6-preview.310

package/app/components/utils.ts

@@ -11,14 +11,15 @@ export function previewContent(raw: string | null | undefined): string {
     .trim() || '--';
 }
 
+// Round 44 / Loop: timeAgo now delegates to the shared lib/time helper.
+// The old in-line `replace + 'Z'` parse appended a Z to already-ISO
+// inputs (producing "…ZZ", browser-fragile) — strict-superset semantics
+// preserved for SQL-style inputs, fixed for ISO. Plus a 'just now' fallback
+// when clock skew puts the timestamp in the future. Five callers benefit:
+// /admin · /logs · /settings/networks · InboxPanel · /messages.
+import { relativeAgo } from '../lib/time';
 export function timeAgo(dateStr: string): string {
-  if (!dateStr) return '--';
-  const diff = Date.now() - new Date(dateStr.replace(' ', 'T') + 'Z').getTime();
-  const s = Math.floor(diff / 1000);
-  if (s < 60) return `${s}s ago`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
-  return `${Math.floor(s / 86400)}d ago`;
+  return relativeAgo(dateStr) ?? '--';
 }
 
 export function statusColor(status: string, hasSse: boolean): string {

package/app/globals.css

@@ -828,6 +828,41 @@ body {
 }
 .anet-fade-in { animation: anet-fade-in 0.15s ease-out; }
 
+/* Round 184 — chrome reset button click-spin. The reset button's
+   onClick triggers R168 smoothView crossfade on the canvas, but the
+   BUTTON itself had no visual feedback that the click registered. A
+   single 360° rotation on the refresh-arrow icon (450ms ease-out) is
+   a quick "yes, I heard you" confirmation. Counter-clockwise (-360°)
+   reads as "rewind" / "undo" — natural for a reset gesture. Mirror
+   to R52's hub click ripple at the chrome scope. */
+@keyframes anet-reset-spin {
+  from { transform: rotate(0deg);     }
+  to   { transform: rotate(-360deg); }
+}
+.anet-reset-spin {
+  animation: anet-reset-spin 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+/* Round 186 — chrome zoom-in / zoom-out buttons get a brief icon pop
+   on click. Same click-feel idiom R184 added for the reset button —
+   the canvas already smoothes via R168/R169 smoothView, but the
+   chrome BUTTON itself needs its own confirmation. A quick scale
+   up-then-back (1 → 1.18 → 1 over 220ms) reads as "tapped". Same
+   transform-box: fill-box anchoring as R184 keeps the icon
+   centered in place. */
+@keyframes anet-chrome-pop {
+  0%   { transform: scale(1);    }
+  50%  { transform: scale(1.18); }
+  100% { transform: scale(1);    }
+}
+.anet-chrome-pop {
+  animation: anet-chrome-pop 0.22s ease-out;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
 /* Round 36 — current-step ring pulse on TaskDrawer timeline. Halo gently
    breathes around the active step's dot so users can spot "task is here". */
 @keyframes anet-current-step-pulse-kf {
@@ -840,24 +875,93 @@ body {
 
 /* Round 45 — TopoGraph rotating radar sweep wedge. 6s slow rotation
    gives the topology canvas a real "radar scan" feel without distracting
-   from the agent nodes. */
+   from the agent nodes.
+   R146: split shorthand into longhand so per-render inline style can
+   override animation-duration via --sweep-dur, joining the R145
+   --spoke-dur / R132 --march-dur pattern. Default 6s preserves R45's
+   original cadence for any caller that forgets the var. */
 @keyframes anet-topo-sweep-kf {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 .anet-topo-sweep {
-  animation: anet-topo-sweep-kf 6s linear infinite;
+  animation-name: anet-topo-sweep-kf;
+  animation-duration: var(--sweep-dur, 6s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* R155 — focus-visible outline for TopoGraph chip-row interactives.
+   Cyber theme's dark canvas often swallows the browser default focus
+   ring; R154 fixed it for chrome buttons via Tailwind's focus-visible:
+   ring (box-shadow). Chip-row chips reuse `box-shadow` for the R88 /
+   R139 / R140 pin-mirror inset — so a focus box-shadow would conflict
+   with the pinned-state shadow. `outline` is a separate CSS property
+   and doesn't fight box-shadow, so we use it here. `currentColor`
+   inherits the chip's own accent (green for working, cyan for online,
+   per-vendor for letters, etc.). Only fires on :focus-visible
+   (keyboard) — mouse focus stays unstyled. */
+.anet-topo-chip-focus:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+
+/* R156 — focus-visible outline for SVG-side TopoGraph interactives.
+   Same idiom as R155's chip-row class but for SVG <g> elements
+   (recent-signal rows, legend rows, group labels, edge badges,
+   node bodies, "+N more" footer). Each <g> already has role=
+   "button"/"link" + tabIndex=0 + onKeyDown (R116/R121/R133/R143/
+   R144/R151/R152). Browser default focus outline on SVG is hard
+   to spot against the canvas; explicit cyan-300 ring matches the
+   dashboard's legendAccent. 2-px outline-offset gives breathing
+   room around the painted bounding box. */
+.anet-topo-svg-focus:focus-visible {
+  outline: 2px solid #67e8f9;
+  outline-offset: 2px;
 }
 
 /* Round 46 — animated dashed spokes flowing from hub outward. Each spoke
    gets a small animationDelay (set inline) so the dashes don't all flow
-   in sync — reads as "command relay" pulse rather than a metronome. */
+   in sync — reads as "command relay" pulse rather than a metronome.
+   R145: split shorthand into longhand so per-render inline style can
+   override animation-duration via the --spoke-dur custom property —
+   same idiom R132 uses for --march-dur on group boxes. Default 2.4s
+   when --spoke-dur isn't set, so any future caller that forgets the
+   var keeps R46's original cadence. */
 @keyframes anet-topo-spoke-flow-kf {
   from { stroke-dashoffset: 0;   }
   to   { stroke-dashoffset: -40; }
 }
 .anet-topo-spoke-flow {
-  animation: anet-topo-spoke-flow-kf 2.4s linear infinite;
+  animation-name: anet-topo-spoke-flow-kf;
+  animation-duration: var(--spoke-dur, 2.4s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* Round 85 — group-box "marching ants" perimeter drift.
+   Applied to a grid-layout group box whose `statuses.working > 0`
+   AND that is neither hovered nor pinned (those treatments already
+   carry their own visual emphasis via solid stroke). Slow 12s
+   linear cycle reads as ambient motion, not animation — the eye
+   parses "this group has live work" without registering the box
+   as moving. R86 stride matches the box's `strokeDasharray="6 6"`
+   so a single full cycle returns to a frame-identical state.
+   prefers-reduced-motion handled by the blanket override below.
+   R132: split shorthand into longhand so per-group inline style can
+   override animation-duration via the --march-dur custom property
+   without re-declaring keyframe + timing + iteration count. Default
+   stays at 12s when --march-dur isn't set, so existing single-group
+   call sites keep their cadence. */
+@keyframes anet-topo-groupbox-march-kf {
+  from { stroke-dashoffset: 0;   }
+  to   { stroke-dashoffset: -12; }
+}
+.anet-topo-groupbox-live {
+  animation-name: anet-topo-groupbox-march-kf;
+  animation-duration: var(--march-dur, 12s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 
 /* ─────────────────────────────────────────────────────────────────────
@@ -894,7 +998,8 @@ body {
   .anet-fade-in,
   .anet-current-step-pulse,
   .anet-topo-sweep,
-  .anet-topo-spoke-flow {
+  .anet-topo-spoke-flow,
+  .anet-topo-groupbox-live {
     animation: none !important;
   }
   /* Tasks row grid 0fr↔1fr keep working (it's the toggle mechanism),

package/app/lib/time.ts

@@ -0,0 +1,36 @@
+/** Shared timestamp helpers for hub-sourced data.
+ *
+ *  Background — the CommHub serialises timestamps SQL-style without a
+ *  zone ("2026-05-15 06:00:28"), but some test data uses full ISO
+ *  ("…T06:00:28Z"). `Date.parse` on bare SQL is **local-time** in every
+ *  browser the dashboard supports, so a UTC+8 operator silently sees
+ *  every timestamp 8 h older than reality (Round 35 dug this out via
+ *  the `isGhost` filter mis-fire).
+ *
+ *  Round 38 / Loop consolidates parsing — TopoGraph (R35), ChatPopover
+ *  (R37) and utils.ts::timeAgo all mirrored the same SQL→UTC rewrite;
+ *  one source of truth here. */
+
+/** Parse a hub timestamp to ms-since-epoch, treating SQL-style strings
+ *  as UTC. ISO strings (with `T`) bypass the rewrite and are parsed as-is.
+ *  Returns null for empty / unparseable input. */
+export function parseHubTime(dateStr: string | null | undefined): number | null {
+  if (!dateStr) return null;
+  const iso = dateStr.includes('T') ? dateStr : dateStr.replace(' ', 'T') + 'Z';
+  const t = Date.parse(iso);
+  return Number.isFinite(t) ? t : null;
+}
+
+/** Format `dateStr` as a short relative-time string ("6m ago" / "2h ago").
+ *  Future timestamps (clock skew) collapse to "just now". Returns null when
+ *  the input doesn't parse — callers can decide on a fallback. */
+export function relativeAgo(dateStr: string | null | undefined): string | null {
+  const t = parseHubTime(dateStr);
+  if (t === null) return null;
+  const s = Math.floor((Date.now() - t) / 1000);
+  if (s < 0) return 'just now';
+  if (s < 60) return `${s}s ago`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+  if (s < 86400) return `${Math.floor(s / 3600)}h ago`;
+  return `${Math.floor(s / 86400)}d ago`;
+}

package/app/lib/vendorIdentity.ts

@@ -54,7 +54,10 @@ const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity
       label: 'MiniMax',
       mono: { bg: 'hsl(18 50% 26%)', ring: 'hsl(18 65% 52%)', text: 'hsl(20 80% 82%)' },
       initial: 'M',
-      logo: null, // → public/vendors/minimax.* when assets land
+      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
+      // the MiniMax trademark; geometric min/max zigzag in their warm-
+      // red palette. Replaces plain-letter "M" fallback.
+      logo: '/vendors/minimax.svg',
     },
   },
   {
@@ -64,7 +67,11 @@ const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity
       label: 'Anthropic',
       mono: { bg: 'hsl(16 32% 26%)', ring: 'hsl(16 48% 54%)', text: 'hsl(18 60% 84%)' },
       initial: 'A',
-      logo: null,
+      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
+      // the Anthropic trademark; 4-pointed sparkle in their warm-orange
+      // palette evokes AI/Claude without imitating the official mark.
+      // Real Anthropic logo still pending Vincent-direct asset OK.
+      logo: '/vendors/claude.svg',
     },
   },
   {
@@ -74,7 +81,11 @@ const VENDOR_RULES: Array<{ test: (m: string) => boolean; vendor: VendorIdentity
       label: 'OpenAI',
       mono: { bg: 'hsl(165 26% 22%)', ring: 'hsl(165 40% 44%)', text: 'hsl(165 45% 80%)' },
       initial: 'O',
-      logo: null,
+      // P0 (Vincent 5222) custom-designed vendor badge — NOT a copy of
+      // the OpenAI trademark; hexagonal frame + center dot in their
+      // teal palette evokes geometric AI lattice without imitating the
+      // knot. Real OpenAI logo still pending Vincent-direct asset OK.
+      logo: '/vendors/openai.svg',
     },
   },
 ];

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.4.6-preview.31",
+  "version": "0.4.6-preview.310",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
-    "prepublishOnly": "rm -rf .next && npm run build"
+    "prepublishOnly": "[ -f .next/BUILD_ID ] || (echo 'prepublishOnly: .next/BUILD_ID missing — run npm run build first (see commit 05c1ebf body for R224 chunk-500 root cause)' >&2 && exit 1)"
   },
   "bin": {
     "agent-network-dashboard": "./bin/start.js"

package/public/sleep2agi-logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <!-- sleep2agi brand mark: a crescent moon — the "sleep" metaphor in the
+       name. Two-shape construction: outer disc minus offset inner disc =
+       crescent. uses currentColor so the embedding context can theme it. -->
+  <mask id="s2a-moon-mask">
+    <rect width="32" height="32" fill="black" />
+    <circle cx="16" cy="16" r="13" fill="white" />
+    <circle cx="20.5" cy="14.5" r="11" fill="black" />
+  </mask>
+  <rect width="32" height="32" fill="currentColor" mask="url(#s2a-moon-mask)" />
+</svg>

package/public/vendors/claude.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- Anthropic / Claude vendor mark.
+       NOT a copy of the Anthropic trademark — custom designed badge
+       in warm-orange palette. 4-rayed sparkle = "AI spark of insight".
+       Real Anthropic logo asset still gated on Vincent-direct. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(16 32% 22%)" />
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(16 48% 54%)" stroke-width="2" />
+  <g fill="hsl(20 80% 78%)" transform="translate(32 32)">
+    <path d="M 0 -18 L 4 -4 L 18 0 L 4 4 L 0 18 L -4 4 L -18 0 L -4 -4 Z" />
+  </g>
+</svg>

package/public/vendors/minimax.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- MiniMax vendor mark. NOT a copy of the MiniMax trademark —
+       custom designed badge: angular min/max zigzag in warm-red
+       palette evokes the function-shape without imitating the official
+       mark. Real MiniMax logo asset still gated on Vincent-direct. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(18 50% 22%)" />
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(18 65% 52%)" stroke-width="2" />
+  <polyline points="14,42 22,22 32,42 42,22 50,42"
+            fill="none" stroke="hsl(20 80% 80%)" stroke-width="4"
+            stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/public/vendors/openai.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- OpenAI / GPT / Codex vendor mark. NOT a copy of the OpenAI
+       trademark — custom designed badge: hexagonal frame + center dot
+       in teal palette evokes "geometric AI lattice" without imitating
+       the OpenAI knot. Real OpenAI logo asset still gated on Vincent-
+       direct. -->
+  <circle cx="32" cy="32" r="32" fill="hsl(165 26% 20%)" />
+  <circle cx="32" cy="32" r="30" fill="none" stroke="hsl(165 40% 44%)" stroke-width="2" />
+  <polygon points="32,12 47,21 47,43 32,52 17,43 17,21"
+           fill="none" stroke="hsl(165 50% 78%)" stroke-width="3" stroke-linejoin="round" />
+  <circle cx="32" cy="32" r="4" fill="hsl(165 50% 78%)" />
+</svg>

package/scripts/help-overlay-topo-test.mjs

@@ -0,0 +1,44 @@
+/* Round 25 verification: pressing `?` opens the help overlay, and the
+ * new "Topology canvas" section is present with the documented keys. */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+await ctx.route('**/api/hub/status*', (route) => route.fulfill({ json: { sessions: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(400);
+
+await page.keyboard.press('?');
+await page.waitForTimeout(200);
+
+// The overlay contains group headings; find the Topology canvas group + its rows.
+const data = await page.evaluate(() => {
+  // The group heading is a <div>; its parent wraps heading + the <ul> of items.
+  const heading = [...document.querySelectorAll('[role="dialog"] div')].find(el => el.textContent === 'Topology canvas');
+  if (!heading) return null;
+  return {
+    headingPresent: true,
+    sectionText: (heading.parentElement?.textContent || '').replace(/\s+/g, ' ').trim(),
+  };
+});
+
+await browser.close();
+const results = {
+  overlayOpened: !!data,
+  topologySectionPresent: !!data?.headingPresent,
+  hasZoomKeys: !!data && /Zoom in/.test(data.sectionText) && /Zoom out/.test(data.sectionText) && /Reset zoom/.test(data.sectionText),
+  hasMouseGestures: !!data && /wheel/.test(data.sectionText) && /Pan the canvas/.test(data.sectionText),
+  hasClickHint: !!data && /chat popover/.test(data.sectionText) && /dbl-click/.test(data.sectionText),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} help overlay topology section:`, JSON.stringify(results));
+if (!ok && data) console.log('section text:', data.sectionText.slice(0, 300));
+process.exit(ok ? 0 : 1);

package/scripts/p0-topo-screenshot.mjs

@@ -0,0 +1,82 @@
+/* P0 (Vincent 5222) baseline + after screenshot of TopoGraph with a
+ * realistic 4-agent mixed-vendor fleet. Usage:
+ *   node scripts/p0-topo-screenshot.mjs <out-prefix>
+ * Writes <out-prefix>-full.png (1600×900) and <out-prefix>-svg.png
+ * (just the SVG bbox, cropped). */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const outPrefix = process.argv[2] || 'screenshots/r293-p0/baseline';
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1600, height: 1400 }, deviceScaleFactor: 2 });
+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'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+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, model, status = 'working') => ({
+    alias, status, model, 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('claude-1',  'claude-opus-4'),
+    mk('claude-2',  'claude-sonnet-4', 'idle'),
+    mk('codex-1',   'gpt-4o'),
+    mk('intern-1',  'internlm/internlm2'),
+    mk('minimax-1', 'minimax/abab6', 'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { from: 'claude-1', to: 'codex-1',  text: 'review the diff please', ts: fresh },
+  { from: 'codex-1',  to: 'claude-1', text: 'lgtm, ship', ts: fresh },
+  { from: 'intern-1', to: 'claude-1', text: 'logs uploaded', ts: fresh },
+] } }));
+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.waitForFunction(() => document.querySelectorAll('g[data-node]').length >= 4, { timeout: 30000 });
+await page.waitForTimeout(800);
+
+// Scroll the topology card into view + measure.
+const topoBox = await page.evaluate(() => {
+  const chromeEl = document.querySelector('[data-topo-chrome]');
+  if (!chromeEl) return null;
+  // Walk up to find the topology card container — has the SVG inside.
+  let card = chromeEl.parentElement;
+  while (card && !card.querySelector(':scope > svg')) card = card.parentElement;
+  if (!card) return null;
+  card.scrollIntoView({ block: 'start' });
+  // Allow scroll to settle.
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      const r = card.getBoundingClientRect();
+      resolve({ x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height });
+    });
+  });
+});
+await page.waitForTimeout(400);
+
+await page.screenshot({ path: `${outPrefix}-full.png`, fullPage: false });
+if (topoBox && topoBox.width > 100 && topoBox.height > 100) {
+  // Re-measure after settling.
+  const box2 = await page.evaluate(() => {
+    const chromeEl = document.querySelector('[data-topo-chrome]');
+    let card = chromeEl?.parentElement;
+    while (card && !card.querySelector(':scope > svg')) card = card?.parentElement;
+    if (!card) return null;
+    const r = card.getBoundingClientRect();
+    return { x: Math.max(0, r.x), y: Math.max(0, r.y), width: r.width, height: r.height };
+  });
+  if (box2) {
+    await page.screenshot({ path: `${outPrefix}-topo.png`, clip: box2 });
+  }
+}
+console.log(`✅ wrote ${outPrefix}-full.png + ${outPrefix}-topo.png`);
+await browser.close();

package/scripts/topo-active-filter-pill-test.mjs

@@ -0,0 +1,101 @@
+/* Round 64 verification: active-filter pills appear in chip row when
+ * pins are set and clear their pin on × click.
+ *
+ *  - No pin → no pill rendered.
+ *  - Pin status (via legend) → pill labelled "filter: working" with
+ *    aria-label that includes "Clear working filter".
+ *  - × button click → pin clears + node opacities restore.
+ *  - Both pins independent: pin a status + pin a group → two pills.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+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 {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+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 sessions = [
+    { alias: 'alpha1', status: 'working', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'alpha2', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'alpha3', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'beta',   status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+  ];
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const readPills = () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-active-filter]')].map(el => ({
+    kind: el.getAttribute('data-active-filter'),
+    text: (el.textContent || '').trim(),
+  }));
+});
+const readWkrOpacity = () => page.evaluate(() => +(document.querySelector('g[data-node="alpha1"]')?.style.opacity || '1'));
+
+const pillsBefore = await readPills();
+
+// Pin working via legend.
+await page.locator('g[data-legend-status="working"]').first().click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const pillsAfterStatus = await readPills();
+const wkrAfterStatus = await readWkrOpacity();
+
+// Pin alpha group via label click.
+await page.locator('g[data-group-label-hit="alpha"]').first().click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const pillsBothPinned = await readPills();
+
+// Click × on the status pill.
+await page.locator('[data-active-filter="status"] button[aria-label*="working"]').first().click({ force: true });
+await page.waitForTimeout(250);
+const pillsAfterStatusClear = await readPills();
+const wkrAfterStatusClear = await readWkrOpacity();
+
+// Click × on the group pill.
+await page.locator('[data-active-filter="group"] button[aria-label*="alpha"]').first().click({ force: true });
+await page.waitForTimeout(250);
+const pillsFinal = await readPills();
+
+await browser.close();
+
+const results = {
+  before_noPills:        pillsBefore.length === 0,
+  statusPin_oneStatusPill: pillsAfterStatus.length === 1
+                          && pillsAfterStatus[0].kind === 'status'
+                          && /filter:\s*working/.test(pillsAfterStatus[0].text),
+  statusPin_dimsBeta:     wkrAfterStatus >= 0.55,   // alpha1 IS working — should stay
+  bothPinned_twoPills:    pillsBothPinned.length === 2
+                          && pillsBothPinned.some(p => p.kind === 'status')
+                          && pillsBothPinned.some(p => p.kind === 'group'),
+  statusClear_only_group_remains: pillsAfterStatusClear.length === 1
+                                  && pillsAfterStatusClear[0].kind === 'group',
+  statusClear_restoredOpacity: wkrAfterStatusClear >= 0.55,
+  groupClear_noPills:     pillsFinal.length === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-filter pill:`, JSON.stringify(results),
+  `\n  pillsAfterStatus=`, pillsAfterStatus,
+  `\n  pillsBothPinned=`, pillsBothPinned,
+  `\n  pillsAfterStatusClear=`, pillsAfterStatusClear);
+process.exit(ok ? 0 : 1);