8e0f24db3f
Cherry-pick the Hermes Web Console from gary-the-ai/hermes-web-console-gui. React + TypeScript frontend with Vite, Python aiohttp backend API. Components: - web_console/ — React frontend (chat, sessions, memory, settings, skills, gateway config, cron, workspace, tools, browser, insights pages) - gateway/web_console/ — Python backend API (23 endpoints, SSE event bus, 11 service modules) - gateway/platforms/api_server_ui.py — embedded browser UI for API server - gateway/platforms/api_server.py — route registration refactored into _register_routes(), web console mounted via maybe_register_web_console() - run-gui.sh / setup-gui.sh — one-command launch and setup scripts - tests/gateway/test_api_server_gui_mount.py — 4 integration tests (passing) - tests/web_console/ — 13 backend test files (51 passing) - docs/plans/ — implementation plan, API schema, frontend architecture Fix: added missing ModelContextError class and CRON_MIN_CONTEXT_TOKENS to cron/scheduler.py (pre-existing import bug). Closes #325
4.2 KiB
Hermes Web Console 🖥️✨
A highly polished, modern web dashboard for Hermes Agent. The Web Console brings the raw power of the Hermes terminal and its core configurability directly to the browser, offering broad practical parity with the CLI while introducing intuitive drag-and-drop workflows for advanced agentic operations.
✨ Features
- Live Streaming Parity: Connects directly to the core Hermes API Event Stream (
message.assistant.delta) to offer responsive typewriter streaming without delays. - Agentic IDE Sandbox: Inspect live runtime logs and tools, and spawn native
xterm.jsterminal environments inside the drawer. - Dashboard Command Center: Real-time observability dashboard streaming CPU, memory, Process, and Cron active metrics directly from the host.
- CLI Session Bridge: Seamlessly view and interact with CLI terminal sessions and memory straight from the web console.
- Offline Portable Mode: Fallback to local offline mode with graceful degradation when the backend is unreachable.
- Missions Kanban: Create, drag-and-drop, and monitor agentic missions on a comprehensive visual board.
- Workspace Integration: Mentioning files with
@directly links to your file explorer context. Rich dropzones power native vision multi-modal interactions. - PWA Support: Full manifest and service worker deployment for native standalone app-like installations across Desktop and Mobile.
- Visual Configurations: Avoid editing
config.yamlmanually. Setup complex hierarchies like drag-and-drop ordered Fallback Providers, multi-key Credential Pools, and isolated Messaging Gateways all from an organized UI. - Theme Persistence: Dark, light, or completely custom skins. Changes are natively synchronized with your overarching Hermes profile.
- Syntax Highlighting & Inline Diffs: Unified, collapsible Git-style file diffs directly inside the chat interface letting you confidently review the agent's file modifications.
- Shared Command Registry: The composer autocomplete is powered by the same slash-command registry as the Hermes CLI via
/api/gui/commands. - Command Browser: A dedicated Commands page lets you browse canonical commands, aliases, usage hints, and parity badges (
Full,Partial,CLI only). - Browser-Native Slash Flows: The chat interface now supports practical web versions of many CLI commands including
/queue,/branch,/resume,/save,/platforms,/image,/paste,/fast,/yolo,/reasoning, and/verbose.
🚀 Quick Start
The console acts as a client connected to the Hermes Local API Server.
Ensure you have your backend running:
hermes api start
Running the UI (Development)
Navigate to the web_console directory:
cd web_console
npm install
npm run dev
Navigate to http://localhost:5173 locally. Set your backend URL mapping inside the UI Settings if the API server resides on a custom port or remote network.
Building for Production
Compile the production bundle cleanly:
npm run build
The optimized static assets will populate the /dist directory automatically compatible with most static web-farm configurations or native integrations back onto the python API router.
⌘ Slash Commands in the Web Console
The web console supports a large subset of Hermes slash commands directly inside chat. Highlights include:
- Session:
/new,/retry,/undo,/branch,/resume,/queue,/save - Config:
/model,/provider,/reasoning,/verbose,/fast,/yolo - Gateway/Admin:
/platforms,/sethome,/restart,/update - Attachments:
/image,/paste
Some commands are intentionally marked Partial because browser behavior differs from terminal behavior. For the current source of truth, use the Commands page inside the app.
🛠️ Tech Stack
- React.js 18 (Vite Compiler)
- TypeScript natively integrated for safe schema bindings.
- xterm.js offering completely native ANSI terminal playback.
- react-markdown & PrismJS for syntax-focused presentation.
Part of the NousResearch / Hermes Agent Ecosystem.