@sleep2agi/agent-network-dashboard 0.5.1-preview.70 → 0.5.1-preview.72

package/app/components/TopoGraph.tsx

@@ -257,7 +257,21 @@ function FreshnessChip({ sessions }: { sessions: unknown }) {
           duration-300 still eases the bg/color flip. Title (hover
           tooltip) still spells out the full meaning in either
           state. */}
-      {stale ? 'lag' : 'live'} · {sec}s
+      {/* Round 410 / Loop: FreshnessChip body picks up the chip-
+          internal-hierarchy arc. Pre-R410 the body rendered as a
+          single text node `lag · {sec}s` with the parent's font-
+          medium (fw=500) applied uniformly. R410 splits the digit
+          and unit into separate spans so the chip's internal
+          typography mirrors the family pattern R333-R341/R362/R369/
+          R389 established for the chip row:
+            digit  (fw=600)  data tier
+            unit   (fw=500 + opacity=0.7)  label tier
+          The `lag` prefix stays at the chip's baseline (fw=500
+          from parent font-medium) — it labels the state, not a
+          data value. data-freshness-chip-digit / -unit attrs
+          surface the spans for tests. tabular-nums + transition-
+          colors + R275 stale-only gate all preserved. */}
+      {stale ? 'lag' : 'live'} · <span className="font-semibold" data-freshness-chip-digit>{sec}</span><span className="opacity-70" data-freshness-chip-unit>s</span>
     </span>
   );
 }
@@ -6770,14 +6784,45 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                           220ms cadence the existing filter/stroke
                           pair uses — coordinated 4-property easing
                           across the card. */}
+                      {/* Round 411 / Loop: node label card rx 6 → 8.
+                          Pre-R411 the per-node label card painted at
+                          rx=6, sitting one tier BELOW the R332/R375/
+                          R376 compact-chrome tier (rx=8). Inside the
+                          corner-radius cascade family the cards used
+                          to be the only "smaller" tier — but the
+                          label card is a content-bearing surface
+                          (alias + sub text + ring), not a sub-
+                          element decoration. R411 lifts rx=6 → 8
+                          to align with the compact-chrome / segmented-
+                          control tier so all "compact card" surfaces
+                          read with the same corner radius.
+                          Corner-radius cascade (8 anchors now):
+                            R330 canvas             rx 12  (root)
+                            R331 panels             rx 10  (recent-signal, legend)
+                            R332 minimap container  rx 8   (compact chrome)
+                            R375 Layout-toggle      rx 8   (segmented control)
+                            R376 nodeSize/zoom      rx 8   (segmented control)
+                            R390 hover-detail       rx 10  (panel)
+                            R393 minimap viewport   rx 2   (sub-element)
+                            R411 node label card    rx 6 → 8  (compact card, this round)
+                          Pure paint — rx grows the corner curve
+                          inward without changing the card's outer
+                          cardW × cardH bbox (cardW=92/cardH=22 for
+                          standard nodes per R23 / R187 sizing). R217
+                          hover-stroke cyan tint + R142 drop-shadow
+                          + R246 fill+opacity 220ms transition list
+                          + R211 alias/sub text-fill ease all
+                          preserved. data-node-label-card-rx attr
+                          exposes the value for tests. */}
                       <rect
-                        x={-cardW / 2} y={cardTopY} width={cardW} height={cardH} rx="6"
+                        x={-cardW / 2} y={cardTopY} width={cardW} height={cardH} rx="8"
                         fill={pal.labelBox.fill}
                         stroke={!reducedMotion && hoveredAlias === session.alias
                           ? pal.legendAccent
                           : pal.labelBox.stroke}
                         opacity={isLight ? 1 : 0.94}
                         data-node-label-card={session.alias}
+                        data-node-label-card-rx="8"
                         data-node-label-card-elevation={
                           !reducedMotion && hoveredAlias === session.alias ? 'hover' : 'idle'
                         }

package/package.json

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

package/scripts/topo-freshness-chip-hierarchy-test.mjs

@@ -0,0 +1,93 @@
+/* Round 410 verification: FreshnessChip body picks up chip-internal-
+ * hierarchy — `{sec}` digit (fw=600 data tier) + `s` unit (opacity
+ * 0.7 label tier). Extends R333-R341/R362/R369/R389 arc to 10th
+ * anchor.
+ *
+ * Contract:
+ *   - R275 stale-only render: chip only mounts when sec > 10. Test
+ *     waits for /api/hub/status to settle, then advances lastSyncRef
+ *     by 11+ seconds via a long wait (the FreshnessChip ticks every
+ *     1s via setInterval). To avoid the slow wait we instead probe
+ *     the SOURCE-FILE for the wire change, then probe the chip if
+ *     it happens to mount during the test window.
+ *   - Source-file:
+ *     * <span className="font-semibold" data-freshness-chip-digit>
+ *     * <span className="opacity-70" data-freshness-chip-unit>
+ *   - If chip mounts at runtime: data-freshness-chip-digit + -unit
+ *     spans both present
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'idle', model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [ mk('alpha') ] } });
+});
+await ctx.route('**/api/hub/messages*', (r) => r.fulfill({ json: { messages: [] } }));
+await ctx.route('**/api/hub/tasks*',    (r) => r.fulfill({ json: { tasks: [] } }));
+
+const page = await ctx.newPage();
+await page.goto('http://127.0.0.1:3000/', { waitUntil: 'domcontentloaded' });
+await page.waitForSelector('[data-topo-hub]', { timeout: 15000 });
+
+// Wait for FreshnessChip to mount (R275 stale-only: sec > 10). The
+// chip ticks every 1s. Wait 12s so lastSyncRef-based sec crosses 10.
+await page.waitForTimeout(12000);
+
+const probe = await page.evaluate(() => {
+  const chip = document.querySelector('[data-freshness-chip]');
+  if (!chip) return { mounted: false };
+  const digit = chip.querySelector('[data-freshness-chip-digit]');
+  const unit  = chip.querySelector('[data-freshness-chip-unit]');
+  return {
+    mounted:        true,
+    chipStale:      chip.getAttribute('data-freshness-chip-stale'),
+    digitClass:     digit?.className ?? null,
+    digitText:      digit?.textContent ?? null,
+    unitClass:      unit?.className ?? null,
+    unitText:       unit?.textContent ?? null,
+  };
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceHasDigitSpan = /<span className="font-semibold" data-freshness-chip-digit>/.test(fileText);
+const sourceHasUnitSpan  = /<span className="opacity-70" data-freshness-chip-unit>s<\/span>/.test(fileText);
+
+await browser.close();
+
+// Either runtime probe catches the chip OR source-file verification
+// alone establishes the wire change.
+const results = {
+  // Source-file canonical wire (deterministic)
+  source_digit_span:      sourceHasDigitSpan,
+  source_unit_span:       sourceHasUnitSpan,
+  // Runtime: chip might be present if test wait crossed 10s; assertions
+  // are conditional on mounted (only enforce structure when chip exists).
+  runtime_check_passed:   !probe.mounted || (
+    probe.chipStale === 'true' &&
+    probe.digitClass?.includes('font-semibold') === true &&
+    /^\d+$/.test(probe.digitText || '') &&
+    probe.unitClass?.includes('opacity-70') === true &&
+    probe.unitText === 's'
+  ),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} FreshnessChip chip-internal-hierarchy:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);

package/scripts/topo-node-label-card-rx-test.mjs

@@ -0,0 +1,85 @@
+/* Round 411 verification: node label card rx 6 → 8. Corner-radius
+ * cascade family 8th anchor — compact card tier aligns with the
+ * R332/R375/R376 compact-chrome rx=8 tier.
+ *
+ * Contract:
+ *   - Each node's label-card <rect> rx attr === '8'
+ *   - data-node-label-card-rx === '8'
+ *   - Pre-R411 invariants on the rect:
+ *     * cardW (width) > 0
+ *     * cardH (height) > 0
+ *     * fill, stroke present
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+
+const browser = await chromium.launch({ headless: true });
+const ctx = await browser.newContext({ viewport: { width: 1500, height: 1500 } });
+await ctx.addCookies([{ name: 'anet_dashboard_session', value: `v3:${TOKEN}`, domain: '127.0.0.1', path: '/' }]);
+await ctx.addInitScript(() => {
+  try { localStorage.setItem('anet-theme', 'cyber'); sessionStorage.setItem('anet_v3_auth', '1'); } catch {}
+});
+await ctx.route('**/api/hub/status*', async (route) => {
+  const r = await route.fetch();
+  const b = await r.json();
+  const nid = (b.sessions || [])[0]?.network_id || 'default';
+  const mk = (alias) => ({
+    alias, status: 'idle', model: 'claude-opus-4', runtime: 'claude-code-cli',
+    network_id: nid, project_dir: null,
+    created_at: fresh, updated_at: fresh, last_seen_at: fresh,
+  });
+  await route.fulfill({ response: r, json: { ...b, sessions: [ mk('alpha'), mk('beta'), mk('gamma') ] } });
+});
+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-node-label-card]', { timeout: 15000 });
+await page.waitForTimeout(400);
+
+const probe = await page.evaluate(() => {
+  const cards = Array.from(document.querySelectorAll('[data-node-label-card]'));
+  if (cards.length === 0) return { count: 0 };
+  const sample = cards[0];
+  return {
+    count:        cards.length,
+    rxAttr:       sample.getAttribute('rx'),
+    rxData:       sample.getAttribute('data-node-label-card-rx'),
+    widthAttr:    sample.getAttribute('width'),
+    heightAttr:   sample.getAttribute('height'),
+    fillPresent:  !!sample.getAttribute('fill'),
+    strokePresent: !!sample.getAttribute('stroke'),
+    allRx8:       cards.every((c) => c.getAttribute('rx') === '8'),
+  };
+});
+
+const fileText = readFileSync('/home/vansin/agent-network-dashboard/app/components/TopoGraph.tsx', 'utf8');
+const sourceRx8 = /rx="8"\s*\n\s+fill=\{pal\.labelBox\.fill\}/.test(fileText) || /width=\{cardW\} height=\{cardH\} rx="8"/.test(fileText);
+const sourceDataRx8 = /data-node-label-card-rx="8"/.test(fileText);
+
+await browser.close();
+
+const results = {
+  // At least one label card mounted
+  cards_count_ge_1:           (probe.count || 0) >= 1,
+  // R411 wire
+  rx_attr_8:                  probe.rxAttr === '8',
+  rx_data_8:                  probe.rxData === '8',
+  all_cards_rx_8:             probe.allRx8 === true,
+  // Pre-R411 invariants
+  width_present:              Number(probe.widthAttr) > 0,
+  height_present:             Number(probe.heightAttr) > 0,
+  fill_present:               probe.fillPresent === true,
+  stroke_present:             probe.strokePresent === true,
+  // Source-file canonical wire
+  source_rx_8:                sourceRx8,
+  source_data_rx_8:           sourceDataRx8,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} node label card rx 6 → 8:`, JSON.stringify(results),
+  '\n  probe:', probe);
+process.exit(ok ? 0 : 1);