@sleep2agi/agent-network-dashboard 0.5.1-preview.1 → 0.5.1-preview.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.1-preview.1",
+  "version": "0.5.1-preview.100",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

package/scripts/topo-active-links-chip-hover-lift-test.mjs

@@ -0,0 +1,93 @@
+/* Round 399 verification: active-links chip closes the 3-chip
+ * chip-row by extending R398 hover translate-y-px lift onto the
+ * third (rightmost) chip. Gated to clickable variant (flowLinks
+ * > 0) so empty active-links chip stays planted.
+ *
+ * Contract:
+ *   - With seeded messages (active flow links present):
+ *     * data-chip-hover-lift === 'true'
+ *     * data-active-links-clickable === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *     * className includes 'transition-transform' + 'transform-gpu'
+ *   - Pre-R399 invariants preserved:
+ *     * R232 tabular-nums + R313 font-medium + R266 chip-focus
+ *     * R193 hover:bg-cyan-500/10 + hover:text-cyan-200 + hover:border-cyan-500/30
+ *     * inline transition list still covers color/bg/border/opacity
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 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 {}
+});
+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',  'idle'),
+    mk('gamma', 'idle'),
+  ] } });
+});
+// Seed messages so flowLinks > 0 → chip becomes clickable
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+    { id: 'm2', from_alias: 'alpha', to_alias: 'gamma', content: 'pong', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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-active-links-chip]', { timeout: 15000 });
+await page.waitForTimeout(600);
+
+const probe = await page.evaluate(() => {
+  const chip = document.querySelector('[data-active-links-chip]');
+  return chip ? {
+    className: chip.className,
+    lift:      chip.getAttribute('data-chip-hover-lift'),
+    clickable: chip.getAttribute('data-active-links-clickable'),
+    flowCount: chip.getAttribute('data-active-links-flow-count'),
+  } : null;
+});
+
+await browser.close();
+
+const cls = probe?.className || '';
+const results = {
+  // Setup: active-links chip mounted with flow > 0
+  chip_mounted:                 !!probe,
+  flow_count_present:           parseInt(probe?.flowCount || '0', 10) > 0,
+  // R399 lift attrs + className tokens (clickable variant)
+  lift_true:                    probe?.lift === 'true',
+  clickable_true:               probe?.clickable === 'true',
+  has_hover_translate:          cls.includes('hover:-translate-y-px'),
+  has_transition_transform:     cls.includes('transition-transform'),
+  has_transform_gpu:            cls.includes('transform-gpu'),
+  // Pre-R399 invariants
+  has_tabular_nums:             cls.includes('tabular-nums'),
+  has_font_medium:              cls.includes('font-medium'),
+  has_chip_focus:               cls.includes('anet-topo-chip-focus'),
+  has_hover_cyan_bg:            cls.includes('hover:bg-cyan-500/10'),  // R193 invariant
+  has_hover_cyan_text:          cls.includes('hover:text-cyan-200'),
+  has_hover_cyan_border:        cls.includes('hover:border-cyan-500/30'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links chip hover lift translateY(-1px):`, JSON.stringify(results),
+  '\n  className:', cls,
+  '\n  flowCount:', probe?.flowCount, '/ lift:', probe?.lift, '/ clickable:', probe?.clickable);
+process.exit(ok ? 0 : 1);

package/scripts/topo-active-links-freshness-color-test.mjs

@@ -0,0 +1,86 @@
+/* Round 342 verification: active-links chip freshness suffix wrapper
+ * lifts text-gray-500 → text-gray-400 (R317 subordinate-text-lift
+ * family). Affects the literal "last {rel}" text; the freshness dot
+ * keeps its own inline color via `style={{color: dotColor}}`.
+ *
+ * Contract:
+ *   - The wrapper span containing [data-active-links-freshness-dot]
+ *     has className containing 'text-gray-400' (not 'text-gray-500').
+ *   - Wrapper textContent includes 'last' (the trailing literal).
+ *   - Freshness dot keeps its own color (not the wrapper's).
+ *   - R341 pin-intersection " pins" unit + R317/R318 chrome
+ *     regressions intact.
+ *   - R294 pulse absent.
+ */
+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'),
+  ] } });
+});
+// One recent message → active-links chip's freshness suffix renders.
+const now = Date.now();
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+] } }));
+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-active-links-freshness-dot]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const dot = document.querySelector('[data-active-links-freshness-dot]');
+  const wrapper = dot?.parentElement || null;
+  return {
+    wrapperClass:      wrapper?.className ?? '',
+    wrapperText:       wrapper?.textContent ?? null,
+    dotInlineColor:    dot?.getAttribute('style') ?? '',
+    // R341 regression.
+    pinIntersectionUnit: document.querySelector('[data-pin-intersection-unit]')?.className ?? '',
+    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 results = {
+  wrapper_has_gray_400:        /text-gray-400/.test(probe.wrapperClass),
+  wrapper_no_gray_500:         !/text-gray-500/.test(probe.wrapperClass),
+  wrapper_text_last:           /\blast\b/.test(probe.wrapperText || ''),
+  dot_has_inline_color:        /color:/.test(probe.dotInlineColor),
+  // R341 regression — only triggers when a pin is active. Test
+  // doesn't click filters, so accept null OR opacity-70.
+  r341_pin_unit_or_absent:     probe.pinIntersectionUnit === '' ||
+                               /opacity-70/.test(probe.pinIntersectionUnit),
+  // 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 ? '✅' : '❌'} active-links freshness wrapper gray-400:`, JSON.stringify(results),
+  '\n  wrapper class:', probe.wrapperClass,
+  '\n  wrapper text:',  JSON.stringify(probe.wrapperText));
+process.exit(ok ? 0 : 1);

package/scripts/topo-chip-digit-fontweight-test.mjs

@@ -0,0 +1,105 @@
+/* Round 362 verification: 3 chip-row chip digits (working / online /
+ * active-links) wrap their digit in a font-semibold span, lifting it
+ * fw 500 (chip-row R313 baseline) → fw 600 within each chip. The
+ * outer chip className keeps font-medium so the chip's overall data-
+ * weight stays consistent with the R313 family; the digit override
+ * adds a within-chip tier:
+ *   digit  fw 600 + full opacity
+ *   unit   fw 500 + R338 opacity-70
+ *
+ * Joins the R333-R341 chip-internal-hierarchy arc at the chip-count
+ * scope (8th surface family).
+ *
+ * Contract (cyber, fresh fixture):
+ *   - Each of the 3 chip digit spans has data-{name}-chip-digit attr.
+ *   - Computed fontWeight of the digit span === '600'.
+ *   - The unit sibling span still has opacity 0.7 + data-{name}-chip-
+ *     unit attr (R338 invariants).
+ *   - Parent chip retains font-medium (R313 baseline).
+ */
+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('a'), mk('b'), mk('c') ] } });
+});
+const now = Date.now();
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { id: 'm1', from_alias: 'a', to_alias: 'b', content: 'ping',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+] } }));
+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-digit]',      { timeout: 15000 });
+await page.waitForSelector('[data-online-chip-digit]',       { timeout: 5000 });
+await page.waitForSelector('[data-active-links-chip-digit]', { timeout: 5000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  function readChip(digitSel, unitSel, parentSel) {
+    const digit  = document.querySelector(digitSel);
+    const unit   = document.querySelector(unitSel);
+    const parent = document.querySelector(parentSel);
+    return {
+      digitFw:    digit ? getComputedStyle(digit).fontWeight : null,
+      digitText:  digit?.textContent ?? null,
+      unitOp:     unit ? getComputedStyle(unit).opacity : null,
+      unitPresent: !!unit,
+      parentCls:  parent?.getAttribute('class') ?? null,
+    };
+  }
+  return {
+    working:     readChip('[data-working-chip-digit]',      '[data-working-chip-unit]',      '[data-working-chip]'),
+    online:      readChip('[data-online-chip-digit]',       '[data-online-chip-unit]',       '[data-online-chip]'),
+    activeLinks: readChip('[data-active-links-chip-digit]', '[data-active-links-chip-unit]', '[data-active-links-chip]'),
+  };
+});
+
+await browser.close();
+
+const isFw600 = (v) => v === '600' || v === 'bold';   // Tailwind font-semibold === 600
+const approxEq = (a, b, tol = 0.02) => {
+  const x = parseFloat(a); const y = parseFloat(b);
+  return Number.isFinite(x) && Number.isFinite(y) && Math.abs(x - y) <= tol;
+};
+
+const checkChip = (chip) => ({
+  digit_fw_600:    isFw600(chip.digitFw),
+  unit_op_0_7:     approxEq(chip.unitOp, 0.7),     // R338
+  unit_present:    chip.unitPresent,
+  parent_medium:   /font-medium/.test(chip.parentCls || ''),  // R313
+});
+
+const results = {
+  working_digit_fw_600:    checkChip(probe.working).digit_fw_600,
+  working_unit_op_0_7:     checkChip(probe.working).unit_op_0_7,
+  working_parent_medium:   checkChip(probe.working).parent_medium,
+  online_digit_fw_600:     checkChip(probe.online).digit_fw_600,
+  online_unit_op_0_7:      checkChip(probe.online).unit_op_0_7,
+  online_parent_medium:    checkChip(probe.online).parent_medium,
+  active_digit_fw_600:     checkChip(probe.activeLinks).digit_fw_600,
+  active_unit_op_0_7:      checkChip(probe.activeLinks).unit_op_0_7,
+  active_parent_medium:    checkChip(probe.activeLinks).parent_medium,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip-row digit fontWeight 500 → 600:`, JSON.stringify(results),
+  '\n  probe:', JSON.stringify(probe, null, 2));
+process.exit(ok ? 0 : 1);

package/scripts/topo-chip-digit-hover-bold-test.mjs

@@ -0,0 +1,94 @@
+/* Round 416 verification (100-round milestone): chip-row chip digits
+ * gain group-hover:font-bold. Extends chip-internal-hierarchy with a
+ * hover-state weight lift — digits lift from fw=600 (R362 font-semibold)
+ * to fw=700 (font-bold) on chip hover, matching the R414 unit-brighten
+ * gesture at the same scope.
+ *
+ * Contract:
+ *   - 3 chip digits with class tokens:
+ *     * font-semibold (rest)
+ *     * group-hover:font-bold
+ *     * transition-[font-weight] duration-200
+ *   - Parent chip className has `group` (R414 invariant)
+ *   - Pre-R416 invariants:
+ *     * data-*-chip-digit attrs present
+ *     * unit spans group-hover:opacity-100 (R414 invariant)
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 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 {}
+});
+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',  'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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-digit]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const read = (selector) => {
+    const el = document.querySelector(selector);
+    return el ? {
+      className: el.className,
+      parentHasGroup: el.parentElement?.className.includes('group') === true,
+    } : null;
+  };
+  return {
+    working:     read('[data-working-chip-digit]'),
+    online:      read('[data-online-chip-digit]'),
+    activeLinks: read('[data-active-links-chip-digit]'),
+  };
+});
+
+await browser.close();
+
+const check = (digit) => digit &&
+  digit.className.includes('font-semibold') &&
+  digit.className.includes('group-hover:font-bold') &&
+  digit.className.includes('transition-[font-weight]') &&
+  digit.className.includes('duration-200') &&
+  digit.parentHasGroup;
+
+const results = {
+  // All 3 chip digits mounted
+  working_digit_mounted:     !!probe.working,
+  online_digit_mounted:      !!probe.online,
+  active_digit_mounted:      !!probe.activeLinks,
+  // Each has all R416 + R414 invariants
+  working_full_set:          check(probe.working),
+  online_full_set:           check(probe.online),
+  active_full_set:           check(probe.activeLinks),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip-row chip digit group-hover:font-bold (R416 milestone):`, JSON.stringify(results),
+  '\n  working:', probe.working?.className,
+  '\n  online: ', probe.online?.className,
+  '\n  active: ', probe.activeLinks?.className);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chip-row-group-hover-brighten-test.mjs

@@ -0,0 +1,107 @@
+/* Round 414 verification: chip-row chip unit spans gain group-hover-
+ * brighten — sibling to R355 filter pill inner-span hover-brighten.
+ * Chip-row 3 chips (working / online / active-links) get `group`
+ * parent + inner unit span `group-hover:opacity-100`.
+ *
+ * Contract:
+ *   - 3 chips with data-chip-group-hover-brighten="true"
+ *   - Each chip className includes `group`
+ *   - Each chip's unit span (data-*-chip-unit) className includes:
+ *     * opacity-70
+ *     * transition-opacity
+ *     * group-hover:opacity-100
+ *   - Pre-R414 invariants preserved:
+ *     * R398/R399 hover:-translate-y-px on clickable variant
+ *     * R232 tabular-nums, font-medium
+ *     * R266 anet-topo-chip-focus
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 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 {}
+});
+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',  'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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-chip-group-hover-brighten="true"]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const chips = Array.from(document.querySelectorAll('[data-chip-group-hover-brighten="true"]'));
+  const read = (chip) => {
+    const unit = chip.querySelector('[data-working-chip-unit], [data-online-chip-unit], [data-active-links-chip-unit]');
+    return {
+      chipClass: chip.className,
+      unitClass: unit?.className ?? null,
+      chipAttr:  chip.getAttribute('data-working-chip') !== null ? 'working'
+              : chip.getAttribute('data-online-chip') !== null ? 'online'
+              : chip.getAttribute('data-active-links-chip') !== null ? 'active-links'
+              : 'unknown',
+    };
+  };
+  return {
+    count: chips.length,
+    chips: chips.map(read),
+  };
+});
+
+await browser.close();
+
+const wc = probe.chips.find((c) => c.chipAttr === 'working');
+const oc = probe.chips.find((c) => c.chipAttr === 'online');
+const ac = probe.chips.find((c) => c.chipAttr === 'active-links');
+
+const results = {
+  // 3 chips mounted
+  three_chips:                  probe.count === 3,
+  // working chip
+  working_has_group:            wc?.chipClass.includes('group') === true,
+  working_unit_brighten:        wc?.unitClass?.includes('group-hover:opacity-100') === true,
+  working_unit_transition:      wc?.unitClass?.includes('transition-opacity') === true,
+  working_unit_opacity_70:      wc?.unitClass?.includes('opacity-70') === true,
+  // online chip
+  online_has_group:             oc?.chipClass.includes('group') === true,
+  online_unit_brighten:         oc?.unitClass?.includes('group-hover:opacity-100') === true,
+  online_unit_transition:       oc?.unitClass?.includes('transition-opacity') === true,
+  // active-links chip
+  active_has_group:             ac?.chipClass.includes('group') === true,
+  active_unit_brighten:         ac?.unitClass?.includes('group-hover:opacity-100') === true,
+  active_unit_transition:       ac?.unitClass?.includes('transition-opacity') === true,
+  // Pre-R414 invariants
+  working_chip_focus:           wc?.chipClass.includes('anet-topo-chip-focus') === true,
+  online_tabular_nums:          oc?.chipClass.includes('tabular-nums') === true,
+  active_font_medium:           ac?.chipClass.includes('font-medium') === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip-row chip group-hover-brighten:`, JSON.stringify(results),
+  '\n  working:', wc,
+  '\n  online: ', oc,
+  '\n  active: ', ac);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chip-row-hover-lift-test.mjs

@@ -0,0 +1,95 @@
+/* Round 398 verification: chip-row chips (working / online) gain
+ * hover translateY(-1px) lift on clickable variant only. Extends
+ * R397's filter-pill lift to the static header chips, gated to
+ * the chip's clickable role so empty chips stay planted.
+ *
+ * Contract:
+ *   - Populated working chip (workingCount > 0):
+ *     * data-chip-hover-lift === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *     * className includes 'transition-transform' + 'transform-gpu'
+ *   - Populated online chip (onlineNodes.length > 0):
+ *     * data-chip-hover-lift === 'true'
+ *     * className includes 'hover:-translate-y-px'
+ *   - Pre-R398 invariants preserved:
+ *     * transition-colors duration-200 still present
+ *     * R201 hover:bg + hover:border tokens still present
+ *     * anet-topo-chip-focus + tabular-nums + font-medium present
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 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 {}
+});
+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',  'idle'),
+    mk('gamma', 'idle'),
+  ] } });
+});
+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(400);
+
+const probe = await page.evaluate(() => {
+  const work = document.querySelector('[data-working-chip]');
+  const online = document.querySelector('[data-online-chip]');
+  return {
+    work: work ? {
+      className: work.className,
+      lift:      work.getAttribute('data-chip-hover-lift'),
+      clickable: work.getAttribute('data-working-chip-clickable'),
+    } : null,
+    online: online ? {
+      className: online.className,
+      lift:      online.getAttribute('data-chip-hover-lift'),
+      clickable: online.getAttribute('data-online-chip-clickable'),
+    } : null,
+  };
+});
+
+await browser.close();
+
+const wc = probe.work?.className || '';
+const oc = probe.online?.className || '';
+const results = {
+  // working chip: clickable + R398 lift attrs + className tokens
+  work_lift_true:               probe.work?.lift === 'true',
+  work_clickable_true:          probe.work?.clickable === 'true',
+  work_has_hover_translate:     wc.includes('hover:-translate-y-px'),
+  work_has_transition_transform: wc.includes('transition-transform'),
+  work_has_transform_gpu:       wc.includes('transform-gpu'),
+  work_has_transition_colors:   wc.includes('transition-colors'),  // R201 preserved
+  work_has_hover_bg:            wc.includes('hover:bg-green-500/15'),  // R201 preserved
+  work_has_chip_focus:          wc.includes('anet-topo-chip-focus'),
+  // online chip mirror
+  online_lift_true:             probe.online?.lift === 'true',
+  online_clickable_true:        probe.online?.clickable === 'true',
+  online_has_hover_translate:   oc.includes('hover:-translate-y-px'),
+  online_has_transition_transform: oc.includes('transition-transform'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip-row chips hover lift translateY(-1px):`, JSON.stringify(results),
+  '\n  workingClass:', wc,
+  '\n  onlineClass: ', oc);
+process.exit(ok ? 0 : 1);