@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

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

@@ -0,0 +1,112 @@
+/* Round 148 verification: recent-signal row gains a <title> tooltip
+ * exposing full message context — the row text truncates aliases to
+ * 6 chars (R127) and content to 8, useful for scan-density but
+ * obscures detail. Native SVG <title> reveals the full alias /
+ * content / timestamp on hover. Pinned vs unpinned switches the
+ * click-hint so the user knows the next gesture's effect.
+ *
+ * Mirrors R98's enriched node tooltip at the per-row scope.
+ *
+ * Fleet: alpha sends 12 msgs to beta-with-long-name (HOT), and
+ * beta-with-long-name sends 4 msgs to gamma (warm). Content is
+ * a long string to verify untruncated display.
+ *
+ * States tested:
+ *   - hot row: title contains full from / to / msg count + "hot lane"
+ *     marker + full content + ISO timestamp + pin hint
+ *   - warm row: same shape minus the "hot lane" marker
+ *   - pinned: click-hint flips to "click to release pin"
+ */
+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 {}
+});
+
+// Aliases longer than the row truncation cap (6) so the title's
+// untruncated form is meaningfully different from what's painted.
+const aliasA = 'alpha-runner';
+const aliasB = 'beta-with-long-name';
+const aliasC = 'gamma';
+const longContent = 'this is the full long message body that the row truncates';
+
+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(aliasA, 'working'), mk(aliasB, 'working'), mk(aliasC, 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from, to, ageMs) => ({
+  id, from_alias: from, to_alias: to, content: longContent,
+  network_id: 'default', created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+// 12 alpha→beta = HOT
+for (let i = 0; i < 12; i++) msgs.push(mkMsg(`a${i}`, aliasA, aliasB, 20000 + i * 500));
+// 4 beta→gamma = warm
+for (let i = 0; i < 4; i++)  msgs.push(mkMsg(`b${i}`, aliasB, aliasC, 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="${aliasA}->${aliasB}"]`, { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const readTitle = (key) => page.evaluate((k) => {
+  const row = document.querySelector(`[data-recent-row="${k}"]`);
+  return row?.querySelector('title')?.textContent || '';
+}, key);
+
+const hotTitle  = await readTitle(`${aliasA}->${aliasB}`);
+const warmTitle = await readTitle(`${aliasB}->${aliasC}`);
+
+// Pin the hot row → title's click-hint flips
+await page.locator(`[data-recent-row="${aliasA}->${aliasB}"]`).click();
+await page.waitForTimeout(200);
+const pinnedTitle = await readTitle(`${aliasA}->${aliasB}`);
+
+await browser.close();
+
+const results = {
+  // Hot row
+  hot_hasFullFrom:     hotTitle.includes(aliasA),
+  hot_hasFullTo:       hotTitle.includes(aliasB),
+  hot_hasCount12:      hotTitle.includes('12 msgs'),
+  hot_hasHotMarker:    hotTitle.includes('hot lane'),
+  hot_hasFullContent:  hotTitle.includes(longContent),
+  hot_hasTimestamp:    /last: \d/.test(hotTitle),
+  hot_pinHint:         hotTitle.includes('click to pin'),
+
+  // Warm row
+  warm_hasCount4:      warmTitle.includes('4 msgs'),
+  warm_noHotMarker:    !warmTitle.includes('hot lane'),
+  warm_pinHint:        warmTitle.includes('click to pin'),
+
+  // Pinned row's title flips hint
+  pinned_releaseHint:  pinnedTitle.includes('click to release pin'),
+  pinned_noPinHint:    !pinnedTitle.includes('click to pin · hover to preview'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row title:`, JSON.stringify(results),
+  `\n  hotTitle:\n${hotTitle}`,
+  `\n  warmTitle:\n${warmTitle}`,
+  `\n  pinnedTitle:\n${pinnedTitle}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-ts-alpha-test.mjs

@@ -0,0 +1,100 @@
+/* Round 191 verification: recent-signal row timestamp text
+ * (right edge) picks up the freshness ramp.
+ *
+ * Pre-R191 the timestamp was static opacity=0.55 regardless of
+ * recency. R191 mirrors R160's left-edge pip with its own
+ * alpha range:
+ *   ≤30s   → 0.85
+ *   30-300s → 0.85 → 0.30 smooth decay
+ *   >300s  → 0.30 (stale floor)
+ *
+ * Test:
+ *   3 flows at 5s / 90s / 360s ago. Probe their timestamp text
+ *   on the right of each row.
+ *   - Fresh:  opacity ≈ 0.85
+ *   - Mid:    opacity in (0.55, 0.80)
+ *   - Stale:  opacity ≈ 0.30 (floor)
+ *   - all have data-recent-row-ts-alpha attr matching
+ *   - all have transition 'opacity 200ms ease-out'
+ */
+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: 'f', from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: 'm', from_alias: 'beta',  to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 90000).toISOString() },
+  { id: 's', 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-ts]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const tss = [...document.querySelectorAll('[data-recent-row-ts]')];
+  return tss.map(t => ({
+    key:        t.getAttribute('data-recent-row-ts'),
+    opacity:    parseFloat(t.getAttribute('opacity') || ''),
+    alphaAttr:  parseFloat(t.getAttribute('data-recent-row-ts-alpha') || ''),
+    transition: t.style.transition || getComputedStyle(t).transition,
+    text:       t.textContent,
+  }));
+});
+
+await browser.close();
+
+// Rows are sorted by recency (newest first)
+const [pFresh, pMid, pStale] = probe;
+const hasOpacityTransition = (s) =>
+  (s.transition || '').includes('opacity 200ms') ||
+  /opacity\s+0\.2s|opacity\s+200ms/.test(s.transition || '');
+
+const results = {
+  three_timestamps:         probe.length === 3,
+  fresh_opacity_0p85:       Math.abs(pFresh?.opacity - 0.85) < 0.05,
+  mid_opacity_window:       pMid && pMid.opacity > 0.55 && pMid.opacity < 0.80,
+  stale_opacity_0p30:       Math.abs(pStale?.opacity - 0.30) < 0.05,
+  fresh_alpha_attr_matches: Math.abs(pFresh?.alphaAttr - pFresh?.opacity) < 0.01,
+  mid_alpha_attr_matches:   Math.abs(pMid?.alphaAttr - pMid?.opacity) < 0.01,
+  stale_alpha_attr_matches: Math.abs(pStale?.alphaAttr - pStale?.opacity) < 0.01,
+  ladder_descends:          pFresh && pMid && pStale && pFresh.opacity > pMid.opacity && pMid.opacity > pStale.opacity,
+  all_have_transition:      probe.every(p => hasOpacityTransition(p)),
+  fresh_text_5s:            /^5s$/.test(pFresh?.text || ''),
+  mid_text_1m_or_2m:        /^[12]m$/.test(pMid?.text || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row ts freshness:`, JSON.stringify(results),
+  `\n  probes=`, probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-ts-tabular-test.mjs

@@ -0,0 +1,108 @@
+/* Round 321 verification: recent-signal row freshness timestamp
+ * (lastAt) picks up fontVariantNumeric: 'tabular-nums'.
+ *
+ * The right-aligned (textAnchor="end") timestamp ticks through
+ * 1s..59s / 1m..59m / 1h..24h every panel tick. Pre-R321 a 9s→10s
+ * or 59s→1m crossing slid the chip ~3px in monospace because the
+ * digit '1' has a narrower natural width than '0' / '5' / etc even
+ * in mono fonts. Tabular-nums locks the slot.
+ *
+ * 7th surface in the info-density tabular-nums sweep:
+ *   R224 edge badge / R225 hub digit / R225 panel header /
+ *   R225 recent-row count / R229 group-label count /
+ *   R230 group-label status pips / R321 recent-row timestamp.
+ *
+ * Contract:
+ *   - [data-recent-row-ts] computed style fontVariantNumeric
+ *     contains 'tabular-nums'.
+ *   - R320 cold-row count still fw=600 + hot-row count fw=700
+ *     (regression).
+ *   - 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') ] } });
+});
+// Match the shape topo-recent-row-ts-alpha-test uses — individual
+// message records with created_at (the panel derives link.last_at
+// from these). Network_id default matches the sessions' fixture.
+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-row-ts]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const tsels = Array.from(document.querySelectorAll('[data-recent-row-ts]'));
+  const counts = Array.from(document.querySelectorAll('[data-recent-row-count]'));
+  return {
+    tsTabular:    tsels.map(t => getComputedStyle(t).fontVariantNumeric),
+    tsTexts:      tsels.map(t => t.textContent),
+    countRows:    counts.map(c => ({
+      text:  c.textContent,
+      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 = {
+  ts_at_least_one:           probe.tsTabular.length >= 1,
+  ts_all_tabular_nums:       probe.tsTabular.every(hasTab),
+  // R320 regression — count weight tier.
+  r320_at_least_one_cold:    cold.length >= 1,
+  r320_at_least_one_hot:     hot.length >= 1,
+  r320_cold_fw_600:          cold.every(r => String(r.fw) === '600'),
+  r320_hot_fw_700:           hot.every(r => String(r.fw) === '700'),
+  // R317/R318 chrome 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-row ts tabular:`, JSON.stringify(results),
+  '\n  ts texts:', probe.tsTexts,
+  '\n  ts tabular:', probe.tsTabular);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,95 @@
+/* Round 94 verification: each recent-signal panel row now carries a
+ * right-aligned relative timestamp (e.g. `2s` / `1m`). Composes with
+ * the R56 hover affordance and R57 panel elevation without changing
+ * geometry. Mirror what the R42 active-links chip already shows for
+ * the most-recent flow, but per-row so users can see which flows
+ * are current vs stale.
+ *
+ * Drive the dashboard with messages at known ages — 30s, 5m, 2h —
+ * and assert each row's timestamp matches the expected glyph. Also
+ * verify the timestamp <text> is non-interactive (pointerEvents:none)
+ * so it doesn't steal hover from the row hitbox.
+ */
+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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+    sessionStorage.setItem('anet_v3_auth', '1');
+  } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const 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')] } });
+});
+
+// Mock messages so flowLinks aggregates them. Three flows at increasing
+// ages — the panel sorts most-recent first (per the recent-signal
+// aggregator), so row 0 is the freshest.
+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(),
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  mkMsg('m1', 'alpha', 'beta', 'fix-the-bug',    30 * 1000),       // 30s ago → "30s"
+  mkMsg('m2', 'gamma', 'delta', 'review-the-pr',  5 * 60 * 1000),   // 5m ago  → "5m"
+  mkMsg('m3', 'alpha', 'gamma', 'deploy-stage',   2 * 60 * 60 * 1000), // 2h ago → "2h"
+] } }));
+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 });
+// Wait for at least one recent-signal timestamp to render.
+await page.waitForSelector('[data-recent-row-ts]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const rows = await page.evaluate(() => {
+  return [...document.querySelectorAll('[data-recent-row]')].map(g => {
+    const rowKey  = g.getAttribute('data-recent-row');
+    const tsEl    = g.querySelector('[data-recent-row-ts]');
+    const rowText = g.querySelector('text:not([data-recent-row-ts])')?.textContent || '';
+    const tsText  = tsEl?.textContent || null;
+    const tsPointerEvents = tsEl ? getComputedStyle(tsEl).pointerEvents : null;
+    return { rowKey, rowText, tsText, tsPointerEvents };
+  });
+});
+
+await browser.close();
+
+const results = {
+  threeRows:           rows.length === 3,
+  // Row 0 (freshest) should be alpha→beta around "30s" or "29s" etc.
+  row0_hasFreshTs:     rows[0] && /^[2-9]\d?s$/.test(rows[0].tsText || ''),
+  // Row 1 should read 5m (minutes precision).
+  row1_minuteTs:       rows[1] && /^[4-6]m$/.test(rows[1].tsText || ''),
+  // Row 2 should read ~2h.
+  row2_hourTs:         rows[2] && /^[12]h$/.test(rows[2].tsText || ''),
+  // ts <text> must be non-interactive so it doesn't intercept the row hover.
+  ts_nonInteractive:   rows.every(r => r.tsPointerEvents === 'none'),
+  // Row content shows from/to/count/content via the existing layout.
+  // R138: arrow notation unified to unicode `→` (was ASCII `->`),
+  // matching filter pills / tooltips / edge-badge titles. Assertion
+  // flipped to the new typography contract.
+  row0_hasArrow:       rows[0]?.rowText.includes('→'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row ts:`, JSON.stringify(results),
+  `\n  rows=`, rows);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,119 @@
+/* Round 138 verification: recent-signal row typography unifies
+ * with the rest of the topology UI.
+ *
+ * Pre-R138 row text:   "alpha -> beta / 12 / hi"
+ * Post-R138 row text:  "alpha → beta · 12 · hi"
+ *
+ * Why: filter pills (R119), node tooltips (R98), active-links
+ * chip tooltip (R114), edge-badge titles all use the unicode
+ * arrow `→` and the data-delimiter ` · `. The recent-signal row
+ * was the lone holdout using ASCII `->` and ` / `. R138 brings
+ * it in line so the row reads like every other surface.
+ *
+ * Checks:
+ *   - Row text contains "→" (unicode arrow)
+ *   - Row text does NOT contain "->" (ASCII)
+ *   - Row text uses " · " (middle dot) as separator
+ *   - Row text does NOT contain " / " (forward slash)
+ *   - Hot count tspan still works (R127 contract preserved)
+ *   - Row pin still works (R116 contract 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: 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, to, ageMs) => ({
+  id, from_alias: from, to_alias: to, content: 'hello',
+  network_id: 'default', created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+// alpha→beta: 12 msgs (hot)
+for (let i = 0; i < 12; i++) msgs.push(mkMsg(`a${i}`, 'alpha', 'beta', 20000 + i * 500));
+// beta→gamma: 4 msgs (warm)
+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}"]`);
+  const text = row?.querySelector('text');
+  return {
+    fullText: text?.textContent,
+    pinned:   row?.getAttribute('data-recent-row-pinned'),
+    hot:      row?.getAttribute('data-recent-row-hot'),
+  };
+}, key);
+
+const a2b = await inspect('alpha->beta');
+const b2g = await inspect('beta->gamma');
+
+// Verify pin still works (R116 invariant)
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.waitForTimeout(200);
+const a2bPinned = await inspect('alpha->beta');
+await page.keyboard.press('Escape');
+await page.waitForTimeout(200);
+
+await browser.close();
+
+// Note: data-recent-row attribute itself still uses "alpha->beta" as
+// the link.key (computed from from + '->' + to upstream). That's
+// internal data, not user-visible text — R138 only touches the
+// rendered <text> content.
+const hasUnicodeArrow = (s) => !!s && s.includes('→');
+const lacksAsciiArrow = (s) => !!s && !s.includes('->');
+const usesMiddleDot   = (s) => !!s && s.includes('·');
+const lacksSlash      = (s) => !!s && !/\s\/\s/.test(s);
+
+const results = {
+  a2b_hasUnicodeArrow: hasUnicodeArrow(a2b.fullText),
+  a2b_lacksAsciiArrow: lacksAsciiArrow(a2b.fullText),
+  a2b_usesMiddleDot:   usesMiddleDot(a2b.fullText),
+  a2b_lacksSlash:      lacksSlash(a2b.fullText),
+
+  b2g_hasUnicodeArrow: hasUnicodeArrow(b2g.fullText),
+  b2g_usesMiddleDot:   usesMiddleDot(b2g.fullText),
+
+  // R127 hot preserved
+  a2b_hotAttr:         a2b.hot === 'true',
+  b2g_notHot:          b2g.hot === 'false',
+
+  // R116 pin preserved
+  pin_landed:          a2bPinned.pinned === 'true',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row typography:`, JSON.stringify(results),
+  `\n  a2b=`, a2b,
+  `\n  b2g=`, b2g,
+  `\n  a2bPinned=`, a2bPinned);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-signal-empty-hint-test.mjs

@@ -0,0 +1,73 @@
+/* Round 110 verification: recent-signal empty placeholder gains a
+ * sub-text hint so the empty state reads as intentional invitation
+ * rather than a stuck-loading state. Primary line "no flow yet"
+ * stays at the same position semantics (now y=54 instead of y=60
+ * to balance the two-line stack within the panel); sub-line at
+ * y=68 says "send a message between agents".
+ *
+ * Verifies:
+ *   - both lines render when flowLinks is empty
+ *   - both lines disappear when flowLinks has content
+ *   - data-recent-signal-empty + data-recent-signal-empty-hint
+ *     attributes are stable test hooks
+ */
+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 fresh = new Date(Date.now() - 30 * 1000).toISOString();
+
+const probe = async (withFlow) => {
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 1200 } });
+  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 {}
+  });
+  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')] } });
+  });
+  const now = Date.now();
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: withFlow ? [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - 10000).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.waitForTimeout(600);
+  const data = await page.evaluate(() => ({
+    empty:     document.querySelector('[data-recent-signal-empty]')?.textContent || null,
+    emptyHint: document.querySelector('[data-recent-signal-empty-hint]')?.textContent || null,
+    rowCount:  document.querySelectorAll('[data-recent-row]').length,
+  }));
+  await ctx.close();
+  return data;
+};
+
+const empty = await probe(false);
+const full  = await probe(true);
+await browser.close();
+
+const results = {
+  empty_primaryLineShown:  empty.empty === 'no flow yet',
+  empty_hintShown:         /^send a message between agents$/.test(empty.emptyHint || ''),
+  empty_noRows:            empty.rowCount === 0,
+  full_primaryGone:        full.empty === null,
+  full_hintGone:           full.emptyHint === null,
+  full_rowsRendered:       full.rowCount >= 1,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-signal empty hint:`, JSON.stringify(results),
+  `\n  empty=`, empty,
+  `\n  full=`,  full);
+process.exit(ok ? 0 : 1);