@sleep2agi/agent-network-dashboard 0.5.1-preview.95 → 0.5.1-preview.97

package/app/components/TopoGraph.tsx

@@ -4123,13 +4123,33 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               const spokeOpacity = isActiveSpoke
                 ? (isHoveredSpoke ? 0.95 : 0.80)
                 : (isHoveredSpoke ? 0.70 : 0.50);
+              /* Round 435 / Loop: hub-spoke stroke-width hover lift —
+                 sibling to R430 opacity hover at the same surface. When
+                 hoveredAlias matches, BOTH opacity AND stroke-width
+                 lift on the matched spoke so the eye registers a
+                 2-axis "this node's spoke" gesture (paint + geometry).
+                   idle    1.00 → 1.25  (Δ +0.25, +25%)
+                   active  2.25 → 2.50  (Δ +0.25, +11%)
+                 Same +0.25 absolute delta keeps the idle/active visual
+                 progression consistent — at rest sw ratio 2.25:1 = 2.25,
+                 on hover 2.50:1.25 = 2.0; both still clearly two-tier.
+                 R241 transition list already covers stroke-width 250ms
+                 so the lift eases for free.
+                 R51 sentinel-safe: spoke is canvas <path>, not
+                 data-node <circle> (the sentinel selector is gated to
+                 g[data-node] descendants). 1.25 and 2.5 are not in the
+                 reserved {1.5, 3} set so the overlap-test sentinel
+                 attribute selector wouldn't match either way. */
+              const spokeStrokeWidth = isActiveSpoke
+                ? (isHoveredSpoke ? 2.5 : 2.25)
+                : (isHoveredSpoke ? 1.25 : 1);
               return (
                 <path
                   key={`hub-${session.alias}`}
                   d={path}
                   fill="none"
                   stroke={isActiveSpoke ? pal.spokeStroke.active : pal.spokeStroke.idle}
-                  strokeWidth={isActiveSpoke ? 2.25 : 1}
+                  strokeWidth={spokeStrokeWidth}
                   strokeDasharray={isActiveSpoke ? 'none' : '6 14'}
                   strokeLinecap="round"
                   opacity={spokeOpacity}
@@ -4139,6 +4159,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-topo-hub-spoke-active={isActiveSpoke ? 'true' : 'false'}
                   data-topo-hub-spoke-hovered={isHoveredSpoke ? 'true' : 'false'}
                   data-topo-hub-spoke-opacity={spokeOpacity}
+                  data-topo-hub-spoke-stroke-width={spokeStrokeWidth}
                   data-topo-hub-spoke-stroke-width-active="2.25"
                   data-topo-hub-spoke-linecap="round"
                   style={{
@@ -4736,7 +4757,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // tracks it even at low message counts (width was 3 → 4.5 on
             // hover). 1.4× is enough to read as "lifted" without
             // breaching the 16-px hitbox bound.
-            const renderWidth = isHoveredEdge ? Math.min(width * 1.4, 10) : width;
+            // Round 436 / Loop: extend the thickening to the
+            // "hovered-endpoint" case — when hoveredAlias matches one
+            // of this edge's endpoints, lift width by 1.15× (capped at
+            // 8 px to stay clear of the 16-px hitbox). Pre-R436 the
+            // edgeOpacityMul=1.7 (line 4703) lifted the matched edge's
+            // OPACITY when an endpoint was hovered but the stroke-WIDTH
+            // stayed at base — so the edge faded brighter without
+            // thickening, leaving the paint+geometry axes mismatched.
+            // Mirror of R430/R435 hub-spoke pattern (opacity + stroke-
+            // width co-lift on hoveredAlias); R436 brings the same
+            // dual-axis "this node's link" gesture to the edge scope.
+            // 1.15× is subtler than isHoveredEdge=1.4× because
+            // endpoint-hover lifts MANY edges at once (every edge
+            // incident on the hovered node) while edge-hover lifts ONE
+            // — the gesture should read as "highlighted" not "loud".
+            // R166 stroke-width 300ms transition already in the
+            // visible-path style list so the lift eases for free.
+            const isEndpointHoveredEdge = !!hoveredAlias && (link.from === hoveredAlias || link.to === hoveredAlias);
+            const renderWidth = isHoveredEdge ? Math.min(width * 1.4, 10)
+                              : isEndpointHoveredEdge ? Math.min(width * 1.15, 8)
+                              : width;
             return (
               <g
                 key={link.key}
@@ -4851,6 +4892,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   markerEnd={`url(#${arrowId})`}
                   data-edge-visible={link.key}
                   data-edge-visible-linecap="round"
+                  data-edge-visible-endpoint-hovered={isEndpointHoveredEdge ? 'true' : 'false'}
+                  data-edge-visible-stroke-width={renderWidth}
                   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.95",
+  "version": "0.5.1-preview.97",
   "description": "Agent Network Dashboard — Web UI for managing AI Agent networks",
   "scripts": {
     "dev": "next dev",

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-hub-spoke-hover-sw-test.mjs

@@ -0,0 +1,121 @@
+/* Round 435 verification: hub-spoke stroke-width hover lift —
+ * sibling to R430 opacity hover at the same surface. 2-axis hover
+ * signature now: paint (opacity R430) + geometry (stroke-width R435).
+ *
+ * Rest tiers:
+ *   idle    sw 1.00 / α 0.50
+ *   active  sw 2.25 / α 0.80
+ * Hover tiers (hoveredAlias === session.alias):
+ *   idle    sw 1.25 / α 0.70
+ *   active  sw 2.50 / α 0.95
+ *
+ * Contract:
+ *   - rest: all idle spokes report data-topo-hub-spoke-stroke-width '1'
+ *   - hover one node: exactly one spoke flips to hover with sw '1.25'
+ *     AND opacity '0.7' (both R430+R435 axes lift together)
+ *   - siblings stay rest sw '1' / opacity '0.5'
+ *   - source-file probe confirms wired stroke-width conditional
+ */
+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: [] } }));
+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(400);
+
+const readAll = () => page.evaluate(() => {
+  const paths = [...document.querySelectorAll('[data-topo-hub-spoke-active]')];
+  return paths.map((p, i) => ({
+    idx:     i,
+    active:  p.getAttribute('data-topo-hub-spoke-active'),
+    hovered: p.getAttribute('data-topo-hub-spoke-hovered'),
+    opacity: p.getAttribute('data-topo-hub-spoke-opacity'),
+    sw:      p.getAttribute('data-topo-hub-spoke-stroke-width'),
+    sw_a:    p.getAttribute('stroke-width'),
+  }));
+});
+
+const rest = await readAll();
+
+// Hover the first node's <g> group
+const firstAlias = await page.evaluate(() => {
+  const t = document.querySelector('[data-node-alias-text]');
+  return t?.getAttribute('data-node-alias-text');
+});
+let hover = null;
+if (firstAlias) {
+  const box = await page.evaluate((alias) => {
+    const t = document.querySelector(`[data-node-alias-text="${alias}"]`);
+    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 };
+  }, firstAlias);
+  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 = /const spokeStrokeWidth = isActiveSpoke\s*\n\s*\?\s*\(isHoveredSpoke\s*\?\s*2\.5\s*:\s*2\.25\)\s*\n\s*:\s*\(isHoveredSpoke\s*\?\s*1\.25\s*:\s*1\)/.test(fileText);
+
+await browser.close();
+
+const restAllIdle    = rest.length > 0 && rest.every(r => r.active === 'false');
+const restAllSw1     = rest.every(r => r.sw === '1');
+const restAllOpacity = rest.every(r => r.opacity === '0.5');
+const restNoHover    = rest.every(r => r.hovered === 'false');
+const hoveredCount   = hover ? hover.filter(s => s.hovered === 'true').length : -1;
+const hoveredEntry   = hover?.find(s => s.hovered === 'true');
+const hoverSw_1_25   = hoveredEntry?.sw === '1.25';
+const hoverOpacity_0_7 = hoveredEntry?.opacity === '0.7';
+const othersRestSw   = hover ? hover.filter(s => s.hovered === 'false').every(s => s.sw === '1') : false;
+
+const results = {
+  rest_spoke_count_ge_3:        rest.length >= 3,
+  rest_all_idle:                restAllIdle,
+  rest_all_sw_1:                restAllSw1,
+  rest_all_opacity_0_5:         restAllOpacity,
+  rest_no_hover:                restNoHover,
+  hover_exactly_one_match:      hoveredCount === 1,
+  hover_target_sw_1_25:         hoverSw_1_25,
+  hover_target_opacity_0_7:     hoverOpacity_0_7, /* R430 parity */
+  hover_others_stay_sw_1:       othersRestSw,
+  source_strokeWidth_3tier:     sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hub-spoke hover sw (R435):`, JSON.stringify(results),
+  '\n  hover target:', JSON.stringify(hoveredEntry));
+process.exit(ok ? 0 : 1);