Hermes Switch UI — Operations Architecture

Three-column agent monitoring layout: Team Rail · Focus Panel · Dispatch Panel

OPERATIONS TOP BAR · OperationsTopBar page title · filter state indicator · connection status · global controls LEFT COLUMN CENTER COLUMN RIGHT COLUMN TEAM RAIL · TeamRail TeamHeader · agent count all live idle blocked HERMES claude-opus-4 · T1 orchestrator working mission: Alpha · 2 tasks active NEO claude-sonnet-4 · T2 domain head idle mission: Beta · waiting TRINITY claude-haiku-4 · T3 specialist idle no active task + New Agent filtered by teamFilter in useOperationsUIStore FOCUS PANEL · FocusPanel FOCUS HERO · FocusHero HERMES ● working claude-opus-4 · T1 orchestrator · last seen: just now agent name · status badge · identity fields FOCUS MISSION Mission Alpha phase: execute FocusMission component FOCUS ACTIVITY ▸ Spawned worker-a ▸ Completed tool: read_file FocusActivity component FOCUS TOOLS read_file · bash · edit_file tools invoked recently FocusTools component RECENT OUTPUTS output-a.md · 2.1KB output-b.json · 840B FocusRecentOutputs Auto-selects first agent when none focused. "Gateway offline · no live agents" when gateway unreachable. click DISPATCH PANEL · DispatchPanel DispatchHeader — panel title and context Dispatch Task DispatchModes — routing mode selector single broadcast round-robin DispatchComposer — task prompt input Write a task description here… e.g. "Summarise all open PRs and create a status report" DispatchMeta — metadata fields priority: normal · context: global · timeout: 60s configurable per dispatch ROUTING PREVIEW · RoutingPreview → Will dispatch to: HERMES mode: single · selected agent preview from /api/operations/dispatch.preview save draft → dispatch OUTPUTS STRIP · OutputsStrip — full width bottom OutputCard HERMES · status-report.md 2m ago · 2.4KB OutputCard NEO · analysis.json 8m ago · 880B OutputCard TRINITY · patch.diff 15m ago · 4.1KB OutputsFilters · OutputsHeader · filtered per agent or global POST /api/operations/dispatch

Team Rail (left)

  • TeamRail — container, filtered agent list
  • TeamHeader — total agent count
  • TeamFilters — all / live / idle / blocked
  • AgentCard — per-agent row, click to focus
  • NewAgentModal — register new agent
  • • Data: useOperationsAgents()

Focus Panel (center)

  • FocusHero — name, status badge, identity
  • FocusMission — current mission / task
  • FocusActivity — recent activity feed
  • FocusTools — recently invoked tools
  • FocusRecentOutputs — last outputs
  • • Data: useOperationsAgent(focusedId)

Dispatch Panel + APIs

  • DispatchComposer — task text input
  • DispatchModes — single / broadcast / round-robin
  • RoutingPreview — which agents receive task
  • GET /api/operations/agents — agent list
  • GET /api/operations/agents/$id — agent detail
  • POST /api/operations/dispatch — send task
  • GET /api/operations/dispatch.preview — routing preview