@sleep2agi/agent-network-dashboard 0.4.6-preview.121 → 0.4.6-preview.123

package/app/components/TopoGraph.tsx

@@ -821,12 +821,27 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // visible without reading the tooltip. The set is the link's two aliases
   // (null when no edge hovered); node opacity composes this after inFocus.
   const [hoveredEdgeKey, setHoveredEdgeKey] = useState<string | null>(null);
+  // Round 116 / Loop: sticky variant of hoveredEdgeKey. R56 made the
+  // recent-signal rows brighten the matching edge on hover, but the
+  // filter released on mouseleave — no way to lock a flow for a
+  // closer look. Click-to-pin closes that gap, matching the
+  // established hover→pin idiom (R60 status, R61 legend, R63 group,
+  // R88 vendor). activeEdgeKey = hoveredEdgeKey ?? pinnedEdgeKey
+  // below so hover still wins for spot-comparison while a pin is set.
+  const [pinnedEdgeKey, setPinnedEdgeKey] = useState<string | null>(null);
+  const activeEdgeKey = hoveredEdgeKey ?? pinnedEdgeKey;
   // Round 77 / Loop: hovering the "N active links" header chip globally
   // brightens every flow edge (1.5× opacity). Transient affordance — the
   // chip already says HOW MANY active flows exist; this answers WHERE
   // they are in one glance, without the user scanning the canvas for
   // moving particles. Reset on mouse leave.
   const [hoveredActiveLinks, setHoveredActiveLinks] = useState(false);
+  // Round 115 / Loop: hub-center hover state. R52 made the hub
+  // clickable (fit view) + cursor:pointer, but there was no
+  // hover-time visual feedback — the click target felt guessed at
+  // rather than confirmed. This state drives a subtle hint ring on
+  // hover so users see the affordance before committing the click.
+  const [hoveredHub, setHoveredHub] = useState(false);
   // Round 80 / Loop: vendor-letter hover in the distribution chip. The
   // chip already names vendor mix (`C:5 G:3 ?:1`); hover a letter and
   // every node from OTHER vendors dims. Surfaces the breakdown spatially
@@ -940,10 +955,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   // R74 listener for layout + view palette commands lives below
   // fitView's declaration — see further down in the file.
   const hoveredEdgeEndpoints = useMemo<Set<string> | null>(() => {
-    if (!hoveredEdgeKey) return null;
-    const link = flowLinks.find(l => l.key === hoveredEdgeKey);
+    // R116: compose hover ?? pin so pinning a row via click keeps the
+    // endpoint ring + edge ladder lit after mouseleave.
+    if (!activeEdgeKey) return null;
+    const link = flowLinks.find(l => l.key === activeEdgeKey);
     return link ? new Set([link.from, link.to]) : null;
-  }, [hoveredEdgeKey, flowLinks]);
+  }, [activeEdgeKey, flowLinks]);
 
   // --- Round 103 (issue #81): fullscreen + zoom + pan interaction layer ---
   // DIY native (no d3 / svg-pan-zoom): wrap the topology content in a single
@@ -1204,13 +1221,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
       // R63: extends to pinnedGroup too. Clears WHATEVER pin is active
       // (one Esc collapses all topology pins) so the keyboard escape
       // route stays a single key, not "Esc maybe Esc again".
-      else if (e.key === 'Escape' && !chatAlias && (pinnedStatus || pinnedGroup || pinnedVendor)) {
-        // R88: extend the universal-cancel to pinnedVendor too. One Esc
-        // collapses every topology pin (matches R62/R63's "single key,
-        // not Esc-maybe-Esc-again" promise).
-        if (pinnedStatus) setPinnedStatus(null);
-        if (pinnedGroup)  setPinnedGroup(null);
-        if (pinnedVendor) setPinnedVendor(null);
+      else if (e.key === 'Escape' && !chatAlias && (pinnedStatus || pinnedGroup || pinnedVendor || pinnedEdgeKey)) {
+        // R88/R116: extend the universal-cancel to vendor + edge too.
+        // One Esc collapses every topology pin (matches R62/R63's
+        // "single key, not Esc-maybe-Esc-again" promise).
+        if (pinnedStatus)  setPinnedStatus(null);
+        if (pinnedGroup)   setPinnedGroup(null);
+        if (pinnedVendor)  setPinnedVendor(null);
+        if (pinnedEdgeKey) setPinnedEdgeKey(null);
         e.preventDefault();
       }
     };
@@ -1221,7 +1239,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
     // and pinnedStatus so the Escape branch reads fresh state (re-binding
     // the listener on these state changes is sub-ms — cheaper than refs).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fitView, chatAlias, pinnedStatus, pinnedGroup, pinnedVendor]);
+  }, [fitView, chatAlias, pinnedStatus, pinnedGroup, pinnedVendor, pinnedEdgeKey]);
 
   const toggleFullscreen = () => {
     const el = containerRef.current;
@@ -2229,7 +2247,8 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // background to the focus. Singletons fall through unchanged
             // (their group key is the alias itself, so bothInHoveredGroup
             // is impossible for a non-self-edge).
-            const isHoveredEdge = hoveredEdgeKey === link.key;
+            // R116: composes hover ?? pin — a pinned edge stays "hot" after the cursor leaves.
+            const isHoveredEdge = activeEdgeKey === link.key;
             const fromGroup = groupKeys[link.from] ?? link.from;
             const toGroup = groupKeys[link.to] ?? link.to;
             const bothInHoveredGroup = !!activeGroup && fromGroup === activeGroup && toGroup === activeGroup;
@@ -2242,7 +2261,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             // the edge-hover (2.0×) or node-hover (1.7×) priorities.
             const edgeOpacityMul = isHoveredEdge
               ? 2.0
-              : hoveredEdgeKey
+              : activeEdgeKey
                 ? 0.35
                 : !hoveredAlias && !activeGroup
                   ? (hoveredActiveLinks ? 1.5 : 1)
@@ -2432,11 +2451,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               dual-circle "lit lamp" core is unchanged. */}
           {layout === 'ring' && (<g
             data-topo-hub
+            data-topo-hub-hovered={hoveredHub ? 'true' : 'false'}
             style={{ cursor: 'pointer' }}
             // Stop pointerdown from reaching the SVG pan handler — same
             // reason as the node <g>: a captured pointer makes Chromium
             // fire the follow-up click on the SVG, not this group.
             onPointerDown={(e) => e.stopPropagation()}
+            onMouseEnter={() => setHoveredHub(true)}
+            onMouseLeave={() => setHoveredHub(false)}
             // Round 52 / Loop: hub is the visual anchor but had no click
             // action — users discovered fit-to-content only via the `f`
             // key or the chrome button. Wire the hub to fitView() so the
@@ -2509,6 +2531,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             {/* core — 20px diameter, larger inner highlight reads as a "lit lamp" */}
             <circle cx={cx} cy={cy} r="10" fill={isLight ? '#059669' : '#10b981'} />
             <circle cx={cx} cy={cy} r="5" fill="#d1fae5" opacity="0.9" />
+            {/* R115 / Loop: hover hint ring. Stroke-only circle at r=14
+                that fades in when the hub is hovered — the same idea
+                R44 used for node avatars (group-hover stroke). r=14
+                sits comfortably outside the r=10 core and INSIDE the
+                r=18 grounding halo, so the hover indicator is fully
+                contained within the existing hub footprint (no bbox
+                growth, overlap test unchanged). pointerEvents:none so
+                the hint can't intercept the click that produced it. */}
+            <circle
+              cx={cx} cy={cy} r="14"
+              fill="none"
+              stroke={isLight ? '#059669' : '#10b981'}
+              strokeWidth="1.5"
+              opacity={hoveredHub ? (isLight ? 0.85 : 0.7) : 0}
+              data-topo-hub-hover-ring
+              style={{ pointerEvents: 'none', transition: 'opacity 180ms ease-out' }}
+            />
           </g>)}
 
           {/* agent nodes */}
@@ -3102,14 +3141,32 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 const rawAt = link.last_at ? relativeAgo(link.last_at) : null;
                 const lastAt = rawAt ? rawAt.replace(/\s+ago$/, '') : null;
                 const isRowHovered = hoveredEdgeKey === link.key;
+                const isRowPinned  = pinnedEdgeKey === link.key;
+                const isRowActive  = isRowHovered || isRowPinned;
                 return (
                   <g
                     key={link.key}
                     data-recent-row={link.key}
                     data-recent-row-hovered={isRowHovered ? 'true' : 'false'}
+                    data-recent-row-pinned={isRowPinned ? 'true' : 'false'}
+                    role="button"
+                    tabIndex={0}
+                    aria-pressed={isRowPinned}
                     style={{ cursor: 'pointer' }}
+                    onPointerDown={(e) => e.stopPropagation()}
                     onMouseEnter={() => setHoveredEdgeKey(link.key)}
                     onMouseLeave={() => setHoveredEdgeKey(prev => prev === link.key ? null : prev)}
+                    // R116: click toggles pin. activeEdgeKey =
+                    // hoveredEdgeKey ?? pinnedEdgeKey so the matching
+                    // edge stays "hot" after mouseleave; click again
+                    // (or Esc) releases.
+                    onClick={() => setPinnedEdgeKey(prev => prev === link.key ? null : link.key)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setPinnedEdgeKey(prev => prev === link.key ? null : link.key);
+                      }
+                    }}
                   >
                     {/* R104: subtle row-background tint on hover. R56
                         already brightens the matching edge on the canvas,
@@ -3118,17 +3175,21 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                         Filling the rect at hover with `pal.legendAccent`
                         at low alpha gives the row visual feedback at the
                         source surface, mirroring the list-item idiom from
-                        the chip-row pills. */}
+                        the chip-row pills. R116: pinned rows tint
+                        stronger than hovered ones so locked vs preview
+                        is discriminable. */}
                     <rect
                       x="6" y={38 + index * 16 - 10}
                       width="218" height="14" rx="3"
-                      fill={isRowHovered ? pal.legendAccent : 'transparent'}
-                      opacity={isRowHovered ? (isLight ? 0.10 : 0.14) : 1}
+                      fill={isRowActive ? pal.legendAccent : 'transparent'}
+                      opacity={isRowPinned ? (isLight ? 0.18 : 0.22)
+                              : isRowHovered ? (isLight ? 0.10 : 0.14)
+                              : 1}
                       style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
                     />
                     <text
                       x="13" y={38 + index * 16}
-                      fill={hoveredEdgeKey === link.key ? pal.legendHeadline : pal.legendText}
+                      fill={isRowActive ? pal.legendHeadline : pal.legendText}
                       fontSize="9"
                       fontFamily="monospace"
                       style={{ transition: 'fill 150ms ease-out' }}

package/package.json

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

package/scripts/topo-hub-hover-ring-test.mjs

@@ -0,0 +1,82 @@
+/* Round 115 verification: hub center hover-state visual feedback.
+ * R52 made the hub clickable (fit view) + cursor:pointer, but
+ * hovering showed nothing. Now a thin r=14 stroke ring fades in on
+ * hover and out on leave. Sits inside the existing r=18 halo so
+ * overlap footprint unchanged.
+ *
+ * Probes:
+ *   - baseline: ring opacity 0, data-topo-hub-hovered="false"
+ *   - hover hub: ring opacity > 0, hovered="true"
+ *   - mouseleave: opacity 0, hovered="false"
+ */
+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: 1400, 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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+    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: 'idle', model: 'claude-opus-4', runtime: 'cli-claude-code',
+    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*', (route) => route.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 3, { timeout: 30000 });
+await page.waitForSelector('[data-topo-hub]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const read = () => page.evaluate(() => {
+  const hub  = document.querySelector('[data-topo-hub]');
+  const ring = document.querySelector('[data-topo-hub-hover-ring]');
+  return {
+    hovered:    hub?.getAttribute('data-topo-hub-hovered') || '',
+    ringOpacity: +(ring?.getAttribute('opacity') || '0'),
+  };
+});
+
+const before = await read();
+
+await page.locator('[data-topo-hub]').hover();
+await page.waitForTimeout(300);
+const onHover = await read();
+
+// Move pointer far away.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterLeave = await read();
+
+await browser.close();
+
+const results = {
+  before_notHovered:    before.hovered === 'false',
+  before_ringHidden:    before.ringOpacity === 0,
+  hover_attrTrue:       onHover.hovered === 'true',
+  hover_ringVisible:    onHover.ringOpacity > 0.5,
+  leave_attrFalse:      afterLeave.hovered === 'false',
+  leave_ringHidden:     afterLeave.ringOpacity === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hub-hover ring:`, JSON.stringify(results),
+  `\n  before=`,    before,
+  `\n  onHover=`,   onHover,
+  `\n  afterLeave=`, afterLeave);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-pin-test.mjs

@@ -0,0 +1,126 @@
+/* Round 116 verification: recent-signal row click pins the edge.
+ * R56 made hover transient; R116 makes click sticky — survives
+ * mouseleave, releases on second click or Esc. activeEdgeKey =
+ * hoveredEdgeKey ?? pinnedEdgeKey, so hover-while-pinned previews
+ * another edge transiently and mouseleave falls back to the pin.
+ *
+ * Drives 2 flow rows. Click row 0 → row's aria-pressed=true,
+ * data-recent-row-pinned=true, the edge stays bright after mouseleave
+ * (non-endpoints stay dim, endpoint ring stays). Click row 0 again
+ * → release. Pin row 0, hover row 1 → row-1 preview wins; leave →
+ * row-0 pin restores. Esc clears.
+ */
+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: 1400, 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: 'idle', model: 'claude-opus-4', runtime: 'cli-claude-code',
+    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'), mk('delta')] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from_alias, to_alias, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  mkMsg('m1', 'alpha', 'beta',  30 * 1000),
+  mkMsg('m2', 'gamma', 'delta', 60 * 1000),
+] } }));
+await ctx.route('**/api/hub/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const rowState = (key) => page.evaluate((k) => {
+  const g = document.querySelector(`[data-recent-row="${k}"]`);
+  return {
+    pinned: g?.getAttribute('data-recent-row-pinned') || '',
+    aria:   g?.getAttribute('aria-pressed') || '',
+  };
+}, key);
+const endpointRingFor = (alias) => page.evaluate((a) => {
+  const g = document.querySelector(`g[data-node="${a}"]`);
+  return !!g?.querySelector('[data-edge-endpoint-ring]');
+}, alias);
+
+const before = await rowState('alpha->beta');
+
+// Click row 0 → pin.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterPin       = await rowState('alpha->beta');
+const alphaRingPin   = await endpointRingFor('alpha');
+const betaRingPin    = await endpointRingFor('beta');
+const gammaRingPin   = await endpointRingFor('gamma');
+
+// Click again → release.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const afterRelease     = await rowState('alpha->beta');
+const alphaRingRelease = await endpointRingFor('alpha');
+
+// Pin row 0 again, hover row 1 — preview wins.
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.mouse.move(10, 10);
+await page.waitForTimeout(200);
+await page.locator('[data-recent-row="gamma->delta"]').hover();
+await page.waitForTimeout(300);
+const alphaWhileHoverGamma = await endpointRingFor('alpha');
+const gammaWhileHover      = await endpointRingFor('gamma');
+
+// Leave gamma row — row-0 pin restores.
+await page.mouse.move(10, 10);
+await page.waitForTimeout(300);
+const alphaAfterLeave = await endpointRingFor('alpha');
+const gammaAfterLeave = await endpointRingFor('gamma');
+
+// Esc clears.
+await page.keyboard.press('Escape');
+await page.waitForTimeout(300);
+const afterEsc       = await rowState('alpha->beta');
+const alphaAfterEsc  = await endpointRingFor('alpha');
+
+await browser.close();
+
+const results = {
+  before_notPinned:         before.pinned === 'false' && before.aria === 'false',
+  pin_attrTrue:             afterPin.pinned === 'true' && afterPin.aria === 'true',
+  pin_endpointsLit:         alphaRingPin === true && betaRingPin === true,
+  pin_nonEndpointDark:      gammaRingPin === false,
+  releaseAfterReclick:      afterRelease.pinned === 'false' && alphaRingRelease === false,
+  hoverPreview_gammaLit:    gammaWhileHover === true,
+  hoverPreview_alphaDark:   alphaWhileHoverGamma === false,
+  leave_pinRestored:        alphaAfterLeave === true && gammaAfterLeave === false,
+  esc_clearsPin:            afterEsc.pinned === 'false' && alphaAfterEsc === false,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row pin:`, JSON.stringify(results),
+  `\n  afterPin=`,     afterPin,
+  `\n  rings@pin: alpha=`, alphaRingPin, ' beta=', betaRingPin, ' gamma=', gammaRingPin,
+  `\n  afterRelease=`, afterRelease,
+  `\n  hoverPreview: alpha=`, alphaWhileHoverGamma, ' gamma=', gammaWhileHover,
+  `\n  afterLeave: alpha=`, alphaAfterLeave, ' gamma=', gammaAfterLeave,
+  `\n  afterEsc=`,     afterEsc);
+process.exit(ok ? 0 : 1);