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

package/scripts/topo-pin-intersection-color-ease-test.mjs

@@ -1,111 +0,0 @@
-/* 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

@@ -1,129 +0,0 @@
-/* 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

@@ -1,96 +0,0 @@
-/* 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);

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

@@ -1,121 +0,0 @@
-/* Round 124 verification: pin-intersection summary chip.
- *
- * The four filter pills (R64 status / R63 group / R89 vendor /
- * R119 edge) each show their own dim's match count in isolation.
- * But the node-opacity chain (lines 2723-2741 of TopoGraph.tsx)
- * AND-composes all four pin dimensions — every miss dims the node.
- * So two active pins produce an intersection ≤ either individual
- * count, and the existing pills don't surface that.
- *
- * R124 adds a small "match: N pins · K" chip after the last pill
- * when ≥ 2 pin dims are active. K = nodes that satisfy ALL active
- * pins. Single pin keeps its old pill story (chip hidden).
- *
- * Fleet:
- *   alpha   (working, vendor=A, group=agents)
- *   beta    (working, vendor=O, group=agents)
- *   gamma   (idle,    vendor=A, group=agents)
- *   delta   (working, vendor=A, group=infra)
- *
- * Test path:
- *   1. No pin                                 → chip hidden
- *   2. Pin status=working                     → chip hidden (1 pin)
- *   3. + Pin vendor=A                         → chip "2 pins · 2"
- *      (working AND vendor=A: alpha, delta)
- *   4. + Pin group=agents                     → chip "3 pins · 1"
- *      (working AND A AND agents: alpha only)
- *   5. Esc                                    → chip hidden
- */
-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: alias.startsWith('infra-') ? '/srv/infra' : '/srv/agents',
-    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
-  });
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    mk('agents-alpha', 'working', 'claude-opus-4'),
-    mk('agents-beta',  'working', 'gpt-4o'),
-    mk('agents-gamma', 'idle',    'claude-sonnet-4'),
-    mk('infra-delta',  'working', 'claude-haiku-4'),
-  ] } });
-});
-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;
-  return {
-    dimCount:  parseInt(el.getAttribute('data-pin-dim-count') || '0', 10),
-    matchCount: parseInt(el.getAttribute('data-pin-intersection-count') || '0', 10),
-    aliases: (el.getAttribute('data-pin-intersection-aliases') || '').split(',').filter(Boolean),
-    text: el.textContent?.trim(),
-  };
-});
-
-// State 1 — no pins
-const s1 = await readChip();
-
-// State 2 — pin status=working via pressure-bar segment
-await page.locator('[data-pressure-seg="working"]').click();
-await page.waitForTimeout(200);
-const s2 = await readChip();
-
-// State 3 — + pin vendor=A
-await page.locator('[data-vendor-letter="A"]').click();
-await page.waitForTimeout(200);
-const s3 = await readChip();
-
-// State 4 — + pin group=agents via the R69 CustomEvent contract.
-// Direct dispatch is mode-independent (group-label hit-rects only
-// render in grid layout; default is ring). The handler at line 945
-// of TopoGraph.tsx accepts { kind: 'group', value: <key> }.
-await page.evaluate(() => {
-  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'group', value: 'agents' } }));
-});
-await page.waitForTimeout(200);
-const s4 = await readChip();
-
-// State 5 — Esc clears all pins
-await page.keyboard.press('Escape');
-await page.waitForTimeout(200);
-const s5 = await readChip();
-
-await browser.close();
-
-const results = {
-  s1_noPins_chipHidden:            s1 === null,
-  s2_onePin_chipHidden:            s2 === null,
-  s3_twoPins_chipShown:            !!s3 && s3.dimCount === 2,
-  s3_intersection_2:               !!s3 && s3.matchCount === 2,
-  s3_aliases_alphaDelta:           !!s3 && s3.aliases.includes('agents-alpha') && s3.aliases.includes('infra-delta'),
-  s4_threePins_chipShown:          !!s4 && s4.dimCount === 3,
-  s4_intersection_1:               !!s4 && s4.matchCount === 1,
-  s4_aliases_alphaOnly:            !!s4 && s4.aliases.length === 1 && s4.aliases[0] === 'agents-alpha',
-  s5_escClears_chipHidden:         s5 === null,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} pin-intersection chip:`, 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-pin-intersection-unit-test.mjs

@@ -1,100 +0,0 @@
-/* Round 341 verification: pin-intersection chip's middle " pins"
- * unit word gets wrapped in an opacity-0.7 span. Completes the
- * chip-internal hierarchy on this 3-tier chip:
- *   pinDimCount       (prominent value, tabular-nums)
- *   " pins"           (recessive unit, opacity-0.7)  ← R341
- *   " · matchAliases" (recessive count, opacity-0.7 + tabular-nums)
- *
- * 7th surface in the R333-R340 chip-internal-hierarchy arc.
- *
- * Contract:
- *   - [data-pin-intersection-unit] present, className contains
- *     'opacity-70', textContent contains 'pins'.
- *   - Computed opacity reads 0.7.
- *   - Sibling spans (count-dims, count-matches) preserved.
- *   - R340 +more flows unit + R317/R318 chrome regressions intact.
- *
- * Fixture: pin TWO filter dimensions (status + vendor) so the
- * pin-intersection chip mounts.
- */
-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'),
-    mk('gamma', 'internlm/internlm2'),
-  ] } });
-});
-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-working-chip]', { timeout: 15000 });
-await page.waitForTimeout(200);
-
-// Pin status (working) + vendor (any letter) to trigger pin-intersection.
-await page.click('[data-working-chip]', { delay: 50 }).catch(() => {});
-await page.waitForTimeout(200);
-await page.click('[data-vendor-letter]', { delay: 50 }).catch(() => {});
-await page.waitForTimeout(300);
-
-const probe = await page.evaluate(() => {
-  const unit       = document.querySelector('[data-pin-intersection-unit]');
-  const dimsSpan   = document.querySelector('[data-pin-intersection-count-dims]');
-  const matchSpan  = document.querySelector('[data-pin-intersection-count-matches]');
-  const moreUnit   = document.querySelector('[data-recent-panel-more-unit]');
-  return {
-    unitClass:        unit?.className ?? '',
-    unitText:         unit?.textContent ?? null,
-    unitOpacity:      unit ? getComputedStyle(unit).opacity : null,
-    dimsPresent:      dimsSpan !== null,
-    matchesClass:     matchSpan?.className ?? '',
-    matchesOpacity:   matchSpan ? getComputedStyle(matchSpan).opacity : null,
-    r340MoreUnitTag:  moreUnit?.getAttribute('opacity') ?? null,
-    layoutInactiveCls: document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
-    layoutActiveCls:   document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
-    pulseCount:        document.querySelectorAll('[data-pulse-wrapper]').length,
-  };
-});
-await browser.close();
-
-const opacityClose = (val) => val !== null && Math.abs(parseFloat(val) - 0.7) < 0.01;
-
-const results = {
-  unit_present:               probe.unitText !== null,
-  unit_has_opacity70:         /opacity-70/.test(probe.unitClass),
-  unit_text_pins:             (probe.unitText || '').trim() === 'pins',
-  unit_computed_0_7:          opacityClose(probe.unitOpacity),
-  dims_sibling_present:       probe.dimsPresent,
-  matches_sibling_opacity:    /opacity-70/.test(probe.matchesClass),
-  // R340 regression — only when recent-signal panel mounted (>3 flows).
-  // No messages in fixture → accept null.
-  r340_more_unit_or_absent:   probe.r340MoreUnitTag === null || probe.r340MoreUnitTag === '0.7',
-  // R317 / R318 chrome regression.
-  r317_inactive_gray_400:     probe.layoutInactiveCls.includes('text-gray-400'),
-  r318_active_font_medium:    probe.layoutActiveCls.includes('font-medium'),
-  r294_pulse_absent:          probe.pulseCount === 0,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} pin-intersection " pins" unit:`, JSON.stringify(results),
-  '\n  unit text:', JSON.stringify(probe.unitText), 'opacity:', probe.unitOpacity);
-process.exit(ok ? 0 : 1);

package/scripts/topo-pin-intersection-warning-crossfade-test.mjs

@@ -1,107 +0,0 @@
-/* Round 237 verification: pin-intersection chip's ⚠ warning glyph
- * always-mounts with opacity gated on isEmpty, instead of
- * conditional render on isEmpty. Closes the snap-mount + layout-
- * shift jank that survived R236's color easing.
- *
- * Test scope:
- *   - non-empty state: glyph in DOM, data-pin-intersection-warning
- *     ='false', opacity=0, transition includes 'opacity 200ms'
- *   - empty state:     glyph in DOM, data-pin-intersection-warning
- *     ='true',  opacity=1, transition still present
- *   - chip width: stable across the crossing (no layout-shift)
- *
- * Reuses the R236 scenario tuning — alpha is the only working
- * anthropic, gpt sessions all idle; pin working+A (non-empty)
- * then re-pin vendor to O (empty).
- */
-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,
-  });
-  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 });
-
-await page.locator('[data-pressure-seg="working"]').first().click();
-await page.locator('[data-vendor-letter="A"]').first().click();
-await page.waitForSelector('[data-pin-intersection-warning]', { timeout: 5000, state: 'attached' });
-await page.waitForTimeout(300);
-
-const probe = (page) => page.evaluate(() => {
-  const glyph = document.querySelector('[data-pin-intersection-warning]');
-  const chip = document.querySelector('[data-pin-intersection]');
-  if (!glyph || !chip) return null;
-  return {
-    present:      true,
-    warning:      glyph.getAttribute('data-pin-intersection-warning'),
-    opacity:      parseFloat(glyph.style.opacity || '1'),
-    transition:   glyph.style.transition,
-    text:         glyph.textContent,
-    chipWidthPx:  Math.round(chip.getBoundingClientRect().width * 100) / 100,
-    chipEmpty:    chip.getAttribute('data-pin-intersection-empty'),
-  };
-});
-
-const nonEmpty = await probe(page);
-
-// Flip vendor pin to 'O' — working ∩ openai = 0 (gpt all idle) → empty
-await page.locator('[data-vendor-letter="O"]').first().click();
-await page.waitForTimeout(300);
-const empty = await probe(page);
-
-await browser.close();
-
-const widthDelta = nonEmpty && empty
-  ? Math.abs(nonEmpty.chipWidthPx - empty.chipWidthPx)
-  : Infinity;
-
-const results = {
-  nonempty_in_dom:           nonEmpty?.present === true,
-  nonempty_warning_false:    nonEmpty?.warning === 'false',
-  nonempty_opacity_0:        nonEmpty?.opacity === 0,
-  nonempty_has_transition:   /opacity\s+200ms/.test(nonEmpty?.transition || ''),
-  nonempty_text_is_warning:  nonEmpty?.text === '⚠',
-  nonempty_chip_empty_false: nonEmpty?.chipEmpty === 'false',
-
-  empty_in_dom:              empty?.present === true,
-  empty_warning_true:        empty?.warning === 'true',
-  empty_opacity_1:           empty?.opacity === 1,
-  empty_has_transition:      /opacity\s+200ms/.test(empty?.transition || ''),
-  empty_chip_empty_true:     empty?.chipEmpty === 'true',
-
-  // Chip width stable across the crossing (no layout-shift jank).
-  // 1px tolerance for fractional rounding only.
-  chip_width_stable:         widthDelta <= 1,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} pin-intersection warning crossfade:`, JSON.stringify(results),
-  '\n  nonEmpty:', nonEmpty,
-  '\n  empty:   ', empty,
-  '\n  widthDelta:', widthDelta);
-process.exit(ok ? 0 : 1);