@sleep2agi/agent-network-dashboard 0.4.6-preview.41 → 0.4.6-preview.415

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-prefix-opacity-test.mjs

@@ -0,0 +1,107 @@
+/* Round 335 verification: filter pin prefix labels (`filter:` /
+ * `match:`) gain opacity-70 so the prefix recedes and the value
+ * text reads as primary content. Sibling to R333 vendor count
+ * suffix subordinate-lift family — recurring pattern: small
+ * "label" spans demote to opacity-70 while value text stays
+ * full-opacity, creating clear label-vs-value hierarchy inside
+ * the same chip.
+ *
+ * Five prefix surfaces share the `className="hidden sm:inline"`
+ * pattern (R335 replace_all):
+ *   - status pin pill [data-filter-prefix]
+ *   - group pin pill  [data-filter-prefix]
+ *   - vendor pin pill [data-filter-prefix]
+ *   - edge pin pill   [data-filter-prefix]
+ *   - intersection chip [data-pin-intersection-prefix]
+ *
+ * Contract:
+ *   - Activate a status pin (click working chip) so the status
+ *     filter pin pill mounts with its `filter:` prefix visible.
+ *   - The [data-filter-prefix] span has className containing
+ *     'opacity-70'.
+ *   - Computed opacity reads 0.7.
+ *   - R333 vendor count suffix still gray-400 + tabular.
+ *   - R317/R318/R294 chrome + pulse regressions intact.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias, model) => ({
+    alias, status: 'working', model, runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  // 3 vendor types so the vendor letter chip row also renders (for
+  // R333 vendor count suffix regression check).
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4'),
+    mk('beta',  'gpt-4o'),
+    mk('gamma', 'internlm/internlm2'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-working-chip]', { timeout: 15000 });
+await page.waitForTimeout(200);
+
+// Pin the working status to mount the status filter pill (which
+// contains the `filter:` prefix).
+await page.click('[data-working-chip]', { delay: 50 }).catch(() => {});
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const prefixes = Array.from(document.querySelectorAll('[data-filter-prefix]'));
+  const intPrefix = document.querySelector('[data-pin-intersection-prefix]');
+  const vendorSuffix = document.querySelector('[data-vendor-letter-count-suffix]');
+  return {
+    prefixCount:           prefixes.length,
+    prefixClasses:         prefixes.map(p => p.className),
+    prefixOpacities:       prefixes.map(p => getComputedStyle(p).opacity),
+    intPrefixClass:        intPrefix?.className ?? null,
+    intPrefixOpacity:      intPrefix ? getComputedStyle(intPrefix).opacity : null,
+    vendorSuffixClass:     vendorSuffix?.className ?? '',
+    vendorSuffixTab:       vendorSuffix ? getComputedStyle(vendorSuffix).fontVariantNumeric : null,
+    layoutInactiveCls:     document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
+    layoutActiveCls:       document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
+    pulseCount:            document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const hasOpacity70 = (cls) => /opacity-70/.test(cls || '');
+const opacityClose = (val) => Math.abs(parseFloat(val) - 0.7) < 0.01;
+
+const results = {
+  prefix_at_least_one:        probe.prefixCount >= 1,
+  all_prefix_have_opacity70:  probe.prefixClasses.every(hasOpacity70),
+  all_prefix_computed_0_7:    probe.prefixOpacities.every(opacityClose),
+  // Pin-intersection chip only mounts when ≥2 dims pinned, which we
+  // didn't trigger here (only one click). Accept null OR opacity-70.
+  intersection_prefix_ok:     probe.intPrefixClass === null || hasOpacity70(probe.intPrefixClass),
+  // R333 vendor count suffix regression.
+  r333_vendor_suffix_gray400: probe.vendorSuffixClass.includes('text-gray-400'),
+  r333_vendor_suffix_tabular: /tabular-nums/.test(probe.vendorSuffixTab || ''),
+  // R317 / R318 chrome regression.
+  r317_inactive_gray_400:     probe.layoutInactiveCls.includes('text-gray-400'),
+  r318_active_font_medium:    probe.layoutActiveCls.includes('font-medium'),
+  r294_pulse_absent:          probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} prefix opacity-70:`, JSON.stringify(results),
+  '\n  prefix opacities:', probe.prefixOpacities);
+process.exit(ok ? 0 : 1);

package/scripts/topo-prepublish-guard-test.mjs

@@ -0,0 +1,95 @@
+/* Round 238 verification: prepublishOnly is now a guard-only check
+ * instead of a destructive rebuild. This closes the chunk-500 root
+ * cause documented since R224.
+ *
+ * Pre-R238 prepublishOnly was 'rm -rf .next && npm run build', which:
+ *   1. Deleted .next/ on disk during npm publish.
+ *   2. Rebuilt with fresh content-hashed chunk filenames.
+ *   3. Left the already-running next-server process with a stale
+ *      in-memory manifest pointing at chunks that no longer existed
+ *      on disk → ENOENT → 500 on lazy chunk fetch.
+ *   4. Required a manual 'restart dash AFTER publish' step every
+ *      round as a workaround.
+ *
+ * Post-R238 prepublishOnly is a guard:
+ *   '[ -f .next/BUILD_ID ] || (echo ... && exit 1)'
+ *
+ *   - If .next/BUILD_ID exists, succeed silently — publish proceeds
+ *     with whatever .next/ is on disk (intentional: pipeline order
+ *     is now bump → build → restart → test → publish, so the build
+ *     already embeds the new version BEFORE publish).
+ *   - If .next/BUILD_ID is missing, fail loudly with the R224
+ *     reference so the developer knows what to do.
+ *
+ * No rm-rf-rebuild = running server's manifest stays consistent
+ * with disk chunks through the publish step. No post-publish
+ * restart needed.
+ *
+ * Test verifies:
+ *   1. package.json scripts.prepublishOnly contains no 'rm' command
+ *      (destructive form removed)
+ *   2. package.json scripts.prepublishOnly contains no 'npm run
+ *      build' (rebuild on publish removed)
+ *   3. The guard form is present (BUILD_ID check)
+ *   4. Running `npm run prepublishOnly` exits 0 when .next/BUILD_ID
+ *      exists, leaving .next/ untouched (mtime + content hash stable)
+ */
+import { readFileSync, statSync } from 'node:fs';
+import { execSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
+
+const pkg = JSON.parse(readFileSync('/home/vansin/agent-network-dashboard/package.json', 'utf8'));
+const hookSrc = pkg.scripts?.prepublishOnly || '';
+
+// Hash + mtime of .next/BUILD_ID before running the hook
+const buildIdPath = '/home/vansin/agent-network-dashboard/.next/BUILD_ID';
+const before = (() => {
+  try {
+    return {
+      mtime: statSync(buildIdPath).mtimeMs,
+      hash:  createHash('sha256').update(readFileSync(buildIdPath)).digest('hex'),
+    };
+  } catch {
+    return null;
+  }
+})();
+
+// Run the prepublishOnly hook explicitly via npm run
+let exitCode = -1;
+try {
+  execSync('npm run prepublishOnly', {
+    cwd: '/home/vansin/agent-network-dashboard',
+    stdio: 'pipe',
+  });
+  exitCode = 0;
+} catch (e) {
+  exitCode = e.status ?? -1;
+}
+
+const after = (() => {
+  try {
+    return {
+      mtime: statSync(buildIdPath).mtimeMs,
+      hash:  createHash('sha256').update(readFileSync(buildIdPath)).digest('hex'),
+    };
+  } catch {
+    return null;
+  }
+})();
+
+const results = {
+  hook_present:           typeof hookSrc === 'string' && hookSrc.length > 0,
+  no_rm_command:          !/\brm\b/.test(hookSrc),
+  has_build_id_check:     /\.next\/BUILD_ID/.test(hookSrc),
+  has_exit_path:          /exit\s+1/.test(hookSrc),
+  hook_exits_zero:        exitCode === 0,
+  build_id_mtime_stable:  before !== null && after !== null && before.mtime === after.mtime,
+  build_id_hash_stable:   before !== null && after !== null && before.hash === after.hash,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} prepublishOnly guard:`, JSON.stringify(results),
+  '\n  hookSrc:', hookSrc,
+  '\n  exitCode:', exitCode,
+  '\n  before:', before,
+  '\n  after: ', after);
+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);