@sleep2agi/agent-network-dashboard 0.4.6-preview.234 → 0.4.6-preview.236

package/app/components/TopoGraph.tsx

@@ -3055,7 +3055,37 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                       the node↔label guard still catches if the chip ever
                       pushes the label far enough right to clip a node.
                       Smaller + lighter weight reads as metadata, not name. */}
-                  <tspan dx="6" fill={pal.legendText} fontSize="11" fontWeight="400">· {box.count}</tspan>
+                  {/* Round 229 / Loop: member-count chip drops its explicit
+                      fill so it inherits from the parent <text>, which means
+                      R142's hover-fill transition (legendText → legend-
+                      Headline, 200ms ease-out) NOW carries the count chip
+                      with it. Pre-R229 the parent name brightened on
+                      hover while the count tspan stayed at legendText —
+                      "name lit, count dimmer than at rest" inverted the
+                      tonal hierarchy. Inheriting matches the name's
+                      transition; both rest and hover keep the SAME
+                      tonal relationship between name and count.
+                      7th surface in the hover-deepen-own-hue family
+                      (legend rows, chip-row counts, status pip, recent
+                      row text, pressure-bar segments, group-box fill +
+                      this round's group-label-count chip).
+
+                      Also picks up tabular-nums (5th surface in the
+                      info-density tabular-nums sweep after R224 edge
+                      badge / R225 hub digit / R225 panel header /
+                      R225 recent row count). The member count rolls
+                      over often (4→5→…→9→10 as a group grows) and
+                      lives at a fixed dx=6 offset from the name, so a
+                      digit-width jitter at 9→10 used to shift the
+                      whole count visibly. Tabular locks it. */}
+                  <tspan
+                    dx="6"
+                    fontSize="11"
+                    fontWeight="400"
+                    data-group-label-count={box.key}
+                    data-group-label-count-value={box.count}
+                    style={{ fontVariantNumeric: 'tabular-nums' }}
+                  >· {box.count}</tspan>
                   {/* Round 58 / Loop: status mix pip strip. Compact text-
                       based chips (e.g. "2w 1i") so the strip stays inside
                       the same <text> bbox the overlap-test reads — keeps
@@ -3313,8 +3343,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     style={{ pointerEvents: 'none' }}
                     data-arrival-ping={link.key}
                   >
-                    <animate attributeName="r" values="0;14;22" dur={`${duration}s`} begin={`-${(duration * 0.92).toFixed(2)}s`} repeatCount="indefinite" />
-                    <animate attributeName="opacity" values="0;0.55;0" dur={`${duration}s`} begin={`-${(duration * 0.92).toFixed(2)}s`} repeatCount="indefinite" />
+                    {/* Round 228 / Loop: pulse-pop ease curves on the
+                        arrival ping SMIL — extends R227's keySplines
+                        adoption from the click ripple (one-shot, two-
+                        value linear) to the canvas's repeating delivery-
+                        confirmation surfaces. Both <animate>s use
+                        calcMode=spline with keyTimes='0;0.5;1' (two
+                        segments).
+                        • r grows 0→14→22 (monotonic): unified ease-out
+                          across both segments — the ring decelerates
+                          as it expands, settling at its widest.
+                        • opacity bumps 0→0.55→0 (pulse): ease-out on
+                          the rise (fast appearance), ease-in on the
+                          fall (slow start of fade then accelerates) —
+                          the canonical "pulse-pop" kinetic shape.
+                        Together r decelerating and opacity pulse-popping
+                        give the arrival ping a real-event physicality
+                        instead of the prior linear-velocity tick. */}
+                    <animate
+                      attributeName="r"
+                      values="0;14;22"
+                      dur={`${duration}s`}
+                      begin={`-${(duration * 0.92).toFixed(2)}s`}
+                      repeatCount="indefinite"
+                      calcMode="spline"
+                      keyTimes="0;0.5;1"
+                      keySplines="0.25 0.1 0.25 1;0.25 0.1 0.25 1"
+                    />
+                    <animate
+                      attributeName="opacity"
+                      values="0;0.55;0"
+                      dur={`${duration}s`}
+                      begin={`-${(duration * 0.92).toFixed(2)}s`}
+                      repeatCount="indefinite"
+                      calcMode="spline"
+                      keyTimes="0;0.5;1"
+                      keySplines="0.25 0.1 0.25 1;0.42 0 1 1"
+                    />
                   </circle>
                 )}
                 {/* Round 76 / Loop: source dispatch pulse — mirror to the
@@ -3340,8 +3405,33 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     style={{ pointerEvents: 'none' }}
                     data-dispatch-pulse={link.key}
                   >
-                    <animate attributeName="r" values="0;12;18" dur={`${duration}s`} begin="0s" repeatCount="indefinite" />
-                    <animate attributeName="opacity" values="0;0.45;0" dur={`${duration}s`} begin="0s" repeatCount="indefinite" />
+                    {/* Round 228 / Loop: same pulse-pop curves as the
+                        arrival ping above. r ease-out + opacity
+                        ease-out→ease-in. The dispatch pulse is smaller
+                        (0→12→18 vs arrival's 0→14→22), but the kinetic
+                        feel should be identical — both bookend a
+                        single message in flight, so they should
+                        physically ease the same way. */}
+                    <animate
+                      attributeName="r"
+                      values="0;12;18"
+                      dur={`${duration}s`}
+                      begin="0s"
+                      repeatCount="indefinite"
+                      calcMode="spline"
+                      keyTimes="0;0.5;1"
+                      keySplines="0.25 0.1 0.25 1;0.25 0.1 0.25 1"
+                    />
+                    <animate
+                      attributeName="opacity"
+                      values="0;0.45;0"
+                      dur={`${duration}s`}
+                      begin="0s"
+                      repeatCount="indefinite"
+                      calcMode="spline"
+                      keyTimes="0;0.5;1"
+                      keySplines="0.25 0.1 0.25 1;0.42 0 1 1"
+                    />
                   </circle>
                 )}
                 {/* Round 100 / Loop: midpoint count badge for high-

package/package.json

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

package/scripts/topo-group-label-count-inherit-test.mjs

@@ -0,0 +1,99 @@
+/* Round 229 verification: group-label member-count tspan drops
+ * its explicit fill (now inherits from parent <text>) and picks up
+ * fontVariantNumeric: 'tabular-nums'.
+ *
+ * Two scopes:
+ *   1) Hover-deepen-own-hue family — count chip color now follows
+ *      parent name's R142 hover transition (legendText → legend-
+ *      Headline). Tonal hierarchy (count < name brightness) is
+ *      preserved across both rest AND hover instead of inverting
+ *      on hover.
+ *   2) Info-density tabular-nums — 5th surface after R224 edge
+ *      badge / R225 hub + panel header + recent row.
+ *
+ * Scenario: 6 prefix-shared aliases (alpha-1..alpha-3, beta-1..
+ * beta-3) → R106 cluster-by-prefix forms two groups, each with
+ * count=3. Grid layout has explicit group label rendering (#111).
+ *
+ * Verifications:
+ *   - data-group-label-count attr present (probe selector)
+ *   - tspan has NO explicit fill attribute (inheriting)
+ *   - getComputedStyle().fontVariantNumeric contains 'tabular-nums'
+ *   - tspan computed fill matches PARENT <text> computed fill
+ *     (R142 rest-state hierarchy preserved)
+ *   - count text matches '· 3'
+ *   - data-group-label-count-value reflects {box.count}
+ */
+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');
+    // R226 grid layout — group labels render here. Storage key inferred
+    // from data-topo-layout-toggle persistence pattern.
+    localStorage.setItem('anet-topo-layout', 'grid');
+  } 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-1'), mk('alpha-2'), mk('alpha-3'),
+    mk('beta-1'),  mk('beta-2'),  mk('beta-3'),
+  ] } });
+});
+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 === 6, { timeout: 30000 });
+await page.waitForSelector('[data-group-label-count]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(400);
+
+const out = await page.evaluate(() => {
+  const counts = Array.from(document.querySelectorAll('[data-group-label-count]'));
+  return counts.map((tspan) => {
+    const parent = tspan.parentElement; // the <text data-group-label>
+    return {
+      key:            tspan.getAttribute('data-group-label-count'),
+      countValue:     tspan.getAttribute('data-group-label-count-value'),
+      hasFillAttr:    tspan.hasAttribute('fill'),
+      text:           tspan.textContent,
+      fontVarNumeric: getComputedStyle(tspan).fontVariantNumeric,
+      tspanFill:      getComputedStyle(tspan).fill,
+      parentFill:     parent ? getComputedStyle(parent).fill : null,
+    };
+  });
+});
+await browser.close();
+
+const hasTab = (s) => /tabular-nums/.test(s || '');
+const present = out.length > 0;
+
+const results = {
+  groups_found:           out.length === 2,
+  all_have_key:           present && out.every(o => typeof o.key === 'string' && o.key.length > 0),
+  all_count_3:            present && out.every(o => o.countValue === '3'),
+  all_text_dot_3:         present && out.every(o => /·\s*3$/.test((o.text || '').trim())),
+  all_no_fill_attr:       present && out.every(o => !o.hasFillAttr),
+  all_tabular_nums:       present && out.every(o => hasTab(o.fontVarNumeric)),
+  fill_inherits_parent:   present && out.every(o => o.tspanFill === o.parentFill),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} group-label count inherit + tabular:`, JSON.stringify(results),
+  '\n  probed:', out);
+process.exit(ok ? 0 : 1);

package/scripts/topo-ping-pulse-ease-test.mjs

@@ -0,0 +1,96 @@
+/* Round 228 verification: arrival-ping (R75) and dispatch-pulse
+ * (R76) SMIL <animate>s get pulse-pop ease curves via calcMode/
+ * keyTimes/keySplines.
+ *
+ * Coverage:
+ *   - [data-arrival-ping] r       → ease-out across both segments
+ *   - [data-arrival-ping] opacity → ease-out rise, ease-in fall
+ *   - [data-dispatch-pulse] r       → ease-out across both segments
+ *   - [data-dispatch-pulse] opacity → ease-out rise, ease-in fall
+ *
+ * Scenario: 4 working agents + 5 messages alpha→beta so:
+ *   - link.count = 5 ≥ 3   (dispatch pulse fires)
+ *   - fresh > 0.5          (both ping + pulse gate active)
+ *   - reducedMotion off    (cyber-themed cookie default)
+ */
+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 = [];
+for (let i = 0; i < 5; i++) {
+  msgs.push({
+    id: `m${i}`, from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+    network_id: 'default', created_at: new Date(now - (1000 + i * 50)).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-arrival-ping]', { timeout: 10000, state: 'attached' });
+await page.waitForSelector('[data-dispatch-pulse]', { timeout: 10000, state: 'attached' });
+await page.waitForTimeout(400);
+
+const out = await page.evaluate(() => {
+  const probe = (parentSelector) => {
+    const el = document.querySelector(parentSelector);
+    if (!el) return null;
+    const animates = Array.from(el.querySelectorAll('animate'));
+    return animates.map((a) => ({
+      attr:       a.getAttribute('attributeName'),
+      calcMode:   a.getAttribute('calcMode'),
+      keyTimes:   a.getAttribute('keyTimes'),
+      keySplines: a.getAttribute('keySplines'),
+    }));
+  };
+  return {
+    arrival:  probe('[data-arrival-ping]'),
+    dispatch: probe('[data-dispatch-pulse]'),
+  };
+});
+await browser.close();
+
+const easeOutBoth   = '0.25 0.1 0.25 1;0.25 0.1 0.25 1';
+const pulsePop      = '0.25 0.1 0.25 1;0.42 0 1 1';
+const keyTimes      = '0;0.5;1';
+
+const find = (arr, attr) => arr?.find(a => a.attr === attr);
+const matches = (a, splines) => a && a.calcMode === 'spline' && a.keyTimes === keyTimes && a.keySplines === splines;
+
+const results = {
+  arrival_present:    Array.isArray(out.arrival) && out.arrival.length === 2,
+  arrival_r_easeout:  matches(find(out.arrival, 'r'),       easeOutBoth),
+  arrival_op_pulse:   matches(find(out.arrival, 'opacity'), pulsePop),
+  dispatch_present:   Array.isArray(out.dispatch) && out.dispatch.length === 2,
+  dispatch_r_easeout: matches(find(out.dispatch, 'r'),       easeOutBoth),
+  dispatch_op_pulse:  matches(find(out.dispatch, 'opacity'), pulsePop),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} ping+pulse ease:`, JSON.stringify(results),
+  '\n  arrival:',  out.arrival,
+  '\n  dispatch:', out.dispatch);
+process.exit(ok ? 0 : 1);