@sleep2agi/agent-network-dashboard 0.4.6-preview.21 → 0.4.6-preview.211

package/scripts/topo-pin-mirror-transition-test.mjs

@@ -0,0 +1,101 @@
+/* Round 180 verification: working / online / vendor-letter chips
+ * pick up box-shadow transition on pin/unpin.
+ *
+ * Pre-R180 the inset-ring pin-mirror style snapped instantly when
+ * the user pinned or unpinned a filter via these three chip
+ * surfaces. R165 had added the transition to pressure-bar
+ * segments only — R180 closes the smooth-pin-mirror family
+ * across all chip-row pinnable surfaces.
+ *
+ * Test:
+ *   1. Mock 3 working sessions across 2 vendors (claude + 书生)
+ *   2. Probe inline transition on working / online / vendor chips
+ *   3. All three should have 'box-shadow 150ms ease-out' in their
+ *      inline transition style
+ */
+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';
+  // Two distinct vendor families so vendor letter chip shows up
+  // (vendorDist.length > 1 requirement).
+  const mk = (alias, model) => ({
+    alias, status: 'working', 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', 'claude-opus-4'),
+    mk('beta',  'claude-opus-4'),
+    mk('gamma', 'intern-s1-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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-working-chip]', { timeout: 10000 });
+await page.waitForSelector('[data-vendor-letter]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = async () => page.evaluate(() => {
+  const grab = (sel) => {
+    const el = document.querySelector(sel);
+    return el ? {
+      transition: el.style.transition || getComputedStyle(el).transition || '',
+      boxShadow:  el.style.boxShadow || getComputedStyle(el).boxShadow || '',
+    } : null;
+  };
+  return {
+    working: grab('[data-working-chip]'),
+    online:  grab('[data-online-chip-clickable]'),
+    vendor:  grab('[data-vendor-letter]'),
+  };
+});
+
+const idle = await probe();
+
+// Click the working chip to pin → boxShadow should appear
+await page.locator('[data-working-chip]').click();
+await page.waitForTimeout(250);
+const pinnedWorking = await probe();
+
+await browser.close();
+
+const hasTransition = (s) =>
+  (s?.transition || '').includes('box-shadow 150ms') ||
+  /box-shadow\s+0\.15s|box-shadow\s+150ms/.test(s?.transition || '');
+
+const results = {
+  working_found:                idle.working !== null,
+  online_found:                 idle.online !== null,
+  vendor_found:                 idle.vendor !== null,
+  working_has_bs_transition:    hasTransition(idle.working),
+  online_has_bs_transition:     hasTransition(idle.online),
+  vendor_has_bs_transition:     hasTransition(idle.vendor),
+  // Pre-pin: no inset rings on working chip
+  working_idle_no_inset:        !(idle.working?.boxShadow || '').includes('inset'),
+  // After pin: inset rings appear, transition still set
+  working_pinned_has_inset:     (pinnedWorking.working?.boxShadow || '').includes('inset'),
+  working_pinned_keeps_transition: hasTransition(pinnedWorking.working),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pin-mirror transition:`, JSON.stringify(results),
+  `\n  idle =`, idle,
+  `\n  pinned =`, pinnedWorking);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,105 @@
+/* Round 66 verification: pinnedStatus + pinnedGroup persist across page
+ * reloads via sessionStorage. Stale group pins (group no longer exists)
+ * are cleared on hydration so the chip row doesn't show a phantom team.
+ *
+ *  - Pre-seed sessionStorage with anet-topo-pinned-status='working' →
+ *    reload → assert filter pill renders + working stays bright + idles
+ *    dim. (Status pin survives.)
+ *  - Pre-seed anet-topo-pinned-group='alpha' WITH alpha sessions → reload
+ *    → pill renders + alpha team stays bright.
+ *  - Pre-seed anet-topo-pinned-group='ghost' WITHOUT any ghost session →
+ *    reload → the stale pin is cleared on hydration; no pill renders.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+async function probe({ status = null, group = null, sessions }) {
+  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(({ status, group }) => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', 'grid');
+      sessionStorage.setItem('anet_v3_auth', '1');
+      if (status) sessionStorage.setItem('anet-topo-pinned-status', status);
+      else        sessionStorage.removeItem('anet-topo-pinned-status');
+      if (group)  sessionStorage.setItem('anet-topo-pinned-group', group);
+      else        sessionStorage.removeItem('anet-topo-pinned-group');
+    } catch {}
+  }, { status, group });
+  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 seeded = sessions.map(s => ({
+      alias: s.alias, status: s.status, network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions: seeded } });
+  });
+  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(c => document.querySelectorAll('g[data-node]').length === c, sessions.length, { timeout: 30000 });
+  await page.waitForTimeout(700);
+  const result = await page.evaluate(() => {
+    const pills = [...document.querySelectorAll('[data-active-filter]')].map(el => ({
+      kind: el.getAttribute('data-active-filter'),
+      text: (el.textContent || '').trim(),
+    }));
+    const opacities = {};
+    for (const el of document.querySelectorAll('g[data-node]')) {
+      const a = el.getAttribute('data-node');
+      if (a) opacities[a] = +(el.style.opacity || '1');
+    }
+    const storage = {
+      status: sessionStorage.getItem('anet-topo-pinned-status'),
+      group:  sessionStorage.getItem('anet-topo-pinned-group'),
+    };
+    return { pills, opacities, storage };
+  });
+  await ctx.close();
+  return result;
+}
+
+const sessions3 = [
+  { alias: 'alpha1', status: 'working' },
+  { alias: 'alpha2', status: 'idle' },
+  { alias: 'beta',   status: 'idle' },
+];
+const alphaPlus = [
+  { alias: 'alpha1', status: 'idle' },
+  { alias: 'alpha2', status: 'idle' },
+  { alias: 'alpha3', status: 'idle' },
+  { alias: 'beta',   status: 'idle' },
+];
+
+const statusRestore = await probe({ status: 'working', sessions: sessions3 });
+const groupRestore  = await probe({ group: 'alpha',   sessions: alphaPlus });
+const stalePin      = await probe({ group: 'ghost',   sessions: sessions3 });
+
+await browser.close();
+
+const bright = (v) => v != null && v >= 0.55;
+const dim    = (v) => v != null && v < 0.4;
+const results = {
+  statusPill_restored: statusRestore.pills.length === 1 && statusRestore.pills[0].kind === 'status'
+                        && /filter:\s*working/.test(statusRestore.pills[0].text),
+  statusPin_dimsIdle:  bright(statusRestore.opacities.alpha1) && dim(statusRestore.opacities.alpha2),
+  groupPill_restored:  groupRestore.pills.length === 1 && groupRestore.pills[0].kind === 'group'
+                        && /filter:\s*alpha/.test(groupRestore.pills[0].text),
+  groupPin_dimsOutsider: bright(groupRestore.opacities.alpha1) && dim(groupRestore.opacities.beta),
+  stale_pillCleared:   stalePin.pills.length === 0,
+  stale_storageCleared: stalePin.storage.group === null,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pin persistence:`, JSON.stringify(results),
+  `\n  statusRestore=`, statusRestore,
+  `\n  groupRestore=`, groupRestore,
+  `\n  stalePin=`, stalePin);
+process.exit(ok ? 0 : 1);

package/scripts/topo-popover-meta-test.mjs

@@ -0,0 +1,78 @@
+/* Round 37 verification: ChatPopover header carries cwd / last-seen
+ * lines pulled from the SWR session cache. Three cases:
+ *   - online node with cwd → cwd line, no last-seen
+ *   - offline node with cwd → both lines
+ *   - bare node (no cwd, no last_seen) → drag/Esc fallback 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 });
+
+async function probe(targetAlias) {
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 1000 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try {
+      localStorage.setItem('anet-theme', 'cyber');
+      localStorage.setItem('anet-topo-layout', 'grid');
+      localStorage.setItem('anet-topo-nodescale', '1');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  });
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  const offline = new Date(Date.now() - 8 * 60 * 1000).toISOString(); // 8 min ago
+  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: 'liveCwd', status: 'idle', network_id: nid,
+        project_dir: '/home/vansin/agent-orchestra',
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+      { alias: 'offCwd', status: 'offline', network_id: nid,
+        project_dir: '/home/vansin/some-project',
+        created_at: fresh, updated_at: fresh, last_seen_at: offline },
+      { alias: 'bare', status: 'idle', network_id: nid, project_dir: null,
+        created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    ];
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+  await page.waitForTimeout(400);
+  await page.locator(`g[data-node="${targetAlias}"]`).click();
+  await page.waitForTimeout(300);
+  const meta = await page.evaluate(() => {
+    const cwd = document.querySelector('[data-popover-cwd]');
+    const ls = document.querySelector('[data-popover-lastseen]');
+    const popover = document.querySelector('[aria-label^="Chat with"]');
+    const dragHint = popover ? [...popover.querySelectorAll('div')].find(d => /Drag to move/.test(d.textContent || '')) : null;
+    return {
+      cwdText: cwd?.textContent || null,
+      lsText: ls?.textContent || null,
+      dragHintPresent: !!dragHint,
+    };
+  });
+  await ctx.close();
+  return meta;
+}
+
+const live = await probe('liveCwd');
+const off = await probe('offCwd');
+const bare = await probe('bare');
+await browser.close();
+
+const results = {
+  liveShowsCwd: live.cwdText === 'cwd: /home/vansin/agent-orchestra' && live.lsText === null && !live.dragHintPresent,
+  offlineShowsBoth: off.cwdText === 'cwd: /home/vansin/some-project'
+    && /last seen: [78]m ago/.test(off.lsText || '')
+    && !off.dragHintPresent,
+  bareFallsBackToDragHint: bare.cwdText === null && bare.lsText === null && bare.dragHintPresent,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} popover meta:`, JSON.stringify(results),
+  `\n  live=`, live, `\n  off=`, off, `\n  bare=`, bare);
+process.exit(ok ? 0 : 1);

package/scripts/topo-pressure-bar-test.mjs

@@ -0,0 +1,69 @@
+/* Round 31 verification: fleet-pressure chip with proportional segments.
+ * 4 working + 6 idle + 2 offline = 12 total → 33% / 50% / 17%. */
+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: 1000 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try {
+    localStorage.setItem('anet-theme', 'cyber');
+    localStorage.setItem('anet-topo-layout', 'grid');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const make = (alias, status) => ({
+    alias, status, network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  const sessions = [
+    ...Array.from({ length: 4 }, (_, i) => make(`w${i}`, 'working')),
+    ...Array.from({ length: 6 }, (_, i) => make(`i${i}`, 'idle')),
+    ...Array.from({ length: 2 }, (_, i) => make(`o${i}`, 'offline')),
+  ];
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-fleet-pressure]', { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const chip = '[data-fleet-pressure]';
+const titleText = await page.locator(chip).getAttribute('title');
+// The chip layout: <chip> > <label-span> + <bar-span> ; bar-span has the 3 segment spans.
+const segments = await page.evaluate(() => {
+  const chip = document.querySelector('[data-fleet-pressure]');
+  if (!chip) return [];
+  // The bar container is the inline-flex w-16 span (second child).
+  const bar = [...chip.children].find(c => c.classList?.contains('w-16'));
+  if (!bar) return [];
+  return [...bar.children].map(el => ({ width: el.style.width, background: el.style.background }));
+});
+const segmentWidths = segments.map(s => s.width);
+const segmentColors = segments.map(s => s.background);
+
+// 4/12 = 33.33%, 6/12 = 50.00%, 2/12 = 16.67%
+const close = (a, b) => Math.abs(parseFloat(a) - b) < 0.5;
+
+await browser.close();
+const results = {
+  titleHasCounts: titleText === '4 working · 6 idle · 2 offline',
+  threeSegments: segmentWidths.length === 3,
+  workingProportion: close(segmentWidths[0], 100 * 4 / 12),
+  idleProportion: close(segmentWidths[1], 100 * 6 / 12),
+  offlineProportion: close(segmentWidths[2], 100 * 2 / 12),
+  workingColor: /22c55e|rgb\(34, 197, 94\)/.test(segmentColors[0] || ''),
+  idleColor: /2dd4bf|rgb\(45, 212, 191\)/.test(segmentColors[1] || ''),
+  offlineColor: /6b7280|rgb\(107, 114, 128\)/.test(segmentColors[2] || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pressure bar:`, JSON.stringify(results), `widths=${segmentWidths.join(',')} colors=${segmentColors.join(' | ')}`);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,123 @@
+/* Round 83 verification: pressure-bar segments expose a hover preview
+ * before the click pins. Matches the R55 legend + R79 status chip +
+ * R80 vendor letter hover pattern — same activeStatus mechanism, just
+ * the last surface that was click-only.
+ *
+ * Fleet: 1 working + 2 idle + 1 offline. Hover the working segment →
+ * working node stays bright, idle + offline dim. Mouseleave → restore.
+ * Then click the working segment → pin sticks via boxShadow. Hovering
+ * idle while working is pinned → live preview switches; mouseleave
+ * falls back to the working pin (activeStatus = hoveredStatus ??
+ * pinnedStatus).
+ */
+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: 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');
+    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 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 sessions = [
+    { alias: 'wkr',  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 },
+    { alias: 'idl1', 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 },
+    { alias: 'idl2', 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 },
+    { alias: 'off',  status: 'offline', model: 'claude-opus-4', runtime: 'cli-claude-code',
+      network_id: nid, project_dir: null, created_at: stale10, updated_at: stale10, last_seen_at: stale10 },
+  ];
+  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 ops = () => 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 segShadow = (k) => page.evaluate((key) => {
+  const s = document.querySelector(`[data-pressure-seg="${key}"]`);
+  return s ? (s.getAttribute('style') || '').includes('inset') : false;
+}, k);
+
+const before = await ops();
+
+// Hover working segment → working stays bright, others dim.
+await page.locator('[data-pressure-seg="working"]').hover();
+await page.waitForTimeout(250);
+const onHoverWorking = await ops();
+const hoverPinShadowBefore = await segShadow('working');
+
+// Mouseleave → baseline restores (no pin yet).
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterLeave = await ops();
+
+// Click to pin working — segment gets inset shadow.
+await page.locator('[data-pressure-seg="working"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterPin    = await ops();
+const pinShadow   = await segShadow('working');
+
+// Hover idle while working is pinned — hoveredStatus overrides for the
+// duration of the hover. idle stays bright, working dims (transient).
+await page.locator('[data-pressure-seg="idle"]').hover();
+await page.waitForTimeout(250);
+const onHoverIdle = await ops();
+
+// Mouseleave → falls back to working pin (NOT cleared).
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterLeaveIdle = await ops();
+
+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) && before.off <= 0.6,
+  hoverWorking_workerStays:  bright(onHoverWorking.wkr),
+  hoverWorking_idlesDim:     dim(onHoverWorking.idl1) && dim(onHoverWorking.idl2),
+  hoverWorking_offDim:       dim(onHoverWorking.off),
+  hoverWorking_noPinYet:    !hoverPinShadowBefore,
+  leave_restoresBaseline:    bright(afterLeave.wkr) && bright(afterLeave.idl1) && bright(afterLeave.idl2),
+  pin_workerStays:           bright(afterPin.wkr),
+  pin_idlesDim:              dim(afterPin.idl1) && dim(afterPin.idl2),
+  pin_shadowRendered:        pinShadow,
+  hoverIdle_transient:       bright(onHoverIdle.idl1) && bright(onHoverIdle.idl2) && dim(onHoverIdle.wkr),
+  leaveIdle_pinPersists:     bright(afterLeaveIdle.wkr) && dim(afterLeaveIdle.idl1) && dim(afterLeaveIdle.idl2),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pressure-hover:`, JSON.stringify(results),
+  `\n  before=`,          before,
+  `\n  onHoverWorking=`,  onHoverWorking,
+  `\n  afterPin=`,        afterPin,
+  `\n  onHoverIdle=`,     onHoverIdle,
+  `\n  afterLeaveIdle=`,  afterLeaveIdle);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,119 @@
+/* Round 60 verification: each pressure-bar segment toggles a sticky
+ * status filter. Click "working" → all non-working nodes dim, working
+ * ones stay. Click again → release. Pin and the R55 legend hover feed
+ * the same node-opacity branch via `activeStatus = hoveredStatus ??
+ * pinnedStatus`, so hover transiently overrides without nuking the pin.
+ *
+ * Sessions:
+ *   wkr   — working
+ *   idl1  — idle
+ *   idl2  — idle
+ *   off   — offline
+ */
+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');
+  } 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();
+
+const bright = (v) => v != null && v >= 0.55;
+const dim    = (v) => v != null && v < 0.4;
+
+// Click the WORKING segment.
+const workingSeg = page.locator('[data-pressure-seg="working"]').first();
+const workingExists = await workingSeg.count() > 0;
+if (!workingExists) { console.log('❌ pressure segment[working] not found'); process.exit(1); }
+await workingSeg.click({ force: true });
+await page.waitForTimeout(250);
+const afterPin = await opacities();
+
+// Pin should persist past mouse moving away.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterMouseMove = await opacities();
+
+// Click again to release. R79 added hover-affordances on the working
+// + online chips, so the click locator's mouse path can light a
+// transient hoveredStatus en route to the pressure segment. Mouse-move
+// to a neutral spot after the release click so we observe pin-only
+// state (same gotcha R61's test documented inline).
+await workingSeg.click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterRelease = await opacities();
+
+// Repeat for offline segment.
+const offlineSeg = page.locator('[data-pressure-seg="offline"]').first();
+await offlineSeg.click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterOfflinePin = await opacities();
+await offlineSeg.click({ force: true });
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterOfflineRelease = await opacities();
+
+await browser.close();
+
+const results = {
+  before_baseline:           bright(before.wkr) && bright(before.idl1),
+  working_pinKeepsWorking:   bright(afterPin.wkr),
+  working_pinDimsIdle:       dim(afterPin.idl1) && dim(afterPin.idl2),
+  working_pinDimsOffline:    dim(afterPin.off),
+  working_pinSurvivesMouse:  bright(afterMouseMove.wkr) && dim(afterMouseMove.idl1),
+  working_releaseRestoresAll: bright(afterRelease.wkr) && bright(afterRelease.idl1),
+  offline_pinKeepsOffline:   bright(afterOfflinePin.off),   // base offline 0.6 reads as bright (>=0.55)
+  offline_pinDimsOnline:     dim(afterOfflinePin.wkr) && dim(afterOfflinePin.idl1),
+  offline_releaseRestoresAll: bright(afterOfflineRelease.wkr),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pressure pin:`, JSON.stringify(results),
+  `\n  before=`, before,
+  `\n  afterPin=`, afterPin,
+  `\n  afterMouseMove=`, afterMouseMove,
+  `\n  afterRelease=`, afterRelease,
+  `\n  afterOfflinePin=`, afterOfflinePin,
+  `\n  afterOfflineRelease=`, afterOfflineRelease);
+process.exit(ok ? 0 : 1);