@sleep2agi/agent-network-dashboard 0.5.6 → 0.5.7-preview.0

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

@@ -1,110 +0,0 @@
-/* Round 71 verification: each active-filter pill shows a "· N" match
- * count tail and surfaces `data-filter-match-count` for tooling.
- *
- * Sessions: 1 working + 2 idle + 1 offline + 3-alpha cluster.
- *   Pin status=working → pill "filter: working · 1", count=1
- *   Pin status=idle    → pill "filter: idle · 5",    count=5 (idl + alpha1/2/3 all idle online)
- *   Pin status=offline → pill "filter: offline · 1", count=1
- *   Pin group=alpha    → pill "filter: alpha · 3",   count=3 (3 alphas)
- */
-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');
-    sessionStorage.removeItem('anet-topo-pinned-status');
-    sessionStorage.removeItem('anet-topo-pinned-group');
-  } catch {}
-});
-
-const fresh = new Date(Date.now() - 60 * 1000).toISOString();
-const stale = new Date(Date.now() - 30 * 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: 'wkr',    status: 'working', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
-    { alias: 'idl',    status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
-    { alias: 'idl2',   status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
-    { alias: 'alpha1', status: 'idle',    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: 'off',    status: 'offline', network_id: nid, project_dir: null, created_at: stale, updated_at: stale, last_seen_at: stale },
-  ];
-  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 === 7, { timeout: 30000 });
-await page.waitForTimeout(700);
-
-async function pin({ status, group }) {
-  await page.evaluate(({ status, group }) => {
-    if (status === null) { sessionStorage.removeItem('anet-topo-pinned-status'); }
-    else { sessionStorage.setItem('anet-topo-pinned-status', status); }
-    if (group === null) { sessionStorage.removeItem('anet-topo-pinned-group'); }
-    else if (group) { sessionStorage.setItem('anet-topo-pinned-group', group); }
-    window.dispatchEvent(new CustomEvent('anet:topo-pin',
-      { detail: status !== undefined ? { kind: 'status', value: status }
-              : group !== undefined ? { kind: 'group',  value: group }
-              : { kind: 'clear' } }));
-  }, { status, group });
-  await page.waitForTimeout(250);
-}
-
-const readPill = (kind) => page.evaluate(k => {
-  const el = document.querySelector(`[data-active-filter="${k}"]`);
-  if (!el) return null;
-  return {
-    text:  (el.innerText || el.textContent || '').trim(),
-    count: el.getAttribute('data-filter-match-count'),
-  };
-}, kind);
-
-// Pin working → 1 match.
-await pin({ status: 'working' });
-const w = await readPill('status');
-
-// Pin idle → 5 (idl + idl2 + alpha1 + alpha2 + alpha3 — all idle online).
-await pin({ status: 'idle' });
-const i = await readPill('status');
-
-// Pin offline → 1 match.
-await pin({ status: 'offline' });
-const o = await readPill('status');
-
-// Pin group alpha → 3 match.
-await pin({ status: null });
-await pin({ group: 'alpha' });
-const g = await readPill('group');
-
-await browser.close();
-
-const results = {
-  working_attrCount1:  w && w.count === '1',
-  working_textHas1:    w && /·\s*1\b/.test(w.text),
-  idle_attrCount5:     i && i.count === '5',
-  idle_textHas5:       i && /·\s*5\b/.test(i.text),
-  offline_attrCount1:  o && o.count === '1',
-  offline_textHas1:    o && /·\s*1\b/.test(o.text),
-  group_attrCount3:    g && g.count === '3',
-  group_textHas3:      g && /·\s*3\b/.test(g.text),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} filter pill count:`, JSON.stringify(results),
-  `\n  working=`, w,
-  `\n  idle=`,    i,
-  `\n  offline=`, o,
-  `\n  group=`,   g);
-process.exit(ok ? 0 : 1);

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

@@ -1,90 +0,0 @@
-/* Round 543 verification: status filter pill gains always-on tier-color
- * drop-shadow when rendered (pin-gated visual). Sibling to R477 legend
- * pin-ring pin-gated drop-shadow at the chip-row scope.
- *
- * Test phases:
- *   1. unpinned: no [data-active-filter="status"] element (pill hidden)
- *   2. click working pressure-bar segment to pin → pill renders
- *   3. pill has filter='drop-shadow(...)' with cyber working tier
- *      color rgba(134, 239, 172, ...) [#86efac]
- *   4. source-side regex confirms filter wired with tier-color ternary
- */
-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,
-  });
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    mk('a·1', 'working'), mk('a·2', 'idle'), mk('a·3', 'offline'),
-  ] } });
-});
-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-pressure-seg="working"]', { timeout: 15000 });
-await page.waitForTimeout(500);
-
-// Phase 1: unpinned — verify pill absent
-const unpinned = await page.evaluate(() => {
-  return document.querySelector('[data-active-filter="status"]') !== null;
-});
-
-// Phase 2: click working pressure-seg to pin status='working'
-await page.click('[data-pressure-seg="working"]');
-await page.waitForTimeout(400);
-
-// Phase 3: pill should now exist
-await page.waitForSelector('[data-active-filter="status"]', { timeout: 5000 });
-const pinned = await page.evaluate(() => {
-  const el = document.querySelector('[data-active-filter="status"]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    inlineFilter: el.style.filter,
-    filter: cs.filter,
-  };
-});
-
-await browser.close();
-
-// Source regex
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceFilterWired =
-  /filter: `drop-shadow\(0 0 3px \$\{[\s\S]*?pinnedStatus === 'working'[\s\S]*?'#047857'[\s\S]*?'#86efac'[\s\S]*?\}99\)`,/.test(src);
-
-const results = {
-  unpinned_pill_absent:   unpinned === false,
-  pinned_pill_present:    pinned !== null,
-  pinned_inline_filter:   /drop-shadow/.test(pinned?.inlineFilter || ''),
-  pinned_computed_filter: /drop-shadow/.test(pinned?.filter || ''),
-  // Cyber working text color #86efac → rgb(134, 239, 172); +0x99 alpha → rgba(134, 239, 172, 0.6)
-  pinned_working_color:   /rgba?\(134,?\s*239,?\s*172/.test(pinned?.filter || ''),
-  source_filter_wired:    sourceFilterWired,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R543 status filter pill glow:`,
-  JSON.stringify(results, null, 2),
-  '\n  unpinned absent:', unpinned,
-  '\n  pinned:', JSON.stringify(pinned));
-process.exit(ok ? 0 : 1);

package/scripts/topo-filter-pill-halo-layers-test.mjs

@@ -1,27 +0,0 @@
-/* Round 661 — 3 filter-pill drop-shadow surfaces gain a SECOND
- * outer drop-shadow at 6px + 30% color-mix (half R543 inner 60%).
- * 20th anchor in multi-layer halo family (1st chip/HTML-pill anchor).
- *
- * Surfaces: groupKey filter pill, vendor filter pill, status (edge)
- * filter pill — 3 sibling filter chips above the canvas.
- *
- * Test: source-only — all 3 filter-pill sites stack 2 drop-shadows
- * with color-mix(in srgb, ... 60%) → color-mix(in srgb, ... 30%)
- * falloff pattern.
- */
-import { readFileSync } from 'node:fs';
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceLegendAccent = /`drop-shadow\(0 0 3px color-mix\(in srgb, \$\{pal\.legendAccent\} 60%, transparent\)\) drop-shadow\(0 0 6px color-mix\(in srgb, \$\{pal\.legendAccent\} 30%, transparent\)\)`/.test(src);
-const sourceVendorColor  = /`drop-shadow\(0 0 3px color-mix\(in srgb, \$\{vendorColor\} 60%, transparent\)\) drop-shadow\(0 0 6px color-mix\(in srgb, \$\{vendorColor\} 30%, transparent\)\)`/.test(src);
-const sourceFlowEdge     = /`drop-shadow\(0 0 3px color-mix\(in srgb, \$\{pal\.flowEdge\} 60%, transparent\)\) drop-shadow\(0 0 6px color-mix\(in srgb, \$\{pal\.flowEdge\} 30%, transparent\)\)`/.test(src);
-
-const results = {
-  source_legend_accent_pill: sourceLegendAccent,
-  source_vendor_pill:        sourceVendorColor,
-  source_flow_edge_pill:     sourceFlowEdge,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R661 filter-pill multi-layer halo (3 sibling chips in one sweep):`,
-  JSON.stringify(results, null, 2));
-process.exit(ok ? 0 : 1);

package/scripts/topo-filter-pill-hover-lift-test.mjs

@@ -1,101 +0,0 @@
-/* Round 397 verification: filter pin pills gain hover lift
- * translateY(-1px). Sibling to R143 recent-row lift idiom —
- * extends the "rising on hover" gesture from SVG canvas surfaces
- * to the HTML filter chip strip. All 4 filter pill variants
- * (status / group / vendor / edge) carry the lift.
- *
- * Contract:
- *   - Source-file verification of the new className tokens
- *     (transition-transform + hover:-translate-y-px + transform-gpu)
- *   - The data-topo-filter-pill-hover-lift="true" sentinel attr
- *     is mounted when any filter pill is rendered (pinned filter
- *     present). Test mounts a status filter by clicking a status
- *     chip, then probes the resulting pill.
- *   - Pre-R397 invariants preserved on the pill className:
- *     * group / rounded-md / font-mono / font-medium / text-xs
- *       / border / anet-fade-in / anet-topo-chip-focus
- *
- * Note: hover dispatch on HTML chips in headless can fire but
- * computing the post-hover translate-y reliably requires a mouse
- * sweep. Test asserts the className tokens are present (which
- * is what Tailwind compiles into `:hover` CSS) plus the sentinel
- * attr — both deterministic from source.
- */
-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: 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'); 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', 'working'),
-    mk('beta',  'idle'),
-    mk('gamma', 'idle'),
-  ] } });
-});
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
-await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
-
-const page = await ctx.newPage();
-await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-await page.waitForSelector('g[data-node]', { timeout: 15000 });
-await page.waitForTimeout(400);
-
-// Click a legend status row to pin the status filter → mounts the
-// filter pill. Use the alpha node since `working` row exists in fixture.
-await page.click('[data-legend-status="working"]');
-await page.waitForSelector('[data-topo-filter-pill-hover-lift="true"]', { timeout: 5000 });
-
-const probe = await page.evaluate(() => {
-  const pill = document.querySelector('[data-topo-filter-pill-hover-lift="true"]');
-  return pill ? {
-    className: pill.className,
-    activeFilter: pill.getAttribute('data-active-filter'),
-  } : null;
-});
-
-const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const occurrences = (fileText.match(/hover:-translate-y-px/g) || []).length;
-const sentinelOccurrences = (fileText.match(/data-topo-filter-pill-hover-lift="true"/g) || []).length;
-
-await browser.close();
-
-const cls = probe?.className || '';
-const results = {
-  // Sentinel attr mounted on the filter pill
-  pill_mounted:             !!probe,
-  // R397: hover-lift tokens present in className
-  has_transition_transform: cls.includes('transition-transform'),
-  has_hover_translate:      cls.includes('hover:-translate-y-px'),
-  has_transform_gpu:        cls.includes('transform-gpu'),
-  has_duration_200:         cls.includes('duration-200'),
-  has_ease_out:             cls.includes('ease-out'),
-  // Pre-R397 className tokens preserved
-  has_rounded_md:           cls.includes('rounded-md'),
-  has_font_mono:            cls.includes('font-mono'),
-  has_anet_topo_chip_focus: cls.includes('anet-topo-chip-focus'),
-  // Source-file replace_all coverage: 3 "group ..." pills + 1 plain pill = 4 occurrences
-  source_4_pills_lifted:    occurrences === 4,
-  source_4_sentinels:       sentinelOccurrences === 4,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} filter pin pills hover lift translateY(-1px):`, JSON.stringify(results),
-  '\n  className:', cls,
-  '\n  activeFilter:', probe?.activeFilter,
-  '\n  occurrences:', occurrences, '/ sentinels:', sentinelOccurrences);
-process.exit(ok ? 0 : 1);

package/scripts/topo-filter-pill-hover-opacity-test.mjs

@@ -1,110 +0,0 @@
-/* Round 355 verification: filter pin pills (status / group / vendor)
- * gain pure-CSS group-hover lift of their inner opacity-70 spans
- * (prefix `filter:` + count `· N`) to 100 % on pill hover. Marks the
- * whole pill as scan-it interactive without layout reflow (opacity
- * is paint-only). The R335 prefix-opacity tier + R323 count-opacity
- * tier are preserved at rest; both ease to 100 % on pill hover.
- *
- * Contract (cyber, status filter pinned to 'working'):
- *   - Rest: filter-prefix + filter-pill-count computed opacity 0.7.
- *   - Hover pill: both spans computed opacity 1.
- *   - Inline transition contains 'opacity'.
- *   - Pre-R355 invariants:
- *     * R335 prefix span keeps `hidden sm:inline opacity-70` baseline
- *     * R323 count span keeps `opacity-70 tabular-nums` baseline
- *     * Pill click-to-clear unchanged (still has onClick / cursor)
- */
-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: 1500, 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');
-    sessionStorage.setItem('anet_v3_auth', '1');
-    // Pre-pin status='working' so the filter pill mounts on first paint.
-    localStorage.setItem('anet-pinnedStatus', JSON.stringify('working'));
-  } 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) => ({
-    alias, status: 'working', 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'), mk('b'), mk('c') ] } });
-});
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
-await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
-
-const page = await ctx.newPage();
-await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-// If pre-pin via localStorage didn't take, click the working chip to pin.
-await page.waitForSelector('[data-working-chip]', { timeout: 15000 });
-const pillVisible = await page.locator('[data-active-filter="status"]').count();
-if (pillVisible === 0) {
-  await page.click('[data-working-chip]');
-  await page.waitForSelector('[data-active-filter="status"]', { timeout: 5000 });
-}
-await page.waitForTimeout(300);
-
-const restProbe = await page.evaluate(() => {
-  const pill = document.querySelector('[data-active-filter="status"]');
-  const prefix = pill?.querySelector('[data-filter-prefix]');
-  const count  = pill?.querySelector('[data-filter-pill-count]');
-  return {
-    prefixOpacity:  prefix ? getComputedStyle(prefix).opacity : null,
-    countOpacity:   count  ? getComputedStyle(count).opacity  : null,
-    prefixTrans:    prefix ? getComputedStyle(prefix).transition : null,
-    countTrans:     count  ? getComputedStyle(count).transition  : null,
-    prefixCls:      prefix?.getAttribute('class') ?? null,
-    countCls:       count?.getAttribute('class')  ?? null,
-    pillCursor:     pill ? getComputedStyle(pill).cursor : null,
-  };
-});
-
-// Hover the pill.
-await page.hover('[data-active-filter="status"]');
-await page.waitForTimeout(300);
-const hoverProbe = await page.evaluate(() => {
-  const pill = document.querySelector('[data-active-filter="status"]');
-  const prefix = pill?.querySelector('[data-filter-prefix]');
-  const count  = pill?.querySelector('[data-filter-pill-count]');
-  return {
-    prefixOpacity: prefix ? getComputedStyle(prefix).opacity : null,
-    countOpacity:  count  ? getComputedStyle(count).opacity  : null,
-  };
-});
-
-await browser.close();
-
-const approxEq = (a, b, tol = 0.02) => {
-  const x = parseFloat(a); const y = parseFloat(b);
-  return Number.isFinite(x) && Number.isFinite(y) && Math.abs(x - y) <= tol;
-};
-const hasTrans = (s, prop) =>
-  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
-
-const results = {
-  rest_prefix_0_7:        approxEq(restProbe.prefixOpacity, 0.7),
-  rest_count_0_7:         approxEq(restProbe.countOpacity,  0.7),
-  prefix_trans_has_op:    hasTrans(restProbe.prefixTrans, 'opacity'),
-  count_trans_has_op:     hasTrans(restProbe.countTrans,  'opacity'),
-  prefix_cls_has_op_70:   /opacity-70/.test(restProbe.prefixCls || ''),  // R335
-  count_cls_has_tabular:  /tabular-nums/.test(restProbe.countCls || ''), // R323
-  pill_cursor_pointer:    restProbe.pillCursor === 'pointer',
-  hover_prefix_1:         approxEq(hoverProbe.prefixOpacity, 1),
-  hover_count_1:          approxEq(hoverProbe.countOpacity,  1),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} filter pill hover-opacity lift:`, JSON.stringify(results),
-  '\n  rest: ', restProbe,
-  '\n  hover:', hoverProbe);
-process.exit(ok ? 0 : 1);

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

@@ -1,90 +0,0 @@
-/* Round 67 verification: filter pills shed the "filter:" prefix on
- * narrow viewports and gain an anet-fade-in entrance.
- *  - At <sm (375 px) the prefix span has `display:none` via the
- *    `hidden sm:inline` class — visible pill text = "working×".
- *  - At sm+ (900 px) the prefix is visible — "filter: working ×".
- *  - The pill `<span>` carries `anet-fade-in` class so it eases in
- *    on mount (entrance polish).
- */
-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 });
-
-async function probe(width) {
-  const ctx = await browser.newContext({ viewport: { width, 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');
-      sessionStorage.setItem('anet_v3_auth', '1');
-      // Pre-seed the working pin via R66 persistence so the pill exists
-      // on first paint — keeps the test independent of click wiring.
-      sessionStorage.setItem('anet-topo-pinned-status', 'working');
-    } 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: 'wkr',  status: 'working', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
-      { alias: 'idl',  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*', (r) => r.fulfill({ json: { messages: [] } }));
-  await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
-  const page = await ctx.newPage();
-  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-  // Mobile viewport auto-hides the topology section; click "Show Topology"
-  // if the button surfaces. Otherwise the pill still renders in the chip
-  // row (chip row is independent of canvas visibility).
-  await page.waitForTimeout(1200);
-  const showBtn = page.locator('button', { hasText: /Show Topology/i });
-  if (await showBtn.count() > 0) await showBtn.first().click();
-  await page.waitForSelector('[data-active-filter="status"]', { timeout: 15000 });
-
-  const info = await page.evaluate(() => {
-    const pill = document.querySelector('[data-active-filter="status"]');
-    if (!pill) return null;
-    const prefix = pill.querySelector('[data-filter-prefix]');
-    // innerText respects display:none (vs textContent which includes
-    // all DOM text); that's the visible-to-the-user version.
-    return {
-      pillText:   (pill.innerText || '').trim(),
-      pillFull:   (pill.textContent || '').trim(),
-      pillClasses: pill.getAttribute('class') || '',
-      hasFadeIn: /\banet-fade-in\b/.test(pill.getAttribute('class') || ''),
-      prefixVisible: prefix
-        ? (() => {
-            const r = prefix.getBoundingClientRect();
-            return r.width > 0 && r.height > 0;
-          })()
-        : false,
-      prefixDisplay: prefix ? getComputedStyle(prefix).display : null,
-    };
-  });
-  await ctx.close();
-  return info;
-}
-
-const mobile  = await probe(375);
-const desktop = await probe(900);
-await browser.close();
-
-const results = {
-  mobile_prefixHidden:    mobile && mobile.prefixVisible === false && mobile.prefixDisplay === 'none',
-  mobile_textNoPrefix:    mobile && /^working/.test(mobile.pillText.trim()),
-  mobile_hasFadeIn:       mobile && mobile.hasFadeIn === true,
-  desktop_prefixVisible:  desktop && desktop.prefixVisible === true,
-  desktop_textWithPrefix: desktop && /^filter:\s*working/.test(desktop.pillText.trim()),
-  desktop_hasFadeIn:      desktop && desktop.hasFadeIn === true,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} filter pill mobile:`, JSON.stringify(results),
-  `\n  mobile=`, mobile,
-  `\n  desktop=`, desktop);
-process.exit(ok ? 0 : 1);

package/scripts/topo-filter-pill-value-fw-test.mjs

@@ -1,88 +0,0 @@
-/* Round 412 verification: filter pin pill VALUE picks up fw=600
- * (font-semibold). Extends chip-internal-hierarchy arc (11th
- * anchor) — pill now reads with proper data-tier emphasis around
- * its R355 opacity-70 prefix/suffix.
- *
- * Contract:
- *   - Source-file verification of 4 occurrences of
- *     `<span className="font-semibold" data-filter-value>`
- *   - Runtime: pin a status filter, probe the data-filter-value
- *     span on the mounted pill — className includes font-semibold
- *     + textContent matches the pinned value.
- *   - Pre-R412 invariants on the pill:
- *     * data-filter-prefix span still opacity-70
- *     * data-filter-pill-count still opacity-70 tabular-nums
- *     * R397 hover-translate-y-px className still present
- *     * R332/R355/R356 className tokens preserved
- */
-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: 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'); 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', 'working'),
-    mk('beta',  'idle'),
-  ] } });
-});
-await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
-await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
-
-const page = await ctx.newPage();
-await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
-await page.waitForSelector('g[data-node]', { timeout: 15000 });
-
-// Click legend status row to pin filter → mounts the filter pill
-await page.click('[data-legend-status="working"]');
-await page.waitForSelector('[data-filter-value]', { timeout: 5000 });
-
-const probe = await page.evaluate(() => {
-  const valueSpan = document.querySelector('[data-filter-value]');
-  if (!valueSpan) return null;
-  const pill = valueSpan.closest('[data-topo-filter-pill-hover-lift="true"]');
-  return {
-    valueText:      valueSpan.textContent,
-    valueClass:     valueSpan.className,
-    valueFwComputed: getComputedStyle(valueSpan).fontWeight,
-    pillClass:      pill?.className ?? null,
-    pillActiveFilter: pill?.getAttribute('data-active-filter') ?? null,
-  };
-});
-
-const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const valueOccurrences = (fileText.match(/<span className="font-semibold" data-filter-value>/g) || []).length;
-
-await browser.close();
-
-const results = {
-  // Runtime: value span has font-semibold
-  value_has_font_semibold:  probe?.valueClass.includes('font-semibold') === true,
-  value_text_working:       probe?.valueText === 'working',
-  value_fw_600:             probe?.valueFwComputed === '600',
-  // Pill mounted with R397 hover-lift
-  pill_has_hover_lift:      probe?.pillClass?.includes('hover:-translate-y-px') === true,
-  pill_active_filter:       probe?.pillActiveFilter === 'status',
-  // Source-file: 4 occurrences (status + group + vendor + edge filters)
-  source_4_value_spans:     valueOccurrences === 4,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} filter pin pill VALUE fw 500 → 600:`, JSON.stringify(results),
-  '\n  probe:', probe,
-  '\n  source occurrences:', valueOccurrences);
-process.exit(ok ? 0 : 1);