feat: composer-centric UI refresh + Hermes Control Center (v0.50.0, closes #242)
* Polish workspace panel behavior and app dialogs * Replace remaining emoji UI glyphs with Lucide icons * Redesign composer footer around model and context controls Move the model selector into the composer footer, replace the linear context pill with a compact circular badge plus tooltip, and remove the redundant topbar model pill. Design credit and inspiration: Theo / T3 Code. Reference implementation: https://github.com/pingdotgg/t3code/ * Remove obsolete activity bar Drop the old activity bar, keep turn-scoped state in the composer footer, and route remaining non-chat status messages through toasts. This leaves live tool cards and the message timeline as the primary progress UI, with the composer owning stop/cancel and brief turn status. * Move workspace and model switching into composer footer * Move profile switching into composer footer * Refactor Hermes control center UI * Redesign control center settings modal layout Widen the modal to 860px, simplify the tab list to icon+label rows, stretch the tab column's divider to full height, lock the panel to a fixed height so switching tabs no longer resizes the outer shell, and always open on the Conversation tab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Put session item actions in a dropdown * Use Hermes mark in sidebar control button * Reset control center section on close * Drop session-item left border indicator Remove the left-border accent used for active, CLI, and project rows — each state already has a dedicated cue (gold fill, cli badge, project dot), so the border was redundant. Fully round the row, add 2px bottom spacing between rows, and strip the matching JS/CSS overrides. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Increase session search input vertical padding Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Normalise odd pixel values across UI Snap padding, gap, and border-radius values to the 2/4/6/8/10/12 grid across composer chips, sidebar panels, cron list, settings, approval buttons, dropdowns, and inline message edit — eliminating the 7/9/11px drift that was making sibling elements feel subtly misaligned. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Add missing #btnMobileFiles button and .mobile-files-btn CSS (for mobile QA suite) The mobile layout regression suite (test_mobile_layout.py) requires: - #btnMobileFiles onclick=toggleMobileFiles() in topbar chips - .mobile-files-btn CSS rules for responsive show/hide at 640/900px breakpoints Also adds max-width guard to .profile-dropdown to prevent clipping at narrow viewports. * Improve composer footer mobile responsiveness and UX - Collapse composer chips to icon-only at <=400px viewports - Add model chip icon (CPU) so it remains tappable when labels are hidden - Show send button always (disabled state when empty, hidden during streaming) - Show context usage indicator on session load, not just after streaming - Add cancel status fallback timeout to prevent stale "Cancelling..." text - Update tests to match new send button and busy state behavior * Fix duplicate files button and broken workspace close on mobile Remove redundant #btnMobileFiles button that duplicated #btnWorkspacePanelToggle in the mobile topbar. Fix workspace panel close button calling undefined closeMobileFiles() — now calls closeWorkspacePanel(). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix model chip icon vertical alignment in composer footer Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix workspace toggle button hidden on desktop by conflicting CSS class Remove mobile-files-btn class from #btnWorkspacePanelToggle — its display:none!important rule was overriding workspace-toggle-btn visibility on non-mobile viewports. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix session actions dots button inaccessible on mobile sidebar Always show the session actions trigger on mobile (no hover state on touch devices) and restore right padding so text truncates with ellipsis before the dots icon. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix composer footer manage links not opening sidebar panel The "Manage profiles" and "Manage workspaces" links in the composer footer dropdowns called switchPanel() which only changes the active panel content but doesn't open the sidebar. Replaced with mobileSwitchPanel() which also opens the sidebar so the panel is actually visible. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Widen icon-only composer chips breakpoint from 400px to 768px Move the icon-only chip styling up into the existing max-width:768px media query so chips collapse to icon-only on tablets too, preventing composer footer overflow on mid-size screens. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix composer-left vertical scrollbar by setting overflow-y:hidden When overflow-x is set to auto, the CSS spec implicitly changes overflow-y from visible to auto, allowing a vertical scrollbar to appear from slight chip padding/border overflow. Explicitly set overflow-y:hidden to prevent this. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: resolve rebase conflicts and fix control center test assertions - Resolved 4 conflicts during rebase onto master (workspace.js, boot.js, index.html, test_sprint34.py) - Fixed test_sprint34.py: _controlSection -> _settingsSection, cc-tab -> settings-tabs (matching actual implementation) - Fixed quoting syntax error in test assertion Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: update version badge in System tab to v0.49.4 * docs: update README and CHANGELOG for v0.50.0 UI refresh, bump version badge --------- Co-authored-by: Aron Prins <pwf.aron@gmail.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Nathan Esquenazi <nesquena@gmail.com>
This commit is contained in:
nesquena-hermes
GitHub
@@ -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 <body>:
|
||||
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):
|
||||
|
||||
<aside class="sidebar"> Left panel: session list, nav tabs, model selector
|
||||
<aside class="sidebar"> Left panel: session list, nav tabs, sidebar-footer Hermes WebUI trigger
|
||||
<main class="main"> Center: topbar, messages area, approval card, composer
|
||||
<aside class="rightpanel"> Right panel: workspace file tree and file preview
|
||||
|
||||
Composer footer layout (current):
|
||||
|
||||
left cluster attach button, mic button, per-conversation model selector
|
||||
right cluster compact circular context-usage badge, send button
|
||||
|
||||
The model selector is still the authoritative control for new-session creation
|
||||
and session updates; it was moved out of the sidebar so model choice feels scoped
|
||||
to the active conversation rather than a global app setting.
|
||||
|
||||
### 5.2 Global State
|
||||
|
||||
const S = {
|
||||
@@ -410,11 +426,19 @@ Approval:
|
||||
stopApprovalPolling clearInterval
|
||||
|
||||
UI helpers:
|
||||
setStatus(t) Updates #statusText in composer footer
|
||||
setStatus(t) Fallback helper: shows a toast for non-chat status/error messages
|
||||
setComposerStatus(t) Updates the inline composer status label for turn-scoped states
|
||||
setBusy(v) Sets S.busy, disables/enables Send button, clears status on false
|
||||
showToast(msg, ms) Bottom-center fade toast (default 2800ms)
|
||||
showConfirmDialog(o) Shared in-app confirmation modal, resolves true/false
|
||||
showPromptDialog(o) Shared in-app input modal, resolves string/null
|
||||
autoResize() Auto-resize #msg textarea up to 200px
|
||||
|
||||
Dialog policy:
|
||||
Native browser confirm()/prompt() are not used in the Web UI.
|
||||
Destructive actions use showConfirmDialog(...), then a toast on success.
|
||||
Lightweight naming flows (new file/folder/project) use showPromptDialog(...).
|
||||
|
||||
Files:
|
||||
loadDir(path) GET /api/list, rebuild #fileTree
|
||||
openFile(path) GET /api/file, show in #previewArea
|
||||
@@ -467,7 +491,7 @@ Known gaps:
|
||||
- Nested lists: single regex pass, multi-level indentation not handled
|
||||
- Mixed bold+link in same line: may produce garbled output
|
||||
|
||||
### 5.5 Model Chip Label (Fixed in Sprint 1)
|
||||
### 5.5 Model Label Resolution (Fixed in Sprint 1, reused by composer selector)
|
||||
|
||||
B3 was resolved in Sprint 1. Current code uses a MODEL_LABELS dict:
|
||||
|
||||
@@ -478,10 +502,10 @@ B3 was resolved in Sprint 1. Current code uses a MODEL_LABELS dict:
|
||||
'anthropic/claude-haiku-3-5': 'Haiku 3.5', 'google/gemini-2.5-pro': 'Gemini 2.5 Pro',
|
||||
'deepseek/deepseek-chat-v3-0324': 'DeepSeek V3', 'meta-llama/llama-4-scout': 'Llama 4 Scout',
|
||||
};
|
||||
$('modelChip').textContent = MODEL_LABELS[m] || (m.split('/').pop() || 'Unknown');
|
||||
getModelLabel(m) => MODEL_LABELS[m] || (m.split('/').pop() || 'Unknown');
|
||||
|
||||
Fallback: any unlisted model shows its short ID (after the last /) rather than a wrong label.
|
||||
To add a new model: add an entry to MODEL_LABELS and add an <option> to the <select>.
|
||||
To add a new model: add an entry to MODEL_LABELS and add an <option> to the composer footer <select>.
|
||||
|
||||
### 5.6 Session Delete Rules (from skill)
|
||||
|
||||
@@ -1099,7 +1123,7 @@ The model chip label bug is now fixed. The MODEL_LABELS object in syncTopbar():
|
||||
'deepseek/deepseek-chat-v3-0324': 'DeepSeek V3',
|
||||
'meta-llama/llama-4-scout': 'Llama 4 Scout',
|
||||
};
|
||||
$('modelChip').textContent = MODEL_LABELS[m] || (m.split('/').pop() || 'Unknown');
|
||||
getModelLabel(m) => MODEL_LABELS[m] || (m.split('/').pop() || 'Unknown');
|
||||
|
||||
Fallback: splits on '/' and uses the last segment, so any unlisted model shows its
|
||||
short identifier rather than a wrong hardcoded label.
|
||||
|
||||
Reference in New Issue
Block a user