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

package/scripts/topo-p0round-test.mjs

@@ -0,0 +1,166 @@
+/* Combined verification for the #112 + #113 + #111-workdir round:
+ *  #111-workdir — nodes sharing a project_dir group together (diff prefix)
+ *  #112         — grid nodes are never occluded by the overlay panels
+ *  #113         — S/M/L node-size control resizes nodes + persists */
+import { chromium } from 'playwright';
+import { readFileSync, mkdirSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+mkdirSync('/tmp/anet-issue-112', { recursive: true });
+const browser = await chromium.launch({ headless: true });
+
+async function load(theme, layout, fleet, pinScale) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript(({ th, lay, pin }) => {
+    try {
+      localStorage.setItem('anet-theme', th);
+      localStorage.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      localStorage.setItem('anet-topo-layout', lay);
+      if (pin) localStorage.setItem('anet-topo-nodescale', pin);
+      else localStorage.removeItem('anet-topo-nodescale');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, { th: theme, lay: layout, pin: pinScale });
+  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 sessions = fleet.map(f => ({
+      alias: f.alias, status: 'idle', network_id: nid, project_dir: f.project_dir ?? null,
+      created_at: '2026-05-15T00:00:00Z', updated_at: '2026-05-15T00:00:00Z', last_seen_at: '2026-05-15T00:00:00Z',
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  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(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length > 0;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(700);
+  return { ctx, page };
+}
+
+const results = {};
+
+// --- #111-workdir: same project_dir, different prefixes → one group ---
+{
+  const fleet = [
+    { alias: 'aaa', project_dir: '/home/v/ai-insight' },
+    { alias: 'mmm', project_dir: '/home/v/ai-insight' },
+    { alias: 'zzz', project_dir: '/home/v/ai-insight' },
+    { alias: 'solo', project_dir: '/home/v/other-proj' }, // singleton dir
+  ];
+  const { ctx, page } = await load('cyber', 'grid', fleet);
+  const groups = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-group]', els => els.map(e => e.getAttribute('data-group')));
+  // aaa/mmm/zzz share ai-insight → one group labelled 'ai-insight'; solo alone → no box
+  results.workdirGroups = groups.length === 1 && groups[0] === 'ai-insight';
+  await ctx.close();
+}
+
+// --- #112: grid nodes never occluded by the overlay panels ---
+{
+  const fleet = Array.from({ length: 22 }, (_, i) => ({ alias: `A站${i + 1}号` }));
+  const { ctx, page } = await load('cyber', 'grid', fleet, '1');
+  results.panelOcclusion = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    // overlay panels: <g transform="translate(28, 34)"> and translate(720, 34)
+    const panels = [...svg.querySelectorAll(':scope > g[transform^="translate(16, 16)"], :scope > g[transform^="translate(760, 16)"]')]
+      .map(g => {
+        const m = g.getAttribute('transform').match(/translate\(([\d.]+),\s*([\d.]+)\)/);
+        const rect = g.querySelector('rect');
+        const tx = +m[1], ty = +m[2];
+        return { x: tx, y: ty, w: +rect.getAttribute('width'), h: +rect.getAttribute('height') };
+      });
+    if (panels.length !== 2) return false;
+    // node centres (any circle in the node <g> shares the node centre)
+    let clear = true;
+    for (const g of svg.querySelectorAll('g[data-node]')) {
+      const c = g.querySelector('circle');
+      if (!c) continue;
+      const cx = +c.getAttribute('cx'), cy = +c.getAttribute('cy');
+      for (const p of panels) {
+        // occluded if the centre is inside the panel rect expanded by ~28px
+        if (cx > p.x - 28 && cx < p.x + p.w + 28 && cy > p.y - 28 && cy < p.y + p.h + 28) clear = false;
+      }
+    }
+    return clear;
+  });
+  // panels exist and are OUTSIDE the zoom/pan transform group (direct svg children)
+  results.panelsOutsideTransform = await page.evaluate(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    const panels = [...svg.querySelectorAll(':scope > g[transform^="translate(16, 16)"], :scope > g[transform^="translate(760, 16)"]')];
+    return panels.length === 2; // :scope > = direct children, not inside the view <g>
+  });
+  await page.screenshot({ path: '/tmp/anet-issue-112/grid-occlusion.png' });
+  await ctx.close();
+}
+
+// --- #113: S/M/L node-size control resizes + persists ---
+{
+  const fleet = Array.from({ length: 8 }, (_, i) => ({ alias: `node${i + 1}` }));
+  const { ctx, page } = await load('cyber', 'grid', fleet); // no pin → default M
+  const onlineR = () => page.$$eval('svg[viewBox="0 0 1000 680"] g[data-node] circle[stroke-width="3"]',
+    els => els.length ? +els[0].getAttribute('r') : null);
+  const rM = await onlineR();                       // default M = round(26*0.84)=22
+  await page.locator('button[title="Node size: small"]').click();
+  await page.waitForTimeout(300);
+  const rS = await onlineR();                       // S = round(26*0.7)=18
+  await page.locator('button[title="Node size: large"]').click();
+  await page.waitForTimeout(300);
+  const rL = await onlineR();                       // L = 26
+  results.sizeMDefault = rM === 22;
+  results.sizeShrinks = rS === 18 && rS < rM;
+  results.sizeGrows = rL === 26 && rL > rM;
+  results.sizePersists = (await page.evaluate(() => localStorage.getItem('anet-topo-nodescale'))) === '1';
+  await ctx.close();
+}
+
+// --- #112 umbrella: ghost age-out — offline >24h is dropped from the topo ---
+{
+  const dayAgo = new Date(Date.now() - 26 * 60 * 60 * 1000).toISOString();
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 900 } });
+  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-nodescale', '1');
+      localStorage.removeItem('anet-brand');
+      localStorage.removeItem('anet-topo-view');
+      localStorage.setItem('anet-topo-layout', 'grid');
+      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';
+    await route.fulfill({ response: r, json: { ...b, sessions: [
+      { alias: 'alive-1', status: 'idle', network_id: nid, last_seen_at: fresh, created_at: fresh, updated_at: fresh },
+      { alias: 'recently-offline', status: 'offline', network_id: nid, last_seen_at: fresh, created_at: fresh, updated_at: fresh },
+      { alias: 'ghost-deleted', status: 'offline', network_id: nid, last_seen_at: dayAgo, created_at: dayAgo, updated_at: dayAgo },
+    ] } });
+  });
+  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(() => {
+    const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+    return !!svg && svg.querySelectorAll('g[data-node]').length > 0;
+  }, { timeout: 30000 }).catch(() => {});
+  await page.waitForTimeout(600);
+  const nodes = await page.$$eval('svg[viewBox="0 0 1000 680"] g[data-node]', els => els.map(e => e.getAttribute('data-node')));
+  results.ghostAgedOut = nodes.includes('alive-1') && nodes.includes('recently-offline') && !nodes.includes('ghost-deleted');
+  await ctx.close();
+}
+
+await browser.close();
+const ok = results.workdirGroups && results.panelOcclusion && results.panelsOutsideTransform &&
+  results.sizeMDefault && results.sizeShrinks && results.sizeGrows && results.sizePersists &&
+  results.ghostAgedOut;
+console.log(`${ok ? '✅' : '❌'} #112+#113+#111-workdir:`, JSON.stringify(results));
+process.exit(ok ? 0 : 1);

package/scripts/topo-pan-cursor-test.mjs

@@ -0,0 +1,62 @@
+/* Round 21 verification: SVG cursor flips from grab → grabbing during
+ * a pan drag and back to grab on release. */
+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 });
+// Need a tall enough viewport to keep the SVG ABOVE the fold so real
+// pointer events land — at 1280×900 the canvas starts at ~y=815 (the
+// /admin hero + StatsBar above push it below the viewport bottom).
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 1600 } });
+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', 'grid');
+    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 sessions = ['a', 'b'].map(a => ({
+    alias: a, status: 'idle', network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  }));
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+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.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const cursorAt = () => page.$eval('svg[viewBox="0 0 1000 680"]', el => el.style.cursor);
+const rest = await cursorAt();
+
+// pick a pan-safe target far from any node — top-left empty canvas region
+const box = await page.$eval('svg[viewBox="0 0 1000 680"]', el => el.getBoundingClientRect());
+const sx = box.x + box.width * 0.08;
+const sy = box.y + box.height * 0.40;
+
+await page.mouse.move(sx, sy);
+await page.mouse.down();
+await page.mouse.move(sx + 40, sy + 30);
+await page.waitForTimeout(50);
+const during = await cursorAt();
+await page.mouse.up();
+await page.waitForTimeout(50);
+const after = await cursorAt();
+
+await browser.close();
+const results = {
+  restIsGrab: rest === 'grab',
+  duringIsGrabbing: during === 'grabbing',
+  afterIsGrab: after === 'grab',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} pan cursor:`, JSON.stringify(results), `rest=${rest} during=${during} after=${after}`);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,112 @@
+/* Round 336 verification: 3 panel-header count tspans split their
+ * digit from the unit word, with the unit demoted to opacity-0.7:
+ *   - data-recent-panel-count-unit       (" flows")
+ *   - data-recent-panel-hot-count-unit   (" hot")
+ *   - data-legend-panel-count-unit       (" nodes")
+ *
+ * Same chip-internal-hierarchy pattern R333 (vendor count suffix)
+ * + R335 (filter pin prefix) applied at the panel-header scope.
+ * 4th-pass on the recurring "small label spans demote, value stays
+ * prominent" idiom this loop arc.
+ *
+ * Contract:
+ *   - All 3 unit tspans render with opacity attribute "0.7".
+ *   - Their computed opacity reads 0.7.
+ *   - Parent count textContent still reads the full string ("5 flows",
+ *     "5 nodes" etc) so legacy textContent tests still pass.
+ *   - R335 filter prefix opacity-70 + R333 vendor suffix regressions.
+ *   - R317/R318/R294 chrome + pulse regressions intact.
+ */
+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') ] } });
+});
+// 12 individual messages → recent-signal panel mounts + hot count
+// crosses ≥ 10 threshold so the hot-count tspan renders.
+const now = Date.now();
+const mkMsg = (idx, from_alias, to_alias) => ({
+  id: `${from_alias}-${to_alias}-${idx}`,
+  from_alias, to_alias, content: `m${idx}`,
+  network_id: 'default',
+  created_at: new Date(now - (5 + idx) * 1000).toISOString(),
+});
+const messageBatch = Array.from({ length: 12 }, (_, i) => mkMsg(i, 'alpha', 'beta'));
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: messageBatch } }));
+await ctx.route('**/api/hub/tasks*', (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-recent-panel-count-unit]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const flowsUnit  = document.querySelector('[data-recent-panel-count-unit]');
+  const hotUnit    = document.querySelector('[data-recent-panel-hot-count-unit]');
+  const legendUnit = document.querySelector('[data-legend-panel-count-unit]');
+  const recentCount = document.querySelector('[data-recent-panel-count]');
+  const hotCount    = document.querySelector('[data-recent-panel-hot-count]');
+  const legendCount = document.querySelector('[data-legend-panel-count]');
+  return {
+    flowsUnitAttr:       flowsUnit?.getAttribute('opacity') ?? null,
+    flowsUnitOpacity:    flowsUnit ? getComputedStyle(flowsUnit).opacity : null,
+    flowsUnitText:       flowsUnit?.textContent ?? null,
+    hotUnitAttr:         hotUnit?.getAttribute('opacity') ?? null,
+    hotUnitOpacity:      hotUnit ? getComputedStyle(hotUnit).opacity : null,
+    hotUnitText:         hotUnit?.textContent ?? null,
+    legendUnitAttr:      legendUnit?.getAttribute('opacity') ?? null,
+    legendUnitOpacity:   legendUnit ? getComputedStyle(legendUnit).opacity : null,
+    legendUnitText:      legendUnit?.textContent ?? null,
+    recentCountText:     recentCount?.textContent ?? null,
+    hotCountText:        hotCount?.textContent ?? null,
+    legendCountText:     legendCount?.textContent ?? null,
+    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 opacityClose = (val) => val !== null && Math.abs(parseFloat(val) - 0.7) < 0.01;
+
+const results = {
+  flows_unit_attr_0_7:         probe.flowsUnitAttr === '0.7',
+  flows_unit_text_flows:       (probe.flowsUnitText || '').includes('flows'),
+  flows_unit_computed_0_7:     opacityClose(probe.flowsUnitOpacity),
+  hot_unit_attr_0_7:           probe.hotUnitAttr === '0.7',
+  hot_unit_text_hot:           (probe.hotUnitText || '').includes('hot'),
+  legend_unit_attr_0_7:        probe.legendUnitAttr === '0.7',
+  legend_unit_text_nodes:      (probe.legendUnitText || '').includes('node'),
+  // Parent count textContent should still read full string (legacy
+  // R310/R311 tests via textContent rely on this).
+  recent_count_full_text:      /\d+ flows/.test(probe.recentCountText || ''),
+  legend_count_full_text:      /\d+ node/.test(probe.legendCountText || ''),
+  // 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 ? '✅' : '❌'} panel count unit demotion:`, JSON.stringify(results),
+  '\n  flows unit:', JSON.stringify(probe.flowsUnitText), 'opacity:', probe.flowsUnitAttr,
+  '\n  hot unit:',    JSON.stringify(probe.hotUnitText),   'opacity:', probe.hotUnitAttr,
+  '\n  legend unit:', JSON.stringify(probe.legendUnitText),'opacity:', probe.legendUnitAttr,
+  '\n  parent texts:', probe.recentCountText, '/', probe.legendCountText);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-elevation-test.mjs

@@ -0,0 +1,76 @@
+/* Round 57 verification: recent-signal + legend panels carry a drop-
+ * shadow filter so they read as floating cards instead of pasted-on
+ * graphics — especially important on light theme where panel fill is
+ * near-white on a near-white canvas.
+ *
+ *  - Both panels render a <rect> with `data-topo-panel-elevation`.
+ *  - The rect's `style.filter` contains "drop-shadow(".
+ *  - Light vs cyber themes use different shadow alpha (light tuned for
+ *    contrast against white canvas; cyber for subtle depth on dark).
+ *    Verify the strings differ so the theme switch isn't a no-op.
+ */
+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 probe(theme) {
+  const ctx = await browser.newContext({ viewport: { width: 1280, height: 1500 } });
+  await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+  await ctx.addInitScript((t) => {
+    try {
+      localStorage.setItem('anet-theme', t);
+      localStorage.setItem('anet-topo-layout', 'ring');
+      sessionStorage.setItem('anet_v3_auth', '1');
+    } catch {}
+  }, theme);
+  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 sessions = ['alpha', 'beta'].map(a => ({
+      alias: a, status: 'idle', network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    }));
+    await route.fulfill({ response: r, json: { ...b, sessions } });
+  });
+  await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+  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.waitForSelector('rect[data-topo-panel-elevation="recent"]', { timeout: 30000 });
+  await page.waitForTimeout(400);
+  const filters = await page.evaluate(() => {
+    const recent = document.querySelector('rect[data-topo-panel-elevation="recent"]');
+    const legend = document.querySelector('rect[data-topo-panel-elevation="legend"]');
+    return {
+      recent: recent?.getAttribute('style') || '',
+      legend: legend?.getAttribute('style') || '',
+      recentComputed: recent ? getComputedStyle(recent).filter : null,
+      legendComputed: legend ? getComputedStyle(legend).filter : null,
+    };
+  });
+  await ctx.close();
+  return filters;
+}
+
+const light = await probe('light');
+const cyber = await probe('cyber');
+await browser.close();
+
+const hasShadow = (s) => /drop-shadow\(/.test(s || '');
+const results = {
+  light_recent_hasShadow:  hasShadow(light.recent),
+  light_legend_hasShadow:  hasShadow(light.legend),
+  cyber_recent_hasShadow:  hasShadow(cyber.recent),
+  cyber_legend_hasShadow:  hasShadow(cyber.legend),
+  themes_differ:           light.recent !== cyber.recent,
+  computed_resolves:       hasShadow(light.recentComputed) && hasShadow(cyber.recentComputed),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel elevation:`, JSON.stringify(results),
+  `\n  light.recent=${JSON.stringify(light.recent)}`,
+  `\n  cyber.recent=${JSON.stringify(cyber.recent)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-fadein-test.mjs

@@ -0,0 +1,102 @@
+/* Round 175 verification: corner panels fade-in after the
+ * canvas content reveal.
+ *
+ * Pre-R175 the recent-signal (top-left) + legend (top-right)
+ * panels appeared instantly while nodes/edges/group boxes/tier
+ * rings staggered in around them. The panels felt like 'already
+ * there' before the content showed up.
+ *
+ * R175 adds .anet-fade-in + 700ms / 800ms animation-delay on
+ * the two panel <g> wrappers — fifth surface in the first-paint
+ * reveal family (after R9 nodes / R172 edges / R173 group boxes
+ * / R174 tier rings).
+ *
+ * Test:
+ *   1. Mock 3 sessions in ring layout
+ *   2. Probe [data-topo-panel="recent"] and [="legend"]
+ *   3. Both have .anet-fade-in className
+ *   4. recent panel animationDelay = 700ms
+ *   5. legend panel animationDelay = 800ms
+ *   6. data-topo-panel-fade-delay attributes match
+ */
+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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+  } 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')] } });
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [] } }));
+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-topo-panel="recent"]', { timeout: 10000 });
+await page.waitForSelector('[data-topo-panel="legend"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const grab = (sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return null;
+    return {
+      hasFadeClass:   (el.getAttribute('class') || '').includes('anet-fade-in'),
+      fadeDelayAttr:  parseFloat(el.getAttribute('data-topo-panel-fade-delay') || ''),
+      animationDelay: el.style.animationDelay || getComputedStyle(el).animationDelay,
+    };
+  };
+  return {
+    recent: grab('[data-topo-panel="recent"]'),
+    legend: grab('[data-topo-panel="legend"]'),
+  };
+});
+
+await browser.close();
+
+const parseDelay = (s) => {
+  if (!s) return null;
+  if (s.endsWith('ms')) return parseFloat(s);
+  if (s.endsWith('s')) return parseFloat(s) * 1000;
+  return parseFloat(s);
+};
+const recentDelay = parseDelay(probe.recent?.animationDelay);
+const legendDelay = parseDelay(probe.legend?.animationDelay);
+
+const results = {
+  recent_panel_found:        probe.recent !== null,
+  legend_panel_found:        probe.legend !== null,
+  recent_has_fade_class:     probe.recent?.hasFadeClass === true,
+  legend_has_fade_class:     probe.legend?.hasFadeClass === true,
+  recent_delay_attr_700:     probe.recent?.fadeDelayAttr === 700,
+  legend_delay_attr_800:     probe.legend?.fadeDelayAttr === 800,
+  recent_anim_delay_700ms:   recentDelay === 700,
+  legend_anim_delay_800ms:   legendDelay === 800,
+  legend_lags_recent_100ms:  legendDelay - recentDelay === 100,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel fade-in:`, JSON.stringify(results),
+  `\n  recent =`, probe.recent, `delay=${recentDelay}`,
+  `\n  legend =`, probe.legend, `delay=${legendDelay}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-panel-hot-tail-fade-test.mjs

@@ -0,0 +1,132 @@
+/* Round 190 verification: R129 hot-tail tspan in recent-signal
+ * panel header gets anet-fade-in for smooth entrance.
+ *
+ * Pre-R190 the tspan mounted/unmounted on hotFlowCount > 0 —
+ * snap. R190 keeps the conditional render (so the tspan
+ * doesn't consume layout when no hot flows) but adds the R3
+ * .anet-fade-in CSS animation that plays once on mount.
+ *
+ * Test scenarios:
+ *   A. 0 hot flows (just a few cold ones):
+ *      [data-recent-panel-hot-count] NOT present
+ *   B. 1 hot flow (count=12):
+ *      tspan present with text '· 1 hot', className contains
+ *      'anet-fade-in', data-recent-panel-hot-count='1'
+ *   C. 2 hot flows (count=15 + count=20):
+ *      data-recent-panel-hot-count='2', text '· 2 hot'
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+async function run(scenario) {
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  await ctx.unroute('**/api/hub/status*').catch(() => {});
+  await ctx.unroute('**/api/hub/messages*').catch(() => {});
+  await ctx.unroute('**/api/hub/tasks*').catch(() => {});
+  await ctx.route('**/api/hub/status*', async (route) => {
+    const r = await route.fetch();
+    const b = await r.json();
+    const nid = (b.sessions || [])[0]?.network_id || 'default';
+    const mk = (alias) => ({
+      alias, status: 'working', model: 'claude-opus-4', runtime: 'cli-claude-code',
+      network_id: nid, project_dir: null,
+      created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+    });
+    await route.fulfill({ response: r, json: { ...b, sessions: [
+      mk('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+    ] } });
+  });
+  const now = Date.now();
+  const msgs = scenario(now);
+  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-count]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const tail = document.querySelector('[data-recent-panel-hot-count]');
+    return {
+      tailPresent:    !!tail,
+      tailText:       tail?.textContent || null,
+      tailCount:      tail?.getAttribute('data-recent-panel-hot-count'),
+      tailClassName:  tail?.getAttribute('class') || '',
+      // R223 added: visibility attribute for always-mount-with-opacity-
+      // gate. "no tail" is either tailPresent=false (legacy conditional
+      // mount, no longer current) OR tailVisible='false' (R223 always-
+      // mount with opacity 0).
+      tailVisible:    tail?.getAttribute('data-recent-panel-hot-visible'),
+    };
+  });
+  await page.close();
+  return out;
+}
+
+// Scenario A: 0 hot — 1 cold flow
+const a = await run((now) => {
+  const m = [];
+  for (let i = 0; i < 4; i++) {
+    m.push({ id: `cold${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString() });
+  }
+  return m;
+});
+
+// Scenario B: 1 hot flow alpha→beta count=12
+const b = await run((now) => {
+  const m = [];
+  for (let i = 0; i < 12; i++) {
+    m.push({ id: `hot${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (1000 + i * 50)).toISOString() });
+  }
+  return m;
+});
+
+// Scenario C: 2 hot flows
+const c = await run((now) => {
+  const m = [];
+  for (let i = 0; i < 15; i++) {
+    m.push({ id: `h1-${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (5000 + i * 50)).toISOString() });
+  }
+  for (let i = 0; i < 20; i++) {
+    m.push({ id: `h2-${i}`, from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+      network_id: 'default', created_at: new Date(now - (15000 + i * 50)).toISOString() });
+  }
+  return m;
+});
+
+await browser.close();
+
+const results = {
+  // R223 update: hot-tail is always-mounted now with opacity-gate;
+  // "no tail" means either not in DOM (legacy) OR present-but-hidden
+  // (always-mount visible='false'). Accept both forms.
+  a_no_tail:               a.tailPresent === false || a.tailVisible === 'false',
+  b_tail_present:          b.tailPresent === true,
+  b_tail_text:             /·\s*1\s*hot/.test(b.tailText || ''),
+  b_tail_count_1:          b.tailCount === '1',
+  b_has_fade_class:        b.tailClassName.includes('anet-fade-in'),
+  c_tail_present:          c.tailPresent === true,
+  c_tail_text:             /·\s*2\s*hot/.test(c.tailText || ''),
+  c_tail_count_2:          c.tailCount === '2',
+  c_has_fade_class:        c.tailClassName.includes('anet-fade-in'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} panel hot-tail fade:`, JSON.stringify(results),
+  `\n  A (0 hot):`, a,
+  `\n  B (1 hot):`, b,
+  `\n  C (2 hot):`, c);
+process.exit(ok ? 0 : 1);