@sleep2agi/agent-network-dashboard 0.4.6-preview.32 → 0.4.6-preview.321

package/scripts/topo-recent-row-freshness-test.mjs

@@ -0,0 +1,102 @@
+/* Round 160 verification: recency pip on recent-signal panel rows.
+ *
+ * Canvas flow edges fade by freshness (R10: full intensity ≤30s,
+ * decaying to ~35% over 5min). The recent-signal panel rows
+ * encoded last_at purely in text ("5s" at row right edge) — no
+ * at-a-glance visual cue for "which row is actively firing".
+ *
+ * R160 adds a 1.6-px cyan dot at x=10 (in the 7-px margin
+ * between rect-start x=6 and text-start x=13). Alpha ramp:
+ *   ageSec ≤ 30   →  1.0   (fully fresh)
+ *   30 < ageSec ≤ 300 → smooth decay 1.0 → 0.25
+ *   ageSec > 300  →  0.25  (stale floor)
+ *
+ * Three independent encodings on each row, none competing:
+ *   rect fill   = hover/pin state (R104/R116)
+ *   count tspan = magnitude (R127 amber when ≥10)
+ *   pip         = recency (this round)
+ *
+ * Test:
+ *   Mock 3 flows — 1 fresh (5s ago), 1 mid (90s ago), 1 stale
+ *   (6 min ago). Each should produce one pip; alpha ladder:
+ *   fresh > mid > stale.
+ */
+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: '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'),
+  ] } });
+});
+
+const now = Date.now();
+// Three distinct flows with different recency:
+//   fresh: 5s ago     → alpha ≈ 1.0
+//   mid:   90s ago    → alpha ≈ 1 - (60/270)*0.75 ≈ 0.833
+//   stale: 360s ago   → alpha ≈ 0.25 (floor)
+const msgs = [
+  { id: 'f1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi', network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: 'm1', from_alias: 'beta',  to_alias: 'gamma', content: 'hi', network_id: 'default', created_at: new Date(now - 90000).toISOString() },
+  { id: 's1', from_alias: 'gamma', to_alias: 'delta', content: 'hi', network_id: 'default', created_at: new Date(now - 360000).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 === 4, { timeout: 30000 });
+await page.waitForSelector('[data-recent-row-freshness]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const probes = await page.evaluate(() => {
+  const pips = [...document.querySelectorAll('[data-recent-row-freshness]')];
+  return pips.map(el => ({
+    key:   el.getAttribute('data-recent-row-freshness'),
+    alpha: parseFloat(el.getAttribute('data-recent-row-freshness-alpha') || ''),
+    cx:    parseFloat(el.getAttribute('cx') || ''),
+    r:     parseFloat(el.getAttribute('r') || ''),
+    tag:   el.tagName.toLowerCase(),
+  }));
+});
+
+await browser.close();
+
+if (probes.length !== 3) {
+  console.log(`❌ wrong pip count: expected 3, got ${probes.length}`, probes);
+  process.exit(1);
+}
+// Rows are sorted by recency (newest first), so probes[0] is freshest.
+const [pFresh, pMid, pStale] = probes;
+const results = {
+  three_pips:              probes.length === 3,
+  all_circles:             probes.every(p => p.tag === 'circle'),
+  all_at_x_10:             probes.every(p => Math.abs(p.cx - 10) < 0.01),
+  all_radius_1p6:          probes.every(p => Math.abs(p.r - 1.6) < 0.01),
+  fresh_alpha_1:           Math.abs(pFresh.alpha - 1.0) < 0.05,
+  mid_alpha_0p7_to_0p9:    pMid.alpha > 0.7 && pMid.alpha < 0.95,
+  stale_alpha_floor_0p25:  Math.abs(pStale.alpha - 0.25) < 0.05,
+  ladder_descends:         pFresh.alpha > pMid.alpha && pMid.alpha > pStale.alpha,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row freshness pip:`, JSON.stringify(results),
+  `\n  probes=`, probes);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-hot-test.mjs

@@ -0,0 +1,110 @@
+/* Round 127 verification: recent-signal panel row mirrors R126's
+ * canvas hot-badge convention. When link.count >= 10 the count
+ * digit inside the row text renders in amber (#d97706 light,
+ * #fbbf24 dark) + bold (font-weight 700). Surrounding alias text +
+ * separators stay in legendText/legendHeadline.
+ *
+ * Fleet:
+ *   alpha → beta:  12 msgs → HOT row, count tspan amber+bold
+ *   beta  → gamma:  4 msgs → warm row, count tspan default
+ *
+ * Path:
+ *   1. recent panel has 2 rows; data-recent-row-hot reflects bucket
+ *   2. alpha→beta row: data-recent-row-count-hot tspan present, amber
+ *   3. beta→gamma row: data-recent-row-count (non-hot) tspan present
+ *   4. Symmetry with R126: the canvas badge for alpha→beta and the
+ *      recent-row count for alpha→beta both render the same amber
+ *      hex.
+ */
+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('alpha', 'working'), mk('beta', 'working'), mk('gamma', 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const mkMsg = (id, from_alias, to_alias, ageMs) => ({
+  id, from_alias, to_alias, content: 'hi', network_id: 'default',
+  created_at: new Date(now - ageMs).toISOString(),
+});
+const msgs = [];
+for (let i = 0; i < 12; i++) msgs.push(mkMsg(`a${i}`, 'alpha', 'beta',  20000 + i * 500));
+for (let i = 0; i < 4;  i++) msgs.push(mkMsg(`b${i}`, 'beta',  'gamma', 30000 + i * 500));
+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="alpha->beta"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const inspect = (key) => page.evaluate((k) => {
+  const row = document.querySelector(`[data-recent-row="${k}"]`);
+  if (!row) return null;
+  const hotTspan = row.querySelector('[data-recent-row-count-hot]');
+  const warmTspan = row.querySelector('[data-recent-row-count]');
+  return {
+    hot:           row.getAttribute('data-recent-row-hot'),
+    hotTspanText:  hotTspan?.textContent,
+    hotTspanFill:  hotTspan?.getAttribute('fill'),
+    hotTspanWeight: hotTspan?.getAttribute('font-weight'),
+    warmTspanText: warmTspan?.textContent,
+  };
+}, key);
+
+const a2b = await inspect('alpha->beta');
+const b2g = await inspect('beta->gamma');
+
+// Also assert the canvas badge for alpha→beta still flips to the
+// same amber stroke — symmetry of canvas + panel hot signals.
+const badgeStroke = await page.evaluate(() => {
+  const g = document.querySelector('[data-edge-count-badge="alpha->beta"]');
+  return g?.querySelector('circle')?.getAttribute('stroke');
+});
+
+await browser.close();
+
+// Dark theme amber: #fbbf24
+const amberHex = '#fbbf24';
+
+const results = {
+  a2b_attrHot:        a2b !== null && a2b.hot === 'true',
+  a2b_hotTspan:       a2b !== null && a2b.hotTspanText === '12',
+  a2b_amberFill:      a2b !== null && (a2b.hotTspanFill || '').toLowerCase() === amberHex,
+  a2b_boldWeight:     a2b !== null && a2b.hotTspanWeight === '700',
+  a2b_noWarmTspan:    a2b !== null && a2b.warmTspanText === undefined,
+
+  b2g_attrNotHot:     b2g !== null && b2g.hot === 'false',
+  b2g_warmTspan:      b2g !== null && b2g.warmTspanText === '4',
+  b2g_noHotTspan:     b2g !== null && a2b !== null && b2g.hotTspanText === undefined,
+
+  symmetric_badgeAmber: (badgeStroke || '').toLowerCase() === amberHex,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row hot:`, JSON.stringify(results),
+  `\n  a2b=`, a2b,
+  `\n  b2g=`, b2g,
+  `\n  canvas badge stroke for alpha→beta =`, badgeStroke);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-hover-lift-test.mjs

@@ -0,0 +1,128 @@
+/* Round 143 verification: recent-signal panel rows lift 1px on
+ * hover or pin. Closes the "interactive surface elevates" idiom
+ * across four nested canvas-region scopes:
+ *   R51  node hover-lift (canvas element)        → translateY(-2px)
+ *   R135 overlay panels (canvas chrome)          → drop-shadow boost
+ *   R142 group boxes (canvas-side per-team)      → drop-shadow filter
+ *   R143 recent-signal rows (panel content)      → translateY(-1px)
+ *
+ * Smaller layer = smaller lift (1px row, 2px node, drop-shadow
+ * panel/box). Each layer signals interactivity in its own
+ * vocabulary.
+ *
+ * States:
+ *   1. Idle row: data-recent-row-lifted="false", no transform
+ *   2. Hover row → lifted=true, transform contains translateY(-1px)
+ *   3. Leave hover → restored to flat
+ *   4. Click to pin → lifted=true (pin keeps the lift)
+ *   5. Esc → cleared back to flat
+ */
+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('alpha', 'working'), mk('beta', 'working'), mk('gamma', 'idle'),
+  ] } });
+});
+
+const now = Date.now();
+const msgs = [];
+// 3 distinct pairs → 3 recent-signal rows
+const pairs = [['alpha', 'beta'], ['beta', 'gamma'], ['gamma', 'alpha']];
+pairs.forEach(([from, to], i) => {
+  msgs.push({
+    id: `m${i}`,
+    from_alias: from,
+    to_alias: to,
+    content: 'hi',
+    network_id: 'default',
+    created_at: new Date(now - (20000 + i * 1000)).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="alpha->beta"]', { timeout: 10000 });
+await page.waitForTimeout(400);
+
+const inspect = (key) => page.evaluate((k) => {
+  const row = document.querySelector(`[data-recent-row="${k}"]`);
+  return {
+    lifted:    row?.getAttribute('data-recent-row-lifted'),
+    hovered:   row?.getAttribute('data-recent-row-hovered'),
+    pinned:    row?.getAttribute('data-recent-row-pinned'),
+    transform: row?.getAttribute('style')?.match(/translateY\([^)]+\)/)?.[0],
+  };
+}, key);
+
+// State 1: idle baseline (no hover, no pin)
+const s1 = await inspect('alpha->beta');
+
+// State 2: hover alpha->beta row
+await page.locator('[data-recent-row="alpha->beta"]').hover();
+await page.waitForTimeout(250);
+const s2_hovered = await inspect('alpha->beta');
+const s2_other   = await inspect('beta->gamma');
+
+// State 3: leave hover (mouse far away to clear all panel hovers)
+await page.mouse.move(700, 350);
+await page.waitForTimeout(250);
+const s3 = await inspect('alpha->beta');
+
+// State 4: click row to pin
+await page.locator('[data-recent-row="alpha->beta"]').click();
+await page.waitForTimeout(250);
+// Move mouse away so only pin lifts the row (not hover)
+await page.mouse.move(700, 350);
+await page.waitForTimeout(250);
+const s4 = await inspect('alpha->beta');
+
+// State 5: Esc clears pin
+await page.keyboard.press('Escape');
+await page.waitForTimeout(250);
+const s5 = await inspect('alpha->beta');
+
+await browser.close();
+
+const liftStr = 'translateY(-1px)';
+const results = {
+  s1_idleFlat:            s1.lifted === 'false' && !s1.transform,
+
+  s2_hoveredLifted:       s2_hovered.hovered === 'true' && s2_hovered.lifted === 'true',
+  s2_hoveredTransform:    s2_hovered.transform === liftStr,
+  s2_otherStillFlat:      s2_other.lifted === 'false' && !s2_other.transform,
+
+  s3_restored:            s3.lifted === 'false' && !s3.transform,
+
+  s4_pinnedLifted:        s4.pinned === 'true' && s4.lifted === 'true',
+  s4_pinnedTransform:     s4.transform === liftStr,
+
+  s5_clearedAfterEsc:     s5.lifted === 'false' && !s5.transform,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row hover lift:`, JSON.stringify(results),
+  `\n  s1=`, s1, `\n  s2_hovered=`, s2_hovered, ` s2_other=`, s2_other,
+  `\n  s3=`, s3, `\n  s4=`, s4, `\n  s5=`, s5);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-hover-test.mjs

@@ -0,0 +1,122 @@
+/* Round 56 verification: hovering a recent-signal panel row sets
+ * hoveredEdgeKey to that link, which fires the R50 edge-focus +
+ * R49 endpoint-highlight ladders against the canvas.
+ *
+ * Sessions: alpha, beta, gamma, delta, epsilon, zeta (all idle).
+ * Messages create three deduped flow links in this order:
+ *   alpha → beta
+ *   gamma → delta
+ *   epsilon → zeta
+ * Hover the FIRST recent-signal row (alpha→beta):
+ *   - alpha→beta visible edge: opacity boosts ≥1.5× baseline (R50)
+ *   - other edges (γ→δ, ε→ζ): opacity dims < 0.6× baseline
+ *   - alpha + beta nodes: stay bright (≥0.55) — endpoint highlight (R49)
+ *   - gamma/delta/epsilon/zeta nodes: dim (<0.4)
+ * Release → all restore.
+ */
+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');
+    localStorage.setItem('anet-topo-layout', 'ring');
+    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 = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta'].map(a => ({
+    alias: a, 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 } });
+});
+const now = new Date().toISOString();
+await ctx.route('**/api/hub/messages*', (route) => route.fulfill({ json: { messages: [
+  { from_alias: 'alpha',   to_alias: 'beta',  content: 'm', created_at: now },
+  { from_alias: 'gamma',   to_alias: 'delta', content: 'm', created_at: now },
+  { from_alias: 'epsilon', to_alias: 'zeta',  content: 'm', created_at: now },
+] } }));
+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 === 6, { timeout: 30000 });
+await page.waitForTimeout(600);
+
+const readState = () => page.evaluate(() => {
+  const svg = document.querySelector('svg[viewBox="0 0 1000 680"]');
+  const edges = {};
+  for (const g of svg.querySelectorAll(':scope > g > g')) {
+    const t = g.querySelector('path[data-edge-hitbox] title');
+    if (!t) continue;
+    const route = (t.textContent || '').split('\n')[0];
+    const base = [...g.querySelectorAll(':scope > path')].find(
+      p => !p.hasAttribute('data-edge-hitbox') && p.hasAttribute('marker-end')
+    );
+    if (base) edges[route] = +base.getAttribute('opacity');
+  }
+  const nodes = {};
+  for (const a of ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta']) {
+    const n = document.querySelector(`g[data-node="${a}"]`);
+    nodes[a] = n ? +(n.style.opacity || '1') : null;
+  }
+  return { edges, nodes };
+});
+
+const before = await readState();
+
+// Hover the first recent-signal row — its key is "alpha->beta".
+const rowRect = await page.evaluate(() => {
+  const g = document.querySelector('g[data-recent-row="alpha->beta"]');
+  if (!g) return null;
+  const r = g.getBoundingClientRect();
+  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+});
+if (!rowRect) { console.log('❌ recent-signal row alpha->beta not found'); process.exit(1); }
+await page.mouse.move(10, 10);
+await page.mouse.move(rowRect.x, rowRect.y);
+await page.waitForTimeout(350);
+const during = await readState();
+
+await page.mouse.move(10, 10);
+await page.waitForTimeout(350);
+const after = await readState();
+
+await browser.close();
+
+const baseEdgeOp = before.edges['alpha → beta'];
+const eAB = during.edges['alpha → beta'];
+const eGD = during.edges['gamma → delta'];
+const eEZ = during.edges['epsilon → zeta'];
+
+const bright = (v) => v != null && v >= 0.55;
+const dim = (v) => v != null && v < 0.4;
+const results = {
+  baselineEqual: Math.abs(before.edges['alpha → beta'] - before.edges['gamma → delta']) < 0.001
+              && Math.abs(before.edges['alpha → beta'] - before.edges['epsilon → zeta']) < 0.001,
+  hoverBrightensTargetEdge: eAB > baseEdgeOp * 1.5,
+  hoverDimsOtherEdges: eGD < baseEdgeOp * 0.6 && eEZ < baseEdgeOp * 0.6,
+  endpointsStayBright: bright(during.nodes.alpha) && bright(during.nodes.beta),
+  nonEndpointsDim: dim(during.nodes.gamma) && dim(during.nodes.delta)
+                && dim(during.nodes.epsilon) && dim(during.nodes.zeta),
+  releaseRestoresEdges: Math.abs(after.edges['alpha → beta'] - baseEdgeOp) < 0.05
+                     && Math.abs(after.edges['gamma → delta'] - baseEdgeOp) < 0.05,
+  releaseRestoresNodes: bright(after.nodes.alpha) && bright(after.nodes.gamma) && bright(after.nodes.epsilon),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row hover:`, JSON.stringify(results),
+  `\n  baseline α→β=${baseEdgeOp}`,
+  `\n  during α→β=${eAB} γ→δ=${eGD} ε→ζ=${eEZ}`,
+  `\n  during nodes=`, during.nodes,
+  `\n  after  edges=`, after.edges);
+process.exit(ok ? 0 : 1);

package/scripts/topo-recent-row-pin-spacing-test.mjs

@@ -0,0 +1,137 @@
+/* Round 220 verification (milestone): recent-signal row text completes
+ * the pin-signature typography triple (R218 group labels / R219
+ * legend rows / R220 recent-signal rows). All three label-based
+ * interactive surfaces now read "locked in" at type level on pin.
+ *
+ * Test (cyber dark, 4 working sessions + 3 mock flows so recent-
+ * signal panel renders 3 rows):
+ *   1. 3 [data-recent-row-text] rows render.
+ *   2. Idle: all pinned='false', spacing 'normal' or 0px.
+ *   3. Inline transition includes 'letter-spacing 150ms'.
+ *   4. Click first row to pin it.
+ *   5. First row: pinned='true', spacing ≈ 0.5px.
+ *   6. Other rows stay unpinned + 0 spacing.
+ *   7. Click pinned row again → unpin → back to 0.
+ *   8. Hover (not pin) does NOT trigger letter-spacing spread —
+ *      pin-exclusive signature (proven by hover-without-click test).
+ */
+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'), mk('gamma'), mk('delta'),
+  ] } });
+});
+
+const now = Date.now();
+const msgs = [
+  { id: '1', from_alias: 'alpha', to_alias: 'beta',  content: 'hi',
+    network_id: 'default', created_at: new Date(now - 2000).toISOString() },
+  { id: '2', from_alias: 'beta',  to_alias: 'gamma', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 5000).toISOString() },
+  { id: '3', from_alias: 'gamma', to_alias: 'delta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - 8000).toISOString() },
+];
+await ctx.route('**/api/hub/messages*', (r2) => r2.fulfill({ json: { messages: msgs } }));
+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-recent-row-text]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = async () => page.evaluate(() => {
+  return [...document.querySelectorAll('[data-recent-row-text]')].map(el => {
+    const cs = getComputedStyle(el);
+    return {
+      key:         el.getAttribute('data-recent-row-text'),
+      pinned:      el.getAttribute('data-recent-row-text-pinned'),
+      spacing:     cs.letterSpacing,
+      transition:  el.style.transition,
+    };
+  });
+});
+
+const idle = await probe();
+const firstKey = idle[0]?.key;
+
+// Hover-without-pin probe: hover the first row, verify spacing
+// stays at 0 (pin-exclusive signature, not triggered by hover)
+await page.hover(`[data-recent-row="${firstKey}"]`);
+await page.waitForTimeout(200);
+const hovered = await probe();
+await page.mouse.move(0, 0);
+await page.waitForTimeout(180);
+
+// Click to pin
+await page.click(`[data-recent-row="${firstKey}"]`);
+await page.waitForTimeout(200);
+const pinned = await probe();
+
+// Click again to unpin
+await page.click(`[data-recent-row="${firstKey}"]`);
+await page.waitForTimeout(200);
+const unpinned = await probe();
+
+await browser.close();
+
+const near = (s, want, tol = 0.15) => {
+  if (want === 0 && (s === 'normal' || s === '0px' || s === '0' || !s)) return true;
+  const got = parseFloat(s || '0');
+  return Math.abs(got - want) < tol;
+};
+const hasLetterSpacingT = (s) => /letter-spacing\s+(?:150ms|0\.15s)/.test(s || '');
+
+const firstIdle    = idle.find(p => p.key === firstKey);
+const firstHovered = hovered.find(p => p.key === firstKey);
+const firstPinned  = pinned.find(p => p.key === firstKey);
+const otherPinned  = pinned.find(p => p.key !== firstKey);
+const firstUnpin   = unpinned.find(p => p.key === firstKey);
+
+const results = {
+  three_rows_present:       idle.length === 3,
+  all_idle_unpinned:        idle.every(p => p.pinned === 'false'),
+  all_idle_spacing_zero:    idle.every(p => near(p.spacing, 0)),
+  all_have_transition:      idle.every(p => hasLetterSpacingT(p.transition)),
+
+  // Pin-exclusive: hover does NOT trigger letter-spacing spread
+  hovered_pinned_false:     firstHovered?.pinned === 'false',
+  hovered_spacing_zero:     near(firstHovered?.spacing, 0),
+
+  // Pin click triggers spread
+  first_pinned_attr:        firstPinned?.pinned === 'true',
+  first_pinned_spacing:     near(firstPinned?.spacing, 0.5),
+  other_stays_unpinned:     otherPinned?.pinned === 'false',
+  other_spacing_unchanged:  near(otherPinned?.spacing, 0),
+
+  // Unpin returns to 0
+  unpin_attr_false:         firstUnpin?.pinned === 'false',
+  unpin_spacing_zero:       near(firstUnpin?.spacing, 0),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} recent-row pin spacing:`, JSON.stringify(results),
+  `\n  idle:`,    idle,
+  `\n  hovered:`, hovered,
+  `\n  pinned:`,  pinned,
+  `\n  unpinned:`,unpinned);
+process.exit(ok ? 0 : 1);