@sleep2agi/agent-network-dashboard 0.4.6-preview.21 → 0.4.6-preview.210

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

@@ -0,0 +1,151 @@
+/* Round 195 verification: the recent-panel "+N more flows" footer
+ * (R128/R133) adopts the cyan vocabulary on hover, joining
+ * R178/R163/R179/R193 — "interactive-on-hover speaks cyan".
+ *
+ * Pre-R195 hover brightened opacity 0.55→0.85 + added underline but
+ * kept fill = legendText (gray). R195 fills with legendAccent (cyan-
+ * 400 dark / teal-600 light) on hover with a fill 200ms transition.
+ *
+ * Test (cyber/dark theme):
+ *   1. Need > 3 flowLinks → mock 5 distinct alias pairs each with
+ *      one message so flowLinks.length === 5.
+ *   2. Footer renders, data-recent-panel-more='2' (5 - 3 visible),
+ *      data-recent-panel-more-hovered='false' at idle.
+ *   3. Idle fill is gray-ish (OKLab/Lab a,b ≈ 0); opacity ≈ 0.55.
+ *   4. transition style includes 'fill 200ms' AND 'opacity 150ms'.
+ *   5. Hover the footer <g> wrapper, wait past transition.
+ *   6. data-recent-panel-more-hovered flips to 'true'.
+ *   7. Fill leans cyan (OKLab/Lab a < 0 OR b < 0); opacity ≈ 0.85.
+ *   8. Move away, fill returns to gray, opacity back to ~0.55.
+ */
+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'),
+  ] } });
+});
+
+// 5 distinct alias pairs → flowLinks.length === 5 → footer "+2 more flows"
+const now = Date.now();
+const msgs = [
+  { id: '1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 1000).toISOString() },
+  { id: '2', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 2000).toISOString() },
+  { id: '3', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 3000).toISOString() },
+  { id: '4', from_alias: 'delta', to_alias: 'alpha', content: 'hi', network_id: 'default', created_at: new Date(now - 4000).toISOString() },
+  { id: '5', from_alias: 'alpha', to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 5000).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-panel-more]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = async () => page.evaluate(() => {
+  const el = document.querySelector('[data-recent-panel-more]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  return {
+    moreCount:  el.getAttribute('data-recent-panel-more'),
+    hovered:    el.getAttribute('data-recent-panel-more-hovered'),
+    fill:       cs.fill,
+    opacity:    parseFloat(cs.opacity),
+    transition: cs.transitionProperty + ' / ' + cs.transitionDuration,
+    textDeco:   cs.textDecorationLine || el.getAttribute('text-decoration'),
+  };
+});
+
+const idle = await probe();
+
+await page.hover('[data-recent-panel-more-nav]');
+await page.waitForTimeout(250);
+const hovered = await probe();
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(400);  // past 200ms fill + 150ms opacity transitions with margin
+const settled = await probe();
+
+await browser.close();
+
+// slate-400 (legendText) = rgb(148,163,184) — B-R only 36, so a B>R+30
+// threshold misclassifies muted slate as "cyan". cyan-400 (legendAccent)
+// = rgb(34,211,238) and our snapshot here = rgb(107,226,243): B-R ≈ 136.
+// Use a tighter threshold (>=80) and a saturation gate (chroma) so the
+// gray-blue slate doesn't read as cyan but saturated cyan does.
+function parseColor(s) {
+  if (!s) return null;
+  let m;
+  m = s.match(/rgba?\(\s*(\d+)\s*,?\s*(\d+)\s*,?\s*(\d+)/);
+  if (m) {
+    const r = +m[1], g = +m[2], b = +m[3];
+    const chroma = Math.max(r, g, b) - Math.min(r, g, b);
+    return {
+      kind: 'rgb', r, g, b, chroma,
+      cyanish: b - r >= 80 && chroma > 80,    // saturated blue/cyan
+      neutralish: Math.abs(b - r) < 50 && chroma < 70,
+    };
+  }
+  m = s.match(/(?:oklab|lab)\(\s*([\-\d.]+)\s+([\-\d.]+)\s+([\-\d.]+)/);
+  if (m) {
+    const L = +m[1], a = +m[2], b = +m[3];
+    const scale = Math.max(Math.abs(a), Math.abs(b)) > 5 ? 'lab' : 'oklab';
+    const thr  = scale === 'lab' ? 15 : 0.08;
+    const ntrl = scale === 'lab' ? 8  : 0.04;
+    return {
+      kind: scale, L, a, b,
+      cyanish: (a < -thr || b < -thr),
+      neutralish: Math.abs(a) < ntrl && Math.abs(b) < ntrl,
+    };
+  }
+  return null;
+}
+const idleColor    = parseColor(idle?.fill);
+const hoverColor   = parseColor(hovered?.fill);
+const settledColor = parseColor(settled?.fill);
+
+const results = {
+  footer_present:           !!idle,
+  more_count_2:             idle?.moreCount === '2',
+  idle_not_hovered:         idle?.hovered === 'false',
+  idle_fill_neutral:        idleColor?.neutralish === true,
+  idle_opacity_low:         idle?.opacity > 0.45 && idle?.opacity < 0.65,
+  transition_has_fill:      (idle?.transition || '').includes('fill') && (idle?.transition || '').includes('0.2s'),
+  transition_has_opacity:   (idle?.transition || '').includes('opacity') && (idle?.transition || '').includes('0.15s'),
+
+  hover_attr_true:          hovered?.hovered === 'true',
+  hover_fill_cyan:          hoverColor?.cyanish === true,
+  hover_opacity_high:       hovered?.opacity > 0.75 && hovered?.opacity < 0.95,
+  hover_fill_changed:       idle?.fill !== hovered?.fill,
+
+  settled_attr_false:       settled?.hovered === 'false',
+  settled_fill_neutral:     settledColor?.neutralish === true,
+  settled_opacity_low:      settled?.opacity > 0.45 && settled?.opacity < 0.65,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel-more cyan hover:`, JSON.stringify(results),
+  `\n  idle:`,    idle,    `\n   idleColor:`,    idleColor,
+  `\n  hovered:`, hovered, `\n   hoverColor:`,   hoverColor,
+  `\n  settled:`, settled, `\n   settledColor:`, settledColor);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,127 @@
+/* Round 133 verification: R128's "+N more flows" footer becomes a
+ * clickable nav to /messages. R128 introduced the truncation hint
+ * as pure metadata; R133 lets the user act on it.
+ *
+ * Three states tested:
+ *   A. Click footer → navigation lands on /messages
+ *   B. Hover footer → opacity rises 0.55 → 0.85, underline appears
+ *   C. Leave hover → opacity drops back, underline gone
+ *
+ * Plus: footer carries role="link" + cursor:pointer + a tooltip
+ * referencing /messages, all for discoverability and a11y.
+ */
+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();
+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 = [];
+// 5 distinct pairs → forces R128 footer with "+ 2 more flows"
+for (let i = 0; i < 5; 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.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const beforeHover = await page.evaluate(() => {
+  const wrap = document.querySelector('[data-recent-panel-more-nav]');
+  const text = wrap?.querySelector('text[data-recent-panel-more]');
+  return {
+    role:        wrap?.getAttribute('role'),
+    tabindex:    wrap?.getAttribute('tabindex'),
+    cursor:      (wrap?.getAttribute('style') || '').includes('pointer'),
+    title:       wrap?.querySelector('title')?.textContent,
+    opacity:     text?.getAttribute('opacity'),
+    underline:   text?.getAttribute('text-decoration'),
+    moreCount:   text?.getAttribute('data-recent-panel-more'),
+  };
+});
+
+// Hover the footer
+await page.locator('[data-recent-panel-more-nav]').hover();
+await page.waitForTimeout(250);
+const onHover = await page.evaluate(() => {
+  const text = document.querySelector('[data-recent-panel-more-nav] text');
+  return {
+    opacity:   text?.getAttribute('opacity'),
+    underline: text?.getAttribute('text-decoration'),
+  };
+});
+
+// Move away → restore
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterLeave = await page.evaluate(() => {
+  const text = document.querySelector('[data-recent-panel-more-nav] text');
+  return {
+    opacity:   text?.getAttribute('opacity'),
+    underline: text?.getAttribute('text-decoration'),
+  };
+});
+
+// Click → expect /messages navigation
+await page.locator('[data-recent-panel-more-nav]').click();
+await page.waitForURL('**/messages', { timeout: 10000 });
+const finalUrl = page.url();
+
+await browser.close();
+
+const results = {
+  before_roleLink:       beforeHover.role === 'link',
+  before_tabIndex0:      beforeHover.tabindex === '0',
+  before_cursorPointer:  beforeHover.cursor,
+  before_titleMentionsMessages: (beforeHover.title || '').includes('/messages'),
+  before_moreCount2:     beforeHover.moreCount === '2',
+  before_opacity55:      beforeHover.opacity === '0.55',
+  before_noUnderline:    beforeHover.underline === 'none' || !beforeHover.underline,
+
+  hover_opacity85:       onHover.opacity === '0.85',
+  hover_underline:       onHover.underline === 'underline',
+
+  leave_opacityRestored: afterLeave.opacity === '0.55',
+  leave_underlineGone:   afterLeave.underline === 'none' || !afterLeave.underline,
+
+  click_navigatedToMessages: /\/messages$/.test(finalUrl),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel more nav:`, JSON.stringify(results),
+  `\n  before=`, beforeHover,
+  `\n  onHover=`, onHover,
+  `\n  afterLeave=`, afterLeave,
+  `\n  finalUrl=`, finalUrl);
+process.exit(ok ? 0 : 1);

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