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

package/scripts/topo-pressure-seg-member-alias-match-test.mjs

@@ -1,133 +0,0 @@
-/* Round 563 verification: pressure-bar segment lights up (R210
- * brightness + R542 drop-shadow) when operator hovers a node alias
- * whose status matches the segment's tier. 6th anchor in
- * inspection-overrides-encoding family.
- *
- * Mock: alpha·1 (working) + alpha·2 (idle) + alpha·3 (offline).
- * Hover alpha·1 → 'working' segment lights up; idle + offline rest.
- *
- * Test phases:
- *   1. rest: all 3 segments filter='none', lit='false'
- *   2. hover alpha·1 (working) → working seg filter contains
- *      brightness(1.2) and drop-shadow with green hex; idle +
- *      offline stay at rest
- *   3. hover alpha·2 (idle) → idle seg lit
- *   4. hover alpha·3 (offline) → offline seg lit
- *   5. source-side regex confirms wiring
- */
-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('alpha·1', 'working'),
-    mk('alpha·2', 'idle'),
-    mk('alpha·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);
-
-const probeSeg = (key) => page.evaluate((k) => {
-  const el = document.querySelector(`[data-pressure-seg="${k}"]`);
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter: cs.filter,
-    matching: el.getAttribute('data-pressure-seg-member-alias-matching') === 'true',
-    lit: el.getAttribute('data-pressure-seg-lit') === 'true',
-    hovered: el.getAttribute('data-pressure-seg-hovered') === 'true',
-  };
-}, key);
-
-const restWorking = await probeSeg('working');
-const restIdle    = await probeSeg('idle');
-const restOffline = await probeSeg('offline');
-
-// Hover working node
-await page.hover('g[data-node="alpha·1"]');
-await page.waitForTimeout(400);
-const hoverWorkingW = await probeSeg('working');
-const hoverWorkingI = await probeSeg('idle');
-const hoverWorkingO = await probeSeg('offline');
-
-await page.mouse.move(0, 0);
-await page.waitForTimeout(300);
-await page.hover('g[data-node="alpha·2"]');
-await page.waitForTimeout(400);
-const hoverIdleI = await probeSeg('idle');
-
-await page.mouse.move(0, 0);
-await page.waitForTimeout(300);
-await page.hover('g[data-node="alpha·3"]');
-await page.waitForTimeout(400);
-const hoverOfflineO = await probeSeg('offline');
-
-await browser.close();
-
-const src = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
-const sourceTierKey = /const hoveredAliasTierKey: 'working' \| 'idle' \| 'offline' \| null/.test(src);
-const sourceMatching = /const isMemberAliasMatching = hoveredAliasTierKey === key;/.test(src);
-const sourceLit = /const isSegLit = hoveredStatus === key \|\| isMemberAliasMatching;/.test(src);
-const sourceFilter = /filter: isSegLit \? `brightness\(1\.2\) drop-shadow\(0 0 2px \$\{color\}99\)` : undefined/.test(src);
-const sourceAttr = /data-pressure-seg-member-alias-matching=/.test(src);
-
-const results = {
-  rest_working_filter_none: restWorking?.filter === 'none',
-  rest_working_lit_false:   restWorking?.lit === false,
-  rest_idle_filter_none:    restIdle?.filter === 'none',
-  rest_offline_filter_none: restOffline?.filter === 'none',
-  // Hover working node → working seg lit
-  hover_working_w_lit:      hoverWorkingW?.lit === true,
-  hover_working_w_matching: hoverWorkingW?.matching === true,
-  hover_working_w_brightness: /brightness\(1\.2\)/.test(hoverWorkingW?.filter || ''),
-  hover_working_w_dropshadow: /drop-shadow\(/.test(hoverWorkingW?.filter || ''),
-  // idle + offline segments stay at rest
-  hover_working_i_lit_false:  hoverWorkingI?.lit === false,
-  hover_working_o_lit_false:  hoverWorkingO?.lit === false,
-  // Hover idle node → idle seg lit
-  hover_idle_i_lit:         hoverIdleI?.lit === true,
-  hover_idle_i_matching:    hoverIdleI?.matching === true,
-  // Hover offline node → offline seg lit
-  hover_offline_o_lit:      hoverOfflineO?.lit === true,
-  hover_offline_o_matching: hoverOfflineO?.matching === true,
-  // Source
-  source_tier_key: sourceTierKey,
-  source_matching: sourceMatching,
-  source_lit:      sourceLit,
-  source_filter:   sourceFilter,
-  source_attr:     sourceAttr,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R563 pressure-seg inspection-overrides-encoding (6th anchor):`,
-  JSON.stringify(results, null, 2),
-  '\n  rest working:', JSON.stringify(restWorking),
-  '\n  hover alpha·1 (working) → working:', JSON.stringify(hoverWorkingW),
-  '\n  hover alpha·2 (idle) → idle:', JSON.stringify(hoverIdleI),
-  '\n  hover alpha·3 (offline) → offline:', JSON.stringify(hoverOfflineO));
-process.exit(ok ? 0 : 1);

package/scripts/topo-pressure-seg-motion-test.mjs

@@ -1,101 +0,0 @@
-/* Round 524 verification: pressure-bar segment width + filter motion
- * restored — extends .anet-topo-chip-focus transition-property list
- * to include `width` and `filter`, fixing the R165/R210 motion
- * polishes silently broken by R490.
- *
- * Test phases:
- *   1. computed transition on pressure-seg includes:
- *      - background-color (R510 family, R83 box-shadow already works)
- *      - width (R165 restoration ← R524)
- *      - filter (R210 brightness restoration ← R524)
- *      all at 200ms ease-out
- *   2. globals.css source confirms width + filter in property list
- *   3. hover the segment → filter brightness applied + transitioning
- */
-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(800);
-
-const rest = await page.evaluate(() => {
-  const el = document.querySelector('[data-pressure-seg="working"]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    transition:        cs.transition,
-    transitionProp:    cs.transitionProperty,
-    transitionDur:     cs.transitionDuration,
-    filter:            cs.filter,
-  };
-});
-
-// Hover the segment → filter should apply
-await page.hover('[data-pressure-seg="working"]');
-await page.waitForTimeout(350);
-const hover = await page.evaluate(() => {
-  const el = document.querySelector('[data-pressure-seg="working"]');
-  if (!el) return null;
-  const cs = getComputedStyle(el);
-  return {
-    filter:  cs.filter,
-  };
-});
-
-await browser.close();
-
-const css = readFileSync('/home/vansin/agent-network-dashboard/app/globals.css', 'utf8');
-const cssHasWidth =
-  /\.anet-topo-chip-focus[\s\S]*?transition-property:[\s\S]*?width[\s\S]*?!important/.test(css);
-const cssHasFilter =
-  /\.anet-topo-chip-focus[\s\S]*?transition-property:[\s\S]*?filter[\s\S]*?!important/.test(css);
-
-const results = {
-  has_width_in_prop:        /(^|,\s*)width(,|$)/.test(rest?.transitionProp || '') ||
-                            /\bwidth\b/.test(rest?.transitionProp || ''),
-  has_filter_in_prop:       /\bfilter\b/.test(rest?.transitionProp || ''),
-  has_bg_color_in_prop:     /background-color/.test(rest?.transitionProp || ''),  // sanity
-  duration_200ms:           /(200ms|0\.2s)/.test(rest?.transitionDur || ''),
-  rest_no_filter:           rest?.filter === 'none' || rest?.filter === '',
-  hover_filter_brightness:  /brightness\(1\.2\)/.test(hover?.filter || ''),
-  css_width_in_list:        cssHasWidth,
-  css_filter_in_list:       cssHasFilter,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} R524 pressure-seg motion restored:`,
-  JSON.stringify(results, null, 2),
-  '\n  rest:', JSON.stringify(rest),
-  '\n  hover.filter:', hover?.filter);
-process.exit(ok ? 0 : 1);

package/scripts/topo-pressure-seg-self-hover-test.mjs

@@ -1,126 +0,0 @@
-/* Round 210 verification: pressure-bar segments deepen their OWN
- * colour on hover via filter: brightness(1.2). Closes the chip-row
- * "hover deepens own identity" family at a 6th surface (the
- * pressure-bar scope previously had R83 wire setHoveredStatus but
- * the segment itself stayed flat).
- *
- * Pre-R210 hovering a segment fired R55 canvas dim via
- * setHoveredStatus, but the segment's own background stayed at the
- * unmodified tier color. R210 makes the cause element (segment)
- * light up the same gesture it fires on the canvas (effect element).
- *
- * Test (cyber dark, 2 working + 1 idle + 1 offline → 3 segments):
- *   1. 3 [data-pressure-seg] segments rendered.
- *   2. Idle: every segment has hovered='false', filter='none' (or
- *      no filter style set).
- *   3. Inline transition includes 'filter 150ms' alongside the
- *      existing R165 width 220ms + R60 box-shadow 150ms.
- *   4. Hover working segment → working hovered='true', filter
- *      'brightness(1.2)'.
- *   5. Other (idle/offline) segments stay hovered='false', no filter.
- *   6. Move away → working back to hovered='false', no filter.
- */
-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, 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',  'working'),
-    mk('gamma', 'idle'),
-    mk('delta', 'offline'),
-  ] } });
-});
-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-pressure-seg="working"]', { timeout: 10000 });
-await page.waitForTimeout(300);
-
-const probe = async () => page.evaluate(() => {
-  return [...document.querySelectorAll('[data-pressure-seg]')].map(el => {
-    const cs = getComputedStyle(el);
-    return {
-      key:        el.getAttribute('data-pressure-seg'),
-      hovered:    el.getAttribute('data-pressure-seg-hovered'),
-      filter:     cs.filter,
-      inlineFilter: el.style.filter,
-      transition: el.style.transition,
-    };
-  });
-});
-
-const idle = await probe();
-
-await page.hover('[data-pressure-seg="working"]');
-await page.waitForTimeout(180);
-const hovered = await probe();
-
-await page.mouse.move(0, 0);
-await page.waitForTimeout(180);
-const settled = await probe();
-
-await browser.close();
-
-const idleWorking    = idle.find(s => s.key === 'working');
-const idleIdle       = idle.find(s => s.key === 'idle');
-const idleOffline    = idle.find(s => s.key === 'offline');
-const hovWorking     = hovered.find(s => s.key === 'working');
-const hovIdle        = hovered.find(s => s.key === 'idle');
-const settledWorking = settled.find(s => s.key === 'working');
-
-const isNoFilter = (s) => !s || s === 'none' || s === '';
-const hasBrightness = (s) => /brightness\s*\(\s*1\.2/.test(s || '');
-
-const results = {
-  three_segments_present:   idle.length === 3,
-  working_found:            !!idleWorking,
-  idle_found:               !!idleIdle,
-  offline_found:            !!idleOffline,
-
-  // Idle: no filter, hovered='false', transitions present
-  idle_all_not_hovered:     idle.every(s => s.hovered === 'false'),
-  idle_all_no_filter:       idle.every(s => isNoFilter(s.inlineFilter)),
-  transitions_have_filter:  idle.every(s => /filter\s+(?:150ms|0\.15s)/.test(s.transition || '')),
-  transitions_keep_width:   idle.every(s => /width\s+(?:220ms|0\.22s)/.test(s.transition || '')),
-  transitions_keep_bs:      idle.every(s => /box-shadow\s+(?:150ms|0\.15s)/.test(s.transition || '')),
-
-  // Hover working: brightness applied
-  hov_working_hovered_true: hovWorking?.hovered === 'true',
-  hov_working_has_filter:   hasBrightness(hovWorking?.inlineFilter)
-                            || hasBrightness(hovWorking?.filter),
-  // Other segments stay idle
-  hov_idle_stays_false:     hovIdle?.hovered === 'false',
-  hov_idle_no_filter:       isNoFilter(hovIdle?.inlineFilter),
-
-  // Settled: back to idle
-  settled_hovered_false:    settledWorking?.hovered === 'false',
-  settled_no_filter:        isNoFilter(settledWorking?.inlineFilter),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} pressure-seg self-hover:`, JSON.stringify(results),
-  `\n  idle:`,    idle,
-  `\n  hovered:`, hovered,
-  `\n  settled:`, settled);
-process.exit(ok ? 0 : 1);

package/scripts/topo-pressure-seg-tooltip-test.mjs

@@ -1,98 +0,0 @@
-/* Round 102 verification: pressure-bar segment tooltips list the
- * aliases that fall into that status bucket. Closes the last "how
- * many but not which" gap in the chip-row surfaces. Composes with
- * the existing R83 hover preview (canvas dims still answer it
- * visually too) — this adds a screen-reader-friendly textual
- * channel for the same info.
- *
- * Fleet: 2 working + 2 idle + 1 offline. Verify each segment's
- * title contains the matching aliases + action hint; data-pressure-
- * seg-aliases attr carries the full CSV.
- */
-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');
-    sessionStorage.removeItem('anet-topo-pinned-status');
-  } catch {}
-});
-
-const fresh   = new Date(Date.now() - 60 * 1000).toISOString();
-const stale10 = new Date(Date.now() - 10 * 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, ts) => ({
-    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
-    network_id: nid, project_dir: null,
-    created_at: ts, updated_at: ts, last_seen_at: ts,
-  });
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    mk('wkr1', 'working', fresh),
-    mk('wkr2', 'working', fresh),
-    mk('idl1', 'idle',    fresh),
-    mk('idl2', 'idle',    fresh),
-    mk('off1', 'offline', stale10),
-  ] } });
-});
-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 === 5, { timeout: 30000 });
-await page.waitForTimeout(400);
-
-const read = (key) => page.evaluate((k) => {
-  const el = document.querySelector(`[data-pressure-seg="${k}"]`);
-  if (!el) return null;
-  return {
-    title:   el.getAttribute('title') || '',
-    aliases: el.getAttribute('data-pressure-seg-aliases') || '',
-  };
-}, key);
-
-const working = await read('working');
-const idle    = await read('idle');
-const offline = await read('offline');
-
-// Pin working — action hint should flip in the title.
-await page.locator('[data-pressure-seg="working"]').click();
-await page.waitForTimeout(250);
-const workingPinned = await read('working');
-
-await browser.close();
-
-const sameSet = (csv, expected) => {
-  const got = new Set(csv.split(',').filter(Boolean));
-  const exp = new Set(expected);
-  return got.size === exp.size && [...exp].every(x => got.has(x));
-};
-
-const results = {
-  working_aliasesMatch:   sameSet(working?.aliases || '', ['wkr1', 'wkr2']),
-  working_titleListsThem: /wkr1.*wkr2|wkr2.*wkr1/.test(working?.title || ''),
-  working_titleClickHint: /click to highlight/.test(working?.title || ''),
-  working_titleStatusN:   /^2 working/m.test(working?.title || ''),
-  idle_aliasesMatch:      sameSet(idle?.aliases || '', ['idl1', 'idl2']),
-  idle_titleListsThem:    /idl1.*idl2|idl2.*idl1/.test(idle?.title || ''),
-  offline_aliasesMatch:   sameSet(offline?.aliases || '', ['off1']),
-  offline_titleListsThem: /off1/.test(offline?.title || ''),
-  workingPin_aliasesStable: sameSet(workingPinned?.aliases || '', ['wkr1', 'wkr2']),
-  workingPin_hintFlipped:   /click to release filter/.test(workingPinned?.title || ''),
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} pressure-seg tooltip:`, JSON.stringify(results),
-  `\n  working:`,        working,
-  `\n  idle:`,           idle,
-  `\n  offline:`,        offline,
-  `\n  workingPinned:`,  workingPinned);
-process.exit(ok ? 0 : 1);

package/scripts/topo-pressure-seg-transition-test.mjs

@@ -1,107 +0,0 @@
-/* Round 165 verification: pressure-bar segments smoothly
- * transition their widths.
- *
- * Pre-R165 segment widths snapped instantly when fleet
- * composition shifted (e.g., a node going idle → working).
- * R165 adds `transition: width 220ms ease-out, box-shadow
- * 150ms ease-out` on each <span data-pressure-seg> inline
- * style — smooths the breath, doesn't change semantics.
- *
- * Tests:
- *   1. All segments carry the inline transition declaration
- *   2. Pin one segment → boxShadow string changes (R60 idiom)
- *   3. Width attribute is a percentage of (n/total)*100
- */
-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();
-const stale = new Date(Date.now() - 10 * 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, last) => ({
-    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
-    network_id: nid, project_dir: null,
-    created_at: last, updated_at: last, last_seen_at: last,
-  });
-  // 3 working + 2 idle + 1 offline = 6 total
-  await route.fulfill({ response: r, json: { ...b, sessions: [
-    mk('a1', 'working', fresh), mk('a2', 'working', fresh), mk('a3', 'working', fresh),
-    mk('b1', 'idle',    fresh), mk('b2', 'idle',    fresh),
-    mk('c1', 'offline', stale),
-  ] } });
-});
-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 === 6, { timeout: 30000 });
-await page.waitForSelector('[data-pressure-seg]', { timeout: 10000 });
-await page.waitForTimeout(400);
-
-const probe = await page.evaluate(() => {
-  const segs = ['working', 'idle', 'offline'].map(k => {
-    const el = document.querySelector(`[data-pressure-seg="${k}"]`);
-    if (!el) return null;
-    // Inline style is what we wrote; window.getComputedStyle reports the
-    // resolved value (which for `transition` is the long form).
-    const inlineTransition = el.style.transition || '';
-    const computedTransition = getComputedStyle(el).transition || '';
-    return {
-      key: k,
-      width: el.style.width,
-      inlineTransition,
-      // Match either width 220ms OR the resolved computed form.
-      hasTransitionWidth:
-        inlineTransition.includes('width 220ms') ||
-        /width\s+0\.22s|width\s+220ms/.test(computedTransition),
-      hasTransitionBoxShadow:
-        inlineTransition.includes('box-shadow 150ms') ||
-        /box-shadow\s+0\.15s|box-shadow\s+150ms/.test(computedTransition),
-    };
-  });
-  return segs;
-});
-
-// Pin the idle segment → boxShadow should appear (R60 inset rings)
-const boxBeforePin = await page.evaluate(() => {
-  const el = document.querySelector('[data-pressure-seg="idle"]');
-  return el ? el.style.boxShadow : null;
-});
-await page.locator('[data-pressure-seg="idle"]').click({ force: true });
-await page.waitForTimeout(300);
-const boxAfterPin = await page.evaluate(() => {
-  const el = document.querySelector('[data-pressure-seg="idle"]');
-  return el ? el.style.boxShadow : null;
-});
-
-await browser.close();
-
-const allOk = probe.every(p => p && p.hasTransitionWidth && p.hasTransitionBoxShadow);
-const results = {
-  three_segs_present:           probe.length === 3 && probe.every(p => p !== null),
-  all_have_transition_width:    probe.every(p => p?.hasTransitionWidth),
-  all_have_transition_boxShadow: probe.every(p => p?.hasTransitionBoxShadow),
-  working_width_50:             probe[0]?.width === '50%',   // 3/6
-  idle_width_33:                /33\.3|33%/.test(probe[1]?.width || ''),  // 2/6
-  offline_width_16:             /16\.6|16%/.test(probe[2]?.width || ''),  // 1/6
-  pin_changes_boxShadow:        boxBeforePin === '' && boxAfterPin !== '',
-  overall:                      allOk,
-};
-const ok = Object.values(results).every(Boolean);
-console.log(`${ok ? '✅' : '❌'} pressure-seg transition:`, JSON.stringify(results),
-  `\n  probes=`, probe,
-  `\n  box before/after pin =`, JSON.stringify(boxBeforePin), '→', JSON.stringify(boxAfterPin));
-process.exit(ok ? 0 : 1);