@sleep2agi/agent-network-dashboard 0.4.6-preview.31 → 0.4.6-preview.310

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> = {