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

package/scripts/topo-node-alias-chat-pin-test.mjs

@@ -0,0 +1,95 @@
+/* Round 305 verification: node alias text picks up pin-signature
+ * letterSpacing (0.5px) when chatAlias === session.alias. Extends
+ * the R219 pin-signature family (recent-row text + legend-row text
+ * + edge badge) to the per-node alias label.
+ *
+ * Test gates: with no chat open, alias should have data-node-alias-
+ * chat-target='false'. We cannot easily simulate chat-open without
+ * triggering a click + side-effects; this round's primary contract
+ * is that the data attribute exists, the transition list includes
+ * letter-spacing, and the default (non-chat) state is 0px.
+ *
+ * Contract:
+ *   - All [data-node-alias-text] have data-node-alias-chat-target.
+ *   - Default state attribute is 'false'.
+ *   - computed transition includes letter-spacing at 0.2s.
+ *   - All node alias texts have computed letter-spacing 0px in the
+ *     default state.
+ *   - R304 sub-hint ls=0.15 + R302 main hint ls=0.2 + R301 panel
+ *     titles ls=0.3 + R294 pulse absent 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,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'claude-opus-4'),
+    mk('beta',  'gpt-4o'),
+  ] } });
+});
+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-node-alias-text]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const aliases = [...document.querySelectorAll('[data-node-alias-text]')];
+  const samples = aliases.map(a => ({
+    alias:        a.getAttribute('data-node-alias-text'),
+    chatTarget:   a.getAttribute('data-node-alias-chat-target'),
+    transition:   getComputedStyle(a).transition,
+    letterSpacing: getComputedStyle(a).letterSpacing,
+  }));
+  const subhint = document.querySelector('[data-recent-signal-empty-hint]');
+  const empty   = document.querySelector('[data-recent-signal-empty]');
+  const recentTitle = document.querySelector('[data-recent-panel-title]');
+  const legendTitle = document.querySelector('[data-legend-panel-title]');
+  return {
+    samples,
+    subhintLs:       subhint?.getAttribute('letter-spacing') ?? null,
+    emptyLs:         empty?.getAttribute('letter-spacing') ?? null,
+    recentTitleLs:   recentTitle?.getAttribute('letter-spacing') ?? null,
+    legendTitleLs:   legendTitle?.getAttribute('letter-spacing') ?? null,
+    pulseCount:      document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const hasLsTransition = (s) => /letter-spacing\s+0\.?\d*s|letter-spacing\s+\d+ms/i.test(s || '');
+
+const results = {
+  alias_texts_present:     probe.samples.length >= 2,
+  all_have_chat_target_attr: probe.samples.every(s => s.chatTarget === 'true' || s.chatTarget === 'false'),
+  all_default_not_chat:    probe.samples.every(s => s.chatTarget === 'false'),
+  all_transition_has_ls:   probe.samples.every(s => hasLsTransition(s.transition)),
+  all_default_ls_0:        probe.samples.every(s => parseFloat(s.letterSpacing || '0') === 0 || s.letterSpacing === 'normal' || s.letterSpacing === '0px'),
+  r304_subhint_ls:         probe.subhintLs === '0.15',
+  r302_empty_main_ls:      probe.emptyLs === '0.2',
+  r301_panel_titles_ls:    probe.recentTitleLs === '0.3' && probe.legendTitleLs === '0.3',
+  r294_pulse_absent:       probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node alias chat-pin signature:`, JSON.stringify(results),
+  '\n  alias samples:', probe.samples.slice(0, 2),
+  '\n  R304 sub-hint ls:', probe.subhintLs,
+  '\n  R302 main hint ls:', probe.emptyLs);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-hover-lift-test.mjs

@@ -0,0 +1,85 @@
+/* Round 51 verification: hovered node <g> lifts -2px via CSS transform.
+ *  - At rest, every node's CSS transform is "none" (or matrix with 0 ty).
+ *  - On hover, the hovered <g> reports `translateY(-2px)` (matrix(1,0,0,1,0,-2))
+ *    via getComputedStyle.transform, while siblings stay at identity.
+ *  - Release: returns to identity.
+ *  - With prefers-reduced-motion forced, NO lift even on hover.
+ */
+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(reducedMotion) {
+  const ctx = await browser.newContext({
+    viewport: { width: 1280, height: 900 },
+    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
+  });
+  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();
+  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 = ['alpha', 'beta', 'gamma'].map(a => ({
+      alias: a, 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/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+  await page.waitForTimeout(500);
+
+  const readTy = (alias) => page.evaluate(a => {
+    const el = document.querySelector(`g[data-node="${a}"]`);
+    if (!el) return null;
+    const m = getComputedStyle(el).transform;
+    if (!m || m === 'none') return 0;
+    // matrix(a, b, c, d, tx, ty) — extract ty
+    const parts = m.match(/matrix\(([^)]+)\)/);
+    if (!parts) return null;
+    const arr = parts[1].split(',').map(s => parseFloat(s.trim()));
+    return arr[5] ?? null;
+  }, alias);
+
+  const restAlpha = await readTy('alpha');
+  const restBeta = await readTy('beta');
+  await page.locator('g[data-node="alpha"]').hover({ force: true });
+  await page.waitForTimeout(300);
+  const hoveredAlpha = await readTy('alpha');
+  const hoveredBeta  = await readTy('beta');
+  await page.mouse.move(10, 10);
+  await page.waitForTimeout(300);
+  const releasedAlpha = await readTy('alpha');
+
+  await ctx.close();
+  return { restAlpha, restBeta, hoveredAlpha, hoveredBeta, releasedAlpha };
+}
+
+const normal = await probe(false);
+const reduced = await probe(true);
+await browser.close();
+
+const results = {
+  normal_restAtZero: normal.restAlpha === 0 && normal.restBeta === 0,
+  normal_hoveredLifts: normal.hoveredAlpha === -2,
+  normal_siblingStays: normal.hoveredBeta === 0,
+  normal_released: normal.releasedAlpha === 0,
+  reduced_noLift: reduced.hoveredAlpha === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node hover lift:`, JSON.stringify(results),
+  `\n  normal=`, normal, `\n  reduced=`, reduced);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-label-card-elevation-test.mjs

@@ -0,0 +1,157 @@
+/* Round 194 verification: node label card picks up drop-shadow
+ * elevation that intensifies on node hover, mirroring R135's panel
+ * hover-elevation but at per-node grain.
+ *
+ * Pre-R194 the card lifted 1.5 px on hover (R26) but had no shadow
+ * follow — the elevation gesture lacked physical weight. R194 adds
+ *   rest  : drop-shadow(0 1px 2px rgba(...,0.30 dark / 0.08 light))
+ *   hover : drop-shadow(0 4px 12px rgba(0,0,0,0.60) dark
+ *           / 0 3px 8px rgba(15,23,42,0.20) light)
+ * with transition: filter 220ms ease-out.
+ *
+ * Test (cyber/dark theme, 4 sessions = card mode):
+ *   1. data-node-label-card present + matches alias
+ *   2. Idle elevation attr = 'idle'
+ *   3. Idle filter style includes 'drop-shadow' (rest shadow on)
+ *   4. Idle blur radius is small (1-2 px range)
+ *   5. transition: filter 220ms ease-out
+ *   6. Hover the node — wait past 250ms
+ *   7. data-node-label-card-elevation flips to 'hover'
+ *   8. Hover filter has bigger blur (>= 8px) — drop-shadow strengthened
+ *   9. Other (non-hovered) cards stay 'idle'
+ *  10. Unhover — flips back to 'idle'
+ *  11. Filter transition string still present after settle
+ */
+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: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+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.waitForSelector('[data-node-label-card]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+// Probe idle state of alpha's label card
+const idleAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    alias:      el.getAttribute('data-node-label-card'),
+    elevation:  el.getAttribute('data-node-label-card-elevation'),
+    filter:     cs.filter,
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+    inlineFilter: el.style.filter,
+  };
+});
+
+// Hover the alpha node's <g> wrapper
+await page.hover('g[data-node="alpha"]');
+await page.waitForTimeout(280);  // past 220ms transition
+
+const hoveredAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  const cs = getComputedStyle(el);
+  return {
+    elevation: el.getAttribute('data-node-label-card-elevation'),
+    filter:    cs.filter,
+    inlineFilter: el.style.filter,
+  };
+});
+
+// Probe non-hovered card (beta) stays idle
+const idleBeta = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="beta"]');
+  return {
+    elevation: el.getAttribute('data-node-label-card-elevation'),
+  };
+});
+
+// Move away, wait for transition back
+await page.mouse.move(0, 0);
+await page.waitForTimeout(280);
+
+const settledAlpha = await page.evaluate(() => {
+  const el = document.querySelector('[data-node-label-card="alpha"]');
+  const cs = getComputedStyle(el);
+  return {
+    elevation:  el.getAttribute('data-node-label-card-elevation'),
+    filter:     cs.filter,
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+  };
+});
+
+await browser.close();
+
+// Parse blur radius out of drop-shadow(). Chrome's getComputedStyle
+// canonicalises into `drop-shadow(rgba(...) 0px Ypx BLURpx)` with the
+// color first — the standard write-order `drop-shadow(0 Ypx BLURpx
+// rgba(...))` is rearranged. So scan all numeric tokens inside the
+// drop-shadow() parens with rgba/hsla content stripped first; blur is
+// the 3rd numeric value.
+function parseShadowBlur(filterStr) {
+  if (!filterStr) return null;
+  const m = filterStr.match(/drop-shadow\(([\s\S]+)\)\s*$/);
+  if (!m) return null;
+  const stripped = m[1].replace(/(rgba?|hsla?)\([^)]*\)/g, '');
+  const nums = (stripped.match(/-?\d+(?:\.\d+)?/g) || []).map(Number);
+  return nums.length >= 3 ? Math.abs(nums[2]) : null;
+}
+const idleBlur = parseShadowBlur(idleAlpha?.filter);
+const hoverBlur = parseShadowBlur(hoveredAlpha?.filter);
+const settledBlur = parseShadowBlur(settledAlpha?.filter);
+
+const results = {
+  card_present:          !!idleAlpha,
+  alias_matches:         idleAlpha?.alias === 'alpha',
+  idle_elevation_attr:   idleAlpha?.elevation === 'idle',
+  idle_has_dropshadow:   (idleAlpha?.filter || '').includes('drop-shadow'),
+  idle_blur_small:       idleBlur !== null && idleBlur > 0 && idleBlur <= 3,
+  filter_transition:     idleAlpha?.transition.includes('filter') && idleAlpha?.transition.includes('0.22s'),
+
+  hover_elevation_attr:  hoveredAlpha?.elevation === 'hover',
+  hover_has_dropshadow:  (hoveredAlpha?.filter || '').includes('drop-shadow'),
+  hover_blur_larger:     hoverBlur !== null && hoverBlur >= 8,
+  hover_blur_grew:       idleBlur !== null && hoverBlur !== null && hoverBlur > idleBlur,
+  hover_filter_changed:  idleAlpha?.filter !== hoveredAlpha?.filter,
+
+  beta_stays_idle:       idleBeta?.elevation === 'idle',
+
+  settled_back_to_idle:  settledAlpha?.elevation === 'idle',
+  settled_blur_small:    settledBlur !== null && settledBlur <= 3,
+  settled_keeps_transition: settledAlpha?.transition.includes('filter'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node label card elevation:`, JSON.stringify(results),
+  `\n  idleAlpha:`,     idleAlpha,
+  `\n  hoveredAlpha:`,  hoveredAlpha,
+  `\n  idleBeta:`,      idleBeta,
+  `\n  settledAlpha:`,  settledAlpha,
+  `\n  blurs:`,         { idleBlur, hoverBlur, settledBlur });
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-label-card-stroke-test.mjs

@@ -0,0 +1,135 @@
+/* Round 217 verification: node label card stroke tints to
+ * legendAccent (cyan) on parent-node hover, adding a 3rd hover-
+ * feedback channel alongside R26 lift + R194 drop-shadow.
+ *
+ * Pre-R217 only 2 channels responded (translateY + drop-shadow);
+ * stroke stayed constant at pal.labelBox.stroke. R217 adds the
+ * 3rd channel for full hover-elevation triple coverage.
+ *
+ * Test (cyber dark, 4 working sessions = card mode):
+ *   1. data-node-label-card present + 4 alias matches.
+ *   2. Idle alpha: elevation='idle', stroke == pal.labelBox.stroke
+ *      (NOT cyan)
+ *   3. transition includes BOTH 'filter 220ms' AND 'stroke 220ms'
+ *   4. Hover g[data-node="alpha"] → wait 250ms
+ *   5. alpha elevation='hover', stroke shifted to legendAccent
+ *      (cyan-leaning — B > R in computed color)
+ *   6. Beta (non-hovered) card stroke STILL pal.labelBox.stroke
+ *   7. Move away → alpha stroke back to pal.labelBox.stroke
+ */
+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'), mk('delta'),
+  ] } });
+});
+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-node-label-card]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = async () => page.evaluate(() => {
+  const cards = [...document.querySelectorAll('[data-node-label-card]')];
+  return cards.map(el => ({
+    alias:      el.getAttribute('data-node-label-card'),
+    elevation:  el.getAttribute('data-node-label-card-elevation'),
+    stroke:     el.getAttribute('stroke'),
+    computedStroke: getComputedStyle(el).stroke,
+    transition: el.style.transition,
+  }));
+});
+
+const idle = await probe();
+
+await page.hover('g[data-node="alpha"]');
+await page.waitForTimeout(260);
+const hovered = await probe();
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(260);
+const settled = await probe();
+
+await browser.close();
+
+// Detect "cyan-leaning" — RGB or OKLab parse, blue/teal axis dominant
+function isCyanish(s) {
+  if (!s) return false;
+  let m = s.match(/rgba?\(\s*(\d+)\s*,?\s*(\d+)\s*,?\s*(\d+)/);
+  if (m) {
+    const r = +m[1], g = +m[2], b = +m[3];
+    // cyan/teal: B and G both clearly > R
+    return (b - r >= 50 && g - r >= 30) || (b > r + 60);
+  }
+  m = s.match(/oklab\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)/);
+  if (m) {
+    const a = +m[2], b = +m[3];
+    return a < -0.05 || b < -0.05;
+  }
+  m = s.match(/oklch\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)/);
+  if (m) {
+    const h = +m[3];
+    // cyan/teal hues are roughly 180-220 in OKLCH
+    return h > 150 && h < 240 && parseFloat(m[2]) > 0.05;
+  }
+  m = s.match(/^#([0-9a-f]{6})/i);
+  if (m) {
+    const v = parseInt(m[1], 16);
+    const r = (v >> 16) & 0xff, g = (v >> 8) & 0xff, b = v & 0xff;
+    return b - r >= 50 && g - r >= 30;
+  }
+  return false;
+}
+
+const idleAlpha    = idle.find(c => c.alias === 'alpha');
+const idleBeta     = idle.find(c => c.alias === 'beta');
+const hovAlpha     = hovered.find(c => c.alias === 'alpha');
+const hovBeta      = hovered.find(c => c.alias === 'beta');
+const settledAlpha = settled.find(c => c.alias === 'alpha');
+
+const results = {
+  four_cards_present:           idle.length === 4,
+  idle_alpha_elevation:         idleAlpha?.elevation === 'idle',
+  idle_alpha_stroke_not_cyan:   !isCyanish(idleAlpha?.computedStroke),
+  transition_has_filter:        /filter\s+(?:220ms|0\.22s)/.test(idleAlpha?.transition || ''),
+  transition_has_stroke:        /stroke\s+(?:220ms|0\.22s)/.test(idleAlpha?.transition || ''),
+
+  hover_alpha_elevation:        hovAlpha?.elevation === 'hover',
+  hover_alpha_stroke_cyan:      isCyanish(hovAlpha?.computedStroke),
+  hover_alpha_stroke_changed:   idleAlpha?.computedStroke !== hovAlpha?.computedStroke,
+  hover_beta_stays_neutral:     hovBeta?.elevation === 'idle'
+                                && !isCyanish(hovBeta?.computedStroke),
+
+  settled_alpha_back_to_idle:   settledAlpha?.elevation === 'idle',
+  settled_alpha_stroke_neutral: !isCyanish(settledAlpha?.computedStroke),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node label card stroke:`, JSON.stringify(results),
+  `\n  idleAlpha:`,    idleAlpha,
+  `\n  hovAlpha:`,     hovAlpha,
+  `\n  hovBeta:`,      hovBeta,
+  `\n  settledAlpha:`, settledAlpha);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-stroke-transition-test.mjs

@@ -0,0 +1,103 @@
+/* Round 167 verification: node status-ring picks up stroke-width
+ * transition.
+ *
+ * Pre-R167 the node outer ring (cx,cy,r,fill,stroke + binary
+ * stroke-width 3/1.5 + dasharray) had transition-[fill,stroke]
+ * duration-300 — colors transitioned but stroke-width snapped
+ * when a session went working → offline. R167 adds stroke-width
+ * to the transition list (300ms ease-out), symmetric with R165
+ * (pressure-bar width) and R166 (edge stroke-width).
+ *
+ * Test:
+ *   1. Mock 2 working + 2 offline sessions
+ *   2. Probe each node's status ring (via data-node-status-ring)
+ *   3. Working ring: strokeWidth=3, transition includes
+ *      'stroke-width 300ms'
+ *   4. Offline ring: strokeWidth=1.5, dasharray='5 5',
+ *      transition includes 'stroke-width 300ms'
+ *   5. Both rings expose data-node-status-ring with the status
+ *      label
+ *
+ * The DOM attribute reflects the React-rendered value, not the
+ * CSS-interpolated value during transitions — so the R51
+ * overlap-test's stroke-width=3 / 1.5 selectors still match.
+ */
+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,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('w1', 'working', fresh), mk('w2', 'working', fresh),
+    mk('o1', 'offline', stale), mk('o2', '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 === 4, { timeout: 30000 });
+await page.waitForSelector('[data-node-status-ring]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const rings = [...document.querySelectorAll('[data-node-status-ring]')];
+  return rings.map(r => ({
+    label:       r.getAttribute('data-node-status-ring'),
+    strokeWidth: parseFloat(r.getAttribute('stroke-width')),
+    dasharray:   r.getAttribute('stroke-dasharray'),
+    inlineTransition: r.style.transition || '',
+    computedTransition: getComputedStyle(r).transition || '',
+  }));
+});
+
+await browser.close();
+
+const working = probe.filter(p => p.label === 'working');
+const offline = probe.filter(p => p.label === 'offline');
+
+const allHaveStrokeWidth = probe.every(p =>
+  p.inlineTransition.includes('stroke-width 300ms') ||
+  /stroke-width\s+0\.3s|stroke-width\s+300ms/.test(p.computedTransition));
+const allHaveFill = probe.every(p =>
+  p.inlineTransition.includes('fill 300ms') ||
+  /fill\s+0\.3s|fill\s+300ms/.test(p.computedTransition));
+const allHaveStroke = probe.every(p =>
+  p.inlineTransition.includes('stroke 300ms') ||
+  /[^-]stroke\s+0\.3s|[^-]stroke\s+300ms/.test(p.computedTransition));
+
+const results = {
+  four_rings_found:       probe.length === 4,
+  two_working_rings:      working.length === 2,
+  two_offline_rings:      offline.length === 2,
+  working_strokeWidth_3:  working.every(p => p.strokeWidth === 3),
+  offline_strokeWidth_15: offline.every(p => p.strokeWidth === 1.5),
+  working_no_dasharray:   working.every(p => p.dasharray === 'none' || !p.dasharray),
+  offline_dasharray_5_5:  offline.every(p => p.dasharray === '5 5'),
+  all_have_stroke_width_transition: allHaveStrokeWidth,
+  all_have_fill_transition:         allHaveFill,
+  all_have_stroke_transition:       allHaveStroke,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node status-ring transition:`, JSON.stringify(results),
+  `\n  rings=`, probe);
+process.exit(ok ? 0 : 1);