@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.0

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

@@ -0,0 +1,106 @@
+/* Round 172 verification: edges fade-in alongside R9 staggered
+ * node reveal.
+ *
+ * Pre-R172 nodes used `anet-fade-in` with R9 stagger
+ * (animationDelay = tier×180 + nodeIdx×25 / nodeIdx×25 capped
+ * at 24) but edges appeared instantly. First-paint sequence:
+ * nodes ease in over ~600ms while edges already at full
+ * visibility — reveal looks inconsistent.
+ *
+ * R172 wraps each edge <g> in:
+ *   className="anet-fade-in"
+ *   style={{ animationDelay: '280ms + index*35ms (cap 20)' }}
+ *   data-edge-group={link.key}
+ *
+ * Edges start fading in 280ms after first paint (after node
+ * stagger lands), staggered by 35ms intra-edge offset.
+ *
+ * Test:
+ *   1. Mock 4 sessions + 3 flows
+ *   2. Probe each edge <g[data-edge-group]>
+ *   3. Verify .anet-fade-in className present
+ *   4. Verify animation-delay attribute increments by 35ms
+ *      starting from 280ms (clamped at idx=20)
+ */
+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();
+// 3 distinct flow links so we can probe stagger across multiple indices
+const msgs = [
+  { id: 'a', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: 'b', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 10000).toISOString() },
+  { id: 'c', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 15000).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-edge-group]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const edges = [...document.querySelectorAll('[data-edge-group]')];
+  return edges.map(e => ({
+    key:            e.getAttribute('data-edge-group'),
+    hasFadeClass:   (e.getAttribute('class') || '').includes('anet-fade-in'),
+    animationDelay: e.style.animationDelay || getComputedStyle(e).animationDelay,
+  }));
+});
+
+await browser.close();
+
+if (probe.length < 3) {
+  console.log(`❌ wrong edge count: expected 3+, got ${probe.length}`, probe);
+  process.exit(1);
+}
+
+// Parse animationDelay (e.g. "280ms" or "0.28s") → number in ms
+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 delays = probe.map(p => parseDelay(p.animationDelay));
+
+const results = {
+  three_plus_edges:         probe.length >= 3,
+  all_have_fadeClass:       probe.every(p => p.hasFadeClass),
+  all_have_delay:           delays.every(d => d !== null && d >= 280),
+  first_edge_280ms:         Math.abs(delays[0] - 280) < 0.5,
+  second_edge_315ms:        Math.abs(delays[1] - 315) < 0.5,
+  third_edge_350ms:         Math.abs(delays[2] - 350) < 0.5,
+  delays_strictly_increase: delays[0] < delays[1] && delays[1] < delays[2],
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge fade-in:`, JSON.stringify(results),
+  `\n  edges =`, probe,
+  `\n  delays (ms) =`, delays);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-focus-test.mjs

@@ -0,0 +1,113 @@
+/* Round 50 verification: hovering a flow edge boosts that edge's own
+ * opacity 2× and thickens its stroke 1.4×, while every other edge dims
+ * to 0.35×. Complements R49 (which highlights the endpoint nodes) —
+ * together they make "this is the edge you're pointing at" unmistakable.
+ *
+ * Sessions: alpha, beta, gamma, delta. Messages: alpha→beta + gamma→delta.
+ * Hover the alpha→beta hitbox and read:
+ *   - alpha→beta visible-path opacity boosts (~2× base)
+ *   - alpha→beta visible-path strokeWidth = 1.4 × base (rounded by browser)
+ *   - gamma→delta visible-path opacity dims (~0.35× base)
+ *   - gamma→delta visible-path strokeWidth unchanged
+ */
+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: 1280, 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 sessions = ['alpha', 'beta', 'gamma', 'delta'].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 } });
+});
+const now = new Date().toISOString();
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  { from_alias: 'alpha', to_alias: 'beta',  content: 'm', created_at: now },
+  { from_alias: 'gamma', to_alias: 'delta', content: 'm', created_at: now },
+] } }));
+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.waitForTimeout(600);
+
+// Read each flow edge's visible base path (the one with marker-end).
+const readEdges = () => page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  const rows = [];
+  for (const g of svg.querySelectorAll(':scope > g > g')) {
+    const t = g.querySelector('path[data-edge-hitbox] title');
+    if (!t) continue;
+    const route = (t.textContent || '').split('\n')[0];
+    const base = [...g.querySelectorAll(':scope > path')].find(
+      p => !p.hasAttribute('data-edge-hitbox') && p.hasAttribute('marker-end')
+    );
+    if (!base) continue;
+    rows.push({
+      route,
+      opacity: +base.getAttribute('opacity'),
+      strokeWidth: +base.getAttribute('stroke-width'),
+    });
+  }
+  return rows;
+});
+
+const before = await readEdges();
+
+// Move cursor to a point ON the alpha→beta hitbox curve.
+const target = await page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  for (const g of svg.querySelectorAll(':scope > g > g')) {
+    const t = g.querySelector('path[data-edge-hitbox] title');
+    if (t && /^alpha → beta/.test(t.textContent || '')) {
+      const hb = g.querySelector('path[data-edge-hitbox]');
+      const pt = hb.getPointAtLength(hb.getTotalLength() / 2);
+      const ctm = hb.getScreenCTM();
+      return { x: pt.x * ctm.a + pt.y * ctm.c + ctm.e, y: pt.x * ctm.b + pt.y * ctm.d + ctm.f };
+    }
+  }
+  return null;
+});
+if (!target) { console.log('❌ no alpha→beta hitbox found'); process.exit(1); }
+await page.mouse.move(10, 10);
+await page.mouse.move(target.x, target.y);
+await page.waitForTimeout(350);
+const during = await readEdges();
+
+await browser.close();
+
+const find = (rows, r) => rows.find(e => e.route === r);
+const b_ab = find(before, 'alpha → beta');
+const b_gd = find(before, 'gamma → delta');
+const a_ab = find(during, 'alpha → beta');
+const a_gd = find(during, 'gamma → delta');
+
+const results = {
+  baselineMatches: b_ab && b_gd && Math.abs(b_ab.opacity - b_gd.opacity) < 0.001 && b_ab.strokeWidth === b_gd.strokeWidth,
+  hoveredEdgeBrightens: a_ab && a_ab.opacity > b_ab.opacity * 1.5,
+  hoveredEdgeThickens: a_ab && a_ab.strokeWidth > b_ab.strokeWidth * 1.2,
+  otherEdgeDims: a_gd && a_gd.opacity < b_gd.opacity * 0.6,
+  otherEdgeStaysThin: a_gd && a_gd.strokeWidth === b_gd.strokeWidth,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge focus:`, JSON.stringify(results),
+  `\n  before α→β=${JSON.stringify(b_ab)} γ→δ=${JSON.stringify(b_gd)}`,
+  `\n  during α→β=${JSON.stringify(a_ab)} γ→δ=${JSON.stringify(a_gd)}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-hover-test.mjs

@@ -45,13 +45,21 @@ await page.waitForTimeout(600);
 
 const edgeOpacities = () => page.evaluate(() => {
   const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
-  // Each flow-link <g> has two paths; the FIRST one is the base path
-  // (carries the <title> with route) — read its opacity.
+  // R48 reordered the children of each flow-link <g>:
+  //   path[data-edge-hitbox]   <-- transparent hover surface, carries <title>
+  //   path[marker-end]         <-- the visible base edge with opacity
+  //   path[id^=flow-path-]     <-- the dashed runway
+  // Read the route from the hitbox's <title>, but the opacity from the
+  // visible base path. Picking by marker-end keeps the selector resilient
+  // to future siblings.
   return [...svg.querySelectorAll(':scope > g > g')]
     .map(g => {
-      const base = g.querySelector('path');
-      const title = base?.querySelector('title');
-      if (!title) return null;
+      const hitbox = g.querySelector('path[data-edge-hitbox]');
+      const title = hitbox?.querySelector('title');
+      const base = [...g.querySelectorAll(':scope > path')].find(
+        p => !p.hasAttribute('data-edge-hitbox') && p.hasAttribute('marker-end')
+      );
+      if (!title || !base) return null;
       return { route: title.textContent.split('\n')[0], opacity: +base.getAttribute('opacity') };
     })
     .filter(Boolean);

package/scripts/topo-edge-pill-hot-test.mjs

@@ -0,0 +1,129 @@
+/* Round 150 verification: R119 edge filter pill extends the hot-
+ * lane convention. When the pinned edge has count >= 10, the
+ * count tspan inside the pill flips to amber + 700 weight, and
+ * the tooltip grows a "hot lane · ≥ 10" marker.
+ *
+ * 4th hot-lane surface now active:
+ *   R126 canvas badge       → amber stroke when count >= 10
+ *   R127 recent-row count   → amber + bold tspan
+ *   R129 panel header tail  → "· N hot" amber suffix
+ *   R150 edge filter pill   → amber count tspan + tooltip marker
+ *
+ * All four use the same hotStroke palette (#d97706 light / #fbbf24
+ * dark) so the eye instantly recognises hot signal across
+ * surfaces.
+ *
+ * Two test states:
+ *   - Pin a hot edge (count >= 10):
+ *     - data-active-filter-edge-hot="true"
+ *     - data-active-filter-edge-count-hot tspan present
+ *     - tspan color = amber, weight = 700
+ *     - title contains "hot lane · ≥ 10"
+ *   - Pin a warm edge (count < 10):
+ *     - data-active-filter-edge-hot="false"
+ *     - data-active-filter-edge-count tspan present (non-hot)
+ *     - title does NOT contain "hot lane"
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const browser = await chromium.launch({ headless: true });
+
+const ctx = await browser.newContext({ viewport: { width: 1400, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias, status) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha', 'working'), mk('beta', 'working'), mk('gamma', 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from, to, ageMs) => ({
+  id, from_alias: from, to_alias: to, content: 'hi',
+  network_id: 'default', created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+// 12 alpha→beta = HOT (count >= 10)
+for (let i = 0; i < 12; i++) msgs.push(mkMsg(`a${i}`, 'alpha', 'beta',  20000 + i * 500));
+// 4 beta→gamma = warm
+for (let i = 0; i < 4; i++)  msgs.push(mkMsg(`b${i}`, 'beta',  'gamma', 30000 + i * 500));
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row="alpha->beta"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const inspectPill = () => page.evaluate(() => {
+  const pill = document.querySelector('[data-active-filter="edge"]');
+  if (!pill) return null;
+  const hotTspan = pill.querySelector('[data-active-filter-edge-count-hot]');
+  const warmTspan = pill.querySelector('[data-active-filter-edge-count]');
+  return {
+    hot: pill.getAttribute('data-active-filter-edge-hot'),
+    title: pill.getAttribute('title'),
+    hotTspanText:   hotTspan?.textContent?.trim(),
+    hotTspanStyle:  hotTspan?.getAttribute('style'),
+    warmTspanText:  warmTspan?.textContent?.trim(),
+    matchCount:     pill.getAttribute('data-filter-match-count'),
+  };
+});
+
+// Pin hot edge alpha→beta (12 msgs)
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.waitForTimeout(250);
+const hot = await inspectPill();
+
+// Unpin → pin warm edge beta→gamma (4 msgs)
+await page.keyboard.press('Escape');
+await page.waitForTimeout(200);
+await page.locator('[data-recent-row="beta->gamma"]').click();
+await page.waitForTimeout(250);
+const warm = await inspectPill();
+
+await browser.close();
+
+// cyber theme amber #fbbf24 = rgb(251, 191, 36)
+const amberInStyle = (s) =>
+  !!s && (/rgba?\(251,\s*191,\s*36/i.test(s) || /#fbbf24/i.test(s));
+
+const results = {
+  // Hot edge pinned (alpha→beta, 12 msgs)
+  hot_pillPresent:       hot !== null,
+  hot_attrTrue:          hot?.hot === 'true',
+  hot_matchCount12:      hot?.matchCount === '12',
+  hot_tspanHasCount:     hot?.hotTspanText?.includes('12') === true,
+  hot_tspanAmberColor:   amberInStyle(hot?.hotTspanStyle || ''),
+  hot_tspanWeight700:    (hot?.hotTspanStyle || '').includes('font-weight: 700'),
+  hot_titleHotMarker:    (hot?.title || '').includes('hot lane'),
+  hot_noWarmTspan:       hot?.warmTspanText === undefined,
+
+  // Warm edge pinned (beta→gamma, 4 msgs)
+  warm_pillPresent:      warm !== null,
+  warm_attrFalse:        warm?.hot === 'false',
+  warm_matchCount4:      warm?.matchCount === '4',
+  warm_tspanHasCount:    warm?.warmTspanText?.includes('4') === true,
+  warm_noHotTspan:       warm?.hotTspanText === undefined,
+  warm_titleNoHotMarker: !(warm?.title || '').includes('hot lane'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge pill hot:`, JSON.stringify(results),
+  `\n  hot=`,  hot,
+  `\n  warm=`, warm);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-pill-test.mjs

@@ -0,0 +1,105 @@
+/* Round 119 verification: when a recent-signal row is pinned (R116),
+ * the chip row renders a 4th "filter: from→to · N" pill matching
+ * the R64 / R89 pattern for status / group / vendor pins. Closes the
+ * pill-pattern gap left after R116.
+ *
+ * Verifies:
+ *   - Before pin: no edge pill
+ *   - Click row → pill shows correct from→to and count
+ *   - Click pill body → clears
+ *   - × button also clears
+ *   - data-filter-match-aliases lists the two endpoints
+ */
+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')] } });
+});
+
+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', 'alpha', 'beta', 40 * 1000),
+  mkMsg('m3', 'alpha', 'beta', 50 * 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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const readPill = () => page.evaluate(() => {
+  const p = document.querySelector('[data-active-filter="edge"]');
+  if (!p) return null;
+  return {
+    text:    (p.textContent || '').trim(),
+    count:   p.getAttribute('data-filter-match-count'),
+    aliases: p.getAttribute('data-filter-match-aliases') || '',
+    title:   p.getAttribute('title') || '',
+  };
+});
+
+const before = await readPill();
+
+// Click row to pin.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterPin = await readPill();
+
+// Click pill body to clear.
+await page.locator('[data-active-filter="edge"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterBodyClear = await readPill();
+
+// Pin again, then click × button.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+await page.locator('[data-active-filter="edge"] button').click();
+await page.waitForTimeout(300);
+const afterXClear = await readPill();
+
+await browser.close();
+
+const results = {
+  before_noPill:         before === null,
+  pin_pillRendered:      afterPin !== null,
+  pin_textContainsArrow: /alpha→beta/.test(afterPin?.text || ''),
+  pin_count3:            afterPin?.count === '3',
+  pin_aliasesMatch:      afterPin?.aliases === 'alpha,beta',
+  pin_titleHasFromTo:    /alpha → beta \(3 msgs\)/.test(afterPin?.title || ''),
+  bodyClear_pillGone:    afterBodyClear === null,
+  xClear_pillGone:       afterXClear === null,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge pill:`, JSON.stringify(results),
+  `\n  afterPin=`,        afterPin,
+  `\n  afterBodyClear=`,  afterBodyClear,
+  `\n  afterXClear=`,     afterXClear);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-ping-pulse-retired-test.mjs

@@ -0,0 +1,119 @@
+/* Round 279 verification: arrival ping + dispatch pulse SMIL retired
+ * (R75 + R76 + R228 + R231 + R252 family) — 减法 cut #5.
+ *
+ * Per active flow edge the pre-R279 SMIL family was:
+ *   particle (R50 animateMotion along curve path)         ← KEPT
+ *   arrival ping (R75 circle + r/opacity animate)         ← RETIRED
+ *   dispatch pulse (R76 circle + r/opacity animate)       ← RETIRED
+ *
+ * For a 5-edge fleet that's 5×3 = 15 simultaneous SMIL on edges
+ * alone, pre-R279. The particle (a moving dot along the path) is the
+ * primary "data flowing from A → B" visual signal; the ping + pulse
+ * are secondary "arrival/dispatch confirmation" that the moving
+ * particle already conveys. R279 culls ping + pulse, keeps particle.
+ *
+ * Net: -10 SMIL animations for a 5-edge fleet. Combined with R276
+ * (-4 orbit) and R278 (-4 working halo), the canvas motion budget
+ * is now: 1 hub breath + N particles per active edge, that's it.
+ *
+ * Test scope:
+ *   1. No element matches `[data-arrival-ping]` (R75 retired).
+ *   2. No element matches `[data-dispatch-pulse]` (R76 retired).
+ *   3. Particles still present (`[data-edge-particle]` or equivalent).
+ *   4. R275 freshness chip absent (regression).
+ *   5. R276 orbit absent (regression).
+ *   6. R277 legend height 88 (regression).
+ *   7. R278 working halo <animate> count 0 (regression).
+ */
+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'),
+  ] } });
+});
+// 5 distinct flow pairs so particles + (formerly) ping/pulse mount
+// on multiple edges with link.count >= 3 (the dispatch-pulse gate
+// pre-R279).
+const now = Date.now();
+const msgs = [];
+for (let pair = 0; pair < 5; pair++) {
+  for (let i = 0; i < 5; i++) {
+    const from = ['alpha','beta','gamma','delta'][pair % 4];
+    const to   = ['beta','gamma','delta','alpha'][pair % 4];
+    msgs.push({
+      id: `m${pair}-${i}`, from_alias: from, to_alias: to, content: 'hi',
+      network_id: 'default',
+      created_at: new Date(now - (1000 + pair * 200 + i * 50)).toISOString(),
+    });
+  }
+}
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: msgs } }));
+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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-topo-panel="legend"]', { timeout: 10000 });
+await page.waitForSelector('[data-edge-particle]',       { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const ping     = document.querySelectorAll('[data-arrival-ping]');
+  const pulse    = document.querySelectorAll('[data-dispatch-pulse]');
+  const particle = document.querySelectorAll('[data-edge-particle]');
+  const freshnessChip = document.querySelector('[data-freshness-chip]');
+  const orbits   = document.querySelectorAll('[data-topo-orbit-bucket]');
+  const legendG  = document.querySelector('[data-topo-panel="legend"]');
+  const legendH  = legendG?.querySelector('rect')?.getAttribute('height') ?? null;
+  const halos    = document.querySelectorAll('[data-node-halo-breath="on"]');
+  let haloAnimateCount = 0;
+  halos.forEach((h) => { haloAnimateCount += h.querySelectorAll('animate').length; });
+  return {
+    pingCount:        ping.length,
+    pulseCount:       pulse.length,
+    particleCount:    particle.length,
+    freshnessPresent: freshnessChip !== null,
+    orbitCount:       orbits.length,
+    legendHeight:     legendH,
+    haloAnimateCount,
+  };
+});
+await browser.close();
+
+const results = {
+  arrival_ping_absent:           probe.pingCount === 0,
+  dispatch_pulse_absent:         probe.pulseCount === 0,
+  particles_still_present:       probe.particleCount > 0,
+  r275_freshness_absent:         probe.freshnessPresent === false,
+  r276_orbit_absent:             probe.orbitCount === 0,
+  r277_legend_height_88:         probe.legendHeight === '88',
+  r278_halo_animate_count_zero:  probe.haloAnimateCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge ping/pulse retired:`, JSON.stringify(results),
+  '\n  arrival ping count (expect 0):',  probe.pingCount,
+  '\n  dispatch pulse count (expect 0):', probe.pulseCount,
+  '\n  particle count (expect > 0):',     probe.particleCount,
+  '\n  freshness absent:', !probe.freshnessPresent,
+  '\n  orbit count (expect 0):', probe.orbitCount,
+  '\n  legend height:', probe.legendHeight,
+  '\n  halo animate count (expect 0):', probe.haloAnimateCount);
+process.exit(ok ? 0 : 1);