@sleep2agi/agent-network-dashboard 0.5.1-preview.13 → 0.5.1-preview.131

package/scripts/topo-edge-badge-stroke-test.mjs

@@ -0,0 +1,92 @@
+/* Round 367 verification: edge midpoint badge rest stroke-width
+ * 1 → 1.25. Sibling visual-weight bump (7th canvas anchor in the
+ * R287/R295/R359/R360/R361/R365/R367 family).
+ *
+ * Cold edge badges gain ~25 % stroke presence. Stays clear of the
+ * R51 overlap-test sentinel values (1.5 / 3 reserved for node
+ * strokes — the test selector is gated to g[data-node] ancestors
+ * so this edge-internal circle is invisible to that probe anyway).
+ * R188 transition list 'stroke-width 300ms ease-out' still smoothes
+ * the hot/pin flip — now 1.25 → 2 instead of 1 → 2.
+ *
+ * Contract (cyber, fixture with cold flow):
+ *   - Edge badge circle stroke-width attr === '1.25'.
+ *   - data-edge-badge-stroke-width-rest === '1.25'.
+ *   - data-edge-badge-lifted === 'false' (rest, not hovered/pinned).
+ *   - data-edge-badge-text-pin === 'false' (cold flow, link.count<10).
+ *   - Inline transition contains 'stroke-width' (R188 preserved).
+ *   - Pre-R367 invariants: r=9 (cold, R164), fill=pal.legendBox.fill,
+ *     stroke=pal.flowEdge (cold), opacity 0.82 (cyber).
+ */
+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('a'), mk('b') ] } });
+});
+// 1 message → 1 cold flow (count=1, well below R129 isHot=10).
+const now = Date.now();
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { id: 'm1', from_alias: 'a', to_alias: 'b', content: 'ping',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+] } }));
+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-edge-badge-stroke-width-rest]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  // Probe the cold/rest edge badge circle (the parent of data-edge-badge-text
+  // is the <g> wrapping circle + text; we want the circle sibling).
+  const circle = document.querySelector('[data-edge-badge-stroke-width-rest]');
+  const cs = circle ? getComputedStyle(circle) : null;
+  // Find the text in the same group to check pin state.
+  const grp = circle?.parentElement;
+  const text = grp?.querySelector('[data-edge-badge-text]');
+  return {
+    strokeWidthAttr: circle?.getAttribute('stroke-width') ?? null,
+    strokeWidthData: circle?.getAttribute('data-edge-badge-stroke-width-rest') ?? null,
+    liftedAttr:      circle?.getAttribute('data-edge-badge-lifted') ?? null,
+    rAttr:           circle?.getAttribute('r') ?? null,
+    opacityAttr:     circle?.getAttribute('opacity') ?? null,
+    transition:      cs?.transition ?? null,
+    pinAttr:         text?.getAttribute('data-edge-badge-text-pin') ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  stroke_width_1_25:    probe.strokeWidthAttr === '1.25',
+  data_stroke_1_25:     probe.strokeWidthData === '1.25',
+  lifted_false_rest:    probe.liftedAttr === 'false',
+  r_9_cold:             probe.rAttr === '9',                   // R164 cold
+  opacity_0_82_cyber:   probe.opacityAttr === '0.82',          // R251 cyber theme
+  trans_has_strokew:    hasTrans(probe.transition, 'stroke-width'),  // R188
+  cold_flow_not_hot:    probe.pinAttr === 'false',             // R220 isHot/isPinned both false
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge badge stroke 1 → 1.25:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,127 @@
+/* Round 436 verification: edge visible-path stroke-width lift on
+ * hoveredAlias endpoint. Mirrors R430/R435 hub-spoke pattern at edge
+ * scope — when hoveredAlias matches one of the edge's endpoints, the
+ * visible path thickens by 1.15× alongside the existing edgeOpacityMul
+ * 1.7× lift (now BOTH paint and geometry lift on endpoint hover).
+ *
+ * Contract:
+ *   - rest: no edge reports data-edge-visible-endpoint-hovered='true'
+ *   - hover one node alias: exactly the edges incident on that alias
+ *     report endpoint-hovered='true' AND their renderWidth > rest base
+ *   - siblings unaffected
+ *   - source-file probe confirms the new conditional + endpoint cap
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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', 'working'),
+    mk('beta',  'idle'),
+    mk('gamma', 'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    // alpha is incident on both edges; gamma↔beta is the non-incident edge
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta',  content: 'ping', created_at: fresh, network_id: 'default' },
+    { id: 'm2', from_alias: 'alpha', to_alias: 'gamma', content: 'pong', created_at: fresh, network_id: 'default' },
+    { id: 'm3', from_alias: 'gamma', to_alias: 'beta',  content: 'pang', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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-edge-visible]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const ps = [...document.querySelectorAll('[data-edge-visible]')];
+  return ps.map(p => ({
+    key:       p.getAttribute('data-edge-visible'),
+    endHover:  p.getAttribute('data-edge-visible-endpoint-hovered'),
+    sw:        parseFloat(p.getAttribute('data-edge-visible-stroke-width') || '0'),
+  }));
+});
+
+const rest = await readAll();
+
+// Hover alpha
+let hover = null;
+const box = await page.evaluate(() => {
+  const t = document.querySelector('[data-node-alias-text="alpha"]');
+  if (!t) return null;
+  const node = t.closest('[data-node]');
+  const target = node || t;
+  const b = target.getBoundingClientRect();
+  return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+});
+if (box) {
+  await page.mouse.move(box.x, box.y);
+  await page.waitForTimeout(300);
+  hover = await readAll();
+  await page.mouse.move(0, 0);
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /isEndpointHoveredEdge\s*\?\s*Math\.min\(width \* 1\.15,\s*8\)\s*\n?\s*:\s*width/.test(fileText);
+const sourceIsEndpoint = /const isEndpointHoveredEdge = !!hoveredAlias && \(link\.from === hoveredAlias \|\| link\.to === hoveredAlias\)/.test(fileText);
+
+await browser.close();
+
+// rest: no edge should report endpoint-hover=true
+const restNoneEndHover = rest.every(r => r.endHover === 'false');
+
+// hover state: edges where alpha is an endpoint should report endpoint=true.
+// fixture edges: alpha↔beta, alpha↔gamma, gamma↔beta (deduped keys).
+const hoverByKey = new Map((hover || []).map(h => [h.key, h]));
+const restByKey  = new Map((rest  || []).map(r => [r.key, r]));
+
+// flow link keys are e.g. "alpha->beta" or "alpha-beta" — we don't know the
+// exact format. Detect alpha-incident edges by key substring.
+const isAlphaEdge = (key) => key && /alpha/i.test(key);
+const alphaEdges = [...hoverByKey.entries()].filter(([k]) => isAlphaEdge(k));
+const nonAlphaEdges = [...hoverByKey.entries()].filter(([k]) => !isAlphaEdge(k));
+
+const alphaAllEndHover = alphaEdges.length > 0 && alphaEdges.every(([, h]) => h.endHover === 'true');
+const nonAlphaNoEndHover = nonAlphaEdges.every(([, h]) => h.endHover === 'false');
+
+// width lifted for alpha edges (compare to rest sw for same key)
+const alphaSwLifted = alphaEdges.every(([k, h]) => {
+  const r = restByKey.get(k);
+  return r && h.sw > r.sw;
+});
+
+const results = {
+  rest_edge_count_ge_2:        rest.length >= 2,
+  rest_no_endpoint_hover:      restNoneEndHover,
+  hover_alpha_edges_present:   alphaEdges.length >= 1,
+  hover_alpha_all_endHover:    alphaAllEndHover,
+  hover_alpha_sw_lifted:       alphaSwLifted,
+  hover_non_alpha_unaffected:  nonAlphaNoEndHover,
+  source_renderWidth_wired:    sourceWired,
+  source_isEndpoint_wired:     sourceIsEndpoint,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge endpoint-hover sw lift:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  hover:', JSON.stringify(hover));
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-freshness-floor-test.mjs

@@ -0,0 +1,99 @@
+/* Round 406 verification: edge freshness fade floor 0.35 → 0.40.
+ * Stale-state legibility lift family (6th anchor) — stale edges
+ * (>5min) now sit at 40% intensity instead of 35%. The decay
+ * curve shape (linear 1 - ageMs/300s) unchanged.
+ *
+ * Contract:
+ *   - Source-file verification of `Math.max(0.40, 1 - ageMs / (5 * 60 * 1000))`
+ *   - DOM probe: seed a STALE edge (ageMs > 5min) so fresh hits the
+ *     floor; assert the visible flow path's opacity reflects the
+ *     lifted floor (computed as 0.40 × edge_opacity_mul × base).
+ *   - Compare against pre-R406 expectation (0.35 floor): the lifted
+ *     floor produces ~14.3 % higher edge opacity on stale edges.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+// 10 minutes ago — well past the 5-min decay window; freshness hits floor.
+const stale = new Date(Date.now() - 10 * 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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') ] } });
+});
+// Seed a stale flow link 10 minutes ago — past the 5-min decay so floor binds.
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'old', created_at: stale, network_id: 'default' },
+  ] },
+}));
+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-edge-visible]', { timeout: 15000 });
+await page.waitForTimeout(600);
+
+const probe = await page.evaluate(() => {
+  const edge = document.querySelector('[data-edge-visible]');
+  if (!edge) return null;
+  return {
+    opacityAttr: edge.getAttribute('opacity'),
+    edgeKey:     edge.getAttribute('data-edge-visible'),
+  };
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasFloor040 = /Math\.max\(0\.40, 1 - ageMs/.test(fileText);
+const sourceLacksFloor035 = !/Math\.max\(0\.35, 1 - ageMs/.test(fileText);
+
+await browser.close();
+
+// Pre-R406 expected: (0.28 cyber base) × 0.35 floor × 1 mul = 0.098
+// Post-R406 expected: (0.28 cyber base) × 0.40 floor × 1 mul = 0.112
+// On the visible flow path the wire is:
+//   opacity = Math.min(1, (isLight ? 0.22 : 0.28) * fresh * edgeOpacityMul)
+// For an unhovered edge in a fresh sessions context (no other hover/active):
+//   edgeOpacityMul = !hoveredAlias && !activeGroup ? (hoveredActiveLinks ? 1.5 : 1) : 0.35
+// = 1 in this probe → opacity ≈ 0.112 post-R406
+// Browser may serialize this as "0.112" or "0.11" — accept either with
+// a tolerance probe.
+const opacityNum = probe ? parseFloat(probe.opacityAttr || '0') : 0;
+const expectedPost = 0.28 * 0.40 * 1;       // 0.112
+const expectedPre  = 0.28 * 0.35 * 1;       // 0.098
+const distToPost = Math.abs(opacityNum - expectedPost);
+const distToPre  = Math.abs(opacityNum - expectedPre);
+
+const results = {
+  // Edge mounted from seeded stale flow
+  edge_mounted:                 !!probe,
+  edge_key_present:             !!probe?.edgeKey,
+  // Post-R406 opacity is CLOSER to 0.112 than 0.098
+  opacity_close_to_post_r406:   distToPost < 0.01,
+  // Opacity is FURTHER from the pre-R406 0.098 baseline
+  opacity_not_pre_r406:         distToPre > distToPost,
+  // Source-file canonical wire
+  source_floor_040:             sourceHasFloor040,
+  source_no_floor_035:          sourceLacksFloor035,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge freshness floor 0.35 → 0.40:`, JSON.stringify(results),
+  '\n  probe:', probe,
+  '\n  opacityNum:', opacityNum, '/ expectedPost:', expectedPost, '/ distToPost:', distToPost.toFixed(4),
+  '\n  expectedPre:', expectedPre, '/ distToPre:', distToPre.toFixed(4));
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,113 @@
+/* Round 439 verification: edge flow particle radius hover lift —
+ * r 4.5 → 5.5 on (isHoveredEdge || isEndpointHoveredEdge). Continues
+ * the edge paint-layer parity arc (R436 visible path / R437 flow rail
+ * / R439 particle).
+ *
+ * Contract:
+ *   - rest: every particle reports data-edge-particle-radius '4.5' +
+ *     lifted='false'
+ *   - hover one node alias: particles on edges incident to that node
+ *     report radius '5.5' + lifted='true'
+ *   - siblings unaffected
+ *   - source-file probe confirms conditional + transition extension
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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', 'working'),
+    mk('beta',  'idle'),
+    mk('gamma', 'idle'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta',  content: 'ping', created_at: fresh, network_id: 'default' },
+    { id: 'm2', from_alias: 'alpha', to_alias: 'gamma', content: 'pong', created_at: fresh, network_id: 'default' },
+    { id: 'm3', from_alias: 'gamma', to_alias: 'beta',  content: 'pang', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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-edge-particle]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const ps = [...document.querySelectorAll('[data-edge-particle]')];
+  return ps.map(p => ({
+    key:    p.getAttribute('data-edge-particle'),
+    r_attr: p.getAttribute('r'),
+    r_data: parseFloat(p.getAttribute('data-edge-particle-radius') || '0'),
+    lifted: p.getAttribute('data-edge-particle-lifted'),
+  }));
+});
+
+const rest = await readAll();
+
+let hover = null;
+const box = await page.evaluate(() => {
+  const t = document.querySelector('[data-node-alias-text="alpha"]');
+  if (!t) return null;
+  const node = t.closest('[data-node]');
+  const target = node || t;
+  const b = target.getBoundingClientRect();
+  return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+});
+if (box) {
+  await page.mouse.move(box.x, box.y);
+  await page.waitForTimeout(300);
+  hover = await readAll();
+  await page.mouse.move(0, 0);
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired      = /r=\{\(isHoveredEdge \|\| isEndpointHoveredEdge\) \? 5\.5 : 4\.5\}/.test(fileText);
+const sourceTransition = /transition: 'fill 200ms ease-out, opacity 200ms ease-out, r 200ms ease-out'/.test(fileText);
+
+await browser.close();
+
+const isAlphaKey = (k) => /alpha/i.test(k);
+const hoverByKey = new Map((hover || []).map(h => [h.key, h]));
+const alphaEntries    = [...hoverByKey.entries()].filter(([k]) => isAlphaKey(k));
+const nonAlphaEntries = [...hoverByKey.entries()].filter(([k]) => !isAlphaKey(k));
+
+const restAllR_4_5     = rest.every(r => r.r_data === 4.5);
+const restNoneLifted   = rest.every(r => r.lifted === 'false');
+const alphaAllR_5_5    = alphaEntries.length > 0 && alphaEntries.every(([, h]) => h.r_data === 5.5 && h.lifted === 'true');
+const nonAlphaRestR    = nonAlphaEntries.every(([, h]) => h.r_data === 4.5 && h.lifted === 'false');
+
+const results = {
+  rest_particle_count_ge_2:    rest.length >= 2,
+  rest_all_r_4_5:              restAllR_4_5,
+  rest_none_lifted:            restNoneLifted,
+  hover_alpha_count_ge_2:      alphaEntries.length >= 2,
+  hover_alpha_all_lifted_5_5:  alphaAllR_5_5,
+  hover_non_alpha_unaffected:  nonAlphaRestR,
+  source_r_wired:              sourceWired,
+  source_transition_wired:     sourceTransition,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge-particle r hover lift:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  hover:', JSON.stringify(hover));
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-particle-radius-test.mjs

@@ -0,0 +1,76 @@
+/* Round 422 verification: edge flow particle radius 4 → 4.5.
+ * Visual-weight bump family 15th anchor — particles riding along
+ * edge animateMotion paths get +0.5px lift (~27% area increase).
+ *
+ * Contract:
+ *   - Seed a flow alpha→beta so an edge mounts → particle mounts
+ *   - The <circle data-edge-particle> has:
+ *     * r attr === '4.5'
+ *     * data-edge-particle-radius === '4.5'
+ *   - Pre-R422 invariants preserved:
+ *     * R251 fill present (pal.flowParticle)
+ *     * R252 transition list (fill 200ms + opacity 200ms)
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+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 {}
+});
+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: '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') ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({
+  json: { messages: [
+    { id: 'm1', from_alias: 'alpha', to_alias: 'beta', content: 'ping', created_at: fresh, network_id: 'default' },
+  ] },
+}));
+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-edge-particle]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const probe = await page.evaluate(() => {
+  const particle = document.querySelector('[data-edge-particle]');
+  if (!particle) return null;
+  return {
+    rAttr:        particle.getAttribute('r'),
+    rData:        particle.getAttribute('data-edge-particle-radius'),
+    fill:         particle.getAttribute('fill'),
+    fillPresent:  !!particle.getAttribute('fill'),
+    styleAttr:    particle.getAttribute('style') || '',
+  };
+});
+
+await browser.close();
+
+const results = {
+  // R422 wire
+  r_attr_4_5:                 probe?.rAttr === '4.5',
+  r_data_4_5:                 probe?.rData === '4.5',
+  // R251 fill invariant
+  fill_present:               probe?.fillPresent === true,
+  // R252 transition invariant
+  transition_fill:            probe?.styleAttr.includes('fill') === true,
+  transition_opacity:         probe?.styleAttr.includes('opacity') === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge flow particle radius 4 → 4.5:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-edge-visible-linecap-test.mjs

@@ -0,0 +1,89 @@
+/* Round 381 verification: edge visible flow path strokeLinecap='round'.
+ * Sibling SVG stroke-softening polish to R378 flow-rail linecap — both
+ * flow-element paths now share 'round' linecap. R380 group box closed
+ * dash-cap + corner softening; R381 closes the flow-path family at the
+ * visible primary path.
+ *
+ * Stroke-softening family snapshot post-R381:
+ *   R288 chrome icons      strokeLinecap='round'
+ *   R378 flow-rail dashes  strokeLinecap='round'
+ *   R380 group box dashes  strokeLinecap='round'
+ *   R381 flow visible path strokeLinecap='round' (this round)
+ *   R379 viewport rect     strokeLinejoin='round'
+ *   R380 group box corners strokeLinejoin='round'
+ *
+ * Contract:
+ *   - [data-edge-visible] element stroke-linecap attr === 'round'.
+ *   - data-edge-visible-linecap === 'round'.
+ *   - Pre-R381 invariants:
+ *     * fill='none', stroke=pal.flowEdge
+ *     * markerEnd referencing arrow id
+ *     * opacity-based freshness preserved (any value in 0..1)
+ *     * transition list contains opacity + stroke-width + stroke
+ */
+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('a'), mk('b') ] } });
+});
+const now = Date.now();
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [
+  { id: 'm1', from_alias: 'a', to_alias: 'b', content: 'ping',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+] } }));
+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-edge-visible]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const p = document.querySelector('[data-edge-visible]');
+  const cs = p ? getComputedStyle(p) : null;
+  return {
+    linecapAttr:  p?.getAttribute('stroke-linecap') ?? null,
+    linecapData:  p?.getAttribute('data-edge-visible-linecap') ?? null,
+    fillAttr:     p?.getAttribute('fill') ?? null,
+    markerEndAttr: p?.getAttribute('marker-end') ?? null,
+    transition:   cs?.transition ?? null,
+    linkKey:      p?.getAttribute('data-edge-visible') ?? null,
+  };
+});
+
+await browser.close();
+
+const hasTrans = (s, prop) =>
+  new RegExp(`${prop}\\s+\\d*\\.?\\d*s|${prop}\\s+\\d+ms`, 'i').test(s || '');
+
+const results = {
+  linecap_round:        probe.linecapAttr === 'round',
+  data_linecap_round:   probe.linecapData === 'round',
+  fill_none:            probe.fillAttr === 'none',
+  marker_end_arrow:     /^url\(#topo-arrow-/.test(probe.markerEndAttr || ''),
+  trans_has_opacity:    hasTrans(probe.transition, 'opacity'),
+  trans_has_stroke_w:   hasTrans(probe.transition, 'stroke-width'),
+  trans_has_stroke:     hasTrans(probe.transition, 'stroke'),
+  link_key_present:     (probe.linkKey || '').length > 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge visible path strokeLinecap='round':`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);