diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index d51bb1f..bc99374 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -13,14 +13,21 @@ The Hermes Web UI is a lightweight web application that gives you a browser-based interface to the Hermes agent that is functionally equivalent to the CLI. It is modeled on -the Claude-style interface: a three-panel layout with a sidebar for session management, -a central chat area, and a right panel for workspace file browsing. +the Claude-style interface: a sidebar for session management, a central chat area, +and a demand-driven right panel used for workspace browsing and preview surfaces. +The right panel is closed by default on desktop and opens only when it is actively +being used for browsing or previewing content. The design philosophy is deliberately minimal. There is no build step, no bundler, no frontend framework. The Python server is split into a routing shell (server.py) and business logic modules (api/). The frontend is seven vanilla JS modules loaded from static/. This makes the code easy to modify from a terminal or by an agent. +Hermes-level chrome is intentionally consolidated: the sidebar has no dedicated brand header. +Instead, the footer exposes a single "Hermes WebUI" launch button that opens one tabbed +control-center modal for global preferences, conversation import/export, and clear-conversation +actions. The topbar remains focused on conversation context and the workspace/files toggle. + --- ## 2. File Inventory @@ -51,7 +58,7 @@ This makes the code easy to modify from a terminal or by an agent. style.css All CSS incl. mobile responsive (~670 lines) ui.js DOM helpers, renderMd, tool cards, model dropdown, file tree (~977 lines) workspace.js File preview, file ops, loadDir, clearPreview (~185 lines) - sessions.js Session CRUD, list rendering, search, SVG icons, overlay actions (~533 lines) + sessions.js Session CRUD, list rendering, search, SVG icons, dropdown actions (~533 lines) messages.js send(), SSE event handlers, approval, transcript (~297 lines) panels.js Cron, skills, memory, workspace, profiles, todo, settings (~974 lines) commands.js Slash command registry, parser, autocomplete dropdown (~156 lines) @@ -351,7 +358,7 @@ highlighting) and Mermaid.js (diagrams) from CDN, both loaded async/deferred wit Six JS modules loaded in order at end of : 1. ui.js (~846 lines) DOM helpers, renderMd, tool card rendering, global state 2. workspace.js (~169 lines) File tree, preview, file operations - 3. sessions.js (~532 lines) Session CRUD, list rendering, search, SVG icons, overlay actions, project picker + 3. sessions.js (~532 lines) Session CRUD, list rendering, search, SVG icons, dropdown actions, project picker 4. messages.js (~293 lines) send(), SSE event handlers, approval, transcript 5. panels.js (~771 lines) Cron, skills, memory, workspace, todo, switchPanel 6. boot.js (~175 lines) Event wiring + boot IIFE @@ -362,10 +369,19 @@ inherit `currentColor` for consistent theming. Three-panel layout (in static/index.html): -