@sleep2agi/agent-network-dashboard 0.5.1-preview.40 → 0.5.1-preview.42

package/app/components/TopoGraph.tsx

@@ -3973,7 +3973,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   stroke={(isPinned || isHovered) ? pal.legendAccent : pal.ringStroke}
                   strokeWidth={isPinned ? 3 : isHovered ? 2 : 1.5}
                   strokeDasharray={(isPinned || isHovered) ? 'none' : '6 6'}
+                  /* Round 380 / Loop: cluster box stroke gets round
+                     linecap + round linejoin. Sibling SVG stroke-
+                     softening polish to R378 flow-rail linecap + R379
+                     minimap viewport linejoin — extends the family to
+                     the group cluster boundary box (grid layout only):
+                       R288 chrome icons         strokeLinecap='round'
+                       R378 flow-rail dashes     strokeLinecap='round'
+                       R380 group box dashes     strokeLinecap='round' (this round)
+                       R379 viewport rect        strokeLinejoin='round'
+                       R380 group box corners    strokeLinejoin='round' (this round)
+                     Linecap rounds the R85 '6 6' marching-ants dash
+                     pills at rest — each 6 px dash gains a ~0.75 px
+                     round cap (sw=1.5 idle), reading as soft pills
+                     instead of sharp 6 × 1.5 px rectangles. Linejoin
+                     rounds the 4 sharp 90° corners (any state — solid
+                     or dashed); at sw=1.5 the join arc is ~0.75 px,
+                     matching R379 viewport vocabulary. Geometry-safe:
+                     stroke-* properties only affect paint, not bbox.
+                     The R51 sentinel 1.5/3 strokeWidth values stay
+                     intact (the overlap probe is gated to g[data-
+                     node], so this cluster-internal rect is invisible
+                     to it anyway). data-group-box-linecap + -linejoin
+                     attrs expose the values for tests. */
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
                   data-group-box-pinned={isPinned ? 'true' : 'false'}
+                  data-group-box-linecap="round"
+                  data-group-box-linejoin="round"
                   // R85: ambient "marching ants" drift on the perimeter
                   // when this group has at least one working member, and
                   // neither pin nor hover is active (those treatments
@@ -4488,15 +4515,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.40",
+  "version": "0.5.1-preview.42",
   "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-group-box-stroke-test.mjs

@@ -0,0 +1,105 @@
+/* Round 380 verification: cluster box stroke gets round linecap +
+ * round linejoin. Sibling SVG stroke-softening polish to R378 flow-
+ * rail linecap + R379 minimap viewport linejoin — extends the family
+ * to the group cluster boundary box (grid layout only).
+ *
+ * Family snapshot post-R380:
+ *   R288 chrome icons         strokeLinecap='round'
+ *   R378 flow-rail dashes     strokeLinecap='round'
+ *   R380 group box dashes     strokeLinecap='round' (this round)
+ *   R379 viewport rect        strokeLinejoin='round'
+ *   R380 group box corners    strokeLinejoin='round' (this round)
+ *
+ * Contract (cyber, grid layout):
+ *   - [data-group-box-pinned] elements have stroke-linecap='round'
+ *     + stroke-linejoin='round'.
+ *   - data-group-box-linecap + data-group-box-linejoin === 'round'.
+ *   - Pre-R380 invariants:
+ *     * strokeWidth=1.5 at rest (R68 ladder)
+ *     * strokeDasharray='6 6' at rest (R85 marching ants)
+ *     * data-group-box-pinned 'false' at rest
+ *     * data-group-box-lifted 'false' at rest
+ */
+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-layout', JSON.stringify('grid'));
+  } 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,
+  });
+  // Cluster groups via prefix alias → group boxes render.
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('alpha-1'), mk('alpha-2'), mk('alpha-3'),
+    mk('beta-1'),  mk('beta-2'),
+  ] } });
+});
+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-chrome-layout="grid"]', { timeout: 15000 });
+const layoutActive = await page.getAttribute('[data-topo-chrome-layout="grid"]', 'data-topo-chrome-layout-active');
+if (layoutActive !== 'true') await page.click('[data-topo-chrome-layout="grid"]');
+await page.waitForSelector('[data-group-box-pinned]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const boxes = Array.from(document.querySelectorAll('[data-group-box-pinned]'));
+  return boxes.map(el => ({
+    linecapAttr:    el.getAttribute('stroke-linecap'),
+    linejoinAttr:   el.getAttribute('stroke-linejoin'),
+    linecapData:    el.getAttribute('data-group-box-linecap'),
+    linejoinData:   el.getAttribute('data-group-box-linejoin'),
+    strokeWidth:    el.getAttribute('stroke-width'),
+    strokeDasharray: el.getAttribute('stroke-dasharray'),
+    pinnedAttr:     el.getAttribute('data-group-box-pinned'),
+    liftedAttr:     el.getAttribute('data-group-box-lifted'),
+  }));
+});
+
+await browser.close();
+
+const allOk = probe.length >= 1 && probe.every(b =>
+  b.linecapAttr === 'round'
+  && b.linejoinAttr === 'round'
+  && b.linecapData === 'round'
+  && b.linejoinData === 'round'
+  && b.strokeWidth === '1.5'        // R68 rest
+  && b.strokeDasharray === '6 6'    // R85 rest
+  && b.pinnedAttr === 'false'
+  && b.liftedAttr === 'false'
+);
+
+const results = {
+  boxes_rendered:        probe.length >= 1,
+  all_linecap_round:     probe.every(b => b.linecapAttr === 'round'),
+  all_linejoin_round:    probe.every(b => b.linejoinAttr === 'round'),
+  all_data_linecap:      probe.every(b => b.linecapData === 'round'),
+  all_data_linejoin:     probe.every(b => b.linejoinData === 'round'),
+  all_strokew_1_5_rest:  probe.every(b => b.strokeWidth === '1.5'),
+  all_dash_6_6_rest:     probe.every(b => b.strokeDasharray === '6 6'),
+  all_pinned_false:      probe.every(b => b.pinnedAttr === 'false'),
+  all_lifted_false:      probe.every(b => b.liftedAttr === 'false'),
+};
+const ok = allOk && Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group box strokeLinecap + Linejoin = round:`, JSON.stringify(results),
+  '\n  boxes:', probe.map(b => ({ linecap: b.linecapAttr, linejoin: b.linejoinAttr, sw: b.strokeWidth, dash: b.strokeDasharray })));
+process.exit(ok ? 0 : 1);