@sleep2agi/agent-network-dashboard 0.4.6-preview.31 → 0.4.6-preview.310

package/scripts/topo-recent-row-pin-spacing-test.mjs

@@ -0,0 +1,137 @@
+/* Round 220 verification (milestone): recent-signal row text completes
+ * the pin-signature typography triple (R218 group labels / R219
+ * legend rows / R220 recent-signal rows). All three label-based
+ * interactive surfaces now read "locked in" at type level on pin.
+ *
+ * Test (cyber dark, 4 working sessions + 3 mock flows so recent-
+ * signal panel renders 3 rows):
+ *   1. 3 [data-recent-row-text] rows render.
+ *   2. Idle: all pinned='false', spacing 'normal' or 0px.
+ *   3. Inline transition includes 'letter-spacing 150ms'.
+ *   4. Click first row to pin it.
+ *   5. First row: pinned='true', spacing ≈ 0.5px.
+ *   6. Other rows stay unpinned + 0 spacing.
+ *   7. Click pinned row again → unpin → back to 0.
+ *   8. Hover (not pin) does NOT trigger letter-spacing spread —
+ *      pin-exclusive signature (proven by hover-without-click test).
+ */
+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'), mk('delta'),
+  ] } });
+});
+
+const now = Date.now();
+const msgs = [
+  { id: '1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - 2000).toISOString() },
+  { id: '2', from_alias: 'beta',  to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: '3', from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 8000).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-row-text]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-recent-row-text]')].map(el => {
+    const cs = getComputedStyle(el);
+    return {
+      key:         el.getAttribute('data-recent-row-text'),
+      pinned:      el.getAttribute('data-recent-row-text-pinned'),
+      spacing:     cs.letterSpacing,
+      transition:  el.style.transition,
+    };
+  });
+});
+
+const idle = await probe();
+const firstKey = idle[0]?.key;
+
+// Hover-without-pin probe: hover the first row, verify spacing
+// stays at 0 (pin-exclusive signature, not triggered by hover)
+await page.hover(`[data-recent-row="${firstKey}"]`);
+await page.waitForTimeout(200);
+const hovered = await probe();
+await page.mouse.move(0, 0);
+await page.waitForTimeout(180);
+
+// Click to pin
+await page.click(`[data-recent-row="${firstKey}"]`);
+await page.waitForTimeout(200);
+const pinned = await probe();
+
+// Click again to unpin
+await page.click(`[data-recent-row="${firstKey}"]`);
+await page.waitForTimeout(200);
+const unpinned = await probe();
+
+await browser.close();
+
+const near = (s, want, tol = 0.15) => {
+  if (want === 0 && (s === 'normal' || s === '0px' || s === '0' || !s)) return true;
+  const got = parseFloat(s || '0');
+  return Math.abs(got - want) < tol;
+};
+const hasLetterSpacingT = (s) => /letter-spacing\s+(?:150ms|0\.15s)/.test(s || '');
+
+const firstIdle    = idle.find(p => p.key === firstKey);
+const firstHovered = hovered.find(p => p.key === firstKey);
+const firstPinned  = pinned.find(p => p.key === firstKey);
+const otherPinned  = pinned.find(p => p.key !== firstKey);
+const firstUnpin   = unpinned.find(p => p.key === firstKey);
+
+const results = {
+  three_rows_present:       idle.length === 3,
+  all_idle_unpinned:        idle.every(p => p.pinned === 'false'),
+  all_idle_spacing_zero:    idle.every(p => near(p.spacing, 0)),
+  all_have_transition:      idle.every(p => hasLetterSpacingT(p.transition)),
+
+  // Pin-exclusive: hover does NOT trigger letter-spacing spread
+  hovered_pinned_false:     firstHovered?.pinned === 'false',
+  hovered_spacing_zero:     near(firstHovered?.spacing, 0),
+
+  // Pin click triggers spread
+  first_pinned_attr:        firstPinned?.pinned === 'true',
+  first_pinned_spacing:     near(firstPinned?.spacing, 0.5),
+  other_stays_unpinned:     otherPinned?.pinned === 'false',
+  other_spacing_unchanged:  near(otherPinned?.spacing, 0),
+
+  // Unpin returns to 0
+  unpin_attr_false:         firstUnpin?.pinned === 'false',
+  unpin_spacing_zero:       near(firstUnpin?.spacing, 0),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row pin spacing:`, JSON.stringify(results),
+  `\n  idle:`,    idle,
+  `\n  hovered:`, hovered,
+  `\n  pinned:`,  pinned,
+  `\n  unpinned:`,unpinned);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,126 @@
+/* Round 116 verification: recent-signal row click pins the edge.
+ * R56 made hover transient; R116 makes click sticky — survives
+ * mouseleave, releases on second click or Esc. activeEdgeKey =
+ * hoveredEdgeKey ?? pinnedEdgeKey, so hover-while-pinned previews
+ * another edge transiently and mouseleave falls back to the pin.
+ *
+ * Drives 2 flow rows. Click row 0 → row's aria-pressed=true,
+ * data-recent-row-pinned=true, the edge stays bright after mouseleave
+ * (non-endpoints stay dim, endpoint ring stays). Click row 0 again
+ * → release. Pin row 0, hover row 1 → row-1 preview wins; leave →
+ * row-0 pin restores. Esc clears.
+ */
+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, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', 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',  30 * 1000),
+  mkMsg('m2', 'gamma', 'delta', 60 * 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-row]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const rowState = (key) => page.evaluate((k) => {
+  const g = document.querySelector(`[data-recent-row="${k}"]`);
+  return {
+    pinned: g?.getAttribute('data-recent-row-pinned') || '',
+    aria:   g?.getAttribute('aria-pressed') || '',
+  };
+}, key);
+const endpointRingFor = (alias) => page.evaluate((a) => {
+  const g = document.querySelector(`g[data-node="${a}"]`);
+  return !!g?.querySelector('[data-edge-endpoint-ring]');
+}, alias);
+
+const before = await rowState('alpha->beta');
+
+// Click row 0 → pin.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterPin       = await rowState('alpha->beta');
+const alphaRingPin   = await endpointRingFor('alpha');
+const betaRingPin    = await endpointRingFor('beta');
+const gammaRingPin   = await endpointRingFor('gamma');
+
+// Click again → release.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterRelease     = await rowState('alpha->beta');
+const alphaRingRelease = await endpointRingFor('alpha');
+
+// Pin row 0 again, hover row 1 — preview wins.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(200);
+await page.locator('[data-recent-row="gamma->delta"]').hover();
+await page.waitForTimeout(300);
+const alphaWhileHoverGamma = await endpointRingFor('alpha');
+const gammaWhileHover      = await endpointRingFor('gamma');
+
+// Leave gamma row — row-0 pin restores.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const alphaAfterLeave = await endpointRingFor('alpha');
+const gammaAfterLeave = await endpointRingFor('gamma');
+
+// Esc clears.
+await page.keyboard.press('Escape');
+await page.waitForTimeout(300);
+const afterEsc       = await rowState('alpha->beta');
+const alphaAfterEsc  = await endpointRingFor('alpha');
+
+await browser.close();
+
+const results = {
+  before_notPinned:         before.pinned === 'false' && before.aria === 'false',
+  pin_attrTrue:             afterPin.pinned === 'true' && afterPin.aria === 'true',
+  pin_endpointsLit:         alphaRingPin === true && betaRingPin === true,
+  pin_nonEndpointDark:      gammaRingPin === false,
+  releaseAfterReclick:      afterRelease.pinned === 'false' && alphaRingRelease === false,
+  hoverPreview_gammaLit:    gammaWhileHover === true,
+  hoverPreview_alphaDark:   alphaWhileHoverGamma === false,
+  leave_pinRestored:        alphaAfterLeave === true && gammaAfterLeave === false,
+  esc_clearsPin:            afterEsc.pinned === 'false' && alphaAfterEsc === false,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row pin:`, JSON.stringify(results),
+  `\n  afterPin=`,     afterPin,
+  `\n  rings@pin: alpha=`, alphaRingPin, ' beta=', betaRingPin, ' gamma=', gammaRingPin,
+  `\n  afterRelease=`, afterRelease,
+  `\n  hoverPreview: alpha=`, alphaWhileHoverGamma, ' gamma=', gammaWhileHover,
+  `\n  afterLeave: alpha=`, alphaAfterLeave, ' gamma=', gammaAfterLeave,
+  `\n  afterEsc=`,     afterEsc);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,91 @@
+/* Round 104 verification: recent-signal panel rows get a subtle
+ * row-background tint on hover. R56 already brightens the matching
+ * edge on the canvas, but the panel row itself stayed flat — the
+ * row now has visible feedback at the source surface.
+ *
+ * Driver: 3 flow rows. Initial state — all hitbox rects are
+ * transparent. Hover row 0 — its rect fills with the accent colour
+ * at low alpha + data-recent-row-hovered="true"; the other two rows
+ * stay transparent + "false". Mouseleave — back to all-false.
+ */
+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, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', 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',  20 * 1000),
+  mkMsg('m2', 'gamma', 'delta', 30 * 1000),
+  mkMsg('m3', 'alpha', 'gamma', 40 * 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-row]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const readRows = () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-recent-row]')].map(g => {
+    const rect = g.querySelector('rect');
+    return {
+      key:       g.getAttribute('data-recent-row'),
+      hovered:   g.getAttribute('data-recent-row-hovered'),
+      rectFill:  rect?.getAttribute('fill') || '',
+      rectOpac:  rect?.getAttribute('opacity') || '',
+    };
+  });
+});
+
+const before = await readRows();
+
+// Hover the first row.
+await page.locator('[data-recent-row]').first().hover();
+await page.waitForTimeout(250);
+const duringHover = await readRows();
+
+// Move pointer away.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterLeave = await readRows();
+
+await browser.close();
+
+const results = {
+  before_allTransparent:      before.every(r => r.rectFill === 'transparent' && r.hovered === 'false'),
+  hover_firstRowTinted:       duringHover[0]?.hovered === 'true' && duringHover[0]?.rectFill !== 'transparent',
+  hover_otherRowsUnchanged:   duringHover.slice(1).every(r => r.hovered === 'false' && r.rectFill === 'transparent'),
+  hover_opacityVisibleButLow: duringHover[0] && parseFloat(duringHover[0].rectOpac) > 0 && parseFloat(duringHover[0].rectOpac) < 0.3,
+  leave_restored:             afterLeave.every(r => r.rectFill === 'transparent' && r.hovered === 'false'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row tint:`, JSON.stringify(results),
+  `\n  before=`,     before,
+  `\n  duringHover=`, duringHover,
+  `\n  afterLeave=`,  afterLeave);
+process.exit(ok ? 0 : 1);

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