@sleep2agi/agent-network-dashboard 0.4.6-preview.15 → 0.4.6-preview.151

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-more-nav-test.mjs

@@ -0,0 +1,127 @@
+/* Round 133 verification: R128's "+N more flows" footer becomes a
+ * clickable nav to /messages. R128 introduced the truncation hint
+ * as pure metadata; R133 lets the user act on it.
+ *
+ * Three states tested:
+ *   A. Click footer → navigation lands on /messages
+ *   B. Hover footer → opacity rises 0.55 → 0.85, underline appears
+ *   C. Leave hover → opacity drops back, underline gone
+ *
+ * Plus: footer carries role="link" + cursor:pointer + a tooltip
+ * referencing /messages, all for discoverability and a11y.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+const aliases = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'];
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: aliases.map(mk) } });
+});
+
+const now = Date.now();
+const msgs = [];
+// 5 distinct pairs → forces R128 footer with "+ 2 more flows"
+for (let i = 0; i < 5; i++) {
+  msgs.push({
+    id: `m${i}`,
+    from_alias: aliases[i],
+    to_alias:   aliases[(i + 1) % aliases.length],
+    content: 'hi',
+    network_id: 'default',
+    created_at: new Date(now - (20000 + i * 1000)).toISOString(),
+  });
+}
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 6, { timeout: 30000 });
+await page.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const beforeHover = await page.evaluate(() => {
+  const wrap = document.querySelector('[data-recent-panel-more-nav]');
+  const text = wrap?.querySelector('text[data-recent-panel-more]');
+  return {
+    role:        wrap?.getAttribute('role'),
+    tabindex:    wrap?.getAttribute('tabindex'),
+    cursor:      (wrap?.getAttribute('style') || '').includes('pointer'),
+    title:       wrap?.querySelector('title')?.textContent,
+    opacity:     text?.getAttribute('opacity'),
+    underline:   text?.getAttribute('text-decoration'),
+    moreCount:   text?.getAttribute('data-recent-panel-more'),
+  };
+});
+
+// Hover the footer
+await page.locator('[data-recent-panel-more-nav]').hover();
+await page.waitForTimeout(250);
+const onHover = await page.evaluate(() => {
+  const text = document.querySelector('[data-recent-panel-more-nav] text');
+  return {
+    opacity:   text?.getAttribute('opacity'),
+    underline: text?.getAttribute('text-decoration'),
+  };
+});
+
+// Move away → restore
+await page.mouse.move(10, 10);
+await page.waitForTimeout(250);
+const afterLeave = await page.evaluate(() => {
+  const text = document.querySelector('[data-recent-panel-more-nav] text');
+  return {
+    opacity:   text?.getAttribute('opacity'),
+    underline: text?.getAttribute('text-decoration'),
+  };
+});
+
+// Click → expect /messages navigation
+await page.locator('[data-recent-panel-more-nav]').click();
+await page.waitForURL('**/messages', { timeout: 10000 });
+const finalUrl = page.url();
+
+await browser.close();
+
+const results = {
+  before_roleLink:       beforeHover.role === 'link',
+  before_tabIndex0:      beforeHover.tabindex === '0',
+  before_cursorPointer:  beforeHover.cursor,
+  before_titleMentionsMessages: (beforeHover.title || '').includes('/messages'),
+  before_moreCount2:     beforeHover.moreCount === '2',
+  before_opacity55:      beforeHover.opacity === '0.55',
+  before_noUnderline:    beforeHover.underline === 'none' || !beforeHover.underline,
+
+  hover_opacity85:       onHover.opacity === '0.85',
+  hover_underline:       onHover.underline === 'underline',
+
+  leave_opacityRestored: afterLeave.opacity === '0.55',
+  leave_underlineGone:   afterLeave.underline === 'none' || !afterLeave.underline,
+
+  click_navigatedToMessages: /\/messages$/.test(finalUrl),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel more nav:`, JSON.stringify(results),
+  `\n  before=`, beforeHover,
+  `\n  onHover=`, onHover,
+  `\n  afterLeave=`, afterLeave,
+  `\n  finalUrl=`, finalUrl);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,106 @@
+/* Round 128 verification: "+N more flows" overflow hint in the
+ * recent-signal panel.
+ *
+ * The panel renders top 3 flowLinks via .slice(0, 3). When the
+ * fleet has > 3 active flows, the rest silently disappear — the
+ * R96 "X flows" header reports the total but doesn't make
+ * truncation explicit. R128 adds a muted italic footer
+ *   "+ N more flow(s)"
+ * inside the existing panel (y=82, between row-3 baseline and the
+ * panel bottom at y=84), only when flowLinks.length > 3.
+ *
+ * Three states tested:
+ *   - 5 distinct flow pairs       → footer shows "+ 2 more flows"
+ *   - exactly 3 flow pairs        → footer absent
+ *   - 0 flows (empty panel)       → footer absent (R45 placeholder wins)
+ *
+ * Note: the test seeds (count) messages per pair so each unique
+ * (from→to) pair becomes ONE flowLink (deduped). Pairs > 3 force
+ * the hint; pairs ≤ 3 don't.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(pairCount) {
+  const browser = await chromium.launch({ headless: true });
+  const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(() => {
+    try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+  });
+
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  const aliases = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'];
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const mk = (alias) => ({
+      alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+      network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    });
+    await route.fulfill({ response: r, json: { ...b, sessions: aliases.map(mk) } });
+  });
+
+  const now = Date.now();
+  const msgs = [];
+  // Make pairCount distinct (from→to) pairs, 1 msg each, ascending age
+  for (let i = 0; i < pairCount; i++) {
+    msgs.push({
+      id: `m${i}`,
+      from_alias: aliases[i],
+      to_alias:   aliases[(i + 1) % aliases.length],
+      content: 'hi',
+      network_id: 'default',
+      created_at: new Date(now - (20000 + i * 1000)).toISOString(),
+    });
+  }
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+  await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+  const page = await ctx.newPage();
+  await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+  await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 6, { timeout: 30000 });
+  await page.waitForTimeout(500);
+
+  const out = await page.evaluate(() => {
+    const el = document.querySelector('[data-recent-panel-more]');
+    const rows = document.querySelectorAll('[data-recent-row]').length;
+    const headerCount = document.querySelector('[data-recent-panel-count]')?.textContent;
+    return {
+      footerPresent: !!el,
+      footerText:    el?.textContent?.trim(),
+      footerAttr:    el?.getAttribute('data-recent-panel-more'),
+      rows,
+      headerCount,
+    };
+  });
+
+  await browser.close();
+  return out;
+}
+
+const five  = await probe(5);
+const three = await probe(3);
+const zero  = await probe(0);
+
+const results = {
+  five_footerPresent:  five.footerPresent,
+  five_footerText:     five.footerText === '+ 2 more flows',
+  five_footerAttr:     five.footerAttr === '2',
+  five_rowsCapped3:    five.rows === 3,
+  five_headerSaysFive: five.headerCount?.startsWith('5'),
+
+  three_footerAbsent:  !three.footerPresent,
+  three_rowsExactly3:  three.rows === 3,
+
+  zero_footerAbsent:   !zero.footerPresent,
+  zero_rowsZero:       zero.rows === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-panel more:`, JSON.stringify(results),
+  `\n  five=`, five, `\n  three=`, three, `\n  zero=`, zero);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,110 @@
+/* Round 127 verification: recent-signal panel row mirrors R126's
+ * canvas hot-badge convention. When link.count >= 10 the count
+ * digit inside the row text renders in amber (#d97706 light,
+ * #fbbf24 dark) + bold (font-weight 700). Surrounding alias text +
+ * separators stay in legendText/legendHeadline.
+ *
+ * Fleet:
+ *   alpha → beta:  12 msgs → HOT row, count tspan amber+bold
+ *   beta  → gamma:  4 msgs → warm row, count tspan default
+ *
+ * Path:
+ *   1. recent panel has 2 rows; data-recent-row-hot reflects bucket
+ *   2. alpha→beta row: data-recent-row-count-hot tspan present, amber
+ *   3. beta→gamma row: data-recent-row-count (non-hot) tspan present
+ *   4. Symmetry with R126: the canvas badge for alpha→beta and the
+ *      recent-row count for alpha→beta both render the same amber
+ *      hex.
+ */
+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_alias, to_alias, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+for (let i = 0; i < 12; i++) msgs.push(mkMsg(`a${i}`, 'alpha', 'beta',  20000 + i * 500));
+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}"]`);
+  if (!row) return null;
+  const hotTspan = row.querySelector('[data-recent-row-count-hot]');
+  const warmTspan = row.querySelector('[data-recent-row-count]');
+  return {
+    hot:           row.getAttribute('data-recent-row-hot'),
+    hotTspanText:  hotTspan?.textContent,
+    hotTspanFill:  hotTspan?.getAttribute('fill'),
+    hotTspanWeight: hotTspan?.getAttribute('font-weight'),
+    warmTspanText: warmTspan?.textContent,
+  };
+}, key);
+
+const a2b = await inspect('alpha->beta');
+const b2g = await inspect('beta->gamma');
+
+// Also assert the canvas badge for alpha→beta still flips to the
+// same amber stroke — symmetry of canvas + panel hot signals.
+const badgeStroke = await page.evaluate(() => {
+  const g = document.querySelector('[data-edge-count-badge="alpha->beta"]');
+  return g?.querySelector('circle')?.getAttribute('stroke');
+});
+
+await browser.close();
+
+// Dark theme amber: #fbbf24
+const amberHex = '#fbbf24';
+
+const results = {
+  a2b_attrHot:        a2b !== null && a2b.hot === 'true',
+  a2b_hotTspan:       a2b !== null && a2b.hotTspanText === '12',
+  a2b_amberFill:      a2b !== null && (a2b.hotTspanFill || '').toLowerCase() === amberHex,
+  a2b_boldWeight:     a2b !== null && a2b.hotTspanWeight === '700',
+  a2b_noWarmTspan:    a2b !== null && a2b.warmTspanText === undefined,
+
+  b2g_attrNotHot:     b2g !== null && b2g.hot === 'false',
+  b2g_warmTspan:      b2g !== null && b2g.warmTspanText === '4',
+  b2g_noHotTspan:     b2g !== null && a2b !== null && b2g.hotTspanText === undefined,
+
+  symmetric_badgeAmber: (badgeStroke || '').toLowerCase() === amberHex,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row hot:`, JSON.stringify(results),
+  `\n  a2b=`, a2b,
+  `\n  b2g=`, b2g,
+  `\n  canvas badge stroke for alpha→beta =`, badgeStroke);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-hover-lift-test.mjs

@@ -0,0 +1,128 @@
+/* Round 143 verification: recent-signal panel rows lift 1px on
+ * hover or pin. Closes the "interactive surface elevates" idiom
+ * across four nested canvas-region scopes:
+ *   R51  node hover-lift (canvas element)        → translateY(-2px)
+ *   R135 overlay panels (canvas chrome)          → drop-shadow boost
+ *   R142 group boxes (canvas-side per-team)      → drop-shadow filter
+ *   R143 recent-signal rows (panel content)      → translateY(-1px)
+ *
+ * Smaller layer = smaller lift (1px row, 2px node, drop-shadow
+ * panel/box). Each layer signals interactivity in its own
+ * vocabulary.
+ *
+ * States:
+ *   1. Idle row: data-recent-row-lifted="false", no transform
+ *   2. Hover row → lifted=true, transform contains translateY(-1px)
+ *   3. Leave hover → restored to flat
+ *   4. Click to pin → lifted=true (pin keeps the lift)
+ *   5. Esc → cleared back to flat
+ */
+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 msgs = [];
+// 3 distinct pairs → 3 recent-signal rows
+const pairs = [['alpha', 'beta'], ['beta', 'gamma'], ['gamma', 'alpha']];
+pairs.forEach(([from, to], i) => {
+  msgs.push({
+    id: `m${i}`,
+    from_alias: from,
+    to_alias: to,
+    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 === 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}"]`);
+  return {
+    lifted:    row?.getAttribute('data-recent-row-lifted'),
+    hovered:   row?.getAttribute('data-recent-row-hovered'),
+    pinned:    row?.getAttribute('data-recent-row-pinned'),
+    transform: row?.getAttribute('style')?.match(/translateY\([^)]+\)/)?.[0],
+  };
+}, key);
+
+// State 1: idle baseline (no hover, no pin)
+const s1 = await inspect('alpha->beta');
+
+// State 2: hover alpha->beta row
+await page.locator('[data-recent-row="alpha->beta"]').hover();
+await page.waitForTimeout(250);
+const s2_hovered = await inspect('alpha->beta');
+const s2_other   = await inspect('beta->gamma');
+
+// State 3: leave hover (mouse far away to clear all panel hovers)
+await page.mouse.move(700, 350);
+await page.waitForTimeout(250);
+const s3 = await inspect('alpha->beta');
+
+// State 4: click row to pin
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.waitForTimeout(250);
+// Move mouse away so only pin lifts the row (not hover)
+await page.mouse.move(700, 350);
+await page.waitForTimeout(250);
+const s4 = await inspect('alpha->beta');
+
+// State 5: Esc clears pin
+await page.keyboard.press('Escape');
+await page.waitForTimeout(250);
+const s5 = await inspect('alpha->beta');
+
+await browser.close();
+
+const liftStr = 'translateY(-1px)';
+const results = {
+  s1_idleFlat:            s1.lifted === 'false' && !s1.transform,
+
+  s2_hoveredLifted:       s2_hovered.hovered === 'true' && s2_hovered.lifted === 'true',
+  s2_hoveredTransform:    s2_hovered.transform === liftStr,
+  s2_otherStillFlat:      s2_other.lifted === 'false' && !s2_other.transform,
+
+  s3_restored:            s3.lifted === 'false' && !s3.transform,
+
+  s4_pinnedLifted:        s4.pinned === 'true' && s4.lifted === 'true',
+  s4_pinnedTransform:     s4.transform === liftStr,
+
+  s5_clearedAfterEsc:     s5.lifted === 'false' && !s5.transform,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row hover lift:`, JSON.stringify(results),
+  `\n  s1=`, s1, `\n  s2_hovered=`, s2_hovered, ` s2_other=`, s2_other,
+  `\n  s3=`, s3, `\n  s4=`, s4, `\n  s5=`, s5);
+process.exit(ok ? 0 : 1);