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

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

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

@@ -0,0 +1,124 @@
+/* Round 221 verification: recent-signal panel "+N more" footer
+ * always-mounts; visibility crossfades via wrapper <g> opacity
+ * instead of React conditional mount/unmount on flowLinks > 3.
+ *
+ * Pre-R221 a fleet's 4th flow appearing snap-popped the footer
+ * into the canvas; tapering back to 3 flows snap-removed it.
+ * Same threshold-crossing snap R215 closed for edge midpoint
+ * badges, now applied to the recent-panel footer surface.
+ *
+ * Test scenarios:
+ *   A. 2 flows (below threshold)  → footer in DOM, visible='false',
+ *                                    opacity=0, pointerEvents='none',
+ *                                    aria-hidden='true', role unset,
+ *                                    tabIndex=-1
+ *   B. 5 flows (visible threshold) → footer visible='true',
+ *                                    opacity>0, role='link', tabIndex=0
+ *   Both: inline transition includes 'opacity 300ms'.
+ *   moreCount text content clamps at 0 / 2 respectively.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+async function setup(n) {
+  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();
+  // Need N distinct flow pairs → mock N messages with distinct alias pairs
+  const pairs = [
+    ['alpha', 'beta'], ['beta', 'gamma'], ['gamma', 'delta'],
+    ['delta', 'alpha'], ['alpha', 'gamma'], ['beta', 'delta'],
+  ];
+  const msgs = pairs.slice(0, n).map((p, i) => ({
+    id: `m${i}`, from_alias: p[0], to_alias: p[1], content: 'hi',
+    network_id: 'default', created_at: new Date(now - (1000 + i * 500)).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, state: 'attached' });
+  await page.waitForTimeout(400);
+  return page;
+}
+
+const probe = async (page) => page.evaluate(() => {
+  const el = document.querySelector('[data-recent-panel-more-nav]');
+  if (!el) return null;
+  const cs = getComputedStyle(el);
+  const txt = el.querySelector('[data-recent-panel-more]');
+  return {
+    visible:        el.getAttribute('data-recent-panel-more-visible'),
+    role:           el.getAttribute('role'),
+    tabIndex:       el.getAttribute('tabindex'),
+    ariaHidden:     el.getAttribute('aria-hidden'),
+    opacity:        parseFloat(cs.opacity),
+    computedPointer:cs.pointerEvents,
+    transition:     el.style.transition,
+    moreText:       txt?.textContent,
+    moreCount:      txt?.getAttribute('data-recent-panel-more'),
+  };
+});
+
+// Scenario A: 2 flows (below threshold)
+const pageA = await setup(2);
+const probeA = await probe(pageA);
+await pageA.close();
+
+// Scenario B: 5 flows (above threshold)
+const pageB = await setup(5);
+const probeB = await probe(pageB);
+await pageB.close();
+await browser.close();
+
+const results = {
+  // Scenario A (2 flows, hidden)
+  A_present_in_dom:        !!probeA,
+  A_visible_false:         probeA?.visible === 'false',
+  A_opacity_0:             probeA?.opacity === 0,
+  A_pointer_none:          probeA?.computedPointer === 'none',
+  A_aria_hidden:           probeA?.ariaHidden === 'true',
+  A_role_unset:            probeA?.role === null || probeA?.role === '',
+  A_tabindex_neg:          probeA?.tabIndex === '-1',
+  A_more_count_0:          probeA?.moreCount === '0',  // clamped at 0
+
+  // Scenario B (5 flows, visible)
+  B_present_in_dom:        !!probeB,
+  B_visible_true:          probeB?.visible === 'true',
+  B_opacity_positive:      (probeB?.opacity ?? 0) > 0,
+  B_pointer_all:           probeB?.computedPointer === 'all',
+  B_role_link:             probeB?.role === 'link',
+  B_tabindex_0:            probeB?.tabIndex === '0',
+  B_more_count_2:          probeB?.moreCount === '2',
+  B_text_says_2:           /^\+\s*2\s*more flow/.test(probeB?.moreText || ''),
+
+  // Both scenarios have opacity 300ms transition
+  A_has_transition:        /opacity\s+(?:300ms|0\.3s)/.test(probeA?.transition || ''),
+  B_has_transition:        /opacity\s+(?:300ms|0\.3s)/.test(probeB?.transition || ''),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel more crossfade:`, JSON.stringify(results),
+  `\n  probeA (2 flows hidden):`, probeA,
+  `\n  probeB (5 flows visible):`, probeB);
+process.exit(ok ? 0 : 1);

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