@sleep2agi/agent-network-dashboard 0.4.6-preview.39 → 0.4.6-preview.396

package/scripts/topo-recent-row-count-fill-test.mjs

@@ -0,0 +1,129 @@
+/* Round 189 verification: recent-signal row count tspan unified
+ * into one always-mounted element with fill/fontWeight gated by
+ * isHot. transition: fill 300ms ease-out makes the R127 hot
+ * threshold crossing (count >= 10) ease smoothly through the
+ * colour shift instead of snapping.
+ *
+ * Pre-R189 two tspans branched on isHot — different
+ * data-recent-row-count and data-recent-row-count-hot
+ * attributes; mount/unmount made fill+fontWeight snap.
+ *
+ * Test:
+ *   Mock 3 flows side by side:
+ *     alpha→beta:  count=4  (cold) → fill unset, weight unset,
+ *                                    no hot attr
+ *     alpha→gamma: count=12 (hot)  → fill=amber, weight=700,
+ *                                    hot attr 'true'
+ *     alpha→delta: count=20 (hot)  → fill=amber, weight=700
+ *   All three tspans:
+ *     - have data-recent-row-count
+ *     - have style.transition includes 'fill 300ms'
+ */
+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'),
+  ] } });
+});
+
+const now = Date.now();
+const msgs = [];
+// alpha→beta: 4 (cold)
+for (let i = 0; i < 4; i++) {
+  msgs.push({ id: `cold${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (5000 + i * 50)).toISOString() });
+}
+// alpha→gamma: 12 (hot)
+for (let i = 0; i < 12; i++) {
+  msgs.push({ id: `h1${i}`, from_alias: 'alpha', to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (10000 + i * 50)).toISOString() });
+}
+// alpha→delta: 20 (hot)
+for (let i = 0; i < 20; i++) {
+  msgs.push({ id: `h2${i}`, from_alias: 'alpha', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (15000 + i * 50)).toISOString() });
+}
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+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-recent-row-count]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const tspans = [...document.querySelectorAll('[data-recent-row-count]')];
+  return tspans.map(t => {
+    const row = t.closest('[data-recent-row]');
+    return {
+      rowKey:      row?.getAttribute('data-recent-row'),
+      text:        t.textContent,
+      fill:        t.getAttribute('fill'),
+      fontWeight:  t.getAttribute('font-weight'),
+      hotAttr:     t.getAttribute('data-recent-row-count-hot'),
+      transition:  t.style.transition || getComputedStyle(t).transition,
+    };
+  });
+});
+
+await browser.close();
+
+const findByKey = (key) => probe.find(p => p.rowKey === key);
+const cold = findByKey('alpha->beta');
+const hot1 = findByKey('alpha->gamma');
+const hot2 = findByKey('alpha->delta');
+
+const hasFillTransition = (s) =>
+  (s?.transition || '').includes('fill 300ms') ||
+  /fill\s+0\.3s|fill\s+300ms/.test(s?.transition || '');
+
+const results = {
+  three_tspans_present:     probe.length === 3,
+  cold_found:               cold !== undefined,
+  hot1_found:               hot1 !== undefined,
+  hot2_found:               hot2 !== undefined,
+
+  cold_no_fill:             cold?.fill === null || cold?.fill === undefined,
+  cold_no_fontWeight:       cold?.fontWeight === null || cold?.fontWeight === undefined,
+  cold_no_hot_attr:         cold?.hotAttr === null,
+  cold_text_4:              cold?.text === '4',
+
+  hot1_fill_amber:          hot1?.fill === '#fbbf24',
+  hot1_fontWeight_700:      hot1?.fontWeight === '700',
+  hot1_hot_attr:            hot1?.hotAttr === 'true',
+  hot1_text_12:             hot1?.text === '12',
+
+  hot2_fill_amber:          hot2?.fill === '#fbbf24',
+  hot2_fontWeight_700:      hot2?.fontWeight === '700',
+  hot2_hot_attr:            hot2?.hotAttr === 'true',
+  hot2_text_20:             hot2?.text === '20',
+
+  all_have_fill_transition: probe.every(p => hasFillTransition(p)),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row count fill:`, JSON.stringify(results),
+  `\n  cold:`, cold,
+  `\n  hot1:`, hot1,
+  `\n  hot2:`, hot2);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-count-weight-test.mjs

@@ -0,0 +1,112 @@
+/* Round 320 verification: recent-signal panel per-row count tspan
+ * cold-state fontWeight 400 (parent-inherited) → 600 (explicit).
+ *
+ * The 5-tier SVG data-weight hierarchy was completed in pieces:
+ *   - R309: legend per-row count fw=600
+ *   - R310: legend panel-header count fw=600
+ *   - R311: recent-signal panel-header flow count fw=600
+ *   - R320: recent-signal PER-ROW count fw=600 (this round)
+ *
+ * Pre-R320 a cold row's "· 12" digit painted at parent default (400),
+ * indistinguishable from the surrounding alias text. The count IS
+ * data — it should sit in the fw=600 tier alongside its siblings.
+ *
+ * Hot state (count ≥ 10) stays at 700 (R127). The cold→hot crossing
+ * now gradates 600 → 700 in weight and amber-fill in colour — the
+ * fill flip carries the dramatic visual cue while the weight tier
+ * stays consistent across rows.
+ *
+ * Contract:
+ *   - [data-recent-row-count] computed font-weight === '600' for
+ *     COLD rows (count < 10)
+ *   - Same selector with [data-recent-row-count-hot='true'] computed
+ *     font-weight === '700' for HOT rows
+ *   - R319 single-tier-drop + R317 inactive gray-400 + R318 active
+ *     font-medium + R294 pulse absent all preserved.
+ */
+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'),
+  ] } });
+});
+// Mock messages — the recent-signal panel counts INDIVIDUAL records
+// locally (the API's `count` field on aggregated records is not
+// what drives the per-row tally). Inject 4 individual cold-flow
+// records + 12 hot-flow records so the panel aggregates to count=4
+// and count=12 respectively.
+const nowIso = new Date().toISOString();
+const mkMsg = (i, from_alias, to_alias) => ({
+  from_alias, to_alias, content: `m${i}`, last_at: nowIso, count: 1,
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  ...Array.from({ length: 4 },  (_, i) => mkMsg(`a${i}`, 'alpha', 'beta')),
+  ...Array.from({ length: 12 }, (_, i) => mkMsg(`b${i}`, 'beta',  'gamma')),
+] } }));
+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-recent-row-count]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const counts = Array.from(document.querySelectorAll('[data-recent-row-count]'));
+  return {
+    rows: counts.map(c => ({
+      text:    c.textContent,
+      isHot:   c.getAttribute('data-recent-row-count-hot') === 'true',
+      fw:      getComputedStyle(c).fontWeight,
+    })),
+    r317InactiveLayoutCls:
+      document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
+    r317ActiveLayoutCls:
+      document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
+    pulseCount: document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const cold = probe.rows.filter(r => !r.isHot);
+const hot  = probe.rows.filter(r => r.isHot);
+
+const results = {
+  at_least_one_cold_row:       cold.length >= 1,
+  at_least_one_hot_row:        hot.length >= 1,
+  all_cold_fw_600:             cold.every(r => String(r.fw) === '600'),
+  all_hot_fw_700:              hot.every(r => String(r.fw) === '700'),
+  // R319 regression: single-tier behaviour on group pips. Not directly
+  // probed here; topo-group-pip-singletier-drop-test.mjs covers that.
+  // R317 / R318 regression — layout toggle styling. Default layout
+  // is 'ring' (active). Grid is inactive and carries gray-400 (R317).
+  // Active ring carries cyan-300 + font-medium (R318).
+  r317_inactive_gray_400:      probe.r317InactiveLayoutCls.includes('text-gray-400'),
+  r318_active_font_medium:     probe.r317ActiveLayoutCls.includes('font-medium'),
+  r294_pulse_absent:           probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row count weight:`, JSON.stringify(results),
+  '\n  cold rows:', cold,
+  '\n  hot rows:', hot);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-fadein-test.mjs

@@ -0,0 +1,107 @@
+/* Round 203 verification: recent-signal panel rows fade in on mount,
+ * not just when the panel itself first appears (R175). Pre-R203 a new
+ * flow rising into the top-3 list snap-popped in; R203 attaches
+ * anet-fade-in per-row so the entrance eases.
+ *
+ * Key={link.key} preserves stable identity across re-renders — the
+ * animation plays once per mount, not on every count update.
+ *
+ * Test (cyber dark, 3 flows already present at load):
+ *   1. Three recent-signal rows render with data-recent-row.
+ *   2. Each row's className includes 'anet-fade-in' AND
+ *      'anet-topo-svg-focus' (existing focus class kept).
+ *   3. CSS animationName resolves to a non-empty value matching the
+ *      anet-fade-in keyframe (we read it via getComputedStyle — the
+ *      browser's compiled CSS-rule selector binds the class to the
+ *      animation).
+ *   4. Existing R143 row-lift inline transition is intact
+ *      (transform 150ms cubic-bezier).
+ *   5. Existing R160 pip and R191 ts elements still render inside
+ *      each row — no markup regression from the className change.
+ */
+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'),
+  ] } });
+});
+
+const now = Date.now();
+const msgs = [
+  { id: 'a', from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - 3000).toISOString() },
+  { id: 'b', from_alias: 'beta',  to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 6000).toISOString() },
+  { id: 'c', from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 9000).toISOString() },
+];
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+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-recent-row]', { timeout: 10000 });
+
+// Wait past panel R175 700ms delay + 150ms row animation so the rows
+// have finished their entrance and computed style shows the resting
+// state with the animation declared in CSS but completed.
+await page.waitForTimeout(1100);
+
+const rows = await page.evaluate(() => {
+  return [...document.querySelectorAll('[data-recent-row]')].map(el => {
+    const cs = getComputedStyle(el);
+    const pip = el.querySelector('[data-recent-row-freshness]');
+    const ts  = el.querySelector('[data-recent-row-ts]');
+    return {
+      key:           el.getAttribute('data-recent-row'),
+      className:     el.getAttribute('class') || '',
+      animationName: cs.animationName,
+      animationDuration: cs.animationDuration,
+      inlineTransition:  el.style.transition,
+      hasFreshnessPip:   !!pip,
+      hasTimestamp:      !!ts,
+    };
+  });
+});
+
+await browser.close();
+
+const has = (s, c) => (s || '').split(/\s+/).includes(c);
+
+const results = {
+  three_rows_present:           rows.length === 3,
+  all_have_fadein_class:        rows.every(r => has(r.className, 'anet-fade-in')),
+  all_keep_focus_class:         rows.every(r => has(r.className, 'anet-topo-svg-focus')),
+  all_have_animation_bound:     rows.every(r => /anet-fade-in|fadein/i.test(r.animationName)
+                                                || r.animationName.includes('anet-fade-in')),
+  // R143 row-lift transition still in inline style
+  all_keep_transform_transition: rows.every(r => /transform\s+(?:150ms|0\.15s)/.test(r.inlineTransition || '')),
+  // R160 R191 markup contracts unbroken
+  all_have_pip:                 rows.every(r => r.hasFreshnessPip === true),
+  all_have_ts:                  rows.every(r => r.hasTimestamp === true),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row fade-in:`, JSON.stringify(results),
+  `\n  rows:`, rows);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-freshness-test.mjs

@@ -0,0 +1,102 @@
+/* Round 160 verification: recency pip on recent-signal panel rows.
+ *
+ * Canvas flow edges fade by freshness (R10: full intensity ≤30s,
+ * decaying to ~35% over 5min). The recent-signal panel rows
+ * encoded last_at purely in text ("5s" at row right edge) — no
+ * at-a-glance visual cue for "which row is actively firing".
+ *
+ * R160 adds a 1.6-px cyan dot at x=10 (in the 7-px margin
+ * between rect-start x=6 and text-start x=13). Alpha ramp:
+ *   ageSec ≤ 30   →  1.0   (fully fresh)
+ *   30 < ageSec ≤ 300 → smooth decay 1.0 → 0.25
+ *   ageSec > 300  →  0.25  (stale floor)
+ *
+ * Three independent encodings on each row, none competing:
+ *   rect fill   = hover/pin state (R104/R116)
+ *   count tspan = magnitude (R127 amber when ≥10)
+ *   pip         = recency (this round)
+ *
+ * Test:
+ *   Mock 3 flows — 1 fresh (5s ago), 1 mid (90s ago), 1 stale
+ *   (6 min ago). Each should produce one pip; alpha ladder:
+ *   fresh > mid > stale.
+ */
+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'),
+  ] } });
+});
+
+const now = Date.now();
+// Three distinct flows with different recency:
+//   fresh: 5s ago     → alpha ≈ 1.0
+//   mid:   90s ago    → alpha ≈ 1 - (60/270)*0.75 ≈ 0.833
+//   stale: 360s ago   → alpha ≈ 0.25 (floor)
+const msgs = [
+  { id: 'f1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: 'm1', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 90000).toISOString() },
+  { id: 's1', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 360000).toISOString() },
+];
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+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-recent-row-freshness]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probes = await page.evaluate(() => {
+  const pips = [...document.querySelectorAll('[data-recent-row-freshness]')];
+  return pips.map(el => ({
+    key:   el.getAttribute('data-recent-row-freshness'),
+    alpha: parseFloat(el.getAttribute('data-recent-row-freshness-alpha') || ''),
+    cx:    parseFloat(el.getAttribute('cx') || ''),
+    r:     parseFloat(el.getAttribute('r') || ''),
+    tag:   el.tagName.toLowerCase(),
+  }));
+});
+
+await browser.close();
+
+if (probes.length !== 3) {
+  console.log(`❌ wrong pip count: expected 3, got ${probes.length}`, probes);
+  process.exit(1);
+}
+// Rows are sorted by recency (newest first), so probes[0] is freshest.
+const [pFresh, pMid, pStale] = probes;
+const results = {
+  three_pips:              probes.length === 3,
+  all_circles:             probes.every(p => p.tag === 'circle'),
+  all_at_x_10:             probes.every(p => Math.abs(p.cx - 10) < 0.01),
+  all_radius_1p6:          probes.every(p => Math.abs(p.r - 1.6) < 0.01),
+  fresh_alpha_1:           Math.abs(pFresh.alpha - 1.0) < 0.05,
+  mid_alpha_0p7_to_0p9:    pMid.alpha > 0.7 && pMid.alpha < 0.95,
+  stale_alpha_floor_0p25:  Math.abs(pStale.alpha - 0.25) < 0.05,
+  ladder_descends:         pFresh.alpha > pMid.alpha && pMid.alpha > pStale.alpha,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row freshness pip:`, JSON.stringify(results),
+  `\n  probes=`, probes);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-hot-test.mjs

@@ -0,0 +1,110 @@
+/* Round 127 verification: recent-signal panel row mirrors R126's
+ * canvas hot-badge convention. When link.count >= 10 the count
+ * digit inside the row text renders in amber (#d97706 light,
+ * #fbbf24 dark) + bold (font-weight 700). Surrounding alias text +
+ * separators stay in legendText/legendHeadline.
+ *
+ * Fleet:
+ *   alpha → beta:  12 msgs → HOT row, count tspan amber+bold
+ *   beta  → gamma:  4 msgs → warm row, count tspan default
+ *
+ * Path:
+ *   1. recent panel has 2 rows; data-recent-row-hot reflects bucket
+ *   2. alpha→beta row: data-recent-row-count-hot tspan present, amber
+ *   3. beta→gamma row: data-recent-row-count (non-hot) tspan present
+ *   4. Symmetry with R126: the canvas badge for alpha→beta and the
+ *      recent-row count for alpha→beta both render the same amber
+ *      hex.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } 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: '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', 'working'), mk('beta', 'working'), mk('gamma', 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from_alias, to_alias, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+for (let i = 0; i < 12; i++) msgs.push(mkMsg(`a${i}`, 'alpha', 'beta',  20000 + i * 500));
+for (let i = 0; i < 4;  i++) msgs.push(mkMsg(`b${i}`, 'beta',  'gamma', 30000 + i * 500));
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+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.waitForSelector('[data-recent-row="alpha->beta"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const inspect = (key) => page.evaluate((k) => {
+  const row = document.querySelector(`[data-recent-row="${k}"]`);
+  if (!row) return null;
+  const hotTspan = row.querySelector('[data-recent-row-count-hot]');
+  const warmTspan = row.querySelector('[data-recent-row-count]');
+  return {
+    hot:           row.getAttribute('data-recent-row-hot'),
+    hotTspanText:  hotTspan?.textContent,
+    hotTspanFill:  hotTspan?.getAttribute('fill'),
+    hotTspanWeight: hotTspan?.getAttribute('font-weight'),
+    warmTspanText: warmTspan?.textContent,
+  };
+}, key);
+
+const a2b = await inspect('alpha->beta');
+const b2g = await inspect('beta->gamma');
+
+// Also assert the canvas badge for alpha→beta still flips to the
+// same amber stroke — symmetry of canvas + panel hot signals.
+const badgeStroke = await page.evaluate(() => {
+  const g = document.querySelector('[data-edge-count-badge="alpha->beta"]');
+  return g?.querySelector('circle')?.getAttribute('stroke');
+});
+
+await browser.close();
+
+// Dark theme amber: #fbbf24
+const amberHex = '#fbbf24';
+
+const results = {
+  a2b_attrHot:        a2b !== null && a2b.hot === 'true',
+  a2b_hotTspan:       a2b !== null && a2b.hotTspanText === '12',
+  a2b_amberFill:      a2b !== null && (a2b.hotTspanFill || '').toLowerCase() === amberHex,
+  a2b_boldWeight:     a2b !== null && a2b.hotTspanWeight === '700',
+  a2b_noWarmTspan:    a2b !== null && a2b.warmTspanText === undefined,
+
+  b2g_attrNotHot:     b2g !== null && b2g.hot === 'false',
+  b2g_warmTspan:      b2g !== null && b2g.warmTspanText === '4',
+  b2g_noHotTspan:     b2g !== null && a2b !== null && b2g.hotTspanText === undefined,
+
+  symmetric_badgeAmber: (badgeStroke || '').toLowerCase() === amberHex,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row hot:`, JSON.stringify(results),
+  `\n  a2b=`, a2b,
+  `\n  b2g=`, b2g,
+  `\n  canvas badge stroke for alpha→beta =`, badgeStroke);
+process.exit(ok ? 0 : 1);