@sleep2agi/agent-network-dashboard 0.4.6-preview.161 → 0.4.6-preview.163

package/app/components/TopoGraph.tsx

@@ -1363,7 +1363,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
             return (
               <>
                 <span
-                  className="px-2.5 py-1 rounded-md bg-green-500/10 text-green-300 border border-green-500/20"
+                  className="px-2.5 py-1 rounded-md bg-green-500/10 text-green-300 border border-green-500/20 anet-topo-chip-focus"
                   data-working-chip
                   data-working-chip-aliases={workingAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'working' ? 'true' : 'false'}
@@ -1401,7 +1401,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   {workingCount} working
                 </span>
                 <span
-                  className="px-2.5 py-1 rounded-md bg-cyan-500/10 text-cyan-300 border border-cyan-500/20"
+                  className="px-2.5 py-1 rounded-md bg-cyan-500/10 text-cyan-300 border border-cyan-500/20 anet-topo-chip-focus"
                   data-online-chip
                   data-online-chip-aliases={onlineAliases.join(',')}
                   data-pin-mirror={pinnedStatus === 'idle' ? 'true' : 'false'}
@@ -1485,6 +1485,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   role="button"
                   tabIndex={0}
                   aria-pressed={isPinned}
+                  className="anet-topo-chip-focus"
                   title={`${n} ${label}\n${previewList}${suffix}\n${titleAction}`}
                   style={{
                     width: `${(n / total) * 100}%`,
@@ -1586,7 +1587,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="status"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in"
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in anet-topo-chip-focus"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedStatus(null)}
               style={{
@@ -1624,7 +1625,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="group"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in"
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in anet-topo-chip-focus"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear filter'}
               onClick={() => setPinnedGroup(null)}
               style={{
@@ -1674,7 +1675,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-active-filter="vendor"
               data-filter-match-count={matchCount}
               data-filter-match-aliases={matchAliases.join(',')}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in"
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in anet-topo-chip-focus"
               title={matchCount > 0 ? `${matchPreview}${matchSuffix} — click to clear` : 'Click to clear vendor filter'}
               onClick={() => setPinnedVendor(null)}
               style={{
@@ -1722,7 +1723,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               data-filter-match-count={link.count}
               data-filter-match-aliases={`${link.from},${link.to}`}
               data-active-filter-edge-hot={isHot ? 'true' : 'false'}
-              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in"
+              className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in anet-topo-chip-focus"
               title={`${link.from} → ${link.to} (${link.count} msg${link.count === 1 ? '' : 's'}${isHot ? ', hot lane · ≥ 10' : ''}) — click to clear`}
               onClick={() => setPinnedEdgeKey(null)}
               style={{
@@ -1836,7 +1837,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 data-pin-intersection-count={matchAliases.length}
                 data-pin-intersection-empty={isEmpty ? 'true' : 'false'}
                 data-pin-intersection-aliases={matchAliases.join(',')}
-                className="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in"
+                className="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md font-mono text-xs border anet-fade-in anet-topo-chip-focus"
                 title={tooltip}
                 style={{
                   background: isEmpty
@@ -1889,7 +1890,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     role="button"
                     tabIndex={0}
                     aria-pressed={isPinned}
-                    className="inline-flex items-baseline gap-0.5 px-1 rounded"
+                    className="inline-flex items-baseline gap-0.5 px-1 rounded anet-topo-chip-focus"
                     data-vendor-letter={v.initial}
                     data-vendor-pinned={isPinned ? 'true' : 'false'}
                     data-vendor-aliases={aliases.join(',')}
@@ -1959,7 +1960,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               : `${flowList}${flowSuffix} — hover brightens all · click to open /messages`;
             return (
               <span
-                className="hidden sm:inline px-2.5 py-1 rounded-md bg-gray-500/10 text-gray-400 border border-gray-500/20"
+                className="hidden sm:inline px-2.5 py-1 rounded-md bg-gray-500/10 text-gray-400 border border-gray-500/20 anet-topo-chip-focus"
                 data-active-links-chip
                 data-active-links-flow-count={flowLinks.length}
                 data-active-links-clickable={isInteractive ? 'true' : 'false'}
@@ -2475,6 +2476,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   tabIndex={0}
                   aria-pressed={pinnedGroup === box.key}
                   data-group-label-hit={box.key}
+                  className="anet-topo-svg-focus"
                   style={{ pointerEvents: 'all', cursor: 'pointer' }}
                   onPointerDown={(e) => e.stopPropagation()}
                   onClick={() => setPinnedGroup(prev => prev === box.key ? null : box.key)}
@@ -2856,6 +2858,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       role="button"
                       tabIndex={0}
                       aria-pressed={isPinned}
+                      className="anet-topo-svg-focus"
                       style={{ pointerEvents: 'all', cursor: 'pointer' }}
                       opacity={badgeOpacity}
                       onPointerDown={(e) => e.stopPropagation()}
@@ -3133,7 +3136,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 // an existing node don't re-trigger (React preserves the <g>
                 // via the alias key), so status changes don't flicker. The
                 // global prefers-reduced-motion sweep already neutralises it.
-                className="group transition-opacity anet-fade-in"
+                className="group transition-opacity anet-fade-in anet-topo-svg-focus"
                 style={{
                   cursor: 'pointer',
                   // Round 17 / Loop: offline nodes drop to 0.6 at rest so
@@ -3805,6 +3808,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     data-recent-row-pinned={isRowPinned ? 'true' : 'false'}
                     data-recent-row-hot={isHot ? 'true' : 'false'}
                     data-recent-row-lifted={(isRowHovered || isRowPinned) ? 'true' : 'false'}
+                    className="anet-topo-svg-focus"
                     role="button"
                     tabIndex={0}
                     aria-pressed={isRowPinned}
@@ -3951,6 +3955,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   data-recent-panel-more-nav
                   role="link"
                   tabIndex={0}
+                  className="anet-topo-svg-focus"
                   style={{ cursor: 'pointer', pointerEvents: 'all' }}
                   onPointerDown={(e) => e.stopPropagation()}
                   onMouseEnter={() => setHoveredRecentMore(true)}
@@ -4051,6 +4056,7 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   key={row.key}
                   data-legend-status={row.key}
                   data-legend-row-lifted={isLifted ? 'true' : 'false'}
+                  className="anet-topo-svg-focus"
                   role="button"
                   tabIndex={0}
                   aria-pressed={isPinned}

package/app/globals.css

@@ -856,6 +856,35 @@ body {
   animation-iteration-count: infinite;
 }
 
+/* R155 — focus-visible outline for TopoGraph chip-row interactives.
+   Cyber theme's dark canvas often swallows the browser default focus
+   ring; R154 fixed it for chrome buttons via Tailwind's focus-visible:
+   ring (box-shadow). Chip-row chips reuse `box-shadow` for the R88 /
+   R139 / R140 pin-mirror inset — so a focus box-shadow would conflict
+   with the pinned-state shadow. `outline` is a separate CSS property
+   and doesn't fight box-shadow, so we use it here. `currentColor`
+   inherits the chip's own accent (green for working, cyan for online,
+   per-vendor for letters, etc.). Only fires on :focus-visible
+   (keyboard) — mouse focus stays unstyled. */
+.anet-topo-chip-focus:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 1px;
+}
+
+/* R156 — focus-visible outline for SVG-side TopoGraph interactives.
+   Same idiom as R155's chip-row class but for SVG <g> elements
+   (recent-signal rows, legend rows, group labels, edge badges,
+   node bodies, "+N more" footer). Each <g> already has role=
+   "button"/"link" + tabIndex=0 + onKeyDown (R116/R121/R133/R143/
+   R144/R151/R152). Browser default focus outline on SVG is hard
+   to spot against the canvas; explicit cyan-300 ring matches the
+   dashboard's legendAccent. 2-px outline-offset gives breathing
+   room around the painted bounding box. */
+.anet-topo-svg-focus:focus-visible {
+  outline: 2px solid #67e8f9;
+  outline-offset: 2px;
+}
+
 /* Round 46 — animated dashed spokes flowing from hub outward. Each spoke
    gets a small animationDelay (set inline) so the dashes don't all flow
    in sync — reads as "command relay" pulse rather than a metronome.

package/package.json

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

package/scripts/topo-chip-focus-test.mjs

@@ -0,0 +1,95 @@
+/* Round 155 verification: chip-row interactives gain
+ * `.anet-topo-chip-focus` for keyboard focus-visible outline,
+ * matching R154's chrome-button treatment.
+ *
+ * Why `outline` not `box-shadow`: the R88 vendor letter / R139
+ * working chip / R140 online chip already use inline boxShadow
+ * for the pin-mirror inset. Adding focus-visible:ring (which
+ * Tailwind paints via box-shadow) would conflict — inline style
+ * wins specificity. `outline: 2px solid currentColor` is on a
+ * separate CSS property, no conflict; `currentColor` inherits
+ * the chip's own accent (green / cyan / per-vendor / etc.).
+ *
+ * Test: every chip-row interactive surface carries the class.
+ */
+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, status, model) => ({
+    alias, status, model, 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', 'working', 'claude-opus-4'),
+    mk('beta',  'idle',    'gpt-4o'),
+  ] } });
+});
+
+const now = Date.now();
+// 1 message to populate flowLinks → active-links chip is interactive
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  { id: 'm0', from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 10000).toISOString() },
+] } }));
+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 === 2, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+// Pin status + vendor to surface filter pills + intersection chip
+await page.evaluate(() => {
+  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'working' } }));
+  window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'vendor', value: 'A' } }));
+});
+await page.waitForTimeout(300);
+
+const inspect = () => page.evaluate(() => {
+  const has = (sel) => {
+    const el = document.querySelector(sel);
+    return el && (el.className || '').includes('anet-topo-chip-focus');
+  };
+  return {
+    pressureSeg_working:  has('[data-pressure-seg="working"]'),
+    workingChip:          has('[data-working-chip]'),
+    onlineChip:           has('[data-online-chip]'),
+    vendorLetter_A:       has('[data-vendor-letter="A"]'),
+    activeLinks:          has('[data-active-links-chip]'),
+    filterPill_status:    has('[data-active-filter="status"]'),
+    filterPill_vendor:    has('[data-active-filter="vendor"]'),
+    intersectionChip:     has('[data-pin-intersection]'),
+  };
+});
+
+const result = await inspect();
+await browser.close();
+
+const results = {
+  pressureSeg_focusClass: result.pressureSeg_working === true,
+  workingChip_focusClass: result.workingChip === true,
+  onlineChip_focusClass:  result.onlineChip === true,
+  vendorLetter_focusClass: result.vendorLetter_A === true,
+  activeLinks_focusClass: result.activeLinks === true,
+  filterPillStatus_focusClass: result.filterPill_status === true,
+  filterPillVendor_focusClass: result.filterPill_vendor === true,
+  intersectionChip_focusClass: result.intersectionChip === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip focus class:`, JSON.stringify(results),
+  `\n  raw=`, result);
+process.exit(ok ? 0 : 1);

package/scripts/topo-svg-focus-test.mjs

@@ -0,0 +1,112 @@
+/* Round 156 verification: SVG <g> interactives gain
+ * `.anet-topo-svg-focus` for keyboard focus outline.
+ *
+ * Mirrors R155's chip-row treatment at the SVG scope. 6 surfaces:
+ *   data-node                       (R151 node body)
+ *   data-group-label-hit            (R63 group label)
+ *   data-edge-count-badge           (R121 edge badge)
+ *   data-recent-row                 (R116 recent-signal row)
+ *   data-recent-panel-more-nav      (R133 "+N more" footer)
+ *   data-legend-status              (R61 legend row)
+ *
+ * Class `.anet-topo-svg-focus:focus-visible` paints outline 2px
+ * cyan-300 (#67e8f9) with 2px outline-offset. Browser default
+ * focus ring on SVG is hard to spot against the dashboard
+ * canvas; explicit cyan matches the legendAccent palette.
+ *
+ * Test: every SVG interactive surface carries the class.
+ */
+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: 1600, 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');
+    // grid layout to surface group labels
+    localStorage.setItem('anet-topo-layout', 'grid');
+  } 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('infra-b1',  'working'),
+  ] } });
+});
+
+const now = Date.now();
+// Edge midpoint count badge (R100) only renders when link.count >= 3.
+// Pair agents-a1 → agents-a2 gets 4 msgs to clear the threshold; add 4
+// other singletons so flowLinks.length = 5 → R128 "+ 2 more flows"
+// footer also renders.
+const msgs = [];
+for (let i = 0; i < 4; i++) {
+  msgs.push({
+    id: `a2a${i}`, from_alias: 'agents-a1', to_alias: 'agents-a2', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (10000 + i * 500)).toISOString(),
+  });
+}
+msgs.push({ id: 'm1', from_alias: 'agents-a2', to_alias: 'infra-b1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 11000).toISOString() });
+msgs.push({ id: 'm2', from_alias: 'infra-b1', to_alias: 'agents-a1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 12000).toISOString() });
+msgs.push({ id: 'm3', from_alias: 'agents-a1', to_alias: 'infra-b1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 13000).toISOString() });
+msgs.push({ id: 'm4', from_alias: 'agents-a2', to_alias: 'agents-a1', content: 'hi',
+  network_id: 'default', created_at: new Date(now - 14000).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 === 3, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row]', { timeout: 10000 });
+await page.waitForSelector('[data-recent-panel-more-nav]', { timeout: 10000 });
+await page.waitForSelector('[data-edge-count-badge]', { timeout: 10000 });
+await page.waitForSelector('[data-group-label-hit]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const out = await page.evaluate(() => {
+  const has = (sel) => {
+    const el = document.querySelector(sel);
+    return el && (el.getAttribute('class') || '').includes('anet-topo-svg-focus');
+  };
+  return {
+    nodeBody:           has('g[data-node]'),
+    groupLabel:         has('[data-group-label-hit]'),
+    edgeCountBadge:     has('[data-edge-count-badge]'),
+    recentRow:          has('[data-recent-row]'),
+    recentPanelMoreNav: has('[data-recent-panel-more-nav]'),
+    legendStatusRow:    has('[data-legend-status="working"]'),
+  };
+});
+
+await browser.close();
+
+const results = {
+  nodeBody_focus:           out.nodeBody === true,
+  groupLabel_focus:         out.groupLabel === true,
+  edgeCountBadge_focus:     out.edgeCountBadge === true,
+  recentRow_focus:          out.recentRow === true,
+  recentPanelMoreNav_focus: out.recentPanelMoreNav === true,
+  legendStatusRow_focus:    out.legendStatusRow === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} SVG focus class:`, JSON.stringify(results),
+  `\n  raw=`, out);
+process.exit(ok ? 0 : 1);