@sleep2agi/agent-network-dashboard 0.5.1-preview.81 → 0.5.1-preview.83

package/app/components/TopoGraph.tsx

@@ -4839,12 +4839,23 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                      multiple). Edge order is stable (sorted by recent
                      activity), so the offsets feel calm rather than
                      reshuffling each refresh. */
+                  /* Round 422 / Loop: edge flow particle radius 4 → 4.5.
+                     Visual-weight bump family (15th anchor) — particles
+                     riding along the edge animateMotion path get +0.5px
+                     radius lift, increasing visual area by ~27%
+                     (π·4.5² / π·4² = 1.27). Sibling magnitude to R383
+                     recent-row pip 1.8 → 2.0 (+25% area), R384 minimap
+                     online dot 1.7 → 1.9 (+25% area). R251 fill +
+                     R252 transitions + R103 phase-stagger animateMotion
+                     all preserved. data-edge-particle-radius attr
+                     exposes the value for tests. */
                   <circle
-                    r="4"
+                    r="4.5"
                     fill={pal.flowParticle}
                     filter={isLight ? undefined : 'url(#topo-glow)'}
                     opacity={Math.min(1, fresh * edgeOpacityMul)}
                     data-edge-particle={link.key}
+                    data-edge-particle-radius="4.5"
                     /* Round 252 / Loop: particle picks up fill +
                        opacity transition for theme-toggle smoothing.
                        Pre-R252 pal.flowParticle (cyber #fef08a yellow
@@ -9221,12 +9232,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                          list + R384 r=1.9 + R372 offline 0.6 all
                          preserved. data-topo-minimap-dot-opacity attr
                          bumps to '0.95' for tests. */
+                      /* Round 421 / Loop: online dot opacity 0.95 → 1.0
+                         on minimap container hover. Sibling to R346
+                         viewport rect strokeWidth/opacity hover tween.
+                         When the user hovers the minimap container,
+                         the live-fleet anchors brighten from R392
+                         baseline (0.95) to full opacity in concert
+                         with the R346 viewport rect lift. Offline
+                         stays at R372 0.6 — hover state focuses
+                         attention on the ACTIVE anchors, not the
+                         stale ones. data-topo-minimap-dot-opacity
+                         attr (R392) reflects the resolved hover-
+                         state value for tests. */
                       r={isOn ? 1.9 : 1.2}
                       fill={st.primary}
-                      opacity={isOn ? 0.95 : 0.6}
+                      opacity={isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6}
                       data-topo-minimap-dot={s.alias}
                       data-topo-minimap-dot-online={isOn ? 'true' : 'false'}
-                      data-topo-minimap-dot-opacity={isOn ? 0.95 : 0.6}
+                      data-topo-minimap-dot-opacity={isOn ? (hoveredMinimap ? 1 : 0.95) : 0.6}
                       data-topo-minimap-dot-radius={isOn ? 1.9 : 1.2}
                       style={{
                         transition: 'opacity 200ms ease-out, fill 200ms ease-out, r 200ms ease-out',

package/package.json

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

package/scripts/topo-edge-particle-radius-test.mjs

@@ -0,0 +1,76 @@
+/* Round 422 verification: edge flow particle radius 4 → 4.5.
+ * Visual-weight bump family 15th anchor — particles riding along
+ * edge animateMotion paths get +0.5px lift (~27% area increase).
+ *
+ * Contract:
+ *   - Seed a flow alpha→beta so an edge mounts → particle mounts
+ *   - The <circle data-edge-particle> has:
+ *     * r attr === '4.5'
+ *     * data-edge-particle-radius === '4.5'
+ *   - Pre-R422 invariants preserved:
+ *     * R251 fill present (pal.flowParticle)
+ *     * R252 transition list (fill 200ms + opacity 200ms)
+ */
+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) => ({
+    alias, status: 'idle', 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'), mk('beta'), mk('gamma') ] } });
+});
+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' },
+  ] },
+}));
+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-particle]', { timeout: 15000 });
+await page.waitForTimeout(500);
+
+const probe = await page.evaluate(() => {
+  const particle = document.querySelector('[data-edge-particle]');
+  if (!particle) return null;
+  return {
+    rAttr:        particle.getAttribute('r'),
+    rData:        particle.getAttribute('data-edge-particle-radius'),
+    fill:         particle.getAttribute('fill'),
+    fillPresent:  !!particle.getAttribute('fill'),
+    styleAttr:    particle.getAttribute('style') || '',
+  };
+});
+
+await browser.close();
+
+const results = {
+  // R422 wire
+  r_attr_4_5:                 probe?.rAttr === '4.5',
+  r_data_4_5:                 probe?.rData === '4.5',
+  // R251 fill invariant
+  fill_present:               probe?.fillPresent === true,
+  // R252 transition invariant
+  transition_fill:            probe?.styleAttr.includes('fill') === true,
+  transition_opacity:         probe?.styleAttr.includes('opacity') === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} edge flow particle radius 4 → 4.5:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-minimap-online-hover-opacity-test.mjs

@@ -0,0 +1,92 @@
+/* Round 421 verification: minimap online dot opacity 0.95 → 1.0 on
+ * minimap container hover. Sibling to R346 viewport rect tween.
+ * Live-fleet anchors brighten when user hovers the minimap.
+ *
+ * Contract:
+ *   - Minimap mounts on non-default view → zoom-in twice
+ *   - Rest state: online dot opacity '0.95' (R392 invariant)
+ *   - Hover state (page.hover on minimap container):
+ *     * online dot opacity '1' + data '1'
+ *     * R346 viewport strokeWidth '1.75'
+ *   - Offline dot stays at R372 '0.6' in both states
+ */
+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 stale = new Date(Date.now() - 30 * 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';
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    { alias: 'alpha', status: 'idle',    model: 'claude-opus-4', runtime: 'claude-code-cli', network_id: nid, project_dir: null, created_at: fresh, updated_at: fresh, last_seen_at: fresh },
+    { alias: 'ghost', status: 'offline', model: 'claude-opus-4', runtime: 'claude-code-cli', network_id: nid, project_dir: null, created_at: stale, updated_at: stale, last_seen_at: stale },
+  ] } });
+});
+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('g[data-node]', { timeout: 15000 });
+await page.waitForTimeout(300);
+
+await page.click('[data-topo-chrome-zoom-in]');
+await page.click('[data-topo-chrome-zoom-in]');
+await page.waitForSelector('[data-topo-minimap-dot]', { timeout: 5000 });
+await page.waitForTimeout(400);
+
+const restProbe = await page.evaluate(() => {
+  const dots = Array.from(document.querySelectorAll('[data-topo-minimap-dot]'));
+  const on  = dots.find((d) => d.getAttribute('data-topo-minimap-dot-online') === 'true');
+  const off = dots.find((d) => d.getAttribute('data-topo-minimap-dot-online') === 'false');
+  return {
+    online:  on  ? { opacity: on.getAttribute('opacity'),  data: on.getAttribute('data-topo-minimap-dot-opacity')  } : null,
+    offline: off ? { opacity: off.getAttribute('opacity'), data: off.getAttribute('data-topo-minimap-dot-opacity') } : null,
+  };
+});
+
+await page.hover('[data-topo-minimap]');
+await page.waitForTimeout(400);
+
+const hoverProbe = await page.evaluate(() => {
+  const dots = Array.from(document.querySelectorAll('[data-topo-minimap-dot]'));
+  const on  = dots.find((d) => d.getAttribute('data-topo-minimap-dot-online') === 'true');
+  const off = dots.find((d) => d.getAttribute('data-topo-minimap-dot-online') === 'false');
+  const view = document.querySelector('[data-topo-minimap-viewport]');
+  return {
+    online:  on  ? { opacity: on.getAttribute('opacity'),  data: on.getAttribute('data-topo-minimap-dot-opacity')  } : null,
+    offline: off ? { opacity: off.getAttribute('opacity'), data: off.getAttribute('data-topo-minimap-dot-opacity') } : null,
+    viewportSw: view?.getAttribute('stroke-width') ?? null,
+  };
+});
+
+await browser.close();
+
+const results = {
+  // Rest state (R392 baseline)
+  rest_online_0_95:     restProbe.online?.opacity === '0.95',
+  rest_online_data_0_95: restProbe.online?.data === '0.95',
+  rest_offline_0_6:     restProbe.offline?.opacity === '0.6',
+  // Hover state (R421 lift)
+  hover_online_1:       hoverProbe.online?.opacity === '1',
+  hover_online_data_1:  hoverProbe.online?.data === '1',
+  // R372 offline invariant: stays at 0.6 in both states
+  hover_offline_0_6:    hoverProbe.offline?.opacity === '0.6',
+  // R346 viewport lift on hover (invariant)
+  hover_viewport_sw_1_75: hoverProbe.viewportSw === '1.75',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap online dot hover opacity 0.95 → 1.0:`, JSON.stringify(results),
+  '\n  rest: ', restProbe,
+  '\n  hover:', hoverProbe);
+process.exit(ok ? 0 : 1);