@sleep2agi/agent-network-dashboard 0.4.6-preview.166 → 0.4.6-preview.168

package/app/components/TopoGraph.tsx

@@ -1980,7 +1980,51 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                 }}
               >
                 {flowLinks.length} active link{flowLinks.length === 1 ? '' : 's'}
-                {rel ? <span className="text-gray-500"> · last {rel}</span> : null}
+                {rel ? (() => {
+                  // Round 161 / Loop: extend R160's recency-pip
+                  // vocabulary up one scope — from per-flow row to
+                  // fleet-aggregate chip. The chip already shows
+                  // recency in text ("last 5s ago"); the " · "
+                  // separator bullet was dead gray. Color the
+                  // bullet by freshness using the same alpha
+                  // ramp R160 uses on recent-signal rows:
+                  //   ageSec ≤ 30   → 1.0 (fully fresh)
+                  //   30-300s       → smooth decay 1.0 → 0.25
+                  //   > 300s        → 0.25 (stale floor)
+                  // Cyan bullet pulse when fresh + gray text tail
+                  // = "is the network firing right now" readable
+                  // at a glance, without parsing the timestamp
+                  // numerals. Same vocabulary the canvas uses
+                  // (R10 edge fade) and the recent-signal panel
+                  // uses (R160 row pip) — three nested scopes
+                  // now share one freshness ladder.
+                  const ageSec = recent !== null
+                    ? Math.max(0, (Date.now() - recent) / 1000)
+                    : 999;
+                  const alpha = ageSec <= 30
+                    ? 1
+                    : ageSec <= 300
+                      ? 1 - ((ageSec - 30) / 270) * 0.75
+                      : 0.25;
+                  // Cyan dark / teal light to match palette legendAccent.
+                  const dotColor = isLight
+                    ? `rgba(13, 148, 136, ${alpha.toFixed(2)})`
+                    : `rgba(34, 211, 238, ${alpha.toFixed(2)})`;
+                  return (
+                    <span className="text-gray-500">
+                      <span
+                        data-active-links-freshness-dot
+                        data-active-links-freshness-alpha={alpha.toFixed(2)}
+                        style={{
+                          color: dotColor,
+                          fontWeight: alpha > 0.7 ? 700 : 400,
+                          transition: 'color 200ms ease-out',
+                        }}
+                      >{' · '}</span>
+                      last {rel}
+                    </span>
+                  );
+                })() : null}
               </span>
             );
           })()}
@@ -3934,6 +3978,55 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                               : 1}
                       style={{ transition: 'fill 150ms ease-out, opacity 150ms ease-out' }}
                     />
+                    {/* Round 160 / Loop: recency pip. Canvas flow edges
+                        fade by freshness (R10: full intensity ≤30s →
+                        ~35% over 5min). The recent-signal panel rows
+                        duplicate that data (alias→alias · N · 5s)
+                        but encode freshness purely in text — no
+                        at-a-glance visual cue for "which row is
+                        actively firing right now". A 1.6-px cyan dot
+                        at x=10 (in the 7-px margin between rect-
+                        start x=6 and text-start x=13) brightens
+                        fresh rows and dims stale ones — same
+                        vocabulary the canvas uses, brought to the
+                        panel side.
+
+                        Three encodings now coexist on each row,
+                        none competing:
+                          rect fill   = hover/pin state (R104/R116)
+                          count tspan = magnitude (R127 amber when ≥10)
+                          pip         = recency (this round)
+
+                        Geometry: cy = row_y - 3 (mid-row vertical
+                        centre, where text baseline at y=row_y sits
+                        slightly below). r=1.6 fits cleanly in the
+                        7-px left margin. pointerEvents:none so the
+                        row's button-role hit area is unchanged.
+                        No overlap-test impact (entirely within the
+                        existing rect bbox). */}
+                    {(() => {
+                      if (!link.last_at) return null;
+                      const ageSec = Math.max(0, (Date.now() - Date.parse(link.last_at)) / 1000);
+                      // 0-30s: fully fresh (1.0). 30-300s: smooth
+                      // decay 1→0.25. >300s: stale floor (0.25).
+                      const alpha = ageSec <= 30
+                        ? 1
+                        : ageSec <= 300
+                          ? 1 - ((ageSec - 30) / 270) * 0.75
+                          : 0.25;
+                      return (
+                        <circle
+                          cx={10}
+                          cy={38 + index * 16 - 3}
+                          r={1.6}
+                          fill={pal.legendAccent}
+                          opacity={alpha}
+                          data-recent-row-freshness={link.key}
+                          data-recent-row-freshness-alpha={alpha.toFixed(2)}
+                          style={{ pointerEvents: 'none', transition: 'opacity 200ms ease-out' }}
+                        />
+                      );
+                    })()}
                     <text
                       x="13" y={38 + index * 16}
                       fill={isRowActive ? pal.legendHeadline : pal.legendText}

package/package.json

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

package/scripts/topo-active-links-freshness-test.mjs

@@ -0,0 +1,113 @@
+/* Round 161 verification: active-links chip bullet picks up
+ * the R160 freshness vocabulary.
+ *
+ * R10 fades canvas flow edges by freshness. R160 brought that
+ * vocabulary to the recent-signal panel rows via a 1.6-px cyan
+ * pip at row left edge. R161 extends it one more scope — up to
+ * the fleet-aggregate active-links chip in the chip-row.
+ *
+ * The chip text was already "3 active links · last 5s ago" but
+ * the " · " separator was dead gray. R161 colors that bullet
+ * by freshness using the same alpha ramp:
+ *   ageSec ≤ 30   → 1.0 (fully fresh)
+ *   30-300s       → 1.0 → 0.25 smooth decay
+ *   > 300s        → 0.25 stale floor
+ *
+ * Three nested scopes now share one freshness ladder:
+ *   canvas edge fade  (R10)   — per-edge visual
+ *   row pip           (R160)  — per-flow row in recent-signal
+ *   chip bullet       (R161)  — fleet aggregate in chip-row
+ *
+ * Test scenarios (one page load each):
+ *   A. fresh most-recent flow (5s ago)  → alpha ≈ 1.0, fontWeight 700
+ *   B. mid recency (90s ago)            → alpha ≈ 0.83
+ *   C. stale (360s ago)                 → alpha ≈ 0.25 (floor)
+ *
+ * Color parses out of `rgba(34, 211, 238, 1)` cyber theme.
+ */
+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 {}
+});
+
+async function probe(msgAgeSec) {
+  const fresh = new Date(Date.now() - 60 * 1000).toISOString();
+  await ctx.unroute('**/api/hub/status*').catch(() => {});
+  await ctx.unroute('**/api/hub/messages*').catch(() => {});
+  await ctx.unroute('**/api/hub/tasks*').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: '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: [
+    { id: 'x', from_alias: 'alpha', to_alias: 'beta', content: 'hi',
+      network_id: 'default', created_at: new Date(Date.now() - msgAgeSec * 1000).toISOString() },
+  ] } }));
+  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-active-links-freshness-dot]', { timeout: 10000 });
+  await page.waitForTimeout(400);
+  const out = await page.evaluate(() => {
+    const el = document.querySelector('[data-active-links-freshness-dot]');
+    if (!el) return null;
+    const styleColor = el.style.color || getComputedStyle(el).color;
+    return {
+      alpha: parseFloat(el.getAttribute('data-active-links-freshness-alpha') || ''),
+      color: styleColor,
+      fontWeight: el.style.fontWeight || getComputedStyle(el).fontWeight,
+      text: el.textContent,
+    };
+  });
+  await page.close();
+  return out;
+}
+
+const A = await probe(5);     // fresh
+const B = await probe(90);    // mid
+const C = await probe(360);   // stale
+
+await browser.close();
+
+const cyanRgb = (str) => {
+  // Inline `style="color: rgba(34, 211, 238, ...)"` — alpha is part of color.
+  const m = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(str);
+  if (!m) return null;
+  return [Number(m[1]), Number(m[2]), Number(m[3])];
+};
+
+const results = {
+  fresh_dot_found:    A !== null,
+  mid_dot_found:      B !== null,
+  stale_dot_found:    C !== null,
+  fresh_alpha_1:      A && Math.abs(A.alpha - 1.0)  < 0.05,
+  mid_alpha_window:   B && B.alpha > 0.7 && B.alpha < 0.95,
+  stale_alpha_floor:  C && Math.abs(C.alpha - 0.25) < 0.05,
+  fresh_color_cyan:   A && JSON.stringify(cyanRgb(A.color)) === '[34,211,238]',
+  fresh_weight_bold:  A && (A.fontWeight === '700' || A.fontWeight === 'bold'),
+  stale_weight_norm:  C && (C.fontWeight === '400' || C.fontWeight === 'normal' || C.fontWeight === ''),
+  ladder_descends:    A && B && C && A.alpha > B.alpha && B.alpha > C.alpha,
+  text_is_separator:  A && A.text && A.text.trim() === '·',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} active-links freshness:`, JSON.stringify(results),
+  `\n  fresh =`, A,
+  `\n  mid   =`, B,
+  `\n  stale =`, C);
+process.exit(ok ? 0 : 1);

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);