@sleep2agi/agent-network-dashboard 0.4.6-preview.33 → 0.4.6-preview.331

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);

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

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

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

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