@sleep2agi/agent-network-dashboard 0.5.1-preview.4 → 0.5.1-preview.41

package/package.json

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

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-chrome-segmented-radius-test.mjs

@@ -0,0 +1,100 @@
+/* Round 376 verification: nodeSize + zoom segmented control wrappers
+ * rounded-md → rounded-lg (6 → 8 px). Sibling polish to R375 Layout-
+ * toggle wrapper — three chrome-strip segmented controls now all
+ * share rounded-lg at the wrapper tier:
+ *   R375 Layout-toggle wrapper  rounded-lg  8 px
+ *   R376 nodeSize wrapper       rounded-lg  8 px (this round)
+ *   R376 zoom wrapper           rounded-lg  8 px (this round)
+ *
+ * Individual atomic chrome buttons (reset, fullscreen) keep rounded-
+ * md (6 px) as their own atomic-button tier — chrome strip now
+ * expresses a two-tier hierarchy: 'segmented control container'
+ * (rounded-lg) vs 'standalone button' (rounded-md).
+ *
+ * Contract:
+ *   - [data-topo-chrome-nodesize-radius] computed border-radius '8px'.
+ *   - data-topo-chrome-nodesize-radius === 'rounded-lg'.
+ *   - [data-topo-chrome-zoom-wrapper-radius] computed border-radius '8px'.
+ *   - data-topo-chrome-zoom-wrapper-radius === 'rounded-lg'.
+ *   - Pre-R376 invariants: border 1px + flex display + overflow:hidden
+ *     + R263 background-color/border-color transition preserved on
+ *     each wrapper.
+ *   - Atomic reset + fullscreen buttons still have border-radius 6px
+ *     (rounded-md, untouched).
+ */
+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') ] } });
+});
+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-topo-chrome-nodesize-radius]',     { timeout: 15000 });
+await page.waitForSelector('[data-topo-chrome-zoom-wrapper-radius]', { timeout: 5000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const nodesize = document.querySelector('[data-topo-chrome-nodesize-radius]');
+  const zoom     = document.querySelector('[data-topo-chrome-zoom-wrapper-radius]');
+  const reset    = document.querySelector('[data-topo-chrome-reset]');
+  const fs       = document.querySelector('[data-topo-chrome-fullscreen]');
+  const ncs      = nodesize ? getComputedStyle(nodesize) : null;
+  const zcs      = zoom     ? getComputedStyle(zoom)     : null;
+  const rcs      = reset    ? getComputedStyle(reset)    : null;
+  const fcs      = fs       ? getComputedStyle(fs)       : null;
+  return {
+    nodesizeRadius:    ncs?.borderRadius ?? null,
+    nodesizeData:      nodesize?.getAttribute('data-topo-chrome-nodesize-radius') ?? null,
+    nodesizeBorderW:   ncs?.borderWidth ?? null,
+    nodesizeTrans:     ncs?.transition ?? null,
+    zoomRadius:        zcs?.borderRadius ?? null,
+    zoomData:          zoom?.getAttribute('data-topo-chrome-zoom-wrapper-radius') ?? null,
+    zoomBorderW:       zcs?.borderWidth ?? null,
+    zoomTrans:         zcs?.transition ?? null,
+    resetRadius:       rcs?.borderRadius ?? null,
+    fullscreenRadius:  fcs?.borderRadius ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  nodesize_radius_8px:    probe.nodesizeRadius === '8px',           // rounded-lg
+  nodesize_data_lg:       probe.nodesizeData === 'rounded-lg',
+  nodesize_border_1px:    probe.nodesizeBorderW === '1px',
+  nodesize_trans_border:  hasTrans(probe.nodesizeTrans, 'border-color'),  // R263 / R268
+  zoom_radius_8px:        probe.zoomRadius === '8px',
+  zoom_data_lg:           probe.zoomData === 'rounded-lg',
+  zoom_border_1px:        probe.zoomBorderW === '1px',
+  zoom_trans_border:      hasTrans(probe.zoomTrans, 'border-color'),
+  // Atomic chrome buttons stay rounded-md (6 px) — invariant.
+  reset_still_md:         probe.resetRadius === '6px',
+  fullscreen_still_md:    probe.fullscreenRadius === '6px',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chrome segmented wrappers rounded-md → rounded-lg:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-badge-fontsize-test.mjs

@@ -0,0 +1,90 @@
+/* Round 361 verification: edge midpoint badge text fontSize 10 → 11.
+ * Sibling visual-weight bump to R360 hub digit 11 → 12. The badge
+ * digit is the per-edge equivalent of the hub digit — a high-info
+ * scalar (link.count) at a stable canvas position. Pre-R361 the
+ * digit at fontSize=10 was readable but small against the r=9 /
+ * 18-px badge envelope; fontSize=11 nudges the glyph ~10 % bigger
+ * (bbox ~7×10 px from ~6×9 px). Still well inside the r=9 idle +
+ * r=10.5 hover/pin (R164) envelope.
+ *
+ * Contract:
+ *   - Edge badge text font-size attr === '11'.
+ *   - data-edge-badge-text-font-size === '11'.
+ *   - Pre-R361 invariants preserved:
+ *     * R224 tabular-nums fontVariantNumeric
+ *     * R220 letter-spacing 0px → 0.4px on pin/hot
+ *     * fontWeight=700 + fontFamily=monospace
+ *     * textAnchor="middle"
+ *     * data-edge-badge-text={link.key} surface attr
+ *
+ * Test mounts the dashboard with 1 message → 1 flow link → 1 badge.
+ */
+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') ] } });
+});
+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-edge-badge-text]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const t = document.querySelector('[data-edge-badge-text]');
+  const cs = t ? getComputedStyle(t) : null;
+  return {
+    fontSizeAttr:    t?.getAttribute('font-size') ?? null,
+    fontSizeData:    t?.getAttribute('data-edge-badge-text-font-size') ?? null,
+    fontWeight:      t?.getAttribute('font-weight') ?? null,
+    fontFamily:      t?.getAttribute('font-family') ?? null,
+    textAnchor:      t?.getAttribute('text-anchor') ?? null,
+    linkKey:         t?.getAttribute('data-edge-badge-text') ?? null,
+    pinAttr:         t?.getAttribute('data-edge-badge-text-pin') ?? null,
+    fontVariant:     cs?.fontVariantNumeric ?? null,
+    letterSpacing:   cs?.letterSpacing ?? null,
+  };
+});
+
+await browser.close();
+
+const isRestLs = (v) => v === 'normal' || v === '0px' || v === '0' || v === null;
+
+const results = {
+  font_size_attr_11:    probe.fontSizeAttr === '11',
+  data_font_size_11:    probe.fontSizeData === '11',
+  font_weight_700:      probe.fontWeight === '700',
+  font_family_mono:     /monospace/i.test(probe.fontFamily || ''),
+  text_anchor_middle:   probe.textAnchor === 'middle',
+  link_key_present:     (probe.linkKey || '').length > 0,
+  pin_attr_false:       probe.pinAttr === 'false',     // single-flow, not isHot
+  tabular_nums:         /tabular-nums/.test(probe.fontVariant || ''),  // R224
+  rest_letter_spacing:  isRestLs(probe.letterSpacing),                  // R220 rest = 0
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge fontSize 10 → 11:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-badge-opacity-test.mjs

@@ -0,0 +1,80 @@
+/* Round 371 verification: edge-badge cyber opacity 0.82 → 0.85.
+ * Sibling theme-consistency polish to R370 hub hover-ring (cyber
+ * 0.7 → 0.8). R251 designed the badge at 0.82 (cyber) / 0.95 (light)
+ * — a 13 % delta. R371 narrows to 10 %, bringing cyber closer to
+ * light theme's 0.95 floor. Light stays at 0.95.
+ *
+ * Contract (cyber):
+ *   - Edge badge circle opacity attr === '0.85'.
+ *   - data-edge-badge-opacity === '0.85'.
+ *   - Pre-R371 invariants:
+ *     * R164 r=9 (cold)
+ *     * R367 strokeWidth=1.25 (cold rest)
+ *     * R251 transition list (fill + opacity 200ms + r + stroke
+ *       300ms) 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) => ({
+    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') ] } });
+});
+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-edge-badge-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const circle = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  const cs = circle ? getComputedStyle(circle) : null;
+  return {
+    opacityAttr:     circle?.getAttribute('opacity') ?? null,
+    opacityData:     circle?.getAttribute('data-edge-badge-opacity') ?? null,
+    rAttr:           circle?.getAttribute('r') ?? null,
+    strokeWidthAttr: circle?.getAttribute('stroke-width') ?? null,
+    transition:      cs?.transition ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  opacity_attr_0_85:    probe.opacityAttr === '0.85',
+  data_opacity_0_85:    probe.opacityData === '0.85',
+  r_9_cold:             probe.rAttr === '9',                  // R164 cold
+  stroke_width_1_25:    probe.strokeWidthAttr === '1.25',     // R367
+  trans_has_opacity:    hasTrans(probe.transition, 'opacity'),
+  trans_has_fill:       hasTrans(probe.transition, 'fill'),
+  trans_has_strokew:    hasTrans(probe.transition, 'stroke-width'),
+  trans_has_r:          hasTrans(probe.transition, 'r'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge cyber opacity 0.82 → 0.85:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-badge-stroke-test.mjs

@@ -0,0 +1,92 @@
+/* Round 367 verification: edge midpoint badge rest stroke-width
+ * 1 → 1.25. Sibling visual-weight bump (7th canvas anchor in the
+ * R287/R295/R359/R360/R361/R365/R367 family).
+ *
+ * Cold edge badges gain ~25 % stroke presence. Stays clear of the
+ * R51 overlap-test sentinel values (1.5 / 3 reserved for node
+ * strokes — the test selector is gated to g[data-node] ancestors
+ * so this edge-internal circle is invisible to that probe anyway).
+ * R188 transition list 'stroke-width 300ms ease-out' still smoothes
+ * the hot/pin flip — now 1.25 → 2 instead of 1 → 2.
+ *
+ * Contract (cyber, fixture with cold flow):
+ *   - Edge badge circle stroke-width attr === '1.25'.
+ *   - data-edge-badge-stroke-width-rest === '1.25'.
+ *   - data-edge-badge-lifted === 'false' (rest, not hovered/pinned).
+ *   - data-edge-badge-text-pin === 'false' (cold flow, link.count<10).
+ *   - Inline transition contains 'stroke-width' (R188 preserved).
+ *   - Pre-R367 invariants: r=9 (cold, R164), fill=pal.legendBox.fill,
+ *     stroke=pal.flowEdge (cold), opacity 0.82 (cyber).
+ */
+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') ] } });
+});
+// 1 message → 1 cold flow (count=1, well below R129 isHot=10).
+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-edge-badge-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  // Probe the cold/rest edge badge circle (the parent of data-edge-badge-text
+  // is the <g> wrapping circle + text; we want the circle sibling).
+  const circle = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  const cs = circle ? getComputedStyle(circle) : null;
+  // Find the text in the same group to check pin state.
+  const grp = circle?.parentElement;
+  const text = grp?.querySelector('[data-edge-badge-text]');
+  return {
+    strokeWidthAttr: circle?.getAttribute('stroke-width') ?? null,
+    strokeWidthData: circle?.getAttribute('data-edge-badge-stroke-width-rest') ?? null,
+    liftedAttr:      circle?.getAttribute('data-edge-badge-lifted') ?? null,
+    rAttr:           circle?.getAttribute('r') ?? null,
+    opacityAttr:     circle?.getAttribute('opacity') ?? null,
+    transition:      cs?.transition ?? null,
+    pinAttr:         text?.getAttribute('data-edge-badge-text-pin') ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  stroke_width_1_25:    probe.strokeWidthAttr === '1.25',
+  data_stroke_1_25:     probe.strokeWidthData === '1.25',
+  lifted_false_rest:    probe.liftedAttr === 'false',
+  r_9_cold:             probe.rAttr === '9',                   // R164 cold
+  opacity_0_82_cyber:   probe.opacityAttr === '0.82',          // R251 cyber theme
+  trans_has_strokew:    hasTrans(probe.transition, 'stroke-width'),  // R188
+  cold_flow_not_hot:    probe.pinAttr === 'false',             // R220 isHot/isPinned both false
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge stroke 1 → 1.25:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-filter-pill-hover-opacity-test.mjs

@@ -0,0 +1,110 @@
+/* Round 355 verification: filter pin pills (status / group / vendor)
+ * gain pure-CSS group-hover lift of their inner opacity-70 spans
+ * (prefix `filter:` + count `· N`) to 100 % on pill hover. Marks the
+ * whole pill as scan-it interactive without layout reflow (opacity
+ * is paint-only). The R335 prefix-opacity tier + R323 count-opacity
+ * tier are preserved at rest; both ease to 100 % on pill hover.
+ *
+ * Contract (cyber, status filter pinned to 'working'):
+ *   - Rest: filter-prefix + filter-pill-count computed opacity 0.7.
+ *   - Hover pill: both spans computed opacity 1.
+ *   - Inline transition contains 'opacity'.
+ *   - Pre-R355 invariants:
+ *     * R335 prefix span keeps `hidden sm:inline opacity-70` baseline
+ *     * R323 count span keeps `opacity-70 tabular-nums` baseline
+ *     * Pill click-to-clear unchanged (still has onClick / cursor)
+ */
+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');
+    // Pre-pin status='working' so the filter pill mounts on first paint.
+    localStorage.setItem('anet-pinnedStatus', JSON.stringify('working'));
+  } 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') ] } });
+});
+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' });
+// If pre-pin via localStorage didn't take, click the working chip to pin.
+await page.waitForSelector('[data-working-chip]', { timeout: 15000 });
+const pillVisible = await page.locator('[data-active-filter="status"]').count();
+if (pillVisible === 0) {
+  await page.click('[data-working-chip]');
+  await page.waitForSelector('[data-active-filter="status"]', { timeout: 5000 });
+}
+await page.waitForTimeout(300);
+
+const restProbe = await page.evaluate(() => {
+  const pill = document.querySelector('[data-active-filter="status"]');
+  const prefix = pill?.querySelector('[data-filter-prefix]');
+  const count  = pill?.querySelector('[data-filter-pill-count]');
+  return {
+    prefixOpacity:  prefix ? getComputedStyle(prefix).opacity : null,
+    countOpacity:   count  ? getComputedStyle(count).opacity  : null,
+    prefixTrans:    prefix ? getComputedStyle(prefix).transition : null,
+    countTrans:     count  ? getComputedStyle(count).transition  : null,
+    prefixCls:      prefix?.getAttribute('class') ?? null,
+    countCls:       count?.getAttribute('class')  ?? null,
+    pillCursor:     pill ? getComputedStyle(pill).cursor : null,
+  };
+});
+
+// Hover the pill.
+await page.hover('[data-active-filter="status"]');
+await page.waitForTimeout(300);
+const hoverProbe = await page.evaluate(() => {
+  const pill = document.querySelector('[data-active-filter="status"]');
+  const prefix = pill?.querySelector('[data-filter-prefix]');
+  const count  = pill?.querySelector('[data-filter-pill-count]');
+  return {
+    prefixOpacity: prefix ? getComputedStyle(prefix).opacity : null,
+    countOpacity:  count  ? getComputedStyle(count).opacity  : null,
+  };
+});
+
+await browser.close();
+
+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 hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  rest_prefix_0_7:        approxEq(restProbe.prefixOpacity, 0.7),
+  rest_count_0_7:         approxEq(restProbe.countOpacity,  0.7),
+  prefix_trans_has_op:    hasTrans(restProbe.prefixTrans, 'opacity'),
+  count_trans_has_op:     hasTrans(restProbe.countTrans,  'opacity'),
+  prefix_cls_has_op_70:   /opacity-70/.test(restProbe.prefixCls || ''),  // R335
+  count_cls_has_tabular:  /tabular-nums/.test(restProbe.countCls || ''), // R323
+  pill_cursor_pointer:    restProbe.pillCursor === 'pointer',
+  hover_prefix_1:         approxEq(hoverProbe.prefixOpacity, 1),
+  hover_count_1:          approxEq(hoverProbe.countOpacity,  1),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} filter pill hover-opacity lift:`, JSON.stringify(results),
+  '\n  rest: ', restProbe,
+  '\n  hover:', hoverProbe);
+process.exit(ok ? 0 : 1);