@sleep2agi/agent-network-dashboard 0.5.1-preview.111 → 0.5.1-preview.113

package/app/components/TopoGraph.tsx

@@ -5754,13 +5754,34 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               // Mode='spline' + R245 ease-in-out keySplines all
               // preserved. data-topo-hub-halo-radius attr exposes
               // value for tests.
+              /* Round 451 / Loop: hub center halo radius lift on
+                 hoveredHub — r 20 → 22 (+2px, ~21% area). Adds another
+                 geometric axis to the hub-hover signature stack
+                 alongside R177 ring radius lift + R209 digit scale +
+                 R425 digit fw + R370 halo opacity + R386 highlight
+                 opacity + R441 core fill chroma. Pre-R451 the halo
+                 r stayed planted at R408's 20px while the rest of
+                 the hub structure responded to hover. R451 makes
+                 the halo breath outward on hover so the focal pulse
+                 intensifies under attention. SMIL `<animate>` on
+                 opacity continues independently (animateAttr=
+                 'opacity' vs CSS-property r — non-conflicting). R408
+                 base radius 20 preserved as rest; +2 hover delta
+                 keeps clearance from the R177 hub-hover-ring at
+                 r=17 hover (halo is BEHIND the ring, halo r=22 sits
+                 5px beyond the ring's hover-r=17, still well within
+                 the hub canvas envelope). data-topo-hub-halo-radius
+                 attr now reports the dynamic value. */
+              const isHaloHovered = !reducedMotion && hoveredHub;
+              const haloR = isHaloHovered ? 22 : 20;
               return (
                 <circle
-                  cx={cx} cy={cy} r="20"
+                  cx={cx} cy={cy}
                   fill={isLight ? '#d1fae5' : '#10b981'}
                   opacity={isLight ? 0.42 : 0.12}
                   data-hub-busyness={busy}
-                  data-topo-hub-halo-radius="20"
+                  data-topo-hub-halo-radius={haloR}
+                  data-topo-hub-halo-hovered={isHaloHovered ? 'true' : 'false'}
                   data-topo-hub-halo-trough={isLight ? troughLight : troughDark}
                   data-topo-hub-halo-peak={isLight ? peakLight : peakDark}
                   /* Round 253 / Loop: hub grounding halo fill transition
@@ -5769,8 +5790,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      animate on opacity continued running. CSS fill
                      transition is independent of the SMIL animate
                      (different attributes), so they compose without
-                     conflict. */
-                  style={{ transition: 'fill 200ms ease-out' }}
+                     conflict.
+                     R451: r as CSS property (R197/R198 idiom) so the
+                     hover-radius tween eases smoothly under the same
+                     200ms cadence as fill. */
+                  style={{
+                    r: `${haloR}px`,
+                    transition: 'fill 200ms ease-out, r 200ms ease-out',
+                  } as React.CSSProperties}
                 >
                   {/* Round 244 / Loop: hub grounding halo breath gets
                       ease-in-out keySplines, matching the active-node
@@ -7485,6 +7512,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     // CSS pseudo-class; only the transition-property
                     // moves to inline. Big fleets benefit most — this is
                     // the path users see when their dashboard is busiest.
+                    /* Round 452 / Loop: dense plain-text alias rest
+                       opacity 0.9 → 0.95. Closes the alpha gap on the
+                       dense fleet's per-node label, sibling to R449
+                       legend-count-active 0.95→1.0 and R450 minimap
+                       viewport rest 0.9→0.95 — same "close the
+                       active-presence alpha gap" idiom applied here
+                       to the dense-mode alias text at fontSize=9-10
+                       monospace. Pre-R452 dense aliases at α=0.9 sat
+                       just below full alpha; for un-hovered nodes in
+                       a busy >16-node fleet this is the only label
+                       readable, so the 10% alpha gap added a subtle
+                       "soft-focused chrome" feel where the labels
+                       should read as definitive. +0.05 lift makes
+                       them confidently present without erasing the
+                       status.text + R110 stroke halo + paintOrder
+                       layering. R26 group-hover translate + R212
+                       fill 300ms transition + R110 stroke=container-
+                       Bg halo all preserved. data-node-dense-alias-
+                       text-opacity attr exposes the resolved value
+                       for tests. */
                     <text
                       x={pos.x}
                       y={pos.y + radius + denseDrop}
@@ -7493,9 +7540,10 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       fontSize={denseFs}
                       fontFamily="monospace"
                       fontWeight="700"
-                      opacity={0.9}
+                      opacity={0.95}
                       className="group-hover:-translate-y-[1.5px]"
                       data-node-dense-alias-text={session.alias}
+                      data-node-dense-alias-text-opacity="0.95"
                       style={{
                         pointerEvents: 'none',
                         paintOrder: 'stroke',

package/package.json

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

package/scripts/topo-dense-alias-opacity-test.mjs

@@ -0,0 +1,68 @@
+/* Round 452 verification: dense plain-text alias rest opacity 0.9 → 0.95.
+ * Sibling to R449/R450 canvas-presence alpha-gap closures.
+ *
+ * Contract:
+ *   - need >16 sessions to enter dense layout
+ *   - every dense alias-text reports opacity '0.95' + -opacity attr '0.95'
+ *   - source-file probe confirms the value
+ */
+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,
+  });
+  // 20 nodes — crosses the >16 dense threshold
+  const sessions = [];
+  for (let i = 0; i < 20; i++) {
+    sessions.push(mk(`n${String(i).padStart(2, '0')}`, i % 3 === 0 ? 'working' : 'idle'));
+  }
+  await route.fulfill({ response: r, json: { ...b, sessions } });
+});
+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-dense-alias-text]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const aliases = await page.evaluate(() => {
+  const ts = [...document.querySelectorAll('[data-node-dense-alias-text]')];
+  return ts.map(t => ({
+    alias:    t.getAttribute('data-node-dense-alias-text'),
+    opacity:  t.getAttribute('opacity'),
+    data_op:  t.getAttribute('data-node-dense-alias-text-opacity'),
+  }));
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /opacity=\{0\.95\}/.test(fileText) && /data-node-dense-alias-text-opacity="0\.95"/.test(fileText);
+
+await browser.close();
+
+const results = {
+  dense_layout_count_ge_17: aliases.length >= 17,
+  all_opacity_0_95:         aliases.every(a => a.opacity === '0.95'),
+  all_data_op_0_95:         aliases.every(a => a.data_op === '0.95'),
+  source_wired:             sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} dense alias opacity 0.95:`, JSON.stringify(results),
+  '\n  count:', aliases.length, 'sample:', JSON.stringify(aliases[0]));
+process.exit(ok ? 0 : 1);

package/scripts/topo-hub-halo-r-hover-test.mjs

@@ -0,0 +1,82 @@
+/* Round 451 verification: hub center halo radius hover lift —
+ * r 20 → 22 on hoveredHub.
+ *
+ * Contract:
+ *   - rest: hub halo reports data-topo-hub-halo-radius '20' + hovered='false'
+ *   - hover the hub <g>: halo lifts to r '22' + hovered='true'
+ */
+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'),
+  ] } });
+});
+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-halo-radius]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const readHalo = () => page.evaluate(() => {
+  const c = document.querySelector('[data-topo-hub-halo-radius]');
+  return c ? {
+    r_data:  parseFloat(c.getAttribute('data-topo-hub-halo-radius') || '0'),
+    hovered: c.getAttribute('data-topo-hub-halo-hovered'),
+  } : null;
+});
+
+const rest = await readHalo();
+
+let hover = null;
+const hubBox = await page.evaluate(() => {
+  const hub = document.querySelector('[data-topo-hub]');
+  if (!hub) return null;
+  const b = hub.getBoundingClientRect();
+  return { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+});
+if (hubBox) {
+  await page.mouse.move(hubBox.x, hubBox.y);
+  await page.waitForTimeout(300);
+  hover = await readHalo();
+  await page.mouse.move(0, 0);
+}
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceWired = /const haloR = isHaloHovered \? 22 : 20/.test(fileText);
+
+await browser.close();
+
+const results = {
+  rest_mounted:        !!rest,
+  rest_r_20:           rest?.r_data === 20,
+  rest_hovered_false:  rest?.hovered === 'false',
+  hover_r_22:          hover?.r_data === 22,
+  hover_hovered_true:  hover?.hovered === 'true',
+  source_wired:        sourceWired,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hub halo hover r:`, JSON.stringify(results),
+  '\n  rest:', rest, '\n  hover:', hover);
+process.exit(ok ? 0 : 1);