@sleep2agi/agent-network-dashboard 0.4.6-preview.3 → 0.4.6-preview.301

package/scripts/topo-legend-row-title-test.mjs

@@ -0,0 +1,102 @@
+/* Round 149 verification: legend rows gain a <title> tooltip
+ * symmetric with R148's recent-signal row tooltip. Closes the
+ * R97 idiom on the panel side — anywhere the UI shows "N" should
+ * hover-explain WHICH N.
+ *
+ * Both side panels now have matching row-tooltip affordances:
+ *   recent-signal row (R148): full from/to/timestamp/content + pin hint
+ *   legend row       (R149): status label + matched-aliases + pin hint
+ *
+ * Fleet: 3 working / 2 idle / 1 offline so all three bucket rows
+ * show non-zero. Verify each row's title contains:
+ *   - status label + count
+ *   - alias list of matching nodes
+ *   - "click to pin" hint when not pinned
+ *
+ * Then click idle to pin → title flips to "click to release pin".
+ */
+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) => ({
+    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('worker-a', 'working'), mk('worker-b', 'working'), mk('worker-c', 'working'),
+    mk('idle-a',   'idle'),    mk('idle-b',   'idle'),
+    mk('off-a',    'offline'),
+  ] } });
+});
+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' });
+// 3 working + 2 idle + 1 offline = 6 sessions; offline nodes still
+// render as g[data-node] (line ~2754 [...onlineNodes, ...offlineNodes]
+// .map). Initial count check was off-by-one.
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 6, { timeout: 30000 });
+await page.waitForSelector('[data-legend-status="working"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const readTitle = (key) => page.evaluate((k) => {
+  const row = document.querySelector(`[data-legend-status="${k}"]`);
+  return row?.querySelector('title')?.textContent || '';
+}, key);
+
+const wTitle = await readTitle('working');
+const iTitle = await readTitle('idle');
+const oTitle = await readTitle('offline');
+
+// Pin idle → its title flips
+await page.locator('[data-legend-status="idle"]').click();
+await page.waitForTimeout(200);
+const iPinnedTitle = await readTitle('idle');
+
+await browser.close();
+
+const results = {
+  // Working row: 3 working aliases
+  w_hasLabel:        wTitle.includes('working node · 3'),
+  w_hasWorkerA:      wTitle.includes('worker-a'),
+  w_hasWorkerB:      wTitle.includes('worker-b'),
+  w_hasWorkerC:      wTitle.includes('worker-c'),
+  w_pinHint:         wTitle.includes('click to pin'),
+
+  // Idle row: 2 idle aliases
+  i_hasLabel:        iTitle.includes('online idle · 2'),
+  i_hasIdleA:        iTitle.includes('idle-a'),
+  i_hasIdleB:        iTitle.includes('idle-b'),
+  i_pinHint:         iTitle.includes('click to pin'),
+
+  // Offline row: 1 offline alias
+  o_hasLabel:        oTitle.includes('offline / no SSE · 1'),
+  o_hasOffA:         oTitle.includes('off-a'),
+
+  // After pin: title hint flipped
+  iPinned_releaseHint: iPinnedTitle.includes('click to release pin'),
+  iPinned_noPinHint:   !iPinnedTitle.includes('click to pin · hover to preview'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend-row title:`, JSON.stringify(results),
+  `\n  workingTitle:\n${wTitle}`,
+  `\n  idleTitle:\n${iTitle}`,
+  `\n  offlineTitle:\n${oTitle}`,
+  `\n  idlePinnedTitle:\n${iPinnedTitle}`);
+process.exit(ok ? 0 : 1);

package/scripts/topo-legend-swatch-grow-test.mjs

@@ -0,0 +1,116 @@
+/* Round 197 verification: legend swatch dot scales r 5.5 → 7 when
+ * its row is hovered or pinned. Mirrors R177 hub hover-lift but at
+ * legend grain.
+ *
+ * Pre-R197 the swatch was a flat constant r=5.5 — every other piece
+ * of the row responded to hover/pin (R55 text brighten, R105 bg
+ * tint, R144 1px row lift, R181 pin ring) but the swatch dot
+ * itself stayed still. The dot is the row's visual-identity
+ * anchor; making it grow gives the gesture full row-wide reach.
+ *
+ * Test (cyber/dark theme, 4 working sessions):
+ *   1. Three swatches present: working / idle / offline.
+ *   2. Idle: data-legend-swatch-state='idle', r ~ 5.5.
+ *   3. Hover the "working" legend row, wait past 150ms transition.
+ *   4. Working swatch: state='hover', r ~ 7.
+ *   5. Other swatches (idle/offline) stay 'idle' + r ~ 5.5.
+ *   6. Move away, wait — working swatch back to 'idle' + r 5.5.
+ *   7. transition: r 150ms ease-out is in the inline style.
+ */
+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, status = 'working') => ({
+    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('alpha'), mk('beta'), mk('gamma'), mk('delta'),
+  ] } });
+});
+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 === 4, { timeout: 30000 });
+await page.waitForSelector('[data-legend-swatch]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+const probe = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-legend-swatch]')].map(el => ({
+    key:   el.getAttribute('data-legend-swatch'),
+    state: el.getAttribute('data-legend-swatch-state'),
+    // Read both computed CSS r (the transitionable property) and the
+    // SVG attribute fallback. Chrome computes the CSS r as the live
+    // value, including mid-transition interpolated values.
+    cssR:  parseFloat(getComputedStyle(el).r),
+    attrR: parseFloat(el.getAttribute('r') || ''),
+    transition: el.style.transition,
+  }));
+});
+
+const idle = await probe();
+
+await page.hover('[data-legend-status="working"]');
+await page.waitForTimeout(220);  // past 150ms r transition + margin
+const hovered = await probe();
+
+await page.mouse.move(0, 0);
+await page.waitForTimeout(220);
+const settled = await probe();
+
+await browser.close();
+
+const idleWorking  = idle.find(s => s.key === 'working');
+const idleIdle     = idle.find(s => s.key === 'idle');
+const idleOffline  = idle.find(s => s.key === 'offline');
+
+const hovWorking   = hovered.find(s => s.key === 'working');
+const hovIdle      = hovered.find(s => s.key === 'idle');
+const hovOffline   = hovered.find(s => s.key === 'offline');
+
+const settledWorking = settled.find(s => s.key === 'working');
+
+const results = {
+  three_swatches:           idle.length === 3,
+  has_working_swatch:       !!idleWorking,
+  has_idle_swatch:          !!idleIdle,
+  has_offline_swatch:       !!idleOffline,
+
+  idle_working_state_idle:  idleWorking?.state === 'idle',
+  idle_working_r_small:     Math.abs((idleWorking?.cssR ?? idleWorking?.attrR ?? 0) - 5.5) < 0.4,
+  transition_includes_r:    (idleWorking?.transition || '').includes('r') &&
+                            (idleWorking?.transition || '').includes('150ms'),
+
+  hov_working_state_hover:  hovWorking?.state === 'hover',
+  hov_working_r_bigger:     (hovWorking?.cssR ?? hovWorking?.attrR ?? 0) > 6.5,
+  hov_working_r_about_7:    Math.abs((hovWorking?.cssR ?? hovWorking?.attrR ?? 0) - 7) < 0.4,
+  hov_idle_stays_idle:      hovIdle?.state === 'idle',
+  hov_idle_r_unchanged:     Math.abs((hovIdle?.cssR ?? hovIdle?.attrR ?? 0) - 5.5) < 0.4,
+  hov_offline_stays_idle:   hovOffline?.state === 'idle',
+
+  settled_state_idle:       settledWorking?.state === 'idle',
+  settled_r_back_small:     Math.abs((settledWorking?.cssR ?? settledWorking?.attrR ?? 0) - 5.5) < 0.4,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} legend swatch grow:`, JSON.stringify(results),
+  `\n  idle:`,    idle,
+  `\n  hovered:`, hovered,
+  `\n  settled:`, settled);
+process.exit(ok ? 0 : 1);

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

@@ -0,0 +1,101 @@
+/* Round 157 verification: minimap a11y completion.
+ *
+ * Pre-R157 the R30 minimap had role="img" (wrong — it's clickable)
+ * + aria-label but no tabIndex / onKeyDown. Mouse users could
+ * click to recenter; keyboard-only users couldn't reach or
+ * activate it.
+ *
+ * R157 closes the gap with the standard pattern (R116/R139/R140/
+ * R151/R152):
+ *   role="button"
+ *   tabIndex={0}
+ *   aria-label="Topology minimap — click to recenter, Enter to reset view"
+ *   onKeyDown(Enter/Space) → resetView()
+ *   anet-topo-chip-focus className (R155 cyan outline)
+ *
+ * Test:
+ *   1. Force the canvas off-default via zoom (so minimap renders)
+ *   2. Verify role / tabIndex / aria-label / class on the minimap
+ *   3. Press Enter on focused minimap → view resets (zoom back to 100%)
+ */
+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) => ({
+    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')] } });
+});
+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);
+
+// Initial: zoom is 100%, minimap not rendered (gated to non-default view)
+const minimapBefore = await page.locator('[data-topo-minimap]').count();
+
+// Press + (zoom in) twice to render the minimap
+await page.keyboard.press('+');
+await page.keyboard.press('+');
+await page.waitForTimeout(250);
+
+const probe = await page.evaluate(() => {
+  const el = document.querySelector('[data-topo-minimap]');
+  if (!el) return null;
+  return {
+    role:       el.getAttribute('role'),
+    tabIndex:   el.getAttribute('tabindex'),
+    ariaLabel:  el.getAttribute('aria-label'),
+    title:      el.getAttribute('title'),
+    className:  el.getAttribute('class') || '',
+    zoomLevel:  document.querySelector('[data-topo-chrome-zoom-level]')?.textContent?.trim(),
+  };
+});
+
+// Focus minimap + Enter → reset view (zoom back to 100%)
+await page.locator('[data-topo-minimap]').focus();
+await page.keyboard.press('Enter');
+await page.waitForTimeout(250);
+const afterEnter = await page.evaluate(() => ({
+  zoomLevel: document.querySelector('[data-topo-chrome-zoom-level]')?.textContent?.trim(),
+  minimapHidden: !document.querySelector('[data-topo-minimap]'),
+}));
+
+await browser.close();
+
+const results = {
+  minimap_hiddenAtDefault: minimapBefore === 0,
+  minimap_renderedAfterZoom: probe !== null,
+  role_button:             probe?.role === 'button',
+  tabIndex_0:              probe?.tabIndex === '0',
+  ariaLabel_mentionsEnter: (probe?.ariaLabel || '').includes('Enter'),
+  title_mentionsEnter:     (probe?.title || '').includes('Enter'),
+  hasFocusClass:           (probe?.className || '').includes('anet-topo-chip-focus'),
+  zoomedBeforeReset:       probe?.zoomLevel !== '100%',
+  enter_resetsZoom:        afterEnter.zoomLevel === '100%',
+  enter_hidesMinimap:      afterEnter.minimapHidden === true,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap a11y:`, JSON.stringify(results),
+  `\n  before count=${minimapBefore}`,
+  `\n  probe=`, probe,
+  `\n  afterEnter=`, afterEnter);
+process.exit(ok ? 0 : 1);

package/scripts/topo-minimap-dot-transition-test.mjs

@@ -0,0 +1,113 @@
+/* Round 198 verification: minimap node dots get smooth opacity /
+ * fill / r transitions so a session flipping working→idle or going
+ * offline doesn't snap on the minimap mirror.
+ *
+ * Pre-R198 the canvas itself eased status changes (R167 stroke-width
+ * transition, R10 freshness alpha ramp, R3 fade-in chain), but the
+ * minimap below kept snap-cut. R198 brings the minimap dots in
+ * rhythm with the main canvas at 200ms.
+ *
+ * The minimap only mounts when isDefaultView=false (zoomed or panned),
+ * so the test must trigger a zoom-in first to populate it.
+ *
+ * Test:
+ *   Mock 3 working + 1 offline session. Default view → no minimap.
+ *   Click zoom-in → minimap mounts.
+ *   Probe each minimap dot:
+ *     1. 4 dots present with data-topo-minimap-dot=<alias>
+ *     2. Online dots: r=1.7, opacity=0.9, data-...-online='true'
+ *     3. Offline dot: r=1.2, opacity=0.5, data-...-online='false'
+ *     4. Every dot's style.transition includes 'opacity 200ms',
+ *        'fill 200ms', and 'r 200ms'
+ */
+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, 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('alpha',   'working'),
+    mk('beta',    'working'),
+    mk('gamma',   'working'),
+    mk('delta',   'offline'),
+  ] } });
+});
+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 === 4, { timeout: 30000 });
+await page.waitForSelector('[data-topo-chrome-zoom-in]', { timeout: 10000 });
+await page.waitForTimeout(300);
+
+// Default view → minimap not mounted
+const minimapBeforeZoom = await page.evaluate(() =>
+  document.querySelector('[data-topo-minimap]') !== null);
+
+// Trigger zoom-in to mount the minimap
+await page.click('[data-topo-chrome-zoom-in]');
+await page.waitForTimeout(450);  // past 280ms smoothView crossfade + margin
+await page.waitForSelector('[data-topo-minimap-dot]', { timeout: 5000 });
+await page.waitForTimeout(200);
+
+const minimapAfterZoom = await page.evaluate(() =>
+  document.querySelector('[data-topo-minimap]') !== null);
+
+const dots = await page.evaluate(() =>
+  [...document.querySelectorAll('[data-topo-minimap-dot]')].map(el => ({
+    alias:      el.getAttribute('data-topo-minimap-dot'),
+    online:     el.getAttribute('data-topo-minimap-dot-online'),
+    r:          parseFloat(el.getAttribute('r') || ''),
+    opacity:    parseFloat(el.getAttribute('opacity') || ''),
+    fill:       el.getAttribute('fill'),
+    transition: el.style.transition,
+  })));
+
+await browser.close();
+
+const onlineDots  = dots.filter(d => d.online === 'true');
+const offlineDots = dots.filter(d => d.online === 'false');
+
+const trans = (s) => s || '';
+const hasOpacityT = (d) => /opacity\s+(0\.2s|200ms)/.test(trans(d.transition));
+const hasFillT    = (d) => /fill\s+(0\.2s|200ms)/.test(trans(d.transition));
+const hasRT       = (d) => /\br\s+(0\.2s|200ms)/.test(trans(d.transition));
+
+const results = {
+  minimap_hidden_at_default:  minimapBeforeZoom === false,
+  minimap_shown_after_zoom:   minimapAfterZoom === true,
+  four_dots_present:          dots.length === 4,
+  three_online:               onlineDots.length === 3,
+  one_offline:                offlineDots.length === 1,
+  online_r_1p7:               onlineDots.every(d => Math.abs(d.r - 1.7) < 0.01),
+  online_opacity_0p9:         onlineDots.every(d => Math.abs(d.opacity - 0.9) < 0.01),
+  offline_r_1p2:              offlineDots.every(d => Math.abs(d.r - 1.2) < 0.01),
+  offline_opacity_0p5:        offlineDots.every(d => Math.abs(d.opacity - 0.5) < 0.01),
+  all_have_opacity_transition: dots.every(hasOpacityT),
+  all_have_fill_transition:    dots.every(hasFillT),
+  all_have_r_transition:       dots.every(hasRT),
+  online_fill_truthy:          onlineDots.every(d => d.fill && d.fill !== 'none'),
+  offline_fill_truthy:         offlineDots.every(d => d.fill && d.fill !== 'none'),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap dot transition:`, JSON.stringify(results),
+  `\n  dots:`, dots);
+process.exit(ok ? 0 : 1);

package/scripts/topo-minimap-rect-stroke-test.mjs

@@ -0,0 +1,94 @@
+/* Round 287 verification: minimap viewport rect strokeWidth bumps
+ * 1 → 1.5. The rect frames the user's current view in the minimap —
+ * it IS the wayfinding "you are here" indicator. Bumping the stroke
+ * by half a pixel (same micro-polish family as R283 monogram stroke)
+ * lifts the boundary above ambient minimap-dot density without
+ * crowding the miniaturised dots inside.
+ *
+ * The minimap is only rendered when view ≠ default (zoomed or
+ * panned). Test simulates a zoom to surface the minimap.
+ *
+ * Contract:
+ *   - [data-topo-minimap-viewport] exists after zoom.
+ *   - Its stroke-width attribute === "1.5".
+ *   - data-topo-minimap-dot still rendered (≥1 dot regression).
+ *   - R283 monogram stroke + R282 watermark intact (regression).
+ */
+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, model) => ({
+    alias, status: 'working', model, 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', 'claude-opus-4'),
+    mk('beta',  'gpt-4o'),
+    mk('gamma', 'claude-sonnet-4'),
+    mk('delta', null),
+  ] } });
+});
+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.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 4, { timeout: 30000 });
+await page.waitForSelector('[data-topo-brand-watermark]', { timeout: 10000 });
+
+// Trigger zoom-in to surface the minimap. The zoom-in button is the
+// '+' control inside the chrome strip.
+await page.click('[data-topo-chrome-zoom-in]');
+await page.click('[data-topo-chrome-zoom-in]');
+await page.waitForSelector('[data-topo-minimap-viewport]', { timeout: 5000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const rect = document.querySelector('[data-topo-minimap-viewport]');
+  const dots = document.querySelectorAll('[data-topo-minimap-dot]');
+  const watermark = document.querySelector('[data-topo-brand-watermark]');
+  const alphaNode = document.querySelector('g[data-node="alpha"]');
+  const alphaCircles = alphaNode ? [...alphaNode.querySelectorAll('circle')] : [];
+  const alphaAvatarCircle = alphaCircles
+    .map(c => ({ r: +c.getAttribute('r') || 0, sw: c.getAttribute('stroke-width'), isBadge: c.hasAttribute('data-runtime-badge') }))
+    .filter(c => c.r > 0 && c.r < 18 && !c.isBadge)
+    .sort((a, b) => b.r - a.r)[0];
+  return {
+    rectPresent:       rect !== null,
+    rectStrokeWidth:   rect?.getAttribute('stroke-width') ?? null,
+    rectOpacity:       rect?.getAttribute('opacity') ?? null,
+    dotCount:          dots.length,
+    alphaAvatarStroke: alphaAvatarCircle?.sw ?? null,
+    watermarkPresent:  watermark !== null,
+  };
+});
+await browser.close();
+
+const results = {
+  minimap_rect_present:           probe.rectPresent,
+  minimap_rect_stroke_is_1_5:     probe.rectStrokeWidth === '1.5',
+  minimap_rect_opacity_kept:      probe.rectOpacity === '0.9',
+  minimap_has_dots:               probe.dotCount >= 1,
+  r283_monogram_stroke_kept:      probe.alphaAvatarStroke === '1.5',
+  r282_watermark_present:         probe.watermarkPresent,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap rect stroke:`, JSON.stringify(results),
+  '\n  rect strokeWidth:', probe.rectStrokeWidth,
+  '\n  rect opacity:', probe.rectOpacity,
+  '\n  dot count:', probe.dotCount,
+  '\n  alpha avatar (R283):', probe.alphaAvatarStroke);
+process.exit(ok ? 0 : 1);

package/scripts/topo-minimap-test.mjs

@@ -0,0 +1,68 @@
+/* Round 30 verification: minimap.
+ *  - not mounted at default view (1×, centered)
+ *  - mounted when zoomed in (one node dot per session, viewport rect)
+ *  - click recenters the canvas (view.x / view.y change) */
+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: 1280, height: 1600 } });
+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');
+    localStorage.setItem('anet-topo-layout', 'grid');
+    localStorage.setItem('anet-topo-view', JSON.stringify({ zoom: 1, x: 0, y: 0 }));
+    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 sessions = ['A站', 'B站', 'C站', 'D站', 'E站', 'F站'].flatMap(g =>
+    Array.from({ length: 3 }, (_, i) => ({
+      alias: `${g}${i + 1}`, status: 'idle', 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/tasks*', (route) => route.fulfill({ json: { tasks: [] } }));
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('svg[viewBox="0 0 1000 680"]', { timeout: 30000 });
+await page.waitForTimeout(500);
+
+const minimap = '[data-topo-minimap]';
+const notMountedAtDefault = (await page.locator(minimap).count()) === 0;
+
+// Zoom in via `+` twice → view changes → minimap mounts
+await page.keyboard.press('=');
+await page.keyboard.press('=');
+await page.waitForTimeout(200);
+const mountedAfterZoom = (await page.locator(minimap).count()) === 1;
+const dotCount = await page.locator(`${minimap} svg circle`).count();
+const hasViewportRect = await page.locator(`${minimap} svg rect`).count() > 0;
+
+// Click on the minimap's far left → expect view.x to become more positive (canvas pans right)
+const beforeView = await page.evaluate(() => JSON.parse(localStorage.getItem('anet-topo-view')));
+const mmBox = await page.locator(minimap).boundingBox();
+await page.mouse.click(mmBox.x + 10, mmBox.y + mmBox.height / 2);
+await page.waitForTimeout(200);
+const afterView = await page.evaluate(() => JSON.parse(localStorage.getItem('anet-topo-view')));
+const clickRecenters = afterView.x !== beforeView.x || afterView.y !== beforeView.y;
+
+await browser.close();
+const results = {
+  notMountedAtDefault,
+  mountedAfterZoom,
+  oneDotPerSession: dotCount === 18, // 6 groups × 3 = 18 nodes
+  viewportRectPresent: hasViewportRect,
+  clickRecenters,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} minimap:`, JSON.stringify(results), `dots=${dotCount} view before=`, beforeView, `after=`, afterView);
+process.exit(ok ? 0 : 1);