@sleep2agi/agent-network-dashboard 0.4.6 → 0.5.1-preview.0

package/scripts/topo-brand-watermark-test.mjs

@@ -0,0 +1,97 @@
+/* Round 282 verification: sleep2agi brand watermark at canvas bottom-left.
+ *
+ * Per Vincent 5215 ask via 通信龙 (logo placement on the canvas), R282
+ * adds a low-opacity monospace text "sleep2agi" at viewBox (16, 672)
+ * — bottom-left corner, the only fully-empty corner after R275-R281
+ * 减法 arc:
+ *   top-left:    recent-signal panel
+ *   top-right:   legend panel
+ *   bottom-right: chrome strip (HTML overlay)
+ *   bottom-left: EMPTY → watermark home
+ *
+ * No icon yet (no sleep2agi-specific crescent asset in public/);
+ * text-only watermark is the minimal-risk implementation. R283+
+ * can swap in a real logo if Vincent provides asset.
+ *
+ * Test scope:
+ *   1. data-topo-brand-watermark element exists.
+ *   2. Text content === "sleep2agi".
+ *   3. x === 16, y === 672 (bottom-left, 16-unit inset matching panels).
+ *   4. opacity === "0.4" (subtle watermark).
+ *   5. fill is set + theme-aware (not 'none', not empty).
+ *   6. R281 vendor chip threshold regression: 2-vendor scenario chip absent.
+ *   7. R280 spokes still retired (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';
+  // 2-vendor scenario (claude + gpt) so R281 vendor chip should be absent
+  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', 'gpt-4'),
+  ] } });
+});
+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 });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const mark = document.querySelector('[data-topo-brand-watermark]');
+  const vendorChips = document.querySelectorAll('[data-vendor-letter]');
+  const spokes = document.querySelectorAll('[data-topo-spoke-angle]');
+  return {
+    present:        mark !== null,
+    text:           mark?.textContent ?? null,
+    x:              mark ? +mark.getAttribute('x') : null,
+    y:              mark ? +mark.getAttribute('y') : null,
+    opacity:        mark?.getAttribute('opacity') ?? null,
+    fill:           mark ? window.getComputedStyle(mark).fill : null,
+    vendorChipCount: vendorChips.length,
+    spokeCount:     spokes.length,
+  };
+});
+await browser.close();
+
+const results = {
+  watermark_present:           probe.present,
+  watermark_text_is_brand:     probe.text === 'sleep2agi',
+  watermark_x_is_16:           probe.x === 16,
+  watermark_y_is_672:          probe.y === 672,
+  watermark_opacity_0_4:       probe.opacity === '0.4',
+  watermark_fill_set:          probe.fill != null && probe.fill !== '' && probe.fill !== 'none',
+  r281_vendor_chip_absent_in_2_vendor: probe.vendorChipCount === 0,
+  r280_spokes_absent:          probe.spokeCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} brand watermark:`, JSON.stringify(results),
+  '\n  text:', JSON.stringify(probe.text),
+  '\n  (x,y):', `(${probe.x}, ${probe.y})`,
+  '\n  opacity:', probe.opacity,
+  '\n  fill:', probe.fill,
+  '\n  vendor chips (expect 0):', probe.vendorChipCount,
+  '\n  spokes (expect 0):',       probe.spokeCount);
+process.exit(ok ? 0 : 1);

package/scripts/topo-canvas-aria-test.mjs

@@ -0,0 +1,108 @@
+/* Round 158 verification: main canvas SVG gains aria-label +
+ * aria-roledescription.
+ *
+ * R151-R157 closed a11y across every interactive surface INSIDE
+ * the canvas (nodes / group labels / edge badges / recent rows /
+ * legend rows / chrome buttons / minimap). The canvas <svg> root
+ * itself was a nameless 1000×680 box — a screen-reader user who
+ * landed on it before tab-diving into children heard nothing
+ * identifying the surface.
+ *
+ * R158 closes that gap:
+ *   aria-roledescription="agent network topology"
+ *   aria-label live-updates with snapshot:
+ *     "Agent network topology — 5 agents online · 3 working ·
+ *      1 offline · 2 active links. Tab to navigate nodes,
+ *      double-click canvas to reset view."
+ *
+ * No role override — default SVG role (graphics-document) keeps
+ * children navigable; role="img" would flatten the SVG to a
+ * single opaque image and hide all the R151-R157 work.
+ *
+ * Test:
+ *   1. Mock 3 working + 2 idle online + 1 offline + 2 active links
+ *   2. Assert canvas SVG has both ARIA attrs
+ *   3. Assert aria-label contains all four count fragments + gesture hints
+ *   4. Assert no role="img" (would defeat children a11y)
+ */
+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();
+const stale = new Date(Date.now() - 10 * 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, last) => ({
+    alias, status, model: 'claude-opus-4', runtime: 'cli-claude-code',
+    network_id: nid, project_dir: null,
+    created_at: last, updated_at: last, last_seen_at: last,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [
+    mk('agents-a1', 'working', fresh),
+    mk('agents-a2', 'working', fresh),
+    mk('agents-a3', 'working', fresh),
+    mk('infra-b1',  'idle',    fresh),
+    mk('infra-b2',  'idle',    fresh),
+    mk('legacy-c1', 'offline', stale),
+  ] } });
+});
+
+const now = Date.now();
+// 4 a1↔a2 msgs (R100 threshold for edge badge) + 1 a2↔a3 = 2 flowLinks
+const msgs = [];
+for (let i = 0; i < 4; i++) {
+  msgs.push({ id: `m${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: 'mx', from_alias: 'agents-a2', to_alias: 'agents-a3', 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' });
+// 5 online + 1 offline = 6 g[data-node]
+await page.waitForFunction(() => document.querySelectorAll('g[data-node]').length === 6, { timeout: 30000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const el = document.querySelector('[data-topo-canvas-aria]');
+  if (!el) return null;
+  return {
+    tagName:            el.tagName.toLowerCase(),
+    role:               el.getAttribute('role'),
+    roledesc:           el.getAttribute('aria-roledescription'),
+    label:              el.getAttribute('aria-label'),
+  };
+});
+
+await browser.close();
+
+const label = probe?.label || '';
+const results = {
+  canvas_found:               probe !== null,
+  is_svg:                     probe?.tagName === 'svg',
+  no_role_img:                probe?.role !== 'img',
+  has_roledescription:        probe?.roledesc === 'agent network topology',
+  label_mentions_online:      /5 agents online/.test(label),
+  label_mentions_working:     /3 working/.test(label),
+  label_mentions_offline:     /1 offline/.test(label),
+  label_mentions_links:       /2 active links/.test(label),
+  label_mentions_tab:         /Tab to navigate/.test(label),
+  label_mentions_doubleclick: /double-click/.test(label),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} canvas SVG aria:`, JSON.stringify(results),
+  `\n  probe=`, probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-canvas-brand-fade-test.mjs

@@ -0,0 +1,87 @@
+/* Round 327 verification: canvas brand crescent (top-left corner,
+ * codex-shipped via 1817f55 Hero 3 §3.I) joins the always-mount-
+ * opacity-gate family. Pre-R327 it conditionally mounted on
+ * `flowLinks.length === 0` — first flow arriving SNAP-removed it.
+ * Now always-mounted with opacity={flowLinks.length === 0 ? 0.35 : 0}
+ * + transition opacity 300ms ease-out so the crescent crossfades
+ * in/out as the recent-signal panel state flips.
+ *
+ * 11th surface in the always-mount-opacity-gate idiom family
+ * (R181/R182/R183/R213×2/R214/R215/R221/R222/R223/R327).
+ *
+ * Contract:
+ *   - [data-topo-brand-canvas-mark] is present (always-mounted).
+ *   - When flowLinks.length === 0 (no messages mocked): opacity=0.35
+ *     + data-topo-brand-canvas-mark-visible='true'.
+ *   - Computed style.transition contains 'opacity'.
+ *   - R326 chrome gap-2 + R317/R318 chrome regressions intact.
+ *   - R294 pulse absent.
+ */
+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: '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') ] } });
+});
+// Zero messages: recent-signal panel hidden, brand crescent visible.
+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-brand-canvas-mark]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const mark = document.querySelector('[data-topo-brand-canvas-mark]');
+  const chrome = document.querySelector('[data-topo-chrome]');
+  return {
+    markPresent:        mark !== null,
+    markOpacityAttr:    mark?.getAttribute('opacity') ?? null,
+    markVisibleAttr:    mark?.getAttribute('data-topo-brand-canvas-mark-visible') ?? null,
+    markTransition:     mark ? getComputedStyle(mark).transition : null,
+    // R326 regression: chrome strip gap-2.
+    chromeGap:          chrome ? getComputedStyle(chrome).columnGap : null,
+    layoutInactiveCls:  document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
+    layoutActiveCls:    document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
+    pulseCount:         document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const hasOpacityTransition = (s) => /opacity\s+0?\.?\d*s|opacity\s+\d+ms/i.test(s || '');
+
+const results = {
+  mark_present:               probe.markPresent,
+  mark_visible_when_empty:    probe.markVisibleAttr === 'true',
+  mark_opacity_0_35:          probe.markOpacityAttr === '0.35',
+  mark_has_opacity_trans:     hasOpacityTransition(probe.markTransition),
+  // R326 regression.
+  r326_chrome_gap_8px:        probe.chromeGap === '8px',
+  // R317 / R318 chrome regression.
+  r317_inactive_gray_400:     probe.layoutInactiveCls.includes('text-gray-400'),
+  r318_active_font_medium:    probe.layoutActiveCls.includes('font-medium'),
+  r294_pulse_absent:          probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} canvas-brand crescent fade:`, JSON.stringify(results),
+  '\n  opacity attr:', probe.markOpacityAttr,
+  '\n  visible attr:', probe.markVisibleAttr,
+  '\n  transition:',   probe.markTransition);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chat-target-breath-test.mjs

@@ -0,0 +1,84 @@
+/* Round 120 verification: chat-target ring breathes when chat is
+ * open. R51 added the static ring at radius+14; R120 adds a SMIL
+ * opacity pulse (±0.1, 3s) so the active chat session reads as
+ * "live" without being intrusive. Gated by reducedMotion.
+ *
+ * Drive chatAlias by clicking a node to open the popover. Verify:
+ *   - chat-target ring renders with data-chat-target-breath="on"
+ *   - the ring has an <animate> child with dur="3s"
+ *   - reducedMotion suppresses the breath
+ */
+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 fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const probe = async (reducedMotion) => {
+  const ctx = await browser.newContext({
+    viewport: { width: 1400, height: 1500 },
+    reducedMotion: reducedMotion ? 'reduce' : 'no-preference',
+  });
+  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', 'ring');
+      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: 'idle', 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);
+
+  // Open chat by clicking the alpha node.
+  await page.locator('g[data-node="alpha"]').click();
+  await page.waitForTimeout(500);
+
+  const data = await page.evaluate(() => {
+    const ring = document.querySelector('[data-chat-target-ring]');
+    const anim = ring?.querySelector('animate');
+    return {
+      ringPresent: !!ring,
+      breathAttr:  ring?.getAttribute('data-chat-target-breath') || '',
+      hasAnimate:  !!anim,
+      dur:         anim?.getAttribute('dur') || null,
+    };
+  });
+  await ctx.close();
+  return data;
+};
+
+const normal  = await probe(false);
+const reduced = await probe(true);
+await browser.close();
+
+const results = {
+  normal_ringPresent:   normal.ringPresent === true,
+  normal_breathOn:      normal.breathAttr === 'on',
+  normal_hasAnimate:    normal.hasAnimate === true,
+  normal_dur3s:         normal.dur === '3s',
+  reduced_ringPresent:  reduced.ringPresent === true,
+  reduced_breathOff:    reduced.breathAttr === 'off',
+  reduced_noAnimate:    reduced.hasAnimate === false,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chat-target breath:`, JSON.stringify(results),
+  `\n  normal=`,  normal,
+  `\n  reduced=`, reduced);
+process.exit(ok ? 0 : 1);

package/scripts/topo-chat-target-ring-ease-test.mjs

@@ -0,0 +1,82 @@
+/* Round 242 verification: chat-target ring (R183) transition list
+ * grows to include stroke + filter alongside the existing opacity
+ * gate, so a chat-target node's status flips (green→teal etc.) and
+ * the glow toggle (cyber theme) both ease over 200ms instead of
+ * snapping.
+ *
+ * The ring is always-mounted (R183 idiom) with opacity gated by
+ * isChat. Without setting a chat target, opacity stays at 0 — but
+ * the transition wiring is in style.transition regardless, so we
+ * can probe it without needing to demonstrate the easing live.
+ *
+ * Test scope per ring:
+ *   - data-chat-target-ring attr present (probe entry)
+ *   - data-chat-target-active='false' (no chat at default state)
+ *   - style.transition includes opacity / stroke / filter
+ *     each at 200ms (or 0.2s browser-normalised)
+ *   - stroke attribute present (color from status.primary)
+ *   - opacity attribute = 0 (gated by isChat=false)
+ */
+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');
+    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) => ({
+    alias, status: 'working', 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'), mk('gamma'), mk('delta'),
+  ] } });
+});
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*', (r2) => r2.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-chat-target-ring]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const rings = Array.from(document.querySelectorAll('[data-chat-target-ring]'));
+  return rings.map((r) => ({
+    active:     r.getAttribute('data-chat-target-active'),
+    stroke:     r.getAttribute('stroke'),
+    opacity:    r.getAttribute('opacity'),
+    transition: r.style.transition,
+  }));
+});
+await browser.close();
+
+const hasProp = (s, prop) => new RegExp(`${prop}\\s+(?:200ms|0\\.2s)`).test(s || '');
+
+const results = {
+  four_rings:                    probe.length === 4,
+  all_inactive:                  probe.every(r => r.active === 'false'),
+  all_have_stroke:               probe.every(r => typeof r.stroke === 'string' && r.stroke.length > 0),
+  all_opacity_zero:              probe.every(r => r.opacity === '0'),
+  all_transition_has_opacity:    probe.every(r => hasProp(r.transition, 'opacity')),
+  all_transition_has_stroke:     probe.every(r => hasProp(r.transition, 'stroke')),
+  all_transition_has_filter:     probe.every(r => hasProp(r.transition, 'filter')),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chat-target ring ease:`, JSON.stringify(results),
+  '\n  rings:', probe.map(r => ({ a: r.active, stroke: r.stroke, t: r.transition.slice(0, 80) })));
+process.exit(ok ? 0 : 1);

package/scripts/topo-chat-target-ring-fade-test.mjs

@@ -0,0 +1,124 @@
+/* Round 183 verification: chat-target ring (R11/R120) fades in/out
+ * instead of mount/unmount.
+ *
+ * Pre-R183 the ring was conditionally mounted on
+ * `chatAlias === session.alias`; the className `transition-opacity
+ * duration-200` never fired because the element didn't exist
+ * before mount. R183 makes the ring always-mounted with opacity
+ * gated by isChat — the CSS transition now fires cleanly on
+ * chat-close. The SMIL <animate> stays gated by
+ * `!reducedMotion && isChat` so it only runs for the active
+ * chat target (otherwise SMIL on every node would fight the
+ * opacity transition globally).
+ *
+ * Test:
+ *   1. Mock 2 sessions (alpha, beta)
+ *   2. Idle: both rings always-mounted, opacity=0, active=false
+ *   3. Click alpha → alpha opacity=0.95 active=true,
+ *      beta stays opacity=0 active=false
+ *   4. Click beta → beta opacity=0.95 active=true,
+ *      alpha back to 0 (chatAlias swap)
+ *   5. All rings carry 'opacity 200ms ease-out' transition
+ *   6. strokeWidth='2.5' (R51 sentinel-safe)
+ */
+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');
+    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) => ({
+    alias, status: 'idle', 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.waitForSelector('[data-chat-target-ring]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probe = () => page.evaluate(() => {
+  const rings = [...document.querySelectorAll('g[data-node] [data-chat-target-ring]')];
+  return rings.map(r => {
+    const node = r.closest('g[data-node]');
+    return {
+      alias:        node?.getAttribute('data-node'),
+      opacity:      parseFloat(r.getAttribute('opacity') || ''),
+      active:       r.getAttribute('data-chat-target-active'),
+      breath:       r.getAttribute('data-chat-target-breath'),
+      strokeWidth:  r.getAttribute('stroke-width'),
+      transition:   r.style.transition || getComputedStyle(r).transition,
+      hasAnimate:   !!r.querySelector('animate'),
+    };
+  });
+});
+
+const idle = await probe();
+
+await page.locator('g[data-node="alpha"]').click();
+await page.waitForTimeout(400);
+const onAlpha = await probe();
+
+await page.locator('g[data-node="beta"]').click();
+await page.waitForTimeout(400);
+const onBeta = await probe();
+
+await browser.close();
+
+const findRing = (rings, alias) => rings.find(r => r.alias === alias);
+const hasTransition = (s) =>
+  (s.transition || '').includes('opacity 200ms') ||
+  /opacity\s+0\.2s|opacity\s+200ms/.test(s.transition || '');
+
+const results = {
+  two_rings_present:        idle.length === 2,
+  all_strokewidth_2p5:      idle.every(r => r.strokeWidth === '2.5'),
+  all_have_transition:      idle.every(r => hasTransition(r)),
+
+  idle_all_opacity_0:       idle.every(r => r.opacity === 0),
+  idle_all_inactive:        idle.every(r => r.active === 'false'),
+  idle_none_have_animate:   idle.every(r => r.hasAnimate === false),
+
+  // Click alpha → alpha active, beta inactive
+  alpha_active_opacity_0p95: Math.abs((findRing(onAlpha, 'alpha')?.opacity ?? 0) - 0.95) < 0.05,
+  alpha_active_attr:        findRing(onAlpha, 'alpha')?.active === 'true',
+  alpha_breath_on:          findRing(onAlpha, 'alpha')?.breath === 'on',
+  alpha_has_animate:        findRing(onAlpha, 'alpha')?.hasAnimate === true,
+  beta_inactive_opacity_0:  findRing(onAlpha, 'beta')?.opacity === 0,
+  beta_inactive_attr:       findRing(onAlpha, 'beta')?.active === 'false',
+  beta_breath_off:          findRing(onAlpha, 'beta')?.breath === 'off',
+  beta_no_animate:          findRing(onAlpha, 'beta')?.hasAnimate === false,
+
+  // Click beta → swap; alpha back to 0, beta active
+  beta_active_opacity_0p95: Math.abs((findRing(onBeta, 'beta')?.opacity ?? 0) - 0.95) < 0.05,
+  beta_active_attr:         findRing(onBeta, 'beta')?.active === 'true',
+  alpha_back_to_0:          findRing(onBeta, 'alpha')?.opacity === 0,
+  alpha_back_to_inactive:   findRing(onBeta, 'alpha')?.active === 'false',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} chat-target ring fade:`, JSON.stringify(results),
+  `\n  idle:`, idle,
+  `\n  on alpha:`, onAlpha,
+  `\n  on beta:`, onBeta);
+process.exit(ok ? 0 : 1);