@sleep2agi/agent-network-dashboard 0.4.6-preview.88 → 0.4.6-preview.89

package/app/components/TopoGraph.tsx

@@ -1211,11 +1211,24 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               isn't part of the R55 type set, so this chip routes to the
               dominant online sub-tier instead of inventing a new state.
               Cursor only flips when there's anything to highlight. */}
+          {/* R82: pin-mirror. R60 pressure-bar segments visualise the
+              pinned status via an inset boxShadow; R61 legend rows via a
+              concentric r=8 ring; the chip-row chips next to them did
+              not — so a user who pinned via Cmd+K (R69) or the legend
+              had no chip-row signal that "working" was the current
+              filter. Mirror the pressure-bar treatment here so all
+              status surfaces sing in unison. The online chip mirrors
+              for idle pins (working ⊆ online; the routing in
+              onMouseEnter already treats online as the idle fallback). */}
           <span
             className="px-2.5 py-1 rounded-md bg-green-500/10 text-green-300 border border-green-500/20"
             data-working-chip
-            title={workingCount > 0 ? 'Hover to highlight working nodes' : undefined}
-            style={{ cursor: workingCount > 0 ? 'pointer' : undefined }}
+            data-pin-mirror={pinnedStatus === 'working' ? 'true' : 'false'}
+            title={workingCount > 0 ? (pinnedStatus === 'working' ? 'Pinned — Esc to clear' : 'Hover to highlight working nodes') : undefined}
+            style={{
+              cursor: workingCount > 0 ? 'pointer' : undefined,
+              boxShadow: pinnedStatus === 'working' ? 'inset 0 0 0 1px #4ade80, inset 0 0 0 2px rgba(255,255,255,0.45)' : undefined,
+            }}
             onMouseEnter={() => { if (workingCount > 0) setHoveredStatus('working'); }}
             onMouseLeave={() => setHoveredStatus(prev => prev === 'working' ? null : prev)}
           >
@@ -1224,8 +1237,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           <span
             className="px-2.5 py-1 rounded-md bg-cyan-500/10 text-cyan-300 border border-cyan-500/20"
             data-online-chip
-            title={onlineNodes.length > 0 ? 'Hover to highlight online nodes' : undefined}
-            style={{ cursor: onlineNodes.length > 0 ? 'pointer' : undefined }}
+            data-pin-mirror={pinnedStatus === 'idle' ? 'true' : 'false'}
+            title={onlineNodes.length > 0 ? (pinnedStatus === 'idle' ? 'Pinned — Esc to clear' : 'Hover to highlight online nodes') : undefined}
+            style={{
+              cursor: onlineNodes.length > 0 ? 'pointer' : undefined,
+              boxShadow: pinnedStatus === 'idle' ? 'inset 0 0 0 1px #67e8f9, inset 0 0 0 2px rgba(255,255,255,0.45)' : undefined,
+            }}
             onMouseEnter={() => {
               // If a working filter would isolate nothing, route to idle.
               const idleCount = onlineNodes.length - workingCount;

package/package.json

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

package/scripts/topo-chip-pin-mirror-test.mjs

@@ -0,0 +1,113 @@
+/* Round 82 verification: chip-row "N working" + "N online" chips mirror
+ * the pin state already shown by the R60 pressure-bar segments. When
+ * pinnedStatus === 'working', the working chip lights up via inset
+ * boxShadow + data-pin-mirror="true"; idle pin lights the online chip.
+ * Closes the visual inconsistency where pressure-bar + legend showed
+ * the pin but the sibling count chips stayed flat.
+ *
+ * Drive the pin via Cmd+K palette (R69 action) to verify the chip
+ * reflects a pin set from a non-chip surface — exercises the full
+ * coupling, not just a chip clicking itself.
+ */
+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: 1200 } });
+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');
+    sessionStorage.removeItem('anet-topo-pinned-status');
+    sessionStorage.removeItem('anet-topo-pinned-group');
+  } 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 sessions = [
+    { alias: 'alpha', 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 },
+    { alias: 'beta',  status: 'idle',    model: 'gpt-5',         runtime: 'codex-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 } });
+});
+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 === 2, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const snap = () => page.evaluate(() => {
+  const w = document.querySelector('[data-working-chip]');
+  const o = document.querySelector('[data-online-chip]');
+  return {
+    working: {
+      mirror: w?.getAttribute('data-pin-mirror'),
+      shadow: w ? (w.getAttribute('style') || '').includes('inset') : false,
+      title:  w?.getAttribute('title') || '',
+    },
+    online: {
+      mirror: o?.getAttribute('data-pin-mirror'),
+      shadow: o ? (o.getAttribute('style') || '').includes('inset') : false,
+      title:  o?.getAttribute('title') || '',
+    },
+  };
+});
+
+const before = await snap();
+
+// Dispatch the R69 CustomEvent directly — same coupling the palette
+// uses, deterministic without fuzzy-match ambiguity. The R69 listener
+// in TopoGraph reads `detail.kind === 'status'` + `detail.value`.
+const pin = async (value) => {
+  await page.evaluate((v) => {
+    try { sessionStorage.setItem('anet-topo-pinned-status', v); } catch {}
+    window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: v } }));
+  }, value);
+  await page.waitForTimeout(200);
+};
+const clear = async () => {
+  await page.keyboard.press('Escape');
+  await page.waitForTimeout(250);
+};
+
+await pin('working');
+const onWorking = await snap();
+await clear();
+const afterWorking = await snap();
+
+await pin('idle');
+const onIdle = await snap();
+await clear();
+const afterIdle = await snap();
+
+await browser.close();
+
+const results = {
+  before_workingFlat:    before.working.mirror === 'false' && !before.working.shadow,
+  before_onlineFlat:     before.online.mirror  === 'false' && !before.online.shadow,
+  workingPin_workingLit: onWorking.working.mirror === 'true' && onWorking.working.shadow,
+  workingPin_onlineFlat: onWorking.online.mirror  === 'false' && !onWorking.online.shadow,
+  workingPin_titleHint:  /Pinned/i.test(onWorking.working.title),
+  esc_workingFlat:       afterWorking.working.mirror === 'false' && !afterWorking.working.shadow,
+  esc_onlineUntouched:   afterWorking.online.mirror  === 'false' && !afterWorking.online.shadow,
+  idlePin_onlineLit:     onIdle.online.mirror === 'true' && onIdle.online.shadow,
+  idlePin_workingFlat:   onIdle.working.mirror === 'false' && !onIdle.working.shadow,
+  idlePin_titleHint:     /Pinned/i.test(onIdle.online.title),
+  esc_onlineFlat:        afterIdle.online.mirror === 'false' && !afterIdle.online.shadow,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chip pin-mirror:`, JSON.stringify(results),
+  `\n  before=`,       before,
+  `\n  onWorking=`,    onWorking,
+  `\n  onIdle=`,       onIdle);
+process.exit(ok ? 0 : 1);