@sleep2agi/agent-network-dashboard 0.5.1-preview.41 → 0.5.1-preview.43

package/app/components/TopoGraph.tsx

@@ -3869,6 +3869,20 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                  active surfaces the activity state for test probes
                  (active spokes don't carry the bucket/dur attrs so
                  they need their own data anchor). */
+              // Round 382 / Loop: hub-spoke path picks up
+              // strokeLinecap='round'. Sibling polish to R378 flow-
+              // rail dashes + R380 group box dashes — three dashed-
+              // stroke surfaces now share 'round' linecap:
+              //   R378 flow-rail   '2 12'  -> soft 3-px pills
+              //   R380 group box   '6 6'   -> soft 7.5-px pills
+              //   R382 hub spoke   '6 14'  -> soft 7-px pills (this round)
+              // For idle spokes (dashed at sw=1), each 6-px dash gains
+              // 0.5-px round caps and reads as a soft pill instead of
+              // a sharp 6 x 1 rectangle. Active spokes (solid, no
+              // dasharray) have caps mostly hidden by the hub center +
+              // node radius. Geometry-safe; paint-only. R51 sentinel
+              // strokeWidth 1.5/3 untouched (idle=1, active=2). data-
+              // topo-hub-spoke-linecap attr exposes the value for tests.
               return (
                 <path
                   key={`hub-${session.alias}`}
@@ -3877,11 +3891,13 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={isActiveSpoke ? pal.spokeStroke.active : pal.spokeStroke.idle}
                   strokeWidth={isActiveSpoke ? 2 : 1}
                   strokeDasharray={isActiveSpoke ? 'none' : '6 14'}
+                  strokeLinecap="round"
                   opacity={isActiveSpoke ? 0.7 : 0.45}
                   className={isActiveSpoke ? undefined : 'anet-topo-spoke-flow'}
                   data-topo-spoke-bucket={isActiveSpoke ? undefined : busy}
                   data-topo-spoke-dur={isActiveSpoke ? undefined : spokeDur}
                   data-topo-hub-spoke-active={isActiveSpoke ? 'true' : 'false'}
+                  data-topo-hub-spoke-linecap="round"
                   style={{
                     transition: 'stroke 250ms ease-out, stroke-width 250ms ease-out, opacity 250ms ease-out',
                     ...(isActiveSpoke ? {} : {
@@ -4515,15 +4531,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     online chips to splice in additional properties
                     beside Tailwind's). data-edge-flow-rail attr
                     surfaces the path for test introspection. */}
+                {/* Round 381 / Loop: edge visible flow path picks up
+                    strokeLinecap='round'. Sibling polish to R378
+                    flow-rail dashed linecap — both flow-element paths
+                    (visible primary + dashed secondary rail) now share
+                    'round' linecap vocabulary. The visible path runs
+                    source-node → dest-node as one continuous line, so
+                    the dest-end is covered by the markerEnd arrow and
+                    the source-end usually sits inside the source-node
+                    circle. At certain alignments (post-zoom, post-
+                    layout-switch transitions), the source-end may peek
+                    out by a fraction of a px past the node edge —
+                    round caps render that overshoot as a smooth half-
+                    disc instead of a sharp rectangle. Pure paint
+                    refinement, geometry-safe (bbox of the stroke
+                    unchanged at the join with the arrow marker).
+                    data-edge-visible-linecap attr exposes the value
+                    for tests. */}
                 <path
                   d={path}
                   fill="none"
                   stroke={pal.flowEdge}
                   strokeWidth={renderWidth}
+                  strokeLinecap="round"
                   opacity={Math.min(1, (isLight ? 0.22 : 0.28) * fresh * edgeOpacityMul)}
                   filter={isLight ? undefined : 'url(#topo-glow)'}
                   markerEnd={`url(#${arrowId})`}
                   data-edge-visible={link.key}
+                  data-edge-visible-linecap="round"
                   style={{
                     pointerEvents: 'none',
                     transition: 'opacity 300ms ease-out, stroke-width 300ms ease-out, stroke 300ms ease-out',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleep2agi/agent-network-dashboard",
-  "version": "0.5.1-preview.41",
+  "version": "0.5.1-preview.43",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

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

package/scripts/topo-hub-spoke-linecap-test.mjs

@@ -0,0 +1,80 @@
+/* Round 382 verification: hub-spoke path strokeLinecap='round'.
+ * Sibling SVG stroke-softening polish to R378 flow-rail dashes +
+ * R380 group box dashes — three dashed-stroke surfaces now share
+ * 'round' linecap.
+ *
+ * Dashed-stroke linecap family snapshot post-R382:
+ *   R378 flow-rail   '2 12'  -> soft 3-px pills
+ *   R380 group box   '6 6'   -> soft 7.5-px pills
+ *   R382 hub spoke   '6 14'  -> soft 7-px pills (this round)
+ *
+ * Contract:
+ *   - Every [data-topo-hub-spoke-active] path has stroke-linecap='round'.
+ *   - data-topo-hub-spoke-linecap === 'round'.
+ *   - Idle spokes still have strokeDasharray='6 14' (R382 doesn't touch
+ *     the dasharray); active spokes still have 'none'.
+ *   - Pre-R382 invariants preserved on each spoke: strokeWidth (1 idle /
+ *     2 active), R241 stroke + stroke-width + opacity 250ms transition.
+ */
+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'), mk('c') ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+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-topo-hub-spoke-active]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const spokes = Array.from(document.querySelectorAll('[data-topo-hub-spoke-active]'));
+  return spokes.map(el => ({
+    activeAttr:      el.getAttribute('data-topo-hub-spoke-active'),
+    linecapAttr:     el.getAttribute('stroke-linecap'),
+    linecapData:     el.getAttribute('data-topo-hub-spoke-linecap'),
+    strokeWidthAttr: el.getAttribute('stroke-width'),
+    dasharrayAttr:   el.getAttribute('stroke-dasharray'),
+  }));
+});
+
+await browser.close();
+
+const allOk = probe.length >= 1 && probe.every(s =>
+  s.linecapAttr === 'round'
+  && s.linecapData === 'round'
+  && (s.activeAttr === 'true'
+        ? (s.strokeWidthAttr === '2' && s.dasharrayAttr === 'none')
+        : (s.strokeWidthAttr === '1' && s.dasharrayAttr === '6 14'))
+);
+
+const results = {
+  spokes_rendered:     probe.length >= 1,
+  all_linecap_round:   probe.every(s => s.linecapAttr === 'round'),
+  all_data_linecap:    probe.every(s => s.linecapData === 'round'),
+  per_state_invariants_intact: allOk,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hub-spoke strokeLinecap='round':`, JSON.stringify(results),
+  '\n  count:', probe.length,
+  '\n  sample:', probe.slice(0, 3));
+process.exit(ok ? 0 : 1);