@sleep2agi/agent-network-dashboard 0.4.6-preview.4 → 0.4.6-preview.405

package/scripts/topo-recent-panel-count-freshness-test.mjs

@@ -0,0 +1,109 @@
+/* Round 162 verification: recent-signal panel header "N flows"
+ * tspan picks up the R160/R161 freshness vocabulary.
+ *
+ * R10  fades canvas edge by freshness (per-edge stroke opacity)
+ * R160 brought it to the recent-signal panel rows (per-flow pip)
+ * R161 brought it to the chip-row "active links" chip bullet
+ *      (fleet aggregate in the chip-row above the SVG)
+ * R162 brings it to the recent-signal panel HEADER count
+ *      (fleet aggregate inside the SVG corner)
+ *
+ * The chip-row "N active links · last 5s" and the panel-header
+ * "N flows" show the same metric at two scopes. R161 tinted the
+ * chip-row side; R162 tints the panel-side mirror so both
+ * scopes speak the same freshness vocabulary side-by-side.
+ *
+ * Same alpha ramp as R160/R161:
+ *   ageSec ≤ 30   → 1.0  (fully fresh)
+ *   30-300s       → smooth decay 1.0 → 0.25
+ *   > 300s        → 0.25 stale floor
+ *
+ * Hot tail (R129 amber " · N hot") is volume-tinted and stays
+ * unchanged — recency tints the head; volume colors the tail.
+ *
+ * Test: 3 page loads, 5s / 90s / 360s ago.
+ */
+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 {}
+});
+
+async function probe(msgAgeSec) {
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  await ctx.unroute('**/api/hub/status*').catch(() => {});
+  await ctx.unroute('**/api/hub/messages*').catch(() => {});
+  await ctx.unroute('**/api/hub/tasks*').catch(() => {});
+  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')] } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+    { id: 'x', from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(Date.now() - msgAgeSec * 1000).toISOString() },
+  ] } }));
+  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 === 2, { timeout: 30000 });
+  await page.waitForSelector('[data-recent-panel-count]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+  const out = await page.evaluate(() => {
+    const el = document.querySelector('[data-recent-panel-count]');
+    if (!el) return null;
+    // SVG tspan fill attribute is the source of truth — getComputedStyle on
+    // tspan returns nothing useful on some browsers.
+    return {
+      alpha: parseFloat(el.getAttribute('data-recent-panel-count-freshness-alpha') || ''),
+      fill:  el.getAttribute('fill') || '',
+      text:  el.textContent,
+    };
+  });
+  await page.close();
+  return out;
+}
+
+const A = await probe(5);     // fresh
+const B = await probe(90);    // mid
+const C = await probe(360);   // stale
+
+await browser.close();
+
+const cyanRgb = (str) => {
+  const m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(str);
+  if (!m) return null;
+  return [Number(m[1]), Number(m[2]), Number(m[3])];
+};
+
+const results = {
+  fresh_dot_found:    A !== null,
+  mid_dot_found:      B !== null,
+  stale_dot_found:    C !== null,
+  fresh_alpha_1:      A && Math.abs(A.alpha - 1.0)  < 0.05,
+  mid_alpha_window:   B && B.alpha > 0.7 && B.alpha < 0.95,
+  stale_alpha_floor:  C && Math.abs(C.alpha - 0.25) < 0.05,
+  fresh_color_cyan:   A && JSON.stringify(cyanRgb(A.fill)) === '[34,211,238]',
+  stale_alpha_in_fill: C && /0\.25/.test(C.fill),
+  ladder_descends:    A && B && C && A.alpha > B.alpha && B.alpha > C.alpha,
+  text_says_1_flow:   A && /1 flow/.test(A.text || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel-header count freshness:`, JSON.stringify(results),
+  `\n  fresh =`, A,
+  `\n  mid   =`, B,
+  `\n  stale =`, C);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,72 @@
+/* Round 96 verification: the recent-signal panel header count now
+ * reads "X flows" off flowLinks.length (matching the deduped rows
+ * below), not "X msgs" off the raw messages.length. Pre-R96 a
+ * fleet with 10 messages aggregating to 3 unique pairs read
+ * "10 msgs" above only 3 rendered rows — read as broken.
+ *
+ * Mock 5 messages between 2 distinct pairs: alpha↔beta gets 4
+ * msgs (4 separate exchanges, dedupes to 1 flow), gamma→delta
+ * gets 1 msg (1 flow). Total = 5 msgs, 2 flows. Header should
+ * show "2 flows", panel renders 2 rows.
+ */
+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) => ({
+    alias, status: 'idle', 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 mkMsg = (id, from_alias, to_alias, content, ageMs) => ({
+  id, from_alias, to_alias, content, network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+// 5 messages → 2 flow pairs (alpha→beta × 4, gamma→delta × 1).
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  mkMsg('m1', 'alpha', 'beta',  'ping-1', 60 * 1000),
+  mkMsg('m2', 'alpha', 'beta',  'ping-2', 50 * 1000),
+  mkMsg('m3', 'alpha', 'beta',  'ping-3', 40 * 1000),
+  mkMsg('m4', 'alpha', 'beta',  'ping-4', 30 * 1000),
+  mkMsg('m5', 'gamma', 'delta', 'hello',  20 * 1000),
+] } }));
+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-count]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const headerCount  = await page.locator('[data-recent-panel-count]').textContent();
+const renderedRows = await page.locator('[data-recent-row]').count();
+
+await browser.close();
+
+const results = {
+  header_saysFlowsNotMsgs:  /\bflows\b/.test(headerCount || ''),
+  header_count2:            /^2 flows/.test(headerCount || ''),
+  rows_match_header:        renderedRows === 2,
+  no_msgs_word:             !/\bmsgs?\b/.test(headerCount || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel count:`, JSON.stringify(results),
+  `\n  header=`,     JSON.stringify(headerCount),
+  `\n  rows=`,       renderedRows);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,91 @@
+/* Round 311 verification: recent-signal panel-header count tspan
+ * 'N flows' picks up fontWeight=600 for sibling parity with R310
+ * legend panel-header count weight. Closes the panel-pair count
+ * typography symmetry — both top-corner panels now match:
+ *   title fontWeight=700 (panel chrome anchor)
+ *   count fontWeight=600 + tabular-nums (data)
+ *
+ * Contract:
+ *   - [data-recent-panel-count] tspan attr font-weight === '600'.
+ *   - Text content matches '{N} flows' pattern.
+ *   - R162 freshness alpha attribute still present.
+ *   - R225 tabular-nums preserved.
+ *   - R310 legend panel-count fw=600 still holds (sibling regression).
+ *   - R309 row counts + R308 row labels + R294 pulse 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, 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'),
+  ] } });
+});
+// Inject at least one mock message so the recent-signal panel count
+// renders 'N flows' with non-zero N. With 0 the freshness branch may
+// vary; we just need the tspan to render with its content.
+await ctx.route('**/api/hub/messages*', (route) => {
+  const now = new Date().toISOString();
+  route.fulfill({ json: { messages: [
+    { from_alias: 'alpha', to_alias: 'beta', content: 'ping', last_at: now, count: 3 },
+  ] } });
+});
+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-panel-count]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const sel = (s) => document.querySelector(s);
+  const recentCount = sel('[data-recent-panel-count]');
+  const legendCount = sel('[data-legend-panel-count]');
+  return {
+    recentCountFw:        recentCount?.getAttribute('font-weight') ?? null,
+    recentCountText:      recentCount?.textContent?.trim() ?? null,
+    recentCountFreshAttr: recentCount?.getAttribute('data-recent-panel-count-freshness-alpha') ?? null,
+    legendCountFw:        legendCount?.getAttribute('font-weight') ?? null,
+    rowCountWorkingFw:    sel('[data-legend-count="working"]')?.getAttribute('font-weight') ?? null,
+    workingLabel:         sel('[data-legend-row-label="working"]')?.textContent?.trim() ?? null,
+    layoutRingCls:        sel('[data-topo-chrome-layout="ring"]')?.className ?? '',
+    subhintLs:            sel('[data-recent-signal-empty-hint]')?.getAttribute('letter-spacing') ?? null,
+    pulseCount:           document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const results = {
+  recent_count_fw_600:          probe.recentCountFw === '600',
+  recent_count_text_pattern:    /^\d+ flow/.test(probe.recentCountText || ''),
+  recent_count_freshness_attr:  probe.recentCountFreshAttr !== null,
+  r310_legend_panel_fw_600:     probe.legendCountFw === '600',
+  r309_row_working_fw_600:      probe.rowCountWorkingFw === '600',
+  r308_working_label_simplified: probe.workingLabel === 'working',
+  r306_focus_ring_1:            probe.layoutRingCls.includes('focus-visible:ring-1'),
+  r304_subhint_ls_0_15:         probe.subhintLs === '0.15',
+  r294_pulse_absent:            probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent panel count weight:`, JSON.stringify(results),
+  '\n  recent count:', probe.recentCountText, 'fw=', probe.recentCountFw,
+  '\n  legend panel count fw:', probe.legendCountFw,
+  '\n  row count fw:', probe.rowCountWorkingFw);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-footer-breath-test.mjs

@@ -0,0 +1,142 @@
+/* Round 256 verification: recent-signal panel footer breathing room.
+ *
+ * Pre-R256 the panel was 230×84 with the footer "+ N more flows" text
+ * baseline at y=82, fontSize 8. CSS textDecoration:underline (on hover)
+ * renders ~3-4px below baseline → y ≈ 85-86, BELOW the panel rect
+ * bottom y=84. The hover affordance literally extended past the panel
+ * chrome.
+ *
+ * R256 grows the panel rect from height 84 → 88 (+4 px), keeping
+ * footer y=82 and every interior layout coordinate untouched. The
+ * underline now sits at y≈85-86 inside an 88-tall panel — 2-3 px of
+ * clear room below it, the textDecoration tucks INSIDE the panel
+ * border instead of clipping past it.
+ *
+ * Test scope:
+ *   1. Panel rect height === 88 (DOM-side ground truth).
+ *   2. Footer baseline y === 82 (didn't shift — only the panel grew).
+ *   3. Footer bbox bottom (baseline + descender + reserve for
+ *      underline) < panel rect bottom y. Use getBBox on the text
+ *      element and verify it sits inside the rect.
+ *   4. Fleet of >3 flows so footer mounts visible (R221 always-mount
+ *      + opacity gate; gated visible at flowLinks.length > 3).
+ *   5. Underline on hover stays inside the panel — hover, wait for
+ *      transition, measure underline location via the element's
+ *      bounding rect vs the panel's bounding rect.
+ *
+ * Geometric check (sanity): panel corner (16+230, 16+88) = (246, 104).
+ *   Distance to canvas center (500, 330) = √(254² + 226²) ≈ 339.99.
+ *   Outermost ring radius is 325; corner clears the ring (> 325 → ok).
+ *   Panel still tucked outside any node.
+ */
+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();
+
+// Mock sessions: 4 working agents (alpha/beta/gamma/delta)
+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 messages across 5 distinct flow pairs so flowLinks.length === 5
+// (> 3 → footer mounts visible, the "+ 2 more flows" hint).
+const now = Date.now();
+const msgs = [
+  { id: 'm0', from_alias: 'alpha', to_alias: 'beta',  content: 'hi 1', network_id: 'default', created_at: new Date(now - 1000).toISOString() },
+  { id: 'm1', from_alias: 'beta',  to_alias: 'gamma', content: 'hi 2', network_id: 'default', created_at: new Date(now - 1500).toISOString() },
+  { id: 'm2', from_alias: 'gamma', to_alias: 'delta', content: 'hi 3', network_id: 'default', created_at: new Date(now - 2000).toISOString() },
+  { id: 'm3', from_alias: 'delta', to_alias: 'alpha', content: 'hi 4', network_id: 'default', created_at: new Date(now - 2500).toISOString() },
+  { id: 'm4', from_alias: 'alpha', to_alias: 'gamma', content: 'hi 5', network_id: 'default', created_at: new Date(now - 3000).toISOString() },
+];
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: msgs } }));
+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-recent-panel-more-nav]', { timeout: 10000 });
+await page.waitForTimeout(500);
+
+const probe = await page.evaluate(() => {
+  const panelG = document.querySelector('[data-topo-panel="recent"]');
+  const rect   = panelG?.querySelector('rect');
+  const footer = document.querySelector('[data-recent-panel-more]');
+  const tx = panelG?.getAttribute('transform').match(/translate\(([\d.]+),\s*([\d.]+)\)/);
+  const panelTopY = tx ? +tx[2] : null;
+  const rectH = rect ? +rect.getAttribute('height') : null;
+  const footerY = footer ? +footer.getAttribute('y') : null;
+  // Use getBoundingClientRect for both — getBBox on text inside a
+  // transformed <g> with opacity transition can return zero on some
+  // browser stacks (rev-checked against earlier R203/R215 idioms).
+  // Client-rect math gives consistent ground truth.
+  const rectCR   = rect   ? rect.getBoundingClientRect()   : null;
+  const footerCR = footer ? footer.getBoundingClientRect() : null;
+  return {
+    panelTopY, rectH, footerY,
+    rectCR_bottom:   rectCR   ? rectCR.bottom   : null,
+    footerCR_bottom: footerCR ? footerCR.bottom : null,
+  };
+});
+
+// Hover the footer + measure underline-region overflow vs 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 {
+    hovered: footer?.getAttribute('data-recent-panel-more-hovered'),
+    textDecoration: footer ? window.getComputedStyle(footer).textDecorationLine : null,
+    rectClientBottom: rect?.getBoundingClientRect().bottom ?? null,
+    footerClientBottom: footer?.getBoundingClientRect().bottom ?? null,
+  };
+});
+await browser.close();
+
+// At rest: footer's client-rect bottom should sit at or above (less than)
+// the panel rect's client-rect bottom. Allow 1px sub-pixel slop.
+const restClearance  = (probe.rectCR_bottom != null && probe.footerCR_bottom != null)
+  ? (probe.rectCR_bottom - probe.footerCR_bottom) : null;
+
+// Hover-state: same check, but the underline-on-hover would have shifted
+// the visible bottom downward by the underline's offset. Verifies it
+// still tucks INSIDE the panel chrome.
+const hoverClearance = (hoverProbe.rectClientBottom != null && hoverProbe.footerClientBottom != null)
+  ? (hoverProbe.rectClientBottom - hoverProbe.footerClientBottom) : null;
+
+const results = {
+  panel_height_88:                 probe.rectH === 88,
+  footer_y_unchanged_at_82:        probe.footerY === 82,
+  rest_footer_inside_panel:        restClearance != null && restClearance >= -1,
+  rest_footer_breathing_room:      restClearance != null && restClearance >= 2,  // at least 2px clear at rest
+  hover_state_fires:               hoverProbe.hovered === 'true',
+  hover_underline_applied:         hoverProbe.textDecoration?.includes('underline') === true,
+  hover_footer_inside_panel:       hoverClearance != null && hoverClearance >= -1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent panel footer breath:`, JSON.stringify(results),
+  '\n  panelRectH:', probe.rectH, 'footerY:', probe.footerY,
+  '\n  rest clearance:', restClearance, 'px (rect bottom', probe.rectCR_bottom, 'footer bottom', probe.footerCR_bottom, ')',
+  '\n  hover clearance:', hoverClearance, 'px (rect bottom', hoverProbe.rectClientBottom, 'footer bottom', hoverProbe.footerClientBottom, ')',
+  '\n  hover textDecoration:', hoverProbe.textDecoration);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-hot-header-test.mjs

@@ -0,0 +1,132 @@
+/* Round 129 verification: recent-signal panel header gains a
+ * " · N hot" amber tail when ≥ 1 flowLink has count ≥ 10.
+ *
+ * The hot-lane convention's surfaces:
+ *   R126: canvas midpoint count badge → amber stroke
+ *   R127: recent-signal row count digit → amber + bold
+ *   R129: recent-signal panel HEADER  → " · N hot" amber suffix
+ *
+ * Vertical scan path now reads: header → rows → canvas. Each layer
+ * answers a different scope: header = "how many hot?", rows =
+ * "which ones?", canvas = "where on the topology?".
+ *
+ * Three states:
+ *   A. 3 pairs, all count <  10                  → header "3 flows", no hot tail
+ *   B. 5 pairs, 2 of them count ≥ 10             → header "5 flows · 2 hot", amber tail
+ *   C. 5 pairs, 5 of them count ≥ 10             → header "5 flows · 5 hot"
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(seedPairs) {
+  // seedPairs is an array of [from, to, count] tuples — each pair gets
+  // `count` msgs to make link.count == count after dedup.
+  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 aliasSet = new Set();
+  for (const [a, b] of seedPairs) { aliasSet.add(a); aliasSet.add(b); }
+  const aliases = [...aliasSet];
+  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 = [];
+  let id = 0;
+  for (const [from, to, count] of seedPairs) {
+    for (let i = 0; i < count; i++) {
+      msgs.push({
+        id: `m${id++}`,
+        from_alias: from,
+        to_alias: to,
+        content: 'hi',
+        network_id: 'default',
+        created_at: new Date(now - (20000 + i * 500 + id * 13)).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((n) => document.querySelectorAll('g[data-node]').length === n, aliases.length, { timeout: 30000 });
+  await page.waitForTimeout(500);
+
+  const out = await page.evaluate(() => {
+    const count = document.querySelector('[data-recent-panel-count]');
+    const hot   = document.querySelector('[data-recent-panel-hot-count]');
+    return {
+      countText: count?.textContent,
+      hotText:   hot?.textContent,
+      hotAttr:   hot?.getAttribute('data-recent-panel-hot-count'),
+      hotFill:   hot?.getAttribute('fill'),
+      hotWeight: hot?.getAttribute('font-weight'),
+    };
+  });
+
+  await browser.close();
+  return out;
+}
+
+// State A: all warm
+const a = await probe([
+  ['alpha', 'beta', 4],
+  ['gamma', 'delta', 5],
+  ['epsilon', 'zeta', 3],
+]);
+
+// State B: 5 pairs, 2 hot (≥ 10)
+const b = await probe([
+  ['alpha', 'beta', 12],   // hot
+  ['gamma', 'delta', 15],  // hot
+  ['epsilon', 'zeta', 4],
+  ['eta', 'theta', 6],
+  ['iota', 'kappa', 8],
+]);
+
+// State C: 5 pairs, all 5 hot
+const c = await probe([
+  ['alpha', 'beta', 12],
+  ['gamma', 'delta', 11],
+  ['epsilon', 'zeta', 14],
+  ['eta', 'theta', 13],
+  ['iota', 'kappa', 25],
+]);
+
+const amber = '#fbbf24';
+
+const results = {
+  a_count_3flows:   a.countText === '3 flows',
+  a_noHotTspan:     a.hotText === undefined,
+
+  b_count_5flows:   b.countText === '5 flows',
+  b_hot_text:       b.hotText === ' · 2 hot',
+  b_hot_attr:       b.hotAttr === '2',
+  b_hot_amberFill:  (b.hotFill || '').toLowerCase() === amber,
+  b_hot_boldWeight: b.hotWeight === '700',
+
+  c_count_5flows:   c.countText === '5 flows',
+  c_hot_text:       c.hotText === ' · 5 hot',
+  c_hot_attr:       c.hotAttr === '5',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel hot header:`, JSON.stringify(results),
+  `\n  A=`, a, `\n  B=`, b, `\n  C=`, c);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-panel-hot-tabular-test.mjs

@@ -0,0 +1,113 @@
+/* Round 322 verification: recent-signal panel hot-count tspan picks
+ * up fontVariantNumeric: 'tabular-nums'. Sibling parity with R311's
+ * `{flowLinks.length} flows` tspan which has been tabular since R225.
+ *
+ * Pre-R322 a hotFlowCount crossing 1→10 widened the leading digit
+ * and (parent <text> is textAnchor='end') shifted the whole header
+ * left a few pixels against the panel rect's left edge — visible
+ * micro-jitter every time a new flow crossed the hot threshold.
+ *
+ * 8th surface in the tabular-nums sweep — completes the recent-
+ * signal header (both the flows count AND the hot count lock).
+ *
+ * Contract:
+ *   - [data-recent-panel-hot-count] is present and visible (hot
+ *     count > 0 fixture).
+ *   - Its computed fontVariantNumeric === 'tabular-nums'.
+ *   - R321 timestamp regression: [data-recent-row-ts] still tabular.
+ *   - R320 count weight regression: cold fw=600, hot fw=700.
+ *   - R317 inactive gray-400, R318 active font-medium, R294 pulse absent.
+ */
+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'),
+  ] } });
+});
+const now = Date.now();
+const mkMsg = (i, from_alias, to_alias, secAgo) => ({
+  id: `${from_alias}-${to_alias}-${i}`,
+  from_alias, to_alias, content: `m${i}`,
+  network_id: 'default',
+  created_at: new Date(now - secAgo * 1000).toISOString(),
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  ...Array.from({ length: 4 },  (_, i) => mkMsg(`a${i}`, 'alpha', 'beta',  5 + i)),
+  ...Array.from({ length: 12 }, (_, i) => mkMsg(`b${i}`, 'beta',  'gamma', 5 + i)),
+] } }));
+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-panel-hot-count]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const hot   = document.querySelector('[data-recent-panel-hot-count]');
+  const flows = document.querySelector('[data-recent-panel-count]');
+  const tsels = Array.from(document.querySelectorAll('[data-recent-row-ts]'));
+  const counts = Array.from(document.querySelectorAll('[data-recent-row-count]'));
+  return {
+    hotTabular:    hot ? getComputedStyle(hot).fontVariantNumeric : null,
+    hotText:       hot?.textContent ?? null,
+    hotVisible:    hot?.getAttribute('data-recent-panel-hot-visible') ?? null,
+    flowsTabular:  flows ? getComputedStyle(flows).fontVariantNumeric : null,
+    tsTabular:     tsels.map(t => getComputedStyle(t).fontVariantNumeric),
+    countRows:     counts.map(c => ({
+      isHot: c.getAttribute('data-recent-row-count-hot') === 'true',
+      fw:    getComputedStyle(c).fontWeight,
+    })),
+    layoutInactiveCls: document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
+    layoutActiveCls:   document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
+    pulseCount:        document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const cold = probe.countRows.filter(r => !r.isHot);
+const hot  = probe.countRows.filter(r => r.isHot);
+const hasTab = (s) => /tabular-nums/.test(s || '');
+
+const results = {
+  hot_count_present:           probe.hotText !== null,
+  hot_count_visible:           probe.hotVisible === 'true',
+  hot_count_tabular:           hasTab(probe.hotTabular),
+  // R311 sibling regression — flows count is also tabular.
+  flows_count_tabular:         hasTab(probe.flowsTabular),
+  // R321 regression: ts elements tabular.
+  r321_ts_all_tabular:         probe.tsTabular.length >= 1 && probe.tsTabular.every(hasTab),
+  // R320 regression: count weight tier.
+  r320_cold_fw_600:            cold.every(r => String(r.fw) === '600'),
+  r320_hot_fw_700:             hot.every(r => String(r.fw) === '700'),
+  // R317 / R318 regression.
+  r317_inactive_gray_400:      probe.layoutInactiveCls.includes('text-gray-400'),
+  r318_active_font_medium:     probe.layoutActiveCls.includes('font-medium'),
+  r294_pulse_absent:           probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel hot tabular:`, JSON.stringify(results),
+  '\n  hot text:', JSON.stringify(probe.hotText),
+  '\n  hot tabular:', probe.hotTabular,
+  '\n  flows tabular:', probe.flowsTabular);
+process.exit(ok ? 0 : 1);