@sleep2agi/agent-network-dashboard 0.4.6-preview.19 → 0.4.6-preview.190

package/scripts/topo-pan-cursor-test.mjs

@@ -0,0 +1,62 @@
+/* Round 21 verification: SVG cursor flips from grab → grabbing during
+ * a pan drag and back to grab on release. */
+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 });
+// Need a tall enough viewport to keep the SVG ABOVE the fold so real
+// pointer events land — at 1280×900 the canvas starts at ~y=815 (the
+// /admin hero + StatsBar above push it below the viewport bottom).
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 1600 } });
+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 = ['a', 'b'].map(a => ({
+    alias: a, 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/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const cursorAt = () => page.$eval('svg[viewBox="0 0 1000 680"]', el => el.style.cursor);
+const rest = await cursorAt();
+
+// pick a pan-safe target far from any node — top-left empty canvas region
+const box = await page.$eval('svg[viewBox="0 0 1000 680"]', el => el.getBoundingClientRect());
+const sx = box.x + box.width * 0.08;
+const sy = box.y + box.height * 0.40;
+
+await page.mouse.move(sx, sy);
+await page.mouse.down();
+await page.mouse.move(sx + 40, sy + 30);
+await page.waitForTimeout(50);
+const during = await cursorAt();
+await page.mouse.up();
+await page.waitForTimeout(50);
+const after = await cursorAt();
+
+await browser.close();
+const results = {
+  restIsGrab: rest === 'grab',
+  duringIsGrabbing: during === 'grabbing',
+  afterIsGrab: after === 'grab',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pan cursor:`, JSON.stringify(results), `rest=${rest} during=${during} after=${after}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-elevation-test.mjs

@@ -0,0 +1,76 @@
+/* Round 57 verification: recent-signal + legend panels carry a drop-
+ * shadow filter so they read as floating cards instead of pasted-on
+ * graphics — especially important on light theme where panel fill is
+ * near-white on a near-white canvas.
+ *
+ *  - Both panels render a <rect> with `data-topo-panel-elevation`.
+ *  - The rect's `style.filter` contains "drop-shadow(".
+ *  - Light vs cyber themes use different shadow alpha (light tuned for
+ *    contrast against white canvas; cyber for subtle depth on dark).
+ *    Verify the strings differ so the theme switch isn't a no-op.
+ */
+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(theme) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 1500 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript((t) => {
+    try {
+      localStorage.setItem('anet-theme', t);
+      localStorage.setItem('anet-topo-layout', 'ring');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, theme);
+  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 = ['alpha', 'beta'].map(a => ({
+      alias: a, 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.waitForSelector('rect[data-topo-panel-elevation="recent"]', { timeout: 30000 });
+  await page.waitForTimeout(400);
+  const filters = await page.evaluate(() => {
+    const recent = document.querySelector('rect[data-topo-panel-elevation="recent"]');
+    const legend = document.querySelector('rect[data-topo-panel-elevation="legend"]');
+    return {
+      recent: recent?.getAttribute('style') || '',
+      legend: legend?.getAttribute('style') || '',
+      recentComputed: recent ? getComputedStyle(recent).filter : null,
+      legendComputed: legend ? getComputedStyle(legend).filter : null,
+    };
+  });
+  await ctx.close();
+  return filters;
+}
+
+const light = await probe('light');
+const cyber = await probe('cyber');
+await browser.close();
+
+const hasShadow = (s) => /drop-shadow\(/.test(s || '');
+const results = {
+  light_recent_hasShadow:  hasShadow(light.recent),
+  light_legend_hasShadow:  hasShadow(light.legend),
+  cyber_recent_hasShadow:  hasShadow(cyber.recent),
+  cyber_legend_hasShadow:  hasShadow(cyber.legend),
+  themes_differ:           light.recent !== cyber.recent,
+  computed_resolves:       hasShadow(light.recentComputed) && hasShadow(cyber.recentComputed),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel elevation:`, JSON.stringify(results),
+  `\n  light.recent=${JSON.stringify(light.recent)}`,
+  `\n  cyber.recent=${JSON.stringify(cyber.recent)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-fadein-test.mjs

@@ -0,0 +1,102 @@
+/* Round 175 verification: corner panels fade-in after the
+ * canvas content reveal.
+ *
+ * Pre-R175 the recent-signal (top-left) + legend (top-right)
+ * panels appeared instantly while nodes/edges/group boxes/tier
+ * rings staggered in around them. The panels felt like 'already
+ * there' before the content showed up.
+ *
+ * R175 adds .anet-fade-in + 700ms / 800ms animation-delay on
+ * the two panel <g> wrappers — fifth surface in the first-paint
+ * reveal family (after R9 nodes / R172 edges / R173 group boxes
+ * / R174 tier rings).
+ *
+ * Test:
+ *   1. Mock 3 sessions in ring layout
+ *   2. Probe [data-topo-panel="recent"] and [="legend"]
+ *   3. Both have .anet-fade-in className
+ *   4. recent panel animationDelay = 700ms
+ *   5. legend panel animationDelay = 800ms
+ *   6. data-topo-panel-fade-delay attributes match
+ */
+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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+  } 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: 'cli-claude-code',
+    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'), mk('beta'), mk('gamma')] } });
+});
+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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-topo-panel="recent"]', { timeout: 10000 });
+await page.waitForSelector('[data-topo-panel="legend"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const grab = (sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return null;
+    return {
+      hasFadeClass:   (el.getAttribute('class') || '').includes('anet-fade-in'),
+      fadeDelayAttr:  parseFloat(el.getAttribute('data-topo-panel-fade-delay') || ''),
+      animationDelay: el.style.animationDelay || getComputedStyle(el).animationDelay,
+    };
+  };
+  return {
+    recent: grab('[data-topo-panel="recent"]'),
+    legend: grab('[data-topo-panel="legend"]'),
+  };
+});
+
+await browser.close();
+
+const parseDelay = (s) => {
+  if (!s) return null;
+  if (s.endsWith('ms')) return parseFloat(s);
+  if (s.endsWith('s')) return parseFloat(s) * 1000;
+  return parseFloat(s);
+};
+const recentDelay = parseDelay(probe.recent?.animationDelay);
+const legendDelay = parseDelay(probe.legend?.animationDelay);
+
+const results = {
+  recent_panel_found:        probe.recent !== null,
+  legend_panel_found:        probe.legend !== null,
+  recent_has_fade_class:     probe.recent?.hasFadeClass === true,
+  legend_has_fade_class:     probe.legend?.hasFadeClass === true,
+  recent_delay_attr_700:     probe.recent?.fadeDelayAttr === 700,
+  legend_delay_attr_800:     probe.legend?.fadeDelayAttr === 800,
+  recent_anim_delay_700ms:   recentDelay === 700,
+  legend_anim_delay_800ms:   legendDelay === 800,
+  legend_lags_recent_100ms:  legendDelay - recentDelay === 100,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel fade-in:`, JSON.stringify(results),
+  `\n  recent =`, probe.recent, `delay=${recentDelay}`,
+  `\n  legend =`, probe.legend, `delay=${legendDelay}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-hover-elevation-test.mjs

@@ -0,0 +1,118 @@
+/* Round 135 verification: both overlay panels (recent-signal +
+ * legend) drop-shadow boosts on mouseenter, restores on leave.
+ * Mirrors R18's KPI-card hover-elevation from the Overview page.
+ *
+ * Why both panels: each panel chrome already hosts interactive
+ * rows (R56/R116 recent rows, R55/R61 legend rows) and footer
+ * nav (R133). Hover-lift signals "this whole panel is alive"
+ * without misleading users that the panel itself is clickable —
+ * the underlying click affordances are still the rows + footer.
+ *
+ * State transitions tested:
+ *   1. Neither panel hovered → both data-topo-panel-hovered="false",
+ *      both rect filters = baseline (2px/6px blur)
+ *   2. Hover recent → that panel hovered=true, filter boosted
+ *      (4px/12px blur); legend still baseline
+ *   3. Leave recent (move far away) → recent restored
+ *   4. Hover legend → legend hovered=true, filter boosted
+ *   5. Leave legend → legend restored
+ *
+ * Filter inline-string detection: the boosted variant carries the
+ * `4px 12px` magic numbers in its drop-shadow argument.
+ */
+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'); 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, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    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', 'working'),
+  ] } });
+});
+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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-topo-panel="recent"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const inspect = () => page.evaluate(() => {
+  const get = (key) => {
+    const g = document.querySelector(`[data-topo-panel="${key}"]`);
+    const rect = g?.querySelector('rect[data-topo-panel-elevation]');
+    return {
+      hovered: g?.getAttribute('data-topo-panel-hovered'),
+      filter: (rect?.getAttribute('style') || ''),
+    };
+  };
+  return { recent: get('recent'), legend: get('legend') };
+});
+
+// State 1 — neither hovered
+const s1 = await inspect();
+
+// State 2 — hover recent
+await page.locator('[data-topo-panel="recent"]').hover();
+await page.waitForTimeout(300);
+const s2 = await inspect();
+
+// State 3 — leave recent (move far away from both panels)
+await page.mouse.move(700, 350);
+await page.waitForTimeout(300);
+const s3 = await inspect();
+
+// State 4 — hover legend
+await page.locator('[data-topo-panel="legend"]').hover();
+await page.waitForTimeout(300);
+const s4 = await inspect();
+
+// State 5 — leave legend
+await page.mouse.move(500, 350);
+await page.waitForTimeout(300);
+const s5 = await inspect();
+
+await browser.close();
+
+const isBoosted = (style) => /4px\s+12px/.test(style);
+const isBase    = (style) => /2px\s+6px/.test(style) && !/4px\s+12px/.test(style);
+
+const results = {
+  s1_recent_notHovered: s1.recent.hovered === 'false',
+  s1_legend_notHovered: s1.legend.hovered === 'false',
+  s1_recent_baseShadow: isBase(s1.recent.filter),
+  s1_legend_baseShadow: isBase(s1.legend.filter),
+
+  s2_recent_hovered:    s2.recent.hovered === 'true',
+  s2_recent_boosted:    isBoosted(s2.recent.filter),
+  s2_legend_stillBase:  s2.legend.hovered === 'false' && isBase(s2.legend.filter),
+
+  s3_recent_restored:   s3.recent.hovered === 'false' && isBase(s3.recent.filter),
+
+  s4_legend_hovered:    s4.legend.hovered === 'true',
+  s4_legend_boosted:    isBoosted(s4.legend.filter),
+  s4_recent_stillBase:  s4.recent.hovered === 'false' && isBase(s4.recent.filter),
+
+  s5_legend_restored:   s5.legend.hovered === 'false' && isBase(s5.legend.filter),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel hover elevation:`, JSON.stringify(results),
+  `\n  s1=`, s1, `\n  s2=`, s2, `\n  s3=`, s3, `\n  s4=`, s4, `\n  s5=`, s5);
+process.exit(ok ? 0 : 1);

package/scripts/topo-particle-stagger-test.mjs

@@ -0,0 +1,82 @@
+/* Round 103 verification: flow-particle `<animateMotion begin>` is
+ * unique per edge, staggered by `-(index × 0.37) % duration s`. Pre-
+ * R103 all edges' particles fired at t=0 in lockstep; the stagger
+ * gives the canvas an organic "many independent rivers" feel.
+ *
+ * Verifies:
+ *   - every edge has a `begin` attribute on its <animateMotion>
+ *   - all begin values are distinct (no two edges share a phase)
+ *   - the format is "-Ns" (negative offset for retroactive cycle start)
+ *   - reducedMotion still suppresses the particle entirely
+ */
+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 fresh = new Date(Date.now() - 30 * 1000).toISOString();
+
+const probe = async (reducedMotion) => {
+  const ctx = await browser.newContext({
+    viewport: { width: 1400, height: 1500 },
+    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
+  });
+  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) => ({
+      alias, status: 'idle', model: 'claude-opus-4', runtime: 'cli-claude-code',
+      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'), mk('beta'), mk('gamma'), mk('delta'), mk('epsilon')] } });
+  });
+  const now = Date.now();
+  const mkMsg = (id, from_alias, to_alias, ageMs) => ({
+    id, from_alias, to_alias, content: 'hi', network_id: 'default',
+    created_at: new Date(now - ageMs).toISOString(),
+  });
+  // Five distinct edges → five animations.
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+    mkMsg('m1', 'alpha', 'beta',   30 * 1000),
+    mkMsg('m2', 'gamma', 'delta',  35 * 1000),
+    mkMsg('m3', 'beta',  'gamma',  40 * 1000),
+    mkMsg('m4', 'delta', 'epsilon', 45 * 1000),
+    mkMsg('m5', 'epsilon', 'alpha', 50 * 1000),
+  ] } }));
+  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 === 5, { timeout: 30000 });
+  await page.waitForTimeout(400);
+
+  const beginValues = await page.evaluate(() => {
+    return [...document.querySelectorAll('animateMotion')]
+      .map(a => a.getAttribute('begin'));
+  });
+  await ctx.close();
+  return beginValues;
+};
+
+const normal = await probe(false);
+const reduced = await probe(true);
+await browser.close();
+
+const results = {
+  normal_hasAtLeast5: normal.length >= 5,
+  normal_allHaveBegin: normal.every(b => typeof b === 'string' && b.length > 0),
+  normal_allNegativeOffset: normal.every(b => /^-\d/.test(b || '')),
+  normal_allDistinct: new Set(normal).size === normal.length,
+  normal_firstIsZero: normal[0] === '-0.000s',
+  reduced_noParticles: reduced.length === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} particle stagger:`, JSON.stringify(results),
+  `\n  normal=`,  normal,
+  `\n  reduced=`, reduced);
+process.exit(ok ? 0 : 1);

package/scripts/topo-pin-intersection-empty-test.mjs

@@ -0,0 +1,129 @@
+/* Round 125 verification: pin-intersection chip warning tint when
+ * the intersection is zero.
+ *
+ * R124 added the "match: N pins · K" chip after the last filter
+ * pill, gated to ≥ 2 active pin dims. It stayed neutral gray
+ * regardless of whether K was 12 or 0 — but K=0 means "your pins
+ * cancel out" and the canvas dims to 0.28 everywhere with no
+ * positive signal. The neutral "· 0" tail reads as just another
+ * number, indistinguishable from "· 12".
+ *
+ * R125 flips the chip to amber + adds a ⚠ glyph when K=0. Tooltip
+ * grows the "release one to widen" hint. Color choice: amber
+ * (#d97706 light / #fbbf24 dark) — distinct from every pill color
+ * AND from the gray non-empty intersection state.
+ *
+ * Fleet:
+ *   alpha (working, vendor=A)
+ *   beta  (working, vendor=O)
+ *   gamma (idle,    vendor=A)
+ *   delta (idle,    vendor=O)
+ *
+ * Path:
+ *   1. Pin status=working                          → chip hidden (1 pin)
+ *   2. + Pin vendor=A → intersection {alpha} = 1   → chip gray, no ⚠
+ *   3. Esc, then pin status=offline + vendor=A     → intersection 0
+ *      (alpha+gamma have vendor=A but neither is offline)
+ *      → chip amber + ⚠ glyph + tooltip mentions "release one to widen"
+ */
+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: 1100 } });
+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, status, model) => ({
+    alias, status, model, runtime: 'cli-claude-code',
+    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', 'claude-opus-4'),
+    mk('beta',  'working', 'gpt-4o'),
+    mk('gamma', 'idle',    'claude-sonnet-4'),
+    mk('delta', 'idle',    'gpt-4o-mini'),
+  ] } });
+});
+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(400);
+
+const readChip = () => page.evaluate(() => {
+  const el = document.querySelector('[data-pin-intersection]');
+  if (!el) return null;
+  // background color comes from inline style; parse for amber substring.
+  const inline = el.getAttribute('style') || '';
+  return {
+    dimCount:  parseInt(el.getAttribute('data-pin-dim-count') || '0', 10),
+    matchCount: parseInt(el.getAttribute('data-pin-intersection-count') || '0', 10),
+    empty: el.getAttribute('data-pin-intersection-empty'),
+    text: el.textContent?.trim(),
+    title: el.getAttribute('title'),
+    // Browser normalises inline hex → rgb() when reading via
+    // getAttribute('style'). Cyber theme: #fbbf24 → rgb(251, 191, 36);
+    // gray #94a3b8 → rgb(148, 163, 184). Light theme would emit
+    // rgb(217, 119, 6) and rgb(71, 85, 105) — accept both.
+    // Inline background uses rgba(...) because of the alpha suffix
+    // we pass; foreground color is rgb(...). Match both with rgba?.
+    styleHasAmber: /rgba?\(251,\s*191,\s*36/i.test(inline) || /rgba?\(217,\s*119,\s*6/i.test(inline),
+    styleHasGray:  /rgba?\(148,\s*163,\s*184/i.test(inline) || /rgba?\(71,\s*85,\s*105/i.test(inline),
+  };
+});
+
+// All four sessions are online in this fleet, so the offline
+// pressure-seg doesn't render. Use the R69 CustomEvent contract
+// to drive pins — same handler at line 920+ of TopoGraph.tsx.
+const pin = (detail) => page.evaluate(d => {
+  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: d }));
+}, detail);
+
+// State 1 — only status pinned
+await pin({ kind: 'status', value: 'working' });
+await page.waitForTimeout(200);
+const s1 = await readChip();
+
+// State 2 — + vendor=A (working ∩ A = {alpha}) → 1 match, gray
+await pin({ kind: 'vendor', value: 'A' });
+await page.waitForTimeout(200);
+const s2 = await readChip();
+
+// Esc, then pin status=offline + vendor=A → 0 matches (alpha/gamma are
+// A but online; beta/delta are O). Empty intersection → amber + ⚠.
+await pin({ kind: 'clear' });
+await page.waitForTimeout(200);
+await pin({ kind: 'status', value: 'offline' });
+await pin({ kind: 'vendor', value: 'A' });
+await page.waitForTimeout(200);
+const s3 = await readChip();
+
+await browser.close();
+
+const results = {
+  s1_onePin_chipHidden:        s1 === null,
+  s2_twoPins_chipShown:        !!s2 && s2.dimCount === 2 && s2.matchCount === 1,
+  s2_nonEmpty_grayBg:          !!s2 && s2.empty === 'false' && s2.styleHasGray && !s2.styleHasAmber,
+  s2_noWarnGlyph:              !!s2 && !s2.text?.includes('⚠'),
+  s3_twoPins_zeroMatch:        !!s3 && s3.dimCount === 2 && s3.matchCount === 0,
+  s3_empty_amberBg:            !!s3 && s3.empty === 'true' && s3.styleHasAmber && !s3.styleHasGray,
+  s3_text_hasWarnGlyph:        !!s3 && (s3.text || '').includes('⚠'),
+  s3_tooltip_widenHint:        !!s3 && (s3.title || '').includes('release one to widen'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pin-intersection empty:`, JSON.stringify(results),
+  `\n  s1=`, s1, `\n  s2=`, s2, `\n  s3=`, s3);
+process.exit(ok ? 0 : 1);