@sleep2agi/agent-network-dashboard 0.4.6-preview.36 → 0.4.6-preview.362

package/scripts/topo-recent-panel-more-test.mjs

@@ -0,0 +1,106 @@
+/* Round 128 verification: "+N more flows" overflow hint in the
+ * recent-signal panel.
+ *
+ * The panel renders top 3 flowLinks via .slice(0, 3). When the
+ * fleet has > 3 active flows, the rest silently disappear — the
+ * R96 "X flows" header reports the total but doesn't make
+ * truncation explicit. R128 adds a muted italic footer
+ *   "+ N more flow(s)"
+ * inside the existing panel (y=82, between row-3 baseline and the
+ * panel bottom at y=84), only when flowLinks.length > 3.
+ *
+ * Three states tested:
+ *   - 5 distinct flow pairs       → footer shows "+ 2 more flows"
+ *   - exactly 3 flow pairs        → footer absent
+ *   - 0 flows (empty panel)       → footer absent (R45 placeholder wins)
+ *
+ * Note: the test seeds (count) messages per pair so each unique
+ * (from→to) pair becomes ONE flowLink (deduped). Pairs > 3 force
+ * the hint; pairs ≤ 3 don't.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(pairCount) {
+  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();
+  const aliases = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'];
+  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: aliases.map(mk) } });
+  });
+
+  const now = Date.now();
+  const msgs = [];
+  // Make pairCount distinct (from→to) pairs, 1 msg each, ascending age
+  for (let i = 0; i < pairCount; i++) {
+    msgs.push({
+      id: `m${i}`,
+      from_alias: aliases[i],
+      to_alias:   aliases[(i + 1) % aliases.length],
+      content: 'hi',
+      network_id: 'default',
+      created_at: new Date(now - (20000 + i * 1000)).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 === 6, { timeout: 30000 });
+  await page.waitForTimeout(500);
+
+  const out = await page.evaluate(() => {
+    const el = document.querySelector('[data-recent-panel-more]');
+    const rows = document.querySelectorAll('[data-recent-row]').length;
+    const headerCount = document.querySelector('[data-recent-panel-count]')?.textContent;
+    return {
+      footerPresent: !!el,
+      footerText:    el?.textContent?.trim(),
+      footerAttr:    el?.getAttribute('data-recent-panel-more'),
+      rows,
+      headerCount,
+    };
+  });
+
+  await browser.close();
+  return out;
+}
+
+const five  = await probe(5);
+const three = await probe(3);
+const zero  = await probe(0);
+
+const results = {
+  five_footerPresent:  five.footerPresent,
+  five_footerText:     five.footerText === '+ 2 more flows',
+  five_footerAttr:     five.footerAttr === '2',
+  five_rowsCapped3:    five.rows === 3,
+  five_headerSaysFive: five.headerCount?.startsWith('5'),
+
+  three_footerAbsent:  !three.footerPresent,
+  three_rowsExactly3:  three.rows === 3,
+
+  zero_footerAbsent:   !zero.footerPresent,
+  zero_rowsZero:       zero.rows === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel more:`, JSON.stringify(results),
+  `\n  five=`, five, `\n  three=`, three, `\n  zero=`, zero);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-readability-bump-test.mjs

@@ -0,0 +1,151 @@
+/* Round 259 verification: recent-signal panel's two italic instructional
+ * texts bump fontSize 8 → 9 for readability.
+ *
+ * Pre-R259 size hierarchy in the recent-signal panel:
+ *   "no flow yet"    main empty-state  fontSize 10 italic    (action prompt)
+ *   row content      "alpha→beta · 3"  fontSize  9 regular   (data)
+ *   hint             "send a message…" fontSize  8 italic    (instruction)
+ *   "+N more flows"  footer link       fontSize  8 italic    (nav affordance)
+ *   row timestamp    "5s"              fontSize  8 regular   (recency tag)
+ *
+ * Pre-R259 the hint + footer rendered at the smallest readable size on
+ * canvas, italic + low opacity layering legibility cost on top of the
+ * small type. Both are READ-TO-ACT text (instructional / clickable).
+ *
+ * Post-R259:
+ *   hint        fontSize 8 → 9
+ *   footer link fontSize 8 → 9
+ *
+ * The per-row timestamp STAYS at 8 — it's an at-a-glance recency tag
+ * tightly co-located with row text, not read-to-act instruction. Hint +
+ * footer at 9pt italic still subordinate to row content (9pt regular)
+ * via italic + lower opacity discrimination.
+ *
+ * Test scope:
+ *   1. Empty state hint fontSize === 9 (was 8). Tested in empty scenario.
+ *   2. "+N more flows" footer fontSize === 9. Tested in 5-msg scenario.
+ *   3. Per-row timestamp UNCHANGED at fontSize === 8 (sibling regression).
+ *   4. R256 footer-breath invariant preserved — hover footer client
+ *      bottom inside panel client bottom (footer with fontSize 9 still
+ *      tucks inside the panel).
+ */
+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 probeEmpty() {
+  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')] } });
+  });
+  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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 2, { timeout: 30000 });
+  await page.waitForSelector('[data-recent-signal-empty-hint]', { timeout: 10000 });
+  await page.waitForTimeout(300);
+  const result = await page.evaluate(() => {
+    const hint = document.querySelector('[data-recent-signal-empty-hint]');
+    return { hintFontSize: hint?.getAttribute('font-size') };
+  });
+  await ctx.close();
+  return result;
+}
+
+async function probePopulated() {
+  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'),
+    ] } });
+  });
+  // 5 distinct flow pairs → flowLinks.length === 5 → footer visible
+  const now = Date.now();
+  const msgs = [
+    { id: 'm0', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 1000).toISOString() },
+    { id: 'm1', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 1500).toISOString() },
+    { id: 'm2', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 2000).toISOString() },
+    { id: 'm3', from_alias: 'delta', to_alias: 'alpha', content: 'hi', network_id: 'default', created_at: new Date(now - 2500).toISOString() },
+    { id: 'm4', from_alias: 'alpha', to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 3000).toISOString() },
+  ];
+  await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: msgs } }));
+  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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+  await page.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
+  await page.waitForTimeout(500);
+
+  const rest = await page.evaluate(() => {
+    const footer = document.querySelector('[data-recent-panel-more]');
+    const ts = document.querySelector('[data-recent-row-ts]');
+    return {
+      footerFontSize: footer?.getAttribute('font-size'),
+      tsFontSize:     ts?.getAttribute('font-size'),
+    };
+  });
+
+  // R256 invariant regression — hover the footer + check it tucks inside panel
+  await page.locator('[data-recent-panel-more-nav]').hover();
+  await page.waitForTimeout(250);
+  const hoverProbe = await page.evaluate(() => {
+    const panelG = document.querySelector('[data-topo-panel="recent"]');
+    const rect   = panelG?.querySelector('rect');
+    const footer = document.querySelector('[data-recent-panel-more]');
+    return {
+      rectBottom:   rect?.getBoundingClientRect().bottom   ?? null,
+      footerBottom: footer?.getBoundingClientRect().bottom ?? null,
+    };
+  });
+  await ctx.close();
+
+  const hoverClearance = (hoverProbe.rectBottom != null && hoverProbe.footerBottom != null)
+    ? (hoverProbe.rectBottom - hoverProbe.footerBottom) : null;
+
+  return { ...rest, hoverClearance };
+}
+
+const empty = await probeEmpty();
+const pop   = await probePopulated();
+await browser.close();
+
+const results = {
+  hint_fontsize_bumped_to_9:        empty.hintFontSize === '9',
+  footer_fontsize_bumped_to_9:      pop.footerFontSize === '9',
+  per_row_timestamp_unchanged_at_8: pop.tsFontSize === '8',
+  r256_footer_inside_panel_on_hover: pop.hoverClearance != null && pop.hoverClearance >= -1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent panel readability bump:`, JSON.stringify(results),
+  '\n  empty:', empty,
+  '\n  pop:',   pop);
+process.exit(ok ? 0 : 1);

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);