@sleep2agi/agent-network-dashboard 0.5.1-preview.46 → 0.5.1-preview.48

package/app/components/TopoGraph.tsx

@@ -5383,13 +5383,33 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 + 300ms opacity transition + pointerEvents:none all
                 preserved. data-topo-hub-highlight-radius attr exposes
                 the value for tests. */}
+            {/* Round 386 / Loop: hub-highlight idle opacity 0.9 → 0.95.
+                When workingCount===0 the highlight paints as the visible
+                idle "lamp lit but no work" core (R130 takeover gate).
+                Pre-R386 idle opacity was 0.9 — a ~6 % fade against full
+                paint that read as slightly-dimmed-ghost on the focal
+                point. R386 lifts to 0.95 (idle alpha gap halved 0.10
+                → 0.05) so the canvas anchor reads more confidently
+                as a present-but-idle state rather than a faded ghost.
+                Theme-consistency / canvas-presence polish family (4th
+                anchor):
+                  R370 hub hover-ring opacity 0.7 → 0.8 cyber
+                  R371 edge-badge rest opacity 0.82 → 0.85 cyber
+                  R372 minimap offline-dot opacity 0.5 → 0.6
+                  R386 hub-highlight idle opacity 0.9 → 0.95 (this round)
+                opacity=0 when working preserved so the hub-digit's
+                R130 takeover stays seamless. 300ms opacity transition
+                + R213 always-mount opacity-gate + pointerEvents:none
+                + R365 r=5.5 all preserved. data-topo-hub-highlight-
+                opacity attr exposes the resolved value for tests. */}
             <circle
               cx={cx} cy={cy} r="5.5"
               fill="#d1fae5"
-              opacity={workingCount > 0 ? 0 : 0.9}
+              opacity={workingCount > 0 ? 0 : 0.95}
               data-topo-hub-highlight
               data-topo-hub-highlight-visible={workingCount > 0 ? 'false' : 'true'}
               data-topo-hub-highlight-radius="5.5"
+              data-topo-hub-highlight-opacity={workingCount > 0 ? 0 : 0.95}
               style={{
                 pointerEvents: 'none',
                 transition: 'opacity 300ms ease-out',
@@ -6576,11 +6596,38 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                   const detailY = pos.y - detailH / 2;
                   return (
                     <g transform={`translate(${detailX}, ${detailY})`} data-topo-hover-detail={session.alias} style={{ pointerEvents: 'none' }}>
+                      {/* Round 387 / Loop: hover-detail panel cyber backdrop
+                          opacity 0.94 → 0.97. The hover-detail card is
+                          ALWAYS rendered in active-hover context (it IS
+                          the hover product), so it should carry the
+                          same backdrop weight as the R348 recent-signal /
+                          legend panel HOVER state (which lifts 0.92 →
+                          0.97 cyber). Pre-R387 the card sat at 0.94
+                          cyber, leaving a 0.03 alpha gap against the
+                          R348 panel-hover state — small but visible
+                          when the hover-detail floats next to a hovered
+                          recent-signal panel. R387 unifies them at 0.97
+                          so all active-hover panels paint with the same
+                          confident backdrop opacity in cyber. Light
+                          stays at 0.98 (already at the strong end —
+                          R348 light also stays at 0.97/0.98 max).
+                          Theme-consistency / canvas-presence polish
+                          family (5th anchor):
+                            R370 hub hover-ring opacity      0.7  → 0.8   cyber
+                            R371 edge-badge rest opacity     0.82 → 0.85  cyber
+                            R372 minimap offline-dot opacity 0.5  → 0.6
+                            R386 hub-highlight idle opacity  0.9  → 0.95
+                            R387 hover-detail panel opacity  0.94 → 0.97  cyber  (this round)
+                          data-topo-hover-detail-opacity attr exposes
+                          the resolved value for tests. R348 drop-shadow
+                          + rx=8 + stroke=pal.legendAccent + fill=pal.
+                          labelBox.fill all preserved. */}
                       <rect
                         x="0" y="0" width={detailW} height={detailH} rx="8"
                         fill={pal.labelBox.fill}
                         stroke={pal.legendAccent}
-                        opacity={isLight ? 0.98 : 0.94}
+                        opacity={isLight ? 0.98 : 0.97}
+                        data-topo-hover-detail-opacity={isLight ? 0.98 : 0.97}
                         style={{ filter: isLight ? 'drop-shadow(0 4px 12px rgba(15,23,42,0.16))' : 'drop-shadow(0 4px 12px rgba(0,0,0,0.6))' }}
                       />
                       <text x="10" y="16" fontSize="9" fontFamily="monospace" fill={pal.legendAccent} fontWeight="700">

package/package.json

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

package/scripts/topo-hover-detail-opacity-test.mjs

@@ -0,0 +1,98 @@
+/* Round 387 verification: hover-detail panel cyber rest opacity
+ * 0.94 → 0.97. Theme-consistency / canvas-presence polish family
+ * (5th anchor) after R370 hub-ring 0.7→0.8 cyber, R371 edge-badge
+ * 0.82→0.85 cyber, R372 minimap offline 0.5→0.6, R386 hub-highlight
+ * idle 0.9→0.95. Unifies the active-hover product card's cyber
+ * backdrop with the R348 recent-signal/legend panel HOVER state
+ * (0.97 cyber) so all active-hover panels paint with the same
+ * confident backdrop.
+ *
+ * Contract:
+ *   - On hover, the hover-detail panel mounts and:
+ *     * <rect> opacity attr === '0.97' (cyber theme)
+ *     * data-topo-hover-detail-opacity === '0.97' (cyber theme)
+ *   - Pre-R387 invariants preserved:
+ *     * <rect> rx === '8'
+ *     * <rect> stroke is non-empty (pal.legendAccent)
+ *     * data-topo-hover-detail is present (alias-keyed)
+ *     * R348 drop-shadow filter is present
+ *   - Light theme stays at opacity 0.98 (separately tested below).
+ *
+ * Fixture: 2 idle sessions so hover-detail mounts cleanly without
+ * the dense-layout >16-node gate (R387 inherits the same gate).
+ */
+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();
+
+async function probeWith(theme) {
+  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((t) => {
+    try { localStorage.setItem('anet-theme', t); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+  }, theme);
+  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') ] } });
+  });
+  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);
+  // Hover the first node to mount hover-detail
+  await page.hover('g[data-node]');
+  await page.waitForSelector('[data-topo-hover-detail]', { timeout: 5000 });
+  await page.waitForTimeout(300);
+  const probe = await page.evaluate(() => {
+    const card = document.querySelector('[data-topo-hover-detail]');
+    if (!card) return null;
+    const rect = card.querySelector('rect');
+    return {
+      alias:       card.getAttribute('data-topo-hover-detail'),
+      opacityAttr: rect?.getAttribute('opacity') ?? null,
+      opacityData: rect?.getAttribute('data-topo-hover-detail-opacity') ?? null,
+      rxAttr:      rect?.getAttribute('rx') ?? null,
+      strokeAttr:  rect?.getAttribute('stroke') ?? null,
+      filterStyle: rect?.getAttribute('style') ?? '',
+    };
+  });
+  await browser.close();
+  return probe;
+}
+
+const cyber = await probeWith('cyber');
+const light = await probeWith('light');
+
+const results = {
+  // Cyber: lifted from 0.94 → 0.97
+  cyber_opacity_attr_0_97:    cyber?.opacityAttr === '0.97',
+  cyber_opacity_data_0_97:    cyber?.opacityData === '0.97',
+  // Light: stays at 0.98 (R387 doesn't touch light)
+  light_opacity_attr_0_98:    light?.opacityAttr === '0.98',
+  light_opacity_data_0_98:    light?.opacityData === '0.98',
+  // Pre-R387 invariants on both themes
+  cyber_rx_8:                 cyber?.rxAttr === '8',
+  light_rx_8:                 light?.rxAttr === '8',
+  cyber_stroke_present:       !!cyber?.strokeAttr && cyber.strokeAttr !== 'none',
+  light_stroke_present:       !!light?.strokeAttr && light.strokeAttr !== 'none',
+  cyber_drop_shadow:          cyber?.filterStyle.includes('drop-shadow'),
+  light_drop_shadow:          light?.filterStyle.includes('drop-shadow'),
+  cyber_alias_present:        !!cyber?.alias && cyber.alias.length > 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hover-detail panel cyber opacity 0.94 → 0.97:`, JSON.stringify(results),
+  '\n  cyber:', cyber,
+  '\n  light:', light);
+process.exit(ok ? 0 : 1);

package/scripts/topo-hub-highlight-opacity-test.mjs

@@ -0,0 +1,88 @@
+/* Round 386 verification: hub-highlight idle opacity 0.9 → 0.95.
+ * Theme-consistency / canvas-presence polish family (4th anchor)
+ * after R370 hub-ring 0.7→0.8 cyber, R371 edge-badge 0.82→0.85
+ * cyber, R372 minimap offline 0.5→0.6. Lifts the focal point's
+ * idle "lamp lit but no work" core from a faded 0.9 to a present
+ * 0.95 (idle alpha gap halved).
+ *
+ * Contract:
+ *   - When workingCount === 0 (all sessions idle / connected):
+ *     * opacity attr === '0.95'
+ *     * data-topo-hub-highlight-opacity === '0.95'
+ *     * data-topo-hub-highlight-visible === 'true'
+ *   - When workingCount > 0 (≥ 1 working session):
+ *     * opacity attr === '0'  (R130 takeover gate preserved)
+ *     * data-topo-hub-highlight-visible === 'false'
+ *   - Pre-R386 invariants preserved:
+ *     * data-topo-hub-highlight-radius === '5.5'  (R365)
+ *     * fill === '#d1fae5'
+ *
+ * Test fixture supplies all-idle and all-working scenarios via
+ * /api/hub/status route fulfillment.
+ */
+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();
+
+async function probeWith(sessionStatus) {
+  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: sessionStatus, 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('a'), mk('b') ] } });
+  });
+  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-highlight]', { timeout: 15000 });
+  await page.waitForTimeout(350);
+  const probe = await page.evaluate(() => {
+    const e = document.querySelector('[data-topo-hub-highlight]');
+    return {
+      opacityAttr: e?.getAttribute('opacity') ?? null,
+      opacityData: e?.getAttribute('data-topo-hub-highlight-opacity') ?? null,
+      visible:     e?.getAttribute('data-topo-hub-highlight-visible') ?? null,
+      radius:      e?.getAttribute('data-topo-hub-highlight-radius') ?? null,
+      fill:        e?.getAttribute('fill') ?? null,
+    };
+  });
+  await browser.close();
+  return probe;
+}
+
+const idle    = await probeWith('idle');
+const working = await probeWith('working');
+
+const results = {
+  // Idle: lifted opacity 0.95 visible
+  idle_opacity_attr_0_95:    idle.opacityAttr === '0.95',
+  idle_opacity_data_0_95:    idle.opacityData === '0.95',
+  idle_visible_true:         idle.visible === 'true',
+  // Working: R130 takeover, opacity 0
+  working_opacity_attr_0:    working.opacityAttr === '0',
+  working_visible_false:     working.visible === 'false',
+  // Cross-state invariants (R365 + fill)
+  radius_5_5_idle:           idle.radius === '5.5',
+  radius_5_5_working:        working.radius === '5.5',
+  fill_d1fae5_idle:          idle.fill === '#d1fae5',
+  fill_d1fae5_working:       working.fill === '#d1fae5',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} hub-highlight idle opacity 0.9 → 0.95:`, JSON.stringify(results),
+  '\n  idle:   ', idle,
+  '\n  working:', working);
+process.exit(ok ? 0 : 1);