Skip to content

Frontend Guide

Jump to bottom
cvsz edited this page Sep 1, 2026 · 1 revision

🖥️ Frontend Guide

Stack

Component Technology
UI Framework React 18 (CDN UMD)
Routing React Router v6 (BrowserRouter, Routes, Route, NavLink)
3D Visualization Three.js r128 — 176-node hypergraph
Transpiler Babel Standalone 7.24.0 (JSX in browser)
Styling Custom CSS (glassmorphism, CSS variables, dark/light theme)

Pages & Routes

Route Component Features
/ OverviewPage Three.js hypergraph, live telemetry grid, Arc Reactor, daemon tick, RSI upgrade, telemetry export
/jarvis JarvisPage Multi-persona chat (JARVIS/FRIDAY/EDITH), Web Speech STT mic input, TTS voice output, SSE streaming, fullscreen mode
/subsystems SubsystemsPage 176-card filterable catalog, click-to-probe modal
/cockpit CockpitPage 6-panel quantum hardware runner (QEC, teleportation, FPGA, Apex Prime…)
/mcp MCPPage Raw JSON-RPC 2.0 console with textarea + formatted JSON response

Features

Dark / Light Theme

  • Toggle button in top-bar (☀️ / 🌙)
  • Persisted to localStorage
  • CSS class theme-light applied to document.body

Command Palette (Ctrl+K)

  • Filters routes + actions by text query
  • Arrow key navigation, Enter to execute
  • Actions: navigate, daemon tick, RSI upgrade, state mutate, clear chat

Voice I/O

  • Input: window.SpeechRecognition — mic button fills chat input
  • Output: window.SpeechSynthesis — TTS with persona pitch/rate tuning

Toast Notifications

  • ToastContext with addToast(msg, type) — auto-dismiss after 4s
  • Types: success (green) · error (red) · info (cyan)

WebSocket Live Telemetry

  • Connects to ws://localhost:8080/ws on load
  • Updates telemetry grid every 2s without polling

Clone this wiki locally