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

package/app/components/TopoGraph.tsx

@@ -4921,13 +4921,32 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   d={path}
                   fill="none"
                   stroke={pal.flowPath}
-                  strokeWidth="1"
+                  /* Round 437 / Loop: flow-rail strokeWidth hover lift —
+                     1 → 1.5 on (isHoveredEdge || isEndpointHoveredEdge).
+                     Pre-R437 the dashed rail sat at sw=1 always while the
+                     visible flow path above it lifted (R50 ×1.4 on
+                     isHoveredEdge / R436 ×1.15 on isEndpointHoveredEdge).
+                     The two edge paint layers were mismatched on hover:
+                     top layer thickened, underline stayed thin — so the
+                     hover gesture lifted only half the edge surface.
+                     R437 lifts the underline too so the whole edge
+                     reads as "raised" on hover, not just its bright
+                     top stripe. Same +0.5 absolute delta R435 used at
+                     hub-spoke scope (1→1.25 there, slightly bigger
+                     here because the rail's base 1 is at the kerning
+                     floor and needs more lift to register).
+                     Transition list extends to include stroke-width
+                     300ms so the new lift eases under the same R166
+                     cadence as the visible path's stroke-width. */
+                  strokeWidth={(isHoveredEdge || isEndpointHoveredEdge) ? 1.5 : 1}
                   strokeDasharray="2 12"
                   strokeLinecap="round"
                   opacity={Math.min(1, (isLight ? 0.4 : 0.75) * fresh * edgeOpacityMul)}
                   data-edge-flow-rail={link.key}
                   data-edge-flow-rail-linecap="round"
-                  style={{ transition: 'opacity 300ms ease-out, stroke 300ms ease-out' }}
+                  data-edge-flow-rail-stroke-width={(isHoveredEdge || isEndpointHoveredEdge) ? 1.5 : 1}
+                  data-edge-flow-rail-lifted={(isHoveredEdge || isEndpointHoveredEdge) ? 'true' : 'false'}
+                  style={{ transition: 'opacity 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out' }}
                 />
                 {!reducedMotion && (
                   /* Round 103 / Loop: phase-stagger the particles so
@@ -6709,20 +6728,62 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     stroke-width="3"/"1.5" still works against the
                     DOM attribute value (React-rendered, not
                     interpolated). */}
-                <circle
-                  cx={pos.x}
-                  cy={pos.y}
-                  r={radius}
-                  fill={isOnline ? pal.nodeFill.online : pal.nodeFill.offline}
-                  stroke={status.primary}
-                  strokeWidth={isOnline ? 3 : 1.5}
-                  strokeDasharray={isOnline ? 'none' : '5 5'}
-                  filter={isOnline && !isLight ? 'url(#topo-glow)' : undefined}
-                  data-node-status-ring={status.label}
-                  style={{
-                    transition: 'fill 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out',
-                  }}
-                />
+                {(() => {
+                  /* Round 438 / Loop: status ring strokeWidth hover lift —
+                     when hoveredAlias matches, the node's status ring
+                     thickens by +0.5: online 3 → 3.5, offline 1.5 → 2.
+                     Same absolute delta as R435 hub-spoke (idle 1→1.25
+                     used Δ +0.25 because rest base was thinner; status
+                     ring's heavier rest values 1.5/3 need a bigger
+                     +0.5 to register as visible thickening).
+                     Status-ring axis joins the node-hover cue stack
+                     (now 9 layers including link surfaces):
+                       R26  group translateY -2px           per-node geometry
+                       R217 stroke tint legendAccent        per-node card
+                       R142 drop-shadow boost               per-node card
+                       R427 alias letter-spacing            per-node text
+                       R428 sub-text letter-spacing         per-node text
+                       R429 body opacity 0.94 → 1.0         per-node card
+                       R430 hub-spoke α+                    link to hub (paint)
+                       R435 hub-spoke sw+                   link to hub (geo)
+                       R94  edge α 1.7×                     inter-node link (paint)
+                       R436 edge sw 1.15×                   inter-node link (geo)
+                       R437 flow-rail sw 1 → 1.5            edge paint-layer
+                       R438 status-ring sw +0.5             ring geometry  ← this round
+                     R51 sentinel safety: rest values 3 / 1.5 unchanged
+                     so the overlap-test selector `circle[stroke-width=
+                     "3"]` / `circle[stroke-width="1.5"]` inside
+                     g[data-node] still matches at rest. Hover values
+                     3.5 / 2 are not in the reserved {1.5, 3} set so
+                     the selector wouldn't match them anyway; but the
+                     test runs WITHOUT hover so this never matters
+                     in practice. R167 stroke-width 300ms transition
+                     already in the style list eases the lift for
+                     free. data-node-status-ring-hovered exposes the
+                     gate for tests. */
+                  const isRingHovered = !reducedMotion && hoveredAlias === session.alias;
+                  const ringStrokeWidth = isOnline
+                    ? (isRingHovered ? 3.5 : 3)
+                    : (isRingHovered ? 2 : 1.5);
+                  return (
+                    <circle
+                      cx={pos.x}
+                      cy={pos.y}
+                      r={radius}
+                      fill={isOnline ? pal.nodeFill.online : pal.nodeFill.offline}
+                      stroke={status.primary}
+                      strokeWidth={ringStrokeWidth}
+                      strokeDasharray={isOnline ? 'none' : '5 5'}
+                      filter={isOnline && !isLight ? 'url(#topo-glow)' : undefined}
+                      data-node-status-ring={status.label}
+                      data-node-status-ring-hovered={isRingHovered ? 'true' : 'false'}
+                      data-node-status-ring-stroke-width={ringStrokeWidth}
+                      style={{
+                        transition: 'fill 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out',
+                      }}
+                    />
+                  );
+                })()}
                 {/* v0.10.0 Hero 1+2 / §3.F server-health node-ring tint.
                     When the host server this agent runs on is in the
                     `red` tier (CPU/Mem/Disk worst-of ≥ 85% per

package/package.json

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

package/scripts/topo-flow-rail-hover-sw-test.mjs

@@ -0,0 +1,113 @@
+/* Round 437 verification: flow-rail (dashed underline) strokeWidth
+ * hover lift — 1 → 1.5 on (isHoveredEdge || isEndpointHoveredEdge).
+ * Pairs with R50 visible-path width lift + R436 endpoint width lift
+ * so both edge paint layers thicken together on hover.
+ *
+ * Contract:
+ *   - rest: every flow-rail reports stroke-width '1' + lifted='false'
+ *   - hover one node alias: rails on edges incident to that node
+ *     report stroke-width '1.5' + lifted='true'; non-incident rails
+ *     stay rest
+ *   - 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-flow-rail]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const ps = [...document.querySelectorAll('[data-edge-flow-rail]')];
+  return ps.map(p => ({
+    key:    p.getAttribute('data-edge-flow-rail'),
+    sw:     parseFloat(p.getAttribute('data-edge-flow-rail-stroke-width') || '0'),
+    sw_a:   p.getAttribute('stroke-width'),
+    lifted: p.getAttribute('data-edge-flow-rail-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      = /strokeWidth=\{\(isHoveredEdge \|\| isEndpointHoveredEdge\) \? 1\.5 : 1\}/.test(fileText);
+const sourceTransition = /transition: 'opacity 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out'/.test(fileText);
+
+await browser.close();
+
+const restAllSw1     = rest.every(r => r.sw === 1);
+const restNoneLifted = rest.every(r => r.lifted === 'false');
+
+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 alphaAllLifted  = alphaEntries.length > 0 && alphaEntries.every(([, h]) => h.sw === 1.5 && h.lifted === 'true');
+const nonAlphaRestSw  = nonAlphaEntries.every(([, h]) => h.sw === 1 && h.lifted === 'false');
+
+const results = {
+  rest_count_ge_2:           rest.length >= 2,
+  rest_all_sw_1:             restAllSw1,
+  rest_none_lifted:          restNoneLifted,
+  hover_alpha_count_ge_2:    alphaEntries.length >= 2,
+  hover_alpha_all_lifted:    alphaAllLifted,
+  hover_non_alpha_unaffected: nonAlphaRestSw,
+  source_strokeWidth_wired:  sourceWired,
+  source_transition_wired:   sourceTransition,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} flow-rail hover sw lift:`, JSON.stringify(results),
+  '\n  rest:', JSON.stringify(rest),
+  '\n  hover:', JSON.stringify(hover));
+process.exit(ok ? 0 : 1);

package/scripts/topo-status-ring-hover-sw-test.mjs

@@ -0,0 +1,105 @@
+/* Round 438 verification: status ring strokeWidth hover lift —
+ * online 3 → 3.5, offline 1.5 → 2 on hoveredAlias match.
+ *
+ * Contract:
+ *   - rest: every online ring reports stroke-width '3', every
+ *     offline ring '1.5' (R51 sentinels preserved at rest)
+ *   - hover one node: that ring's stroke-width lifts to '3.5' (or '2'
+ *     if offline) and data-node-status-ring-hovered flips to 'true'
+ *   - siblings stay rest
+ *   - R51 sentinel ATTRS unchanged on rest (overlap probe still works)
+ */
+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'),  // online → sw 3
+    mk('beta',  'idle'),     // online → sw 3
+    mk('gamma', 'working'),  // online → sw 3
+  ] } });
+});
+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-node-status-ring]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readAll = () => page.evaluate(() => {
+  const cs = [...document.querySelectorAll('[data-node-status-ring]')];
+  return cs.map((c, i) => {
+    const node = c.closest('[data-node]');
+    return {
+      idx:     i,
+      alias:   node?.getAttribute('data-node') || null,
+      ring:    c.getAttribute('data-node-status-ring'),
+      sw:      c.getAttribute('stroke-width'),
+      hovered: c.getAttribute('data-node-status-ring-hovered'),
+    };
+  });
+});
+
+const rest = await readAll();
+
+const firstAlias = rest[0]?.alias || 'alpha';
+let hover = null;
+const box = await page.evaluate((alias) => {
+  const node = document.querySelector(`[data-node="${alias}"]`);
+  if (!node) return null;
+  const b = node.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 ringStrokeWidth = isOnline\s*\n\s*\?\s*\(isRingHovered \? 3\.5 : 3\)\s*\n\s*:\s*\(isRingHovered \? 2 : 1\.5\)/.test(fileText);
+const sourceIsHovered = /const isRingHovered = !reducedMotion && hoveredAlias === session\.alias/.test(fileText);
+
+await browser.close();
+
+const restAllSw3        = rest.every(r => r.sw === '3'); // working+idle both online
+const restNoHover       = rest.every(r => r.hovered === 'false');
+const hoveredEntry      = hover?.find(r => r.alias === firstAlias);
+const hoverSw_3_5       = hoveredEntry?.sw === '3.5';
+const hoverHoveredTrue  = hoveredEntry?.hovered === 'true';
+const othersStillSw3    = hover ? hover.filter(r => r.alias !== firstAlias).every(r => r.sw === '3' && r.hovered === 'false') : false;
+
+const results = {
+  rest_ring_count_ge_3:       rest.length >= 3,
+  rest_all_online_sw_3:       restAllSw3,
+  rest_no_hover:              restNoHover,
+  hover_target_sw_3_5:        hoverSw_3_5,
+  hover_target_attr_true:     hoverHoveredTrue,
+  hover_others_stay_sw_3:     othersStillSw3,
+  source_strokeWidth_wired:   sourceWired,
+  source_isRingHovered_def:   sourceIsHovered,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} status-ring hover sw:`, JSON.stringify(results),
+  '\n  rest sample:', JSON.stringify(rest[0]),
+  '\n  hover target:', JSON.stringify(hoveredEntry));
+process.exit(ok ? 0 : 1);