@sleep2agi/agent-network-dashboard 0.4.6-preview.151 → 0.4.6-preview.153

package/app/components/TopoGraph.tsx

@@ -2106,20 +2106,43 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
               scan without being noisy. Inline transform-origin on the
               <g> wrapper ensures Chrome / Firefox rotate around (cx,cy)
               instead of the SVG viewBox corner. */}
-          <g
-            style={{
-              transformOrigin: `${cx}px ${cy}px`,
-              transformBox: 'view-box',
-              pointerEvents: 'none',
-            }}
-            className="anet-topo-sweep"
-            opacity={isLight ? 0.7 : 1}
-          >
-            <path
-              d={`M ${cx} ${cy} L ${cx + 330} ${cy} A 330 330 0 0 0 ${cx + 330 * Math.cos(-Math.PI / 4.5)} ${cy + 330 * Math.sin(-Math.PI / 4.5)} Z`}
-              fill="url(#topo-sweep)"
-            />
-          </g>
+          {(() => {
+            // R146: radar sweep rotation buckets on workingCount, joining
+            // R84 hub breath / R131 outer orbit / R132 group march /
+            // R145 idle spokes as the 5th and final layer in the busyness-
+            // driven motion family. 8 / 6 / 4 / 3 seconds — same 0 / 1-2 /
+            // 3-5 / 6+ thresholds R84 uses. "Busier fleet = more frequent
+            // scans" feels semantically right for a radar idiom. R45
+            // baseline 6s sits at bucket 1 so the calm/busy spread bracks
+            // around the historical default.
+            const busy = workingCount === 0 ? 0
+                       : workingCount <= 2 ? 1
+                       : workingCount <= 5 ? 2
+                       : 3;
+            const sweepDur = [8, 6, 4, 3][busy];
+            return (
+              <g
+                style={{
+                  transformOrigin: `${cx}px ${cy}px`,
+                  transformBox: 'view-box',
+                  pointerEvents: 'none',
+                  // CSS var consumed by `.anet-topo-sweep` (line 848 of
+                  // globals.css). React's CSSProperties type doesn't model
+                  // custom properties → cast through Record<string, string>.
+                  ...({ ['--sweep-dur']: `${sweepDur}s` } as Record<string, string>),
+                } as React.CSSProperties}
+                className="anet-topo-sweep"
+                opacity={isLight ? 0.7 : 1}
+                data-topo-sweep-bucket={busy}
+                data-topo-sweep-dur={sweepDur}
+              >
+                <path
+                  d={`M ${cx} ${cy} L ${cx + 330} ${cy} A 330 330 0 0 0 ${cx + 330 * Math.cos(-Math.PI / 4.5)} ${cy + 330 * Math.sin(-Math.PI / 4.5)} Z`}
+                  fill="url(#topo-sweep)"
+                />
+              </g>
+            );
+          })()}
 
           {/* radar rings — pure decoration at fixed radii, independent of
               node positions so the radar aesthetic is preserved across tier
@@ -2264,27 +2287,57 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           {/* hub links — round 46: idle spokes now have animated
               stroke-dashoffset so dashes flow outward from the hub
               ("command relay" feel). Active spokes carrying live message
-              flow stay as solid bright strokes. */}
-          {layout === 'ring' && onlineNodes.map((session, idx) => {
-            const pos = nodePositions[session.alias];
-            if (!pos) return null;
-            const path = curvePath({ x: cx, y: cy }, pos, 0);
-            const isActiveSpoke = activeAliases.has(session.alias);
+              flow stay as solid bright strokes.
+              R145 / Loop: idle-spoke animation cadence buckets on
+              workingCount, mirroring R84 hub-breath / R131 outer-
+              ring orbit / R132 groupbox-march coordination. Same
+              0 / 1-2 / 3-5 / 6+ thresholds. Idle ↔ idle network
+              has a slow "command relay" feel; as work accumulates
+              the dashes accelerate outward, completing the 4th
+              motion layer in the busyness-driven family:
+                R84  hub breath          (centre)
+                R131 outer ring orbit    (periphery)
+                R132 groupbox march      (per-team, grid layout)
+                R145 idle-spoke flow     (ring layout, hub→nodes)
+              4 surfaces, 1 signal. Same cadence ladder 2.8/2.4/2.0/
+              1.6s — 1.75× range from calm to busy, capped so the
+              network never feels frantic. */}
+          {layout === 'ring' && (() => {
+            const busy = workingCount === 0 ? 0
+                       : workingCount <= 2 ? 1
+                       : workingCount <= 5 ? 2
+                       : 3;
+            const spokeDur = [2.8, 2.4, 2.0, 1.6][busy];
+            return onlineNodes.map((session, idx) => {
+              const pos = nodePositions[session.alias];
+              if (!pos) return null;
+              const path = curvePath({ x: cx, y: cy }, pos, 0);
+              const isActiveSpoke = activeAliases.has(session.alias);
 
-            return (
-              <path
-                key={`hub-${session.alias}`}
-                d={path}
-                fill="none"
-                stroke={isActiveSpoke ? pal.spokeStroke.active : pal.spokeStroke.idle}
-                strokeWidth={isActiveSpoke ? 2 : 1}
-                strokeDasharray={isActiveSpoke ? 'none' : '6 14'}
-                opacity={isActiveSpoke ? 0.7 : 0.45}
-                className={isActiveSpoke ? undefined : 'anet-topo-spoke-flow'}
-                style={isActiveSpoke ? undefined : { animationDelay: `${-(idx * 0.25)}s` }}
-              />
-            );
-          })}
+              return (
+                <path
+                  key={`hub-${session.alias}`}
+                  d={path}
+                  fill="none"
+                  stroke={isActiveSpoke ? pal.spokeStroke.active : pal.spokeStroke.idle}
+                  strokeWidth={isActiveSpoke ? 2 : 1}
+                  strokeDasharray={isActiveSpoke ? 'none' : '6 14'}
+                  opacity={isActiveSpoke ? 0.7 : 0.45}
+                  className={isActiveSpoke ? undefined : 'anet-topo-spoke-flow'}
+                  data-topo-spoke-bucket={isActiveSpoke ? undefined : busy}
+                  data-topo-spoke-dur={isActiveSpoke ? undefined : spokeDur}
+                  style={isActiveSpoke ? undefined : ({
+                    animationDelay: `${-(idx * 0.25)}s`,
+                    // CSS var consumed by `.anet-topo-spoke-flow`
+                    // (line 859 of globals.css). React's CSSProperties
+                    // type doesn't model custom properties → cast
+                    // through Record<string, string>.
+                    ...({ ['--spoke-dur']: `${spokeDur}s` } as Record<string, string>),
+                  } as React.CSSProperties)}
+                />
+              );
+            });
+          })()}
 
           {/* #111: prefix-group boundary boxes (Vincent 4722). Grid layout
               only — groupBoxes is empty in ring mode. Rendered behind the

package/app/globals.css

@@ -840,24 +840,39 @@ body {
 
 /* Round 45 — TopoGraph rotating radar sweep wedge. 6s slow rotation
    gives the topology canvas a real "radar scan" feel without distracting
-   from the agent nodes. */
+   from the agent nodes.
+   R146: split shorthand into longhand so per-render inline style can
+   override animation-duration via --sweep-dur, joining the R145
+   --spoke-dur / R132 --march-dur pattern. Default 6s preserves R45's
+   original cadence for any caller that forgets the var. */
 @keyframes anet-topo-sweep-kf {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 .anet-topo-sweep {
-  animation: anet-topo-sweep-kf 6s linear infinite;
+  animation-name: anet-topo-sweep-kf;
+  animation-duration: var(--sweep-dur, 6s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 
 /* Round 46 — animated dashed spokes flowing from hub outward. Each spoke
    gets a small animationDelay (set inline) so the dashes don't all flow
-   in sync — reads as "command relay" pulse rather than a metronome. */
+   in sync — reads as "command relay" pulse rather than a metronome.
+   R145: split shorthand into longhand so per-render inline style can
+   override animation-duration via the --spoke-dur custom property —
+   same idiom R132 uses for --march-dur on group boxes. Default 2.4s
+   when --spoke-dur isn't set, so any future caller that forgets the
+   var keeps R46's original cadence. */
 @keyframes anet-topo-spoke-flow-kf {
   from { stroke-dashoffset: 0;   }
   to   { stroke-dashoffset: -40; }
 }
 .anet-topo-spoke-flow {
-  animation: anet-topo-spoke-flow-kf 2.4s linear infinite;
+  animation-name: anet-topo-spoke-flow-kf;
+  animation-duration: var(--spoke-dur, 2.4s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 
 /* Round 85 — group-box "marching ants" perimeter drift.

package/package.json

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

package/scripts/topo-spoke-busyness-test.mjs

@@ -0,0 +1,110 @@
+/* Round 145 verification: R46 idle-spoke flow rate buckets on
+ * workingCount, completing the 4-layer busyness-driven motion
+ * family:
+ *   R84  hub breath          (centre)
+ *   R131 outer-ring orbit    (periphery)
+ *   R132 groupbox march      (per-team, grid layout)
+ *   R145 idle-spoke flow     (ring layout, hub→nodes) — new
+ *
+ * Bucket ladder shared across the four layers (same R84
+ * thresholds):
+ *   workingCount === 0     → bucket 0
+ *   workingCount in [1, 2] → bucket 1
+ *   workingCount in [3, 5] → bucket 2
+ *   workingCount  >= 6     → bucket 3
+ *
+ * Idle-spoke durations per bucket: 2.8 / 2.4 / 2.0 / 1.6 seconds
+ * (R46 baseline 2.4s is bucket 1).
+ *
+ * Spokes only render in ring layout. Active spokes (carrying flow
+ * traffic) don't get the animation — they're solid bright strokes.
+ * Only idle spokes carry the .anet-topo-spoke-flow class and the
+ * --spoke-dur var. The test seeds 0 messages so all spokes are idle.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(workingCount, totalCount) {
+  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');
+      // ring layout is R145's target — it's also the default, but
+      // pinning explicitly defends against future default flips.
+      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 sessions = [];
+    for (let i = 0; i < totalCount; i++) {
+      sessions.push({
+        alias: `node${i}`,
+        status: i < workingCount ? 'working' : '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 } });
+  });
+  // 0 messages → no active spokes → every spoke is idle (.anet-topo-spoke-flow)
+  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((n) => document.querySelectorAll('g[data-node]').length === n, totalCount, { timeout: 30000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const spokes = [...document.querySelectorAll('path.anet-topo-spoke-flow')];
+    return spokes.map(p => ({
+      bucket: p.getAttribute('data-topo-spoke-bucket'),
+      dur:    p.getAttribute('data-topo-spoke-dur'),
+      // Resolved animation-duration from computed style — confirms
+      // the CSS var bridge through to the cascade.
+      cssDur: getComputedStyle(p).getPropertyValue('animation-duration').trim(),
+    }));
+  });
+  await browser.close();
+  return out;
+}
+
+// One probe per bucket
+const b0 = await probe(0, 4);  // 0 working / 4 idle  → bucket 0 (2.8s)
+const b1 = await probe(2, 4);  // 2 working / 2 idle  → bucket 1 (2.4s)
+const b2 = await probe(4, 5);  // 4 working / 1 idle  → bucket 2 (2.0s)
+const b3 = await probe(7, 8);  // 7 working / 1 idle  → bucket 3 (1.6s)
+
+const consistent = (spokes, bucket, dur) =>
+  spokes.length > 0 &&
+  spokes.every(s => s.bucket === String(bucket) && s.dur === String(dur) && s.cssDur === `${dur}s`);
+
+const results = {
+  b0_someSpokes:   b0.length > 0,
+  b0_bucket0_2_8s: consistent(b0, 0, 2.8),
+  b1_bucket1_2_4s: consistent(b1, 1, 2.4),
+  b2_bucket2_2_0s: consistent(b2, 2, 2.0),
+  b3_bucket3_1_6s: consistent(b3, 3, 1.6),
+  // dur strictly decreases as busy climbs
+  dur_monotonic:
+    Number(b0[0]?.dur) > Number(b1[0]?.dur) &&
+    Number(b1[0]?.dur) > Number(b2[0]?.dur) &&
+    Number(b2[0]?.dur) > Number(b3[0]?.dur),
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} spoke busyness:`, JSON.stringify(results),
+  `\n  b0(0w/4)=`, b0.slice(0,1),
+  `\n  b1(2w/4)=`, b1.slice(0,1),
+  `\n  b2(4w/5)=`, b2.slice(0,1),
+  `\n  b3(7w/8)=`, b3.slice(0,1));
+process.exit(ok ? 0 : 1);

package/scripts/topo-sweep-busyness-test.mjs

@@ -0,0 +1,94 @@
+/* Round 146 verification: R45 radar sweep rotation rate buckets on
+ * workingCount, completing the 5-layer busyness-driven motion family:
+ *
+ *   R84  hub grounding-halo breath  — 4 / 3.2 / 2.7 / 2.4 s
+ *   R131 outer-ring orbit period    — 16 / 14 / 12 / 10 s
+ *   R132 groupbox marching ants     — 14 / 12 / 10 / 8 s  (grid only)
+ *   R145 idle-spoke flow rate       — 2.8 / 2.4 / 2.0 / 1.6 s (ring only)
+ *   R146 radar sweep rotation       — 8 / 6 / 4 / 3 s  (both layouts)
+ *
+ * Shared R84 thresholds (0 / 1-2 / 3-5 / 6+) drive every layer. The
+ * sweep is the only layer visible in BOTH layouts and ties the family
+ * together at the canvas-wide scope.
+ *
+ * R45 baseline 6s sits at bucket 1 — preserved when workingCount in
+ * [1, 2] so existing demos and screenshots stay identical.
+ */
+import { chromium } from 'playwright';
+import { readFileSync } from 'node:fs';
+
+const TOKEN = JSON.parse(readFileSync('/home/vansin/.anet/config.json', 'utf8')).token;
+
+async function probe(workingCount, totalCount) {
+  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 sessions = [];
+    for (let i = 0; i < totalCount; i++) {
+      sessions.push({
+        alias: `node${i}`,
+        status: i < workingCount ? 'working' : '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 } });
+  });
+  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((n) => document.querySelectorAll('g[data-node]').length === n, totalCount, { timeout: 30000 });
+  await page.waitForSelector('.anet-topo-sweep', { timeout: 10000 });
+  await page.waitForTimeout(400);
+
+  const out = await page.evaluate(() => {
+    const g = document.querySelector('.anet-topo-sweep');
+    return {
+      bucket: g?.getAttribute('data-topo-sweep-bucket'),
+      dur:    g?.getAttribute('data-topo-sweep-dur'),
+      cssDur: g ? getComputedStyle(g).getPropertyValue('animation-duration').trim() : null,
+    };
+  });
+  await browser.close();
+  return out;
+}
+
+const b0 = await probe(0, 4);  // 0 working → bucket 0 (8s)
+const b1 = await probe(2, 4);  // 2 working → bucket 1 (6s, R45 baseline)
+const b2 = await probe(4, 5);  // 4 working → bucket 2 (4s)
+const b3 = await probe(7, 8);  // 7 working → bucket 3 (3s)
+
+const consistent = (probe, bucket, dur) =>
+  probe.bucket === String(bucket) && probe.dur === String(dur) && probe.cssDur === `${dur}s`;
+
+const results = {
+  b0_bucket0_8s:   consistent(b0, 0, 8),
+  b1_bucket1_6s:   consistent(b1, 1, 6),
+  b2_bucket2_4s:   consistent(b2, 2, 4),
+  b3_bucket3_3s:   consistent(b3, 3, 3),
+  // dur strictly decreases as busy climbs
+  dur_monotonic:
+    Number(b0.dur) > Number(b1.dur) &&
+    Number(b1.dur) > Number(b2.dur) &&
+    Number(b2.dur) > Number(b3.dur),
+  // R45 baseline preservation: bucket 1 still 6s
+  baseline_preserved: b1.dur === '6',
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} sweep busyness:`, JSON.stringify(results),
+  `\n  b0(0w/4)=`, b0,
+  `\n  b1(2w/4)=`, b1,
+  `\n  b2(4w/5)=`, b2,
+  `\n  b3(7w/8)=`, b3);
+process.exit(ok ? 0 : 1);