@sleep2agi/agent-network-dashboard 0.4.6-preview.8 → 0.4.6-preview.80

package/app/components/ChatPopover.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AliasAvatar } from './AliasAvatar';
 import { TaskChatPanel } from './TaskChatPanel';
+import { useSessions } from '../lib/hooks';
+import { relativeAgo } from '../lib/time';
 
 interface ChatPopoverProps {
   /** Node alias to chat with. Changing it switches the conversation. */
@@ -37,6 +39,16 @@ const MOBILE_BP = 640;
  * history are already solved there; this component only adds the floating
  * shell + drag/resize behaviour.
  */
+/** Round 37 / Loop: surface node metadata (cwd + last-seen) inside the
+ *  ChatPopover header. The SVG <title> tooltip (Rounds 33-34) only shows
+ *  on hover-over-node, which is lost once the popover is open and
+ *  potentially dragged away. Lifting cwd and last-seen into the popover
+ *  header keeps the context where the user actually needs it.
+ *
+ *  Round 38: relativeAgo factored to app/lib/time.ts so this file shares
+ *  the same TZ-safe parser as TopoGraph (was a duplicated mirror until
+ *  this round). */
+
 export function ChatPopover({ alias, onClose }: ChatPopoverProps) {
   // Position + size are resolved on mount (SSR-safe defaults here).
   const [pos, setPos] = useState({ x: 0, y: 0 });
@@ -48,6 +60,13 @@ export function ChatPopover({ alias, onClose }: ChatPopoverProps) {
     active: false, startX: 0, startY: 0, baseW: 0, baseH: 0,
   });
 
+  // Round 37 / Loop: pull the target session out of the SWR cache that
+  // TopoGraph already populates — same URL, so no extra network fetch.
+  const { sessions } = useSessions();
+  const session = useMemo(() => sessions.find(s => s.alias === alias), [sessions, alias]);
+  const isOnline = !!session && session.status !== 'offline';
+  const lastSeenLine = !isOnline ? relativeAgo(session?.last_seen_at) : null;
+
   const clamp = useCallback((x: number, y: number, w: number, h: number) => {
     const maxX = Math.max(MARGIN, window.innerWidth - w - MARGIN);
     const maxY = Math.max(MARGIN, window.innerHeight - h - MARGIN);
@@ -146,7 +165,24 @@ export function ChatPopover({ alias, onClose }: ChatPopoverProps) {
           <AliasAvatar alias={alias} size={28} />
           <div className="min-w-0">
             <div className="text-sm font-semibold text-[var(--fg)] truncate">{alias}</div>
-            <div className="text-[10px] text-[var(--fg-muted)]">Drag to move · Esc to close</div>
+            {/* Round 37: cwd / last-seen lines surface the same metadata
+                the SVG <title> tooltip carries (rounds 33-34), but inside
+                the popover where it stays accessible after dragging the
+                window away from the node. Fall back to the drag-hint
+                when no metadata is reported. */}
+            {session?.project_dir ? (
+              <div className="text-[10px] text-[var(--fg-muted)] truncate font-mono" title={session.project_dir} data-popover-cwd>
+                cwd: {session.project_dir}
+              </div>
+            ) : null}
+            {lastSeenLine ? (
+              <div className="text-[10px] text-[var(--fg-muted)] truncate" data-popover-lastseen>
+                last seen: {lastSeenLine}
+              </div>
+            ) : null}
+            {!session?.project_dir && !lastSeenLine ? (
+              <div className="text-[10px] text-[var(--fg-muted)]">Drag to move · Esc to close</div>
+            ) : null}
           </div>
         </div>
         <button

package/app/components/CommandPalette.tsx

@@ -159,6 +159,39 @@ const COMMANDS: Command[] = [
       // Dispatch synthetic `?` keydown so HelpOverlay's global listener opens
       window.dispatchEvent(new KeyboardEvent('keydown', { key: '?' }));
     } },
+
+  // ── Round 69 / Loop: topology filter actions ────────────────
+  // Write the pin directly into sessionStorage (the same key R66
+  // hydrates from) and broadcast a `storage`-like custom event
+  // so TopoGraph picks it up without a reload. Keyboard-accessible
+  // filter trigger from anywhere on the dashboard.
+  { id: 'act-pin-working', title: 'Pin topology filter: working', hint: 'highlight working nodes only', group: 'Actions',
+    icon: <NavIcon d="M4 6h16M4 12h8m-8 6h16" />,
+    perform: () => {
+      try { sessionStorage.setItem('anet-topo-pinned-status', 'working'); } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'working' } }));
+    } },
+  { id: 'act-pin-idle', title: 'Pin topology filter: idle', hint: 'highlight idle (online) nodes only', group: 'Actions',
+    icon: <NavIcon d="M4 6h16M4 12h8m-8 6h16" />,
+    perform: () => {
+      try { sessionStorage.setItem('anet-topo-pinned-status', 'idle'); } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'idle' } }));
+    } },
+  { id: 'act-pin-offline', title: 'Pin topology filter: offline', hint: 'highlight offline / no-SSE nodes', group: 'Actions',
+    icon: <NavIcon d="M4 6h16M4 12h8m-8 6h16" />,
+    perform: () => {
+      try { sessionStorage.setItem('anet-topo-pinned-status', 'offline'); } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'status', value: 'offline' } }));
+    } },
+  { id: 'act-clear-topo-pins', title: 'Clear topology filters', hint: 'release pinned status + group', group: 'Actions',
+    icon: <NavIcon d="M6 18L18 6M6 6l12 12" />,
+    perform: () => {
+      try {
+        sessionStorage.removeItem('anet-topo-pinned-status');
+        sessionStorage.removeItem('anet-topo-pinned-group');
+      } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'clear' } }));
+    } },
 ];
 
 export function CommandPalette() {

package/app/components/HelpOverlay.tsx

@@ -44,6 +44,46 @@ 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)' },
+    ],
+  },
 ];
 
 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>
+  );
+}