@sleep2agi/agent-network-dashboard 0.4.6-preview.165 → 0.4.6-preview.167

package/app/components/TopoGraph.tsx

@@ -2946,6 +2946,26 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           {layout === 'ring' && (<g
             data-topo-hub
             data-topo-hub-hovered={hoveredHub ? 'true' : 'false'}
+            // Round 159 / Loop: the hub is the most visually
+            // prominent interactive element on the canvas (R39
+            // enlarged it, R52 made it click to fitView, R115
+            // added a hover ring, R43 gave it a tooltip) — but
+            // R151-R157's a11y sweep skipped it. role/tabIndex/
+            // aria-label/onKeyDown bring it to parity with node <g>
+            // (R151), group label hit (R152), and minimap (R157).
+            // anet-topo-svg-focus picks up R156's explicit cyan
+            // focus ring (default browser SVG focus rect is hard
+            // to see against the dark canvas).
+            role="button"
+            tabIndex={0}
+            aria-label={(() => {
+              const parts = ['Network hub'];
+              if (onlineNodes.length > 0) parts.push(`${onlineNodes.length} online`);
+              if (workingCount > 0) parts.push(`${workingCount} working`);
+              if (flowLinks.length > 0) parts.push(`${flowLinks.length} active link${flowLinks.length === 1 ? '' : 's'}`);
+              return parts.join(' · ') + ' — Enter to fit view';
+            })()}
+            className="anet-topo-svg-focus"
             style={{ cursor: 'pointer' }}
             // Stop pointerdown from reaching the SVG pan handler — same
             // reason as the node <g>: a captured pointer makes Chromium
@@ -2964,6 +2984,14 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               setClickRipple({ ts: Date.now(), x: cx, y: cy, r0: 18, color: isLight ? '#059669' : '#10b981' });
               setTimeout(() => setClickRipple(prev => prev && prev.x === cx && prev.y === cy ? null : prev), 600);
             }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                fitView();
+                setClickRipple({ ts: Date.now(), x: cx, y: cy, r0: 18, color: isLight ? '#059669' : '#10b981' });
+                setTimeout(() => setClickRipple(prev => prev && prev.x === cx && prev.y === cy ? null : prev), 600);
+              }
+            }}
           >
             {/* Round 43 / Loop: hub `<title>` summary — hovering the
                 central glow now answers "what is this?" with a one-line
@@ -3906,6 +3934,55 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                               : 1}
                       style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
                     />
+                    {/* Round 160 / Loop: recency pip. Canvas flow edges
+                        fade by freshness (R10: full intensity ≤30s →
+                        ~35% over 5min). The recent-signal panel rows
+                        duplicate that data (alias→alias · N · 5s)
+                        but encode freshness purely in text — no
+                        at-a-glance visual cue for "which row is
+                        actively firing right now". A 1.6-px cyan dot
+                        at x=10 (in the 7-px margin between rect-
+                        start x=6 and text-start x=13) brightens
+                        fresh rows and dims stale ones — same
+                        vocabulary the canvas uses, brought to the
+                        panel side.
+
+                        Three encodings now coexist on each row,
+                        none competing:
+                          rect fill   = hover/pin state (R104/R116)
+                          count tspan = magnitude (R127 amber when ≥10)
+                          pip         = recency (this round)
+
+                        Geometry: cy = row_y - 3 (mid-row vertical
+                        centre, where text baseline at y=row_y sits
+                        slightly below). r=1.6 fits cleanly in the
+                        7-px left margin. pointerEvents:none so the
+                        row's button-role hit area is unchanged.
+                        No overlap-test impact (entirely within the
+                        existing rect bbox). */}
+                    {(() => {
+                      if (!link.last_at) return null;
+                      const ageSec = Math.max(0, (Date.now() - Date.parse(link.last_at)) / 1000);
+                      // 0-30s: fully fresh (1.0). 30-300s: smooth
+                      // decay 1→0.25. >300s: stale floor (0.25).
+                      const alpha = ageSec <= 30
+                        ? 1
+                        : ageSec <= 300
+                          ? 1 - ((ageSec - 30) / 270) * 0.75
+                          : 0.25;
+                      return (
+                        <circle
+                          cx={10}
+                          cy={38 + index * 16 - 3}
+                          r={1.6}
+                          fill={pal.legendAccent}
+                          opacity={alpha}
+                          data-recent-row-freshness={link.key}
+                          data-recent-row-freshness-alpha={alpha.toFixed(2)}
+                          style={{ pointerEvents: 'none', transition: 'opacity 200ms ease-out' }}
+                        />
+                      );
+                    })()}
                     <text
                       x="13" y={38 + index * 16}
                       fill={isRowActive ? pal.legendHeadline : pal.legendText}

package/package.json

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

package/scripts/topo-hub-a11y-test.mjs

@@ -0,0 +1,112 @@
+/* Round 159 verification: hub <g> gains keyboard a11y.
+ *
+ * R151-R157 a11y sweep covered nodes, group labels, edge badges,
+ * recent rows, legend rows, chrome buttons, minimap, chip-row.
+ * R158 named the canvas root. The hub <g> — the most visually
+ * prominent interactive element on the canvas (R39 enlarged,
+ * R43 tooltip, R52 click-to-fitView, R115 hover ring) — was the
+ * only major interactive R151-R157 skipped.
+ *
+ * R159 closes that gap with the same standard pattern:
+ *   role="button"
+ *   tabIndex={0}
+ *   aria-label="Network hub · N online · K working · M links — Enter to fit view"
+ *   className="anet-topo-svg-focus" (R156 cyan focus ring)
+ *   onKeyDown(Enter/Space) → fitView() + ripple
+ *
+ * Test:
+ *   1. Mock 3 working + 2 idle sessions + zoom in (so fit-to-view
+ *      has a visible effect — zoom level moves away from 100%)
+ *   2. Assert role / tabIndex / aria-label / className on hub
+ *   3. Focus hub + Enter → zoom resets to 100%
+ *   4. Confirm aria-label mentions counts + Enter
+ */
+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');
+    // R159 hub is gated to layout === 'ring' (line 2946 — grid uses
+    // group boxes, no central hub). Force ring.
+    localStorage.setItem('anet-topo-layout', 'ring');
+  } 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, status) => ({
+    alias, status, 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('agents-a1', 'working'), mk('agents-a2', 'working'), mk('agents-a3', 'working'),
+    mk('infra-b1', 'idle'), mk('infra-b2', 'idle'),
+  ] } });
+});
+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 === 5, { timeout: 30000 });
+await page.waitForSelector('[data-topo-hub]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+// Probe ARIA before any interaction
+const probe = await page.evaluate(() => {
+  const el = document.querySelector('[data-topo-hub]');
+  if (!el) return null;
+  return {
+    tagName:   el.tagName.toLowerCase(),
+    role:      el.getAttribute('role'),
+    tabIndex:  el.getAttribute('tabindex'),
+    ariaLabel: el.getAttribute('aria-label'),
+    className: el.getAttribute('class') || '',
+  };
+});
+
+// Zoom in twice so fitView has a visible effect
+await page.keyboard.press('+');
+await page.keyboard.press('+');
+await page.waitForTimeout(250);
+const zoomBefore = await page.evaluate(() =>
+  document.querySelector('[data-topo-chrome-zoom-level]')?.textContent?.trim());
+
+// Focus hub + Enter → fitView resets zoom to 100%
+await page.locator('[data-topo-hub]').focus();
+await page.keyboard.press('Enter');
+await page.waitForTimeout(350);
+const zoomAfter = await page.evaluate(() =>
+  document.querySelector('[data-topo-chrome-zoom-level]')?.textContent?.trim());
+
+await browser.close();
+
+const label = probe?.ariaLabel || '';
+const results = {
+  hub_found:               probe !== null,
+  is_g:                    probe?.tagName === 'g',
+  role_button:             probe?.role === 'button',
+  tabIndex_0:              probe?.tabIndex === '0',
+  label_mentions_online:   /5 online/.test(label),
+  label_mentions_working:  /3 working/.test(label),
+  label_mentions_enter:    /Enter to fit view/.test(label),
+  has_focus_class:         (probe?.className || '').includes('anet-topo-svg-focus'),
+  zoomedBefore:            zoomBefore !== '100%',
+  enter_resetsZoom:        zoomAfter === '100%',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hub a11y:`, JSON.stringify(results),
+  `\n  probe=`, probe,
+  `\n  zoomBefore=${zoomBefore}  zoomAfter=${zoomAfter}`);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,102 @@
+/* Round 160 verification: recency pip on recent-signal panel rows.
+ *
+ * Canvas flow edges fade by freshness (R10: full intensity ≤30s,
+ * decaying to ~35% over 5min). The recent-signal panel rows
+ * encoded last_at purely in text ("5s" at row right edge) — no
+ * at-a-glance visual cue for "which row is actively firing".
+ *
+ * R160 adds a 1.6-px cyan dot at x=10 (in the 7-px margin
+ * between rect-start x=6 and text-start x=13). Alpha ramp:
+ *   ageSec ≤ 30   →  1.0   (fully fresh)
+ *   30 < ageSec ≤ 300 → smooth decay 1.0 → 0.25
+ *   ageSec > 300  →  0.25  (stale floor)
+ *
+ * Three independent encodings on each row, none competing:
+ *   rect fill   = hover/pin state (R104/R116)
+ *   count tspan = magnitude (R127 amber when ≥10)
+ *   pip         = recency (this round)
+ *
+ * Test:
+ *   Mock 3 flows — 1 fresh (5s ago), 1 mid (90s ago), 1 stale
+ *   (6 min ago). Each should produce one pip; alpha ladder:
+ *   fresh > mid > stale.
+ */
+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: 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 {}
+});
+
+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: 'working', 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();
+// Three distinct flows with different recency:
+//   fresh: 5s ago     → alpha ≈ 1.0
+//   mid:   90s ago    → alpha ≈ 1 - (60/270)*0.75 ≈ 0.833
+//   stale: 360s ago   → alpha ≈ 0.25 (floor)
+const msgs = [
+  { id: 'f1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: 'm1', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 90000).toISOString() },
+  { id: 's1', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 360000).toISOString() },
+];
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: msgs } }));
+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-freshness]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probes = await page.evaluate(() => {
+  const pips = [...document.querySelectorAll('[data-recent-row-freshness]')];
+  return pips.map(el => ({
+    key:   el.getAttribute('data-recent-row-freshness'),
+    alpha: parseFloat(el.getAttribute('data-recent-row-freshness-alpha') || ''),
+    cx:    parseFloat(el.getAttribute('cx') || ''),
+    r:     parseFloat(el.getAttribute('r') || ''),
+    tag:   el.tagName.toLowerCase(),
+  }));
+});
+
+await browser.close();
+
+if (probes.length !== 3) {
+  console.log(`❌ wrong pip count: expected 3, got ${probes.length}`, probes);
+  process.exit(1);
+}
+// Rows are sorted by recency (newest first), so probes[0] is freshest.
+const [pFresh, pMid, pStale] = probes;
+const results = {
+  three_pips:              probes.length === 3,
+  all_circles:             probes.every(p => p.tag === 'circle'),
+  all_at_x_10:             probes.every(p => Math.abs(p.cx - 10) < 0.01),
+  all_radius_1p6:          probes.every(p => Math.abs(p.r - 1.6) < 0.01),
+  fresh_alpha_1:           Math.abs(pFresh.alpha - 1.0) < 0.05,
+  mid_alpha_0p7_to_0p9:    pMid.alpha > 0.7 && pMid.alpha < 0.95,
+  stale_alpha_floor_0p25:  Math.abs(pStale.alpha - 0.25) < 0.05,
+  ladder_descends:         pFresh.alpha > pMid.alpha && pMid.alpha > pStale.alpha,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row freshness pip:`, JSON.stringify(results),
+  `\n  probes=`, probes);
+process.exit(ok ? 0 : 1);