@sleep2agi/agent-network-dashboard 0.4.6-preview.26 → 0.4.6-preview.261

package/scripts/topo-spoke-busyness-test.mjs

@@ -0,0 +1,110 @@
+/* Round 145 verification: R46 idle-spoke flow rate buckets on
+ * workingCount, completing the 4-layer busyness-driven motion
+ * family:
+ *   R84  hub breath          (centre)
+ *   R131 outer-ring orbit    (periphery)
+ *   R132 groupbox march      (per-team, grid layout)
+ *   R145 idle-spoke flow     (ring layout, hub→nodes) — new
+ *
+ * Bucket ladder shared across the four layers (same R84
+ * thresholds):
+ *   workingCount === 0     → bucket 0
+ *   workingCount in [1, 2] → bucket 1
+ *   workingCount in [3, 5] → bucket 2
+ *   workingCount  >= 6     → bucket 3
+ *
+ * Idle-spoke durations per bucket: 2.8 / 2.4 / 2.0 / 1.6 seconds
+ * (R46 baseline 2.4s is bucket 1).
+ *
+ * Spokes only render in ring layout. Active spokes (carrying flow
+ * traffic) don't get the animation — they're solid bright strokes.
+ * Only idle spokes carry the .anet-topo-spoke-flow class and the
+ * --spoke-dur var. The test seeds 0 messages so all spokes are idle.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(workingCount, totalCount) {
+  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');
+      // ring layout is R145's target — it's also the default, but
+      // pinning explicitly defends against future default flips.
+      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 sessions = [];
+    for (let i = 0; i < totalCount; i++) {
+      sessions.push({
+        alias: `node${i}`,
+        status: i < workingCount ? 'working' : '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 } });
+  });
+  // 0 messages → no active spokes → every spoke is idle (.anet-topo-spoke-flow)
+  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((n) => document.querySelectorAll('g[data-node]').length === n, totalCount, { timeout: 30000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const spokes = [...document.querySelectorAll('path.anet-topo-spoke-flow')];
+    return spokes.map(p => ({
+      bucket: p.getAttribute('data-topo-spoke-bucket'),
+      dur:    p.getAttribute('data-topo-spoke-dur'),
+      // Resolved animation-duration from computed style — confirms
+      // the CSS var bridge through to the cascade.
+      cssDur: getComputedStyle(p).getPropertyValue('animation-duration').trim(),
+    }));
+  });
+  await browser.close();
+  return out;
+}
+
+// One probe per bucket
+const b0 = await probe(0, 4);  // 0 working / 4 idle  → bucket 0 (2.8s)
+const b1 = await probe(2, 4);  // 2 working / 2 idle  → bucket 1 (2.4s)
+const b2 = await probe(4, 5);  // 4 working / 1 idle  → bucket 2 (2.0s)
+const b3 = await probe(7, 8);  // 7 working / 1 idle  → bucket 3 (1.6s)
+
+const consistent = (spokes, bucket, dur) =>
+  spokes.length > 0 &&
+  spokes.every(s => s.bucket === String(bucket) && s.dur === String(dur) && s.cssDur === `${dur}s`);
+
+const results = {
+  b0_someSpokes:   b0.length > 0,
+  b0_bucket0_2_8s: consistent(b0, 0, 2.8),
+  b1_bucket1_2_4s: consistent(b1, 1, 2.4),
+  b2_bucket2_2_0s: consistent(b2, 2, 2.0),
+  b3_bucket3_1_6s: consistent(b3, 3, 1.6),
+  // dur strictly decreases as busy climbs
+  dur_monotonic:
+    Number(b0[0]?.dur) > Number(b1[0]?.dur) &&
+    Number(b1[0]?.dur) > Number(b2[0]?.dur) &&
+    Number(b2[0]?.dur) > Number(b3[0]?.dur),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} spoke busyness:`, JSON.stringify(results),
+  `\n  b0(0w/4)=`, b0.slice(0,1),
+  `\n  b1(2w/4)=`, b1.slice(0,1),
+  `\n  b2(4w/5)=`, b2.slice(0,1),
+  `\n  b3(7w/8)=`, b3.slice(0,1));
+process.exit(ok ? 0 : 1);

package/scripts/topo-spoke-tint-test.mjs

@@ -0,0 +1,96 @@
+/* Round 240 verification: backdrop spokes (6 radar-style lines)
+ * tint to pal.legendAccent on any pinned filter, mirroring R93's
+ * tier-ring treatment. Background scaffolding now signals
+ * 'filtered mode' as a unified set instead of half-and-half.
+ *
+ * Cyber theme palette:
+ *   pal.ringStroke   = #164e63 = rgb(22, 78, 99)
+ *   pal.legendAccent = #67e8f9 = rgb(103, 232, 249)
+ *
+ * Test scope:
+ *   - rest state (no pin):  all 6 spokes stroke = ringStroke
+ *   - pinned state:         all 6 spokes stroke = legendAccent
+ *   - transition wiring:    style.transition contains 'stroke 200ms'
+ *     (browser may normalise to '0.2s' — accept either)
+ *   - data-topo-spoke-tinted attr flips false ↔ true
+ *
+ * Scenario: 4 working agents (single tier, simple geometry).
+ * Click the working pressure-bar segment to pin status=working.
+ */
+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*', (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-topo-spoke-angle]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(400);
+
+const probeSpokes = (page) => page.evaluate(() => {
+  const spokes = Array.from(document.querySelectorAll('[data-topo-spoke-angle]'));
+  return spokes.map((s) => ({
+    angle:      s.getAttribute('data-topo-spoke-angle'),
+    tinted:     s.getAttribute('data-topo-spoke-tinted'),
+    fill:       getComputedStyle(s).stroke,
+    transition: getComputedStyle(s).transition,
+  }));
+});
+
+const rest = await probeSpokes(page);
+
+// Pin working status via pressure-bar segment click
+await page.locator('[data-pressure-seg="working"]').first().click();
+await page.waitForTimeout(400);
+const pinned = await probeSpokes(page);
+
+await browser.close();
+
+const RING_RGB   = 'rgb(22, 78, 99)';
+const ACCENT_RGB = 'rgb(103, 232, 249)';
+// Browser normalises 200ms → 0.2s
+const hasTransition = (s) => /stroke\s+(?:200ms|0\.2s)/.test(s || '');
+
+const results = {
+  six_spokes:             rest.length === 6,
+  rest_all_untinted:      rest.every(s => s.tinted === 'false'),
+  rest_all_ring_stroke:   rest.every(s => s.fill === RING_RGB),
+  rest_all_has_transition: rest.every(s => hasTransition(s.transition)),
+
+  pinned_six_spokes:      pinned.length === 6,
+  pinned_all_tinted:      pinned.every(s => s.tinted === 'true'),
+  pinned_all_accent:      pinned.every(s => s.fill === ACCENT_RGB),
+  pinned_all_has_transition: pinned.every(s => hasTransition(s.transition)),
+
+  // Angles match the original 0/30/60/90/120/150 pattern (sanity)
+  angles_correct:         JSON.stringify(rest.map(s => s.angle).sort())
+                          === JSON.stringify(['0','120','150','30','60','90']),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} spoke tint:`, JSON.stringify(results),
+  '\n  rest:  ',   rest.map(s => ({ a: s.angle, t: s.tinted, fill: s.fill })),
+  '\n  pinned:',   pinned.map(s => ({ a: s.angle, t: s.tinted, fill: s.fill })));
+process.exit(ok ? 0 : 1);

package/scripts/topo-status-chip-hover-test.mjs

@@ -0,0 +1,101 @@
+/* Round 79 verification: header working + online count chips become
+ * hover affordances (sister to R77 active-links chip).
+ *  - Hover "N working" → setHoveredStatus('working') → idle + offline
+ *    nodes dim, working stays bright. Same outcome as R55 legend row
+ *    hover, just from the chip surface.
+ *  - Hover "N online" with working present → same as above.
+ *  - Mouseleave restores baseline.
+ *
+ * Fleet: 1 working (wkr), 2 idle (idl1, idl2), 1 offline (off).
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.setItem('anet-topo-layout', 'ring');
+    sessionStorage.setItem('anet_v3_auth', '1');
+    sessionStorage.removeItem('anet-topo-pinned-status');
+    sessionStorage.removeItem('anet-topo-pinned-group');
+  } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+const stale = new Date(Date.now() - 30 * 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const sessions = [
+    { alias: 'wkr',  status: 'working', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'idl1', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'idl2', status: 'idle',    network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'off',  status: 'offline', network_id: nid, project_dir: null, created_at: stale, updated_at: stale, last_seen_at: stale },
+  ];
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const opacities = () => page.evaluate(() => {
+  const o = {};
+  for (const a of ['wkr', 'idl1', 'idl2', 'off']) {
+    const g = document.querySelector(`g[data-node="${a}"]`);
+    o[a] = g ? +(g.style.opacity || '1') : null;
+  }
+  return o;
+});
+
+const before = await opacities();
+
+// Hover working chip
+await page.locator('[data-working-chip]').hover();
+await page.waitForTimeout(250);
+const onWorking = await opacities();
+
+// Move away
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterWorking = await opacities();
+
+// Hover online chip (working present → routes to 'working')
+await page.locator('[data-online-chip]').hover();
+await page.waitForTimeout(250);
+const onOnline = await opacities();
+
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterOnline = await opacities();
+
+await browser.close();
+
+const bright = (v) => v != null && v >= 0.55;
+const dim    = (v) => v != null && v < 0.4;
+const results = {
+  before_baseline:           bright(before.wkr) && bright(before.idl1) && bright(before.idl2),
+  working_keepsWkrBright:    bright(onWorking.wkr),
+  working_dimsIdle:          dim(onWorking.idl1) && dim(onWorking.idl2),
+  working_dimsOffline:       dim(onWorking.off),
+  workingLeave_restoresAll:  bright(afterWorking.wkr) && bright(afterWorking.idl1),
+  online_keepsWkrBright:     bright(onOnline.wkr),  // routes to working filter
+  online_dimsIdle:           dim(onOnline.idl1) && dim(onOnline.idl2),
+  onlineLeave_restoresAll:   bright(afterOnline.wkr) && bright(afterOnline.idl1),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-chip hover:`, JSON.stringify(results),
+  `\n  before=`,        before,
+  `\n  onWorking=`,     onWorking,
+  `\n  afterWorking=`,  afterWorking,
+  `\n  onOnline=`,      onOnline,
+  `\n  afterOnline=`,   afterOnline);
+process.exit(ok ? 0 : 1);

package/scripts/topo-status-chip-tooltip-test.mjs

@@ -0,0 +1,95 @@
+/* Round 113 verification: chip-row "N working" + "N online" tooltips
+ * list matched aliases. Closes the last hover surfaces in the chip-
+ * row that had generic "Hover to highlight" titles. Same R97-R102 /
+ * R101 alias-list pattern.
+ *
+ * Fleet: 2 working (wkr1/2) + 2 idle (idl1/2) + 1 offline (off1).
+ *   working chip title contains wkr1, wkr2; data-working-chip-aliases CSV matches
+ *   online chip title contains all online aliases (4); data-online-chip-aliases matches
+ *   pin state flips the action hint
+ */
+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 = (sel) => page.evaluate((s) => {
+  const el = document.querySelector(s);
+  if (!el) return null;
+  return {
+    title:   el.getAttribute('title') || '',
+    aliases: el.getAttribute('data-working-chip-aliases') || el.getAttribute('data-online-chip-aliases') || '',
+  };
+}, sel);
+
+const workingBefore = await read('[data-working-chip]');
+const onlineBefore  = await read('[data-online-chip]');
+
+// Pin working status — action hint should flip.
+await page.evaluate(() => {
+  sessionStorage.setItem('anet-topo-pinned-status', 'working');
+  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'working' } }));
+});
+await page.waitForTimeout(300);
+const workingPinned = await read('[data-working-chip]');
+
+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 = {
+  workingBefore_aliasesMatch:    sameSet(workingBefore?.aliases || '', ['wkr1', 'wkr2']),
+  workingBefore_titleListsThem:  /wkr1.*wkr2|wkr2.*wkr1/.test(workingBefore?.title || ''),
+  workingBefore_titleClickHint:  /click to pin/.test(workingBefore?.title || ''),
+  onlineBefore_aliasesMatch:     sameSet(onlineBefore?.aliases || '', ['wkr1', 'wkr2', 'idl1', 'idl2']),
+  onlineBefore_titleListsThem:   /wkr1/.test(onlineBefore?.title || '') && /idl1/.test(onlineBefore?.title || ''),
+  pinnedWorking_aliasesStable:   sameSet(workingPinned?.aliases || '', ['wkr1', 'wkr2']),
+  pinnedWorking_titleHintFlipped:/pinned, Esc to clear/.test(workingPinned?.title || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-chip tooltip:`, JSON.stringify(results),
+  `\n  workingBefore=`,  workingBefore,
+  `\n  onlineBefore=`,   onlineBefore,
+  `\n  workingPinned=`,  workingPinned);
+process.exit(ok ? 0 : 1);

package/scripts/topo-statusbar-chips-self-hover-test.mjs

@@ -0,0 +1,177 @@
+/* Round 201 verification: the chip-row "N working" / "N online" chips
+ * adopt deeper versions of their own identity colour on hover,
+ * mirroring R193 active-links chip pattern.
+ *
+ * Pre-R201 hover working chip → R55 canvas dim + chip-row highlight,
+ * but chip itself stayed at bg-{color}-500/10 — cause silent, effect
+ * loud. R201 deepens 10→15 bg and 20→30 border on hover (only when
+ * the chip has a target count > 0). The inline transition list is
+ * extended to cover background-color + border-color so the swap
+ * eases instead of snapping (Tailwind transition-colors on the
+ * className alone would be overridden by the existing R180 inline
+ * box-shadow transition).
+ *
+ * Test (cyber dark, 4 working sessions):
+ *   1. Working chip: clickable='true', className has hover:bg-green-500/15
+ *      + hover:border-green-500/30, transition includes 'background-color'
+ *      + 'border-color' (both 200ms), inline still has 'box-shadow 150ms'.
+ *   2. Online chip: same shape with cyan hue.
+ *   3. Hover the working chip — wait past 220ms → computed bg
+ *      shifts to a more-saturated/darker green (RGB-or-OKLab signal).
+ *   4. Move away — bg returns to idle (with margin past 220ms).
+ *   5. The chip's R55 canvas-effect setHoveredStatus still fires —
+ *      verified via hoveredStatus change reflected on the working
+ *      legend row's data-legend-row-lifted attribute.
+ */
+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: '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'),
+  ] } });
+});
+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.waitForSelector('[data-working-chip]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probeChip = async (selector) => page.evaluate((sel) => {
+  const el = document.querySelector(sel);
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    className:   el.getAttribute('class') || '',
+    clickable:   el.getAttribute('data-working-chip-clickable') ||
+                 el.getAttribute('data-online-chip-clickable'),
+    bg:          cs.backgroundColor,
+    borderColor: cs.borderTopColor,
+    transition:  el.style.transition,
+  };
+}, selector);
+
+const idleWorking = await probeChip('[data-working-chip]');
+const idleOnline  = await probeChip('[data-online-chip]');
+
+await page.hover('[data-working-chip]');
+await page.waitForTimeout(250);
+const hoverWorking = await probeChip('[data-working-chip]');
+
+// Confirm R55 canvas effect still fires — hoveredStatus='working'
+// lifts the legend working row.
+const workingRowLifted = await page.evaluate(() =>
+  document.querySelector('[data-legend-status="working"]')
+    ?.getAttribute('data-legend-row-lifted'));
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(280);
+const settledWorking = await probeChip('[data-working-chip]');
+
+await page.hover('[data-online-chip]');
+await page.waitForTimeout(250);
+const hoverOnline = await probeChip('[data-online-chip]');
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(280);
+const settledOnline = await probeChip('[data-online-chip]');
+
+await browser.close();
+
+// Tailwind 4 emits oklab/oklch / color-mix forms. Just check the bg
+// string actually differs idle vs hover, and a brief parser confirms
+// the channel that should grow (green for working, blue/green for cyan).
+// Parse colors including alpha. R201's Tailwind /10 → /15 emits same
+// OKLab L/a/b with stepped-up alpha (0.1 → 0.15); R193's gray→cyan
+// pattern emits a different hue at any alpha. Both are "more saturated
+// against the canvas" from the user's POV. Capture alpha and treat
+// alpha-increase as a valid saturation signal alongside chroma growth.
+function parseColor(s) {
+  if (!s) return null;
+  let m = s.match(/rgba?\(\s*(\d+)\s*,?\s*(\d+)\s*,?\s*(\d+)(?:\s*[,/]\s*([\d.]+))?/);
+  if (m) return { kind: 'rgb', r: +m[1], g: +m[2], b: +m[3], a: m[4] != null ? +m[4] : 1 };
+  m = s.match(/oklab\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)(?:\s*\/\s*([\d.]+))?/);
+  if (m) return { kind: 'oklab', L: +m[1], a: +m[2], b: +m[3], alpha: m[4] != null ? +m[4] : 1 };
+  m = s.match(/oklch\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)(?:\s*\/\s*([\d.]+))?/);
+  if (m) return { kind: 'oklch', L: +m[1], C: +m[2], h: +m[3], alpha: m[4] != null ? +m[4] : 1 };
+  return null;
+}
+
+// "More saturated against the canvas" = either chroma/hue distance
+// from gray grew OR alpha grew (Tailwind /10 → /15 deepens by alpha).
+const moreSaturated = (idle, hov) => {
+  if (!idle || !hov) return false;
+  if (idle.kind === 'rgb' && hov.kind === 'rgb') {
+    const chromaIdle = Math.max(idle.r, idle.g, idle.b) - Math.min(idle.r, idle.g, idle.b);
+    const chromaHov  = Math.max(hov.r, hov.g, hov.b) - Math.min(hov.r, hov.g, hov.b);
+    return chromaHov > chromaIdle || hov.a > idle.a + 0.01;
+  }
+  if (idle.kind === 'oklab' && hov.kind === 'oklab') {
+    const dIdle = Math.hypot(idle.a, idle.b);
+    const dHov  = Math.hypot(hov.a, hov.b);
+    return dHov > dIdle + 0.005 || hov.alpha > idle.alpha + 0.01;
+  }
+  if (idle.kind === 'oklch' && hov.kind === 'oklch') {
+    return hov.C > idle.C + 0.005 || hov.alpha > idle.alpha + 0.01;
+  }
+  return false;
+};
+
+const idleWorkingC = parseColor(idleWorking?.bg);
+const hoverWorkingC = parseColor(hoverWorking?.bg);
+const idleOnlineC  = parseColor(idleOnline?.bg);
+const hoverOnlineC = parseColor(hoverOnline?.bg);
+
+const results = {
+  working_clickable:                   idleWorking?.clickable === 'true',
+  working_className_has_hover:         idleWorking?.className.includes('hover:bg-green-500/15')
+                                       && idleWorking?.className.includes('hover:border-green-500/30'),
+  working_transition_includes_bg:      /background-color\s+(?:200ms|0\.2s)/.test(idleWorking?.transition || ''),
+  working_transition_includes_border:  /border-color\s+(?:200ms|0\.2s)/.test(idleWorking?.transition || ''),
+  working_transition_keeps_boxshadow:  /box-shadow\s+(?:150ms|0\.15s)/.test(idleWorking?.transition || ''),
+  working_hover_bg_changed:            idleWorking?.bg !== hoverWorking?.bg,
+  working_hover_more_saturated:        moreSaturated(idleWorkingC, hoverWorkingC),
+  working_settles_back:                settledWorking?.bg === idleWorking?.bg,
+  // R55 canvas-effect still fires from the chip — hovering the
+  // working chip lifts the legend working row.
+  working_canvas_effect_fires:         workingRowLifted === 'true',
+
+  online_clickable:                    idleOnline?.clickable === 'true',
+  online_className_has_hover:          idleOnline?.className.includes('hover:bg-cyan-500/15')
+                                       && idleOnline?.className.includes('hover:border-cyan-500/30'),
+  online_transition_includes_bg:       /background-color\s+(?:200ms|0\.2s)/.test(idleOnline?.transition || ''),
+  online_transition_includes_border:   /border-color\s+(?:200ms|0\.2s)/.test(idleOnline?.transition || ''),
+  online_hover_bg_changed:             idleOnline?.bg !== hoverOnline?.bg,
+  online_hover_more_saturated:         moreSaturated(idleOnlineC, hoverOnlineC),
+  online_settles_back:                 settledOnline?.bg === idleOnline?.bg,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-bar chips self-hover:`, JSON.stringify(results),
+  `\n  idleWorking:`,    idleWorking,
+  `\n  hoverWorking:`,   hoverWorking,
+  `\n  settledWorking:`, settledWorking,
+  `\n  idleOnline:`,     idleOnline,
+  `\n  hoverOnline:`,    hoverOnline,
+  `\n  settledOnline:`,  settledOnline);
+process.exit(ok ? 0 : 1);