@sleep2agi/agent-network-dashboard 0.4.6-preview.99 → 0.5.0

package/scripts/topo-panel-title-fill-ease-test.mjs

@@ -0,0 +1,91 @@
+/* Round 266 verification: corner panel titles + legend count text
+ * pick up theme-toggle fill transitions.
+ *
+ * Pre-R266 three texts in the corner panel headers snapped fill on
+ * theme toggle:
+ *   "recent signal"  fill=pal.legendHeadline (cyber #e5e7eb ↔ light #0f172a)
+ *   "legend"         fill=pal.legendHeadline (same)
+ *   "{N} nodes"      fill=pal.legendAccent   (cyber #67e8f9 ↔ light #10b981)
+ *
+ * The panel rect chrome eased (R247), the rows eased (various), but
+ * the BIGGEST text in each panel header hard-flipped color on theme
+ * toggle. R266 adds `transition: fill 200ms ease-out` to all three.
+ *
+ * Test scope:
+ *   1. Recent-signal title element present at [data-recent-panel-title].
+ *   2. Legend title element present at [data-legend-panel-title].
+ *   3. Legend count element present at [data-legend-panel-count].
+ *   4. Each inline transition contains `fill 200ms` (or 0.2s).
+ *   5. R265 top-rail still has its background-image transition (regression).
+ */
+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'); } 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('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-recent-panel-title]', { timeout: 10000 });
+await page.waitForSelector('[data-legend-panel-title]', { timeout: 10000 });
+await page.waitForSelector('[data-legend-panel-count]', { timeout: 10000 });
+await page.waitForSelector('[data-topo-top-rail]',      { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const recentTitle = document.querySelector('[data-recent-panel-title]');
+  const legendTitle = document.querySelector('[data-legend-panel-title]');
+  const legendCount = document.querySelector('[data-legend-panel-count]');
+  const topRail     = document.querySelector('[data-topo-top-rail]');
+  return {
+    recentTitleTransition: recentTitle ? recentTitle.style.transition : null,
+    legendTitleTransition: legendTitle ? legendTitle.style.transition : null,
+    legendCountTransition: legendCount ? legendCount.style.transition : null,
+    topRailTransition:     topRail     ? topRail.style.transition     : null,
+  };
+});
+await browser.close();
+
+const has = (s, prop) => new RegExp(`${prop}\\s+(?:200ms|0\\.2s)`).test(s || '');
+
+const results = {
+  recent_title_present:               probe.recentTitleTransition !== null,
+  recent_title_has_fill_200:          has(probe.recentTitleTransition, 'fill'),
+
+  legend_title_present:               probe.legendTitleTransition !== null,
+  legend_title_has_fill_200:          has(probe.legendTitleTransition, 'fill'),
+
+  legend_count_present:               probe.legendCountTransition !== null,
+  legend_count_has_fill_200:          has(probe.legendCountTransition, 'fill'),
+
+  r265_top_rail_bg_image_200:         has(probe.topRailTransition, 'background-image'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel title fill ease:`, JSON.stringify(results),
+  '\n  recent title:', probe.recentTitleTransition,
+  '\n  legend title:', probe.legendTitleTransition,
+  '\n  legend count:', probe.legendCountTransition,
+  '\n  top rail:    ', probe.topRailTransition);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-title-tracking-test.mjs

@@ -0,0 +1,78 @@
+/* Round 301 verification: panel titles ('recent signal' + 'legend')
+ * gain letterSpacing="0.3" for editorial parity with R289 watermark
+ * + R285 kicker tracking-widest. At fontSize 12 monospace fontWeight
+ * 700, 0.3px adds touch of designed-header register without changing
+ * the lowercase terminal-style aesthetic.
+ *
+ * Contract:
+ *   - [data-recent-panel-title] attr letter-spacing === '0.3'.
+ *   - [data-legend-panel-title]  attr letter-spacing === '0.3'.
+ *   - Text content still 'recent signal' / 'legend'.
+ *   - R300 kicker font-medium + R299 mb=16px + R297 transition + R295
+ *     swatch r=6 + R294 pulse absent intact.
+ */
+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'); } 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) => ({
+    alias, status: 'working', 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('alpha', 'claude-opus-4'),
+    mk('beta',  'gpt-4o'),
+  ] } });
+});
+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('[data-recent-panel-title]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const recent = document.querySelector('[data-recent-panel-title]');
+  const legend = document.querySelector('[data-legend-panel-title]');
+  const kicker = document.querySelector('[data-topo-section-kicker]');
+  const swatch = document.querySelector('[data-legend-swatch="working"]');
+  return {
+    recentLs:     recent?.getAttribute('letter-spacing') ?? null,
+    recentText:   recent?.textContent ?? null,
+    legendLs:     legend?.getAttribute('letter-spacing') ?? null,
+    legendText:   legend?.textContent ?? null,
+    kickerFw:     kicker ? getComputedStyle(kicker).fontWeight : null,
+    swatchR:      swatch?.getAttribute('r') ?? null,
+    pulseCount:   document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const results = {
+  recent_title_ls_0_3:     probe.recentLs === '0.3',
+  recent_title_text:       probe.recentText === 'recent signal',
+  legend_title_ls_0_3:     probe.legendLs === '0.3',
+  legend_title_text:       probe.legendText === 'legend',
+  r300_kicker_fw_500:      String(probe.kickerFw) === '500',
+  r295_swatch_r_6:         probe.swatchR === '6',
+  r294_pulse_absent:       probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel title tracking:`, JSON.stringify(results),
+  '\n  recent-panel-title letter-spacing:', probe.recentLs,
+  '\n  legend-panel-title letter-spacing:', probe.legendLs,
+  '\n  R300 kicker font-weight:', probe.kickerFw);
+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-color-ease-test.mjs

@@ -0,0 +1,111 @@
+/* Round 236 verification: pin-intersection chip gets a smooth
+ * colour-easing transition on the empty↔non-empty crossing.
+ *
+ * Pre-R236 the chip's bg/color/borderColor snap-flipped between
+ * slate (non-empty intersection) and amber (empty — the 'pinned
+ * filters cancel out' warning). R236 adds a 200ms ease-out
+ * transition so the colour shift eases through the boundary.
+ *
+ * Scenario: 4 sessions × 2 vendors × 2 statuses; pin two filter
+ * dims that yield an intersection > 0 first (non-empty: slate),
+ * then verify the chip's inline transition includes all three
+ * color-related properties.
+ *
+ * Probing the transition wiring is enough — the visual ease itself
+ * is a CSS browser detail. We just need the transition string to
+ * include background-color + color + border-color with 200ms.
+ */
+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'); } 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) => ({
+    alias, status, model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // Scenario tuned so we can flip intersection 1 → 0 by swapping
+  // the pinned vendor: alpha is the ONLY working anthropic; gpt
+  // sessions are both idle. Pin working+A → alpha (non-empty).
+  // Then re-pin vendor to 'O' (vendor is single-value, so 'A' is
+  // released and 'O' takes its place) → working+O = 0 (empty).
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4', 'working'),
+    mk('beta',  'claude-opus-4', 'idle'),
+    mk('gamma', 'gpt-4',         'idle'),
+    mk('delta', 'gpt-4',         'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.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 });
+
+// Pin working + anthropic (intersection = alpha, non-empty)
+await page.locator('[data-pressure-seg="working"]').first().click();
+await page.locator('[data-vendor-letter="A"]').first().click();
+await page.waitForSelector('[data-pin-intersection]', { timeout: 5000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const nonEmpty = await page.evaluate(() => {
+  const chip = document.querySelector('[data-pin-intersection]');
+  if (!chip) return null;
+  return {
+    empty:      chip.getAttribute('data-pin-intersection-empty'),
+    transition: chip.style.transition,
+    bg:         chip.style.background,
+    color:      chip.style.color,
+  };
+});
+
+// Re-pin vendor 'O' — pinnedVendor is single-value, so 'A' releases
+// and 'O' takes its place. working ∩ openai = 0 (gpt sessions are
+// all idle) → chip flips to empty=true.
+await page.locator('[data-vendor-letter="O"]').first().click();
+await page.waitForTimeout(300);
+
+const empty = await page.evaluate(() => {
+  const chip = document.querySelector('[data-pin-intersection]');
+  if (!chip) return null;
+  return {
+    empty:      chip.getAttribute('data-pin-intersection-empty'),
+    transition: chip.style.transition,
+    bg:         chip.style.background,
+    color:      chip.style.color,
+  };
+});
+await browser.close();
+
+const hasTransition = (s, prop) => new RegExp(`${prop.replace('-', '-')}\\s+200ms`).test(s || '');
+
+const results = {
+  nonempty_mounted:           nonEmpty !== null,
+  nonempty_empty_attr:        nonEmpty?.empty === 'false',
+  nonempty_has_bg_transition:  hasTransition(nonEmpty?.transition, 'background-color'),
+  nonempty_has_color_transition: hasTransition(nonEmpty?.transition, 'color'),
+  nonempty_has_border_transition: hasTransition(nonEmpty?.transition, 'border-color'),
+  empty_mounted:              empty !== null,
+  empty_empty_attr:           empty?.empty === 'true',
+  empty_has_bg_transition:    hasTransition(empty?.transition, 'background-color'),
+  empty_has_color_transition: hasTransition(empty?.transition, 'color'),
+  empty_has_border_transition: hasTransition(empty?.transition, 'border-color'),
+  color_changed_on_flip:      nonEmpty?.color !== empty?.color,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pin-intersection color ease:`, JSON.stringify(results),
+  '\n  nonEmpty:', nonEmpty,
+  '\n  empty:   ', empty);
+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);

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

@@ -0,0 +1,96 @@
+/* Round 235 verification: pin-intersection chip (the
+ * '{pinDimCount} pins · {matchAliases.length}' chip that surfaces
+ * when multiple filter dimensions are pinned simultaneously) picks
+ * up the Tailwind `tabular-nums` utility so its two visible
+ * digits don't reflow the chip on counter changes.
+ *
+ * 9th surface in the info-density tabular-nums sweep — the third
+ * HTML chip surface, completing chip-row + vendor-row + pin-
+ * intersection chip coverage.
+ *
+ * Scenario: needs >= 2 pinned filter dimensions to trigger the
+ * chip render. Simplest path: 4 sessions split across two
+ * vendors (anthropic + openai) and two statuses (working +
+ * idle). Then in the page we set pinnedStatus + pinnedVendor
+ * via localStorage so two filter dims pin simultaneously
+ * without needing to click the chips.
+ *
+ * The TopoGraph reads pinnedStatus + pinnedVendor from session-
+ * Storage keys (R88 / R60 persistence — let me trust that's
+ * how the state hydrates from storage at mount). If not, fall
+ * back to programmatic click on the working chip + vendor letter.
+ */
+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'); } 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) => ({
+    alias, status, model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 2 vendors × 2 statuses so multiple filter dims have something
+  // to bite on (chip strip renders, pressure-bar segments populate).
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4', 'working'),
+    mk('beta',  'claude-opus-4', 'idle'),
+    mk('gamma', 'gpt-4',         'working'),
+    mk('delta', 'gpt-4',         'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.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.waitForSelector('[data-vendor-letter]', { timeout: 10000, state: 'attached' });
+
+// Pin two filter dimensions: click the working pressure-bar segment
+// + click the anthropic vendor letter. Both should fire setPinned*
+// state which surfaces the pin-intersection chip.
+await page.locator('[data-pressure-seg="working"]').first().click();
+await page.locator('[data-vendor-letter="A"]').first().click();
+await page.waitForSelector('[data-pin-intersection]', { timeout: 5000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const out = await page.evaluate(() => {
+  const chip = document.querySelector('[data-pin-intersection]');
+  if (!chip) return null;
+  return {
+    pinDim:          chip.getAttribute('data-pin-dim-count'),
+    matchCount:      chip.getAttribute('data-pin-intersection-count'),
+    empty:           chip.getAttribute('data-pin-intersection-empty'),
+    classListHas:    chip.className.split(/\s+/).includes('tabular-nums'),
+    fontVarNumeric:  getComputedStyle(chip).fontVariantNumeric,
+    text:            (chip.textContent || '').trim(),
+  };
+});
+await browser.close();
+
+const hasTab = (s) => /tabular-nums/.test(s || '');
+
+const results = {
+  chip_mounted:           out !== null,
+  pin_dim_2:              out?.pinDim === '2',
+  match_present:          typeof out?.matchCount === 'string' && /^\d+$/.test(out.matchCount),
+  empty_attr_present:     out?.empty === 'true' || out?.empty === 'false',
+  class_utility_present:  out?.classListHas === true,
+  fvn_tabular_nums:       hasTab(out?.fontVarNumeric),
+  text_has_pins_dot:      /\d+\s*pins?\s*·\s*\d+/.test(out?.text || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pin-intersection tabular:`, JSON.stringify(results),
+  '\n  chip:', out);
+process.exit(ok ? 0 : 1);