Hermes Switch UI — Matrix3D Architecture

3D office canvas composition, data flow, and side panel layout

FRONTEND COMPOSITION (cyan) DATA SOURCES (emerald) R3F CANVAS · Matrix3DCanvas (@react-three/fiber + @react-three/drei) Matrix3D Office drag:orbit · scroll:zoom · space+drag:pan · dbl:focus office-room · ambient fog · green directional lighting · OrbitControls (drei) │ │ │ │ ░ ▒ ▓ █ ▓ ░ │ matrix rain bars drifting background DESK · Ops HERMES pixel sprite · Float Matrix3DSprite DESK · Intel NEO idle · RoundedBox DESK · Forge TRINITY idle · Html (drei) DESK · Watch MORPHEUS idle · pixel-art sprite active sessions → desks (alphabetical) · spillover row when sessions > desk count 1 working 3 idle 0 error Lazy-loaded · requires WebGL · OrbitControls from @react-three/drei handles mouse + touch useMatrix3DOfficeData() merges gateway agents + local roster profiles AGENT ROSTER RAIL · Matrix3DAgentCard (horizontal scroll) HERMES T1 · working ● live Matrix3DSprite NEO T2 · idle model bubble TRINITY T3 · idle tier badge · sprite · name · role model label · sessions · tasks click → opens Agent Side Panel label: "Active agents" / "Workspace roster" CONSOLE · Matrix3DConsole ALL AGENTS GATEWAY [HERMES] tool call: read_file [gateway] probe ok · mode=zero-fork [HERMES] task complete NOISE toggle · Live/Sync/Offline · 5s poll AGENT SIDE PANEL (slide-in on card click) H HERMES claude-opus-4 · T1 provider: anthropic 12 Sessions 47 Tasks T1 Tier Current Task Orchestrate mission Alpha · phase: execute Recent Activity (last 5) ▸ tool: read_file · 2m ago ▸ spawned worker-a · 4m ago ▸ task complete · 6m ago × HOOK · useMatrix3DOfficeData() agent presence + profiles merges: gateway live agents + local roster drives: desk assignments + roster cards HOOK · use-agent-positions.ts SSE chat-event-bus subscription real-time position / status updates fallback: /api/sessions polling LOG FETCHING · getLogs() /api/logs — polled every 5s file: 'agent' + file: 'gateway' TanStack Query · drives Matrix3DConsole FALLBACK · /api/sessions session polling fallback active sessions → desks (alphabetical) spillover row if sessions > desk count click card Legend green — R3F 3D scene / office canvas cyan — 2D UI surfaces / roster / console emerald — data hooks / API endpoints Matrix3DCanvas is lazy-loaded. Requires WebGL. No capability gate — renders unconditionally.

R3F Canvas Scene

  • Matrix3DCanvas — R3F + drei wrapper
  • • Desks labelled Ops, Intel, Forge, Watch
  • Float — floating capsule avatars
  • OrbitControls — mouse/touch navigation
  • RoundedBox, Html — scene elements
  • • Matrix rain bars + green fog lighting
  • Matrix3DSprite — pixel-art per-agent sprite

2D UI Surfaces

  • Matrix3DAgentCard — roster rail, horizontal scroll
  • Matrix3DConsole — log console with tab filters + NOISE toggle
  • • Agent side panel — slides in on card click
  • • Side panel: avatar, stats, current task, recent activity, profile details

Data Sources

  • useMatrix3DOfficeData() — merges gateway + local roster
  • use-agent-positions.ts — SSE chat-event-bus subscription
  • getLogs()/api/logs — polled every 5 s
  • /api/sessions — polling fallback for positions
  • • Active sessions → desks alphabetical; spillover row if overflow