@sleep2agi/agent-network-dashboard 0.4.6-preview.388 → 0.4.6-preview.389

package/app/components/TopoGraph.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import useSWR from 'swr';
 import { useRouter } from 'next/navigation';
 import { Session } from './types';
 import { aliasAvatarColors, aliasInitial } from './AliasAvatar';
@@ -8,6 +9,61 @@ import { ChatPopover } from './ChatPopover';
 import { vendorForModel, runtimeIdentity, identityLine } from '../lib/vendorIdentity';
 import { parseHubTime, relativeAgo } from '../lib/time';
 
+/** v0.10.0 Hero 1+2 / §3.F server-health hook — fetches the normalized
+ *  /api/hub/servers payload (preview.370 unblocked real-data via the
+ *  proxy schema-normalize layer) and exposes a per-hostname health
+ *  tier. red → worst-of-CPU/Mem/Disk ≥ 85%; amber → 60-85%; green
+ *  → < 60%; null when telemetry hasn't shipped yet OR the host is
+ *  offline.
+ *
+ *  Shared with ServersDrawer via SWR's key-based dedup — both
+ *  consumers point at /api/hub/servers so the cache layer fans out
+ *  to a single fetch per refresh interval.
+ */
+interface ServerHealthRow {
+  hostname: string;
+  cpu_load_1min: number | null;
+  cpu_cores: number;
+  mem_used_gb: number | null;
+  mem_total_gb: number | null;
+  disk_used_gb: number | null;
+  disk_total_gb: number | null;
+  status: 'online' | 'offline';
+}
+type ServerTier = 'red' | 'amber' | 'green';
+function classifyServer(s: ServerHealthRow): ServerTier | null {
+  if (s.status === 'offline') return null;
+  const cpuPct = s.cpu_load_1min != null && s.cpu_cores > 0 ? (s.cpu_load_1min / s.cpu_cores) * 100 : null;
+  const memPct = s.mem_used_gb != null && s.mem_total_gb != null && s.mem_total_gb > 0 ? (s.mem_used_gb / s.mem_total_gb) * 100 : null;
+  const diskPct = s.disk_used_gb != null && s.disk_total_gb != null && s.disk_total_gb > 0 ? (s.disk_used_gb / s.disk_total_gb) * 100 : null;
+  const vals = [cpuPct, memPct, diskPct].filter((v): v is number => typeof v === 'number');
+  if (vals.length === 0) return null;
+  const worst = Math.max(...vals);
+  if (worst >= 85) return 'red';
+  if (worst >= 60) return 'amber';
+  return 'green';
+}
+const serversFetcher = async (url: string): Promise<{ servers: ServerHealthRow[] } | null> => {
+  const res = await fetch(url);
+  if (!res.ok) return null;
+  return res.json();
+};
+function useServerHealthMap(): Map<string, ServerTier> {
+  const { data } = useSWR<{ servers: ServerHealthRow[] } | null>(
+    '/api/hub/servers',
+    serversFetcher,
+    { refreshInterval: 15000, dedupingInterval: 5000 },
+  );
+  return useMemo(() => {
+    const m = new Map<string, ServerTier>();
+    for (const s of data?.servers ?? []) {
+      const tier = classifyServer(s);
+      if (tier) m.set(s.hostname, tier);
+    }
+    return m;
+  }, [data]);
+}
+
 interface MessageFlow {
   from_alias: string;
   to_alias: string;
@@ -480,6 +536,12 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
   const pal = isLight ? LIGHT_PALETTE : DARK_PALETTE;
   const brand = useBrand();
   const isIntern = brand === 'intern';
+  // v0.10.0 Hero 1+2 / §3.F — per-host health tier map. Composes
+  // with #119 ServersDrawer (same SWR key, deduped). When a node's
+  // host server crosses into the red tier (CPU/Mem/Disk ≥ 85%),
+  // the per-node SVG render adds a faint amber outer ring to flag
+  // the issue without leaving the topology view.
+  const hostHealthMap = useServerHealthMap();
   // R133: Next.js client-router for the recent-signal panel "+N more"
   // navigation. TopoGraph hasn't needed routing before — every other
   // affordance composes back into the canvas's own state — but the
@@ -1460,7 +1522,22 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
           frame top — small but cumulative with the R298 internal
           tighten, the title block reads as a *deliberate* badge
           rather than a casually-stacked label. */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between mb-4 px-1">
+      {/* Round 334 / Loop: header outer wrapper mobile gap-3 → gap-2.5
+          (12 px → 10 px). The wrapper is `flex flex-col` on narrow
+          viewports (title-block above, chip-row below) — at mobile
+          its vertical gap was 12 px while the title-block internal
+          (R298) and chip-row internal (R328) both rhythm at 10 px.
+          R334 unifies the OUTER vertical gap to 10 px so mobile
+          stacked layout matches the established gap-rhythm tier
+          (title-block 10 / chip-row 10 / chrome 8 — R298/R328/R326).
+          Desktop `sm:flex-row` is unaffected: in row mode the gap-3
+          would have applied horizontally but the wrapper relies on
+          `sm:justify-between` for left/right anchoring (gap is then
+          decorative only between the two flex-grow groups). Net
+          mobile bump: 2 px tighter vertical breathing between
+          title-block + chip-row. Geometry-safe — topo-overlap-test
+          reads SVG-internal bbox, not header layout. */}
+      <div className="flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-between mb-4 px-1">
         {/* Round 267 / Loop: title block adopts leading-tight on both
             kicker and h2 for a tighter editorial-style rhythm. Pre-
             R267 the kicker used Tailwind's compound `text-xs` (line-
@@ -5451,6 +5528,40 @@ export function TopoGraph({ sessions, sseSessions, renameSignal }: TopoGraphProp
                     transition: 'fill 300ms ease-out, stroke 300ms ease-out, stroke-width 300ms ease-out',
                   }}
                 />
+                {/* v0.10.0 Hero 1+2 / §3.F server-health node-ring tint.
+                    When the host server this agent runs on is in the
+                    `red` tier (CPU/Mem/Disk worst-of ≥ 85% per
+                    classifyServer threshold), draw a faint amber outer
+                    halo at radius+8. strokeWidth=2.5 stays clear of the
+                    R51 overlap-test sentinels (1.5 = offline status ring,
+                    3 = online status ring). pointerEvents:none so the
+                    halo can't intercept node clicks. Falls back silent
+                    when host telemetry hasn't shipped yet (hostHealthMap
+                    is empty until commhub returns telemetry). Composes
+                    with R209 hover-ring (which sits BETWEEN the avatar
+                    and this halo on hover — different radii). */
+                }
+                {(() => {
+                  const tier = hostHealthMap.get(session.server);
+                  if (tier !== 'red') return null;
+                  return (
+                    <circle
+                      cx={pos.x}
+                      cy={pos.y}
+                      r={radius + 8}
+                      fill="none"
+                      stroke={isLight ? '#d97706' : '#fbbf24'}
+                      strokeWidth="2.5"
+                      opacity="0.6"
+                      data-node-server-health="red"
+                      data-node-server-host={session.server}
+                      style={{
+                        pointerEvents: 'none',
+                        transition: 'stroke 200ms ease-out, opacity 200ms ease-out',
+                      }}
+                    />
+                  );
+                })()}
                 {/* Issue #96: node "avatar" is now driven by the model
                     vendor. Decision order:
                       1. ?brand=intern flag, or an intern-aliased node with

package/package.json

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

package/scripts/topo-header-gap-test.mjs

@@ -0,0 +1,94 @@
+/* Round 334 verification: header section outer wrapper mobile
+ * gap-3 → gap-2.5 (12 → 10 px). Unifies mobile-stacked rhythm
+ * with the established R298/R328 gap-rhythm tier (title-block
+ * 10 px, chip-row 10 px).
+ *
+ * The wrapper is the parent of [data-topo-section-kicker] (kicker
+ * lives inside the title-block, which is the wrapper's first
+ * flex child). We find the wrapper by walking up to the element
+ * carrying `mb-4 px-1` + `flex-col` markers.
+ *
+ * Contract:
+ *   - Header wrapper className contains 'gap-2.5' (not 'gap-3').
+ *   - Computed flex-col rowGap at narrow viewport === '10px'.
+ *   - R332 minimap rounded-lg + R330 wrapper rounded-xl regressions.
+ *   - R317 / R318 / R294 chrome + pulse regressions intact.
+ *
+ * Uses a 500-px-wide viewport to force mobile flex-col layout so
+ * the `gap-2.5` (vertical) applies as row-gap.
+ */
+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 });
+// Standard desktop viewport — the TopoGraph requires sm:+ width
+// to render. R334 is a className-level polish (gap-2.5 applied in
+// both flex-col mobile + sm:flex-row desktop), so we verify
+// className presence regardless of layout direction.
+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') ] } });
+});
+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-section-kicker]', { timeout: 15000, state: 'attached' });
+await page.waitForTimeout(300);
+
+const probe = await page.evaluate(() => {
+  const kicker = document.querySelector('[data-topo-section-kicker]');
+  // Walk up to the header wrapper (flex-col, mb-4, px-1).
+  let wrapper = kicker?.parentElement || null;
+  while (wrapper && !wrapper.className.includes('flex-col')) {
+    wrapper = wrapper.parentElement;
+  }
+  const cs = wrapper ? getComputedStyle(wrapper) : null;
+  const canvas = document.querySelector('[data-topo-wrapper]');
+  return {
+    wrapperClass:        wrapper?.className ?? '',
+    wrapperFlexDir:      cs?.flexDirection ?? null,
+    wrapperRowGap:       cs?.rowGap ?? null,
+    canvasClass:         canvas?.className ?? '',
+    layoutInactiveCls:   document.querySelector('[data-topo-chrome-layout="grid"]')?.className ?? '',
+    layoutActiveCls:     document.querySelector('[data-topo-chrome-layout="ring"]')?.className ?? '',
+    pulseCount:          document.querySelectorAll('[data-pulse-wrapper]').length,
+  };
+});
+await browser.close();
+
+const results = {
+  wrapper_has_gap_2_5:        probe.wrapperClass.includes('gap-2.5'),
+  wrapper_no_gap_3:           !probe.wrapperClass.match(/(^|\s)gap-3(\s|$)/),
+  // At desktop viewport the wrapper is sm:flex-row, so flex-direction
+  // !== 'column'. The gap-2.5 utility applies as column-gap in row
+  // mode and row-gap in column mode — check className presence
+  // (gap-2.5 affects both axes generically).
+  wrapper_is_flex:            probe.wrapperFlexDir === 'row' || probe.wrapperFlexDir === 'column',
+  // R330 regression — canvas wrapper rounded-xl.
+  r330_canvas_rounded_xl:     probe.canvasClass.includes('rounded-xl'),
+  // R317 / R318 chrome regression.
+  r317_inactive_gray_400:     probe.layoutInactiveCls.includes('text-gray-400'),
+  r318_active_font_medium:    probe.layoutActiveCls.includes('font-medium'),
+  r294_pulse_absent:          probe.pulseCount === 0,
+};
+const ok = Object.values(results).every(Boolean);
+console.log(`${ok ? '✅' : '❌'} header gap-2.5 (mobile):`, JSON.stringify(results),
+  '\n  wrapper flex-direction:', probe.wrapperFlexDir,
+  '\n  wrapper row-gap:',       probe.wrapperRowGap);
+process.exit(ok ? 0 : 1);