@sleep2agi/agent-network-dashboard 0.4.6-preview.21 → 0.4.6-preview.211

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-turbopack","duration":4958576,"timestamp":10057985043,"id":14,"parentId":1,"tags":{},"startTime":1778818030231,"traceId":"72771d3358f6f04a"},{"name":"turbopack-build-events","duration":100,"timestamp":10058265288,"id":15,"parentId":1,"tags":{},"startTime":1778818030512,"traceId":"72771d3358f6f04a"},{"name":"run-typescript","duration":7855591,"timestamp":10062952208,"id":16,"parentId":1,"tags":{},"startTime":1778818035198,"traceId":"72771d3358f6f04a"},{"name":"static-check","duration":683832,"timestamp":10070960290,"id":19,"parentId":1,"tags":{},"startTime":1778818043207,"traceId":"72771d3358f6f04a"},{"name":"static-generation","duration":568071,"timestamp":10071655501,"id":103,"parentId":1,"tags":{},"startTime":1778818043902,"traceId":"72771d3358f6f04a"},{"name":"telemetry-flush","duration":27667,"timestamp":10072256514,"id":112,"parentId":1,"tags":{},"startTime":1778818044503,"traceId":"72771d3358f6f04a"},{"name":"next-build","duration":14486570,"timestamp":10057797636,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778818030044,"traceId":"72771d3358f6f04a"}]
+[{"name":"run-turbopack","duration":5333636,"timestamp":76411681039,"id":14,"parentId":1,"tags":{},"startTime":1778884383927,"traceId":"00b6b6845ae8baf2"},{"name":"turbopack-build-events","duration":103,"timestamp":76411948783,"id":15,"parentId":1,"tags":{},"startTime":1778884384195,"traceId":"00b6b6845ae8baf2"},{"name":"run-typescript","duration":8190124,"timestamp":76417024544,"id":16,"parentId":1,"tags":{},"startTime":1778884389271,"traceId":"00b6b6845ae8baf2"},{"name":"static-check","duration":695975,"timestamp":76425404197,"id":19,"parentId":1,"tags":{},"startTime":1778884397650,"traceId":"00b6b6845ae8baf2"},{"name":"static-generation","duration":624792,"timestamp":76426113420,"id":105,"parentId":1,"tags":{},"startTime":1778884398360,"traceId":"00b6b6845ae8baf2"},{"name":"telemetry-flush","duration":27212,"timestamp":76426772497,"id":114,"parentId":1,"tags":{},"startTime":1778884399019,"traceId":"00b6b6845ae8baf2"},{"name":"next-build","duration":15309792,"timestamp":76411489943,"id":1,"tags":{"buildMode":"default","version":"16.2.3","bundler":"turbopack","has-custom-webpack-config":"false","use-build-worker":"true"},"startTime":1778884383736,"traceId":"00b6b6845ae8baf2"}]

package/.next/types/routes.d.ts

@@ -2,7 +2,7 @@
 // Do not edit this file manually
 
 type AppRoutes = "/" | "/admin" | "/login" | "/logs" | "/messages" | "/node" | "/nodes" | "/server-logs" | "/settings" | "/settings/networks" | "/settings/tokens" | "/tasks" | "/tasks/[id]"
-type AppRouteHandlerRoutes = "/api/anet/config" | "/api/auth/login" | "/api/auth/logout" | "/api/auth/v3" | "/api/hub/audit-log" | "/api/hub/auth" | "/api/hub/broadcast" | "/api/hub/events" | "/api/hub/health" | "/api/hub/inbox" | "/api/hub/license" | "/api/hub/messages" | "/api/hub/networks" | "/api/hub/nodes" | "/api/hub/register" | "/api/hub/send" | "/api/hub/server-logs" | "/api/hub/session" | "/api/hub/stats" | "/api/hub/status" | "/api/hub/task-events" | "/api/hub/tasks" | "/api/hub/tmux" | "/api/hub/tokens"
+type AppRouteHandlerRoutes = "/api/anet/config" | "/api/auth/login" | "/api/auth/logout" | "/api/auth/v3" | "/api/hub/audit-log" | "/api/hub/auth" | "/api/hub/broadcast" | "/api/hub/events" | "/api/hub/health" | "/api/hub/inbox" | "/api/hub/license" | "/api/hub/messages" | "/api/hub/networks" | "/api/hub/nodes" | "/api/hub/register" | "/api/hub/send" | "/api/hub/server-logs" | "/api/hub/servers" | "/api/hub/session" | "/api/hub/stats" | "/api/hub/status" | "/api/hub/task-events" | "/api/hub/tasks" | "/api/hub/tmux" | "/api/hub/tokens"
 type PageRoutes = never
 type LayoutRoutes = "/"
 type RedirectRoutes = never
@@ -30,6 +30,7 @@ interface ParamMap {
   "/api/hub/register": {}
   "/api/hub/send": {}
   "/api/hub/server-logs": {}
+  "/api/hub/servers": {}
   "/api/hub/session": {}
   "/api/hub/stats": {}
   "/api/hub/status": {}

package/.next/types/validator.ts

@@ -317,6 +317,15 @@ type RouteHandlerConfig<Route extends AppRouteHandlerRoutes = AppRouteHandlerRou
   type __Unused = __Check
 }
 
+// Validate ../../app/api/hub/servers/route.ts
+{
+  type __IsExpected<Specific extends RouteHandlerConfig<"/api/hub/servers">> = Specific
+  const handler = {} as typeof import("../../app/api/hub/servers/route.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
+
 // Validate ../../app/api/hub/session/route.ts
 {
   type __IsExpected<Specific extends RouteHandlerConfig<"/api/hub/session">> = Specific

package/app/api/hub/servers/route.ts

@@ -0,0 +1,39 @@
+import { requireDashboardAuth, getV3UserToken } from '@/app/lib/dashboard-auth';
+
+const HUB_URL = process.env.COMMHUB_URL || 'http://127.0.0.1:9200';
+
+async function hubHeaders(): Promise<Record<string, string>> {
+  const userToken = await getV3UserToken();
+  const h: Record<string, string> = {};
+  if (userToken) h['Authorization'] = `Bearer ${userToken}`;
+  return h;
+}
+
+/**
+ * Proxy: GET /api/servers from CommHub. Aggregates host telemetry across
+ * sessions and returns one card per server (hostname, ip, cpu/mem load,
+ * agent_count, status). Per issue #119; lands in v0.8.1-preview.2 of the
+ * commhub-server (通信牛). The dashboard <ServersDrawer> mounts in
+ * AppShell and refreshes every 5s when expanded.
+ */
+export async function GET() {
+  const authFailure = await requireDashboardAuth();
+  if (authFailure) return authFailure;
+
+  try {
+    const res = await fetch(`${HUB_URL}/api/servers`, {
+      headers: await hubHeaders(),
+      next: { revalidate: 0 },
+    });
+    if (!res.ok) {
+      // 404 means the upstream hub predates v0.8.1-preview.2 — surface a
+      // 'feature unavailable' shape so the drawer can render a friendly
+      // empty state instead of an angry error.
+      if (res.status === 404) return Response.json({ servers: [], unavailable: true });
+      return Response.json({ error: `hub ${res.status}` }, { status: res.status });
+    }
+    return Response.json(await res.json());
+  } catch (e: unknown) {
+    return Response.json({ error: 'hub unreachable', detail: e instanceof Error ? e.message : String(e) }, { status: 502 });
+  }
+}

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,113 @@ 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' } }));
+    } },
+  // Round 108 / Loop: pin-vendor palette actions. R88 made vendor
+  // letters clickable in the chip row, R89 added the filter pill,
+  // R90 added clear-vendor here — but PIN-vendor was missing. Three
+  // static commands for the major vendors (Anthropic / OpenAI /
+  // 书生) cover the common case; users with unusual vendors still
+  // have the chip-row click + cmdk clear path. TopoGraph's R108
+  // listener handles kind='vendor' to set the pin. The R88 stale-
+  // purge useEffect cleans up if the targeted vendor isn't actually
+  // in the fleet, so these commands are safe to invoke any time.
+  { id: 'act-pin-vendor-A', title: 'Pin topology filter: Anthropic', hint: 'highlight A vendor only', group: 'Actions',
+    icon: <NavIcon d="M4 6h16M4 12h8m-8 6h16" />,
+    perform: () => {
+      try { sessionStorage.setItem('anet-topo-pinned-vendor', 'A'); } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'vendor', value: 'A' } }));
+    } },
+  { id: 'act-pin-vendor-O', title: 'Pin topology filter: OpenAI', hint: 'highlight O vendor only', group: 'Actions',
+    icon: <NavIcon d="M4 6h16M4 12h8m-8 6h16" />,
+    perform: () => {
+      try { sessionStorage.setItem('anet-topo-pinned-vendor', 'O'); } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'vendor', value: 'O' } }));
+    } },
+  { id: 'act-pin-vendor-S', title: 'Pin topology filter: 书生', hint: 'highlight 书 vendor only', group: 'Actions',
+    icon: <NavIcon d="M4 6h16M4 12h8m-8 6h16" />,
+    perform: () => {
+      try { sessionStorage.setItem('anet-topo-pinned-vendor', '书'); } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'vendor', value: '书' } }));
+    } },
+  { id: 'act-clear-topo-pins', title: 'Clear topology filters', hint: 'release pinned status + group + vendor + edge', group: 'Actions',
+    icon: <NavIcon d="M6 18L18 6M6 6l12 12" />,
+    perform: () => {
+      try {
+        sessionStorage.removeItem('anet-topo-pinned-status');
+        sessionStorage.removeItem('anet-topo-pinned-group');
+        // Round 90 / Loop: R88 added pinnedVendor as the third filter
+        // dimension. The clear-all command must clear it too or it
+        // silently retains the vendor pin, which a user would read
+        // as a stuck filter.
+        // Round 117 / Loop: R116 added pinnedEdgeKey as the fourth pin
+        // dim — no sessionStorage (per-tab transient), but the
+        // dispatched `clear` event still needs to flip it. The
+        // TopoGraph listener handles that.
+        sessionStorage.removeItem('anet-topo-pinned-vendor');
+      } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'clear' } }));
+    } },
+  // Round 117 / Loop: granular edge-only clear, mirror of R90
+  // clear-vendor. Releases the pinnedEdgeKey without disturbing
+  // status/group/vendor pins. pinnedEdgeKey lives only in React
+  // state (no sessionStorage), so the perform is just a dispatch.
+  { id: 'act-clear-topo-edge', title: 'Clear topology edge pin', hint: 'release pinned recent-signal row only', group: 'Actions',
+    icon: <NavIcon d="M6 18L18 6M6 6l12 12" />,
+    perform: () => {
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'clear-edge' } }));
+    } },
+  // Round 90 / Loop: granular vendor-only clear. R88 added per-letter
+  // toggle and Esc-clears-all; this fills the keyboard-only middle
+  // ground (release the vendor pin without disturbing status/group).
+  // Listed only when the user types "vendor" — fuzzy match still
+  // surfaces it under broader queries like "clear".
+  { id: 'act-clear-topo-vendor', title: 'Clear topology vendor filter', hint: 'release pinned vendor only', group: 'Actions',
+    icon: <NavIcon d="M6 18L18 6M6 6l12 12" />,
+    perform: () => {
+      try { sessionStorage.removeItem('anet-topo-pinned-vendor'); } catch {}
+      window.dispatchEvent(new CustomEvent('anet:topo-pin', { detail: { kind: 'clear-vendor' } }));
+    } },
+
+  // ── Round 74 / Loop: layout + view shortcuts via the palette ──
+  // Sister to R69 pin actions. Layout toggle and fit-to-canvas already
+  // have keyboard shortcuts (l / f, per R29 R32) but users who forget
+  // the keys can search "layout" / "fit" in the palette instead.
+  // Layout: write localStorage in lockstep then broadcast — the storage
+  // write matters for SSR (init reader uses it) and the event keeps the
+  // mounted canvas in sync without a reload.
+  { id: 'act-topo-toggle-layout', title: 'Toggle topology layout', hint: 'ring ↔ grid (or press `l`)', group: 'Actions',
+    icon: <NavIcon d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z" />,
+    perform: () => {
+      window.dispatchEvent(new CustomEvent('anet:topo-layout', { detail: { kind: 'toggle' } }));
+    } },
+  { id: 'act-topo-fit', title: 'Fit topology to canvas', hint: 'auto-zoom to content (or press `f`)', group: 'Actions',
+    icon: <NavIcon d="M4 8V4h4M16 4h4v4M20 16v4h-4M8 20H4v-4" />,
+    perform: () => {
+      window.dispatchEvent(new CustomEvent('anet:topo-view', { detail: { kind: 'fit' } }));
+    } },
 ];
 
 export function CommandPalette() {

package/app/components/HelpOverlay.tsx

@@ -44,6 +44,132 @@ 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)' },
+      // Round 109 / Loop: catch up on R108 — palette gained
+      // pin-vendor commands for the three major vendors. Mirror of
+      // R69's pin-status entry; closes the symmetric gap so the
+      // palette can both pin AND clear every filter dimension.
+      { keys: ['⌘', 'K'], label: 'Pin vendor: Anthropic/OpenAI/书生 via palette → "Pin topology filter…" (R108)' },
+      // Round 118 / Loop: catch up on R116 (recent-signal row click
+      // pins the edge — the 4th pin dim, completing the hover→pin
+      // sweep) and R117 (granular Cmd+K clear-edge command).
+      { keys: ['click row'], label: 'Pin a flow filter — click a recent-signal row to lock the edge (R116)' },
+      { keys: ['⌘', 'K'], label: 'Clear edge pin only via palette → "Clear topology edge pin" (R117)' },
+      // Round 123 / Loop: catch up on R121 — the edge midpoint count
+      // badge (R100) became a click-to-pin affordance, giving the
+      // canvas side a peer to R116's row-pin. R122 made hovering the
+      // badge mirror line hover; doesn't need its own entry — it's
+      // the natural hover partner of this click gesture.
+      { keys: ['click badge'], label: 'Pin a flow filter from the canvas — click an edge midpoint count badge (R121)' },
+      // Round 134 / Loop: catch up on R133 — the recent-signal panel's
+      // "+ N more flows" truncation footer (R128) became a clickable
+      // nav to /messages. First TopoGraph affordance that reaches OUT
+      // of the canvas; every prior gesture composes back into local
+      // state. Help overlay should surface the cross-page jump so
+      // operators know the path exists. R124-R132 were all passive
+      // visuals / motion / readouts with no new gestures, so this is
+      // the only new entry since R123.
+      { keys: ['click footer'], label: 'See all flows — click "+ N more flows" in the recent-signal panel (R133)' },
+      // Round 137 / Loop: catch up on R136 — the "N active links"
+      // chip in the chip row gained a real onClick → /messages
+      // navigation (it already had cursor:pointer since R77 but the
+      // handler was missing, the cursor was lying). Pairs with R133
+      // footer-nav at a different surface: R133 lives on the canvas-
+      // side panel and only shows when flowLinks > 3; R136 lives at
+      // the chip row and triggers whenever flowLinks > 0 — a broader
+      // entry point for the same "show me the full list" jump.
+      { keys: ['click chip'], label: 'See all flows — click the "N active links" chip in the chip row (R136)' },
+      // Round 141 / Loop: catch up on R139 + R140 — the chip-row
+      // "N working" and "N online" chips finally honour the cursor:
+      // pointer they've carried since R79. Working pins
+      // pinnedStatus='working' (composes with R60 pressure-bar + R61
+      // legend rows — three surfaces, one pin); online navigates to
+      // /nodes (pinning 'idle' would misrepresent the chip, which
+      // semantically means working+idle). Two entries this round
+      // because two new gestures landed since R137's catch-up.
+      { keys: ['click chip'], label: 'Pin "working" status — click "N working" in the chip row (R139)' },
+      { keys: ['click chip'], label: 'Open the agent list — click "N online" in the chip row (R140)' },
+      // Round 153 / Loop: catch up on R151 — node <g> gained role=button
+      // + tabIndex=0 + aria-pressed + onKeyDown so keyboard-only users
+      // can Tab to a node and press Enter / Space to open the chat
+      // popover (same path as mouse click). Was the FIRST true keyboard
+      // gesture added since R141 (R142-R150 were visual / motion / hover
+      // refinements; R151 + R152 added/closed keyboard handlers — R152
+      // wired Enter on the group label which is just the keyboard parallel
+      // of the existing R63 click-group entry, so it doesn't earn a new
+      // line). The chat-open path didn't exist as a keyboard gesture
+      // before R151, so this is the discoverability entry for it.
+      { keys: ['Tab', 'Enter'], label: 'Open chat on a focused node (also Space) — keyboard parallel of click-to-chat (R151)' },
+    ],
+  },
 ];
 
 const GO_TARGETS: Record<string, string> = {

package/app/components/ServersDrawer.tsx

@@ -1,18 +1,23 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import useSWR from 'swr';
 
 /** Issue #119 — server-side panel listing the hub's hosts + CPU/RAM bars.
  *
- * Round 5 ships the UI with mock data; the real data path lands when:
- *   1. agent-node attaches a `host` payload to `report_status` (SDK马)
- *   2. CommHub exposes `GET /api/servers` aggregating it (通信牛)
- *   3. dashboard swaps the mock for a SWR fetch — the contract below
- *      matches the issue spec, so step 3 is a one-line change.
+ * 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 {
@@ -27,23 +32,20 @@ interface ServerCard {
   note?: string;
 }
 
-// Mock seed — kept close to the #119 ASCII mock so Vincent / the team can
-// eyeball the layout against the spec. Swap to a SWR fetch when the endpoint
-// is live; the shape is identical, so the only code change is the source.
-const MOCK_SERVERS: ServerCard[] = [
-  {
-    hostname: 'iZrj93pr', ip: '127.0.0.1', cpu_load_1min: 3.05, cpu_cores: 8,
-    mem_used_gb: 10.4, mem_total_gb: 61.4, agent_count: 30, status: 'online', note: '本机',
-  },
-  {
-    hostname: 'iZ0jlc8', cpu_load_1min: 0.5, cpu_cores: 4,
-    mem_used_gb: 1.2, mem_total_gb: 8, agent_count: 1, status: 'online',
-  },
-  {
-    hostname: 'elaine-Sys', cpu_load_1min: null, cpu_cores: 0,
-    mem_used_gb: null, mem_total_gb: null, agent_count: 2, status: 'offline',
-  },
-];
+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.
@@ -85,8 +87,19 @@ export function ServersDrawer() {
     return next;
   });
 
-  const servers = MOCK_SERVERS; // TODO(#119 step 3): useSWR('/api/hub/servers')
+  // 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
@@ -122,7 +135,29 @@ export function ServersDrawer() {
       </button>
 
       {open && (
-        <div className="flex-1 min-h-0 overflow-y-auto px-2 py-2 space-y-2">
+        <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;
@@ -159,9 +194,11 @@ export function ServersDrawer() {
               </div>
             );
           })}
-          <div className="pt-1 text-[9px] text-[var(--fg-dim)] font-mono text-center">
-            mock data · live when <span className="text-[var(--fg-muted)]">/api/servers</span> ships
-          </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>