@sleep2agi/agent-network-dashboard 0.4.6-preview.10 → 0.4.6-preview.101

package/app/components/HelpOverlay.tsx

@@ -44,6 +44,77 @@ const SHORTCUTS: { group: string; items: Shortcut[] }[] = [
       { keys: ['type'], label: 'Filter — searches commands, agents, tasks' },
     ],
   },
+  // Round 25 / Loop: TopoGraph keys + mouse gestures from rounds 21-23
+  // were only surfaced in button titles. Consolidating here gives the
+  // Help overlay (the canonical discovery surface) a single place to
+  // learn the canvas controls.
+  {
+    group: 'Topology canvas',
+    items: [
+      { keys: ['+'], label: 'Zoom in (also =)' },
+      { keys: ['−'], label: 'Zoom out' },
+      { keys: ['0'], label: 'Reset zoom + pan' },
+      { keys: ['f'], label: 'Fit topology to canvas' },
+      { keys: ['l'], label: 'Toggle layout (ring ↔ grid)' },
+      { keys: ['⌘', 'wheel'], label: 'Zoom toward cursor (Ctrl on Windows/Linux)' },
+      { keys: ['drag'], label: 'Pan the canvas (cursor → grabbing)' },
+      { keys: ['dbl-click'], label: 'Reset zoom + pan (empty canvas only)' },
+      { keys: ['click'], label: 'Open chat popover on a node (Esc to close)' },
+      // Round 59 / Loop: discoverability for the interactions added in
+      // R52 (hub click), R55 (legend status hover), R56 (recent-signal
+      // row hover). All three live inside the topology canvas, so this
+      // is the right group for the new entries.
+      { keys: ['click hub'], label: 'Fit topology to canvas (R52)' },
+      { keys: ['hover legend'], label: 'Highlight nodes of a status (R55)' },
+      { keys: ['hover signal'], label: 'Highlight one flow edge (R56)' },
+      // Round 62 / Loop: R60 + R61 added click-to-pin on the pressure
+      // chip and legend rows; R62 added Esc to release the pin. Pin
+      // gives users a sticky filter (vs R55 transient hover).
+      { keys: ['click chip'], label: 'Pin a status filter (R60/R61)' },
+      { keys: ['Esc'], label: 'Clear pinned filter (R62) — or close chat' },
+      // Round 65 / Loop: R63 added group-pin via group label click; R64
+      // added active-filter pills in the chip row with per-pill ×
+      // clear. Both compose with the R62 Esc keystroke (single press
+      // clears everything pinned).
+      { keys: ['click group'], label: 'Pin a team focus (R63)' },
+      { keys: ['click ×'], label: 'Clear one filter (R64) — Esc clears all' },
+      // Round 70 / Loop: R69 added 4 Cmd+K palette actions that pin/
+      // clear topology filters from anywhere. Surface them so keyboard
+      // power users find the shortcut without spelunking the palette.
+      { keys: ['⌘', 'K'], label: 'Pin / clear filters via palette → "Pin topology filter…" (R69)' },
+      // Round 74 / Loop: palette also exposes layout + view actions —
+      // a search-friendly alternative to the `l` (R32) and `f` (R29)
+      // keyboard shortcuts for users who can't remember them.
+      { keys: ['⌘', 'K'], label: 'Toggle layout / Fit canvas via palette (R74)' },
+      // Round 78 / Loop: surface R73 (whole pill body is a click target)
+      // and R77 (active-links chip hover → boost all flow edges) —
+      // both are real user gestures that weren't in the help overlay.
+      { keys: ['click pill'], label: 'Clear filter — click anywhere on the pill body (R73)' },
+      { keys: ['hover chip'], label: 'Brighten all active flows — hover "N active links" (R77)' },
+      // Round 81 / Loop: catch up on the two newest chip-row affordances
+      // — R79 working/online chips and R80 vendor-letter chips. All
+      // four chip hovers feed the same dim mechanic the R55 legend
+      // rows use.
+      { keys: ['hover N working'], label: 'Highlight working nodes — chip-row sibling of legend (R79)' },
+      { keys: ['hover vendor'], label: 'Highlight one vendor — hover A/O/书/? in the chip row (R80)' },
+      // Round 87 / Loop: catch up on the two newest hover-preview
+      // gestures that close click-only gaps from earlier rounds.
+      // R83 added preview-before-pin on the pressure-bar segments;
+      // R86 did the same for group labels. Both compose with their
+      // existing click-pin (R60 / R63) — hover transient, click
+      // sticky, Esc clears (R62).
+      { keys: ['hover seg'], label: 'Preview a status filter — hover a pressure-bar segment (R83)' },
+      { keys: ['hover group'], label: 'Preview a team focus — hover a group label (R86)' },
+      // Round 91 / Loop: catch up on vendor pin (R88) and granular
+      // Cmd+K vendor-clear (R90). Vendor was the last filter
+      // dimension without a sticky pin; the click-to-pin gesture
+      // and palette clear command both deserve discovery entries.
+      // R89's third "filter:" pill is already covered by the
+      // generic "click pill" (R73) and "click ×" (R64) entries.
+      { keys: ['click vendor'], label: 'Pin a vendor filter — click A/O/书/? in the chip row (R88)' },
+      { keys: ['⌘', 'K'], label: 'Clear vendor pin only via palette → "Clear topology vendor filter" (R90)' },
+    ],
+  },
 ];
 
 const GO_TARGETS: Record<string, string> = {

package/app/components/ServersDrawer.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import useSWR from 'swr';
+
+/** Issue #119 — server-side panel listing the hub's hosts + CPU/RAM bars.
+ *
+ * Steps 1+2 (SDK马 host telemetry + CommHub aggregation) shipped with
+ * commhub-server v0.8.1-preview.2. Step 3 (this file, Round 20 of the
+ * dashboard /loop) swaps the original mock seed for a SWR fetch of
+ * `/api/hub/servers` (which proxies to the hub's `/api/servers`).
+ *
+ * Collapsed by default to a thin vertical icon strip so it never competes
+ * with the topology graph for horizontal real-estate. State persists to
+ * localStorage just like the other dashboard drawers.
+ *
+ * Backward-compat: if the upstream hub predates v0.8.1-preview.2 the
+ * proxy returns `{ servers: [], unavailable: true }`. The drawer
+ * surfaces a friendly "not yet available" hint instead of an empty list,
+ * so old hubs don't read as "something broke".
+ */
+
+interface ServerCard {
+  hostname: string;
+  ip?: string | null;
+  cpu_load_1min: number | null;
+  cpu_cores: number;
+  mem_used_gb: number | null;
+  mem_total_gb: number | null;
+  agent_count: number;
+  status: 'online' | 'offline';
+  note?: string;
+}
+
+interface ServersResponse {
+  servers: ServerCard[];
+  unavailable?: boolean;
+}
+
+const fetcher = async (url: string): Promise<ServersResponse> => {
+  const res = await fetch(url);
+  if (res.status === 401) {
+    if (typeof window !== 'undefined') window.location.assign('/login');
+    throw new Error('unauthorized');
+  }
+  if (!res.ok) throw new Error(`hub ${res.status}`);
+  return res.json();
+};
+
+// Bar tint by usage — green ≤60%, amber 60–85%, red >85%. Keeps the eye
+// going to whichever box is actually about to tip over.
+function barTint(pct: number) {
+  if (pct >= 85) return { fill: '#ef4444', track: 'rgb(239 68 68 / 0.16)' };
+  if (pct >= 60) return { fill: '#f59e0b', track: 'rgb(245 158 11 / 0.16)' };
+  return { fill: '#10b981', track: 'rgb(16 185 129 / 0.16)' };
+}
+
+function Bar({ pct, label }: { pct: number; label: string }) {
+  const t = barTint(pct);
+  const clamped = Math.max(0, Math.min(100, pct));
+  return (
+    <div className="space-y-0.5">
+      <div className="flex justify-between text-[10px] text-[var(--fg-muted)] font-mono">
+        <span>{label}</span>
+        <span className="tabular-nums">{Math.round(clamped)}%</span>
+      </div>
+      <div className="h-1.5 rounded-full overflow-hidden" style={{ background: t.track }}>
+        <div
+          className="h-full transition-[width] duration-300 ease-out"
+          style={{ width: `${clamped}%`, background: t.fill }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function ServersDrawer() {
+  const [open, setOpen] = useState(false);
+  // Drawer state is per-user-machine — persist like the other dashboard
+  // sticky toggles (`anet-topo-layout`, `anet-topo-view`, etc.).
+  useEffect(() => {
+    try { if (localStorage.getItem('anet-servers-drawer') === '1') setOpen(true); } catch {}
+  }, []);
+  const toggle = () => setOpen(prev => {
+    const next = !prev;
+    try { localStorage.setItem('anet-servers-drawer', next ? '1' : '0'); } catch {}
+    return next;
+  });
+
+  // Round 20 / #119 step 3 final delivery — real SWR fetch. 5s refresh
+  // matches the other live drawers (HealthBanner, Sidebar) so an operator
+  // sees host telemetry update in roughly the same beat as session state.
+  // Only poll while expanded — collapsed icon strip doesn't need fresh data.
+  const { data, error } = useSWR<ServersResponse>(
+    open ? '/api/hub/servers' : null,
+    fetcher,
+    { refreshInterval: 5000, dedupingInterval: 3000 },
+  );
+  const servers = data?.servers ?? [];
+  const unavailable = data?.unavailable === true;
+  const onlineCount = servers.filter(s => s.status === 'online').length;
+  const loading = open && !data && !error;
+
+  return (
+    <aside
+      className="fixed right-0 top-20 z-40 hidden lg:flex flex-col rounded-l-xl border border-r-0 shadow-xl shadow-black/30 anet-fade-in"
+      style={{
+        background: 'var(--bg-secondary)',
+        borderColor: 'var(--border)',
+        width: open ? 296 : 40,
+        maxHeight: 'calc(100vh - 6rem)',
+        transition: 'width 200ms ease-out',
+      }}
+      aria-label="Servers panel"
+    >
+      <button
+        onClick={toggle}
+        aria-expanded={open}
+        aria-label={open ? 'Collapse servers panel' : 'Expand servers panel'}
+        className="flex items-center gap-2 px-2.5 py-2 border-b text-[11px] font-semibold tracking-wide select-none"
+        style={{ color: 'var(--fg)', borderColor: 'var(--border)' }}
+      >
+        <svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="3" y="4" width="18" height="6" rx="1.5" />
+          <rect x="3" y="14" width="18" height="6" rx="1.5" />
+          <circle cx="7" cy="7" r="0.7" fill="currentColor" />
+          <circle cx="7" cy="17" r="0.7" fill="currentColor" />
+        </svg>
+        {open && (
+          <>
+            <span className="flex-1 text-left">Servers</span>
+            <span className="text-[10px] text-[var(--fg-muted)] font-mono">{onlineCount}/{servers.length}</span>
+          </>
+        )}
+      </button>
+
+      {open && (
+        <div className="flex-1 min-h-0 overflow-y-auto px-2 py-2 space-y-2" data-servers-body>
+          {loading && (
+            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
+              loading servers…
+            </div>
+          )}
+          {error && !data && (
+            <div className="rounded-md border px-2.5 py-2 text-[10px] font-mono"
+              style={{ background: 'rgb(239 68 68 / 0.06)', borderColor: 'rgb(239 68 68 / 0.25)', color: '#ef4444' }}>
+              hub unreachable · retrying every 5s
+            </div>
+          )}
+          {unavailable && (
+            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-3 leading-relaxed">
+              host telemetry not available<br/>
+              <span className="text-[var(--fg-dim)]">upgrade commhub-server ≥ 0.8.1-preview.2</span>
+            </div>
+          )}
+          {!loading && !error && !unavailable && servers.length === 0 && (
+            <div className="text-[10px] text-[var(--fg-muted)] font-mono text-center py-4">
+              no servers reporting yet
+            </div>
+          )}
+          {servers.map(s => {
+            const offline = s.status === 'offline';
+            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;
+            return (
+              <div
+                key={s.hostname}
+                className="rounded-lg border px-2.5 py-2 space-y-1.5"
+                style={{
+                  background: 'var(--bg)',
+                  borderColor: 'var(--border)',
+                  opacity: offline ? 0.55 : 1,
+                }}
+                title={s.ip ? `${s.hostname} · ${s.ip}` : s.hostname}
+              >
+                <div className="flex items-baseline justify-between gap-2">
+                  <div className="min-w-0 flex items-baseline gap-1.5">
+                    <span className="font-mono text-[12px] font-semibold truncate" style={{ color: 'var(--fg)' }}>{s.hostname}</span>
+                    {s.note && <span className="text-[9px] text-[var(--fg-dim)]">({s.note})</span>}
+                  </div>
+                  <span className="text-[10px] text-[var(--fg-muted)] font-mono tabular-nums shrink-0">
+                    {s.agent_count}&nbsp;agent{s.agent_count === 1 ? '' : 's'}
+                  </span>
+                </div>
+                {!offline && cpuPct != null && (
+                  <Bar pct={cpuPct} label={`CPU ${s.cpu_load_1min!.toFixed(2)}/${s.cpu_cores}`} />
+                )}
+                {!offline && memPct != null && (
+                  <Bar pct={memPct} label={`RAM ${s.mem_used_gb!.toFixed(1)}/${s.mem_total_gb!.toFixed(1)}G`} />
+                )}
+                {offline && (
+                  <div className="text-[10px] text-[var(--fg-dim)] font-mono italic">CPU n/a · RAM n/a · offline</div>
+                )}
+              </div>
+            );
+          })}
+          {servers.length > 0 && (
+            <div className="pt-1 text-[9px] text-[var(--fg-dim)] font-mono text-center">
+              live · refreshing every 5s
+            </div>
+          )}
+        </div>
+      )}
+    </aside>
+  );
+}