fix: onboarding completes gracefully for pre-configured providers (closes #322) (#323)

OAuth/CLI-configured providers (openai-codex, copilot, nous) no longer blocked by onboarding wizard. 5 new tests, 758 total.

.github/workflows/tests.yml

@@ -0,0 +1,30 @@
+name: Tests
+
+on:
+  pull_request:
+    branches: [master]
+  push:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ['3.11', '3.12', '3.13']
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ matrix.python-version }}
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install pyyaml>=6.0 pytest pytest-timeout
+
+      - name: Run tests
+        run: pytest tests/ -v --timeout=60

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
@@ -28,7 +35,8 @@ This makes the code easy to modify from a terminal or by an agent.
     <repo>/
     server.py              Thin routing shell + HTTP Handler + auth middleware. ~81 lines.
                            Delegates all route handling to api/routes.py.
-    start.sh               Discovery script: finds agent dir, Python, starts server.
+    bootstrap.py           One-shot launcher: optional agent install, deps, health wait, browser open.
+    start.sh               Thin wrapper around bootstrap.py for shell-based startup.
     Dockerfile             python:3.12-slim container image (~23 lines)
     docker-compose.yml     Compose config with named volume and optional auth (~22 lines)
     .dockerignore          Excludes .git, tests/, .env* from Docker builds
@@ -39,6 +47,7 @@ This makes the code easy to modify from a terminal or by an agent.
       helpers.py           HTTP helpers: j(), bad(), require(), safe_resolve(), security headers (~71 lines)
       models.py            Session model + CRUD, per-session profile tracking (~137 lines)
       profiles.py          Profile state management, hermes_cli wrapper (~246 lines)
+      onboarding.py        First-run onboarding status, real provider config writes, and readiness detection.
       routes.py            All GET + POST route handlers (~1180 lines)
       startup.py           Startup helpers: auto_install_agent_deps() (~50 lines)
       streaming.py         SSE engine, run_agent, cancel, HERMES_HOME save/restore (~236 lines)
@@ -49,10 +58,11 @@ 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)
+      onboarding.js        First-run wizard overlay, provider setup flow, and settings/workspace orchestration.
       boot.js              Event wiring, mobile nav, voice input, boot IIFE (~338 lines)
     tests/
       conftest.py          Isolated test server (port 8788, separate HERMES_HOME) (~240 lines)
@@ -348,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
@@ -359,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 = {
@@ -407,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
@@ -464,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:
 
@@ -475,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)
 
@@ -1096,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.

CHANGELOG.md

@@ -6,6 +6,89 @@
 ---
 
 
+## [v0.50.3] Onboarding completes gracefully for pre-configured providers (PR #323, fixes #322)
+
+- **OAuth/CLI-configured providers no longer blocked by onboarding** (closes #322): Users with providers already set up via the CLI (`openai-codex`, `copilot`, `nous`, etc.) hit `Unsupported provider for WebUI onboarding` when clicking "Open Hermes" on the finish page. The wizard now marks onboarding complete and lets them through — the agent setup is already done, no wizard steps needed.
+  - 5 new tests in `tests/test_sprint34.py`; 758 tests total (up from 753)
+
+## [v0.50.2] Workspace panel state persists across refreshes
+
+- **Workspace panel open/closed persists** (localStorage key `hermes-webui-workspace-panel`): Once you open the workspace/files pane, it stays open after a page refresh. Closing it explicitly saves the closed state, which also survives a refresh. The restore happens in the boot sequence before the first render, so there is no flash of the wrong state. Works for both desktop and mobile.
+  - State is stored as `'open'` or `'closed'` — `'open'` restores as `'browse'` mode; any preview state is re-evaluated normally.
+  - 7 new tests in `tests/test_sprint37.py`; 753 tests total (up from 746)
+
+## [v0.50.1] Mobile Enter key inserts newline (PR #315, fixes #269)
+
+- **Enter inserts newline on mobile** (closes #269): On touch-primary devices (detected via `matchMedia('(pointer:coarse)')`), the Enter key now inserts a newline instead of sending. Users send via the Send button, which is always visible on mobile. Desktop behavior is unchanged — Enter sends, Shift+Enter inserts a newline.
+  - The `ctrl+enter` setting continues to work as before on all devices.
+  - Users who explicitly set send key to `enter` on mobile can override in Settings.
+  - 4 new tests in `tests/test_mobile_layout.py`; 746 tests total (up from 742)
+
+## [v0.50.0] Composer-centric UI refresh + Hermes Control Center (PR #242)
+
+Major UI overhaul by **[@aronprins](https://github.com/aronprins)** — the biggest single contribution to the project. Rebased and reviewed on `pr-242-review`.
+
+- **Composer as control hub** — model selector, profile chip, and workspace chip now live in the composer footer as pill buttons with dropdowns. The context window usage ring (token count, cost, fill) replaces the old linear pill.
+- **Hermes Control Center** — a single sidebar launcher button (bottom of sidebar) replaces the gear icon settings modal. Tabbed 860px modal: Conversation tab (transcript/JSON export, import, clear), Preferences tab (all settings), System tab (version, password). Always resets to Conversation on close.
+- **Activity bar removed** — turn-scoped status (thinking, cancelling) renders inline in the composer footer via `setComposerStatus`.
+- **Session `⋯` dropdown** — per-row pin/archive/duplicate/move/delete actions move from inline buttons into a shared dropdown menu; click-outside/scroll/Escape handling.
+- **Workspace panel state machine** — `_workspacePanelMode` (`closed`/`browse`/`preview`) in boot.js with proper transitions and discard-unsaved guard.
+- **Icon additions** — save, chevron-right, arrow-right, pause, paperclip, copy, rotate-ccw, user added to icons.js.
+- **i18n additions** — 6 new keys across en/de/zh/zh-Hant for control center sections.
+- **OLED theme** — 7th built-in theme (true black background for OLED displays), originally contributed by **[@kevin-ho](https://github.com/kevin-ho)** in PR #168.
+- **Mobile fixes** — icon-only composer chips below 640px, `overflow-y: hidden` on `.composer-left` to prevent scrollbar, profile dropdown `max-width: min(260px, calc(100vw - 32px))`.
+- 742 tests total; all existing tests pass; version badge in System tab updated to v0.50.0.
+
+## [v0.49.4] Cancel stream cleanup guaranteed (PR #309, fixes #299)
+
+- **Reliable cancel cleanup** (closes #299): `cancelStream()` no longer depends on the SSE `cancel` event to clear busy state and status text. Previously, if the SSE connection was already closed when cancel fired, "Cancelling..." would linger indefinitely. Now `cancelStream()` clears `S.activeStreamId`, calls `setBusy(false)`, `setStatus('')`, and hides the cancel button directly after the cancel API request — regardless of SSE connection state. The SSE cancel handler still runs when the connection is alive (all operations are idempotent).
+  - 9 new tests in `tests/test_sprint36.py`; 742 tests total (up from 733)
+
+## [v0.49.3] Session title guard + breadcrumb nav + wider panel (PRs #301, #302)
+
+- **Preserve user-renamed session titles** (PR #301 by **[@franksong2702](https://github.com/franksong2702)** / closes #300): `title_from()` now only runs when the session title is still `'Untitled'`. Previously it overwrote user-assigned titles on every conversation turn.
+  - Fixed in both `api/streaming.py` (streaming path) and `api/routes.py` (sync path).
+- **Clickable breadcrumb navigation** (PR #302 by **[@franksong2702](https://github.com/franksong2702)** / closes #292): Workspace file preview now shows a clickable breadcrumb path bar. Each segment navigates directly to that directory level. Paths with spaces and special characters handled correctly. `clearPreview()` restores the directory breadcrumb on close.
+- **Wider right panel** (PR #302): `PANEL_MAX` raised from 500 to 1200 — right panel can now be dragged wider on ultrawide screens.
+- **Responsive message width** (PR #302): `.messages-inner` now scales up gracefully at 1400px (1100px max) and 1800px (1200px max) viewport widths instead of capping at 800px on all screen sizes.
+  - 12 new tests in `tests/test_sprint35.py`; 733 tests total (up from 721)
+
+## [v0.49.2] OAuth provider support in onboarding (issues #303, #304)
+
+- **OAuth provider bypass** (closes #303, #304): The first-run onboarding wizard now correctly recognizes OAuth-authenticated providers (GitHub Copilot, OpenAI Codex, Nous Portal, Qwen OAuth) as ready, instead of always demanding an API key.
+  - New `_provider_oauth_authenticated()` helper in `api/onboarding.py` checks `hermes_cli.auth.get_auth_status()` first (authoritative), then falls back to parsing `~/.hermes/auth.json` directly for the known OAuth provider IDs (`openai-codex`, `copilot`, `copilot-acp`, `qwen-oauth`, `nous`).
+  - `_status_from_runtime()` now has an `else` branch for providers not in `_SUPPORTED_PROVIDER_SETUPS`; OAuth-authenticated providers return `provider_ready=True` and `setup_state="ready"`.
+  - The `provider_incomplete` status note no longer says "API key" for OAuth providers — it now says "Run 'hermes auth' or 'hermes model' in a terminal to complete setup."
+  - 21 new tests in `tests/test_sprint34.py`; 721 tests total (up from 700)
+
+## [v0.49.1] Docker docs + mobile Profiles button (PRs #291, #265)
+
+- **Two-container Docker setup** (PR #291 / closes #288): New `docker-compose.two-container.yml` for running the Hermes Agent and WebUI as separate containers with shared volumes. Documents the architecture clearly; localhost-only port binding by default.
+- **Mobile Profiles button** (PR #265 by **[@Bobby9228](https://github.com/Bobby9228)**): Adds Profiles to the mobile bottom navigation bar (last position: Chat → Tasks → Skills → Memory → Spaces → Profiles). Uses `mobileSwitchPanel()` for correct active-highlight behaviour; `data-panel="profiles"` attribute set; SVG matches other nav icons; 3 new tests.
+  - 700 tests total (up from 697)
+
+## [v0.49.0] First-run onboarding wizard + self-update hardening (PRs #285, #287, #289)
+
+- **One-shot bootstrap and first-run setup wizard** (PR #285 — first-run onboarding flow): New users are greeted with a guided onboarding overlay on first load. The wizard checks system status, configures a provider (OpenRouter, Anthropic, OpenAI, or custom OpenAI-compatible endpoint), sets a workspace and optional password, and marks setup as complete — all without leaving the browser.
+  - `bootstrap.py`: one-shot CLI bootstrap that writes `~/.hermes/config.yaml` and `~/.hermes/.env` from flags; idempotent and safe to re-run
+  - `api/routes.py`: `/api/onboarding/status` (GET) and `/api/onboarding/complete` (POST) endpoints; real provider config persistence to `config.yaml` + `.env`
+  - `static/onboarding.js`: full wizard JS module — step navigation, provider dropdown, model selector, API key input, Back/Continue flow, i18n support
+  - `static/index.html`: onboarding overlay HTML shell + `<script src="/static/onboarding.js">` load
+  - `static/i18n.js`: 40+ onboarding keys added to all 5 locales (en, es, de, zh-Hans, zh-Hant)
+  - `static/boot.js`: on load, fetches `/api/onboarding/status` and opens wizard when `completed=false`
+  - Wizard does NOT show when `onboarding_completed=true` in settings
+  - 14 new tests in `tests/test_onboarding.py`; 693 tests total (up from 679)
+
+- **Self-update git pull diagnostics** (PR #287): Fixes multiple failure modes in the WebUI self-update flow when the repo has a non-trivial git state.
+  - `_run_git()` now returns stderr on failure (stdout fallback, then exit-code message) — users see actionable git errors instead of empty strings
+  - New `_split_remote_ref()` helper splits `origin/master` into `('origin', 'master')` before `git pull --ff-only` — fixes silent failures where git misinterpreted the combined string as a repository name
+  - `--untracked-files=no` added to `git status --porcelain` — prevents spurious stash failures in repos with untracked files
+  - Early merge-conflict detection via porcelain status codes before attempting pull
+  - 4 new unit tests in `tests/test_updates.py`
+
+- **Skip flaky redaction test in agent-less environments** (PR #289): `test_api_sessions_list_redacts_titles` added to the CI skip list for environments without hermes-agent installed. Test still runs with the full agent; security coverage preserved by 6 pure-unit tests and 2 other API-level redaction tests.
+  - 697 tests total (up from 693)
+
 ## [v0.48.2] Provider/model mismatch warning (PR #283, fixes #266)
 
 - **Provider mismatch warning** (PR #283): WebUI now warns when you select a model from a provider different from the one Hermes is configured for, instead of silently failing with a 401 error.
@@ -135,10 +218,10 @@
 ## [v0.42.0] — 2026-04-10
 
 ### Features
-- **German translation** (PR #190 by @DavidSchuchert): Complete `de` locale covering all UI strings — settings, commands, sidebar, approval cards. Also extends the i18n system with `data-i18n-title` and `data-i18n-placeholder` attribute support so tooltip text and input placeholders are now translatable. German speech recognition uses `de-DE`.
+- **German translation** (PR #190 by **[@DavidSchuchert](https://github.com/DavidSchuchert)**): Complete `de` locale covering all UI strings — settings, commands, sidebar, approval cards. Also extends the i18n system with `data-i18n-title` and `data-i18n-placeholder` attribute support so tooltip text and input placeholders are now translatable. German speech recognition uses `de-DE`.
 
 ### Bug Fixes
-- **Custom slash-model routing** (PR #189 by @smurmann): Model IDs like `google/gemma-4-26b-a4b` from custom providers (LM Studio, Ollama) were silently misrouted to OpenRouter because of the slash-heuristic. Custom providers now win: entries in `config.yaml → custom_providers` are checked first, so their model IDs route to the correct local endpoint regardless of format.
+- **Custom slash-model routing** (PR #189 by **[@smurmann](https://github.com/smurmann)**): Model IDs like `google/gemma-4-26b-a4b` from custom providers (LM Studio, Ollama) were silently misrouted to OpenRouter because of the slash-heuristic. Custom providers now win: entries in `config.yaml → custom_providers` are checked first, so their model IDs route to the correct local endpoint regardless of format.
 - **Phantom Custom group in model picker** (PR #191 by @mbac): When `model.provider` was a named provider (e.g. `openai-codex`) and `model.base_url` was set, `hermes_cli` reported `'custom'` as authenticated, producing a duplicate "Custom" group in the dropdown. The real provider's group was missing the configured default model. Fixed by discarding the phantom `custom` entry when a real named provider is active.
 - **Hyphen/space model group injection** (PR #191): The "ensure default_model appears" post-pass used `active_provider.lower() in group_name.lower()`, which fails for `openai-codex` vs display name `OpenAI Codex` (hyphen vs space). Now uses `_PROVIDER_DISPLAY` for exact display-name matching.
 
@@ -229,7 +312,7 @@
   notification when the tab is in the background.
 - **Thinking / reasoning block display** (PR #181, #182): Inline `<think>…</think>`
   and Gemma 4 `<|channel>thought…<channel|>` tags are parsed out of assistant
-  messages and rendered as a collapsible 💡 "Thinking" card above the reply.
+  messages and rendered as a collapsible lightbulb "Thinking" card above the reply.
   During streaming, the bubble shows "Thinking…" until the tag closes. Hardened
   against partial-tag edge cases and empty thinking blocks.
 
@@ -637,7 +720,7 @@
   command. Persists server-side across refreshes.
 
 - **Subagent delegation cards.** `subagent_progress` events now render with
-  a 🔀 icon and a blue indented left border to visually distinguish child
+  a shuffle icon and a blue indented left border to visually distinguish child
   tool activity from parent tool calls. `delegate_task` cards display as
   "Delegate task" with cleaner formatting.
 
@@ -1433,9 +1516,9 @@ The sprint that closed the last gaps for heavy agentic use.
   restored from session history on reload. Shows tool name, preview, args, result snippet.
 - **Attachment metadata persists on reload.** File badges on user messages survive page
   refresh. Server stores filenames on the user message in session JSON.
-- **Todo list panel.** New checkmark tab in the sidebar. Shows current task list parsed
-  from the most recent todo tool result in message history. Status icons: pending (○),
-  in-progress (◉), completed (✓), cancelled (✗). Auto-refreshes when panel is active.
+- **Todo list panel.** New task-list tab in the sidebar. Shows current task list parsed
+  from the most recent todo tool result in message history. Status icons use Lucide
+  square, loader, check, and x states. Auto-refreshes when panel is active.
 - **Model preference persists.** Last-used model saved to localStorage. Restored on page
   load. New sessions inherit it automatically.
 

README.md

@@ -7,8 +7,11 @@ Full parity with the CLI experience - everything you can do from a terminal,
 you can do from this UI. No build step, no framework, no bundler. Just Python
 and vanilla JS.
 
-Layout: three-panel Claude-style. Left sidebar for sessions and tools,
-center for chat, right for workspace file browsing.
+Layout: three-panel. Left sidebar for sessions and navigation, center for chat,
+right for workspace file browsing. Model, profile, and workspace controls live in
+the **composer footer** — always visible while composing. A circular context ring
+shows token usage at a glance. All settings and session tools are in the
+**Hermes Control Center** (launcher at the sidebar bottom).
 
 <img alt="Hermes Web UI — three-panel layout" width="1417" height="867" alt="image" src="https://github.com/user-attachments/assets/51adff98-53ee-4800-8508-78b6c34dd3dc" />
 
@@ -92,29 +95,31 @@ ecosystem. See [HERMES.md](HERMES.md) for the full side-by-side.
 
 ## Quick start
 
-First, you need to install and configure [Hermes Agent](https://hermes-agent.nousresearch.com/docs/getting-started/quickstart) on your computer or server. This includes the following steps to complete:
-
-* [ ] Running the `curl` command to download and setup Hermes
-* [ ] Configure your [LLM provider](https://hermes-agent.nousresearch.com/docs/getting-started/quickstart#2-set-up-a-provider) with `hermes model`
-* [ ] Configure yout [messaging gateways](https://hermes-agent.nousresearch.com/docs/user-guide/messaging/) with `hermes gateway setup`
-* [ ] Can start chatting with hermes on command-line with `hermes`
-* [ ] Optional: [Configure your extended memory provider](https://hermes-agent.nousresearch.com/docs/user-guide/features/memory-providers)
-* [ ] Optional: [Configure your tools](https://hermes-agent.nousresearch.com/docs/user-guide/features/tools)
-
-Once installed, you can now setup the web UI with:
+Run the repo bootstrap:
 
 ```bash
 git clone https://github.com/nesquena/hermes-webui.git hermes-webui
 cd hermes-webui
+python3 bootstrap.py
+```
+
+Or keep using the shell launcher:
+
+```bash
 ./start.sh
 ```
 
-That is it! The script will:
+The bootstrap will:
 
-1. Locate your Hermes agent directory automatically.
-2. Find (or create) a Python environment with the required dependencies.
-3. Start the web server.
-4. Print the URL (and SSH tunnel command if you are on a remote machine).
+1. Detect Hermes Agent and, if missing, attempt the official installer (`curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash`).
+2. Find or create a Python environment with the WebUI dependencies.
+3. Start the web server and wait for `/health`.
+4. Open the browser unless you pass `--no-browser`.
+5. Drop you into a first-run onboarding wizard inside the WebUI.
+
+> Native Windows is not supported for this bootstrap yet. Use Linux, macOS, or WSL2.
+
+If provider setup is still incomplete after install, the onboarding wizard will point you to finish it with `hermes model` instead of trying to replicate the full CLI setup in-browser.
 
 ---
 
@@ -169,6 +174,32 @@ docker run -d \
 > To expose on a network, change the port to `"8787:8787"` in `docker-compose.yml`
 > and set `HERMES_WEBUI_PASSWORD` to enable authentication.
 
+### Two-container setup (Agent + WebUI)
+
+If you run the Hermes Agent in its own Docker container and want the WebUI
+in a separate container:
+
+```bash
+docker compose -f docker-compose.two-container.yml up -d
+```
+
+This starts both containers with shared volumes:
+
+- **`hermes-home`** — shared `~/.hermes` for config, sessions, skills, memory
+- **`hermes-agent-src`** — the agent's source code, mounted into the WebUI
+  container so it can install the agent's Python dependencies at startup
+
+The WebUI's init script automatically installs hermes-agent and all its
+dependencies (openai, anthropic, etc.) into its own Python environment on
+first boot. Subsequent restarts reuse the installed packages.
+
+> **How it works:** The WebUI imports hermes-agent's Python modules directly
+> (not via HTTP). The shared volume makes the agent source available, and
+> the init script runs `uv pip install` to set up the dependencies. Both
+> containers share the same `~/.hermes` directory for config and state.
+
+See `docker-compose.two-container.yml` for the full configuration.
+
 ---
 
 ## What start.sh discovers automatically
@@ -321,7 +352,7 @@ across 23 test files.
 - Send a message while one is processing -- it queues automatically
 - Edit any past user message inline and regenerate from that point
 - Retry the last assistant response with one click
-- Cancel a running task from the activity bar
+- Cancel a running task directly from the composer footer (Stop button next to Send)
 - Tool call cards inline -- each shows the tool name, args, and result snippet; expand/collapse all toggle for multi-tool turns
 - Subagent delegation cards -- child agent activity shown with distinct icon and indented border
 - Mermaid diagram rendering inline (flowcharts, sequence diagrams, gantt charts)
@@ -338,6 +369,7 @@ across 23 test files.
 
 ### Sessions
 - Create, rename, duplicate, delete, search by title and message content
+- Session actions via `⋯` dropdown per session — pin, move to project, archive, duplicate, delete
 - Pin/star sessions to the top of the sidebar (gold indicator)
 - Archive sessions (hide without deleting, toggle to show)
 - Session projects -- named groups with colors for organizing sessions
@@ -369,7 +401,7 @@ across 23 test files.
 - Hidden when browser doesn't support Web Speech API (Chrome, Edge, Safari)
 
 ### Profiles
-- Profile picker in the topbar -- purple chip with dropdown showing all profiles
+- Profile chip in the **composer footer** -- dropdown showing all profiles with gateway status and model info
 - Gateway status dots (green = running), model info, skill count per profile
 - Profiles management panel -- create, switch, and delete profiles from the sidebar
 - Clone config from active profile on create
@@ -387,16 +419,17 @@ across 23 test files.
 - CDN resources pinned with SRI integrity hashes
 
 ### Themes
-- 6 built-in themes: Dark (default), Light, Slate, Solarized Dark, Monokai, Nord
+- 7 built-in themes: Dark (default), Light, Slate, Solarized Dark, Monokai, Nord, OLED
 - Switch via Settings panel dropdown (instant live preview) or `/theme` command
 - Persists across reloads (server-side in settings.json + localStorage for flicker-free loading)
 - Custom themes: define a `:root[data-theme="name"]` CSS block and it works — see [THEMES.md](THEMES.md)
 
 ### Settings and configuration
-- Settings panel (gear icon) -- default model, default workspace, send key, theme
+- **Hermes Control Center** (sidebar launcher button) -- Conversation tab (export/import/clear), Preferences tab (model, send key, theme, language, all toggles), System tab (version, password)
 - Send key: Enter (default) or Ctrl/Cmd+Enter
 - Show/hide CLI sessions toggle (enabled by default)
 - Token usage display toggle (off by default, also via `/usage` command)
+- Control Center always opens on the Conversation tab; resets on close
 - Unsaved changes guard -- discard/save prompt when closing with unpersisted changes
 - Cron completion alerts -- toast notifications and unread badge on Tasks tab
 - Background agent error alerts -- banner when a non-active session encounters an error
@@ -441,19 +474,19 @@ api/
   upload.py             Multipart parser, file upload handler (~78 lines)
   workspace.py          File ops, workspace helpers, git detection (~288 lines)
 static/
-  index.html            HTML template (~388 lines)
-  style.css             All CSS incl. mobile responsive (~726 lines)
-  ui.js                 DOM helpers, renderMd, tool cards, context indicator (~1063 lines)
+  index.html            HTML template (~600 lines)
+  style.css             All CSS incl. mobile responsive, themes (~855 lines)
+  ui.js                 DOM helpers, renderMd, tool cards, context ring (~1090 lines)
   workspace.js          File preview, file ops, git badge (~247 lines)
-  sessions.js           Session CRUD, collapsible groups, search (~589 lines)
+  sessions.js           Session CRUD, ⋯ dropdown, collapsible groups, search (~600 lines)
   messages.js           send(), SSE handlers, rAF throttle (~352 lines)
-  panels.js             Cron, skills, memory, profiles, settings (~1146 lines)
+  panels.js             Cron, skills, memory, profiles, control center (~1200 lines)
   commands.js           Slash command autocomplete (~170 lines)
-  boot.js               Mobile nav, voice input, boot IIFE (~338 lines)
+  boot.js               Mobile nav, workspace state machine, composer chips, boot IIFE (~420 lines)
 tests/
   conftest.py           Isolated test server (port 8788)
-  test_sprint{1-23}.py  22 test files, 426 test functions
-  test_regressions.py   Permanent regression gate (23 tests)
+  test_sprint{1-36}.py  36 test files, 742 test functions
+  test_regressions.py   Permanent regression gate
 Dockerfile              python:3.12-slim container image
 docker-compose.yml      Compose with named volume and optional auth
 .github/workflows/      CI: multi-arch Docker build + GitHub Release on tag
@@ -474,6 +507,47 @@ State lives outside the repo at `~/.hermes/webui-mvp/` by default
 - `SPRINTS.md` -- forward sprint plan with CLI + Claude parity targets
 - `THEMES.md` -- theme system documentation, custom theme guide
 
+## Contributors
+
+Hermes WebUI is built with help from the open-source community. Every PR — whether merged directly or incorporated via rebase — shapes the project, and we're grateful to everyone who has taken the time to contribute.
+
+### Major contributions
+
+**[@aronprins](https://github.com/aronprins)** — v0.50.0 UI overhaul (PR #242)
+The biggest single contribution to the project: a complete UI redesign that moved model/profile/workspace controls into the composer footer, replaced the gear-icon settings panel with the Hermes Control Center (tabbed modal), removed the activity bar in favor of inline composer status, redesigned the session list with a `⋯` action dropdown, and added the workspace panel state machine. 26 commits, thoroughly designed and iterated through multiple review rounds.
+
+**[@iRonin](https://github.com/iRonin)** — Security hardening sprint (PRs #196–#204)
+Six consecutive security and reliability PRs: session memory leak fix (expired token pruning), Content-Security-Policy + Permissions-Policy headers, 30-second slow-client connection timeout, optional HTTPS/TLS support via environment variables, upstream branch tracking fix for self-update, and CLI session support in the file browser API. This is the kind of focused, high-quality security work that makes a self-hosted tool trustworthy.
+
+**[@DavidSchuchert](https://github.com/DavidSchuchert)** — German translation (PR #190)
+Complete German locale (`de`) covering all UI strings, settings labels, commands, and system messages — and in doing so, stress-tested the i18n system and exposed several elements that weren't yet translatable, which got fixed as part of the same PR.
+
+### Feature contributions
+
+**[@kevin-ho](https://github.com/kevin-ho)** — OLED theme (PR #168)
+Added the 7th built-in theme: pure black backgrounds with warm accents tuned to reduce burn-in risk. Small diff, big impact for anyone on an OLED display.
+
+**[@Bobby9228](https://github.com/Bobby9228)** — Mobile Profiles button (PR #265)
+Added the Profiles tab to the mobile bottom navigation bar, making profile switching reachable on phones without digging into the sidebar.
+
+**[@franksong2702](https://github.com/franksong2702)** — Session title guard + breadcrumb nav (PRs #301, #302)
+Two clean bug fixes / features: the session title guard that stops `title_from()` from overwriting user-renamed sessions after every turn, and clickable breadcrumb navigation in the workspace file preview panel.
+
+### Bug fix contributions
+
+**[@tgaalman](https://github.com/tgaalman)** — Thinking card fix (PR #169)
+Fixed top-level reasoning fields being missed in the thinking card display — an edge case in how Claude's extended thinking blocks surface in the API response.
+
+**[@smurmann](https://github.com/smurmann)** — Custom provider routing fix (PR #189)
+Fixed model routing for slash-prefixed custom provider models, which were being misrouted in the model selector. A precise fix for a real edge case in multi-provider setups.
+
+**[@jeffscottward](https://github.com/jeffscottward)** — Claude Haiku model ID fix (PR #145)
+Caught and corrected the Claude Haiku model ID (`3-5` → `4-5`) immediately after the Anthropic release — the kind of quick community catch that keeps the model dropdown accurate.
+
+---
+
+Want to contribute? See [ARCHITECTURE.md](ARCHITECTURE.md) for the codebase layout and [TESTING.md](TESTING.md) for how to run the test suite. The best contributions are focused, well-tested, and solve a real problem — exactly what every person on this list did.
+
 ## Repo
 
 ```

ROADMAP.md

@@ -3,8 +3,9 @@
 > Goal: Full 1:1 parity with the Hermes CLI experience via a clean dark web UI.
 > Everything you can do from the CLI terminal, you can do from this UI.
 >
-> Last updated: v0.48.2 (April 12, 2026) — 679 tests, 679 passing
-> Tests: 604 total (604 passing, 0 failures)
+> Last updated: v0.49.1 (April 12, 2026) — 700 tests, 700 passing
+> Onboarding MVP now writes real Hermes provider config from the Web UI for OpenRouter, Anthropic, OpenAI, and custom OpenAI-compatible endpoints.
+> Tests: 700 total (700 passing, 0 failures)
 > Source: <repo>/
 
 ---
@@ -32,7 +33,7 @@
 | Sprint 13 | Alerts + polish | Cron completion alerts (polling + badge), background error banner, session duplicate, browser tab title | 221 |
 | Sprint 14 | Visual polish + workspace ops | Mermaid diagrams, message timestamps, file rename, folder create, session tags, session archive | 233 |
 | Sprint 15 | Session projects + code copy | Session projects/folders, code block copy button, tool card expand/collapse toggle | 237 |
-| Sprint 16 | Session sidebar visual polish | SVG action icons, overlay hover actions, pin indicator, project border, safe HTML rendering | 289 |
+| Sprint 16 | Session sidebar visual polish | SVG action icons, session action dropdown, pin indicator, project border, safe HTML rendering | 289 |
 | Sprint 17 | Workspace polish + slash commands + settings | Breadcrumb navigation, slash command autocomplete, send key setting (#26) | 318 |
 | Sprint 18 | Thinking display + workspace tree | File preview auto-close, thinking/reasoning cards, expandable directory tree (#22) | 318 |
 | Sprint 19 | Auth + security hardening | Password auth (off by default), login page, security headers, 20MB body limit (#23) | 328 |
@@ -48,6 +49,8 @@
 | v0.48.0 | Gateway session sync | Real-time Telegram/Discord/Slack sessions in sidebar via SSE + DB polling (#274 @bergeouss); +10 tests | 658 |
 | v0.48.1 | Table inline formatting | `inlineMd()` in table cells — **bold**, *italic*, `code`, links render correctly (PR #278); 0 new tests | 658 |
 | v0.48.2 | Provider mismatch warning | Toast warning + auth_mismatch error type for provider/model mismatches (#283, fixes #266); +21 tests | 679 |
+| v0.49.1 | Docker docs + mobile Profiles button | Two-container Docker compose (#291/#288); Profiles button in mobile bottom nav with mobileSwitchPanel, data-panel, correct SVG size and position (#297/#265 @gabogabucho); +3 tests | 700 |
+| v0.49.0 | First-run onboarding wizard + self-update hardening | One-shot bootstrap + guided setup wizard; provider config persisted to config.yaml + .env; OpenRouter/Anthropic/OpenAI/Custom; wizard hidden after completion (#285); self-update stderr/split-ref/conflict fixes (#287); skip flaky redaction test (#289); +18 tests | 697 |
 | v0.32 | Auto-compaction handling | Compression detection, /compact command, real context window indicator | 424 |
 | v0.33 | /insights sync | Opt-in state.db sync so `hermes /insights` includes WebUI sessions | 424 |
 | v0.34 | Sprint 26 — Pluggable themes | Dark, Light, Slate, Solarized, Monokai, Nord; settings unsaved-changes guard; /theme command | 433 |
@@ -82,11 +85,12 @@
 ### Chat and Agent
 - [x] Send messages, get SSE-streaming responses
 - [x] Switch models per session (10 models, grouped by provider)
+- [x] Composer-scoped model picker in footer (moved from sidebar to align with per-conversation model selection)
 - [x] Multi-provider API support: use any Hermes agent API provider (OpenAI, Anthropic, Google, etc.) directly, not just OpenRouter (Sprint 11)
 - [x] Custom endpoint model discovery: auto-detect models from Ollama, LM Studio, and other local LLM servers via base_url (PR #18)
 - [x] Upload files to workspace (drag-drop, click, clipboard paste)
 - [x] File tray with remove button
-- [x] Tool progress shown in activity bar above composer
+- [x] Tool progress shown inline in the conversation via live tool cards
 - [x] Approval card for dangerous commands (Allow once/session/always, Deny)
 - [x] Approval polling + SSE-pushed approval events
 - [x] INFLIGHT guard: switch sessions mid-request without losing response
@@ -98,23 +102,25 @@
 - [x] Token/cost estimate per message (Sprint 23)
 
 ### Tool Visibility
-- [x] Tool progress in activity bar (moved out of composer footer)
+- [x] Tool progress in live tool cards (kept out of the composer/footer chrome)
 - [x] Approval card with all 4 choices
 - [x] Tool call cards inline (collapsed, show name/args/result)
 
 ### Workspace / Files
+- [x] Workspace panel defaults closed and opens only for active browsing or preview
 - [x] Browse workspace directory tree with type icons
 - [x] Preview text/code files (read-only)
 - [x] Preview markdown files (rendered, tables supported)
 - [x] Preview image files (PNG, JPG, GIF, SVG, WEBP inline)
 - [x] Edit files inline (Edit button, Enter to save, Escape to cancel)
 - [x] Create new file (+ button in panel header)
-- [x] Delete file (hover trash, confirm dialog)
+- [x] Delete file (hover trash, confirmation modal)
 - [x] File name truncation with tooltip for long names
 - [x] Right panel resizable (drag inner edge)
 - [x] Syntax highlighted code preview (Prism.js)
 - [x] Rename file (Sprint 14)
 - [x] Create folder (Sprint 14)
+- [x] Shared app modal for confirm/input flows (Sprint 33)
 
 ### Sessions
 - [x] Create session (+ button or Cmd/Ctrl+K)
@@ -215,14 +221,14 @@
 - [x] Streaming performance -- rAF-throttled token rendering (Sprint 24, PR #81)
 - [x] Workspace git detection -- branch name and dirty status badge (Sprint 24, PR #82)
 - [x] Collapsible date groups -- click group headers to collapse (Sprint 24, PR #80)
-- [x] Context usage indicator -- token count and cost in composer footer (Sprint 24, PR #83)
+- [x] Context usage indicator -- compact circular badge in composer footer (Sprint 24, PR #83; refreshed April 10, 2026)
 - [ ] LLM-generated session titles -- auto-title via small model instead of first-message substring (PR #75)
 - [ ] Workspace git detection -- show branch name, dirty status in workspace header (PR #75)
 - [ ] Clarify dialog -- agent can ask clarifying questions that block until user responds (PR #75)
 - [ ] Gateway approval polling -- support blocking approvals from messaging gateway (PR #75)
 - [ ] Unified session storage -- SessionDB shared between webui and CLI (PR #75)
 - [ ] TTS playback of responses (deferred)
-- [x] Background task cancel (activity bar Cancel button)
+- [x] Background task cancel (composer footer stop button)
 - [ ] Code execution cell (deferred)
 - [ ] Desktop application (Sprint 25, PLANNED)
 - [x] Pluggable UI themes -- Dark, Light, Slate, Solarized, Monokai, Nord (Sprint 26, v0.34)

SPRINTS.md

@@ -256,7 +256,7 @@ inconsistently across platforms. These were the most common visual complaints.
   button now only appears in the hover overlay like all other actions.
 
 ### Track B: Features
-- **SVG action icons.** Replaced all emoji HTML entities (★, 📂, 📦, ⊕, 🗑)
+- **SVG action icons.** Replaced old symbol and emoji HTML entities
   with monochrome SVG line icons that inherit `currentColor`. Consistent
   rendering across macOS, Linux, and Windows. Icons: pin (star), folder,
   archive (box), duplicate (overlapping squares), trash (bin with lines).
@@ -762,7 +762,7 @@ Both architectures in one .app. No separate downloads needed.
 - JS bridge fires when approval card appears/disappears
 
 **Menu bar mode (optional, v2):**
-- A small status bar item (⚗️ icon in menu bar) that opens a compact popover
+- A small status bar item (beaker icon in menu bar) that opens a compact popover
 - Popover shows current session status, last message, quick-compose field
 - Useful for running Hermes in the background without a full window
 
@@ -1163,8 +1163,8 @@ New test cases in `tests/test_sprint26.py`:
 
 ---
 
-*Last updated: April 10, 2026*
-*Current version: v0.45.0 | 604 tests*
+*Last updated: April 12, 2026*
+*Current version: v0.49.1 | 700 tests*
 *Next sprint: Sprint 24 (Web Polish + Bug Fix Pass)*
 *Horizon sprint: Sprint 25 (macOS Desktop Application)*
 *Docs sweep policy: update markdown proactively during PR reviews and after significant releases*

TESTING.md

@@ -8,7 +8,7 @@
 > Prerequisites: SSH tunnel is active on port 8786. Open http://localhost:8786 in browser.
 > Server health check: curl http://127.0.0.1:8786/health should return {"status":"ok"}.
 >
-> Automated tests: 679 total (679 passing, 0 skipped, 0 known failures)
+> Automated tests: 700 total (700 passing, 0 skipped, 0 known failures). Includes onboarding coverage for bootstrap/static wizard presence, real provider config persistence (`config.yaml` + `.env`), and the `/api/onboarding/*` backend.
 > Run: `pytest tests/ -v --timeout=60`
 
 ---
@@ -32,9 +32,11 @@ SETUP: Clear localStorage (DevTools > Application > Local Storage > delete herme
 STEPS:
   1. Navigate to http://localhost:8787
 EXPECT:
-  - Dark background, Hermes logo in sidebar header
+  - Dark background
+  - Sidebar begins directly with the icon tab row; there is no dedicated branding header
   - Center area shows "What can I help with?" heading with suggestion buttons
   - Session list in sidebar is empty or shows existing sessions
+  - Sidebar footer shows a single "Hermes WebUI" control-center button
   - No session is highlighted active
   - Send button is present but there is no input focus by default
 FAIL: Page shows error, blank white screen, or auto-creates a new session without user action.
@@ -73,11 +75,11 @@ STEPS:
 EXPECT:
   - User message appears immediately in chat
   - Thinking dots (three animated dots) appear below
-  - Status bar shows "Hermes is thinking..."
   - Send button becomes disabled (grayed out)
+  - A red stop button appears in the composer footer while the turn is running
   - Within 10-30 seconds, Hermes responds with a three-word greeting
   - Thinking dots disappear
-  - Send button re-enables
+  - Send button re-enables and the stop button disappears
   - Session title in sidebar updates to reflect the first message
 FAIL: Message never appears, thinking dots never go away, Send button stays disabled forever.
 
@@ -144,7 +146,7 @@ FAIL: New session created, error thrown, or UI breaks.
 ### T3.1: Model Dropdown Shows All Options
 SETUP: Any active session.
 STEPS:
-  1. Look at the sidebar bottom: "Model" label and a dropdown
+  1. Look at the composer footer: to the right of the attach/mic controls there is a model dropdown
   2. Click the dropdown to expand it
 EXPECT:
   - Provider groups visible: OpenAI, Anthropic, Other
@@ -153,18 +155,30 @@ EXPECT:
   - Other group: Gemini 2.5 Pro, DeepSeek V3, Llama 4 Scout
 FAIL: Only 2 options visible, no groups, or missing models.
 
-### T3.2: Model Chip Reflects Selection
+### T3.2: Model Dropdown Reflects Active Conversation
 SETUP: Active session.
 STEPS:
   1. Change model dropdown to "Claude Sonnet 4.6"
 EXPECT:
-  - The blue chip in the topbar right updates to "Sonnet 4.6" immediately
-  - NOT "GPT-5.4 Mini" (this was Bug B3, now fixed)
+  - The composer footer dropdown stays on "Claude Sonnet 4.6"
+  - Sending the next message uses that session model rather than an older one from another conversation
 STEPS (continued):
   2. Change model to "Gemini 2.5 Pro"
 EXPECT:
-  - Chip updates to "Gemini 2.5 Pro" (not "GPT-5.4 Mini")
-FAIL: Chip shows wrong model name for any non-Sonnet selection.
+  - The dropdown updates to "Gemini 2.5 Pro"
+  - Switching away and back to the conversation restores the same model in the footer selector
+FAIL: Dropdown shows the wrong active model after a session switch, or sending uses a stale model.
+
+### T3.3: Context Badge Shares Footer Space Cleanly
+SETUP: Active session with at least one completed response.
+STEPS:
+  1. Look at the right side of the composer footer
+EXPECT:
+  - A compact circular context badge appears next to the send button when usage data is available
+  - The number in the center shows the used percentage
+  - Hovering or focusing the badge shows a tooltip with percent used, token count, auto-compress threshold, and estimated cost when available
+  - The model dropdown remains usable without overlapping the send button or pushing controls out of view
+FAIL: Linear meter still shown, tooltip missing/incomplete, controls overlap, or footer wraps in a broken way.
 
 ---
 
@@ -228,8 +242,18 @@ FAIL: File not removed, error.
 
 ## Section 5: Workspace File Browser
 
-### T5.1: File Tree Loads on Session Start
+### T5.0: Panel Is Closed By Default
 SETUP: Active session with workspace set.
+EXPECT:
+  - Right workspace panel is hidden on initial load
+  - Center chat column uses the freed width
+  - "Files" toggle is visible in the topbar
+FAIL: Right panel starts open without any browsing or preview action.
+
+### T5.1: File Tree Loads When Files Panel Is Opened
+SETUP: Active session with workspace set.
+STEPS:
+  1. Click the "Files" toggle in the topbar
 EXPECT:
   - Right panel shows "WORKSPACE" header
   - File tree lists files and directories in the workspace
@@ -263,10 +287,11 @@ STEPS:
   1. Click the X button in the panel header
 EXPECT:
   - Preview closes
-  - File tree is visible again
+  - If the panel auto-opened for that preview, the entire right panel closes again
+  - If the panel was manually opened for browsing first, the file tree is visible again
   - Preview area is hidden
   - Reopening the same file shows fresh content (no stale cached text)
-FAIL: X button does nothing, tree does not reappear.
+FAIL: X button does nothing, panel stays stuck open, or the file tree does not reappear after manual browse mode.
 
 ### T5.5: Preview an Image File (Sprint 2)
 SETUP: Upload a PNG, JPG, or any image file to the workspace, OR the workspace already contains one.
@@ -377,7 +402,8 @@ FAIL: Command blocked after Allow once, card stays, error.
 ### T8.1: Download Conversation as Markdown
 SETUP: A session with at least 2 messages (1 user + 1 assistant).
 STEPS:
-  1. Click the "Transcript" download button in the sidebar bottom
+  1. Click the "Hermes" button in the sidebar footer
+  2. In the Control Center modal, click "Transcript"
 EXPECT:
   - Browser downloads a .md file named hermes-{session_id}.md
   - Opening the file shows the conversation in markdown format:
@@ -468,6 +494,7 @@ FAIL: No log output, log shows Apache-style text instead of JSON, log file not c
 SETUP: Message is sending (thinking dots visible).
 EXPECT:
   - Send button is visually grayed out
+  - Stop button is visible in the composer footer
   - Pressing Enter does NOT send another message
   - Clicking Send button does nothing
 FAIL: Multiple messages sent while one is in flight.
@@ -831,7 +858,7 @@ FAIL: No icon ever appears, icon always visible (not hover-only).
 ### T21.2: Delete a File with Confirmation
 STEPS:
   1. Hover over a file and click its trash icon
-  2. A browser confirm dialog appears: "Delete [filename]?"
+  2. An in-app confirmation modal appears: "Delete [filename]?"
   3. Click OK
 EXPECT:
   - Toast: "Deleted [filename]"
@@ -842,7 +869,7 @@ FAIL: File not deleted, no confirmation dialog, error.
 ### T21.3: Cancel Delete Does Nothing
 STEPS:
   1. Hover over a file and click its trash icon
-  2. Click Cancel on the confirm dialog
+  2. Click Cancel on the confirmation modal
 EXPECT:
   - File remains in the tree
   - No toast, no error
@@ -851,7 +878,7 @@ FAIL: File deleted despite cancel.
 ### T21.4: Create a New File
 STEPS:
   1. Click the + button in the workspace panel header
-  2. A prompt dialog appears: "New file name (e.g. notes.md):"
+  2. An in-app input modal appears: "New file name (e.g. notes.md):"
   3. Type "test-sprint4.md" and click OK
 EXPECT:
   - Toast: "Created test-sprint4.md"
@@ -925,7 +952,7 @@ FAIL: Invalid path added, no error.
 ### T22.4: Remove a Workspace
 STEPS:
   1. Click the X button next to any non-default workspace
-  2. Confirm the dialog
+  2. Confirm the modal
 EXPECT:
   - Workspace disappears from the list
   - Toast: "Workspace removed"
@@ -981,7 +1008,7 @@ STEPS:
   1. Hover over an assistant message
   2. Click the clipboard icon
 EXPECT:
-  - Icon briefly shows a checkmark (✓) then reverts to clipboard
+  - Icon briefly shows a check icon, then reverts to the copy icon
   - Paste (Cmd+V) elsewhere shows the full text of that message
 FAIL: No visual feedback, clipboard empty or wrong content.
 
@@ -994,23 +1021,23 @@ STEPS:
   1. Click any .py, .js, or .txt file in the workspace file tree
 EXPECT:
   - File content shows in read-only monospace view
-  - An "✎ Edit" button is visible in the preview path bar
+  - An Edit button with a pencil icon is visible in the preview path bar
   - Content is NOT editable (clicking in it does nothing)
 FAIL: Content immediately editable, no Edit button.
 
 ### T24.2: Edit Button Enters Edit Mode
 STEPS:
-  1. Click "✎ Edit" on a code file preview
+  1. Click the Edit button on a code file preview
 EXPECT:
   - Read-only view replaced by an editable textarea
   - Content of the file is pre-populated in the textarea
-  - Button changes to "💾 Save"
+  - Button changes to "Save" with a disk icon
 FAIL: Nothing changes, button doesn't change.
 
 ### T24.3: Save Writes Changes to Disk
 STEPS:
   1. In edit mode, change some text
-  2. Click "💾 Save"
+  2. Click the Save button
 EXPECT:
   - Read-only view returns, showing the updated content
   - Toast: "Saved"
@@ -1022,8 +1049,8 @@ STEPS:
   1. Enter edit mode on a file
   2. Make any change (type a character)
 EXPECT:
-  - Button shows "💾 Save*" (asterisk indicates unsaved changes)
-FAIL: No asterisk, button stays as "💾 Save".
+  - Button shows "Save*" with the disk icon still visible (asterisk indicates unsaved changes)
+FAIL: No asterisk, button stays as "Save".
 
 ### T24.5: Markdown File Edit-Save Roundtrip
 STEPS:
@@ -1070,7 +1097,7 @@ against each criterion below. A Claude browser agent can verify these with brows
 
 ### T25.1: Sidebar Nav Tabs are Icon-Only
 EXPECT:
-  - Five icon-only tabs in the sidebar nav row: 💬 ⏱️ 📚 🧠 📁
+  - Five icon-only tabs in the sidebar nav row: message, clock, book, brain, folder
   - No text labels visible by default (text removed to prevent overflow)
   - Hovering a tab shows a tooltip with the label (Chat/Tasks/Skills/Memory/Spaces)
   - Active tab has a blue underline, icon brighter blue
@@ -1194,7 +1221,7 @@ STEPS:
   3. Click Create job
 EXPECT:
   - Form closes
-  - Toast: "Job created ✓"
+  - Toast: "Job created"
   - New job appears in the cron list with status "active"
 FAIL: Error shown, job not created, form stays open.
 
@@ -1225,7 +1252,8 @@ FAIL: Job created, form doesn't close.
 ### T28.1: JSON Export Button Downloads File
 SETUP: Active session with at least a few messages.
 STEPS:
-  1. Click the "JSON" button in the sidebar footer (next to Transcript)
+  1. Click the "Hermes" button in the sidebar footer
+  2. In the Control Center modal, click "JSON"
 EXPECT:
   - Browser downloads a file named hermes-{session_id}.json
   - Opening the file shows valid JSON with: session_id, title, messages array,
@@ -1289,7 +1317,7 @@ STEPS (continued from T29.1):
   1. Change the name field to "Renamed Job"
   2. Click Save
 EXPECT:
-  - Form closes, toast "Job updated ✓"
+  - Form closes, toast "Job updated"
   - Job header shows new name
 FAIL: Save fails, name unchanged.
 
@@ -1297,7 +1325,7 @@ FAIL: Save fails, name unchanged.
 SETUP: A cron job you can safely delete (or a test job created for this).
 STEPS:
   1. Expand the job, click "Delete"
-  2. Confirm the dialog
+  2. Confirm the modal
 EXPECT:
   - Toast: "Job deleted"
   - Job disappears from the list
@@ -1326,7 +1354,7 @@ tags: [test]
 # Test"
   2. Click Save skill
 EXPECT:
-  - Toast "Skill created ✓", form closes
+  - Toast "Skill created", form closes
   - Skill appears in the skills list
 FAIL: Error, skill not in list.
 
@@ -1354,7 +1382,7 @@ STEPS:
   1. In edit mode, add a line to the textarea
   2. Click Save
 EXPECT:
-  - Toast "Memory saved ✓", form closes
+  - Toast "Memory saved", form closes
   - Memory panel reloads showing the updated content
 FAIL: Save fails, content unchanged.
 
@@ -1467,14 +1495,16 @@ FAIL: Both messages removed, wrong message sent, crash.
 ### T34.1: Clear Button Appears When Session Has Messages
 SETUP: Session with at least one message.
 EXPECT:
-  - A "🗑 Clear" chip appears in the topbar right side (next to the workspace chip)
-  - Button NOT visible when session has no messages / empty state
+  - The "Hermes" button is visible in the sidebar footer
+  - Opening the Control Center shows a "Clear" action in the Conversation section
+  - The Clear action is disabled when there is no active session or no messages
 FAIL: Button always visible, never visible.
 
 ### T34.2: Clear Wipes Messages and Resets Title
 STEPS:
-  1. Click the Clear button in the topbar
-  2. Confirm the dialog
+  1. Click the "Hermes" button in the sidebar footer
+  2. Click "Clear" in the Conversation section
+  3. Confirm the modal
 EXPECT:
   - All messages disappear from the chat area
   - Empty state ("What can I help with?") reappears
@@ -1485,7 +1515,7 @@ FAIL: Session deleted, messages remain, title not reset.
 
 ### T34.3: Cancel Clear Does Nothing
 STEPS:
-  1. Click Clear, then click Cancel in the confirm dialog
+  1. Click Clear, then click Cancel in the confirmation modal
 EXPECT:
   - All messages still present
   - No toast, no change
@@ -1609,7 +1639,7 @@ Each has automated API-level tests in `tests/test_sprint{N}.py`.
 - Switch model. Send a message. Verify response uses selected model.
 
 ### Sprint 12: Settings + Pin + Import
-- Click gear icon. Settings overlay opens.
+- Click the "Hermes WebUI" button in the sidebar footer. Control Center overlay opens with vertical section tabs on the left.
 - Change default model, save. Restart server. Verify setting persisted.
 - Pin a session (star icon in hover overlay). Verify it floats to top of list.
 - Export session as JSON. Import it back. Verify messages restored.
@@ -1637,11 +1667,12 @@ Each has automated API-level tests in `tests/test_sprint{N}.py`.
 
 ### Sprint 16: Sidebar Visual Polish
 - Session titles use full sidebar width (no truncated space for hidden icons).
-- Hover a session → action buttons appear from right with gradient fade.
+- Hover a session → a dotted actions trigger appears on the right.
+- Click the dotted trigger → a dropdown opens with pin, project, archive, duplicate, and delete actions.
 - All icons are monochrome SVGs (not emoji). Consistent across platforms.
 - Pinned sessions show small gold star inline. Unpinned = no star, full title width.
-- Active session has gold highlight (not blue). Overlay gradient matches.
-- Double-click to rename → overlay hides during rename.
+- Active session has gold highlight (not blue).
+- Double-click to rename → session actions hide during rename.
 
 ### Sprint 17: Workspace + Slash Commands + Send Key
 - Navigate into a subdirectory. Breadcrumb bar appears with clickable segments.
@@ -1702,7 +1733,7 @@ Each has automated API-level tests in `tests/test_sprint{N}.py`.
 - "Use" button switches profile. Delete button removes non-default profiles.
 - "+ New profile" form: name validation (lowercase + hyphens), clone config checkbox.
 - Create profile → appears in list and dropdown.
-- Delete profile → confirm dialog. Auto-switches to default if deleting active.
+- Delete profile → confirmation modal. Auto-switches to default if deleting active.
 - Attempt switch while agent busy → blocked with toast message.
 - With hermes-agent not installed → only default profile shown, graceful fallback.
 

api/onboarding.py

@@ -0,0 +1,478 @@
+"""Hermes Web UI -- first-run onboarding helpers."""
+
+from __future__ import annotations
+
+import os
+from pathlib import Path
+from urllib.parse import urlparse
+
+from api.auth import is_auth_enabled
+from api.config import (
+    DEFAULT_MODEL,
+    DEFAULT_WORKSPACE,
+    _FALLBACK_MODELS,
+    _HERMES_FOUND,
+    _PROVIDER_DISPLAY,
+    _PROVIDER_MODELS,
+    _get_config_path,
+    get_available_models,
+    get_config,
+    load_settings,
+    reload_config,
+    save_settings,
+    verify_hermes_imports,
+)
+from api.workspace import get_last_workspace, load_workspaces
+
+
+_SUPPORTED_PROVIDER_SETUPS = {
+    "openrouter": {
+        "label": "OpenRouter",
+        "env_var": "OPENROUTER_API_KEY",
+        "default_model": "anthropic/claude-sonnet-4.6",
+        "requires_base_url": False,
+        "models": [
+            {"id": model["id"], "label": model["label"]} for model in _FALLBACK_MODELS
+        ],
+    },
+    "anthropic": {
+        "label": "Anthropic",
+        "env_var": "ANTHROPIC_API_KEY",
+        "default_model": "claude-sonnet-4.6",
+        "requires_base_url": False,
+        "models": list(_PROVIDER_MODELS.get("anthropic", [])),
+    },
+    "openai": {
+        "label": "OpenAI",
+        "env_var": "OPENAI_API_KEY",
+        "default_model": "gpt-4o",
+        "default_base_url": "https://api.openai.com/v1",
+        "requires_base_url": False,
+        "models": list(_PROVIDER_MODELS.get("openai", [])),
+    },
+    "custom": {
+        "label": "Custom OpenAI-compatible",
+        "env_var": "OPENAI_API_KEY",
+        "default_model": "gpt-4o-mini",
+        "requires_base_url": True,
+        "models": [],
+    },
+}
+
+_UNSUPPORTED_PROVIDER_NOTE = (
+    "OAuth and advanced provider flows such as Nous Portal, OpenAI Codex, and GitHub "
+    "Copilot are still terminal-first. Use `hermes model` for those flows."
+)
+
+
+def _get_active_hermes_home() -> Path:
+    try:
+        from api.profiles import get_active_hermes_home
+
+        return get_active_hermes_home()
+    except ImportError:
+        return Path.home() / ".hermes"
+
+
+def _load_env_file(env_path: Path) -> dict[str, str]:
+    values: dict[str, str] = {}
+    if not env_path.exists():
+        return values
+    try:
+        for raw in env_path.read_text(encoding="utf-8").splitlines():
+            line = raw.strip()
+            if not line or line.startswith("#") or "=" not in line:
+                continue
+            key, value = line.split("=", 1)
+            values[key.strip()] = value.strip().strip('"').strip("'")
+    except Exception:
+        return {}
+    return values
+
+
+def _write_env_file(env_path: Path, updates: dict[str, str]) -> None:
+    current = _load_env_file(env_path)
+    for key, value in updates.items():
+        if value is None:
+            current.pop(key, None)
+            os.environ.pop(key, None)
+            continue
+        clean = str(value).strip()
+        if not clean:
+            continue
+        # Reject embedded newlines/carriage returns to prevent .env injection
+        if "\n" in clean or "\r" in clean:
+            raise ValueError("API key must not contain newline characters.")
+        current[key] = clean
+        os.environ[key] = clean
+
+    env_path.parent.mkdir(parents=True, exist_ok=True)
+    lines = [f"{key}={current[key]}" for key in sorted(current)]
+    env_path.write_text("\n".join(lines) + ("\n" if lines else ""), encoding="utf-8")
+
+
+def _load_yaml_config(config_path: Path) -> dict:
+    try:
+        import yaml as _yaml
+    except ImportError:
+        return {}
+
+    if not config_path.exists():
+        return {}
+    try:
+        loaded = _yaml.safe_load(config_path.read_text(encoding="utf-8"))
+        return loaded if isinstance(loaded, dict) else {}
+    except Exception:
+        return {}
+
+
+def _save_yaml_config(config_path: Path, config: dict) -> None:
+    try:
+        import yaml as _yaml
+    except ImportError as exc:
+        raise RuntimeError("PyYAML is required to write Hermes config.yaml") from exc
+
+    config_path.parent.mkdir(parents=True, exist_ok=True)
+    config_path.write_text(
+        _yaml.safe_dump(config, sort_keys=False, allow_unicode=True),
+        encoding="utf-8",
+    )
+
+
+def _normalize_model_for_provider(provider: str, model: str) -> str:
+    clean = (model or "").strip()
+    if not clean:
+        return ""
+    if provider in {"anthropic", "openai"} and clean.startswith(provider + "/"):
+        return clean.split("/", 1)[1]
+    return clean
+
+
+def _normalize_base_url(base_url: str) -> str:
+    return (base_url or "").strip().rstrip("/")
+
+
+def _extract_current_provider(cfg: dict) -> str:
+    model_cfg = cfg.get("model", {})
+    if isinstance(model_cfg, dict):
+        provider = str(model_cfg.get("provider") or "").strip().lower()
+        if provider:
+            return provider
+    return ""
+
+
+def _extract_current_model(cfg: dict) -> str:
+    model_cfg = cfg.get("model", {})
+    if isinstance(model_cfg, str):
+        return model_cfg.strip()
+    if isinstance(model_cfg, dict):
+        return str(model_cfg.get("default") or "").strip()
+    return ""
+
+
+def _extract_current_base_url(cfg: dict) -> str:
+    model_cfg = cfg.get("model", {})
+    if isinstance(model_cfg, dict):
+        return _normalize_base_url(str(model_cfg.get("base_url") or ""))
+    return ""
+
+
+def _provider_api_key_present(
+    provider: str, cfg: dict, env_values: dict[str, str]
+) -> bool:
+    provider = (provider or "").strip().lower()
+    if not provider:
+        return False
+
+    env_var = _SUPPORTED_PROVIDER_SETUPS.get(provider, {}).get("env_var")
+    if env_var and env_values.get(env_var):
+        return True
+
+    model_cfg = cfg.get("model", {})
+    if isinstance(model_cfg, dict) and str(model_cfg.get("api_key") or "").strip():
+        return True
+
+    providers_cfg = cfg.get("providers", {})
+    if isinstance(providers_cfg, dict):
+        provider_cfg = providers_cfg.get(provider, {})
+        if (
+            isinstance(provider_cfg, dict)
+            and str(provider_cfg.get("api_key") or "").strip()
+        ):
+            return True
+        if provider == "custom":
+            custom_cfg = providers_cfg.get("custom", {})
+            if (
+                isinstance(custom_cfg, dict)
+                and str(custom_cfg.get("api_key") or "").strip()
+            ):
+                return True
+    return False
+
+
+
+def _provider_oauth_authenticated(provider: str, hermes_home: "Path") -> bool:
+    """Return True if the provider has valid OAuth credentials.
+
+    Checks via hermes_cli.auth.get_auth_status() when available, then falls
+    back to reading auth.json directly for the known OAuth provider IDs
+    (openai-codex, copilot, copilot-acp, qwen-oauth, nous).
+
+    This covers users who authenticated via 'hermes auth' or 'hermes model'
+    but whose provider is not in _SUPPORTED_PROVIDER_SETUPS because it does
+    not use a plain API key.
+    """
+    provider = (provider or "").strip().lower()
+    if not provider:
+        return False
+
+    # Fast path: ask hermes_cli directly — the authoritative source
+    try:
+        from hermes_cli.auth import get_auth_status as _gas
+
+        status = _gas(provider)
+        if isinstance(status, dict) and status.get("logged_in"):
+            return True
+    except Exception:
+        pass
+
+    # Fallback: parse auth.json ourselves for known OAuth provider IDs.
+    # Covers deployments where hermes_cli is installed but the import above
+    # fails for an unexpected reason (version mismatch, import cycle, etc.).
+    _known_oauth_providers = {"openai-codex", "copilot", "copilot-acp", "qwen-oauth", "nous"}
+    if provider not in _known_oauth_providers:
+        return False
+
+    try:
+        import json as _j
+
+        auth_path = hermes_home / "auth.json"
+        if not auth_path.exists():
+            return False
+        store = _j.loads(auth_path.read_text(encoding="utf-8"))
+        providers_store = store.get("providers")
+        if not isinstance(providers_store, dict):
+            return False
+        state = providers_store.get(provider)
+        if not isinstance(state, dict):
+            return False
+        # Any non-empty token is enough to confirm the user has credentials.
+        # Token refresh happens at runtime inside the agent.
+        has_token = bool(
+            str(state.get("access_token") or "").strip()
+            or str(state.get("api_key") or "").strip()
+            or str(state.get("refresh_token") or "").strip()
+        )
+        return has_token
+    except Exception:
+        return False
+
+
+def _status_from_runtime(cfg: dict, imports_ok: bool) -> dict:
+    provider = _extract_current_provider(cfg)
+    model = _extract_current_model(cfg)
+    base_url = _extract_current_base_url(cfg)
+    env_values = _load_env_file(_get_active_hermes_home() / ".env")
+
+    provider_configured = bool(provider and model)
+    provider_ready = False
+
+    if provider_configured:
+        if provider == "custom":
+            provider_ready = bool(
+                base_url and _provider_api_key_present(provider, cfg, env_values)
+            )
+        elif provider in _SUPPORTED_PROVIDER_SETUPS:
+            provider_ready = _provider_api_key_present(provider, cfg, env_values)
+        else:
+            # Unknown / OAuth provider (e.g. openai-codex, copilot, qwen-oauth).
+            # These do not use a plain API key; auth lives in auth.json or a
+            # credential pool managed by hermes_cli.
+            provider_ready = _provider_oauth_authenticated(
+                provider, _get_active_hermes_home()
+            )
+
+    chat_ready = bool(_HERMES_FOUND and imports_ok and provider_ready)
+
+    if not _HERMES_FOUND or not imports_ok:
+        state = "agent_unavailable"
+        note = (
+            "Hermes is not fully importable from the Web UI yet. Finish bootstrap or fix the "
+            "agent install before provider setup will work."
+        )
+    elif chat_ready:
+        state = "ready"
+        provider_name = _PROVIDER_DISPLAY.get(
+            provider, provider.title() if provider else "Hermes"
+        )
+        note = f"Hermes is minimally configured and ready to chat via {provider_name}."
+    elif provider_configured:
+        state = "provider_incomplete"
+        if provider == "custom" and not base_url:
+            note = (
+                "Hermes has a saved provider/model selection but still needs the "
+                "base URL and API key required to chat."
+            )
+        elif provider not in _SUPPORTED_PROVIDER_SETUPS:
+            # OAuth / unsupported provider: avoid misleading "API key" wording.
+            note = (
+                f"Provider '{provider}' is configured but not yet authenticated. "
+                "Run 'hermes auth' or 'hermes model' in a terminal to complete "
+                "setup, then reload the Web UI."
+            )
+        else:
+            note = (
+                "Hermes has a saved provider/model selection but still needs the "
+                "API key required to chat."
+            )
+    else:
+        state = "needs_provider"
+        note = "Hermes is installed, but you still need to choose a provider and save working credentials."
+
+    return {
+        "provider_configured": provider_configured,
+        "provider_ready": provider_ready,
+        "chat_ready": chat_ready,
+        "setup_state": state,
+        "provider_note": note,
+        "current_provider": provider or None,
+        "current_model": model or None,
+        "current_base_url": base_url or None,
+        "env_path": str(_get_active_hermes_home() / ".env"),
+    }
+
+
+def _build_setup_catalog(cfg: dict) -> dict:
+    current_provider = _extract_current_provider(cfg) or "openrouter"
+    current_model = _extract_current_model(cfg)
+    current_base_url = _extract_current_base_url(cfg)
+
+    providers = []
+    for provider_id, meta in _SUPPORTED_PROVIDER_SETUPS.items():
+        providers.append(
+            {
+                "id": provider_id,
+                "label": meta["label"],
+                "env_var": meta["env_var"],
+                "default_model": meta["default_model"],
+                "default_base_url": meta.get("default_base_url") or "",
+                "requires_base_url": bool(meta.get("requires_base_url")),
+                "models": list(meta.get("models", [])),
+                "quick": provider_id == "openrouter",
+            }
+        )
+
+    return {
+        "providers": providers,
+        "unsupported_note": _UNSUPPORTED_PROVIDER_NOTE,
+        "current": {
+            "provider": current_provider,
+            "model": current_model
+            or _SUPPORTED_PROVIDER_SETUPS[current_provider]["default_model"],
+            "base_url": current_base_url,
+        },
+    }
+
+
+def get_onboarding_status() -> dict:
+    settings = load_settings()
+    cfg = get_config()
+    imports_ok, missing, errors = verify_hermes_imports()
+    runtime = _status_from_runtime(cfg, imports_ok)
+    workspaces = load_workspaces()
+    last_workspace = get_last_workspace()
+    available_models = get_available_models()
+
+    return {
+        "completed": bool(settings.get("onboarding_completed")),
+        "settings": {
+            "default_model": settings.get("default_model") or DEFAULT_MODEL,
+            "default_workspace": settings.get("default_workspace")
+            or str(DEFAULT_WORKSPACE),
+            "password_enabled": is_auth_enabled(),
+            "bot_name": settings.get("bot_name") or "Hermes",
+        },
+        "system": {
+            "hermes_found": bool(_HERMES_FOUND),
+            "imports_ok": bool(imports_ok),
+            "missing_modules": missing,
+            "import_errors": errors,
+            "config_path": str(_get_config_path()),
+            "config_exists": Path(_get_config_path()).exists(),
+            **runtime,
+        },
+        "setup": _build_setup_catalog(cfg),
+        "workspaces": {
+            "items": workspaces,
+            "last": last_workspace,
+        },
+        "models": available_models,
+    }
+
+
+def apply_onboarding_setup(body: dict) -> dict:
+    provider = str(body.get("provider") or "").strip().lower()
+    model = str(body.get("model") or "").strip()
+    api_key = str(body.get("api_key") or "").strip()
+    base_url = _normalize_base_url(str(body.get("base_url") or ""))
+
+    if provider not in _SUPPORTED_PROVIDER_SETUPS:
+        # Unsupported providers (openai-codex, copilot, nous, etc.) are already
+        # configured via the CLI. Just mark onboarding as complete and let the
+        # user through — the agent is already set up, no further setup needed.
+        save_settings({"onboarding_completed": True})
+        return get_onboarding_status()
+    if not model:
+        raise ValueError("model is required")
+
+    provider_meta = _SUPPORTED_PROVIDER_SETUPS[provider]
+    if provider_meta.get("requires_base_url"):
+        if not base_url:
+            raise ValueError("base_url is required for custom endpoints")
+        parsed = urlparse(base_url)
+        if parsed.scheme not in {"http", "https"}:
+            raise ValueError("base_url must start with http:// or https://")
+
+    cfg = _load_yaml_config(_get_config_path())
+    env_path = _get_active_hermes_home() / ".env"
+    env_values = _load_env_file(env_path)
+
+    if not api_key and not _provider_api_key_present(provider, cfg, env_values):
+        raise ValueError(f"{provider_meta['env_var']} is required")
+
+    model_cfg = cfg.get("model", {})
+    if not isinstance(model_cfg, dict):
+        model_cfg = {}
+
+    model_cfg["provider"] = provider
+    model_cfg["default"] = _normalize_model_for_provider(provider, model)
+
+    if provider == "custom":
+        model_cfg["base_url"] = base_url
+    elif provider == "openai":
+        model_cfg["base_url"] = (
+            provider_meta.get("default_base_url") or "https://api.openai.com/v1"
+        )
+    else:
+        model_cfg.pop("base_url", None)
+
+    cfg["model"] = model_cfg
+    _save_yaml_config(_get_config_path(), cfg)
+
+    if api_key:
+        _write_env_file(env_path, {provider_meta["env_var"]: api_key})
+
+    try:
+        from api.profiles import _reload_dotenv
+
+        _reload_dotenv(_get_active_hermes_home())
+    except Exception:
+        pass
+
+    reload_config()
+    return get_onboarding_status()
+
+
+def complete_onboarding() -> dict:
+    save_settings({"onboarding_completed": True})
+    return get_onboarding_status()

api/streaming.py

@@ -334,7 +334,9 @@ def _run_agent_streaming(session_id, msg_text, model, workspace, stream_id, atta
             for _m in s.messages:
                 if isinstance(_m, dict) and not _m.get('timestamp') and not _m.get('_ts'):
                     _m['timestamp'] = int(_now)
-            s.title = title_from(s.messages, s.title)
+            # Only auto-generate title when still default; preserves user renames
+            if s.title == 'Untitled':
+                s.title = title_from(s.messages, s.title)
             # Read token/cost usage from the agent object (if available)
             input_tokens = getattr(agent, 'session_prompt_tokens', 0) or 0
             output_tokens = getattr(agent, 'session_completion_tokens', 0) or 0

api/updates.py

@@ -29,15 +29,39 @@ CACHE_TTL = 1800  # 30 minutes
 
 
 def _run_git(args, cwd, timeout=10):
-    """Run a git command and return (stdout, ok)."""
+    """Run a git command and return (useful output, ok).
+
+    On failure, returns stderr (or stdout as fallback) so callers can
+    surface actionable git error messages instead of empty strings.
+    """
     try:
         r = subprocess.run(
             ['git'] + args, cwd=str(cwd), capture_output=True,
             text=True, timeout=timeout,
         )
-        return r.stdout.strip(), r.returncode == 0
-    except (subprocess.TimeoutExpired, FileNotFoundError, OSError):
-        return '', False
+        stdout = r.stdout.strip()
+        stderr = r.stderr.strip()
+        if r.returncode == 0:
+            return stdout, True
+        return stderr or stdout or f"git exited with status {r.returncode}", False
+    except subprocess.TimeoutExpired as exc:
+        detail = (getattr(exc, 'stderr', None) or getattr(exc, 'stdout', None) or '').strip()
+        return detail or f"git {' '.join(args)} timed out after {timeout}s", False
+    except FileNotFoundError:
+        return 'git executable not found', False
+    except OSError as exc:
+        return f'git failed to start: {exc}', False
+
+
+def _split_remote_ref(ref):
+    """Split 'origin/branch-name' into ('origin', 'branch-name').
+
+    Returns (None, ref) if ref contains no slash.
+    """
+    if '/' not in ref:
+        return None, ref
+    remote, branch = ref.split('/', 1)
+    return remote, branch
 
 
 def _detect_default_branch(path):
@@ -159,8 +183,17 @@ def _apply_update_inner(target):
             ),
         }
 
-    # Check for dirty working tree
-    status_out, _ = _run_git(['status', '--porcelain'], path)
+    # Check for dirty working tree (ignore untracked files — git stash
+    # doesn't include them, so stashing on '??' alone leaves nothing to pop)
+    status_out, status_ok = _run_git(
+        ['status', '--porcelain', '--untracked-files=no'], path
+    )
+    if not status_ok:
+        return {'ok': False, 'message': f'Failed to inspect repo status: {status_out[:200]}'}
+    # Fail early on unresolved merge conflicts
+    if any(line[:2] in {'DD', 'AU', 'UD', 'UA', 'DU', 'AA', 'UU'}
+           for line in status_out.splitlines()):
+        return {'ok': False, 'message': 'Repository has unresolved merge conflicts'}
     stashed = False
     if status_out:
         _, ok = _run_git(['stash'], path)
@@ -168,8 +201,16 @@ def _apply_update_inner(target):
             return {'ok': False, 'message': 'Failed to stash local changes'}
         stashed = True
 
-    # Pull with ff-only (no merge commits)
-    pull_out, pull_ok = _run_git(['pull', '--ff-only', compare_ref], path, timeout=30)
+    # Pull with ff-only (no merge commits).
+    # Split tracking refs like 'origin/main' into separate remote + branch
+    # arguments — git treats 'origin/main' as a repository name otherwise.
+    remote, branch = _split_remote_ref(compare_ref)
+    pull_args = ['pull', '--ff-only']
+    if remote:
+        pull_args.extend([remote, branch])
+    else:
+        pull_args.append(compare_ref)
+    pull_out, pull_ok = _run_git(pull_args, path, timeout=30)
     if not pull_ok:
         if stashed:
             _run_git(['stash', 'pop'], path)

bootstrap.py

@@ -0,0 +1,227 @@
+#!/usr/bin/env python3
+"""One-shot bootstrap launcher for Hermes Web UI."""
+
+from __future__ import annotations
+
+import argparse
+import os
+import platform
+import shutil
+import subprocess
+import sys
+import time
+import urllib.error
+import urllib.request
+import venv
+import webbrowser
+from pathlib import Path
+
+
+INSTALLER_URL = "https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh"
+REPO_ROOT = Path(__file__).resolve().parent
+DEFAULT_HOST = os.getenv("HERMES_WEBUI_HOST", "127.0.0.1")
+DEFAULT_PORT = int(os.getenv("HERMES_WEBUI_PORT", "8787"))
+
+
+def info(msg: str) -> None:
+    print(f"[bootstrap] {msg}", flush=True)
+
+
+def is_wsl() -> bool:
+    if platform.system() != "Linux":
+        return False
+    release = platform.release().lower()
+    return (
+        "microsoft" in release or "wsl" in release or bool(os.getenv("WSL_DISTRO_NAME"))
+    )
+
+
+def ensure_supported_platform() -> None:
+    if platform.system() == "Windows" and not is_wsl():
+        raise RuntimeError(
+            "Native Windows is not supported for this bootstrap yet. "
+            "Please run it from Linux, macOS, or inside WSL2."
+        )
+
+
+def discover_agent_dir() -> Path | None:
+    home = Path(os.getenv("HERMES_HOME", str(Path.home() / ".hermes"))).expanduser()
+    candidates = [
+        os.getenv("HERMES_WEBUI_AGENT_DIR", ""),
+        str(home / "hermes-agent"),
+        str(REPO_ROOT.parent / "hermes-agent"),
+        str(Path.home() / ".hermes" / "hermes-agent"),
+        str(Path.home() / "hermes-agent"),
+    ]
+    for raw in candidates:
+        if not raw:
+            continue
+        candidate = Path(raw).expanduser().resolve()
+        if candidate.exists() and (candidate / "run_agent.py").exists():
+            return candidate
+    return None
+
+
+def discover_launcher_python(agent_dir: Path | None) -> str:
+    env_python = os.getenv("HERMES_WEBUI_PYTHON")
+    if env_python:
+        return env_python
+    if agent_dir:
+        for rel in ("venv/bin/python", "venv/Scripts/python.exe"):
+            candidate = agent_dir / rel
+            if candidate.exists():
+                return str(candidate)
+    for rel in (".venv/bin/python", ".venv/Scripts/python.exe"):
+        candidate = REPO_ROOT / rel
+        if candidate.exists():
+            return str(candidate)
+    return shutil.which("python3") or shutil.which("python") or sys.executable
+
+
+def ensure_python_has_webui_deps(python_exe: str) -> str:
+    check = subprocess.run(
+        [python_exe, "-c", "import yaml"],
+        capture_output=True,
+        text=True,
+    )
+    if check.returncode == 0:
+        return python_exe
+
+    venv_dir = REPO_ROOT / ".venv"
+    venv_python = venv_dir / (
+        "Scripts/python.exe" if platform.system() == "Windows" else "bin/python"
+    )
+    if not venv_python.exists():
+        info(f"Creating local virtualenv at {venv_dir}")
+        venv.EnvBuilder(with_pip=True).create(venv_dir)
+
+    info("Installing WebUI dependencies into local virtualenv")
+    subprocess.run(
+        [str(venv_python), "-m", "pip", "install", "--quiet", "--upgrade", "pip"],
+        check=True,
+    )
+    subprocess.run(
+        [
+            str(venv_python),
+            "-m",
+            "pip",
+            "install",
+            "--quiet",
+            "-r",
+            str(REPO_ROOT / "requirements.txt"),
+        ],
+        check=True,
+    )
+    return str(venv_python)
+
+
+def hermes_command_exists() -> bool:
+    return shutil.which("hermes") is not None
+
+
+def install_hermes_agent() -> None:
+    info(f"Hermes Agent not found. Attempting install via {INSTALLER_URL}")
+    subprocess.run(
+        ["/bin/bash", "-lc", f"curl -fsSL {INSTALLER_URL} | bash"], check=True
+    )
+
+
+def wait_for_health(url: str, timeout: float = 25.0) -> bool:
+    deadline = time.time() + timeout
+    while time.time() < deadline:
+        try:
+            with urllib.request.urlopen(url, timeout=2) as response:
+                if b'"status": "ok"' in response.read():
+                    return True
+        except Exception:
+            time.sleep(0.4)
+    return False
+
+
+def open_browser(url: str) -> None:
+    try:
+        webbrowser.open(url)
+    except Exception as exc:
+        info(f"Could not open browser automatically: {exc}")
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description="Bootstrap Hermes Web UI onboarding.")
+    parser.add_argument("port", nargs="?", type=int, default=DEFAULT_PORT)
+    parser.add_argument("--host", default=DEFAULT_HOST)
+    parser.add_argument(
+        "--no-browser",
+        action="store_true",
+        help="Do not open a browser tab automatically.",
+    )
+    parser.add_argument(
+        "--skip-agent-install",
+        action="store_true",
+        help="Fail instead of attempting the official Hermes installer.",
+    )
+    return parser.parse_args()
+
+
+def main() -> int:
+    args = parse_args()
+    ensure_supported_platform()
+
+    agent_dir = discover_agent_dir()
+    if not agent_dir and not hermes_command_exists():
+        if args.skip_agent_install:
+            raise RuntimeError(
+                "Hermes Agent was not found and auto-install was disabled."
+            )
+        install_hermes_agent()
+        agent_dir = discover_agent_dir()
+
+    python_exe = ensure_python_has_webui_deps(discover_launcher_python(agent_dir))
+    state_dir = Path(
+        os.getenv("HERMES_WEBUI_STATE_DIR", str(Path.home() / ".hermes" / "webui"))
+    ).expanduser()
+    state_dir.mkdir(parents=True, exist_ok=True)
+    log_path = state_dir / f"bootstrap-{args.port}.log"
+
+    env = os.environ.copy()
+    env["HERMES_WEBUI_HOST"] = args.host
+    env["HERMES_WEBUI_PORT"] = str(args.port)
+    env.setdefault("HERMES_WEBUI_STATE_DIR", str(state_dir))
+    if agent_dir:
+        env["HERMES_WEBUI_AGENT_DIR"] = str(agent_dir)
+
+    info(f"Starting Hermes Web UI on http://{args.host}:{args.port}")
+    with log_path.open("ab") as log_file:
+        proc = subprocess.Popen(
+            [python_exe, str(REPO_ROOT / "server.py")],
+            cwd=str(agent_dir or REPO_ROOT),
+            env=env,
+            stdout=log_file,
+            stderr=subprocess.STDOUT,
+            start_new_session=True,
+        )
+
+    health_url = f"http://{args.host}:{args.port}/health"
+    if not wait_for_health(health_url):
+        raise RuntimeError(
+            f"Web UI did not become healthy at {health_url}. "
+            f"Check the log at {log_path}. Server PID: {proc.pid}"
+        )
+
+    app_url = (
+        f"http://localhost:{args.port}"
+        if args.host in ("127.0.0.1", "localhost")
+        else f"http://{args.host}:{args.port}"
+    )
+    info(f"Web UI is ready: {app_url}")
+    info(f"Log file: {log_path}")
+    if not args.no_browser:
+        open_browser(app_url)
+    return 0
+
+
+if __name__ == "__main__":
+    try:
+        raise SystemExit(main())
+    except Exception as exc:
+        print(f"[bootstrap] ERROR: {exc}", file=sys.stderr)
+        raise SystemExit(1)

docker-compose.two-container.yml

@@ -0,0 +1,55 @@
+# Two-container Docker Compose: Hermes Agent + Hermes WebUI
+#
+# This runs the agent and web UI in separate containers connected via
+# shared volumes. The WebUI installs the agent's Python dependencies
+# at startup from the shared agent source volume.
+#
+# Usage:
+#   docker compose -f docker-compose.two-container.yml up -d
+#
+# The agent container runs the gateway (CLI, Telegram, cron, etc.).
+# The WebUI container serves the browser interface on port 8787.
+# Both share ~/.hermes for config, sessions, and state.
+
+services:
+  hermes-agent:
+    image: nousresearch/hermes-agent:latest
+    container_name: hermes-agent
+    volumes:
+      # Persist config, state, sessions, skills, memory across restarts
+      - hermes-home:/root/.hermes
+      # Expose agent source so the WebUI can install dependencies from it
+      - hermes-agent-src:/opt/hermes
+    environment:
+      - HERMES_HOME=/root/.hermes
+    restart: unless-stopped
+
+  hermes-webui:
+    image: ghcr.io/nesquena/hermes-webui:latest
+    container_name: hermes-webui
+    depends_on:
+      - hermes-agent
+    ports:
+      - "127.0.0.1:8787:8787"
+    volumes:
+      # Same hermes home as the agent — shares config, sessions, state
+      - hermes-home:/home/hermeswebui/.hermes
+      # Agent source mounted where docker_init.bash expects it.
+      # At startup the init script runs:
+      #   uv pip install /home/hermeswebui/.hermes/hermes-agent
+      # which installs the agent and all its Python dependencies.
+      - hermes-agent-src:/home/hermeswebui/.hermes/hermes-agent
+    environment:
+      - HERMES_WEBUI_HOST=0.0.0.0
+      - HERMES_WEBUI_PORT=8787
+      - HERMES_WEBUI_STATE_DIR=/home/hermeswebui/.hermes/webui-mvp
+      # Match your host user's UID/GID for correct file permissions
+      - WANTED_UID=${UID:-1000}
+      - WANTED_GID=${GID:-1000}
+      # Optional: set a password for remote access
+      # - HERMES_WEBUI_PASSWORD=your-secret-password
+    restart: unless-stopped
+
+volumes:
+  hermes-home:
+  hermes-agent-src:

start.sh

@@ -1,260 +1,25 @@
 #!/usr/bin/env bash
-# ============================================================
-# Hermes Web UI -- portable bootstrap
-# Usage: ./start.sh [port]
-#
-# One-command startup. Discovers your Hermes install, sets up
-# a local virtualenv if needed, installs dependencies, then
-# launches the server and prints everything you need to know.
-#
-# Override any step with environment variables:
-#   HERMES_WEBUI_AGENT_DIR   path to hermes-agent checkout
-#   HERMES_WEBUI_PYTHON      python executable to use
-#   HERMES_WEBUI_PORT        port to listen on (default: 8787)
-#   HERMES_WEBUI_HOST        bind address (default: 127.0.0.1)
-#   HERMES_HOME              override ~/.hermes base
-#   HERMES_WEBUI_STATE_DIR   override state directory
-# ============================================================
-
 set -euo pipefail
 
-# ── Load .env if present (machine-local overrides, not committed) ─────────────
-_SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-if [[ -f "${_SCRIPT_DIR}/.env" ]]; then
-    set -a
-    # shellcheck source=/dev/null
-    source "${_SCRIPT_DIR}/.env"
-    set +a
-fi
-
-# ── Colours ──────────────────────────────────────────────────────────────────
-RED='\033[0;31m'; GREEN='\033[0;32m'; YELLOW='\033[1;33m'
-CYAN='\033[0;36m'; BOLD='\033[1m'; RESET='\033[0m'
-ok()   { echo -e "${GREEN}[ok]${RESET} $*"; }
-warn() { echo -e "${YELLOW}[!!]${RESET} $*"; }
-die()  { echo -e "${RED}[XX]${RESET} $*" >&2; exit 1; }
-info() { echo -e "${CYAN}[--]${RESET} $*"; }
-hdr()  { echo -e "\n${BOLD}$*${RESET}"; }
-
-# ── Resolve repo root (the directory this script lives in) ───────────────────
 REPO_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-info "Repo root: ${REPO_ROOT}"
 
-# ── Port ─────────────────────────────────────────────────────────────────────
-PORT="${1:-${HERMES_WEBUI_PORT:-8787}}"
-export HERMES_WEBUI_PORT="${PORT}"
-
-# ── Python discovery ─────────────────────────────────────────────────────────
-hdr "Discovering Python..."
-
-_find_python() {
-    # 1. Explicit env var
-    if [[ -n "${HERMES_WEBUI_PYTHON:-}" ]]; then
-        echo "${HERMES_WEBUI_PYTHON}"; return
-    fi
-
-    # 2. Agent venv (discovered below -- call again after agent dir found)
-    # (handled after agent dir discovery)
-
-    # 3. Local .venv in repo
-    if [[ -x "${REPO_ROOT}/.venv/bin/python" ]]; then
-        echo "${REPO_ROOT}/.venv/bin/python"; return
-    fi
-
-    # 4. System python3
-    if command -v python3 &>/dev/null; then
-        echo "$(command -v python3)"; return
-    fi
-
-    echo ""
-}
-
-PYTHON="$(_find_python)"
-
-# ── Hermes agent discovery ────────────────────────────────────────────────────
-hdr "Discovering Hermes agent..."
-
-HERMES_HOME="${HERMES_HOME:-${HOME}/.hermes}"
-AGENT_DIR=""
-
-_find_agent() {
-    local candidates=(
-        "${HERMES_WEBUI_AGENT_DIR:-}"
-        "${HERMES_HOME}/hermes-agent"
-        "${REPO_ROOT}/../hermes-agent"
-        "${HOME}/.hermes/hermes-agent"
-        "${HOME}/hermes-agent"
-    )
-
-    for d in "${candidates[@]}"; do
-        [[ -z "$d" ]] && continue
-        d="$(cd "${d}" 2>/dev/null && pwd || true)"
-        if [[ -n "$d" && -f "${d}/run_agent.py" ]]; then
-            echo "$d"; return
-        fi
-    done
-    echo ""
-}
-
-AGENT_DIR="$(_find_agent)"
-
-if [[ -n "${AGENT_DIR}" ]]; then
-    ok "Hermes agent: ${AGENT_DIR}"
-    export HERMES_WEBUI_AGENT_DIR="${AGENT_DIR}"
-
-    # Now that we have agent dir, prefer its venv if we don't already have a python
-    if [[ -z "${HERMES_WEBUI_PYTHON:-}" && -x "${AGENT_DIR}/venv/bin/python" ]]; then
-        PYTHON="${AGENT_DIR}/venv/bin/python"
-    fi
-else
-    warn "Hermes agent not found. Agent features will not work."
-    warn "Fix with: export HERMES_WEBUI_AGENT_DIR=/path/to/hermes-agent"
+if [[ -f "${REPO_ROOT}/.env" ]]; then
+  set -a
+  # shellcheck source=/dev/null
+  source "${REPO_ROOT}/.env"
+  set +a
 fi
 
-if [[ -n "${PYTHON}" ]]; then
-    ok "Python: ${PYTHON}  ($(${PYTHON} --version 2>&1))"
-else
-    warn "No Python found. Attempting to install..."
-    if command -v apt-get &>/dev/null; then
-        sudo apt-get install -y python3 python3-venv python3-pip
-    elif command -v brew &>/dev/null; then
-        brew install python3
-    else
-        die "Could not find or install Python. Please install Python 3.8+ and re-run."
-    fi
+PYTHON="${HERMES_WEBUI_PYTHON:-}"
+if [[ -z "${PYTHON}" ]]; then
+  if command -v python3 >/dev/null 2>&1; then
     PYTHON="$(command -v python3)"
-    ok "Python installed: ${PYTHON}"
+  elif command -v python >/dev/null 2>&1; then
+    PYTHON="$(command -v python)"
+  else
+    echo "[XX] Python 3 is required to run bootstrap.py" >&2
+    exit 1
+  fi
 fi
 
-# ── Minimum Python version check ─────────────────────────────────────────────
-PY_VER="$(${PYTHON} -c 'import sys; print(f"{sys.version_info.major}.{sys.version_info.minor}")')"
-PY_MAJOR="$(echo "${PY_VER}" | cut -d. -f1)"
-PY_MINOR="$(echo "${PY_VER}" | cut -d. -f2)"
-if [[ "${PY_MAJOR}" -lt 3 || ( "${PY_MAJOR}" -eq 3 && "${PY_MINOR}" -lt 8 ) ]]; then
-    die "Python 3.8+ required. Found: ${PY_VER}"
-fi
-
-# ── Dependency check / local venv setup ──────────────────────────────────────
-hdr "Checking dependencies..."
-
-VENV_NEEDED=false
-VENV_PATH="${REPO_ROOT}/.venv"
-
-# If the chosen python is already the agent venv, its deps are already installed.
-# If it is a system python, check if we can import the webui deps, create a local
-# .venv if not.
-_check_deps() {
-    "${PYTHON}" -c "import yaml" 2>/dev/null
-}
-
-if ! _check_deps; then
-    info "PyYAML not found in ${PYTHON}. Creating local .venv..."
-
-    if [[ ! -d "${VENV_PATH}" ]]; then
-        "${PYTHON}" -m venv "${VENV_PATH}" || die "Failed to create virtualenv at ${VENV_PATH}"
-    fi
-
-    VENV_PY="${VENV_PATH}/bin/python"
-    "${VENV_PY}" -m pip install --quiet --upgrade pip
-
-    if [[ -f "${REPO_ROOT}/requirements.txt" ]]; then
-        info "Installing from requirements.txt..."
-        "${VENV_PY}" -m pip install --quiet -r "${REPO_ROOT}/requirements.txt"
-    else
-        info "Installing minimal deps (pyyaml)..."
-        "${VENV_PY}" -m pip install --quiet pyyaml
-    fi
-
-    PYTHON="${VENV_PY}"
-    ok "Local venv ready: ${VENV_PATH}"
-else
-    ok "Dependencies satisfied."
-fi
-
-# ── Kill any stale instance on the same port ─────────────────────────────────
-hdr "Checking for existing instances..."
-
-EXISTING=$(lsof -ti tcp:"${PORT}" 2>/dev/null || true)
-if [[ -n "${EXISTING}" ]]; then
-    warn "Killing existing process on port ${PORT} (PID ${EXISTING})"
-    kill "${EXISTING}" 2>/dev/null || true
-    sleep 0.5
-fi
-
-# Also kill any server.py process from this repo
-pkill -f "${REPO_ROOT}/server.py" 2>/dev/null || true
-
-# ── Set up working directory for Hermes imports ───────────────────────────────
-# server.py / api/config.py inject agent dir into sys.path at import time,
-# but we also cd into the agent dir so relative imports in run_agent work.
-if [[ -n "${AGENT_DIR}" ]]; then
-    WORKDIR="${AGENT_DIR}"
-else
-    WORKDIR="${REPO_ROOT}"
-fi
-
-# ── Launch ───────────────────────────────────────────────────────────────────
-hdr "Starting Hermes Web UI..."
-
-LOG="/tmp/hermes-webui-${PORT}.log"
-export HERMES_WEBUI_HOST="${HERMES_WEBUI_HOST:-127.0.0.1}"
-export HERMES_WEBUI_STATE_DIR="${HERMES_WEBUI_STATE_DIR:-${HERMES_HOME}/webui}"
-
-nohup "${PYTHON}" "${REPO_ROOT}/server.py" \
-    > "${LOG}" 2>&1 &
-PID=$!
-
-echo -e "\n${CYAN}  PID ${PID} starting...${RESET}"
-sleep 1.5
-
-# ── Health check ─────────────────────────────────────────────────────────────
-HEALTH_URL="http://${HERMES_WEBUI_HOST:-127.0.0.1}:${PORT}/health"
-MAX_WAIT=15
-ELAPSED=0
-while [[ $ELAPSED -lt $MAX_WAIT ]]; do
-    if curl -sf "${HEALTH_URL}" | grep -q '"status"' 2>/dev/null; then
-        break
-    fi
-    sleep 0.5
-    ELAPSED=$((ELAPSED + 1))
-done
-
-if ! curl -sf "${HEALTH_URL}" | grep -q '"status"' 2>/dev/null; then
-    warn "Health check did not pass within ${MAX_WAIT}s. Check log:"
-    tail -20 "${LOG}"
-    echo ""
-    warn "Server may still be starting. Try: curl ${HEALTH_URL}"
-else
-    ok "Server is healthy."
-fi
-
-# ── Print access instructions ─────────────────────────────────────────────────
-BIND_HOST="${HERMES_WEBUI_HOST:-127.0.0.1}"
-
-echo ""
-echo -e "${BOLD}========================================${RESET}"
-echo -e "${GREEN}  Hermes Web UI is running${RESET}"
-echo -e "${BOLD}========================================${RESET}"
-echo ""
-
-if [[ "${BIND_HOST}" == "127.0.0.1" || "${BIND_HOST}" == "localhost" ]]; then
-    # Server is bound to loopback -- detect if we are on a remote machine
-    # by checking if $SSH_CLIENT or $SSH_TTY is set
-    if [[ -n "${SSH_CLIENT:-}" || -n "${SSH_TTY:-}" ]]; then
-        SERVER_IP="$(hostname -I 2>/dev/null | awk '{print $1}' || echo "<your-server-ip>")"
-        echo -e "  You are on a remote machine. To access from your local browser:"
-        echo ""
-        echo -e "  ${CYAN}ssh -N -L ${PORT}:127.0.0.1:${PORT} \$(whoami)@${SERVER_IP}${RESET}"
-        echo ""
-        echo -e "  Then open: ${BOLD}http://localhost:${PORT}${RESET}"
-    else
-        echo -e "  Open: ${BOLD}http://localhost:${PORT}${RESET}"
-    fi
-else
-    echo -e "  Open: ${BOLD}http://${BIND_HOST}:${PORT}${RESET}"
-fi
-
-echo ""
-echo -e "  Log:  ${LOG}"
-echo -e "  PID:  ${PID}"
-echo ""
+exec "${PYTHON}" "${REPO_ROOT}/bootstrap.py" --no-browser "$@"

static/boot.js

@@ -3,12 +3,124 @@ async function cancelStream(){
   if(!streamId) return;
   try{
     await fetch(new URL(`/api/chat/cancel?stream_id=${encodeURIComponent(streamId)}`,location.origin).href,{credentials:'include'});
-    const btn=$('btnCancel');if(btn)btn.style.display='none';
-    // Don't set status here - let the SSE cancel event handle UI cleanup
-  }catch(e){setStatus(t('cancel_failed')+e.message);}
+  }catch(e){/* cancel request failed — cleanup below still runs */}
+  // Clear status unconditionally after the cancel request completes.
+  // The SSE cancel event may also fire, but if the connection is already
+  // closed it won't arrive — so we handle cleanup here as the guaranteed path.
+  const btn=$('btnCancel');if(btn)btn.style.display='none';
+  S.activeStreamId=null;
+  setBusy(false);
+  if(typeof setComposerStatus==='function') setComposerStatus('');
+  else setStatus('');
 }
 
 // ── Mobile navigation ──────────────────────────────────────────────────────
+let _workspacePanelMode='closed'; // 'closed' | 'browse' | 'preview'
+
+function _isCompactWorkspaceViewport(){
+  return window.matchMedia('(max-width: 900px)').matches;
+}
+
+function _workspacePanelEls(){
+  return {
+    layout: document.querySelector('.layout'),
+    panel: document.querySelector('.rightpanel'),
+    toggleBtn: $('btnWorkspacePanelToggle'),
+    collapseBtn: $('btnCollapseWorkspacePanel'),
+  };
+}
+
+function _hasWorkspacePreviewVisible(){
+  const preview=$('previewArea');
+  return !!(preview&&preview.classList.contains('visible'));
+}
+
+function _setWorkspacePanelMode(mode){
+  const {layout,panel}= _workspacePanelEls();
+  if(!layout||!panel)return;
+  _workspacePanelMode=(mode==='browse'||mode==='preview')?mode:'closed';
+  const open=_workspacePanelMode!=='closed';
+  // Persist open/closed across refreshes (browse/preview → open; closed → closed)
+  localStorage.setItem('hermes-webui-workspace-panel', open ? 'open' : 'closed');
+  layout.classList.toggle('workspace-panel-collapsed',!open);
+  if(_isCompactWorkspaceViewport()){
+    panel.classList.toggle('mobile-open',open);
+  }else{
+    panel.classList.remove('mobile-open');
+  }
+  syncWorkspacePanelUI();
+}
+
+function syncWorkspacePanelState(){
+  const hasPreview=_hasWorkspacePreviewVisible();
+  if(hasPreview){
+    if(_workspacePanelMode==='closed') _setWorkspacePanelMode('preview');
+    else syncWorkspacePanelUI();
+    return;
+  }
+  if(!S.session){
+    _setWorkspacePanelMode('closed');
+    return;
+  }
+  _setWorkspacePanelMode(_workspacePanelMode==='preview'?'closed':_workspacePanelMode);
+}
+
+function openWorkspacePanel(mode='browse'){
+  if(mode==='browse'&&!S.session&&!_hasWorkspacePreviewVisible())return;
+  if(mode==='preview'&&_workspacePanelMode==='browse'){
+    syncWorkspacePanelUI();
+    return;
+  }
+  _setWorkspacePanelMode(mode);
+}
+
+function closeWorkspacePanel(){
+  _setWorkspacePanelMode('closed');
+}
+
+function ensureWorkspacePreviewVisible(){
+  if(_workspacePanelMode==='closed') _setWorkspacePanelMode('preview');
+  else syncWorkspacePanelUI();
+}
+
+function handleWorkspaceClose(){
+  if(_hasWorkspacePreviewVisible()){
+    clearPreview();
+    return;
+  }
+  closeWorkspacePanel();
+}
+
+function syncWorkspacePanelUI(){
+  const {layout,panel,toggleBtn,collapseBtn}= _workspacePanelEls();
+  if(!layout||!panel)return;
+  const desktopOpen=_workspacePanelMode!=='closed';
+  const mobileOpen=panel.classList.contains('mobile-open');
+  const isCompact=_isCompactWorkspaceViewport();
+  const isOpen=isCompact?mobileOpen:desktopOpen;
+  const canBrowse=!!S.session||_hasWorkspacePreviewVisible();
+  const hasPreview=_hasWorkspacePreviewVisible();
+  if(toggleBtn){
+    toggleBtn.classList.toggle('active',isOpen);
+    toggleBtn.setAttribute('aria-pressed',isOpen?'true':'false');
+    toggleBtn.title=isOpen?'Hide workspace panel':'Show workspace panel';
+    toggleBtn.disabled=!canBrowse;
+  }
+  if(collapseBtn){
+    collapseBtn.title=isCompact?'Close workspace panel':'Hide workspace panel';
+  }
+  const hasSession=!!S.session;
+  ['btnUpDir','btnNewFile','btnNewFolder','btnRefreshPanel'].forEach(id=>{
+    const el=$(id);
+    if(el)el.disabled=!hasSession;
+  });
+  const clearBtn=$('btnClearPreview');
+  if(clearBtn){
+    clearBtn.disabled=!isOpen;
+    clearBtn.title=hasPreview?'Close preview':'Hide workspace panel';
+  }
+}
+
 function toggleMobileSidebar(){
   const sidebar=document.querySelector('.sidebar');
   const overlay=$('mobileOverlay');
@@ -21,37 +133,22 @@ function closeMobileSidebar(){
   const sidebar=document.querySelector('.sidebar');
   const overlay=$('mobileOverlay');
   if(sidebar)sidebar.classList.remove('mobile-open');
-  // only hide overlay if right panel is also closed
-  const panel=document.querySelector('.rightpanel');
-  if(!panel||!panel.classList.contains('mobile-open')){
-    if(overlay)overlay.classList.remove('visible');
-  }
+  if(overlay)overlay.classList.remove('visible');
 }
 function toggleMobileFiles(){
-  const panel=document.querySelector('.rightpanel');
-  const overlay=$('mobileOverlay');
-  if(!panel)return;
-  if(panel.classList.contains('mobile-open')){
-    panel.classList.remove('mobile-open');
-    // only hide overlay if left sidebar is also closed
-    const sidebar=document.querySelector('.sidebar');
-    if(!sidebar||!sidebar.classList.contains('mobile-open')){
-      if(overlay)overlay.classList.remove('visible');
-    }
-  } else {
-    panel.classList.add('mobile-open');
-    if(overlay)overlay.classList.add('visible');
-  }
+  toggleWorkspacePanel();
 }
-function closeMobileFiles(){
-  const panel=document.querySelector('.rightpanel');
-  const overlay=$('mobileOverlay');
-  if(panel)panel.classList.remove('mobile-open');
-  // only hide overlay if left sidebar is also closed
-  const sidebar=document.querySelector('.sidebar');
-  if(!sidebar||!sidebar.classList.contains('mobile-open')){
-    if(overlay)overlay.classList.remove('visible');
+function toggleWorkspacePanel(force){
+  const {panel}= _workspacePanelEls();
+  if(!panel)return;
+  const currentlyOpen=_workspacePanelMode!=='closed';
+  const nextOpen=typeof force==='boolean'?force:!currentlyOpen;
+  if(!nextOpen){
+    closeWorkspacePanel();
+    return;
   }
+  const nextMode=_hasWorkspacePreviewVisible()?'preview':'browse';
+  openWorkspacePanel(nextMode);
 }
 function mobileSwitchPanel(name){
   // Switch the panel content view
@@ -185,6 +282,8 @@ $('importFileInput').onchange=async(e)=>{
     if(res.ok&&res.session){
       await loadSession(res.session.session_id);
       await renderSessionList();
+      const overlay=$('settingsOverlay');
+      if(overlay) overlay.style.display='none';
       showToast(t('session_imported'));
     }
   }catch(err){
@@ -193,6 +292,7 @@ $('importFileInput').onchange=async(e)=>{
 };
 // btnRefreshFiles is now panel-icon-btn in header (see HTML)
 function clearPreview(){
+  const closePanelAfter=_workspacePanelMode==='preview';
   const pa=$('previewArea');if(pa)pa.classList.remove('visible');
   const pi=$('previewImg');if(pi){pi.onerror=null;pi.src='';}
   const pm=$('previewMd');if(pm)pm.innerHTML='';
@@ -200,15 +300,22 @@ function clearPreview(){
   const pp=$('previewPathText');if(pp)pp.textContent='';
   const ft=$('fileTree');if(ft)ft.style.display='';
   _previewCurrentPath='';_previewCurrentMode='';_previewDirty=false;
+  // Restore directory breadcrumb after closing file preview
+  if(typeof renderBreadcrumb==='function') renderBreadcrumb();
+  if(closePanelAfter)closeWorkspacePanel();
+  else syncWorkspacePanelUI();
 }
-$('btnClearPreview').onclick=clearPreview;
+$('btnClearPreview').onclick=handleWorkspaceClose;
 // workspacePath click handler removed -- use topbar workspace chip dropdown instead
 $('modelSelect').onchange=async()=>{
   if(!S.session)return;
   const selectedModel=$('modelSelect').value;
+  if(typeof closeModelDropdown==='function') closeModelDropdown();
   localStorage.setItem('hermes-webui-model', selectedModel);
   await api('/api/session/update',{method:'POST',body:JSON.stringify({session_id:S.session.session_id,workspace:S.session.workspace,model:selectedModel})});
-  S.session.model=selectedModel;syncTopbar();
+  S.session.model=selectedModel;
+  if(typeof syncModelChip==='function') syncModelChip();
+  syncTopbar();
   // Warn if selected model belongs to a different provider than what Hermes is configured for
   if(typeof _checkProviderMismatch==='function'){
     const warn=_checkProviderMismatch(selectedModel);
@@ -238,9 +345,14 @@ $('msg').addEventListener('keydown',e=>{
     if(e.key==='Escape'){e.preventDefault();hideCmdDropdown();return;}
     if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();selectCmdDropdownItem();return;}
   }
-  // Send key: respect user preference
+  // Send key: respect user preference.
+  // On touch-primary devices (software keyboard), default to Enter = newline
+  // since there's no physical Shift key. Users send via the Send button.
+  // The 'ctrl+enter' setting also uses this behavior (Enter = newline).
+  // Users can override in Settings by explicitly choosing 'enter' mode.
   if(e.key==='Enter'){
-    if(window._sendKey==='ctrl+enter'){
+    const _mobileDefault=matchMedia('(pointer:coarse)').matches&&window._sendKey==='enter';
+    if(window._sendKey==='ctrl+enter'||_mobileDefault){
       if(e.ctrlKey||e.metaKey){e.preventDefault();send();}
     } else {
       if(!e.shiftKey){e.preventDefault();send();}
@@ -298,11 +410,15 @@ document.querySelectorAll('.suggestion').forEach(btn=>{
   btn.onclick=()=>{$('msg').value=btn.dataset.msg;send();};
 });
 
+window.addEventListener('resize',()=>{
+  syncWorkspacePanelState();
+});
+
 // Boot: restore last session or start fresh
 // ── Resizable panels ──────────────────────────────────────────────────────
 (function(){
   const SIDEBAR_MIN=180, SIDEBAR_MAX=420;
-  const PANEL_MIN=180,   PANEL_MAX=500;
+  const PANEL_MIN=180,   PANEL_MAX=1200;
 
   function initResize(handleId, targetEl, edge, minW, maxW, storageKey){
     const handle = $(handleId);
@@ -387,16 +503,22 @@ function applyBotName(){
   }
   // Pre-load workspace list so sidebar name is correct from first render
   await loadWorkspaceList();
+  await loadOnboardingWizard();
   _initResizePanels();
+  // Restore workspace panel open/closed state from last visit
+  if(localStorage.getItem('hermes-webui-workspace-panel')==='open'){
+    _workspacePanelMode='browse';
+  }
   const saved=localStorage.getItem('hermes-webui-session');
   if(saved){
-    try{await loadSession(saved);await renderSessionList();if(typeof startGatewaySSE==='function')startGatewaySSE();await checkInflightOnBoot(saved);return;}
+    try{await loadSession(saved);syncWorkspacePanelState();await renderSessionList();if(typeof startGatewaySSE==='function')startGatewaySSE();await checkInflightOnBoot(saved);return;}
     catch(e){localStorage.removeItem('hermes-webui-session');}
   }
   // no saved session - show empty state, wait for user to hit +
+  syncTopbar();
+  syncWorkspacePanelState();
   $('emptyState').style.display='';
   await renderSessionList();
   // Start real-time gateway session sync if setting is enabled
   if(typeof startGatewaySSE==='function') startGatewaySSE();
 })();
-

static/commands.js

@@ -86,13 +86,8 @@ async function cmdWorkspace(args){
       (w.name||'').toLowerCase().includes(q)||w.path.toLowerCase().includes(q)
     );
     if(!ws){showToast(t('no_workspace_match')+`"${args}"`);return;}
-    if(!S.session)return;
-    await api('/api/session/update',{method:'POST',body:JSON.stringify({
-      session_id:S.session.session_id,workspace:ws.path,model:S.session.model
-    })});
-    S.session.workspace=ws.path;
-    syncTopbar();await loadDir('.');
-    showToast(t('switched_workspace')+(ws.name||ws.path));
+    if(typeof switchToWorkspace==='function') await switchToWorkspace(ws.path, ws.name||ws.path);
+    else showToast(t('switched_workspace')+(ws.name||ws.path));
   }catch(e){showToast(t('workspace_switch_failed')+e.message);}
 }
 

static/i18n.js

@@ -87,10 +87,17 @@ const LOCALES = {
     failed_colon: 'Failed: ',
     // ui.js
     no_workspace: 'No workspace',
+    dialog_confirm_title: 'Confirm action',
+    dialog_prompt_title: 'Enter a value',
+    dialog_confirm_btn: 'Confirm',
     // workspace.js
     unsaved_confirm: 'You have unsaved changes in the preview. Discard and navigate?',
+    discard: 'Discard',
     save: 'Save',
     edit: 'Edit',
+    clear: 'Clear',
+    create: 'Create',
+    remove: 'Remove',
     save_title: 'Save changes',
     edit_title: 'Edit this file',
     saved: 'Saved',
@@ -106,6 +113,7 @@ const LOCALES = {
     deleted: 'Deleted ',
     delete_failed: 'Delete failed: ',
     new_file_prompt: 'New file name (e.g. notes.md):',
+    project_name_prompt: 'Project name:',
     created: 'Created ',
     create_failed: 'Create failed: ',
     new_folder_prompt: 'New folder name:',
@@ -193,6 +201,75 @@ const LOCALES = {
     suggest_files: 'What files are in this workspace?',
     suggest_schedule: "What's on my schedule today?",
     suggest_plan: 'Help me plan a small project.',
+    // onboarding
+    onboarding_badge: 'FIRST RUN',
+    onboarding_title: 'Welcome to Hermes Web UI',
+    onboarding_lead: 'A quick guided setup will verify Hermes, save a real provider configuration, choose a workspace and model, and optionally protect the app with a password.',
+    onboarding_back: 'Back',
+    onboarding_continue: 'Continue',
+    onboarding_open: 'Open Hermes',
+    onboarding_step_system_title: 'System check',
+    onboarding_step_system_desc: 'Verify Hermes Agent and config visibility.',
+    onboarding_step_setup_title: 'Provider setup',
+    onboarding_step_setup_desc: 'Save the minimum Hermes provider config.',
+    onboarding_step_workspace_title: 'Workspace + model',
+    onboarding_step_workspace_desc: 'Pick defaults for new sessions and chat.',
+    onboarding_step_password_title: 'Optional password',
+    onboarding_step_password_desc: 'Protect the Web UI before sharing it.',
+    onboarding_step_finish_title: 'Finish',
+    onboarding_step_finish_desc: 'Review and enter the app.',
+    onboarding_notice_system_ready: 'Hermes Agent looks reachable from the Web UI.',
+    onboarding_notice_system_unavailable: 'Hermes Agent is not fully available yet. Bootstrap can install it, but provider setup may still require a terminal.',
+    onboarding_check_agent: 'Hermes Agent',
+    onboarding_check_agent_ready: 'Detected and importable',
+    onboarding_check_agent_missing: 'Missing or partially importable',
+    onboarding_check_password: 'Password',
+    onboarding_check_password_enabled: 'Already enabled',
+    onboarding_check_password_disabled: 'Not enabled yet',
+    onboarding_check_provider: 'Provider config',
+    onboarding_check_provider_ready: 'Ready to chat',
+    onboarding_check_provider_partial: 'Saved but incomplete',
+    onboarding_check_provider_pending: 'Needs verification',
+    onboarding_config_file: 'Config file:',
+    onboarding_env_file: '.env file:',
+    onboarding_unknown: 'Unknown',
+    onboarding_current_provider: 'Current setup:',
+    onboarding_missing_imports: 'Missing imports:',
+    onboarding_notice_setup_required: 'Choose a simple provider path here. Advanced OAuth flows still belong in the Hermes CLI for now.',
+    onboarding_notice_setup_already_ready: 'A working Hermes provider setup is already detected. You can keep it or replace it here.',
+    onboarding_notice_workspace: 'These values reuse the same settings APIs as the normal app.',
+    onboarding_workspace_label: 'Workspace',
+    onboarding_workspace_or_path: 'Or enter a workspace path',
+    onboarding_workspace_placeholder: '/home/you/workspace',
+    onboarding_provider_label: 'Setup mode',
+    onboarding_quick_setup_badge: 'quick setup',
+    onboarding_api_key_label: 'API key',
+    onboarding_api_key_placeholder: 'Leave blank to keep an existing saved key',
+    onboarding_api_key_help_prefix: 'Saved as a secret in your Hermes .env file using',
+    onboarding_base_url_label: 'Base URL',
+    onboarding_base_url_placeholder: 'https://your-endpoint.example/v1',
+    onboarding_base_url_help: 'Use this for OpenAI-compatible routers, self-hosted servers, LiteLLM, Ollama, LM Studio, vLLM, or similar endpoints.',
+    onboarding_model_label: 'Default model',
+    onboarding_workspace_help: 'Pick the model Hermes should use for new chats after setup completes.',
+    onboarding_custom_model_placeholder: 'your-model-name',
+    onboarding_custom_model_help: 'For custom endpoints, enter the exact model ID your server expects.',
+    onboarding_notice_password_enabled: 'A password is already configured. Enter a new one only if you want to replace it.',
+    onboarding_notice_password_recommended: 'Optional but recommended if you will expose the UI beyond localhost.',
+    onboarding_password_label: 'Password (optional)',
+    onboarding_password_placeholder: 'Leave blank to skip',
+    onboarding_password_help: 'Passwords are stored through the existing settings API and hashed server-side.',
+    onboarding_notice_finish: 'You can reopen Settings later to change any of this.',
+    onboarding_not_set: 'Not set',
+    onboarding_password_will_enable: 'Will be enabled',
+    onboarding_password_skipped: 'Skipped for now',
+    onboarding_finish_help: 'Finishing stores <code>onboarding_completed</code> in settings and drops you into the normal app.',
+    onboarding_error_choose_workspace: 'Choose a workspace before continuing.',
+    onboarding_error_choose_model: 'Choose a model before continuing.',
+    onboarding_error_provider_required: 'Choose a setup mode before continuing.',
+    onboarding_error_base_url_required: 'Base URL is required for custom endpoints.',
+    onboarding_error_workspace_required: 'Workspace is required.',
+    onboarding_error_model_required: 'Model is required.',
+    onboarding_complete: 'Onboarding complete',
   },
 
   es: {
@@ -384,6 +461,75 @@ const LOCALES = {
     suggest_files: '¿Qué archivos hay en este espacio de trabajo?',
     suggest_schedule: '¿Qué tengo hoy en mi agenda?',
     suggest_plan: 'Ayúdame a planificar un proyecto pequeño.',
+    // onboarding
+    onboarding_badge: 'PRIMER USO',
+    onboarding_title: 'Bienvenido a Hermes Web UI',
+    onboarding_lead: 'Una guía rápida verificará Hermes, guardará una configuración real del proveedor, elegirá un espacio de trabajo y un modelo, y opcionalmente protegerá la app con una contraseña.',
+    onboarding_back: 'Atrás',
+    onboarding_continue: 'Continuar',
+    onboarding_open: 'Abrir Hermes',
+    onboarding_step_system_title: 'Comprobación del sistema',
+    onboarding_step_system_desc: 'Verifica Hermes Agent y la visibilidad de la configuración.',
+    onboarding_step_setup_title: 'Configuración del proveedor',
+    onboarding_step_setup_desc: 'Guarda la configuración mínima real de Hermes.',
+    onboarding_step_workspace_title: 'Espacio de trabajo + modelo',
+    onboarding_step_workspace_desc: 'Elige los valores predeterminados para nuevas sesiones y chats.',
+    onboarding_step_password_title: 'Contraseña opcional',
+    onboarding_step_password_desc: 'Protege la Web UI antes de compartirla.',
+    onboarding_step_finish_title: 'Finalizar',
+    onboarding_step_finish_desc: 'Revisa todo y entra en la app.',
+    onboarding_notice_system_ready: 'Parece que Hermes Agent está accesible desde la Web UI.',
+    onboarding_notice_system_unavailable: 'Hermes Agent todavía no está totalmente disponible. Bootstrap puede instalarlo, pero la configuración del proveedor quizá aún requiera una terminal.',
+    onboarding_check_agent: 'Hermes Agent',
+    onboarding_check_agent_ready: 'Detectado e importable',
+    onboarding_check_agent_missing: 'Falta o solo es parcialmente importable',
+    onboarding_check_password: 'Contraseña',
+    onboarding_check_password_enabled: 'Ya está activada',
+    onboarding_check_password_disabled: 'Todavía no está activada',
+    onboarding_check_provider: 'Configuración del proveedor',
+    onboarding_check_provider_ready: 'Listo para chatear',
+    onboarding_check_provider_partial: 'Guardado pero incompleto',
+    onboarding_check_provider_pending: 'Necesita verificación',
+    onboarding_config_file: 'Archivo de configuración:',
+    onboarding_env_file: 'Archivo .env:',
+    onboarding_unknown: 'Desconocido',
+    onboarding_current_provider: 'Configuración actual:',
+    onboarding_missing_imports: 'Importaciones faltantes:',
+    onboarding_notice_setup_required: 'Elige aquí una ruta simple de proveedor. Los flujos OAuth avanzados siguen siendo del CLI de Hermes por ahora.',
+    onboarding_notice_setup_already_ready: 'Ya se detectó una configuración funcional del proveedor de Hermes. Puedes conservarla o reemplazarla aquí.',
+    onboarding_notice_workspace: 'Estos valores reutilizan las mismas APIs de configuración que la app normal.',
+    onboarding_workspace_label: 'Espacio de trabajo',
+    onboarding_workspace_or_path: 'O introduce la ruta de un espacio de trabajo',
+    onboarding_workspace_placeholder: '/home/you/workspace',
+    onboarding_provider_label: 'Modo de configuración',
+    onboarding_quick_setup_badge: 'configuración rápida',
+    onboarding_api_key_label: 'API key',
+    onboarding_api_key_placeholder: 'Déjala en blanco para conservar una key ya guardada',
+    onboarding_api_key_help_prefix: 'Se guarda como secreto en tu archivo .env de Hermes usando',
+    onboarding_base_url_label: 'Base URL',
+    onboarding_base_url_placeholder: 'https://tu-endpoint.example/v1',
+    onboarding_base_url_help: 'Úsalo para routers OpenAI-compatible, servidores autoalojados, LiteLLM, Ollama, LM Studio, vLLM o endpoints parecidos.',
+    onboarding_model_label: 'Modelo predeterminado',
+    onboarding_workspace_help: 'Elige el modelo que Hermes debe usar para nuevos chats cuando termine la configuración.',
+    onboarding_custom_model_placeholder: 'tu-modelo',
+    onboarding_custom_model_help: 'Para endpoints personalizados, introduce el identificador exacto del modelo que espera tu servidor.',
+    onboarding_notice_password_enabled: 'Ya hay una contraseña configurada. Introduce una nueva solo si quieres reemplazarla.',
+    onboarding_notice_password_recommended: 'Es opcional, pero recomendable si vas a exponer la UI más allá de localhost.',
+    onboarding_password_label: 'Contraseña (opcional)',
+    onboarding_password_placeholder: 'Déjala en blanco para omitirla',
+    onboarding_password_help: 'Las contraseñas se guardan mediante la API de configuración existente y se hashean en el servidor.',
+    onboarding_notice_finish: 'Puedes volver a abrir Configuración más tarde para cambiar cualquiera de estos valores.',
+    onboarding_not_set: 'Sin definir',
+    onboarding_password_will_enable: 'Se activará',
+    onboarding_password_skipped: 'Se omitirá por ahora',
+    onboarding_finish_help: 'Al finalizar se guarda <code>onboarding_completed</code> en la configuración y entras en la app normal.',
+    onboarding_error_choose_workspace: 'Elige un espacio de trabajo antes de continuar.',
+    onboarding_error_choose_model: 'Elige un modelo antes de continuar.',
+    onboarding_error_provider_required: 'Elige un modo de configuración antes de continuar.',
+    onboarding_error_base_url_required: 'La base URL es obligatoria para endpoints personalizados.',
+    onboarding_error_workspace_required: 'El espacio de trabajo es obligatorio.',
+    onboarding_error_model_required: 'El modelo es obligatorio.',
+    onboarding_complete: 'Onboarding completado',
   },
 
   de: {
@@ -469,10 +615,17 @@ const LOCALES = {
     failed_colon: 'Fehlgeschlagen: ',
     // ui.js
     no_workspace: 'Kein Workspace',
+    dialog_confirm_title: 'Aktion bestätigen',
+    dialog_prompt_title: 'Wert eingeben',
+    dialog_confirm_btn: 'Bestätigen',
     // workspace.js
     unsaved_confirm: 'Sie haben ungespeicherte Änderungen in der Vorschau. Verwerfen und fortfahren?',
+    discard: 'Verwerfen',
     save: 'Speichern',
     edit: 'Bearbeiten',
+    clear: 'Leeren',
+    create: 'Erstellen',
+    remove: 'Entfernen',
     save_title: 'Änderungen speichern',
     edit_title: 'Diese Datei bearbeiten',
     saved: 'Gespeichert',
@@ -488,6 +641,7 @@ const LOCALES = {
     deleted: 'Gelöscht ',
     delete_failed: 'Löschen fehlgeschlagen: ',
     new_file_prompt: 'Neuer Dateiname (z.B. notes.md):',
+    project_name_prompt: 'Projektname:',
     created: 'Erstellt ',
     create_failed: 'Erstellen fehlgeschlagen: ',
     new_folder_prompt: 'Neuer Ordnername:',
@@ -660,10 +814,17 @@ const LOCALES = {
     failed_colon: '\u5931\u8d25\uff1a',
     // ui.js
     no_workspace: '\u672a\u9009\u62e9\u5de5\u4f5c\u533a',
+    dialog_confirm_title: '\u786e\u8ba4\u64cd\u4f5c',
+    dialog_prompt_title: '\u8f93\u5165\u5185\u5bb9',
+    dialog_confirm_btn: '\u786e\u8ba4',
     // workspace.js
     unsaved_confirm: '\u9884\u89c8\u533a\u6709\u672a\u4fdd\u5b58\u4fee\u6539\uff0c\u8981\u653e\u5f03\u66f4\u6539\u5e76\u7ee7\u7eed\u8df3\u8f6c\u5417\uff1f',
+    discard: '\u653e\u5f03',
     save: '\u4fdd\u5b58',
     edit: '\u7f16\u8f91',
+    clear: '\u6e05\u7a7a',
+    create: '\u521b\u5efa',
+    remove: '\u79fb\u9664',
     save_title: '\u4fdd\u5b58\u4fee\u6539',
     edit_title: '\u7f16\u8f91\u6b64\u6587\u4ef6',
     saved: '\u5df2\u4fdd\u5b58',
@@ -679,6 +840,7 @@ const LOCALES = {
     deleted: '\u5df2\u5220\u9664 ',
     delete_failed: '\u5220\u9664\u5931\u8d25\uff1a',
     new_file_prompt: '\u65b0\u6587\u4ef6\u540d\uff08\u4f8b\u5982 notes.md\uff09\uff1a',
+    project_name_prompt: '\u9879\u76ee\u540d\u79f0\uff1a',
     created: '\u5df2\u521b\u5efa ',
     create_failed: '\u521b\u5efa\u5931\u8d25\uff1a',
     new_folder_prompt: '\u65b0\u6587\u4ef6\u5939\u540d\u79f0\uff1a',

static/icons.js

@@ -14,7 +14,9 @@ const LI_PATHS = {
   'list-todo':       '<rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>',
   // Editing / actions
   'pencil':          '<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>',
+  'save':            '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>',
   'chevron-down':    '<polyline points="6 9 12 15 18 9"/>',
+  'chevron-right':   '<polyline points="9 18 15 12 9 6"/>',
   'download':        '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
   'upload':          '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
   'braces':          '<path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/>',
@@ -29,7 +31,9 @@ const LI_PATHS = {
   'square':          '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>',
   'plus':            '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
   'arrow-up':        '<line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>',
+  'arrow-right':     '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
   'loader':          '<line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>',
+  'pause':           '<rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/>',
   // Tool icons
   'terminal':        '<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>',
   'file-text':       '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>',
@@ -44,6 +48,10 @@ const LI_PATHS = {
   'bot':             '<rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/>',
   'eye':             '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>',
   'shuffle':         '<polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/>',
+  'paperclip':       '<path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.82-2.82l8.48-8.48"/>',
+  'copy':            '<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>',
+  'rotate-ccw':      '<path d="M3 2v6h6"/><path d="M3 8a9 9 0 1 0 2.64-4.36L3 8"/>',
+  'user':            '<path d="M20 21a8 8 0 0 0-16 0"/><circle cx="12" cy="7" r="4"/>',
   // File-type icons
   'image':           '<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>',
   'file-code':       '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><polyline points="10 13 8 15 10 17"/><polyline points="14 13 16 15 14 17"/>',

static/index.html

@@ -14,7 +14,7 @@
 <body>
 <div class="layout">
   <aside class="sidebar">
-    <div class="sidebar-header"><div class="logo">H</div><div><h1 style="margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em">Hermes</h1><div style="font-size:10px;color:var(--muted);opacity:.8;margin-top:1px">v0.48.2</div></div></div>
+
     <div class="sidebar-nav">
       <button class="nav-tab active" data-panel="chat" data-label="Chat" onclick="switchPanel('chat')" title="Chat" data-i18n-title="tab_chat"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></button>
       <button class="nav-tab" data-panel="tasks" data-label="Tasks" onclick="switchPanel('tasks')" title="Tasks" data-i18n-title="tab_tasks"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></button>
@@ -29,7 +29,7 @@
       <div class="sidebar-section">
         <button class="new-chat-btn" id="btnNewChat">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-          <span data-i18n="new_conversation">New conversation</span> <span style="font-size:10px;opacity:.5;margin-left:4px">&#8984;K</span>
+          <span data-i18n="new_conversation">New conversation</span> <span style="font-size:10px;opacity:.5;margin-left:4px">Cmd+K</span>
         </button>
       </div>
       <div class="session-search"><input id="sessionSearch" placeholder="Filter conversations..." data-i18n-placeholder="filter_conversations" oninput="filterSessions()"></div>
@@ -134,42 +134,30 @@
       <div style="flex:1;overflow-y:auto;padding:0 12px 12px" id="profilesPanel"><div style="color:var(--muted);font-size:12px">Loading...</div></div>
     </div>
     <div class="sidebar-bottom">
-      <div class="field-label" style="font-size:10px;letter-spacing:.07em;margin-bottom:4px">MODEL</div>
-      <select id="modelSelect">
-        <optgroup label="OpenAI">
-          <option value="openai/gpt-5.4-mini">GPT-5.4 Mini</option>
-          <option value="openai/gpt-4o">GPT-4o</option>
-          <option value="openai/o3">o3</option>
-          <option value="openai/o4-mini">o4-mini</option>
-        </optgroup>
-        <optgroup label="Anthropic">
-          <option value="anthropic/claude-sonnet-4.6">Claude Sonnet 4.6</option>
-          <option value="anthropic/claude-sonnet-4-5">Claude Sonnet 4.5</option>
-          <option value="anthropic/claude-haiku-3-5">Claude Haiku 3.5</option>
-        </optgroup>
-        <optgroup label="Other">
-          <option value="google/gemini-2.5-pro">Gemini 2.5 Pro</option>
-          <option value="deepseek/deepseek-chat-v3-0324">DeepSeek V3</option>
-          <option value="meta-llama/llama-4-scout">Llama 4 Scout</option>
-        </optgroup>
-      </select>
-      <div style="position:relative">
-        <div id="sidebarWsDisplay" style="display:flex;align-items:center;gap:7px;padding:0 0 8px;cursor:pointer;border-radius:8px;transition:background .15s" onclick="toggleWsDropdown()" title="Switch workspace">
-          <span style="opacity:.7;line-height:1"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>
-          <div style="min-width:0;flex:1">
-            <div style="font-size:11px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap" id="sidebarWsName">Workspace</div>
-            <div style="font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px" id="sidebarWsPath"></div>
-          </div>
-          <span style="color:var(--muted);flex-shrink:0;line-height:1"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></span>
-        </div>
-        <div class="ws-dropdown" id="wsDropdown"></div>
-      </div>
-      <div class="sidebar-actions">
-        <button class="sm-btn" id="btnDownload" title="Download as Markdown" data-i18n-title="download_transcript"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> <span data-i18n="transcript">Transcript</span></button>
-        <button class="sm-btn" id="btnExportJSON" title="Export full session as JSON"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/></svg> JSON</button>
-        <button class="sm-btn" id="btnImportJSON" title="Import session from JSON"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg> <span data-i18n="import">Import</span></button>
-        <input type="file" id="importFileInput" accept=".json" style="display:none">
-      </div>
+      <button class="hermes-launch-btn" id="btnHermesPanel" onclick="toggleSettings()" title="Open Hermes control center">
+        <span class="hermes-launch-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+          <defs>
+            <linearGradient id="hermes-gold-sidebar" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" style="stop-color:#F5C542;stop-opacity:1"/>
+              <stop offset="100%" style="stop-color:#D4961C;stop-opacity:1"/>
+            </linearGradient>
+          </defs>
+          <rect x="30" y="10" width="4" height="46" rx="2" fill="url(#hermes-gold-sidebar)"/>
+          <path d="M30 18 C24 14, 14 14, 10 18 C14 16, 22 16, 28 20" fill="#F5C542" opacity="0.9"/>
+          <path d="M30 22 C26 19, 18 19, 14 22 C18 20, 24 20, 28 24" fill="#D4961C" opacity="0.8"/>
+          <path d="M34 18 C40 14, 50 14, 54 18 C50 16, 42 16, 36 20" fill="#F5C542" opacity="0.9"/>
+          <path d="M34 22 C38 19, 46 19, 50 22 C46 20, 40 20, 36 24" fill="#D4961C" opacity="0.8"/>
+          <path d="M32 48 C22 44, 20 38, 26 34 C20 36, 18 42, 24 46 C18 40, 22 30, 30 28 C24 32, 22 38, 28 42" fill="none" stroke="#F5C542" stroke-width="2.5" stroke-linecap="round"/>
+          <path d="M32 48 C42 44, 44 38, 38 34 C44 36, 46 42, 40 46 C46 40, 42 30, 34 28 C40 32, 42 38, 36 42" fill="none" stroke="#D4961C" stroke-width="2.5" stroke-linecap="round"/>
+          <circle cx="32" cy="10" r="4" fill="#F5C542"/>
+          <circle cx="32" cy="10" r="2" fill="#FFF8E1" opacity="0.7"/>
+        </svg></span>
+        <span class="hermes-launch-copy">
+          <span class="hermes-launch-title">Hermes WebUI</span>
+          <span class="hermes-launch-meta">Preferences, imports, exports</span>
+        </span>
+        <span class="hermes-launch-chevron" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg></span>
+      </button>
     </div>
   <div class="resize-handle" id="sidebarResize"></div>
   </aside>
@@ -180,15 +168,7 @@
       </button>
       <div style="flex:1;min-width:0;overflow:hidden"><div class="topbar-title" id="topbarTitle">Hermes</div><div class="topbar-meta" id="topbarMeta" data-i18n="new_conversation">Start a new conversation</div></div>
       <div class="topbar-chips">
-        <div id="profileChipWrap" style="position:relative">
-          <div class="chip profile-chip" id="profileChip" onclick="toggleProfileDropdown()" title="Switch profile" style="cursor:pointer"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span id="profileChipLabel">default</span> <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg></div>
-          <div class="profile-dropdown" id="profileDropdown"></div>
-        </div>
-        <div class="chip model" id="modelChip">GPT-5.4 Mini</div>
-
-        <button class="chip clear-btn" id="btnClearConv" onclick="clearConversation()" title="Clear all messages in this conversation" style="display:none"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg> <span data-i18n="copy">Clear</span></button>
-        <button class="chip gear-btn" id="btnSettings" onclick="toggleSettings()" title="Settings" data-i18n-title="settings_title"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
-        <button class="chip mobile-files-btn" id="btnMobileFiles" onclick="toggleMobileFiles()" title="Files"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></button>
+        <button class="chip workspace-toggle-btn" id="btnWorkspacePanelToggle" onclick="toggleWorkspacePanel()" title="Show workspace panel" aria-pressed="false"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg><span class="workspace-toggle-label">Files</span></button>
       </div>
     </div>
     <div class="messages" id="messages">
@@ -264,20 +244,6 @@
         </div>
       </div>
     </div>
-    <!-- Activity bar: shows tool progress / status above composer (not inside input) -->
-    <div id="activityBar" style="display:none;max-width:800px;margin:0 auto;width:100%;padding:0 24px;">
-      <div id="activityBarInner" style="display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-size:12px;color:var(--muted);animation:fadeIn .15s ease;">
-        <span id="activityIcon" style="opacity:.6;line-height:1"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg></span>
-        <span id="activityText" style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
-        <button id="btnCancel" onclick="cancelStream()" style="display:none;background:rgba(233,69,96,.12);border:1px solid rgba(233,69,96,.35);color:#e94560;font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;cursor:pointer;flex-shrink:0;transition:background .15s;align-items:center;gap:4px" title="Cancel this task"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/></svg> Cancel</button>
-        <button id="btnDismissStatus" onclick="setStatus('')" style="display:none;background:none;border:none;color:var(--muted);line-height:1;cursor:pointer;padding:0 2px;opacity:.5;flex-shrink:0" title="Dismiss"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
-        <span id="activityDots" style="display:flex;gap:3px;align-items:center">
-          <span style="width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.3;animation:pulse 1.4s ease-in-out infinite"></span>
-          <span style="width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.3;animation:pulse 1.4s ease-in-out .22s infinite"></span>
-          <span style="width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.3;animation:pulse 1.4s ease-in-out .44s infinite"></span>
-        </span>
-      </div>
-    </div>
     <div class="composer-wrap" id="composerWrap">
       <div class="cmd-dropdown" id="cmdDropdown"></div>
       <div class="composer-box" id="composerBox">
@@ -302,16 +268,77 @@
                 <line x1="8" y1="23" x2="16" y2="23"/>
               </svg>
             </button>
-          </div>
-          <div class="ctx-indicator" id="ctxIndicator" style="display:none" title="Context window usage">
-            <span class="ctx-bar-wrap"><span class="ctx-bar" id="ctxBar"></span></span>
-            <span class="ctx-label" id="ctxLabel"></span>
+            <div class="composer-divider" aria-hidden="true"></div>
+            <div id="profileChipWrap" class="composer-profile-wrap">
+              <button class="composer-profile-chip profile-chip" id="profileChip" type="button" onclick="toggleProfileDropdown()" title="Switch profile">
+                <span class="composer-profile-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
+                <span class="composer-profile-label" id="profileChipLabel">default</span>
+                <span class="composer-profile-chevron" aria-hidden="true"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></span>
+              </button>
+            </div>
+            <div class="composer-ws-wrap">
+              <button class="composer-workspace-chip ws-chip" id="composerWorkspaceChip" type="button" onclick="toggleComposerWsDropdown()" title="Switch workspace" disabled>
+                <span class="composer-workspace-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>
+                <span class="composer-workspace-label" id="composerWorkspaceLabel">Workspace</span>
+                <span class="composer-workspace-chevron" aria-hidden="true"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></span>
+              </button>
+            </div>
+            <div class="composer-model-wrap">
+              <button class="composer-model-chip" id="composerModelChip" type="button" onclick="toggleModelDropdown()" title="Conversation model">
+                <span class="composer-model-icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg></span>
+                <span class="composer-model-label" id="composerModelLabel">Model</span>
+                <span class="composer-model-chevron" aria-hidden="true"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></span>
+              </button>
+              <select id="modelSelect" class="composer-model-select" title="Conversation model" aria-hidden="true" tabindex="-1">
+              <optgroup label="OpenAI">
+                <option value="openai/gpt-5.4-mini">GPT-5.4 Mini</option>
+                <option value="openai/gpt-4o">GPT-4o</option>
+                <option value="openai/o3">o3</option>
+                <option value="openai/o4-mini">o4-mini</option>
+              </optgroup>
+              <optgroup label="Anthropic">
+                <option value="anthropic/claude-sonnet-4.6">Claude Sonnet 4.6</option>
+                <option value="anthropic/claude-sonnet-4-5">Claude Sonnet 4.5</option>
+                <option value="anthropic/claude-haiku-3-5">Claude Haiku 3.5</option>
+              </optgroup>
+              <optgroup label="Other">
+                <option value="google/gemini-2.5-pro">Gemini 2.5 Pro</option>
+                <option value="deepseek/deepseek-chat-v3-0324">DeepSeek V3</option>
+                <option value="meta-llama/llama-4-scout">Llama 4 Scout</option>
+              </optgroup>
+            </select>
+            </div>
           </div>
           <div class="composer-right">
-            <button class="send-btn" id="btnSend" title="Send message" style="display:none">
+            <span class="composer-status" id="composerStatus" style="display:none"></span>
+            <div class="ctx-indicator-wrap" id="ctxIndicatorWrap" style="display:none">
+              <button class="ctx-indicator" id="ctxIndicator" type="button" aria-label="Context window usage" aria-describedby="ctxTooltip">
+                <span class="ctx-ring">
+                  <svg class="ctx-ring-svg" viewBox="0 0 24 24" aria-hidden="true">
+                    <circle class="ctx-ring-track" cx="12" cy="12" r="9.75"></circle>
+                    <circle class="ctx-ring-value" id="ctxRingValue" cx="12" cy="12" r="9.75"></circle>
+                  </svg>
+                  <span class="ctx-ring-center" id="ctxPercent">0</span>
+                </span>
+              </button>
+              <div class="ctx-tooltip" id="ctxTooltip" role="tooltip" aria-hidden="true">
+                <div class="ctx-tooltip-title">Context window</div>
+                <div class="ctx-tooltip-line" id="ctxTooltipUsage"></div>
+                <div class="ctx-tooltip-line" id="ctxTooltipTokens"></div>
+                <div class="ctx-tooltip-line" id="ctxTooltipThreshold"></div>
+                <div class="ctx-tooltip-line" id="ctxTooltipCost" style="display:none"></div>
+              </div>
+            </div>
+            <button class="cancel-btn" id="btnCancel" onclick="cancelStream()" style="display:none" title="Stop generation" aria-label="Stop generation">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="5" width="14" height="14" rx="2"></rect></svg>
+            </button>
+            <button class="send-btn" id="btnSend" title="Send message" disabled>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
             </button>
           </div>
+          <div class="profile-dropdown" id="profileDropdown"></div>
+          <div class="ws-dropdown ws-dropdown-footer" id="composerWsDropdown"></div>
+          <div class="model-dropdown" id="composerModelDropdown"></div>
         </div>
         <div class="upload-bar-wrap" id="uploadBarWrap"><div class="upload-bar" id="uploadBar"></div></div>
       </div>
@@ -323,12 +350,13 @@
       <span>Workspace</span>
       <span class="git-badge" id="gitBadge" style="display:none"></span>
       <div class="panel-actions">
+        <button class="panel-icon-btn" id="btnCollapseWorkspacePanel" title="Hide workspace panel" onclick="toggleWorkspacePanel(false)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg></button>
         <button class="panel-icon-btn" id="btnUpDir" title="Parent directory" onclick="navigateUp()" style="display:none"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></button>
         <button class="panel-icon-btn" id="btnNewFile" title="New file" onclick="promptNewFile()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
         <button class="panel-icon-btn" id="btnNewFolder" title="New folder" onclick="promptNewFolder()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></button>
         <button class="panel-icon-btn" id="btnRefreshPanel" title="Refresh" onclick="if(S.session)loadDir(S.currentDir)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></button>
         <button class="panel-icon-btn close-preview" id="btnClearPreview" title="Close preview"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
-        <button class="panel-icon-btn mobile-close-btn" onclick="closeMobileFiles()" title="Close" aria-label="Close workspace panel">×</button>
+        <button class="panel-icon-btn mobile-close-btn" onclick="closeWorkspacePanel()" title="Close" aria-label="Close workspace panel">×</button>
       </div>
     </div>
     <div class="breadcrumb-bar" id="breadcrumbBar" style="display:none"></div>
@@ -347,99 +375,174 @@
     </div>
   </aside>
 </div>
-<div class="settings-overlay" id="settingsOverlay" style="display:none">
-  <div class="settings-panel">
-    <div class="settings-header">
-      <h3 style="margin:0;font-size:16px" data-i18n="settings_title">Settings</h3>
-      <button class="panel-icon-btn" onclick="_closeSettingsPanel()" title="Close"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
-    </div>
-    <div class="settings-body">
-      <div class="settings-field">
-        <label for="settingsModel" data-i18n="settings_label_model">Default Model</label>
-        <select id="settingsModel" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px"></select>
+<div class="onboarding-overlay" id="onboardingOverlay" style="display:none" role="dialog" aria-modal="true" aria-labelledby="onboardingTitle">
+  <div class="onboarding-card">
+    <div class="onboarding-shell">
+      <div class="onboarding-sidebar">
+        <div class="onboarding-badge" data-i18n="onboarding_badge">FIRST RUN</div>
+        <h2 id="onboardingTitle" data-i18n="onboarding_title">Welcome to Hermes Web UI</h2>
+        <p id="onboardingLead" data-i18n="onboarding_lead">A quick guided setup will check your Hermes install, choose a workspace and model, and optionally protect the app with a password.</p>
+        <div class="onboarding-steps" id="onboardingSteps"></div>
       </div>
-      <div class="settings-field">
-        <label for="settingsSendKey" data-i18n="settings_label_send_key">Send Key</label>
-        <select id="settingsSendKey" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px">
-          <option value="enter">Enter (Shift+Enter for newline)</option>
-          <option value="ctrl+enter">Ctrl+Enter (Enter for newline)</option>
-        </select>
+      <div class="onboarding-main">
+        <div class="onboarding-status" id="onboardingNotice"></div>
+        <div class="onboarding-body" id="onboardingBody"></div>
+        <div class="onboarding-actions">
+          <button class="sm-btn" id="onboardingBackBtn" onclick="prevOnboardingStep()" style="display:none" data-i18n="onboarding_back">Back</button>
+          <button class="sm-btn" id="onboardingNextBtn" onclick="nextOnboardingStep()" style="font-weight:700;color:var(--blue);border-color:rgba(124,185,255,.32)" data-i18n="onboarding_continue">Continue</button>
+        </div>
       </div>
-      <div class="settings-field">
-        <label for="settingsTheme" data-i18n="settings_label_theme">Theme</label>
-        <select id="settingsTheme" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px" onchange="document.documentElement.dataset.theme=this.value;localStorage.setItem('hermes-theme',this.value)">
-          <option value="dark">Dark (default)</option>
-          <option value="light">Light</option>
-          <option value="slate">Slate (charcoal)</option>
-          <option value="solarized">Solarized Dark</option>
-          <option value="monokai">Monokai</option>
-          <option value="nord">Nord</option>
-          <option value="oled">OLED</option>
-        </select>
-      </div>
-      <div class="settings-field">
-        <label for="settingsLanguage" data-i18n="settings_label_language">Language</label>
-        <select id="settingsLanguage" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px"></select>
-      </div>
-      <div class="settings-field">
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="settingsSoundEnabled" style="width:15px;height:15px;accent-color:var(--accent)">
-          <span data-i18n="settings_label_sound">Notification sound</span>
-        </label>
-        <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_sound">Play a sound when the assistant finishes a response.</div>
-      </div>
-      <div class="settings-field">
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="settingsNotificationsEnabled" style="width:15px;height:15px;accent-color:var(--accent)">
-          <span data-i18n="settings_label_notifications">Browser notifications</span>
-        </label>
-        <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_notifications">Show a system notification when a response completes while the tab is in the background.</div>
-      </div>
-      <div class="settings-field">
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="settingsShowTokenUsage" style="width:15px;height:15px;accent-color:var(--accent)">
-          <span data-i18n="settings_label_token_usage">Show token usage after responses</span>
-        </label>
-        <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_token_usage">Displays input/output token count below each assistant reply. Also toggled with <code>/usage</code>.</div>
-      </div>
-      <div class="settings-field">
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="settingsShowCliSessions" style="width:15px;height:15px;accent-color:var(--accent)">
-          <span data-i18n="settings_label_cli_sessions">Show agent sessions in sidebar</span>
-        </label>
-        <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_cli_sessions">Merges sessions from Hermes agent platforms (CLI, Telegram, Discord, Slack, etc.) into the session list. Agent sessions are view-only.</div>
-      </div>
-      <div class="settings-field">
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="settingsSyncInsights" style="width:15px;height:15px;accent-color:var(--accent)">
-          <span data-i18n="settings_label_sync_insights">Sync usage to /insights</span>
-        </label>
-        <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_sync_insights">Mirrors WebUI token usage to state.db so <code>hermes /insights</code> includes browser session data. Off by default.</div>
-      </div>
-      <div class="settings-field">
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="settingsCheckUpdates" style="width:15px;height:15px;accent-color:var(--accent)">
-          <span data-i18n="settings_label_check_updates">Check for updates</span>
-        </label>
-        <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_check_updates">Show a banner when newer versions of the WebUI or Agent are available. Runs a background git fetch periodically.</div>
-      </div>
-      <div class="settings-field">
-        <label for="settingsBotName" data-i18n="settings_label_bot_name">Assistant Name</label>
-        <div style="font-size:11px;color:var(--muted);margin-bottom:6px" data-i18n="settings_desc_bot_name">Display name for the assistant throughout the UI. Defaults to Hermes.</div>
-        <input type="text" id="settingsBotName" placeholder="Hermes" maxlength="64" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px;font-size:13px">
-      </div>
-      <div class="settings-field" style="border-top:1px solid var(--border);padding-top:12px;margin-top:8px">
-        <label for="settingsPassword" data-i18n="settings_label_password">Access Password</label>
-        <div style="font-size:11px;color:var(--muted);margin-bottom:6px" data-i18n="settings_desc_password">Enter a new password to set or change it. Leave blank to keep current setting.</div>
-        <input type="password" id="settingsPassword" placeholder="Enter new password…" data-i18n-placeholder="password_placeholder" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px;font-size:13px">
-      </div>
-      <button class="sm-btn" onclick="saveSettings()" style="margin-top:12px;width:100%;padding:8px;font-weight:600" data-i18n="settings_save_btn">Save Settings</button>
-      <button class="sm-btn" id="btnDisableAuth" onclick="disableAuth()" style="margin-top:6px;width:100%;padding:8px;font-weight:600;color:#e8a030;border-color:rgba(232,160,48,.3);display:none" data-i18n="disable_auth">Disable Auth</button>
-      <button class="sm-btn" id="btnSignOut" onclick="signOut()" style="margin-top:6px;width:100%;padding:8px;font-weight:600;color:var(--accent);border-color:rgba(233,69,96,.3);display:none" data-i18n="sign_out">Sign Out</button>
     </div>
   </div>
 </div>
-<div class="mobile-overlay" id="mobileOverlay" onclick="closeMobileSidebar();closeMobileFiles()"></div>
+<div class="settings-overlay" id="settingsOverlay" style="display:none">
+  <div class="settings-panel">
+    <div class="settings-header">
+      <div class="settings-heading">
+        <div class="settings-kicker">Hermes WebUI</div>
+        <h3 style="margin:0;font-size:18px">Control Center</h3>
+        <div class="settings-subtitle">Preferences, conversation tools, and system controls.</div>
+      </div>
+      <button class="panel-icon-btn" onclick="_closeSettingsPanel()" title="Close"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
+    </div>
+    <div class="settings-body">
+      <div class="settings-shell">
+        <div class="settings-tabs" role="tablist" aria-label="Hermes control center sections">
+          <button class="settings-tab active" id="settingsTabConversation" type="button" role="tab" aria-selected="true" aria-controls="settingsPaneConversation" onclick="switchSettingsSection('conversation')">
+            <svg class="settings-tab-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <span class="settings-tab-title">Conversation</span>
+          </button>
+          <button class="settings-tab" id="settingsTabPreferences" type="button" role="tab" aria-selected="false" aria-controls="settingsPanePreferences" onclick="switchSettingsSection('preferences')">
+            <svg class="settings-tab-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
+            <span class="settings-tab-title">Preferences</span>
+          </button>
+          <button class="settings-tab" id="settingsTabSystem" type="button" role="tab" aria-selected="false" aria-controls="settingsPaneSystem" onclick="switchSettingsSection('system')">
+            <svg class="settings-tab-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><line x1="6" y1="7" x2="6.01" y2="7"/><line x1="6" y1="17" x2="6.01" y2="17"/></svg>
+            <span class="settings-tab-title">System</span>
+          </button>
+        </div>
+        <div class="settings-main">
+          <div class="settings-pane active" id="settingsPaneConversation" role="tabpanel" aria-labelledby="settingsTabConversation">
+            <div class="settings-section-head">
+              <div>
+                <div class="settings-section-title">Conversation</div>
+                <div class="settings-section-meta" id="hermesSessionMeta">No active conversation selected.</div>
+              </div>
+            </div>
+            <div class="hermes-action-grid">
+              <button class="settings-action-btn" id="btnDownload" title="Download as Markdown" data-i18n-title="download_transcript"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> <span data-i18n="transcript">Transcript</span></button>
+              <button class="settings-action-btn" id="btnExportJSON" title="Export full session as JSON"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/></svg> JSON</button>
+              <button class="settings-action-btn" id="btnImportJSON" title="Import session from JSON"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg> <span data-i18n="import">Import</span></button>
+              <button class="settings-action-btn danger" id="btnClearConvModal" onclick="clearConversation()" title="Clear all messages in this conversation"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 1 2 2 2v2"/></svg> Clear</button>
+            </div>
+            <input type="file" id="importFileInput" accept=".json" style="display:none">
+          </div>
+          <div class="settings-pane" id="settingsPanePreferences" role="tabpanel" aria-labelledby="settingsTabPreferences">
+            <div class="settings-section-head">
+              <div>
+                <div class="settings-section-title">Preferences</div>
+                <div class="settings-section-meta">Defaults and UI behavior for Hermes Web UI.</div>
+              </div>
+            </div>
+            <div class="settings-field">
+              <label for="settingsModel" data-i18n="settings_label_model">Default Model</label>
+              <select id="settingsModel" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px"></select>
+            </div>
+            <div class="settings-field">
+              <label for="settingsSendKey" data-i18n="settings_label_send_key">Send Key</label>
+              <select id="settingsSendKey" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px">
+                <option value="enter">Enter (Shift+Enter for newline)</option>
+                <option value="ctrl+enter">Ctrl+Enter (Enter for newline)</option>
+              </select>
+            </div>
+            <div class="settings-field">
+              <label for="settingsTheme" data-i18n="settings_label_theme">Theme</label>
+              <select id="settingsTheme" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px" onchange="document.documentElement.dataset.theme=this.value;localStorage.setItem('hermes-theme',this.value)">
+                <option value="dark">Dark (default)</option>
+                <option value="light">Light</option>
+                <option value="slate">Slate (charcoal)</option>
+                <option value="solarized">Solarized Dark</option>
+                <option value="monokai">Monokai</option>
+                <option value="nord">Nord</option>
+                <option value="oled">OLED</option>
+              </select>
+            </div>
+            <div class="settings-field">
+              <label for="settingsLanguage" data-i18n="settings_label_language">Language</label>
+              <select id="settingsLanguage" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px"></select>
+            </div>
+            <div class="settings-field">
+              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
+                <input type="checkbox" id="settingsSoundEnabled" style="width:15px;height:15px;accent-color:var(--accent)">
+                <span data-i18n="settings_label_sound">Notification sound</span>
+              </label>
+              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_sound">Play a sound when the assistant finishes a response.</div>
+            </div>
+            <div class="settings-field">
+              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
+                <input type="checkbox" id="settingsNotificationsEnabled" style="width:15px;height:15px;accent-color:var(--accent)">
+                <span data-i18n="settings_label_notifications">Browser notifications</span>
+              </label>
+              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_notifications">Show a system notification when a response completes while the tab is in the background.</div>
+            </div>
+            <div class="settings-field">
+              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
+                <input type="checkbox" id="settingsShowTokenUsage" style="width:15px;height:15px;accent-color:var(--accent)">
+                <span data-i18n="settings_label_token_usage">Show token usage after responses</span>
+              </label>
+              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_token_usage">Displays input/output token count below each assistant reply. Also toggled with <code>/usage</code>.</div>
+            </div>
+            <div class="settings-field">
+              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
+                <input type="checkbox" id="settingsShowCliSessions" style="width:15px;height:15px;accent-color:var(--accent)">
+                <span data-i18n="settings_label_cli_sessions">Show CLI sessions in sidebar</span>
+              </label>
+              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_cli_sessions">Merges sessions from the Hermes CLI (state.db) into the session list. Click a CLI session to import it and continue the conversation.</div>
+            </div>
+            <div class="settings-field">
+              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
+                <input type="checkbox" id="settingsSyncInsights" style="width:15px;height:15px;accent-color:var(--accent)">
+                <span data-i18n="settings_label_sync_insights">Sync usage to /insights</span>
+              </label>
+              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_sync_insights">Mirrors WebUI token usage to state.db so <code>hermes /insights</code> includes browser session data. Off by default.</div>
+            </div>
+            <div class="settings-field">
+              <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
+                <input type="checkbox" id="settingsCheckUpdates" style="width:15px;height:15px;accent-color:var(--accent)">
+                <span data-i18n="settings_label_check_updates">Check for updates</span>
+              </label>
+              <div style="font-size:11px;color:var(--muted);margin-top:4px" data-i18n="settings_desc_check_updates">Show a banner when newer versions of the WebUI or Agent are available. Runs a background git fetch periodically.</div>
+            </div>
+            <div class="settings-field">
+              <label for="settingsBotName" data-i18n="settings_label_bot_name">Assistant Name</label>
+              <div style="font-size:11px;color:var(--muted);margin-bottom:6px" data-i18n="settings_desc_bot_name">Display name for the assistant throughout the UI. Defaults to Hermes.</div>
+              <input type="text" id="settingsBotName" placeholder="Hermes" maxlength="64" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px;font-size:13px">
+            </div>
+            <button class="sm-btn" onclick="saveSettings()" style="margin-top:12px;width:100%;padding:8px;font-weight:600" data-i18n="settings_save_btn">Save Settings</button>
+          </div>
+          <div class="settings-pane" id="settingsPaneSystem" role="tabpanel" aria-labelledby="settingsTabSystem">
+            <div class="settings-section-head">
+              <div>
+                <div class="settings-section-title">System</div>
+                <div class="settings-section-meta">Instance version and access controls.</div>
+              </div>
+              <span class="settings-version-badge">v0.50.3</span>
+            </div>
+            <div class="settings-field" style="border-top:1px solid var(--border);padding-top:12px;margin-top:8px">
+              <label for="settingsPassword" data-i18n="settings_label_password">Access Password</label>
+              <div style="font-size:11px;color:var(--muted);margin-bottom:6px" data-i18n="settings_desc_password">Enter a new password to set or change it. Leave blank to keep current setting.</div>
+              <input type="password" id="settingsPassword" placeholder="Enter new password…" data-i18n-placeholder="password_placeholder" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px;font-size:13px">
+            </div>
+            <button class="sm-btn" id="btnDisableAuth" onclick="disableAuth()" style="margin-top:6px;width:100%;padding:8px;font-weight:600;color:#e8a030;border-color:rgba(232,160,48,.3);display:none" data-i18n="disable_auth">Disable Auth</button>
+            <button class="sm-btn" id="btnSignOut" onclick="signOut()" style="margin-top:6px;width:100%;padding:8px;font-weight:600;color:var(--accent);border-color:rgba(233,69,96,.3);display:none" data-i18n="sign_out">Sign Out</button>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="mobile-overlay" id="mobileOverlay" onclick="closeMobileSidebar()"></div>
 <nav class="mobile-bottom-nav" id="mobileBottomNav">
   <button class="mobile-nav-btn active" data-panel="chat" onclick="mobileSwitchPanel('chat')">
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
@@ -461,17 +564,11 @@
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 4h8l2 2h10v14H2z"/></svg>
     <span data-i18n="tab_workspaces">Spaces</span>
   </button>
+  <button class="mobile-nav-btn" data-panel="profiles" onclick="mobileSwitchPanel('profiles')">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+    <span data-i18n="tab_profiles">Profiles</span>
+  </button>
 </nav>
-<div class="toast" id="toast"></div>
-<script src="/static/i18n.js"></script>
-<script src="/static/icons.js"></script>
-<script src="/static/ui.js"></script>
-<script src="/static/workspace.js"></script>
-<script src="/static/sessions.js"></script>
-<script src="/static/commands.js"></script>
-<script src="/static/messages.js"></script>
-<script src="/static/panels.js"></script>
-<script src="/static/boot.js"></script>
 <div class="app-dialog-overlay" id="appDialogOverlay" style="display:none" aria-hidden="true">
   <div class="app-dialog" id="appDialog" role="dialog" aria-modal="true" aria-labelledby="appDialogTitle" aria-describedby="appDialogDesc">
     <div class="app-dialog-header">
@@ -488,5 +585,16 @@
     </div>
   </div>
 </div>
+<div class="toast" id="toast"></div>
+<script src="/static/i18n.js"></script>
+<script src="/static/icons.js"></script>
+<script src="/static/ui.js"></script>
+<script src="/static/workspace.js"></script>
+<script src="/static/sessions.js"></script>
+<script src="/static/commands.js"></script>
+<script src="/static/messages.js"></script>
+<script src="/static/panels.js"></script>
+<script src="/static/onboarding.js"></script>
+<script src="/static/boot.js"></script>
 </body>
 </html>

static/messages.js

@@ -21,22 +21,22 @@ async function send(){
 
   const activeSid=S.session.session_id;
 
-  setStatus(S.pendingFiles&&S.pendingFiles.length?'Uploading…':'Sending…');
+  setComposerStatus(S.pendingFiles&&S.pendingFiles.length?'Uploading…':'');
   let uploaded=[];
   try{uploaded=await uploadPendingFiles();}
-  catch(e){if(!text){setStatus(`Upload error: ${e.message}`);return;}}
+  catch(e){if(!text){setComposerStatus(`Upload error: ${e.message}`);return;}}
 
   let msgText=text;
   if(uploaded.length&&!msgText)msgText=`I've uploaded ${uploaded.length} file(s): ${uploaded.join(', ')}`;
   else if(uploaded.length)msgText=`${text}\n\n[Attached files: ${uploaded.join(', ')}]`;
-  if(!msgText){setStatus('Nothing to send');return;}
+  if(!msgText){setComposerStatus('Nothing to send');return;}
 
   $('msg').value='';autoResize();
   const displayText=text||(uploaded.length?`Uploaded: ${uploaded.join(', ')}`:'(file upload)');
   const userMsg={role:'user',content:displayText,attachments:uploaded.length?uploaded:undefined,_ts:Date.now()/1000};
   S.toolCalls=[];  // clear tool calls from previous turn
   clearLiveToolCards();  // clear any leftover live cards from last turn
-  S.messages.push(userMsg);renderMessages();appendThinking();setBusy(true);  // activity bar shown via setBusy
+  S.messages.push(userMsg);renderMessages();appendThinking();setBusy(true);
   INFLIGHT[activeSid]={messages:[...S.messages],uploaded};
   startApprovalPolling(activeSid);
   S.activeStreamId = null;  // will be set after stream starts
@@ -76,7 +76,7 @@ async function send(){
     // Only hide approval card if it belongs to the session that just finished
     if(!_approvalSessionId || _approvalSessionId===activeSid) hideApprovalCard(true);removeThinking();
     S.messages.push({role:'assistant',content:`**Error:** ${e.message}`});
-    renderMessages();setBusy(false);setStatus('Error: '+e.message);
+    renderMessages();setBusy(false);setComposerStatus(`Error: ${e.message}`);
     return;
   }
 
@@ -156,9 +156,6 @@ async function send(){
 
     source.addEventListener('tool',e=>{
       const d=JSON.parse(e.data);
-      if(S.session&&S.session.session_id===activeSid){
-        setStatus(`${d.name}${d.preview?' · '+d.preview.slice(0,55):''}`);
-      }
       if(!S.session||S.session.session_id!==activeSid) return;
       removeThinking();
       const oldRow=$('toolRunningRow');if(oldRow)oldRow.remove();
@@ -207,6 +204,7 @@ async function send(){
         syncTopbar();renderMessages();loadDir('.');
       }
       renderSessionList();setBusy(false);setStatus('');
+      setComposerStatus('');
       playNotificationSound();
       sendBrowserNotification('Response complete',assistantText?assistantText.slice(0,100):'Task finished');
     });
@@ -247,7 +245,7 @@ async function send(){
         try{const d=JSON.parse(e.data);trackBackgroundError(activeSid,_errTitle,d.message||'Error');}
         catch(_){trackBackgroundError(activeSid,_errTitle,'Error');}
       }
-      if(!S.session||!INFLIGHT[S.session.session_id]){setBusy(false);setStatus('');}
+      if(!S.session||!INFLIGHT[S.session.session_id]){setBusy(false);setComposerStatus('');}
     });
 
     source.addEventListener('warning',e=>{
@@ -256,9 +254,9 @@ async function send(){
       try{
         const d=JSON.parse(e.data);
         // Show as a small inline notice, not a full error
-        setStatus(`${d.message||'Warning'}`);
+        setComposerStatus(`${d.message||'Warning'}`);
         // If it's a fallback notice, show it briefly then clear
-        if(d.type==='fallback') setTimeout(()=>setStatus(''),4000);
+        if(d.type==='fallback') setTimeout(()=>setComposerStatus(''),4000);
       }catch(_){}
     });
 
@@ -267,12 +265,12 @@ async function send(){
       // Attempt one reconnect if the stream is still active server-side
       if(!_reconnectAttempted && streamId){
         _reconnectAttempted=true;
-        setStatus('Connection lost \u2014 reconnecting\u2026');
+        setComposerStatus('Reconnecting…');
         setTimeout(async()=>{
           try{
             const st=await api(`/api/chat/stream/status?stream_id=${encodeURIComponent(streamId)}`);
             if(st.active){
-              setStatus('Reconnected');
+              setComposerStatus('Reconnected');
               _wireSSE(new EventSource(new URL(`/api/chat/stream?stream_id=${encodeURIComponent(streamId)}`,location.origin).href,{withCredentials:true}));
               return;
             }
@@ -296,8 +294,7 @@ async function send(){
         S.messages.push({role:'assistant',content:'*Task cancelled.*'});renderMessages();
       }
       renderSessionList();
-      // Always clear busy state and status when cancel event is received
-      setBusy(false);setStatus('');
+      if(!S.session||!INFLIGHT[S.session.session_id]){setBusy(false);setComposerStatus('');}
     });
   }
 
@@ -316,7 +313,7 @@ async function send(){
         trackBackgroundError(activeSid,_errTitle,'Connection lost');
       }
     }
-    if(!S.session||!INFLIGHT[S.session.session_id]){setBusy(false);setStatus('Error: Connection lost');}
+    if(!S.session||!INFLIGHT[S.session.session_id]){setBusy(false);setComposerStatus('');}
   }
 
   _wireSSE(new EventSource(new URL(`/api/chat/stream?stream_id=${encodeURIComponent(streamId)}`,location.origin).href,{withCredentials:true}));

static/onboarding.js

@@ -0,0 +1,306 @@
+const ONBOARDING={status:null,step:0,steps:['system','setup','workspace','password','finish'],form:{provider:'openrouter',workspace:'',model:'',password:'',apiKey:'',baseUrl:''},active:false};
+
+function _getOnboardingSetupProviders(){
+  return (((ONBOARDING.status||{}).setup||{}).providers)||[];
+}
+
+function _getOnboardingSetupProvider(id){
+  return _getOnboardingSetupProviders().find(p=>p.id===id)||null;
+}
+
+function _getOnboardingCurrentSetup(){
+  return (((ONBOARDING.status||{}).setup||{}).current)||{};
+}
+
+function _onboardingStepMeta(key){
+  return ({
+    system:{title:t('onboarding_step_system_title'),desc:t('onboarding_step_system_desc')},
+    setup:{title:t('onboarding_step_setup_title'),desc:t('onboarding_step_setup_desc')},
+    workspace:{title:t('onboarding_step_workspace_title'),desc:t('onboarding_step_workspace_desc')},
+    password:{title:t('onboarding_step_password_title'),desc:t('onboarding_step_password_desc')},
+    finish:{title:t('onboarding_step_finish_title'),desc:t('onboarding_step_finish_desc')}
+  })[key];
+}
+
+function _renderOnboardingSteps(){
+  const wrap=$('onboardingSteps');
+  if(!wrap)return;
+  wrap.innerHTML='';
+  ONBOARDING.steps.forEach((key,idx)=>{
+    const meta=_onboardingStepMeta(key);
+    const item=document.createElement('div');
+    item.className='onboarding-step'+(idx===ONBOARDING.step?' active':idx<ONBOARDING.step?' done':'');
+    item.innerHTML=`<div class="onboarding-step-index">${idx+1}</div><div><div class="onboarding-step-title">${meta.title}</div><div class="onboarding-step-desc">${meta.desc}</div></div>`;
+    wrap.appendChild(item);
+  });
+}
+
+function _setOnboardingNotice(msg,kind='info'){
+  const el=$('onboardingNotice');
+  if(!el)return;
+  if(!msg){el.style.display='none';el.textContent='';el.className='onboarding-status';return;}
+  el.style.display='block';
+  el.className='onboarding-status '+kind;
+  el.textContent=msg;
+}
+
+function _getOnboardingWorkspaceChoices(){
+  const items=((ONBOARDING.status||{}).workspaces||{}).items||[];
+  return items.length?items:[{name:'Home',path:ONBOARDING.form.workspace||''}];
+}
+
+function _getOnboardingProviderModelChoices(){
+  const provider=_getOnboardingSetupProvider(ONBOARDING.form.provider);
+  return provider?(provider.models||[]):[];
+}
+
+function _getOnboardingSelectedModel(){
+  return ONBOARDING.form.model||'';
+}
+
+function _renderOnboardingModelField(){
+  const choices=_getOnboardingProviderModelChoices();
+  if(ONBOARDING.form.provider==='custom'){
+    return `<label class="onboarding-field"><span>${t('onboarding_model_label')}</span><input id="onboardingModelInput" value="${esc(_getOnboardingSelectedModel())}" placeholder="${t('onboarding_custom_model_placeholder')}" oninput="ONBOARDING.form.model=this.value"></label><p class="onboarding-copy">${t('onboarding_custom_model_help')}</p>`;
+  }
+  const options=choices.map(m=>`<option value="${esc(m.id)}">${esc(m.label)}</option>`).join('');
+  return `<label class="onboarding-field"><span>${t('onboarding_model_label')}</span><select id="onboardingModelSelect" onchange="ONBOARDING.form.model=this.value">${options}</select></label><p class="onboarding-copy">${t('onboarding_workspace_help')}</p>`;
+}
+
+function _providerStatusLabel(system){
+  if(system.chat_ready) return t('onboarding_check_provider_ready');
+  if(system.provider_configured) return t('onboarding_check_provider_partial');
+  return t('onboarding_check_provider_pending');
+}
+
+function _renderOnboardingBody(){
+  const body=$('onboardingBody');
+  if(!body||!ONBOARDING.status)return;
+  const key=ONBOARDING.steps[ONBOARDING.step];
+  const system=ONBOARDING.status.system||{};
+  const settings=ONBOARDING.status.settings||{};
+  const setup=ONBOARDING.status.setup||{};
+  const nextBtn=$('onboardingNextBtn');
+  const backBtn=$('onboardingBackBtn');
+  if(backBtn) backBtn.style.display=ONBOARDING.step>0?'':'none';
+  if(nextBtn) nextBtn.textContent=key==='finish'?t('onboarding_open'):t('onboarding_continue');
+
+  if(key==='system'){
+    const hermesOk=system.hermes_found&&system.imports_ok;
+    const setupOk=!!system.chat_ready;
+    _setOnboardingNotice(system.provider_note|| (setupOk?t('onboarding_notice_system_ready'):t('onboarding_notice_system_unavailable')),setupOk?'success':(hermesOk?'info':'warn'));
+    body.innerHTML=`
+      <div class="onboarding-panel-grid">
+        <div class="onboarding-check ${hermesOk?'ok':'warn'}"><strong>${t('onboarding_check_agent')}</strong><span>${hermesOk?t('onboarding_check_agent_ready'):t('onboarding_check_agent_missing')}</span></div>
+        <div class="onboarding-check ${(setupOk?'ok':system.provider_configured?'warn':'muted')}"><strong>${t('onboarding_check_provider')}</strong><span>${_providerStatusLabel(system)}</span></div>
+        <div class="onboarding-check ${(settings.password_enabled?'ok':'muted')}"><strong>${t('onboarding_check_password')}</strong><span>${settings.password_enabled?t('onboarding_check_password_enabled'):t('onboarding_check_password_disabled')}</span></div>
+      </div>
+      <div class="onboarding-copy">
+        <p><strong>${t('onboarding_config_file')}</strong> ${esc(system.config_path||t('onboarding_unknown'))}</p>
+        <p><strong>${t('onboarding_env_file')}</strong> ${esc(system.env_path||t('onboarding_unknown'))}</p>
+        <p>${esc(system.provider_note||'')}</p>
+        ${system.current_provider?`<p><strong>${t('onboarding_current_provider')}</strong> ${esc(system.current_provider)}${system.current_model?` — ${esc(system.current_model)}`:''}</p>`:''}
+        ${system.current_base_url?`<p><strong>${t('onboarding_base_url_label')}</strong> ${esc(system.current_base_url)}</p>`:''}
+        ${system.missing_modules&&system.missing_modules.length?`<p><strong>${t('onboarding_missing_imports')}</strong> ${esc(system.missing_modules.join(', '))}</p>`:''}
+      </div>`;
+    return;
+  }
+
+  if(key==='setup'){
+    const providers=_getOnboardingSetupProviders();
+    const options=providers.map(p=>`<option value="${esc(p.id)}">${esc(p.label)}${p.quick?' — '+esc(t('onboarding_quick_setup_badge')):''}</option>`).join('');
+    const provider=_getOnboardingSetupProvider(ONBOARDING.form.provider)||providers[0]||null;
+    const showBaseUrl=provider&&provider.requires_base_url;
+    const keyHelp=provider?`${t('onboarding_api_key_help_prefix')} ${esc(provider.env_var)}.`:'';
+    _setOnboardingNotice(system.chat_ready?t('onboarding_notice_setup_already_ready'):t('onboarding_notice_setup_required'),system.chat_ready?'success':'info');
+    body.innerHTML=`
+      <label class="onboarding-field">
+        <span>${t('onboarding_provider_label')}</span>
+        <select id="onboardingProviderSelect" onchange="syncOnboardingProvider(this.value)">${options}</select>
+      </label>
+      <label class="onboarding-field">
+        <span>${t('onboarding_api_key_label')}</span>
+        <input id="onboardingApiKeyInput" type="password" value="${esc(ONBOARDING.form.apiKey||'')}" placeholder="${t('onboarding_api_key_placeholder')}" oninput="ONBOARDING.form.apiKey=this.value">
+      </label>
+      ${showBaseUrl?`<label class="onboarding-field"><span>${t('onboarding_base_url_label')}</span><input id="onboardingBaseUrlInput" value="${esc(ONBOARDING.form.baseUrl||'')}" placeholder="${t('onboarding_base_url_placeholder')}" oninput="ONBOARDING.form.baseUrl=this.value"></label>`:''}
+      <p class="onboarding-copy">${keyHelp}</p>
+      ${showBaseUrl?`<p class="onboarding-copy">${t('onboarding_base_url_help')}</p>`:''}
+      <p class="onboarding-copy">${esc(setup.unsupported_note||'')||''}</p>`;
+    const providerSel=$('onboardingProviderSelect');
+    if(providerSel) providerSel.value=ONBOARDING.form.provider;
+    return;
+  }
+
+  if(key==='workspace'){
+    const workspaceOptions=_getOnboardingWorkspaceChoices().map(ws=>`<option value="${esc(ws.path)}">${esc(ws.name||ws.path)} — ${esc(ws.path)}</option>`).join('');
+    _setOnboardingNotice(t('onboarding_notice_workspace'), 'info');
+    body.innerHTML=`
+      <label class="onboarding-field">
+        <span>${t('onboarding_workspace_label')}</span>
+        <select id="onboardingWorkspaceSelect" onchange="syncOnboardingWorkspaceSelect(this.value)">${workspaceOptions}</select>
+      </label>
+      <label class="onboarding-field">
+        <span>${t('onboarding_workspace_or_path')}</span>
+        <input id="onboardingWorkspaceInput" value="${esc(ONBOARDING.form.workspace||'')}" placeholder="${t('onboarding_workspace_placeholder')}" oninput="ONBOARDING.form.workspace=this.value">
+      </label>
+      ${_renderOnboardingModelField()}`;
+    const wsSel=$('onboardingWorkspaceSelect');
+    if(wsSel && ONBOARDING.form.workspace) wsSel.value=ONBOARDING.form.workspace;
+    const modelSel=$('onboardingModelSelect');
+    if(modelSel && ONBOARDING.form.model) modelSel.value=ONBOARDING.form.model;
+    return;
+  }
+
+  if(key==='password'){
+    _setOnboardingNotice(settings.password_enabled?t('onboarding_notice_password_enabled'):t('onboarding_notice_password_recommended'), settings.password_enabled?'success':'info');
+    body.innerHTML=`
+      <label class="onboarding-field">
+        <span>${t('onboarding_password_label')}</span>
+        <input id="onboardingPasswordInput" type="password" value="${esc(ONBOARDING.form.password||'')}" placeholder="${t('onboarding_password_placeholder')}" oninput="ONBOARDING.form.password=this.value">
+      </label>
+      <p class="onboarding-copy">${t('onboarding_password_help')}</p>`;
+    return;
+  }
+
+  const provider=_getOnboardingSetupProvider(ONBOARDING.form.provider);
+  _setOnboardingNotice(t('onboarding_notice_finish'), 'success');
+  body.innerHTML=`
+    <div class="onboarding-summary">
+      <div><strong>${t('onboarding_provider_label')}</strong><span>${esc((provider&&provider.label)||ONBOARDING.form.provider||t('onboarding_not_set'))}</span></div>
+      <div><strong>${t('onboarding_model_label')}</strong><span>${esc(_getOnboardingSelectedModel()||t('onboarding_not_set'))}</span></div>
+      <div><strong>${t('onboarding_workspace_label')}</strong><span>${esc(ONBOARDING.form.workspace||t('onboarding_not_set'))}</span></div>
+      <div><strong>${t('onboarding_check_password')}</strong><span>${ONBOARDING.form.password?t('onboarding_password_will_enable'):t('onboarding_password_skipped')}</span></div>
+    </div>
+    ${ONBOARDING.form.baseUrl?`<p class="onboarding-copy"><strong>${t('onboarding_base_url_label')}</strong> ${esc(ONBOARDING.form.baseUrl)}</p>`:''}
+    <p class="onboarding-copy">${t('onboarding_finish_help')}</p>`;
+}
+
+function syncOnboardingWorkspaceSelect(value){
+  ONBOARDING.form.workspace=value;
+  const input=$('onboardingWorkspaceInput');
+  if(input) input.value=value;
+}
+
+function syncOnboardingProvider(value){
+  const provider=_getOnboardingSetupProvider(value);
+  ONBOARDING.form.provider=value;
+  if(provider){
+    if(!ONBOARDING.form.model || !_getOnboardingProviderModelChoices().some(m=>m.id===ONBOARDING.form.model) || value==='custom'){
+      ONBOARDING.form.model=provider.default_model||'';
+    }
+    if(provider.requires_base_url){
+      ONBOARDING.form.baseUrl=ONBOARDING.form.baseUrl||provider.default_base_url||'';
+    }else{
+      ONBOARDING.form.baseUrl=provider.default_base_url||'';
+    }
+  }
+  _renderOnboardingBody();
+}
+
+async function loadOnboardingWizard(){
+  try{
+    const status=await api('/api/onboarding/status');
+    ONBOARDING.status=status;
+    const current=((status.setup||{}).current)||{};
+    ONBOARDING.form.provider=current.provider||'openrouter';
+    ONBOARDING.form.workspace=(status.workspaces&&status.workspaces.last)||status.settings.default_workspace||'';
+    ONBOARDING.form.model=status.settings.default_model||current.model||'openai/gpt-5.4-mini';
+    ONBOARDING.form.password='';
+    ONBOARDING.form.apiKey='';
+    ONBOARDING.form.baseUrl=current.base_url||'';
+    ONBOARDING.active=!status.completed;
+    if(!ONBOARDING.active) return false;
+    $('onboardingOverlay').style.display='flex';
+    _renderOnboardingSteps();
+    _renderOnboardingBody();
+    return true;
+  }catch(e){
+    console.warn('onboarding status failed',e);
+    return false;
+  }
+}
+
+function prevOnboardingStep(){
+  if(ONBOARDING.step===0)return;
+  ONBOARDING.step--;
+  _renderOnboardingSteps();
+  _renderOnboardingBody();
+}
+
+async function _saveOnboardingProviderSetup(){
+  const provider=(ONBOARDING.form.provider||'').trim();
+  const model=(ONBOARDING.form.model||'').trim();
+  const apiKey=(ONBOARDING.form.apiKey||'').trim();
+  const baseUrl=(ONBOARDING.form.baseUrl||'').trim();
+  const current=_getOnboardingCurrentSetup();
+  const isUnchanged=current.provider===provider&&((current.model||'')===model)&&((current.base_url||'')===baseUrl);
+  if(isUnchanged && !apiKey && (ONBOARDING.status.system||{}).chat_ready) return;
+  const body={provider,model};
+  if(apiKey) body.api_key=apiKey;
+  if(baseUrl) body.base_url=baseUrl;
+  const status=await api('/api/onboarding/setup',{method:'POST',body:JSON.stringify(body)});
+  ONBOARDING.status=status;
+}
+
+async function _saveOnboardingDefaults(){
+  const workspace=(ONBOARDING.form.workspace||'').trim();
+  const model=(ONBOARDING.form.model||'').trim();
+  const password=(ONBOARDING.form.password||'').trim();
+  if(!workspace) throw new Error(t('onboarding_error_choose_workspace'));
+  if(!model) throw new Error(t('onboarding_error_choose_model'));
+  const known=_getOnboardingWorkspaceChoices().some(ws=>ws.path===workspace);
+  if(!known){
+    await api('/api/workspaces/add',{method:'POST',body:JSON.stringify({path:workspace})});
+  }
+  const body={default_workspace:workspace,default_model:model};
+  if(password) body._set_password=password;
+  await api('/api/settings',{method:'POST',body:JSON.stringify(body)});
+  localStorage.setItem('hermes-webui-model',model);
+  if($('modelSelect')) _applyModelToDropdown(model,$('modelSelect'));
+}
+
+async function _finishOnboarding(){
+  await _saveOnboardingProviderSetup();
+  await _saveOnboardingDefaults();
+  const done=await api('/api/onboarding/complete',{method:'POST',body:'{}'});
+  ONBOARDING.status=done;
+  ONBOARDING.active=false;
+  $('onboardingOverlay').style.display='none';
+  showToast(t('onboarding_complete'));
+  await loadWorkspaceList();
+  if(typeof renderSessionList==='function') await renderSessionList();
+  if(!S.session && typeof newSession==='function'){
+    await newSession(true);
+    await renderSessionList();
+  }
+}
+
+async function nextOnboardingStep(){
+  try{
+    if(ONBOARDING.steps[ONBOARDING.step]==='setup'){
+      ONBOARDING.form.provider=(($('onboardingProviderSelect')||{}).value||ONBOARDING.form.provider||'').trim();
+      ONBOARDING.form.apiKey=(($('onboardingApiKeyInput')||{}).value||'').trim();
+      ONBOARDING.form.baseUrl=(($('onboardingBaseUrlInput')||{}).value||ONBOARDING.form.baseUrl||'').trim();
+      if(!ONBOARDING.form.provider) throw new Error(t('onboarding_error_provider_required'));
+      if(ONBOARDING.form.provider==='custom' && !ONBOARDING.form.baseUrl) throw new Error(t('onboarding_error_base_url_required'));
+    }
+    if(ONBOARDING.steps[ONBOARDING.step]==='workspace'){
+      ONBOARDING.form.workspace=(($('onboardingWorkspaceInput')||{}).value||ONBOARDING.form.workspace||'').trim();
+      ONBOARDING.form.model=(($('onboardingModelInput')||{}).value||($('onboardingModelSelect')||{}).value||ONBOARDING.form.model||'').trim();
+      if(!ONBOARDING.form.workspace) throw new Error(t('onboarding_error_workspace_required'));
+      if(!ONBOARDING.form.model) throw new Error(t('onboarding_error_model_required'));
+    }
+    if(ONBOARDING.steps[ONBOARDING.step]==='password'){
+      ONBOARDING.form.password=(($('onboardingPasswordInput')||{}).value||'').trim();
+    }
+    if(ONBOARDING.step===ONBOARDING.steps.length-1){
+      await _finishOnboarding();
+      return;
+    }
+    ONBOARDING.step++;
+    _renderOnboardingSteps();
+    _renderOnboardingBody();
+  }catch(e){
+    _setOnboardingNotice(e.message||String(e),'warn');
+  }
+}

static/panels.js

@@ -42,15 +42,15 @@ async function loadCrons() {
           <span class="cron-status ${statusClass}">${statusLabel}</span>
         </div>
         <div class="cron-body" id="cron-body-${job.id}">
-          <div class="cron-schedule">&#128337; ${esc(job.schedule_display || job.schedule?.expression || '')} &nbsp;|&nbsp; Next: ${esc(nextRun)} &nbsp;|&nbsp; Last: ${esc(lastRun)}</div>
+          <div class="cron-schedule">${li('clock',12)} ${esc(job.schedule_display || job.schedule?.expression || '')} &nbsp;|&nbsp; Next: ${esc(nextRun)} &nbsp;|&nbsp; Last: ${esc(lastRun)}</div>
           <div class="cron-prompt">${esc((job.prompt||'').slice(0,300))}${(job.prompt||'').length>300?'…':''}</div>
           <div class="cron-actions">
-            <button class="cron-btn run" onclick="cronRun('${job.id}')">&#9654; Run now</button>
+            <button class="cron-btn run" onclick="cronRun('${job.id}')">${li('play',12)} Run now</button>
             ${statusLabel==='paused'
-              ? `<button class="cron-btn" onclick="cronResume('${job.id}')">&#9654;&#9474; Resume</button>`
-              : `<button class="cron-btn pause" onclick="cronPause('${job.id}')">&#9646;&#9646; Pause</button>`}
-            <button class="cron-btn" onclick="cronEditOpen('${job.id}',${JSON.stringify(job).replace(/"/g,'&quot;')})">&#9998; Edit</button>
-            <button class="cron-btn" style="border-color:rgba(201,168,76,.3);color:var(--accent)" onclick="cronDelete('${job.id}')">&#128465; Delete</button>
+              ? `<button class="cron-btn" onclick="cronResume('${job.id}')">${li('play',12)} Resume</button>`
+              : `<button class="cron-btn pause" onclick="cronPause('${job.id}')">${li('pause',12)} Pause</button>`}
+            <button class="cron-btn" onclick="cronEditOpen('${job.id}',${JSON.stringify(job).replace(/"/g,'&quot;')})">${li('pencil',12)} Edit</button>
+            <button class="cron-btn" style="border-color:rgba(201,168,76,.3);color:var(--accent)" onclick="cronDelete('${job.id}')">${li('trash-2',12)} Delete</button>
           </div>
           <!-- Inline edit form, hidden by default -->
           <div id="cron-edit-${job.id}" style="display:none;margin-top:8px;border-top:1px solid var(--border);padding-top:8px">
@@ -172,7 +172,7 @@ async function submitCronCreate(){
     if(_cronSelectedSkills.length)body.skills=_cronSelectedSkills;
     await api('/api/crons/create',{method:'POST',body:JSON.stringify(body)});
     toggleCronForm();
-    showToast('Job created ✓');
+    showToast('Job created');
     await loadCrons();
   }catch(e){
     errEl.textContent='Error: '+e.message;errEl.style.display='';
@@ -242,7 +242,7 @@ function toggleCron(id) {
 async function cronRun(id) {
   try {
     await api('/api/crons/run', {method:'POST', body: JSON.stringify({job_id: id})});
-    showToast('Job triggered ✓');
+    showToast('Job triggered');
     setTimeout(() => loadCronOutput(id), 5000);
   } catch(e) { showToast('Run failed: ' + e.message, 4000); }
 }
@@ -258,7 +258,7 @@ async function cronPause(id) {
 async function cronResume(id) {
   try {
     await api('/api/crons/resume', {method:'POST', body: JSON.stringify({job_id: id})});
-    showToast('Job resumed ✓');
+    showToast('Job resumed');
     await loadCrons();
   } catch(e) { showToast('Resume failed: ' + e.message, 4000); }
 }
@@ -290,7 +290,7 @@ async function cronEditSave(id) {
     const updates = {job_id: id, schedule, prompt};
     if (name) updates.name = name;
     await api('/api/crons/update', {method:'POST', body: JSON.stringify(updates)});
-    showToast('Job updated ✓');
+    showToast('Job updated');
     await loadCrons();
   } catch(e) { errEl.textContent = 'Error: ' + e.message; errEl.style.display = ''; }
 }
@@ -326,11 +326,11 @@ function loadTodos() {
     panel.innerHTML = '<div style="color:var(--muted);font-size:12px;padding:4px 0">No active task list in this session.</div>';
     return;
   }
-  const statusIcon = {pending:'○', in_progress:'◉', completed:'✓', cancelled:'✗'};
+  const statusIcon = {pending:li('square',14), in_progress:li('loader',14), completed:li('check',14), cancelled:li('x',14)};
   const statusColor = {pending:'var(--muted)', in_progress:'var(--blue)', completed:'rgba(100,200,100,.8)', cancelled:'rgba(200,100,100,.5)'};
   panel.innerHTML = todos.map(t => `
     <div style="display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);">
-      <span style="font-size:14px;flex-shrink:0;margin-top:1px;color:${statusColor[t.status]||'var(--muted)'}">${statusIcon[t.status]||'○'}</span>
+      <span style="font-size:14px;display:inline-flex;align-items:center;flex-shrink:0;margin-top:1px;color:${statusColor[t.status]||'var(--muted)'}">${statusIcon[t.status]||li('square',14)}</span>
       <div style="flex:1;min-width:0">
         <div style="font-size:13px;color:${t.status==='completed'?'var(--muted)':t.status==='in_progress'?'var(--text)':'var(--text)'};${t.status==='completed'?'text-decoration:line-through;opacity:.5':''};line-height:1.4">${esc(t.content)}</div>
         <div style="font-size:10px;color:var(--muted);margin-top:2px;opacity:.6">${esc(t.id)} · ${esc(t.status)}</div>
@@ -385,7 +385,7 @@ function renderSkills(skills) {
   for (const [cat, items] of Object.entries(cats).sort()) {
     const sec = document.createElement('div');
     sec.className = 'skills-category';
-    sec.innerHTML = `<div class="skills-cat-header">&#128193; ${esc(cat)} <span style="opacity:.5">(${items.length})</span></div>`;
+    sec.innerHTML = `<div class="skills-cat-header">${li('folder',12)} ${esc(cat)} <span style="opacity:.5">(${items.length})</span></div>`;
     for (const skill of items.sort((a,b) => a.name.localeCompare(b.name))) {
       const el = document.createElement('div');
       el.className = 'skill-item';
@@ -482,7 +482,7 @@ async function submitSkillSave() {
   if (!content.trim()) { errEl.textContent = 'Content is required'; errEl.style.display = ''; return; }
   try {
     await api('/api/skills/save', {method:'POST', body: JSON.stringify({name, category: category||undefined, content})});
-    showToast(_editingSkillName ? 'Skill updated ✓' : 'Skill created ✓');
+    showToast(_editingSkillName ? 'Skill updated' : 'Skill created');
     _skillsData = null;
     toggleSkillForm();
     await loadSkills();
@@ -514,7 +514,7 @@ async function submitMemorySave() {
   errEl.style.display = 'none';
   try {
     await api('/api/memory/write', {method:'POST', body: JSON.stringify({section: 'memory', content})});
-    showToast('Memory saved ✓');
+    showToast('Memory saved');
     closeMemoryEdit();
     await loadMemory(true);
   } catch(e) { errEl.textContent = 'Error: ' + e.message; errEl.style.display = ''; }
@@ -532,48 +532,95 @@ function getWorkspaceFriendlyName(path){
   return path.split('/').filter(Boolean).pop()||path;
 }
 
+function syncWorkspaceDisplays(){
+  const hasSession=!!(S.session&&S.session.workspace);
+  const ws=hasSession?S.session.workspace:'';
+  const label=hasSession?getWorkspaceFriendlyName(ws):t('no_workspace');
+
+  const sidebarName=$('sidebarWsName');
+  const sidebarPath=$('sidebarWsPath');
+  if(sidebarName) sidebarName.textContent=label;
+  if(sidebarPath) sidebarPath.textContent=ws;
+
+  const composerChip=$('composerWorkspaceChip');
+  const composerLabel=$('composerWorkspaceLabel');
+  const composerDropdown=$('composerWsDropdown');
+  if(!hasSession && composerDropdown) composerDropdown.classList.remove('open');
+  if(composerLabel) composerLabel.textContent=label;
+  if(composerChip){
+    composerChip.disabled=!hasSession;
+    composerChip.title=hasSession?ws:'No active workspace';
+    composerChip.classList.toggle('active',!!(composerDropdown&&composerDropdown.classList.contains('open')));
+  }
+}
+
 async function loadWorkspaceList(){
   try{
     const data = await api('/api/workspaces');
     _workspaceList = data.workspaces || [];
-    // Refresh sidebar display if we have a current session
-    if(S.session && S.session.workspace) {
-      const sidebarName=$('sidebarWsName');
-      const sidebarPath=$('sidebarWsPath');
-      if(sidebarName) sidebarName.textContent=getWorkspaceFriendlyName(S.session.workspace);
-      if(sidebarPath) sidebarPath.textContent=S.session.workspace;
-    }
+    syncWorkspaceDisplays();
     return data;
   }catch(e){ return {workspaces:[], last:''}; }
 }
 
-function renderWorkspaceDropdown(workspaces, currentWs){
-  const dd = $('wsDropdown');
+function _renderWorkspaceAction(label, meta, iconSvg, onClick){
+  const opt=document.createElement('div');
+  opt.className='ws-opt ws-opt-action';
+  opt.innerHTML=`<span class="ws-opt-icon">${iconSvg}</span><span><span class="ws-opt-name">${esc(label)}</span>${meta?`<span class="ws-opt-meta">${esc(meta)}</span>`:''}</span>`;
+  opt.onclick=onClick;
+  return opt;
+}
+
+function _positionComposerWsDropdown(){
+  const dd=$('composerWsDropdown');
+  const chip=$('composerWorkspaceChip');
+  const footer=document.querySelector('.composer-footer');
+  if(!dd||!chip||!footer)return;
+  const chipRect=chip.getBoundingClientRect();
+  const footerRect=footer.getBoundingClientRect();
+  let left=chipRect.left-footerRect.left;
+  const maxLeft=Math.max(0, footer.clientWidth-dd.offsetWidth);
+  left=Math.max(0, Math.min(left, maxLeft));
+  dd.style.left=`${left}px`;
+}
+
+function _positionProfileDropdown(){
+  const dd=$('profileDropdown');
+  const chip=$('profileChip');
+  const footer=document.querySelector('.composer-footer');
+  if(!dd||!chip||!footer)return;
+  const chipRect=chip.getBoundingClientRect();
+  const footerRect=footer.getBoundingClientRect();
+  let left=chipRect.left-footerRect.left;
+  const maxLeft=Math.max(0, footer.clientWidth-dd.offsetWidth);
+  left=Math.max(0, Math.min(left, maxLeft));
+  dd.style.left=`${left}px`;
+}
+
+function renderWorkspaceDropdownInto(dd, workspaces, currentWs){
   if(!dd)return;
   dd.innerHTML='';
   for(const w of workspaces){
     const opt=document.createElement('div');
     opt.className='ws-opt'+(w.path===currentWs?' active':'');
     opt.innerHTML=`<span class="ws-opt-name">${esc(w.name)}</span><span class="ws-opt-path">${esc(w.path)}</span>`;
-    opt.onclick=async()=>{
-      closeWsDropdown();
-      if(!S.session||w.path===S.session.workspace)return;
-      await api('/api/session/update',{method:'POST',body:JSON.stringify({
-        session_id:S.session.session_id, workspace:w.path, model:S.session.model
-      })});
-      S.session.workspace=w.path;
-      syncTopbar();
-      await loadDir('.');
-      showToast(`Switched to ${w.name}`);
-    };
+    opt.onclick=()=>switchToWorkspace(w.path,w.name);
     dd.appendChild(opt);
   }
-  // Divider + Manage link
+  dd.appendChild(document.createElement('div')).className='ws-divider';
+  dd.appendChild(_renderWorkspaceAction(
+    'Choose workspace path',
+    'Add a validated path and switch this conversation',
+    li('folder',12),
+    ()=>promptWorkspacePath()
+  ));
   const div=document.createElement('div');div.className='ws-divider';dd.appendChild(div);
-  const mgmt=document.createElement('div');mgmt.className='ws-opt ws-manage';
-  mgmt.innerHTML='&#9881; Manage workspaces';
-  mgmt.onclick=()=>{closeWsDropdown();switchPanel('workspaces');};
-  dd.appendChild(mgmt);
+  dd.appendChild(_renderWorkspaceAction(
+    'Manage workspaces',
+    'Open the Spaces panel',
+    li('settings',12),
+    ()=>{closeWsDropdown();mobileSwitchPanel('workspaces');}
+  ));
 }
 
 function toggleWsDropdown(){
@@ -584,18 +631,47 @@ function toggleWsDropdown(){
   else{
     closeProfileDropdown(); // close profile dropdown if open
     loadWorkspaceList().then(data=>{
-      renderWorkspaceDropdown(data.workspaces, S.session?S.session.workspace:'');
+      renderWorkspaceDropdownInto(dd, data.workspaces, S.session?S.session.workspace:'');
       dd.classList.add('open');
     });
   }
 }
 
+function toggleComposerWsDropdown(){
+  const dd=$('composerWsDropdown');
+  const chip=$('composerWorkspaceChip');
+  if(!dd||!chip||chip.disabled)return;
+  const open=dd.classList.contains('open');
+  if(open){closeWsDropdown();}
+  else{
+    closeProfileDropdown();
+    if(typeof closeModelDropdown==='function') closeModelDropdown();
+    loadWorkspaceList().then(data=>{
+      renderWorkspaceDropdownInto(dd, data.workspaces, S.session?S.session.workspace:'');
+      dd.classList.add('open');
+      _positionComposerWsDropdown();
+      chip.classList.add('active');
+    });
+  }
+}
+
 function closeWsDropdown(){
   const dd=$('wsDropdown');
+  const composerDd=$('composerWsDropdown');
+  const composerChip=$('composerWorkspaceChip');
   if(dd)dd.classList.remove('open');
+  if(composerDd)composerDd.classList.remove('open');
+  if(composerChip)composerChip.classList.remove('active');
 }
 document.addEventListener('click',e=>{
-  if(!e.target.closest('#sidebarWsDisplay') && !e.target.closest('#wsDropdown'))closeWsDropdown();
+  if(
+    !e.target.closest('#composerWorkspaceChip') &&
+    !e.target.closest('#composerWsDropdown')
+  ) closeWsDropdown();
+});
+window.addEventListener('resize',()=>{
+  const dd=$('composerWsDropdown');
+  if(dd&&dd.classList.contains('open')) _positionComposerWsDropdown();
 });
 
 async function loadWorkspacesPanel(){
@@ -616,15 +692,15 @@ function renderWorkspacesPanel(workspaces){
         <div class="ws-row-path">${esc(w.path)}</div>
       </div>
       <div class="ws-row-actions">
-        <button class="ws-action-btn" title="Use in current session" onclick="switchToWorkspace('${esc(w.path)}','${esc(w.name)}')">&#8594; Use</button>
-        <button class="ws-action-btn danger" title="Remove" onclick="removeWorkspace('${esc(w.path)}')">&#10005;</button>
+        <button class="ws-action-btn" title="Use in current session" onclick="switchToWorkspace('${esc(w.path)}','${esc(w.name)}')">${li('arrow-right',12)} Use</button>
+        <button class="ws-action-btn danger" title="Remove" onclick="removeWorkspace('${esc(w.path)}')">${li('x',12)}</button>
       </div>`;
     panel.appendChild(row);
   }
   const addRow=document.createElement('div');addRow.className='ws-add-row';
   addRow.innerHTML=`
     <input id="wsAddInput" placeholder="Add workspace path (e.g. /home/user/my-project)" style="flex:1;background:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:7px;color:var(--text);padding:7px 10px;font-size:12px;outline:none;">
-    <button class="ws-action-btn" onclick="addWorkspace()">&#43; Add</button>`;
+    <button class="ws-action-btn" onclick="addWorkspace()">${li('plus',12)} Add</button>`;
   panel.appendChild(addRow);
   const hint=document.createElement('div');
   hint.style.cssText='font-size:11px;color:var(--muted);padding:4px 0 8px';
@@ -656,16 +732,58 @@ async function removeWorkspace(path){
   }catch(e){setStatus('Remove failed: '+e.message);}
 }
 
+async function promptWorkspacePath(){
+  if(!S.session)return;
+  const value=await showPromptDialog({
+    title:'Switch workspace',
+    message:'Enter an absolute workspace path to add and switch this conversation to.',
+    confirmLabel:'Switch',
+    placeholder:'/Users/you/project',
+    value:S.session.workspace||''
+  });
+  const path=(value||'').trim();
+  if(!path)return;
+  try{
+    const data=await api('/api/workspaces/add',{method:'POST',body:JSON.stringify({path})});
+    _workspaceList=data.workspaces||[];
+    const target=_workspaceList[_workspaceList.length-1];
+    if(!target) throw new Error('Workspace was not added');
+    await switchToWorkspace(target.path,target.name);
+  }catch(e){
+    if(String(e.message||'').includes('Workspace already in list')){
+      showToast('Workspace already saved — choose it from the list');
+      return;
+    }
+    showToast('Workspace switch failed: '+e.message);
+  }
+}
+
 async function switchToWorkspace(path,name){
   if(!S.session)return;
+  if(S.busy){
+    showToast('Cannot switch workspace while agent is running');
+    return;
+  }
+  if(typeof _previewDirty!=='undefined'&&_previewDirty){
+    const discard=await showConfirmDialog({
+      title:'Discard file edits?',
+      message:'Switching workspaces will discard unsaved file edits in the preview.',
+      confirmLabel:t('discard'),
+      danger:true
+    });
+    if(!discard)return;
+    if(typeof cancelEditMode==='function')cancelEditMode();
+    if(typeof clearPreview==='function')clearPreview();
+  }
   try{
+    closeWsDropdown();
     await api('/api/session/update',{method:'POST',body:JSON.stringify({
       session_id:S.session.session_id, workspace:path, model:S.session.model
     })});
     S.session.workspace=path;
     syncTopbar();
     await loadDir('.');
-    showToast(`Switched to ${name}`);
+    showToast(`Switched to ${name||getWorkspaceFriendlyName(path)}`);
   }catch(e){setStatus('Switch failed: '+e.message);}
 }
 
@@ -704,7 +822,7 @@ async function loadProfilesPanel() {
           </div>
           <div class="profile-card-actions">
             ${!isActive ? `<button class="ws-action-btn" onclick="switchToProfile('${esc(p.name)}')" title="Switch to this profile">Use</button>` : ''}
-            ${!p.is_default ? `<button class="ws-action-btn danger" onclick="deleteProfile('${esc(p.name)}')" title="Delete this profile">&#10005;</button>` : ''}
+            ${!p.is_default ? `<button class="ws-action-btn danger" onclick="deleteProfile('${esc(p.name)}')" title="Delete this profile">${li('x',12)}</button>` : ''}
           </div>
         </div>`;
       panel.appendChild(card);
@@ -740,8 +858,8 @@ function renderProfileDropdown(data) {
   // Divider + Manage link
   const div = document.createElement('div'); div.className = 'ws-divider'; dd.appendChild(div);
   const mgmt = document.createElement('div'); mgmt.className = 'profile-opt ws-manage';
-  mgmt.innerHTML = '&#9881; Manage profiles';
-  mgmt.onclick = () => { closeProfileDropdown(); switchPanel('profiles'); };
+  mgmt.innerHTML = `${li('settings',12)} Manage profiles`;
+  mgmt.onclick = () => { closeProfileDropdown(); mobileSwitchPanel('profiles'); };
   dd.appendChild(mgmt);
 }
 
@@ -750,18 +868,28 @@ function toggleProfileDropdown() {
   if (!dd) return;
   if (dd.classList.contains('open')) { closeProfileDropdown(); return; }
   closeWsDropdown(); // close workspace dropdown if open
+  if(typeof closeModelDropdown==='function') closeModelDropdown();
   api('/api/profiles').then(data => {
     renderProfileDropdown(data);
     dd.classList.add('open');
+    _positionProfileDropdown();
+    const chip=$('profileChip');
+    if(chip) chip.classList.add('active');
   }).catch(e => { showToast('Failed to load profiles'); });
 }
 
 function closeProfileDropdown() {
   const dd = $('profileDropdown');
   if (dd) dd.classList.remove('open');
+  const chip=$('profileChip');
+  if(chip) chip.classList.remove('active');
 }
 document.addEventListener('click', e => {
-  if (!e.target.closest('#profileChipWrap')) closeProfileDropdown();
+  if (!e.target.closest('#profileChipWrap') && !e.target.closest('#profileDropdown')) closeProfileDropdown();
+});
+window.addEventListener('resize',()=>{
+  const dd=$('profileDropdown');
+  if(dd&&dd.classList.contains('open')) _positionProfileDropdown();
 });
 
 async function switchToProfile(name) {
@@ -894,7 +1022,7 @@ async function loadMemory(force) {
     panel.innerHTML = `
       <div class="memory-section">
         <div class="memory-section-title">
-          &#129504; My Notes
+          <span style="display:inline-flex;align-items:center;gap:6px">${li('brain',14)} My Notes</span>
           <span class="memory-mtime">${fmtTime(data.memory_mtime)}</span>
         </div>
         ${data.memory
@@ -903,7 +1031,7 @@ async function loadMemory(force) {
       </div>
       <div class="memory-section">
         <div class="memory-section-title">
-          &#128100; User Profile
+          <span style="display:inline-flex;align-items:center;gap:6px">${li('user',14)} User Profile</span>
           <span class="memory-mtime">${fmtTime(data.user_mtime)}</span>
         </div>
         ${data.user
@@ -924,6 +1052,44 @@ document.addEventListener('drop',e=>{e.preventDefault();dragCounter=0;wrap.class
 
 let _settingsDirty = false;
 let _settingsThemeOnOpen = null; // track theme at open time for discard revert
+let _settingsSection = 'conversation';
+
+function switchSettingsSection(name){
+  const section=(name==='preferences'||name==='system')?name:'conversation';
+  _settingsSection=section;
+  const map={conversation:'Conversation',preferences:'Preferences',system:'System'};
+  ['conversation','preferences','system'].forEach(key=>{
+    const tab=$('settingsTab'+map[key]);
+    const pane=$('settingsPane'+map[key]);
+    const active=key===section;
+    if(tab){
+      tab.classList.toggle('active',active);
+      tab.setAttribute('aria-selected',active?'true':'false');
+    }
+    if(pane) pane.classList.toggle('active',active);
+  });
+}
+
+function _syncHermesPanelSessionActions(){
+  const hasSession=!!S.session;
+  const visibleMessages=hasSession?(S.messages||[]).filter(m=>m&&m.role&&m.role!=='tool').length:0;
+  const title=hasSession?(S.session.title||'Untitled'):'No active conversation selected.';
+  const meta=$('hermesSessionMeta');
+  if(meta){
+    meta.textContent=hasSession
+      ? `${title} · ${visibleMessages} message${visibleMessages===1?'':'s'}`
+      : 'No active conversation selected.';
+  }
+  const setDisabled=(id,disabled)=>{
+    const el=$(id);
+    if(!el)return;
+    el.disabled=!!disabled;
+    el.classList.toggle('disabled',!!disabled);
+  };
+  setDisabled('btnDownload',!hasSession||visibleMessages===0);
+  setDisabled('btnExportJSON',!hasSession);
+  setDisabled('btnClearConvModal',!hasSession||visibleMessages===0);
+}
 
 function toggleSettings(){
   const overlay=$('settingsOverlay');
@@ -931,6 +1097,7 @@ function toggleSettings(){
   if(overlay.style.display==='none'){
     _settingsDirty = false;
     _settingsThemeOnOpen = document.documentElement.dataset.theme || 'dark';
+    _settingsSection = 'conversation';
     overlay.style.display='';
     loadSettingsPanel();
   } else {
@@ -938,12 +1105,26 @@ function toggleSettings(){
   }
 }
 
+function _resetSettingsPanelState(){
+  _settingsSection = 'conversation';
+  switchSettingsSection('conversation');
+  const bar=$('settingsUnsavedBar');
+  if(bar) bar.style.display='none';
+}
+
+function _hideSettingsPanel(){
+  const overlay=$('settingsOverlay');
+  if(!overlay) return;
+  _resetSettingsPanelState();
+  overlay.style.display='none';
+}
+
 // Close with unsaved-changes check. If dirty, show a confirm dialog.
 function _closeSettingsPanel(){
   if(!_settingsDirty){
     // Nothing changed -- revert any live preview and close
     _revertSettingsPreview();
-    $('settingsOverlay').style.display='none';
+    _hideSettingsPanel();
     return;
   }
   // Dirty -- show inline confirm bar
@@ -971,14 +1152,14 @@ function _showSettingsUnsavedBar(){
     + '<button onclick="_discardSettings()" style="padding:5px 12px;border-radius:6px;border:1px solid var(--border2);background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;font-size:12px;font-weight:600">Discard</button>'
     + '<button onclick="saveSettings(true)" style="padding:5px 12px;border-radius:6px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:12px;font-weight:600">Save</button>'
     + '</span>';
-  const body = document.querySelector('.settings-body') || document.querySelector('.settings-panel');
+  const body = document.querySelector('.settings-main') || document.querySelector('.settings-body') || document.querySelector('.settings-panel');
   if(body) body.prepend(bar);
 }
 
 function _discardSettings(){
   _revertSettingsPreview();
   _settingsDirty = false;
-  $('settingsOverlay').style.display = 'none';
+  _hideSettingsPanel();
 }
 
 // Mark settings as dirty whenever anything changes
@@ -1058,6 +1239,8 @@ async function loadSettingsPanel(){
       const disableBtn=$('btnDisableAuth');
       if(disableBtn) disableBtn.style.display=active?'':'none';
     }catch(e){}
+    _syncHermesPanelSessionActions();
+    switchSettingsSection(_settingsSection);
   }catch(e){
     showToast(t('settings_load_failed')+e.message);
   }
@@ -1097,8 +1280,7 @@ async function saveSettings(andClose){
       if(typeof applyLocaleToDOM==='function') applyLocaleToDOM();
       showToast(t('settings_saved_pw'));
       _settingsDirty=false; _settingsThemeOnOpen=theme;
-      const bar=$('settingsUnsavedBar'); if(bar) bar.style.display='none';
-      $('settingsOverlay').style.display='none';
+      _hideSettingsPanel();
       return;
     }catch(e){showToast('Save failed: '+e.message);return;}
   }
@@ -1121,7 +1303,7 @@ async function saveSettings(andClose){
     if(typeof syncTopbar==='function') syncTopbar();
     if(typeof renderSessionList==='function') renderSessionList();
     showToast(t('settings_saved'));
-    $('settingsOverlay').style.display='none';
+    _hideSettingsPanel();
   }catch(e){
     showToast(t('settings_save_failed')+e.message);
   }
@@ -1172,8 +1354,7 @@ function startCronPolling(){
       const data=await api(`/api/crons/recent?since=${_cronPollSince}`);
       if(data.completions&&data.completions.length>0){
         for(const c of data.completions){
-          const icon=c.status==='error'?'\u274c':'\u2705';
-          showToast(`${icon} Cron "${c.name}" ${c.status==='error'?'failed':'completed'}`,4000);
+          showToast(`Cron "${c.name}" ${c.status==='error'?'failed':'completed'}`,4000);
           _cronPollSince=Math.max(_cronPollSince,c.completed_at);
         }
         _cronUnreadCount+=data.completions.length;

static/sessions.js

@@ -10,7 +10,75 @@ const ICONS={
   more:'<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" stroke="none"><circle cx="8" cy="3" r="1.25"/><circle cx="8" cy="8" r="1.25"/><circle cx="8" cy="13" r="1.25"/></svg>',
 };
 
+async function newSession(flash){
+  MSG_QUEUE.length=0;updateQueueBadge();
+  S.toolCalls=[];
+  clearLiveToolCards();
+  // Use profile default workspace for new sessions after a profile switch (one-shot),
+  // otherwise inherit from the current session (or let server pick the default)
+  const inheritWs=S._profileDefaultWorkspace||(S.session?S.session.workspace:null);
+  S._profileDefaultWorkspace=null; // consume — only applies to the first new session after switch
+  const data=await api('/api/session/new',{method:'POST',body:JSON.stringify({model:$('modelSelect').value,workspace:inheritWs})});
+  S.session=data.session;S.messages=data.session.messages||[];
+  if(flash)S.session._flash=true;
+  localStorage.setItem('hermes-webui-session',S.session.session_id);
+  syncTopbar();await loadDir('.');renderMessages();
+  // don't call renderSessionList here - callers do it when needed
+}
 
+async function loadSession(sid){
+  stopApprovalPolling();hideApprovalCard();
+  const data=await api(`/api/session?session_id=${encodeURIComponent(sid)}`);
+  S.session=data.session;
+  localStorage.setItem('hermes-webui-session',S.session.session_id);
+  // B9: sanitize empty assistant messages that can appear when agent only ran tool calls
+  data.session.messages=(data.session.messages||[]).filter(m=>{
+    if(!m||!m.role)return false;
+    if(m.role==='tool')return false;
+    if(m.role==='assistant'){let c=m.content||'';if(Array.isArray(c))c=c.filter(p=>p&&p.type==='text').map(p=>p.text||'').join('');return String(c).trim().length>0;}
+    return true;
+  });
+  if(INFLIGHT[sid]){
+    S.messages=INFLIGHT[sid].messages;
+    // Restore live tool cards for this in-flight session
+    clearLiveToolCards();
+    for(const tc of (S.toolCalls||[])){
+      if(tc&&tc.name) appendLiveToolCard(tc);
+    }
+    syncTopbar();await loadDir('.');renderMessages();appendThinking();
+    setBusy(true);setComposerStatus('');
+    startApprovalPolling(sid);
+  }else{
+    MSG_QUEUE.length=0;updateQueueBadge();  // clear queue for the viewed session
+    S.messages=data.session.messages||[];
+    S.toolCalls=(data.session.tool_calls||[]).map(tc=>({...tc,done:true}));
+    // Reset per-session visual state: the viewed session is idle even if another
+    // session's stream is still running in the background.
+    // We directly update the DOM instead of calling setBusy(false), because
+    // setBusy(false) drains MSG_QUEUE which we don't want here.
+    S.busy=false;
+    S.activeStreamId=null;
+    updateSendBtn();
+    const _cb=$('btnCancel');if(_cb)_cb.style.display='none';
+    setStatus('');
+    setComposerStatus('');
+    clearLiveToolCards();
+    syncTopbar();await loadDir('.');renderMessages();highlightCode();
+  }
+  // Sync context usage indicator from session data
+  const _s=S.session;
+  if(_s&&typeof _syncCtxIndicator==='function'){
+    const u=S.lastUsage||{};
+    _syncCtxIndicator({input_tokens:_s.input_tokens||u.input_tokens||0,output_tokens:_s.output_tokens||u.output_tokens||0,estimated_cost:_s.estimated_cost||u.estimated_cost,context_length:u.context_length||0,last_prompt_tokens:u.last_prompt_tokens||0,threshold_tokens:u.threshold_tokens||0});
+  }
+}
+
+let _allSessions = [];  // cached for search filter
+let _renamingSid = null;  // session_id currently being renamed (blocks list re-renders)
+let _showArchived = false;  // toggle to show archived sessions
+let _allProjects = [];  // cached project list
+let _activeProject = null;  // project_id filter (null = show all)
+let _showAllProfiles = false;  // false = filter to active profile only
 let _sessionActionMenu = null;
 let _sessionActionAnchor = null;
 let _sessionActionSessionId = null;
@@ -170,71 +238,6 @@ window.addEventListener('resize',()=>{
   if(_sessionActionMenu && _sessionActionAnchor) _positionSessionActionMenu(_sessionActionAnchor);
 });
 
-async function newSession(flash){
-  MSG_QUEUE.length=0;updateQueueBadge();
-  S.toolCalls=[];
-  clearLiveToolCards();
-  // Use profile default workspace for new sessions after a profile switch (one-shot),
-  // otherwise inherit from the current session (or let server pick the default)
-  const inheritWs=S._profileDefaultWorkspace||(S.session?S.session.workspace:null);
-  S._profileDefaultWorkspace=null; // consume — only applies to the first new session after switch
-  const data=await api('/api/session/new',{method:'POST',body:JSON.stringify({model:$('modelSelect').value,workspace:inheritWs})});
-  S.session=data.session;S.messages=data.session.messages||[];
-  if(flash)S.session._flash=true;
-  localStorage.setItem('hermes-webui-session',S.session.session_id);
-  syncTopbar();await loadDir('.');renderMessages();
-  // don't call renderSessionList here - callers do it when needed
-}
-
-async function loadSession(sid){
-  stopApprovalPolling();hideApprovalCard();
-  const data=await api(`/api/session?session_id=${encodeURIComponent(sid)}`);
-  S.session=data.session;
-  localStorage.setItem('hermes-webui-session',S.session.session_id);
-  // B9: sanitize empty assistant messages that can appear when agent only ran tool calls
-  data.session.messages=(data.session.messages||[]).filter(m=>{
-    if(!m||!m.role)return false;
-    if(m.role==='tool')return false;
-    if(m.role==='assistant'){let c=m.content||'';if(Array.isArray(c))c=c.filter(p=>p&&p.type==='text').map(p=>p.text||'').join('');return String(c).trim().length>0;}
-    return true;
-  });
-  if(INFLIGHT[sid]){
-    S.messages=INFLIGHT[sid].messages;
-    // Restore live tool cards for this in-flight session
-    clearLiveToolCards();
-    for(const tc of (S.toolCalls||[])){
-      if(tc&&tc.name) appendLiveToolCard(tc);
-    }
-    syncTopbar();await loadDir('.');renderMessages();appendThinking();
-    setBusy(true);setStatus((window._botName||'Hermes')+' is thinking\u2026');
-    startApprovalPolling(sid);
-  }else{
-    MSG_QUEUE.length=0;updateQueueBadge();  // clear queue for the viewed session
-    S.messages=data.session.messages||[];
-    S.toolCalls=(data.session.tool_calls||[]).map(tc=>({...tc,done:true}));
-    // Reset per-session visual state: the viewed session is idle even if another
-    // session's stream is still running in the background.
-    // We directly update the DOM instead of calling setBusy(false), because
-    // setBusy(false) drains MSG_QUEUE which we don't want here.
-    S.busy=false;
-    S.activeStreamId=null;
-    $('btnSend').disabled=false;
-    $('btnSend').style.opacity='1';
-    const _dots=$('activityDots');if(_dots)_dots.style.display='none';
-    const _cb=$('btnCancel');if(_cb)_cb.style.display='none';
-    setStatus('');
-    clearLiveToolCards();
-    syncTopbar();await loadDir('.');renderMessages();highlightCode();
-  }
-}
-
-let _allSessions = [];  // cached for search filter
-let _renamingSid = null;  // session_id currently being renamed (blocks list re-renders)
-let _showArchived = false;  // toggle to show archived sessions
-let _allProjects = [];  // cached project list
-let _activeProject = null;  // project_id filter (null = show all)
-let _showAllProfiles = false;  // false = filter to active profile only
-
 async function renderSessionList(){
   try{
     if(!($('sessionSearch').value||'').trim()) _contentSearchResults = [];
@@ -300,6 +303,7 @@ function filterSessions(){
 function renderSessionListFromCache(){
   // Don't re-render while user is actively renaming a session (would destroy the input)
   if(_renamingSid) return;
+  closeSessionActionMenu();
   const q=($('sessionSearch').value||'').toLowerCase();
   const titleMatches=q?_allSessions.filter(s=>(s.title||'Untitled').toLowerCase().includes(q)):_allSessions;
   // Merge content matches (deduped): content matches appended after title matches
@@ -463,6 +467,7 @@ function renderSessionListFromCache(){
 
     // Rename: called directly when we confirm it's a double-click
     const startRename=()=>{
+      closeSessionActionMenu();
       _renamingSid = s.session_id;
       const inp=document.createElement('input');
       inp.className='session-title-input';
@@ -501,11 +506,10 @@ function renderSessionListFromCache(){
       pinInd.innerHTML=ICONS.pin;
       el.appendChild(pinInd);
     }
-    // Project indicator: colored left border (active item keeps its own gold color)
+    // Project indicator: colored dot appended after the title
     if(s.project_id){
       const proj=_allProjects.find(p=>p.project_id===s.project_id);
       if(proj){
-        // project color shown via dot indicator, not left border
         const dot=document.createElement('span');
         dot.className='session-project-dot';
         dot.style.background=proj.color||'var(--blue)';
@@ -514,6 +518,7 @@ function renderSessionListFromCache(){
       }
     }
     el.appendChild(title);
+    // Single trigger button that opens a shared dropdown menu
     const actions=document.createElement('div');
     actions.className='session-actions';
     const menuBtn=document.createElement('button');
@@ -564,8 +569,12 @@ function renderSessionListFromCache(){
 }
 
 async function deleteSession(sid){
-  const _delSess=await showConfirmDialog({title:'Delete conversation',message:'This cannot be undone.',confirmLabel:'Delete',danger:true,focusCancel:true});
-  if(!_delSess) return;
+  const ok=await showConfirmDialog({
+    message:'Delete this conversation?',
+    confirmLabel:t('delete_title'),
+    danger:true
+  });
+  if(!ok)return;
   try{
     await api('/api/session/delete',{method:'POST',body:JSON.stringify({session_id:sid})});
   }catch(e){setStatus(`Delete failed: ${e.message}`);return;}
@@ -640,8 +649,11 @@ function _showProjectPicker(session, anchorEl){
   createItem.onclick=async()=>{
     picker.remove();
     document.removeEventListener('click',close);
-    // Prompt for name inline
-    const name=await showPromptDialog({title:'New project',message:'',placeholder:'Project name',confirmLabel:t('create')});
+    const name=await showPromptDialog({
+      message:t('project_name_prompt'),
+      confirmLabel:t('create'),
+      placeholder:'Project name'
+    });
     if(!name||!name.trim()) return;
     const color=PROJECT_COLORS[_allProjects.length%PROJECT_COLORS.length];
     const res=await api('/api/projects/create',{method:'POST',body:JSON.stringify({name:name.trim(),color})});
@@ -680,7 +692,7 @@ function _showProjectPicker(session, anchorEl){
   setTimeout(()=>document.addEventListener('click',close),0);
 }
 
-async function _startProjectCreate(bar, addBtn){
+function _startProjectCreate(bar, addBtn){
   const inp=document.createElement('input');
   inp.className='project-create-input';
   inp.placeholder='Project name';
@@ -727,12 +739,14 @@ function _startProjectRename(proj, chip){
 }
 
 async function _confirmDeleteProject(proj){
-  const _delProj=await showConfirmDialog({title:`Delete project "${proj.name}"?`,message:'Sessions will be unassigned but not deleted.',confirmLabel:'Delete',danger:true,focusCancel:true});
-  if(!_delProj) return;
+  const ok=await showConfirmDialog({
+    message:'Delete project "'+proj.name+'"? Sessions will be unassigned but not deleted.',
+    confirmLabel:t('delete_title'),
+    danger:true
+  });
+  if(!ok){return;}
   await api('/api/projects/delete',{method:'POST',body:JSON.stringify({project_id:proj.project_id})});
   if(_activeProject===proj.project_id) _activeProject=null;
   await renderSessionList();
   showToast('Project deleted');
 }
-
-

static/style.css

@@ -34,10 +34,11 @@
   :root[data-theme="light"] .session-item{color:#5a544a;}
   :root[data-theme="light"] .session-item:hover{background:rgba(0,0,0,.06);color:#2c2825;}
   :root[data-theme="light"] .session-item.active{background:rgba(45,111,163,.1);color:#1a5a8a;}
-  :root[data-theme="light"] .session-item.active .session-actions{background:linear-gradient(to right,transparent,rgba(228,224,216,.95) 12px);}
   :root[data-theme="light"] .session-pin-indicator{color:#996b15;}
   :root[data-theme="light"] .session-date-header.pinned{color:#996b15;}
-  :root[data-theme="light"] .session-actions .act-pin.pinned{color:#996b15;}
+  :root[data-theme="light"] .session-actions-trigger.active,
+  :root[data-theme="light"] .session-item.menu-open .session-actions-trigger{background:rgba(45,111,163,.12);border-color:rgba(45,111,163,.22);color:#1a5a8a;}
+  :root[data-theme="light"] .session-action-opt.is-active{background:rgba(45,111,163,.1);}
   :root[data-theme="light"] .msg-role.user{color:#2d6fa3;}
   :root[data-theme="light"] .msg-role.assistant{color:#8a6520;}
   :root[data-theme="light"] .role-icon.user{background:rgba(45,111,163,.12);color:#2d6fa3;border-color:rgba(45,111,163,.25);}
@@ -67,7 +68,8 @@
   :root[data-theme="light"] .preview-md th{background:rgba(0,0,0,.04);}
   :root[data-theme="light"] .preview-md td{border-color:rgba(0,0,0,.08);}
   :root[data-theme="light"] .preview-badge.code{background:rgba(0,0,0,.05);}
-  :root[data-theme="light"] .ctx-bar-wrap{background:rgba(0,0,0,.08);}
+  :root[data-theme="light"] .ctx-ring-center{background:var(--bg);color:#5a544a;}
+  :root[data-theme="light"] .ctx-ring-track{stroke:rgba(0,0,0,.12);}
   :root[data-theme="light"] .ws-opt:hover{background:rgba(0,0,0,.05);}
   :root[data-theme="light"] .profile-opt:hover{background:rgba(0,0,0,.05);}
   :root[data-theme="light"] .profile-opt.active{background:rgba(45,111,163,.06);}
@@ -120,16 +122,16 @@
   .new-chat-btn:hover{background:rgba(124,185,255,0.13);border-color:rgba(124,185,255,.3);}
   .session-list{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0;}
   .session-search{padding:4px 10px 8px;flex-shrink:0;}
-  .session-search input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:7px 12px;font-size:12px;outline:none;transition:all .15s;}
+  .session-search input{width:100%;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:12px;outline:none;transition:all .15s;}
   .session-search input:focus{border-color:rgba(124,185,255,.35);background:var(--hover-bg);box-shadow:0 0 0 2px rgba(124,185,255,.07);}
   .session-search input::placeholder{color:var(--muted);opacity:.7;}
   /* Inline session title edit */
   .session-title-input{flex:1;background:var(--surface);border:1px solid rgba(124,185,255,.6);border-radius:6px;color:var(--text);padding:3px 8px;font-size:13px;outline:none;min-width:0;box-shadow:0 0 0 2px rgba(124,185,255,.15);font-family:inherit;}
-  .session-item{padding:8px 10px 8px 8px;border-radius:0 8px 8px 0;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s;display:flex;align-items:center;gap:6px;min-width:0;border-left:2px solid transparent;position:relative;}
+  .session-item{padding:8px 40px 8px 8px;margin-bottom:2px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s;display:flex;align-items:center;gap:6px;min-width:0;position:relative;}
   .session-item:hover{background:var(--hover-bg);color:var(--text);}
-  .session-item.active{background:rgba(232,160,48,0.12);color:#e8a030;border-left:2px solid #e8a030;padding-left:8px;}
+  .session-item.active{background:rgba(232,160,48,0.12);color:#e8a030;}
   .session-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-  /* ── Session action trigger + dropdown (⋯ menu) ── */
+  /* ── Session action trigger + dropdown ── */
   .session-actions{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s ease;}
   .session-item:hover .session-actions,.session-item:focus-within .session-actions,.session-item.menu-open .session-actions{opacity:1;pointer-events:auto;}
   .session-actions-trigger{width:26px;height:26px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s;}
@@ -157,8 +159,6 @@
   .session-date-header.pinned{color:#f5c542;}
   .session-date-caret{font-size:9px;transition:transform .2s;flex-shrink:0;display:inline-block;}
   .session-date-caret.collapsed{transform:rotate(-90deg);}
-
-  /* ── Shared app dialogs (replace native confirm/prompt) ── */
   .app-dialog-overlay{position:fixed;inset:0;background:rgba(7,12,19,.62);backdrop-filter:blur(6px);z-index:1100;display:none;align-items:center;justify-content:center;padding:24px;}
   .app-dialog{width:min(460px,100%);background:linear-gradient(180deg,rgba(21,31,45,.98),rgba(13,20,31,.98));border:1px solid rgba(124,185,255,.2);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.45);padding:18px 18px 16px;color:var(--text);}
   .app-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;}
@@ -178,14 +178,52 @@
   .app-dialog-btn:focus-visible,.app-dialog-close:focus-visible{outline:2px solid rgba(124,185,255,.85);outline-offset:2px;}
   .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);backdrop-filter:blur(12px);border:1px solid rgba(124,185,255,0.25);color:var(--text);font-size:13px;padding:10px 20px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.3);letter-spacing:.01em;}
   .toast.show{opacity:1;transform:translateX(-50%) translateY(-2px);}
+  .onboarding-overlay{position:fixed;inset:0;z-index:1050;background:rgba(7,12,19,.78);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;}
+  .onboarding-card{width:min(980px,100%);max-height:min(760px,94vh);overflow:auto;border:1px solid rgba(124,185,255,.16);border-radius:24px;background:linear-gradient(180deg,rgba(20,30,44,.98),rgba(11,17,27,.98));box-shadow:0 24px 80px rgba(0,0,0,.45);}
+  .onboarding-shell{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);}
+  .onboarding-sidebar{padding:28px 24px;border-right:1px solid var(--border);background:linear-gradient(180deg,rgba(124,185,255,.08),rgba(124,185,255,.02));}
+  .onboarding-sidebar h2{font-size:26px;line-height:1.15;margin-top:10px;margin-bottom:12px;letter-spacing:-.03em;}
+  .onboarding-badge{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.12em;background:rgba(124,185,255,.14);color:var(--blue);}
+  .onboarding-sidebar p{font-size:13px;color:var(--muted);line-height:1.7;}
+  .onboarding-steps{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
+  .onboarding-step{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;border:1px solid transparent;background:rgba(255,255,255,.02);}
+  .onboarding-step.active{border-color:rgba(124,185,255,.25);background:rgba(124,185,255,.08);}
+  .onboarding-step.done{background:rgba(201,168,76,.08);}
+  .onboarding-step-index{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(255,255,255,.08);color:var(--text);flex-shrink:0;}
+  .onboarding-step.done .onboarding-step-index{background:rgba(201,168,76,.16);color:var(--gold);}
+  .onboarding-step.active .onboarding-step-index{background:rgba(124,185,255,.18);color:var(--blue);}
+  .onboarding-step-title{font-size:13px;font-weight:700;color:var(--text);}
+  .onboarding-step-desc{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.5;}
+  .onboarding-main{padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px;min-width:0;}
+  .onboarding-status{display:none;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.6;border:1px solid var(--border2);background:rgba(255,255,255,.04);}
+  .onboarding-status.info{color:var(--text);}
+  .onboarding-status.success{color:var(--blue);border-color:rgba(124,185,255,.3);background:rgba(124,185,255,.08);}
+  .onboarding-status.warn{color:var(--gold);border-color:rgba(201,168,76,.28);background:rgba(201,168,76,.08);}
+  .onboarding-body{display:flex;flex-direction:column;gap:16px;}
+  .onboarding-panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
+  .onboarding-check{padding:14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:5px;}
+  .onboarding-check strong{font-size:13px;color:var(--text);}
+  .onboarding-check span{font-size:12px;color:var(--muted);line-height:1.5;}
+  .onboarding-check.ok{border-color:rgba(124,185,255,.28);background:rgba(124,185,255,.08);}
+  .onboarding-check.warn{border-color:rgba(201,168,76,.25);background:rgba(201,168,76,.08);}
+  .onboarding-field{display:flex;flex-direction:column;gap:6px;}
+  .onboarding-field span{font-size:12px;font-weight:700;color:var(--text);}
+  .onboarding-field input,.onboarding-field select{margin-bottom:0;padding:10px 12px;border-radius:10px;font-size:13px;background:var(--input-bg);border:1px solid var(--border2);color:var(--text);}
+  .onboarding-copy{font-size:12px;color:var(--muted);line-height:1.7;}
+  .onboarding-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
+  .onboarding-summary div{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);display:flex;flex-direction:column;gap:5px;}
+  .onboarding-summary strong{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
+  .onboarding-summary span{font-size:13px;color:var(--text);word-break:break-word;}
+  .onboarding-actions{display:flex;justify-content:space-between;gap:10px;margin-top:auto;}
+  .onboarding-actions .sm-btn{padding:10px 16px;}
   .reconnect-banner{display:none;background:var(--surface);border:1px solid rgba(201,168,76,0.4);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--gold);display:none;align-items:center;justify-content:space-between;gap:12px;}
   .reconnect-banner.visible{display:flex;}
-  .reconnect-btn{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.4);color:var(--gold);cursor:pointer;}
+  .reconnect-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:rgba(201,168,76,0.15);border:1px solid rgba(201,168,76,0.4);color:var(--gold);cursor:pointer;}
   .reconnect-btn:hover{background:rgba(201,168,76,0.25);}
   /* ── Update banner ── */
   .update-banner{display:none;background:var(--surface);border:1px solid rgba(124,185,255,0.4);border-radius:10px;padding:10px 16px;margin:10px auto;max-width:780px;font-size:13px;color:var(--blue);align-items:center;justify-content:space-between;gap:12px;}
   .update-banner.visible{display:flex;}
-  .update-btn{padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;background:rgba(124,185,255,0.1);border:1px solid rgba(124,185,255,0.3);color:var(--blue);cursor:pointer;transition:background .15s;}
+  .update-btn{padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:rgba(124,185,255,0.1);border:1px solid rgba(124,185,255,0.3);color:var(--blue);cursor:pointer;transition:background .15s;}
   .update-btn:hover{background:rgba(124,185,255,0.2);}
   .update-primary{background:rgba(124,185,255,0.2);border-color:rgba(124,185,255,0.5);}
   .update-btn:disabled{opacity:0.5;cursor:not-allowed;}
@@ -197,7 +235,7 @@
   .approval-desc{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.5;}
   .approval-cmd{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-family:"SF Mono",ui-monospace,monospace;font-size:12px;color:var(--pre-text);white-space:pre-wrap;word-break:break-all;margin-bottom:14px;max-height:120px;overflow-y:auto;}
   .approval-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
-  .approval-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:var(--hover-bg);color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap;}
+  .approval-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border2);background:var(--hover-bg);color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap;}
   .approval-btn:hover{background:rgba(255,255,255,0.12);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.2);}
   .approval-btn:active{transform:translateY(0);box-shadow:none;}
   .approval-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
@@ -217,7 +255,7 @@
   .sidebar-nav{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;padding:6px 8px 0;gap:2px;}
   .nav-tab{flex:1;padding:10px 4px 8px;font-size:20px;text-align:center;cursor:pointer;color:var(--muted);border:none;background:none;transition:color .15s;border-bottom:2px solid transparent;white-space:nowrap;overflow:hidden;position:relative;}
   .nav-tab:hover{color:var(--text);}
-  .nav-tab:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid rgba(124,185,255,0.3);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 11px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.3);}
+  .nav-tab:hover::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid rgba(124,185,255,0.3);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.02em;padding:6px 12px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:50;box-shadow:0 4px 12px rgba(0,0,0,.3);}
   .nav-tab.active{color:var(--blue);}
   .nav-tab.active::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--blue);border-radius:2px 2px 0 0;}
   /* Panel content areas (swapped by tab) */
@@ -227,14 +265,14 @@
   .cron-list{flex:1;overflow-y:auto;padding:8px;}
   .cron-item{border-radius:10px;border:1px solid var(--border);margin-bottom:6px;overflow:hidden;transition:border-color .15s,background .15s;background:rgba(255,255,255,.02);}
   .cron-item:hover{border-color:var(--border2);}
-  .cron-header{display:flex;align-items:center;gap:8px;padding:9px 11px;cursor:pointer;}
+  .cron-header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;}
   .cron-name{flex:1;font-size:13px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-  .cron-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;flex-shrink:0;}
+  .cron-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;flex-shrink:0;}
   .cron-status.active{background:rgba(34,197,94,.15);color:#4ade80;}
   .cron-status.paused{background:rgba(201,168,76,.15);color:var(--gold);}
   .cron-status.disabled{background:rgba(255,255,255,.07);color:var(--muted);}
   .cron-status.error{background:rgba(233,69,96,.15);color:var(--accent);}
-  .cron-body{display:none;padding:0 11px 10px;border-top:1px solid var(--border);overflow:hidden;}
+  .cron-body{display:none;padding:0 12px 10px;border-top:1px solid var(--border);overflow:hidden;}
   .cron-body.open{display:block;}
   .cron-schedule{font-size:11px;color:var(--muted);margin:8px 0 6px;}
   .cron-prompt{font-size:11px;color:var(--muted);line-height:1.55;max-height:80px;overflow-y:auto;background:rgba(0,0,0,.2);padding:6px 8px;border-radius:6px;white-space:pre-wrap;margin-bottom:8px;box-sizing:border-box;}
@@ -248,13 +286,13 @@
   .cron-last-header{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px;}
   /* Skills panel */
   .skills-search{padding:8px;flex-shrink:0;}
-  .skills-search input{width:100%;background:var(--hover-bg);border:1px solid var(--border2);border-radius:7px;color:var(--text);padding:6px 10px;font-size:12px;outline:none;}
+  .skills-search input{width:100%;background:var(--hover-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:8px 10px;font-size:12px;outline:none;}
   .skills-search input::placeholder{color:var(--muted);}
   .skills-list{flex:1;overflow-y:auto;padding:0 8px 8px;}
   .skills-category{margin-bottom:4px;}
   .skills-cat-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:8px 6px 4px;cursor:pointer;display:flex;align-items:center;gap:4px;}
   .skills-cat-header:hover{color:var(--text);}
-  .skill-item{padding:7px 10px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;transition:all .12s;line-height:1.4;}
+  .skill-item{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--muted);display:flex;align-items:flex-start;gap:6px;transition:all .12s;line-height:1.4;}
   .skill-item:hover{background:var(--hover-bg);color:var(--text);}
   .skill-item.active{background:rgba(124,185,255,.1);color:var(--blue);}
   .skill-name{font-weight:500;flex-shrink:0;}
@@ -268,23 +306,37 @@
   .memory-content p{margin-bottom:6px;}
   .memory-empty{color:var(--muted);font-size:12px;font-style:italic;}
   .sidebar-bottom{border-top:1px solid var(--border);padding:12px 14px;flex-shrink:0;position:relative;z-index:10;overflow:visible;}
+  .hermes-launch-btn{width:100%;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--border2);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));color:var(--text);cursor:pointer;transition:background .15s,border-color .15s,transform .15s;text-align:left;}
+  .hermes-launch-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(124,185,255,.28);transform:translateY(-1px);}
+  .hermes-launch-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,rgba(124,185,255,.15),rgba(201,168,76,.1));border:1px solid rgba(124,185,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;box-shadow:0 4px 16px rgba(124,185,255,.08);}
+  .hermes-launch-icon svg{display:block;width:22px;height:22px;flex-shrink:0;}
+  .hermes-launch-copy{display:flex;flex-direction:column;min-width:0;flex:1;}
+  .hermes-launch-title{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text);}
+  .hermes-launch-meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+  .hermes-launch-chevron{color:var(--muted);flex-shrink:0;}
   .field-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;opacity:.8;}
-  select{width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:7px 28px 7px 10px;font-size:12px;outline:none;appearance:none;margin-bottom:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
+  select{width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:8px 28px 8px 10px;font-size:12px;outline:none;appearance:none;margin-bottom:6px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
   select:focus{border-color:rgba(124,185,255,.4);box-shadow:0 0 0 2px rgba(124,185,255,.08);}
   optgroup{color:var(--muted);font-size:11px;font-weight:700;}
   option{background:var(--bg);color:var(--text);padding:6px;}
   .sidebar-actions{display:flex;gap:6px;}
-  .sm-btn{flex:1;padding:7px 0;border-radius:8px;font-size:11px;font-weight:500;background:var(--input-bg);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;letter-spacing:.02em;}
+  .sm-btn{flex:1;padding:8px 0;border-radius:8px;font-size:11px;font-weight:500;background:var(--input-bg);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all .15s;text-align:center;letter-spacing:.02em;}
   .sm-btn:hover{background:rgba(255,255,255,0.09);color:var(--text);border-color:rgba(255,255,255,.15);}
+  .sm-btn:disabled{opacity:.45;cursor:not-allowed;}
   .main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--main-bg);}
   .topbar{padding:12px 20px;border-bottom:1px solid var(--border);background:var(--topbar-bg);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:relative;z-index:10;}
   .topbar-title{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
   .topbar-meta{font-size:11px;color:var(--muted);margin-top:3px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
   .topbar-chips{display:flex;gap:6px;align-items:center;flex-shrink:0;}
   .chip{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.05);border:1px solid var(--border2);color:var(--muted);font-weight:500;}
+  .workspace-toggle-btn{display:inline-flex!important;align-items:center;gap:6px;cursor:pointer;}
+  .workspace-toggle-btn.active{color:var(--blue);border-color:rgba(124,185,255,.35);background:rgba(124,185,255,.1);}
+  .workspace-toggle-btn:disabled{opacity:.38;cursor:not-allowed;}
   .chip.model{color:var(--blue);border-color:rgba(124,185,255,0.35);background:rgba(124,185,255,0.1);}
   .messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;position:relative;z-index:0;}
-  .messages-inner{max-width:800px;margin:0 auto;width:100%;padding:20px 24px 32px;display:flex;flex-direction:column;}
+  .messages-inner{margin:0 auto;width:100%;padding:20px 24px 32px;display:flex;flex-direction:column;}
+  @media(min-width:1400px){.messages-inner{max-width:1100px;}}
+  @media(min-width:1800px){.messages-inner{max-width:1200px;}}
   .msg-row{padding:10px 0;}
   .msg-row+.msg-row{border-top:none;}
   .msg-role{font-size:12px;font-weight:500;letter-spacing:.01em;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
@@ -319,7 +371,7 @@
   .empty-state h2{font-size:20px;color:var(--text);font-weight:700;letter-spacing:-.02em;}
   .empty-state p{font-size:14px;text-align:center;max-width:320px;}
   .suggestion-grid{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%;max-width:380px;}
-  .suggestion{padding:11px 14px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .15s;text-align:left;}
+  .suggestion{padding:12px 14px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .15s;text-align:left;}
   .suggestion:hover{background:rgba(124,185,255,0.07);color:var(--text);border-color:rgba(124,185,255,.3);transform:translateX(2px);}
   /* ── Composer ── */
   .composer-wrap{border-top:1px solid var(--border);padding:12px 20px 16px;background:var(--bg);flex-shrink:0;}
@@ -335,16 +387,53 @@
   .attach-chip button:hover{color:var(--accent);}
   textarea#msg{width:100%;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;line-height:1.65;padding:12px 16px 6px;resize:none;min-height:44px;max-height:200px;font-family:inherit;}
   textarea#msg::placeholder{color:var(--muted);}
-  .composer-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 10px;}
-  .composer-left{display:flex;gap:2px;align-items:center;}
+  .composer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 10px;position:relative;}
+  .composer-left{display:flex;align-items:center;gap:4px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
+  .composer-left::-webkit-scrollbar{display:none;}
+  .composer-divider{width:1px;height:16px;background:var(--border);margin:0 3px;flex-shrink:0;}
+  .composer-profile-wrap{position:relative;flex:0 1 auto;min-width:0;}
+  .composer-profile-chip{display:inline-flex;align-items:center;gap:8px;max-width:180px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
+  .composer-profile-chip:hover{background-color:var(--hover-bg);}
+  .composer-profile-chip.active{background:rgba(168,139,250,.08);border-color:rgba(168,139,250,.22);}
+  .composer-profile-icon,.composer-profile-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
+  .composer-profile-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .composer-ws-wrap{position:relative;flex:0 1 auto;min-width:0;}
+  .composer-workspace-chip{display:inline-flex;align-items:center;gap:8px;max-width:240px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
+  .composer-workspace-chip:hover{color:var(--text);background-color:var(--hover-bg);}
+  .composer-workspace-chip:disabled{opacity:.45;cursor:not-allowed;}
+  .composer-workspace-chip:disabled:hover{color:var(--muted);background-color:transparent;}
+  .composer-workspace-chip.active{color:var(--text);background:rgba(124,185,255,.08);border-color:rgba(124,185,255,.22);}
+  .composer-workspace-icon,.composer-workspace-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
+  .composer-workspace-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .composer-model-wrap{position:relative;flex:0 1 auto;min-width:0;}
+  .composer-model-chip{display:inline-flex;align-items:center;gap:8px;max-width:220px;padding:8px 10px 8px 12px;border-radius:999px;border:1px solid transparent;background-color:transparent;color:var(--muted);font-weight:500;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
+  .composer-model-chip:hover{color:var(--text);background-color:var(--hover-bg);}
+  .composer-model-chip.active{color:var(--text);background:rgba(124,185,255,.08);border-color:rgba(124,185,255,.22);}
+  .composer-model-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+  .composer-model-icon,.composer-model-chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
+  .composer-model-select{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
+  .composer-right{display:flex;gap:8px;align-items:center;flex-shrink:0;}
+  .composer-status{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px;}
   /* Context usage indicator */
-  .ctx-indicator{display:flex;align-items:center;gap:6px;padding:2px 4px;flex-shrink:1;min-width:0;}
-  .ctx-bar-wrap{width:70px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;flex-shrink:0;}
-  .ctx-bar{display:block;height:100%;border-radius:3px;transition:width .4s ease,background .4s ease;min-width:2px;background:var(--blue);}
-  .ctx-bar.ctx-mid{background:#e6a817;}
-  .ctx-bar.ctx-high{background:#e05252;}
-  .ctx-label{font-size:9px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
-  .composer-right{display:flex;gap:6px;align-items:center;}
+  .ctx-indicator-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
+  .ctx-indicator{width:34px;height:34px;padding:0;border:none;background:none;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .15s;}
+  .ctx-indicator:hover{opacity:.88;transform:translateY(-1px);}
+  .ctx-ring{position:relative;display:flex;width:24px;height:24px;align-items:center;justify-content:center;}
+  .ctx-ring-svg{position:absolute;inset:0;width:24px;height:24px;transform:rotate(-90deg);}
+  .ctx-ring-track,.ctx-ring-value{fill:none;stroke-width:3;}
+  .ctx-ring-track{stroke:rgba(255,255,255,.12);}
+  .ctx-ring-value{stroke:var(--muted);stroke-linecap:round;stroke-dasharray:61.261056745;stroke-dashoffset:61.261056745;transition:stroke-dashoffset .45s ease,stroke .25s ease;}
+  .ctx-ring-center{position:relative;display:flex;width:15px;height:15px;align-items:center;justify-content:center;border-radius:999px;background:var(--bg);font-size:8px;font-weight:600;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;}
+  .ctx-indicator.ctx-mid .ctx-ring-value{stroke:#e6a817;}
+  .ctx-indicator.ctx-high .ctx-ring-value{stroke:#e05252;}
+  .ctx-tooltip{position:absolute;right:0;bottom:calc(100% + 10px);min-width:210px;max-width:250px;padding:10px 12px;border:1px solid var(--border2);border-radius:12px;background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.28);font-size:11px;line-height:1.45;color:var(--muted);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:30;}
+  .ctx-tooltip::after{content:'';position:absolute;right:10px;top:100%;border-width:6px 6px 0 6px;border-style:solid;border-color:var(--surface) transparent transparent transparent;}
+  .ctx-indicator-wrap:hover .ctx-tooltip,.ctx-indicator-wrap:focus-within .ctx-tooltip{opacity:1;transform:translateY(0);}
+  .ctx-tooltip-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;}
+  .ctx-tooltip-line+.ctx-tooltip-line{margin-top:3px;}
+  .cancel-btn{width:34px;height:34px;border-radius:50%;background:rgba(233,69,96,.88);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 10px rgba(233,69,96,.28);}
+  .cancel-btn:hover{background:#e94560;transform:scale(1.06);box-shadow:0 4px 14px rgba(233,69,96,.38);}
+  .cancel-btn:active{transform:scale(.96);}
   .icon-btn{width:34px;height:34px;border-radius:8px;background:none;border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .15s;}
   .icon-btn{opacity:.75;}
   .icon-btn:hover{background:rgba(255,255,255,.08);color:var(--text);opacity:1;}
@@ -363,14 +452,15 @@
   .upload-bar-wrap{display:none;height:3px;background:var(--hover-bg);border-radius:0 0 16px 16px;overflow:hidden;}
   .upload-bar-wrap.active{display:block;}
   .upload-bar{height:100%;background:linear-gradient(90deg,var(--blue),#a0d0ff);width:0%;transition:width .3s ease;}
-  .rightpanel{width:300px;background:var(--sidebar);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
+  .rightpanel{width:300px;background:var(--sidebar);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;min-width:0;opacity:1;transform:translateX(0);transform-origin:right center;transition:width .24s cubic-bezier(.22,1,.36,1),opacity .18s ease,transform .24s cubic-bezier(.22,1,.36,1),border-color .24s ease;}
   .panel-header{padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;justify-content:space-between;}
   .git-badge{font-size:9px;font-weight:600;color:var(--muted);background:var(--hover-bg);padding:2px 7px;border-radius:4px;letter-spacing:.02em;margin-left:auto;margin-right:4px;white-space:nowrap;font-family:'SF Mono',ui-monospace,monospace;}
   .git-badge.dirty{color:var(--gold);background:rgba(201,168,76,.1);}
   .panel-actions{display:flex;gap:4px;}
   .panel-icon-btn{width:24px;height:24px;background:none;border:none;color:var(--muted);cursor:pointer;border-radius:5px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
   .panel-icon-btn:hover{background:rgba(255,255,255,.08);color:var(--text);}
-  .mobile-close-btn{display:none;}
+  .panel-icon-btn:disabled{opacity:.35;cursor:not-allowed;}
+  .panel-icon-btn:disabled:hover{background:none;color:var(--muted);}
   /* File row actions (shown on hover) */
   /* file-item-actions removed: delete button is now a flex child */
   .file-action-btn{width:20px;height:20px;background:rgba(0,0,0,.4);border:none;border-radius:4px;color:var(--muted);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;}
@@ -384,7 +474,7 @@
   .breadcrumb-current{color:var(--text);font-weight:500;}
   .breadcrumb-sep{color:var(--border);margin:0 1px;font-size:11px;}
   .file-tree{flex:1;overflow-y:auto;padding:8px;}
-  .file-item{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--muted);transition:all .12s;min-width:0;}
+  .file-item{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:12px;color:var(--muted);transition:all .12s;min-width:0;}
   .file-item:hover{background:rgba(255,255,255,.07);color:var(--text);}
   .file-item.active{background:rgba(124,185,255,.12);color:var(--blue);}
   .file-tree-toggle{font-size:10px;color:var(--muted);flex-shrink:0;width:10px;text-align:center;line-height:1;}
@@ -430,7 +520,11 @@
   .mobile-overlay{display:none;}
   .mobile-bottom-nav{display:none;}
 
-  @media(max-width:900px){.rightpanel{display:none}.mobile-files-btn{display:inline-flex!important;}}
+  @media(min-width:901px){
+    .layout.workspace-panel-collapsed .rightpanel{width:0 !important;opacity:0;transform:translateX(14px);border-left-color:transparent;pointer-events:none;}
+  }
+
+  @media(max-width:900px){.rightpanel{display:none}.workspace-toggle-btn,.mobile-files-btn{display:inline-flex!important;}}
 
   @media(max-width:640px){
     /* ── Sidebar: slide-in overlay instead of hidden ── */
@@ -448,7 +542,7 @@
       z-index:199;-webkit-tap-highlight-color:transparent;}
     .mobile-overlay.visible{display:block;}
     /* Files button in topbar */
-    .mobile-files-btn{display:inline-flex!important;}
+    .workspace-toggle-btn,.mobile-files-btn{display:inline-flex!important;}
     /* Right panel: slide-over from right */
     .rightpanel{display:flex!important;position:fixed;right:-320px;top:0;bottom:0;
       width:300px;z-index:200;transition:right .25s ease;
@@ -469,14 +563,19 @@
     .mobile-nav-btn svg{flex-shrink:0;}
     /* Hide sidebar nav tabs (replaced by bottom nav) */
     .sidebar-nav{display:none;}
-    /* Hide sidebar bottom section on mobile (model select, workspace) */
-    .sidebar-bottom{display:none;}
+    /* Keep the Hermes control available at the bottom of the mobile sidebar */
+    .sidebar-bottom{display:block;padding:10px;}
     /* Topbar adjustments */
     .topbar{padding:8px 12px;gap:8px;}
     .topbar-title{font-size:14px;}
     .topbar-meta{display:none;}
     .topbar-chips{flex-wrap:nowrap;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
-    .topbar-chips .chip,.topbar-chips .ws-chip,.topbar-chips button{font-size:11px!important;padding:3px 8px!important;white-space:nowrap;}
+    .topbar-chips .chip,.topbar-chips .ws-chip,.topbar-chips button{font-size:11px!important;padding:4px 8px!important;white-space:nowrap;}
+    .settings-shell{grid-template-columns:1fr;gap:0;}
+    .settings-tabs{flex-direction:row;overflow-x:auto;padding:10px 12px;border-right:none;border-bottom:1px solid var(--border);gap:6px;}
+    .settings-tab{flex-shrink:0;}
+    .settings-main{padding:18px 16px;}
+    .hermes-action-grid{grid-template-columns:1fr;}
     /* Messages area — account for bottom nav */
     .messages{padding-bottom:60px;}
     .messages-inner{padding:12px 10px 20px;}
@@ -486,10 +585,27 @@
     .composer-wrap{padding:8px 10px 12px!important;margin-bottom:56px;}
     .composer-box{border-radius:12px;}
     .composer-box textarea{font-size:16px;min-height:40px;}
+    .composer-footer{padding:6px 8px 8px!important;gap:8px;}
+    /* icon-only composer chips below 768px */
+    .composer-profile-label,
+    .composer-workspace-label,
+    .composer-model-label,
+    .composer-profile-chevron,
+    .composer-workspace-chevron,
+    .composer-model-chevron{display:none;}
+    .composer-profile-chip,
+    .composer-workspace-chip,
+    .composer-model-chip{max-width:44px;min-width:44px;min-height:44px;padding:6px;justify-content:center;gap:0;font-size:11px;}
+    .composer-divider{display:none;}
+    .composer-status{max-width:96px;font-size:10px;}
     .send-btn{width:32px;height:32px;}
+    .cancel-btn{width:32px;height:32px;}
+    .ctx-indicator{width:32px;height:32px;}
+    .ctx-tooltip{right:-4px;min-width:190px;max-width:220px;}
     /* Touch targets — minimum 44px */
     .icon-btn,.mic-btn{min-width:44px;min-height:44px;}
-    .session-item{min-height:44px;padding:10px 12px;}
+    .session-item{min-height:44px;padding:10px 40px 10px 12px;}
+    .session-actions{opacity:1;pointer-events:auto;}
     /* Empty state */
     .empty-state h2{font-size:18px;}
     .empty-state p{font-size:13px;}
@@ -508,18 +624,30 @@
     .tool-card{margin-left:0!important;font-size:12px;}
     /* Settings modal */
     .settings-panel{width:95vw;max-width:95vw;min-height:min(580px,88vh);max-height:92vh;}
+    .onboarding-overlay{padding:12px;}
+    .onboarding-shell{grid-template-columns:1fr;}
+    .onboarding-sidebar{border-right:none;border-bottom:1px solid var(--border);padding:22px 18px;}
+    .onboarding-main{padding:20px 18px 18px;}
+    .onboarding-actions{flex-direction:column-reverse;}
+    .onboarding-actions .sm-btn{width:100%;min-height:44px;}
     /* Login page responsive */
     .card{width:90vw;max-width:320px;padding:28px 24px;}
-    /* Workspace panel mobile close button */
-    .mobile-close-btn{display:inline-flex;}
-    /* Profile dropdown — escape overflow-x:auto clipping context */
-    .profile-dropdown{position:fixed;top:56px;right:8px;left:auto;max-width:calc(100vw - 16px);}
   }
 
+
 /* ── Workspace dropdown (topbar) ── */
 .ws-chip{user-select:none;}
 .ws-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;right:0;min-width:200px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
 .ws-dropdown.open{display:block;}
+.ws-dropdown-footer{left:0;right:auto;bottom:calc(100% + 4px);min-width:280px;max-width:min(420px,calc(100vw - 32px));}
+.model-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:280px;max-width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:320px;overflow-y:auto;}
+.model-dropdown.open{display:block;}
+.model-group{padding:8px 14px 4px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;}
+.model-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:3px;align-items:flex-start;}
+.model-opt:hover{background:rgba(255,255,255,.07);}
+.model-opt.active{background:rgba(124,185,255,.1);}
+.model-opt-name{display:block;font-size:13px;color:var(--text);font-weight:500;line-height:1.25;}
+.model-opt-id{display:block;font-size:10px;color:var(--muted);line-height:1.3;opacity:.72;word-break:break-word;}
 .ws-opt{padding:10px 14px;cursor:pointer;transition:background .12s;display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
 .ws-opt:hover{background:rgba(255,255,255,.07);}
 .ws-opt.active{background:rgba(124,185,255,.1);}
@@ -527,6 +655,9 @@
 .ws-opt-path{display:block;font-size:10px;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:normal;opacity:.72;word-break:break-word;}
 .ws-divider{height:1px;background:var(--border);margin:4px 0;}
 .ws-manage{color:var(--muted);font-size:12px;}
+.ws-opt-action{display:flex;flex-direction:row;align-items:center;gap:8px;}
+.ws-opt-icon{display:inline-flex;align-items:center;justify-content:center;opacity:.82;flex-shrink:0;}
+.ws-opt-meta{font-size:11px;color:var(--muted);}
 /* ── Workspace management panel ── */
 .ws-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);}
 .ws-row:last-of-type{border-bottom:none;}
@@ -534,13 +665,13 @@
 .ws-row-name{font-size:13px;font-weight:500;color:var(--text);}
 .ws-row-path{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .ws-row-actions{display:flex;gap:4px;flex-shrink:0;}
-.ws-action-btn{padding:4px 9px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
+.ws-action-btn{padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border2);background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap;}
 .ws-action-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
 /* ── Profile dropdown + management panel ── */
 .profile-chip{user-select:none;color:rgba(168,139,250,.9)!important;}
-.profile-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:260px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:380px;overflow-y:auto;}
+.profile-dropdown{display:none;position:absolute;bottom:calc(100% + 4px);left:0;min-width:260px;max-width:min(260px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border2);border-radius:10px;box-shadow:0 -4px 24px rgba(0,0,0,.4);z-index:200;overflow:hidden;max-height:380px;overflow-y:auto;}
 .profile-dropdown.open{display:block;}
-.profile-opt{padding:9px 14px;cursor:pointer;transition:background .12s;}
+.profile-opt{padding:10px 14px;cursor:pointer;transition:background .12s;}
 .profile-opt:hover{background:rgba(255,255,255,.07);}
 .profile-opt.active{background:rgba(168,139,250,.08);}
 .profile-opt-name{font-size:13px;color:var(--text);font-weight:500;}
@@ -574,9 +705,9 @@
 /* ── Edit message inline ── */
 .msg-edit-area{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(124,185,255,.35);border-radius:8px;color:var(--text);padding:10px 12px;font-size:14px;font-family:inherit;line-height:1.6;resize:none;outline:none;min-height:60px;box-sizing:border-box;box-shadow:0 0 0 3px rgba(124,185,255,.07);margin-top:4px;}
 .msg-edit-bar{display:flex;gap:8px;margin-top:8px;margin-bottom:4px;}
-.msg-edit-send{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
+.msg-edit-send{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:6px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
 .msg-edit-send:hover{opacity:.85;}
-.msg-edit-cancel{background:var(--hover-bg);color:var(--muted);border:1px solid var(--border2);border-radius:7px;padding:6px 12px;font-size:13px;cursor:pointer;transition:background .15s;}
+.msg-edit-cancel{background:var(--hover-bg);color:var(--muted);border:1px solid var(--border2);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;transition:background .15s;}
 .msg-edit-cancel:hover{background:rgba(255,255,255,.1);}
 
 /* ── Clear conversation chip ── */
@@ -640,10 +771,6 @@
 /* Empty state: add subtle gradient behind logo */
 .empty-state{background:radial-gradient(ellipse at 50% 20%,rgba(124,185,255,.04) 0%,transparent 60%);}
 
-/* ── Activity bar (tool status above composer) ── */
-@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
-#activityBar{padding-bottom:8px;flex-shrink:0;}
-#activityBarInner{transition:opacity .2s;}
 /* Remove old status-text from composer (kept for error messages only) */
 .status-text{font-size:11px;color:var(--muted);padding-left:2px;display:none;}
 
@@ -656,7 +783,7 @@
   padding: 8px 10px 3px !important;
   font-size: 10px !important;
 }
-/* Sidebar bottom: tighten model field */
+/* Sidebar bottom: tighten spacing */
 .sidebar-bottom { padding: 10px 14px 12px; }
 /* Right panel file tree: more padding for breathing room */
 
@@ -759,7 +886,7 @@ body.resizing{user-select:none;cursor:col-resize;}
 .tool-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:6px;margin:2px 0 2px 40px;overflow:hidden;transition:border-color .15s;}
 .tool-card:hover{border-color:rgba(255,255,255,.12);}
 .tool-card-running{border-color:rgba(124,185,255,.25);background:rgba(124,185,255,.04);}
-.tool-card-header{display:flex;align-items:center;gap:7px;padding:4px 10px;cursor:pointer;user-select:none;}
+.tool-card-header{display:flex;align-items:center;gap:8px;padding:4px 10px;cursor:pointer;user-select:none;}
 .tool-card-icon{font-size:13px;flex-shrink:0;opacity:.8;}
 .tool-card-name{font-size:12px;font-weight:600;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;flex-shrink:0;}
 .tool-card-preview{font-size:11px;color:var(--muted);opacity:.6;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@@ -782,17 +909,38 @@ body.resizing{user-select:none;cursor:col-resize;}
 
 /* ── Settings overlay ── */
 .settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;}
-.settings-panel{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0;width:420px;max-width:92vw;max-height:92vh;min-height:min(680px,90vh);overflow:visible;box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;}
-.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
-.settings-body{padding:20px;overflow-y:auto;flex:1;}
+.settings-panel{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0;width:860px;max-width:92vw;height:min(700px,92vh);overflow:visible;box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;}
+.settings-header{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid var(--border);gap:16px;}
+.settings-heading{display:flex;flex-direction:column;gap:3px;}
+.settings-kicker{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);}
+.settings-subtitle{font-size:12px;color:var(--muted);line-height:1.5;}
+.settings-body{padding:0;flex:1;display:flex;min-height:0;overflow:hidden;}
+.settings-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;flex:1;min-height:0;min-width:0;}
+.settings-tabs{display:flex;flex-direction:column;gap:4px;padding:18px 12px;border-right:1px solid var(--border);align-self:stretch;min-height:0;}
+.settings-tab{display:flex;flex-direction:row;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:left;width:100%;}
+.settings-tab:hover{background:rgba(255,255,255,.05);color:var(--text);}
+.settings-tab.active{background:rgba(124,185,255,.1);border-color:rgba(124,185,255,.22);color:var(--text);}
+.settings-tab-icon{flex-shrink:0;opacity:.9;}
+.settings-tab-title{font-size:13px;font-weight:600;letter-spacing:.01em;}
+.settings-main{overflow-y:auto;padding:22px 24px;min-width:0;}
+.settings-pane{display:none;}
+.settings-pane.active{display:block;}
+.settings-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
+.settings-section-title{font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text);}
+.settings-section-meta{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5;}
+.settings-version-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid rgba(124,185,255,.22);background:rgba(124,185,255,.08);color:var(--blue);font-size:11px;font-weight:700;flex-shrink:0;}
+.hermes-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
+.settings-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--border2);background:var(--input-bg);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
+.settings-action-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
+.settings-action-btn.danger{color:var(--accent);border-color:rgba(233,69,96,.25);}
+.settings-action-btn.danger:hover{background:rgba(233,69,96,.08);border-color:rgba(233,69,96,.4);}
+.settings-action-btn:disabled,.settings-action-btn.disabled{opacity:.45;cursor:not-allowed;}
+.settings-action-btn:disabled:hover,.settings-action-btn.disabled:hover{background:var(--input-bg);border-color:var(--border2);}
 .settings-field{margin-bottom:16px;}
 .settings-field label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
 /* Save button inside the settings panel */
 .settings-panel .settings-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-weight:600;font-size:13px;}
 .settings-panel .settings-btn:hover{opacity:.9;}
-/* Gear icon in topbar -- muted chip, no red */
-.gear-btn{font-size:13px;cursor:pointer;transition:color .15s,background .15s;}
-.gear-btn:hover{color:var(--text);background:rgba(255,255,255,.08);}
 
 /* ── Session pin indicator (inline, only when pinned) ── */
 .session-pin-indicator{flex-shrink:0;color:#f5c542;line-height:1;display:flex;align-items:center;}
@@ -864,7 +1012,6 @@ body.resizing{user-select:none;cursor:col-resize;}
 
 /* ── CLI / Agent session items in sidebar ── */
 .session-item.cli-session {
-  border-left-color: var(--gold);
   padding-right: 40px; /* make room for the session actions trigger */
 }
 .session-item.cli-session::after {
@@ -880,7 +1027,10 @@ body.resizing{user-select:none;cursor:col-resize;}
   pointer-events: none; /* don't block clicks on session-actions beneath */
 }
 .session-item.cli-session:hover::after {
-  display: none; /* hide badge on hover so session-actions icons are fully reachable */
+  display: none; /* hide badge on hover so the session menu trigger stays clear */
+}
+.session-item.cli-session.menu-open::after {
+  display: none;
 }
 /* Source-specific colors for gateway sessions */
 .session-item.cli-session[data-source="telegram"] { border-left-color: #0088cc; }

static/ui.js

@@ -34,6 +34,7 @@ function _applyModelToDropdown(modelId, sel){
   const resolved=_findModelInDropdown(modelId,sel);
   if(resolved){
     sel.value=resolved;
+    if(sel.id==='modelSelect' && typeof syncModelChip==='function') syncModelChip();
     return resolved;
   }
   return null;
@@ -66,9 +67,11 @@ async function populateModelDropdown(){
     if(data.default_model && !localStorage.getItem('hermes-webui-model')){
       _applyModelToDropdown(data.default_model, sel);
     }
+    if(typeof syncModelChip==='function') syncModelChip();
   }catch(e){
     // API unavailable -- keep the hardcoded HTML options as fallback
     console.warn('Failed to load models from server:',e.message);
+    if(typeof syncModelChip==='function') syncModelChip();
   }
 }
 
@@ -98,6 +101,106 @@ function _checkProviderMismatch(modelId){
   return null;
 }
 
+function _selectedModelOption(){
+  const sel=$('modelSelect');
+  if(!sel) return null;
+  return sel.options[sel.selectedIndex]||null;
+}
+
+function syncModelChip(){
+  const sel=$('modelSelect');
+  const chip=$('composerModelChip');
+  const label=$('composerModelLabel');
+  const dd=$('composerModelDropdown');
+  if(!sel||!chip||!label) return;
+  const opt=_selectedModelOption();
+  label.textContent=opt?opt.textContent:getModelLabel(sel.value||'');
+  chip.title=sel.value||'Conversation model';
+  chip.classList.toggle('active',!!(dd&&dd.classList.contains('open')));
+}
+
+function _positionModelDropdown(){
+  const dd=$('composerModelDropdown');
+  const chip=$('composerModelChip');
+  const footer=document.querySelector('.composer-footer');
+  if(!dd||!chip||!footer) return;
+  const chipRect=chip.getBoundingClientRect();
+  const footerRect=footer.getBoundingClientRect();
+  let left=chipRect.left-footerRect.left;
+  const maxLeft=Math.max(0, footer.clientWidth-dd.offsetWidth);
+  left=Math.max(0, Math.min(left, maxLeft));
+  dd.style.left=`${left}px`;
+}
+
+function renderModelDropdown(){
+  const dd=$('composerModelDropdown');
+  const sel=$('modelSelect');
+  if(!dd||!sel) return;
+  dd.innerHTML='';
+  for(const child of Array.from(sel.children)){
+    if(child.tagName==='OPTGROUP'){
+      const heading=document.createElement('div');
+      heading.className='model-group';
+      heading.textContent=child.label||'Models';
+      dd.appendChild(heading);
+      for(const opt of Array.from(child.children)){
+        const row=document.createElement('div');
+        row.className='model-opt'+(opt.value===sel.value?' active':'');
+        row.innerHTML=`<span class="model-opt-name">${esc(opt.textContent||getModelLabel(opt.value))}</span><span class="model-opt-id">${esc(opt.value)}</span>`;
+        row.onclick=()=>selectModelFromDropdown(opt.value);
+        dd.appendChild(row);
+      }
+      continue;
+    }
+    if(child.tagName==='OPTION'){
+      const row=document.createElement('div');
+      row.className='model-opt'+(child.value===sel.value?' active':'');
+      row.innerHTML=`<span class="model-opt-name">${esc(child.textContent||getModelLabel(child.value))}</span><span class="model-opt-id">${esc(child.value)}</span>`;
+      row.onclick=()=>selectModelFromDropdown(child.value);
+      dd.appendChild(row);
+    }
+  }
+}
+
+async function selectModelFromDropdown(value){
+  const sel=$('modelSelect');
+  if(!sel||sel.value===value) { closeModelDropdown(); return; }
+  sel.value=value;
+  syncModelChip();
+  closeModelDropdown();
+  if(typeof sel.onchange==='function') await sel.onchange();
+}
+
+function toggleModelDropdown(){
+  const dd=$('composerModelDropdown');
+  const chip=$('composerModelChip');
+  const sel=$('modelSelect');
+  if(!dd||!chip||!sel) return;
+  const open=dd.classList.contains('open');
+  if(open){closeModelDropdown(); return;}
+  if(typeof closeProfileDropdown==='function') closeProfileDropdown();
+  if(typeof closeWsDropdown==='function') closeWsDropdown();
+  renderModelDropdown();
+  dd.classList.add('open');
+  _positionModelDropdown();
+  chip.classList.add('active');
+}
+
+function closeModelDropdown(){
+  const dd=$('composerModelDropdown');
+  const chip=$('composerModelChip');
+  if(dd) dd.classList.remove('open');
+  if(chip) chip.classList.remove('active');
+}
+
+document.addEventListener('click',e=>{
+  if(!e.target.closest('#composerModelChip') && !e.target.closest('#composerModelDropdown')) closeModelDropdown();
+});
+window.addEventListener('resize',()=>{
+  const dd=$('composerModelDropdown');
+  if(dd&&dd.classList.contains('open')) _positionModelDropdown();
+});
+
 // ── Scroll pinning ──────────────────────────────────────────────────────────
 // When streaming, auto-scroll only if the user hasn't manually scrolled up.
 // Once the user scrolls back to within 80px of the bottom, re-pin.
@@ -114,30 +217,59 @@ function _fmtTokens(n){if(!n||n<0)return'0';if(n>=1e6)return(n/1e6).toFixed(1)+'
 
 // Context usage indicator in composer footer
 function _syncCtxIndicator(usage){
+  const wrap=$('ctxIndicatorWrap');
   const el=$('ctxIndicator');
   if(!el)return;
   const promptTok=usage.last_prompt_tokens||usage.input_tokens||0;
+  const totalTok=(usage.input_tokens||0)+(usage.output_tokens||0);
   const ctxWindow=usage.context_length||0;
-  if(!promptTok||!ctxWindow){el.style.display='none';return;}
-  el.style.display='';
-  const pct=Math.min(100,Math.round((promptTok/ctxWindow)*100));
-  const bar=$('ctxBar');
-  const label=$('ctxLabel');
-  if(bar){
-    bar.style.width=pct+'%';
-    bar.className='ctx-bar'+(pct>75?' ctx-high':pct>50?' ctx-mid':'');
+  const cost=usage.estimated_cost;
+  // Show indicator whenever we have any usage data (tokens or cost)
+  if(!promptTok&&!totalTok&&!cost){
+    if(wrap) wrap.style.display='none';
+    return;
   }
-  if(label){
-    const cost=usage.estimated_cost;
-    let text=`${_fmtTokens(promptTok)} / ${_fmtTokens(ctxWindow)}`;
-    if(pct>0) text+=` (${pct}%)`;
-    if(cost) text+=` \u00b7 $${cost<0.01?cost.toFixed(4):cost.toFixed(2)}`;
-    label.textContent=text;
+  if(wrap) wrap.style.display='';
+  const hasCtxWindow=!!(promptTok&&ctxWindow);
+  const pct=hasCtxWindow?Math.min(100,Math.round((promptTok/ctxWindow)*100)):0;
+  const ring=$('ctxRingValue');
+  const center=$('ctxPercent');
+  const usageLine=$('ctxTooltipUsage');
+  const tokensLine=$('ctxTooltipTokens');
+  const thresholdLine=$('ctxTooltipThreshold');
+  const costLine=$('ctxTooltipCost');
+  if(ring){
+    const circumference=61.261056745;
+    ring.style.strokeDasharray=String(circumference);
+    ring.style.strokeDashoffset=String(circumference*(1-pct/100));
   }
-  // Update title with detailed info
+  if(center) center.textContent=hasCtxWindow?String(pct):'\u00b7';
+  el.classList.toggle('ctx-mid',pct>50&&pct<=75);
+  el.classList.toggle('ctx-high',pct>75);
+  let label=hasCtxWindow?`Context window ${pct}% used`:`${_fmtTokens(totalTok)} tokens used`;
+  if(cost) label+=` \u00b7 $${cost<0.01?cost.toFixed(4):cost.toFixed(2)}`;
+  el.setAttribute('aria-label',label);
+  if(usageLine) usageLine.textContent=hasCtxWindow?`${pct}% used (${Math.max(0,100-pct)}% left)`:`${_fmtTokens(totalTok)} tokens used`;
+  if(tokensLine) tokensLine.textContent=hasCtxWindow?`${_fmtTokens(promptTok)} / ${_fmtTokens(ctxWindow)} tokens used`:`In: ${_fmtTokens(usage.input_tokens||0)} \u00b7 Out: ${_fmtTokens(usage.output_tokens||0)}`;
   const threshold=usage.threshold_tokens||0;
-  el.title=`Context: ${_fmtTokens(promptTok)} of ${_fmtTokens(ctxWindow)} tokens used`
-    +(threshold?`\nAuto-compress at ${_fmtTokens(threshold)} (${Math.round(threshold/ctxWindow*100)}%)`:'');
+  if(thresholdLine){
+    if(threshold&&ctxWindow){
+      thresholdLine.style.display='';
+      thresholdLine.textContent=`Auto-compress at ${_fmtTokens(threshold)} (${Math.round(threshold/ctxWindow*100)}%)`;
+    }else{
+      thresholdLine.style.display='none';
+      thresholdLine.textContent='';
+    }
+  }
+  if(costLine){
+    if(cost){
+      costLine.style.display='';
+      costLine.textContent=`Estimated cost: $${cost<0.01?cost.toFixed(4):cost.toFixed(2)}`;
+    }else{
+      costLine.style.display='none';
+      costLine.textContent='';
+    }
+  }
 }
 
 function scrollIfPinned(){
@@ -257,45 +389,41 @@ function renderMd(raw){
 }
 
 function setStatus(t){
-  const bar=$('activityBar');
-  const txt=$('activityText');
-  const dismiss=$('btnDismissStatus');
-  if(!bar||!txt)return;
-  if(!t){
-    bar.style.display='none';
-    txt.textContent='';
-    if(dismiss)dismiss.style.display='none';
-  } else {
-    txt.textContent=t;
-    bar.style.display='';
-    // Show dismiss X only for static/error messages, not transient busy ones
-    const transient = t.endsWith('…') || t === (window._botName||'Hermes')+' is thinking\u2026';
-    if(dismiss)dismiss.style.display=(!transient && !S.busy)?'inline':'none';
-  }
+  if(!t)return;
+  showToast(t, 4000);
 }
+
+function setComposerStatus(t){
+  const el=$('composerStatus');
+  if(!el)return;
+  if(!t){
+    el.style.display='none';
+    el.textContent='';
+    return;
+  }
+  el.textContent=t;
+  el.style.display='';
+}
+
 function updateSendBtn(){
   const btn=$('btnSend');
   if(!btn) return;
   const hasContent=$('msg').value.trim().length>0||S.pendingFiles.length>0;
-  const shouldShow=hasContent&&!S.busy;
-  if(shouldShow&&btn.style.display==='none'){
-    btn.style.display='';
-    // Remove then re-add class to retrigger animation each time
+  const canSend=hasContent&&!S.busy;
+  // Hide while busy (cancel button takes its place); show otherwise
+  btn.style.display=S.busy?'none':'';
+  btn.disabled=!canSend;
+  if(canSend&&!btn.classList.contains('visible')){
     btn.classList.remove('visible');
     requestAnimationFrame(()=>btn.classList.add('visible'));
-  } else if(!shouldShow&&btn.style.display!=='none'){
-    btn.style.display='none';
-    btn.classList.remove('visible');
   }
 }
 function setBusy(v){
   S.busy=v;
-  $('btnSend').disabled=v;
   updateSendBtn();
-  const dots=$('activityDots');
-  if(dots) dots.style.display=v?'flex':'none';
   if(!v){
     setStatus('');
+    setComposerStatus('');
     // Always hide Cancel button when not busy
     const _cb=$('btnCancel');if(_cb)_cb.style.display='none';
     updateQueueBadge();
@@ -471,7 +599,7 @@ function copyMsg(btn){
   const text=row?row.dataset.rawText:'';
   if(!text)return;
   navigator.clipboard.writeText(text).then(()=>{
-    const orig=btn.innerHTML;btn.innerHTML='&#10003;';btn.style.color='var(--blue)';
+    const orig=btn.innerHTML;btn.innerHTML=li('check',13);btn.style.color='var(--blue)';
     setTimeout(()=>{btn.innerHTML=orig;btn.style.color='';},1500);
   }).catch(()=>showToast('Copy failed'));
 }
@@ -577,10 +705,14 @@ async function checkInflightOnBoot(sid) {
 function syncTopbar(){
   if(!S.session){
     document.title=window._botName||'Hermes';
-    // Show default workspace name even without a session
-    const sidebarName=$('sidebarWsName');
-    if(sidebarName && sidebarName.textContent==='Workspace'){
-      sidebarName.textContent=t('no_workspace');
+    if(typeof syncWorkspaceDisplays==='function') syncWorkspaceDisplays();
+    if(typeof syncModelChip==='function') syncModelChip();
+    if(typeof _syncHermesPanelSessionActions==='function') _syncHermesPanelSessionActions();
+    else {
+      const sidebarName=$('sidebarWsName');
+      if(sidebarName && sidebarName.textContent==='Workspace'){
+        sidebarName.textContent=t('no_workspace');
+      }
     }
     return;
   }
@@ -592,41 +724,33 @@ function syncTopbar(){
   // If a profile switch just happened, apply its model rather than the session's stale value.
   // S._pendingProfileModel is set by switchToProfile() and cleared here after one application.
   const modelOverride=S._pendingProfileModel;
+  let currentModel=S.session.model||'';
   if(modelOverride){
     S._pendingProfileModel=null;
     _applyModelToDropdown(modelOverride,$('modelSelect'));
+    currentModel=modelOverride;
   } else {
-    const m=S.session.model||'';
-    const applied=_applyModelToDropdown(m,$('modelSelect'));
+    const applied=_applyModelToDropdown(currentModel,$('modelSelect'));
     // If the model isn't in the current provider list, add it as a visually marked
     // "(unavailable)" entry so the session value is preserved without misleading the user.
     // Selecting it will still attempt to send (same as before), but the label makes
     // clear it's a stale model from a previous session.
-    if(!applied && m){
+    if(!applied && currentModel){
       const opt=document.createElement('option');
-      opt.value=m;
-      opt.textContent=getModelLabel(m)+t('model_unavailable');
+      opt.value=currentModel;
+      opt.textContent=getModelLabel(currentModel)+t('model_unavailable');
       opt.style.color='var(--muted, #888)';
       opt.title=t('model_unavailable_title');
       $('modelSelect').appendChild(opt);
-      $('modelSelect').value=m;
+      $('modelSelect').value=currentModel;
     }
   }
+  if(typeof syncModelChip==='function') syncModelChip();
   // Show Clear button only when session has messages
   const clearBtn=$('btnClearConv');
   if(clearBtn) clearBtn.style.display=(S.messages&&S.messages.filter(msg=>msg.role!=='tool').length>0)?'':'none';
-  const displayModel=$('modelSelect').value||m;
-  $('modelChip').textContent=getModelLabel(displayModel);
-  const ws=S.session.workspace||'';
-  // Update sidebar workspace display
-  const sidebarName=$('sidebarWsName');
-  const sidebarPath=$('sidebarWsPath');
-  if(sidebarName){
-    sidebarName.textContent=getWorkspaceFriendlyName(ws);
-  }
-  if(sidebarPath){
-    sidebarPath.textContent=ws;
-  }
+  if(typeof _syncHermesPanelSessionActions==='function') _syncHermesPanelSessionActions();
+  if(typeof syncWorkspaceDisplays==='function') syncWorkspaceDisplays();
   // modelSelect already set above
   // Update profile chip label
   const profileLabel=$('profileChipLabel');
@@ -698,22 +822,22 @@ function renderMessages(){
     // Render thinking card before the assistant message (collapsed by default)
     if(thinkingText&&!isUser){
       const thinkRow=document.createElement('div');thinkRow.className='msg-row thinking-card-row';
-      thinkRow.innerHTML=`<div class="thinking-card"><div class="thinking-card-header" onclick="this.parentElement.classList.toggle('open')"><span class="thinking-card-icon">&#128161;</span><span class="thinking-card-label">${t('thinking')}</span><span class="thinking-card-toggle">&#9656;</span></div><div class="thinking-card-body"><pre>${esc(thinkingText)}</pre></div></div>`;
+      thinkRow.innerHTML=`<div class="thinking-card"><div class="thinking-card-header" onclick="this.parentElement.classList.toggle('open')"><span class="thinking-card-icon">${li('lightbulb',14)}</span><span class="thinking-card-label">${t('thinking')}</span><span class="thinking-card-toggle">${li('chevron-right',12)}</span></div><div class="thinking-card-body"><pre>${esc(thinkingText)}</pre></div></div>`;
       inner.appendChild(thinkRow);
     }
     const row=document.createElement('div');row.className='msg-row';
     row.dataset.msgIdx=rawIdx;row.dataset.role=m.role||'assistant';
     let filesHtml='';
     if(m.attachments&&m.attachments.length)
-      filesHtml=`<div class="msg-files">${m.attachments.map(f=>`<div class="msg-file-badge">&#128206; ${esc(f)}</div>`).join('')}</div>`;
+      filesHtml=`<div class="msg-files">${m.attachments.map(f=>`<div class="msg-file-badge">${li('paperclip',12)} ${esc(f)}</div>`).join('')}</div>`;
     const bodyHtml = isUser ? esc(String(content)).replace(/\n/g,'<br>') : renderMd(String(content));
     // Action buttons for this bubble
-    const editBtn  = isUser  ? `<button class="msg-action-btn" title="${t('edit_message')}" onclick="editMessage(this)">&#9998;</button>` : '';
-    const retryBtn = isLastAssistant ? `<button class="msg-action-btn" title="${t('regenerate')}" onclick="regenerateResponse(this)">&#8635;</button>` : '';
+    const editBtn  = isUser  ? `<button class="msg-action-btn" title="${t('edit_message')}" onclick="editMessage(this)">${li('pencil',13)}</button>` : '';
+    const retryBtn = isLastAssistant ? `<button class="msg-action-btn" title="${t('regenerate')}" onclick="regenerateResponse(this)">${li('rotate-ccw',13)}</button>` : '';
     const tsVal=m._ts||m.timestamp;
     const tsTitle=tsVal?new Date(tsVal*1000).toLocaleString():'';
     const _bn=window._botName||'Hermes';
-    row.innerHTML=`<div class="msg-role ${m.role}" ${tsTitle?`title="${esc(tsTitle)}"`:''}><div class="role-icon ${m.role}">${isUser?'Y':esc(_bn.charAt(0).toUpperCase())}</div><span style="font-size:12px">${isUser?t('you'):esc(_bn)}</span>${tsTitle?`<span class="msg-time">${new Date(tsVal*1000).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}</span>`:''}<span class="msg-actions">${editBtn}<button class="msg-copy-btn msg-action-btn" title="${t('copy')}" onclick="copyMsg(this)">&#128203;</button>${retryBtn}</span></div>${filesHtml}<div class="msg-body">${bodyHtml}</div>`;
+    row.innerHTML=`<div class="msg-role ${m.role}" ${tsTitle?`title="${esc(tsTitle)}"`:''}><div class="role-icon ${m.role}">${isUser?'Y':esc(_bn.charAt(0).toUpperCase())}</div><span style="font-size:12px">${isUser?t('you'):esc(_bn)}</span>${tsTitle?`<span class="msg-time">${new Date(tsVal*1000).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}</span>`:''}<span class="msg-actions">${editBtn}<button class="msg-copy-btn msg-action-btn" title="${t('copy')}" onclick="copyMsg(this)">${li('copy',13)}</button>${retryBtn}</span></div>${filesHtml}<div class="msg-body">${bodyHtml}</div>`;
     row.dataset.rawText = String(content).trim();
     inner.appendChild(row);
   }
@@ -880,12 +1004,12 @@ function buildToolCard(tc){
   const isSubagent=tc.name==='subagent_progress';
   const isDelegation=tc.name==='delegate_task';
   const cardClass='tool-card'+(tc.done===false?' tool-card-running':'')+(isSubagent?' tool-card-subagent':'');
-  // Clean up subagent preview: strip leading 🔀 emoji since the icon already shows it
+  // Clean up legacy subagent prefixes since the Lucide icon already shows it
   let displayName=tc.name;
   if(isSubagent) displayName='Subagent';
   if(isDelegation) displayName='Delegate task';
   let previewText=tc.preview||displaySnippet||'';
-  if(isSubagent) previewText=previewText.replace(/^🔀\s*/,'');
+  if(isSubagent) previewText=previewText.replace(/^(?:\u{1F500}|↳)\s*/u,'');
   row.innerHTML=`
     <div class="${cardClass}">
       <div class="tool-card-header" onclick="this.closest('.tool-card').classList.toggle('open')">
@@ -1338,7 +1462,7 @@ function renderTray(){
   updateSendBtn();
   S.pendingFiles.forEach((f,i)=>{
     const chip=document.createElement('div');chip.className='attach-chip';
-    chip.innerHTML=`&#128206; ${esc(f.name)} <button title="${t('remove_title')}">&#10005;</button>`;
+    chip.innerHTML=`${li('paperclip',12)} ${esc(f.name)} <button title="${t('remove_title')}">${li('x',12)}</button>`;
     chip.querySelector('button').onclick=()=>{S.pendingFiles.splice(i,1);renderTray();};
     tray.appendChild(chip);
   });

static/workspace.js

@@ -200,6 +200,7 @@ async function openFile(path){
   $('fileTree').style.display='none';
 
   _previewCurrentPath = path;
+  renderFileBreadcrumb(path);
   if(IMAGE_EXTS.has(ext)){
     // Image: load via raw endpoint, show as <img>
     showPreview('image');
@@ -245,3 +246,41 @@ function downloadFile(path){
   showToast(t('downloading',filename),2000);
 }
 
+
+// ── Render breadcrumb for file preview mode ──────────────────────────────────
+function renderFileBreadcrumb(filePath) {
+  const bar = $('breadcrumbBar');
+  if (!bar) return;
+  bar.style.display = 'flex';
+  const upBtn = $('btnUpDir');
+  if (upBtn) upBtn.style.display = '';
+
+  bar.innerHTML = '';
+  // Root
+  const root = document.createElement('span');
+  root.className = 'breadcrumb-seg breadcrumb-link';
+  root.textContent = '~';
+  root.onclick = () => { clearPreview(); loadDir('.'); };
+  bar.appendChild(root);
+
+  const parts = filePath.split('/');
+  let accumulated = '';
+  for (let i = 0; i < parts.length; i++) {
+    const sep = document.createElement('span');
+    sep.className = 'breadcrumb-sep';
+    sep.textContent = '/';
+    bar.appendChild(sep);
+
+    accumulated += (accumulated ? '/' : '') + parts[i];
+    const seg = document.createElement('span');
+    seg.textContent = parts[i];
+    if (i < parts.length - 1) {
+      seg.className = 'breadcrumb-seg breadcrumb-link';
+      const target = accumulated;
+      seg.onclick = () => { clearPreview(); loadDir(target); };
+    } else {
+      seg.className = 'breadcrumb-seg breadcrumb-current';
+    }
+    bar.appendChild(seg);
+  }
+}

tests/conftest.py

@@ -153,6 +153,8 @@ def pytest_collection_modifyitems(config, items):
         # Agent backend (need running AIAgent)
         'test_chat_stream_opens_successfully',
         'test_approval_submit_and_respond',
+        # Security redaction (flaky — session state varies across test ordering)
+        'test_api_sessions_list_redacts_titles',
         # Workspace path (macOS /tmp -> /private/tmp symlink)
         'test_new_session_inherits_workspace',
         'test_workspace_add_valid',
@@ -170,7 +172,7 @@ def pytest_collection_modifyitems(config, items):
             skipped += 1
 
     if skipped:
-        print(f"\n⚠️  hermes-agent not found — {skipped} agent-dependent tests will be skipped\n")
+        print(f"\nWARNING: hermes-agent not found; {skipped} agent-dependent tests will be skipped\n")
 
 
 # ── Helpers ──────────────────────────────────────────────────────────────────

tests/test_mobile_layout.py

@@ -70,11 +70,11 @@ def test_mobile_bottom_nav_present():
 
 
 def test_mobile_files_button_present():
-    """Mobile files toggle button (#btnMobileFiles) must be in HTML and CSS."""
-    assert 'id="btnMobileFiles"' in HTML, \
-        "#btnMobileFiles missing from index.html"
-    assert "mobile-files-btn" in CSS, \
-        ".mobile-files-btn CSS missing from style.css"
+    """Mobile files toggle button (#btnWorkspacePanelToggle.workspace-toggle-btn) must be in HTML and CSS."""
+    assert 'id="btnWorkspacePanelToggle"' in HTML, \
+        "#btnWorkspacePanelToggle missing from index.html"
+    assert "workspace-toggle-btn" in CSS, \
+        ".workspace-toggle-btn CSS missing from style.css"
 
 
 # ── Profile dropdown overflow ─────────────────────────────────────────────────
@@ -115,13 +115,13 @@ def test_topbar_chips_mobile_overflow():
 
 def test_workspace_close_button_present():
     """Workspace panel must have a close/hide button accessible on mobile."""
-    # Either a dedicated mobile close button or the X button that closes the panel
+    # Either a dedicated mobile close button or the toggle button that closes the panel
     has_close = (
-        'onclick="toggleMobileFiles()"' in HTML or
-        'toggleMobileFiles' in HTML
+        'onclick="closeWorkspacePanel()"' in HTML or
+        'onclick="toggleWorkspacePanel()"' in HTML
     )
     assert has_close, \
-        "toggleMobileFiles() must be wired to a button to close the workspace panel on mobile"
+        "closeWorkspacePanel() or toggleWorkspacePanel() must be wired to a button to close the workspace panel on mobile"
 
 
 def test_toggle_mobile_files_js_defined():
@@ -175,3 +175,66 @@ def test_composer_textarea_font_size_mobile():
     # Check for 16px font-size on the textarea in a mobile breakpoint
     assert re.search(r'font-size:16px', CSS), \
         "Composer textarea must have font-size:16px at mobile widths to prevent iOS zoom-on-focus"
+
+
+
+# ── Profiles button in mobile bottom nav ─────────────────────────────────────
+
+def test_mobile_profiles_button_present():
+    """Mobile bottom nav must include a Profiles button (PR #265)."""
+    assert 'data-panel="profiles"' in HTML and 'mobileSwitchPanel' in HTML, \
+        "Mobile nav must have a Profiles button with data-panel='profiles' and mobileSwitchPanel"
+
+
+def test_mobile_profiles_button_uses_mobileSwitchPanel():
+    """Profiles mobile nav button must use mobileSwitchPanel, not raw switchPanel."""
+    import re
+    match = re.search(
+        r'<button[^>]*mobile-nav-btn[^>]*data-panel="profiles"[^>]*>|'
+        r'<button[^>]*data-panel="profiles"[^>]*mobile-nav-btn[^>]*>',
+        HTML
+    )
+    assert match, "Could not find mobile-nav-btn with data-panel='profiles'"
+    btn_html = HTML[match.start():match.start()+300]
+    assert "mobileSwitchPanel('profiles')" in btn_html, \
+        "Profiles mobile nav button must call mobileSwitchPanel('profiles')"
+
+
+def test_mobile_profiles_button_is_last_in_nav():
+    """Profiles button must appear after Spaces in the mobile bottom nav."""
+    spaces_pos = HTML.find('data-panel="workspaces"')
+    profiles_pos = HTML.rfind('data-panel="profiles"')
+    assert spaces_pos > 0 and profiles_pos > spaces_pos, \
+        "Profiles button must appear after Spaces button in the mobile nav"
+
+
+# ── Mobile Enter key inserts newline (PR #315, fixes #269) ───────────────────
+
+def test_mobile_enter_newline_condition_present():
+    """boot.js keydown handler must detect touch-primary devices via pointer:coarse."""
+    boot_js = (REPO / "static" / "boot.js").read_text(encoding="utf-8")
+    assert "pointer:coarse" in boot_js, \
+        "boot.js must use pointer:coarse media query for mobile Enter detection"
+
+
+def test_mobile_enter_newline_uses_match_media():
+    """boot.js must call matchMedia for pointer detection, not a hardcoded flag."""
+    boot_js = (REPO / "static" / "boot.js").read_text(encoding="utf-8")
+    assert "matchMedia('(pointer:coarse)')" in boot_js or 'matchMedia("(pointer:coarse)")' in boot_js, \
+        "boot.js must use matchMedia('(pointer:coarse)') for mobile detection"
+
+
+def test_mobile_enter_newline_only_overrides_enter_default():
+    """Mobile newline override must only apply when _sendKey is the default 'enter'."""
+    boot_js = (REPO / "static" / "boot.js").read_text(encoding="utf-8")
+    # The _mobileDefault check must gate on _sendKey==='enter' so ctrl+enter users aren't affected
+    assert "_sendKey===" in boot_js and "'enter'" in boot_js, \
+        "Mobile newline fallback must check window._sendKey==='enter' to avoid overriding user preference"
+
+
+def test_mobile_enter_does_not_affect_desktop_logic():
+    """The mobile Enter override must not alter the existing else branch for desktop users."""
+    boot_js = (REPO / "static" / "boot.js").read_text(encoding="utf-8")
+    # The else branch (desktop, sends on Enter without Shift) must still be present
+    assert "if(!e.shiftKey){e.preventDefault();send();" in boot_js, \
+        "Desktop Enter-to-send logic (else branch) must still be present in boot.js"

tests/test_onboarding_mvp.py

@@ -0,0 +1,244 @@
+"""Onboarding MVP tests — first-run wizard and provider config persistence.
+
+Tests that call /api/onboarding/setup require PyYAML in the test server's
+Python environment (the agent venv). They are skipped when hermes-agent is
+not installed, since the server falls back to system Python which typically
+lacks pyyaml.
+"""
+import json
+import pathlib
+import sys
+import urllib.error
+import urllib.request
+
+import pytest
+
+BASE = "http://127.0.0.1:8788"
+
+# Check if pyyaml is available — onboarding setup tests need it on the server
+try:
+    import yaml as _yaml
+    _HAS_YAML = True
+except ImportError:
+    _HAS_YAML = False
+_needs_yaml = pytest.mark.skipif(not _HAS_YAML, reason="PyYAML not installed — onboarding setup tests require it")
+
+
+def get(path):
+    with urllib.request.urlopen(BASE + path, timeout=10) as r:
+        return json.loads(r.read()), r.status
+
+
+def post(path, body=None):
+    req = urllib.request.Request(
+        BASE + path,
+        data=json.dumps(body or {}).encode(),
+        headers={"Content-Type": "application/json"},
+    )
+    try:
+        with urllib.request.urlopen(req, timeout=10) as r:
+            return json.loads(r.read()), r.status
+    except urllib.error.HTTPError as e:
+        return json.loads(e.read()), e.code
+
+
+def _server_hermes_home() -> pathlib.Path:
+    """Get the hermes home path the test server is actually using.
+
+    Using the server's own /api/onboarding/status response is more robust than
+    reading TEST_STATE_DIR from conftest, which can get the wrong path when
+    conftest is imported multiple times under different HERMES_HOME environments
+    (api.config resets HERMES_HOME at module import time via init_profile_state).
+    """
+    data, _ = get("/api/onboarding/status")
+    env_path = data.get("system", {}).get("env_path", "")
+    if env_path:
+        return pathlib.Path(env_path).parent
+    # Fallback
+    hermes_home = pathlib.Path.home() / ".hermes"
+    return hermes_home / "webui-mvp-test"
+
+
+@pytest.fixture(autouse=True)
+def clean_hermes_config_files():
+    hermes_home = _server_hermes_home()
+    for rel in ("config.yaml", ".env"):
+        (hermes_home / rel).unlink(missing_ok=True)
+    yield
+    for rel in ("config.yaml", ".env"):
+        (hermes_home / rel).unlink(missing_ok=True)
+
+
+
+def test_onboarding_status_defaults_incomplete():
+    data, status = get("/api/onboarding/status")
+    assert status == 200
+    assert data["completed"] is False
+    assert data["settings"]["password_enabled"] is False
+    assert data["system"]["provider_configured"] is False
+    assert data["system"]["chat_ready"] is False
+    assert data["system"]["setup_state"] in {"needs_provider", "agent_unavailable"}
+    assert "provider_note" in data["system"]
+    assert isinstance(data["workspaces"]["items"], list)
+    assert data["setup"]["providers"]
+
+
+@_needs_yaml
+def test_onboarding_setup_openrouter_writes_real_config_and_env():
+    data, status = post(
+        "/api/onboarding/setup",
+        {
+            "provider": "openrouter",
+            "model": "anthropic/claude-sonnet-4.6",
+            "api_key": "sk-or-test",
+        },
+    )
+    assert status == 200
+    assert data["system"]["provider_configured"] is True
+    assert data["system"]["provider_ready"] is True
+    if data["system"]["imports_ok"] and data["system"]["hermes_found"]:
+        assert data["system"]["chat_ready"] is True
+        assert data["system"]["setup_state"] == "ready"
+    else:
+        assert data["system"]["chat_ready"] is False
+        assert data["system"]["setup_state"] == "agent_unavailable"
+
+    cfg_text = (_server_hermes_home() / "config.yaml").read_text(encoding="utf-8")
+    env_text = (_server_hermes_home() / ".env").read_text(encoding="utf-8")
+    assert "provider: openrouter" in cfg_text
+    assert "default: anthropic/claude-sonnet-4.6" in cfg_text
+    assert "OPENROUTER_API_KEY=sk-or-test" in env_text
+
+
+@_needs_yaml
+def test_onboarding_setup_custom_endpoint_writes_runtime_files():
+    data, status = post(
+        "/api/onboarding/setup",
+        {
+            "provider": "custom",
+            "model": "google/gemma-3-27b-it",
+            "base_url": "http://localhost:4000/v1",
+            "api_key": "sk-custom-test",
+        },
+    )
+    assert status == 200
+    assert data["system"]["provider_configured"] is True
+    assert data["system"]["provider_ready"] is True
+    if data["system"]["imports_ok"] and data["system"]["hermes_found"]:
+        assert data["system"]["chat_ready"] is True
+        assert data["system"]["setup_state"] == "ready"
+    else:
+        assert data["system"]["chat_ready"] is False
+        assert data["system"]["setup_state"] == "agent_unavailable"
+    assert data["system"]["current_provider"] == "custom"
+    assert data["system"]["current_base_url"] == "http://localhost:4000/v1"
+
+    cfg_text = (_server_hermes_home() / "config.yaml").read_text(encoding="utf-8")
+    env_text = (_server_hermes_home() / ".env").read_text(encoding="utf-8")
+    assert "provider: custom" in cfg_text
+    assert "default: google/gemma-3-27b-it" in cfg_text
+    assert "base_url: http://localhost:4000/v1" in cfg_text
+    assert "OPENAI_API_KEY=sk-custom-test" in env_text
+
+
+@_needs_yaml
+def test_onboarding_setup_detects_incomplete_saved_provider():
+    status, code = post(
+        "/api/onboarding/setup",
+        {
+            "provider": "anthropic",
+            "model": "claude-sonnet-4.6",
+            "api_key": "sk-ant-test",
+        },
+    )
+    assert code == 200
+
+    (_server_hermes_home() / ".env").unlink(missing_ok=True)
+    data, status_code = get("/api/onboarding/status")
+    assert status_code == 200
+    assert data["system"]["provider_configured"] is True
+    assert data["system"]["provider_ready"] is False
+    assert data["system"]["chat_ready"] is False
+    assert data["system"]["setup_state"] in {"provider_incomplete", "agent_unavailable"}
+
+
+@_needs_yaml
+def test_onboarding_setup_rejects_missing_custom_base_url():
+    data, status = post(
+        "/api/onboarding/setup",
+        {
+            "provider": "custom",
+            "model": "qwen2.5-coder",
+            "api_key": "sk-test",
+        },
+    )
+    assert status == 400
+    assert "base_url is required" in data["error"]
+
+
+def test_onboarding_complete_persists_flag():
+    data, status = post("/api/onboarding/complete", {})
+    assert status == 200
+    assert data["completed"] is True
+
+    settings = json.loads(
+        (_server_hermes_home() / "settings.json").read_text(encoding="utf-8")
+    )
+    assert settings["onboarding_completed"] is True
+
+    data2, status2 = get("/api/onboarding/status")
+    assert status2 == 200
+    assert data2["completed"] is True
+
+
+def test_onboarding_complete_preserves_other_settings():
+    """Completing onboarding must not overwrite other user settings."""
+    # Use send_key (a safe enum setting) to verify settings preservation
+    # without contaminating bot_name or theme checks in other test files.
+    # Use GET /api/settings (not onboarding status) to check preservation
+    # since the onboarding status only returns a subset of settings fields.
+    try:
+        saved, s1 = post("/api/settings", {"send_key": "ctrl+enter"})
+        assert s1 == 200
+        assert saved["send_key"] == "ctrl+enter"
+
+        _, s2 = post("/api/onboarding/complete", {})
+        assert s2 == 200
+
+        # Verify the non-onboarding setting survived the completion call
+        current_settings, s3 = get("/api/settings")
+        assert s3 == 200
+        assert current_settings["send_key"] == "ctrl+enter"
+    finally:
+        # Always restore default send_key to avoid contaminating other tests
+        post("/api/settings", {"send_key": "enter"})
+
+def test_onboarding_already_completed_status():
+    """After marking onboarding complete, status must reflect completed=True
+    so the wizard does not re-appear for returning users."""
+    done, status = post("/api/onboarding/complete", {})
+    assert status == 200
+    assert done["completed"] is True
+
+    data, status2 = get("/api/onboarding/status")
+    assert status2 == 200
+    assert data["completed"] is True
+
+    # Reset so test doesn't contaminate others
+    post("/api/settings", {"onboarding_completed": False})
+
+
+@_needs_yaml
+def test_onboarding_setup_rejects_api_key_with_newline():
+    """API keys containing embedded newlines must be rejected to prevent .env injection."""
+    injected_key = "sk-bad" + chr(10) + "OTHER_KEY=injected"
+    data, status = post(
+        "/api/onboarding/setup",
+        {
+            "provider": "openrouter",
+            "model": "anthropic/claude-sonnet-4.6",
+            "api_key": injected_key,
+        },
+    )
+    assert status == 400
+    assert "newline" in data["error"].lower()

tests/test_onboarding_static.py

@@ -0,0 +1,58 @@
+import pathlib
+
+
+REPO = pathlib.Path(__file__).parent.parent
+
+
+def read(path):
+    return (REPO / path).read_text(encoding="utf-8")
+
+
+def test_index_contains_onboarding_overlay_markup():
+    html = read("static/index.html")
+    assert 'id="onboardingOverlay"' in html
+    assert 'id="onboardingBody"' in html
+    assert 'id="onboardingNextBtn"' in html
+    assert 'src="/static/onboarding.js"' in html
+
+
+def test_onboarding_css_rules_exist():
+    css = read("static/style.css")
+    for selector in (
+        ".onboarding-overlay",
+        ".onboarding-card",
+        ".onboarding-step",
+        ".onboarding-status.warn",
+    ):
+        assert selector in css
+
+
+def test_onboarding_js_exposes_bootstrap_hooks():
+    js = read("static/onboarding.js")
+    assert "async function loadOnboardingWizard()" in js
+    assert "async function nextOnboardingStep()" in js
+    assert "api('/api/onboarding/status')" in js
+    assert "api('/api/onboarding/setup'" in js
+    assert "api('/api/onboarding/complete'" in js
+
+
+def test_onboarding_uses_i18n_helpers():
+    html = read("static/index.html")
+    js = read("static/onboarding.js")
+    i18n = read("static/i18n.js")
+    assert 'data-i18n="onboarding_title"' in html
+    assert 'data-i18n="onboarding_continue"' in html
+    assert "t('onboarding_step_system_title')" in js
+    assert "t('onboarding_step_setup_title')" in js
+    assert "t('onboarding_complete')" in js
+    assert "onboarding_title: 'Welcome to Hermes Web UI'" in i18n
+    assert "onboarding_title: 'Bienvenido a Hermes Web UI'" in i18n
+
+
+def test_bootstrap_script_contains_official_installer_and_windows_guard():
+    src = read("bootstrap.py")
+    assert (
+        "https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh"
+        in src
+    )
+    assert "Native Windows is not supported" in src

tests/test_regressions.py

@@ -226,8 +226,8 @@ def test_loadSession_resets_busy_state_for_idle_session(cleanup_test_sessions):
     src = (REPO_ROOT / "static/sessions.js").read_text()
     # The fix adds explicit S.busy=false in the non-inflight else branch
     assert "S.busy=false;" in src,         "sessions.js loadSession must set S.busy=false when loading a non-inflight session"
-    # btnSend must be explicitly re-enabled
-    assert "$('btnSend').disabled=false;" in src,         "sessions.js loadSession must enable btnSend for non-inflight sessions"
+    # btnSend state must be refreshed via updateSendBtn
+    assert "updateSendBtn()" in src,         "sessions.js loadSession must call updateSendBtn for non-inflight sessions"
 
 
 def test_done_handler_guards_setbusy_with_inflight_check(cleanup_test_sessions):
@@ -286,7 +286,11 @@ def test_server_delete_invalidates_index(cleanup_test_sessions):
     routes_src = (REPO_ROOT / "api" / "routes.py").read_text() if (REPO_ROOT / "api" / "routes.py").exists() else ""
     # Find the delete handler in either file
     for label, text in [("server.py", src), ("api/routes.py", routes_src)]:
-        delete_idx = text.find("if parsed.path == '/api/session/delete':")
+        # Accept both single-quote and double-quote style (formatting varies by contributor)
+        delete_idx = max(
+            text.find("if parsed.path == '/api/session/delete':"),
+            text.find('if parsed.path == "/api/session/delete":'),
+        )
         if delete_idx >= 0:
             delete_block = text[delete_idx:delete_idx+600]
             assert "SESSION_INDEX_FILE" in delete_block, \
@@ -348,12 +352,12 @@ def test_respond_approval_uses_approval_session_id(cleanup_test_sessions):
     assert "_approvalSessionId" in fn_body,         "respondApproval must read _approvalSessionId, not S.session.session_id"
 
 
-# ── R11: Activity bar shows cross-session tool status ─────────────────────
+# ── R11: Tool progress must not use shared status chrome ──────────────────
 
 def test_tool_status_only_shown_for_current_session(cleanup_test_sessions):
-    """R11: The activity bar setStatus() call in the tool SSE handler must only
-    fire when the user is viewing the session that triggered the tool.
-    When missing, session A's tool names would appear in session B's activity bar.
+    """R11: Tool progress should not drive the global status bar or composer
+    status. Live tool cards in the current conversation are the authoritative
+    progress UI, which avoids cross-session status leakage entirely.
     """
     src = (REPO_ROOT / "static/messages.js").read_text()
     # Sprint 12: handler moved into _wireSSE(source)
@@ -362,14 +366,10 @@ def test_tool_status_only_shown_for_current_session(cleanup_test_sessions):
         tool_idx = src.find("es.addEventListener('tool'")
     assert tool_idx >= 0
     tool_block = src[tool_idx:tool_idx+400]
-    # setStatus must be inside the activeSid guard, not before it
-    status_pos = tool_block.find("setStatus(")
-    guard_pos  = tool_block.find("S.session.session_id===activeSid")
-    assert guard_pos >= 0, "tool handler must guard with activeSid check"
-    # The guard must appear BEFORE or AROUND the setStatus call
-    # (status only fires for the current session)
-    assert status_pos > tool_block.find("activeSid"), \
-        "setStatus in tool handler must be inside the activeSid guard"
+    assert "setStatus(" not in tool_block, \
+        "tool handler should not use the global activity/status bar"
+    assert "setComposerStatus(" not in tool_block, \
+        "tool handler should not use composer status for tool progress"
 
 # ── R12: Live tool cards lost on switch-away and switch-back ──────────────
 

tests/test_sprint16.py

@@ -1,6 +1,6 @@
 """
 Sprint 16 Tests: safe HTML rendering in renderMd(), active session styling,
-session sidebar polish (SVG icons, overlay actions).
+session sidebar polish (SVG icons, dropdown actions).
 """
 import html as _html
 import pathlib
@@ -676,20 +676,22 @@ def test_sessions_js_has_svg_icons(cleanup_test_sessions):
     assert "<svg" in code, "SVG content not found in ICONS"
 
 
-def test_sessions_js_has_overlay_actions(cleanup_test_sessions):
-    """sessions.js must use .session-actions overlay div for action buttons."""
+def test_sessions_js_has_dropdown_actions(cleanup_test_sessions):
+    """sessions.js must use a single trigger button and dropdown for session actions."""
     src = REPO_ROOT / "static" / "sessions.js"
     code = src.read_text()
-    assert "session-actions" in code, ".session-actions overlay not found in sessions.js"
+    assert "session-actions-trigger" in code, "session action trigger button not found in sessions.js"
+    assert "session-action-menu" in code, "session action dropdown menu not found in sessions.js"
 
 
-def test_style_css_has_session_actions_overlay(cleanup_test_sessions):
-    """style.css must define .session-actions with position:absolute."""
+def test_style_css_has_session_actions_dropdown(cleanup_test_sessions):
+    """style.css must define trigger and dropdown styles for session actions."""
     src = REPO_ROOT / "static" / "style.css"
     code = src.read_text()
     assert ".session-actions" in code, ".session-actions not found in style.css"
-    assert "position:absolute" in code or "position: absolute" in code, \
-        ".session-actions must use position:absolute for overlay"
+    assert ".session-action-menu" in code, ".session-action-menu not found in style.css"
+    assert "position:fixed" in code or "position: fixed" in code, \
+        ".session-action-menu must use position:fixed to avoid sidebar clipping"
 
 
 def test_style_css_active_session_uses_gold(cleanup_test_sessions):

tests/test_sprint20b.py

@@ -23,12 +23,12 @@ def test_send_button_present():
     assert 'id="btnSend"' in html
 
 
-def test_send_button_hidden_by_default():
-    """btnSend must start hidden (display:none) — only shown when there is content."""
+def test_send_button_disabled_by_default():
+    """btnSend must start disabled — enabled only when there is content."""
     html, _ = get_text("/")
     btn_match = re.search(r'id="btnSend"[^>]*>', html)
     assert btn_match, "btnSend element not found"
-    assert 'display:none' in btn_match.group(0)
+    assert 'disabled' in btn_match.group(0)
 
 
 def test_send_button_no_text_label():
@@ -264,14 +264,13 @@ def test_update_send_btn_uses_visible_class():
     assert 'visible' in fn_body
 
 
-def test_update_send_btn_uses_display_none():
-    """updateSendBtn must hide the button with display:none when no content."""
+def test_update_send_btn_uses_disabled():
+    """updateSendBtn must disable the button when no content or busy."""
     js, _ = get_text("/static/ui.js")
     fn_idx = js.find('function updateSendBtn')
     fn_end = js.find('\n}', fn_idx) + 2
     fn_body = js[fn_idx:fn_end]
-    assert 'display' in fn_body
-    assert 'none' in fn_body
+    assert 'disabled' in fn_body
 
 
 def test_set_busy_calls_update_send_btn():
@@ -321,14 +320,13 @@ def test_send_button_still_has_send_btn_class():
     assert 'class="send-btn"' in html
 
 
-def test_ui_js_set_busy_still_disables_btn():
-    """setBusy must still set btnSend.disabled (not just hide it)."""
+def test_ui_js_set_busy_calls_update_send_btn():
+    """setBusy must call updateSendBtn to manage button disabled state."""
     js, _ = get_text("/static/ui.js")
     busy_idx = js.find('function setBusy')
     busy_end = js.find('\n}', busy_idx) + 2
     busy_body = js[busy_idx:busy_end]
-    assert "btnSend" in busy_body
-    assert 'disabled' in busy_body
+    assert 'updateSendBtn' in busy_body
 
 
 def test_index_html_attach_button_unchanged():

tests/test_sprint34.py

@@ -0,0 +1,300 @@
+"""
+Sprint 34 Tests: OAuth provider support in onboarding (issues #303, #304).
+
+Covers:
+  1. _provider_oauth_authenticated() returns True for known OAuth providers
+     with valid tokens in auth.json
+  2. _provider_oauth_authenticated() returns False when auth.json is absent,
+     empty, or has no token data
+  3. _provider_oauth_authenticated() returns False for unknown/API-key providers
+  4. _status_from_runtime() marks copilot/openai-codex as provider_ready when
+     credentials exist
+  5. _status_from_runtime() gives a helpful "hermes auth" note (not "API key")
+     for OAuth providers that have no credentials yet
+  6. API route /api/onboarding/status reflects OAuth-ready state
+"""
+
+import json
+import pathlib
+import tempfile
+import unittest.mock
+
+import pytest
+
+REPO = pathlib.Path(__file__).parent.parent
+BASE = "http://127.0.0.1:8788"
+
+
+# ── Helpers ──────────────────────────────────────────────────────────────────
+
+def _make_auth_json(provider_id: str, tokens: dict, tmp_dir: pathlib.Path) -> pathlib.Path:
+    """Write an auth.json with the given tokens for provider_id into tmp_dir."""
+    store = {"providers": {provider_id: tokens}}
+    auth_path = tmp_dir / "auth.json"
+    auth_path.write_text(json.dumps(store), encoding="utf-8")
+    return auth_path
+
+
+# ── 1–3. _provider_oauth_authenticated unit tests ────────────────────────────
+
+class TestProviderOAuthAuthenticated:
+    """Unit tests for the new _provider_oauth_authenticated() helper."""
+
+    def _call(self, provider: str, hermes_home: pathlib.Path) -> bool:
+        # Import fresh so we don't get a stale module reference
+        from api.onboarding import _provider_oauth_authenticated
+        return _provider_oauth_authenticated(provider, hermes_home)
+
+    def test_returns_false_when_auth_json_absent(self, tmp_path):
+        """No auth.json -> not authenticated."""
+        assert self._call("openai-codex", tmp_path) is False
+
+    def test_openai_codex_with_access_token(self, tmp_path):
+        """openai-codex with a valid access_token -> authenticated."""
+        _make_auth_json(
+            "openai-codex",
+            {"access_token": "ey.test.token", "refresh_token": "ref123"},
+            tmp_path,
+        )
+        assert self._call("openai-codex", tmp_path) is True
+
+    def test_openai_codex_with_refresh_token_only(self, tmp_path):
+        """openai-codex with only a refresh_token -> still authenticated."""
+        _make_auth_json(
+            "openai-codex",
+            {"access_token": "", "refresh_token": "ref_only_token"},
+            tmp_path,
+        )
+        assert self._call("openai-codex", tmp_path) is True
+
+    def test_copilot_with_api_key(self, tmp_path):
+        """copilot with an api_key (GitHub token) -> authenticated."""
+        _make_auth_json("copilot", {"api_key": "ghu_test_token_123"}, tmp_path)
+        assert self._call("copilot", tmp_path) is True
+
+    def test_empty_tokens_returns_false(self, tmp_path):
+        """All token fields empty -> not authenticated."""
+        _make_auth_json(
+            "openai-codex",
+            {"access_token": "", "refresh_token": "", "api_key": ""},
+            tmp_path,
+        )
+        assert self._call("openai-codex", tmp_path) is False
+
+    def test_missing_provider_key_in_auth_json(self, tmp_path):
+        """auth.json present but provider key absent -> not authenticated."""
+        store = {"providers": {"some-other-provider": {"access_token": "tok"}}}
+        (tmp_path / "auth.json").write_text(json.dumps(store), encoding="utf-8")
+        assert self._call("openai-codex", tmp_path) is False
+
+    def test_unknown_provider_not_in_oauth_list(self, tmp_path):
+        """A provider that is not a known OAuth provider -> always False."""
+        _make_auth_json("some-random-provider", {"access_token": "tok"}, tmp_path)
+        assert self._call("some-random-provider", tmp_path) is False
+
+    def test_nous_provider_recognized(self, tmp_path):
+        """nous is in the known OAuth set."""
+        _make_auth_json("nous", {"access_token": "nous_tok"}, tmp_path)
+        assert self._call("nous", tmp_path) is True
+
+    def test_qwen_oauth_provider_recognized(self, tmp_path):
+        """qwen-oauth is in the known OAuth set."""
+        _make_auth_json("qwen-oauth", {"access_token": "qwen_tok"}, tmp_path)
+        assert self._call("qwen-oauth", tmp_path) is True
+
+    def test_empty_provider_string_returns_false(self, tmp_path):
+        """Empty provider string -> False, no crash."""
+        assert self._call("", tmp_path) is False
+        assert self._call("  ", tmp_path) is False
+
+
+# ── 4–5. _status_from_runtime integration ────────────────────────────────────
+
+class TestStatusFromRuntimeOAuth:
+    """_status_from_runtime should treat OAuth providers with tokens as ready."""
+
+    def _call(self, provider: str, model: str, hermes_home: pathlib.Path) -> dict:
+        from api.onboarding import _status_from_runtime
+        import api.onboarding as _ob
+        orig_home = _ob._get_active_hermes_home
+        orig_found = _ob._HERMES_FOUND
+        _ob._get_active_hermes_home = lambda: hermes_home
+        # Simulate hermes-agent being available so we reach the provider logic
+        # (without this, _status_from_runtime short-circuits to agent_unavailable)
+        _ob._HERMES_FOUND = True
+        try:
+            cfg = {"model": {"provider": provider, "default": model}}
+            return _status_from_runtime(cfg, True)
+        finally:
+            _ob._get_active_hermes_home = orig_home
+            _ob._HERMES_FOUND = orig_found
+
+    def test_copilot_ready_when_api_key_in_auth_json(self, tmp_path):
+        """copilot configured + api_key in auth.json -> provider_ready True."""
+        _make_auth_json("copilot", {"api_key": "ghu_abc123"}, tmp_path)
+        result = self._call("copilot", "gpt-5.4", tmp_path)
+        assert result["provider_configured"] is True
+        assert result["provider_ready"] is True
+        assert result["setup_state"] == "ready"
+
+    def test_openai_codex_ready_when_token_in_auth_json(self, tmp_path):
+        """openai-codex configured + access_token -> provider_ready True."""
+        _make_auth_json(
+            "openai-codex",
+            {"access_token": "ey.test", "refresh_token": "ref"},
+            tmp_path,
+        )
+        result = self._call("openai-codex", "codex-mini-latest", tmp_path)
+        assert result["provider_configured"] is True
+        assert result["provider_ready"] is True
+        assert result["setup_state"] == "ready"
+
+    def test_copilot_not_ready_without_credentials(self, tmp_path):
+        """copilot configured but no credentials -> provider_ready False.
+
+        We mock hermes_cli.auth to be unavailable so the function falls through
+        to the auth.json path.  With no auth.json the result must be False.
+        """
+        import unittest.mock
+
+        # Prevent the hermes_cli fast path from finding real credentials
+        with unittest.mock.patch(
+            "api.onboarding._provider_oauth_authenticated",
+            return_value=False,
+        ):
+            result = self._call("copilot", "gpt-5.4", tmp_path)
+
+        assert result["provider_configured"] is True
+        assert result["provider_ready"] is False
+        assert result["setup_state"] == "provider_incomplete"
+
+    def test_oauth_incomplete_note_mentions_hermes_auth(self, tmp_path):
+        """When OAuth provider is incomplete, note should mention hermes auth/model."""
+        result = self._call("openai-codex", "codex-mini-latest", tmp_path)
+        note = result["provider_note"]
+        assert "hermes auth" in note or "hermes model" in note, (
+            f"Expected 'hermes auth' or 'hermes model' in note, got: {note!r}"
+        )
+
+    def test_oauth_incomplete_note_does_not_say_api_key(self, tmp_path):
+        """OAuth provider incomplete note must not say 'API key' — that's misleading."""
+        result = self._call("copilot", "gpt-5.4", tmp_path)
+        note = result["provider_note"]
+        assert "API key" not in note, (
+            f"Note misleadingly mentions 'API key' for OAuth provider: {note!r}"
+        )
+
+    def test_standard_provider_incomplete_note_still_says_api_key(self, tmp_path):
+        """For a standard API-key provider (openrouter), note should still say API key."""
+        # openrouter with no .env
+        result = self._call("openrouter", "anthropic/claude-sonnet-4.6", tmp_path)
+        assert result["provider_ready"] is False
+        note = result["provider_note"]
+        assert "API key" in note, (
+            f"Expected 'API key' in note for openrouter, got: {note!r}"
+        )
+
+
+# ── 6. API endpoint reflects OAuth-ready state ───────────────────────────────
+
+class TestOnboardingStatusApiOAuth:
+    """
+    The /api/onboarding/status endpoint should report provider_ready=True
+    when an OAuth provider is configured and has valid credentials.
+    """
+
+    def test_status_endpoint_returns_200(self):
+        import urllib.request
+        with urllib.request.urlopen(BASE + "/api/onboarding/status", timeout=10) as r:
+            assert r.status == 200
+            data = json.loads(r.read())
+        assert "system" in data
+        assert "provider_ready" in data["system"]
+
+    def test_onboarding_status_has_chat_ready_field(self):
+        import urllib.request
+        with urllib.request.urlopen(BASE + "/api/onboarding/status", timeout=10) as r:
+            data = json.loads(r.read())
+        assert "chat_ready" in data["system"]
+
+    def test_status_setup_state_valid_values(self):
+        """setup_state must be one of the known string values."""
+        import urllib.request
+        with urllib.request.urlopen(BASE + "/api/onboarding/status", timeout=10) as r:
+            data = json.loads(r.read())
+        valid = {"ready", "provider_incomplete", "needs_provider", "agent_unavailable"}
+        assert data["system"]["setup_state"] in valid, (
+            f"Unexpected setup_state: {data['system']['setup_state']!r}"
+        )
+
+
+# ── Control Center: section reset on close ─────────────────────────────────
+
+def test_control_center_resets_active_section_on_close():
+    """Closing the control center must reset _settingsSection to 'conversation'."""
+    src = open('static/panels.js').read()
+    assert '_settingsSection' in src, '_settingsSection state variable missing from panels.js'
+    assert "_settingsSection = 'conversation'" in src or "_settingsSection='conversation'" in src, \
+        'Control center does not reset section to conversation on close'
+
+
+def test_control_center_tab_highlight_on_open():
+    """Opening the control center must use settings-tabs for section navigation."""
+    css = open('static/style.css').read()
+    assert 'settings-tabs' in css, 'settings-tabs CSS class for control center tabs missing from style.css'
+
+
+# ── apply_onboarding_setup: unsupported/OAuth providers complete gracefully ──
+
+class TestApplyOnboardingSetupUnsupportedProvider:
+    """PR #323 / Issue #322: apply_onboarding_setup must not raise ValueError for
+    providers already configured via CLI (openai-codex, copilot, nous, etc.).
+    Instead it marks onboarding complete and returns current status.
+    """
+
+    def _call(self, provider: str) -> dict:
+        import sys, pathlib, unittest.mock, tempfile, os
+        repo = pathlib.Path(__file__).parent.parent
+        if str(repo) not in sys.path:
+            sys.path.insert(0, str(repo))
+
+        from api.onboarding import apply_onboarding_setup
+
+        with tempfile.TemporaryDirectory() as tmp:
+            with unittest.mock.patch("api.onboarding._get_active_hermes_home",
+                                     return_value=pathlib.Path(tmp)), \
+                 unittest.mock.patch("api.onboarding._get_config_path",
+                                     return_value=pathlib.Path(tmp) / "config.yaml"), \
+                 unittest.mock.patch("api.onboarding.save_settings") as mock_save, \
+                 unittest.mock.patch("api.onboarding.get_onboarding_status",
+                                     return_value={"completed": True, "system": {}}):
+                result = apply_onboarding_setup({"provider": provider, "model": "", "api_key": ""})
+                return result, mock_save
+
+    def test_openai_codex_does_not_raise(self):
+        """apply_onboarding_setup with openai-codex must not raise ValueError."""
+        result, _ = self._call("openai-codex")
+        assert result is not None
+
+    def test_copilot_does_not_raise(self):
+        """apply_onboarding_setup with copilot must not raise ValueError."""
+        result, _ = self._call("copilot")
+        assert result is not None
+
+    def test_nous_does_not_raise(self):
+        """apply_onboarding_setup with nous must not raise ValueError."""
+        result, _ = self._call("nous")
+        assert result is not None
+
+    def test_unsupported_provider_marks_onboarding_complete(self):
+        """apply_onboarding_setup with an unsupported provider must save onboarding_completed=True."""
+        _, mock_save = self._call("openai-codex")
+        calls = [str(c) for c in mock_save.call_args_list]
+        assert any("onboarding_completed" in c for c in calls), \
+            "save_settings must be called with onboarding_completed=True for unsupported providers"
+
+    def test_unsupported_provider_returns_status_dict(self):
+        """apply_onboarding_setup with an unsupported provider must return a status dict (not raise)."""
+        result, _ = self._call("openai-codex")
+        assert isinstance(result, dict), \
+            "apply_onboarding_setup must return a dict for unsupported providers, not raise"

tests/test_sprint35.py

@@ -0,0 +1,146 @@
+"""
+Sprint 35 Tests: Breadcrumb nav + wider panel + responsive message width (PR #302).
+
+Covers:
+  1. PANEL_MAX raised from 500 to 1200 in boot.js
+  2. Responsive .messages-inner breakpoints in style.css (no hardcoded 800px)
+  3. renderFileBreadcrumb() function exists in workspace.js
+  4. renderFileBreadcrumb() is called from openFile()
+  5. clearPreview() calls renderBreadcrumb() to restore dir breadcrumb
+  6. Breadcrumb segments use correct CSS classes
+  7. breadcrumbBar element exists in index.html
+  8. Breadcrumb CSS rules exist in style.css
+"""
+
+import pathlib
+import re
+
+REPO = pathlib.Path(__file__).parent.parent
+
+
+def read(path):
+    return (REPO / path).read_text(encoding="utf-8")
+
+
+# ── 1. PANEL_MAX raised ──────────────────────────────────────────────────────
+
+def test_panel_max_raised_to_1200():
+    """PANEL_MAX must be 1200 (raised from 500) for wider right panel."""
+    src = read("static/boot.js")
+    assert "PANEL_MAX=1200" in src or "PANEL_MAX = 1200" in src, (
+        "PANEL_MAX was not raised to 1200 — right panel cannot be widened on ultrawide screens"
+    )
+
+
+def test_panel_max_is_not_500():
+    """Old PANEL_MAX=500 must no longer be present."""
+    src = read("static/boot.js")
+    assert "PANEL_MAX=500" not in src and "PANEL_MAX = 500" not in src, (
+        "Old PANEL_MAX=500 still present — right panel width not updated"
+    )
+
+
+# ── 2. Responsive messages-inner ─────────────────────────────────────────────
+
+def test_messages_inner_has_responsive_breakpoints():
+    """style.css must have @media breakpoints for .messages-inner."""
+    css = read("static/style.css")
+    assert "min-width:1400px" in css or "min-width: 1400px" in css, (
+        "Missing @media(min-width:1400px) breakpoint for .messages-inner"
+    )
+    assert "min-width:1800px" in css or "min-width: 1800px" in css, (
+        "Missing @media(min-width:1800px) breakpoint for .messages-inner"
+    )
+
+
+def test_messages_inner_no_hardcoded_800px():
+    """The base .messages-inner rule must not hardcode max-width:800px."""
+    css = read("static/style.css")
+    # Find the .messages-inner base rule (not inside a @media block)
+    # It should not have max-width:800px on the same line
+    for line in css.splitlines():
+        if ".messages-inner{" in line and "max-width:800px" in line:
+            raise AssertionError(
+                "Base .messages-inner still has hardcoded max-width:800px — "
+                "responsive breakpoints not applied"
+            )
+
+
+def test_messages_inner_breakpoint_values():
+    """The breakpoints should expand max-width at 1400px and 1800px."""
+    css = read("static/style.css")
+    assert "max-width:1100px" in css or "max-width: 1100px" in css, (
+        "Expected max-width:1100px at 1400px breakpoint"
+    )
+    assert "max-width:1200px" in css or "max-width: 1200px" in css, (
+        "Expected max-width:1200px at 1800px breakpoint"
+    )
+
+
+# ── 3–6. Breadcrumb navigation ───────────────────────────────────────────────
+
+def test_render_file_breadcrumb_function_exists():
+    """workspace.js must expose renderFileBreadcrumb()."""
+    src = read("static/workspace.js")
+    assert "function renderFileBreadcrumb" in src, (
+        "renderFileBreadcrumb() not defined in workspace.js"
+    )
+
+
+def test_render_file_breadcrumb_called_from_open_file():
+    """openFile() must call renderFileBreadcrumb(path) to show path segments."""
+    src = read("static/workspace.js")
+    assert "renderFileBreadcrumb(path)" in src, (
+        "openFile() does not call renderFileBreadcrumb(path)"
+    )
+
+
+def test_breadcrumb_has_root_segment():
+    """renderFileBreadcrumb must add a root '~' segment."""
+    src = read("static/workspace.js")
+    idx = src.find("function renderFileBreadcrumb")
+    block = src[idx:idx + 800]
+    assert "'~'" in block or '"~"' in block, (
+        "renderFileBreadcrumb missing root '~' segment"
+    )
+
+
+def test_breadcrumb_segments_use_correct_classes():
+    """Breadcrumb segments must use breadcrumb-seg breadcrumb-link/current classes."""
+    src = read("static/workspace.js")
+    assert "breadcrumb-seg" in src, "breadcrumb-seg class not used"
+    assert "breadcrumb-link" in src, "breadcrumb-link class not used"
+    assert "breadcrumb-current" in src, "breadcrumb-current class not used"
+
+
+def test_clear_preview_calls_render_breadcrumb():
+    """clearPreview() in boot.js must call renderBreadcrumb() to restore dir view."""
+    src = read("static/boot.js")
+    # Find clearPreview and check renderBreadcrumb is called nearby
+    idx = src.find("function clearPreview")
+    assert idx != -1, "clearPreview not found in boot.js"
+    block = src[idx:idx + 600]
+    assert "renderBreadcrumb" in block, (
+        "clearPreview() does not call renderBreadcrumb() — "
+        "directory breadcrumb won't restore after closing file preview"
+    )
+
+
+# ── 7. HTML markup ───────────────────────────────────────────────────────────
+
+def test_breadcrumb_bar_in_index_html():
+    """index.html must have the breadcrumbBar element."""
+    html = read("static/index.html")
+    assert 'id="breadcrumbBar"' in html, (
+        "breadcrumbBar element missing from index.html — "
+        "renderFileBreadcrumb() has nowhere to render"
+    )
+
+
+# ── 8. Breadcrumb CSS ────────────────────────────────────────────────────────
+
+def test_breadcrumb_css_rules_exist():
+    """style.css must have breadcrumb CSS rules."""
+    css = read("static/style.css")
+    for selector in (".breadcrumb-seg", ".breadcrumb-link", ".breadcrumb-current"):
+        assert selector in css, f"Missing CSS rule: {selector}"

tests/test_sprint36.py

@@ -0,0 +1,173 @@
+"""
+Sprint 36 Tests: cancelStream cleanup no longer depends on SSE event (PR #309 / issue #299).
+
+The old cancelStream() set "Cancelling..." status and then relied on the SSE cancel
+event to clear it. If the SSE connection was already closed, the event never arrived
+and "Cancelling..." lingered indefinitely.
+
+The fix: cancelStream() now clears status, busy state, activeStreamId, and the cancel
+button directly after the cancel API request completes — regardless of whether the SSE
+cancel event fires. The SSE handler still runs if it arrives (all operations idempotent).
+
+Covers:
+  1. cancelStream() clears activeStreamId unconditionally after the fetch
+  2. cancelStream() calls setBusy(false) unconditionally
+  3. cancelStream() calls setStatus('') unconditionally
+  4. cancelStream() hides the cancel button unconditionally
+  5. The catch block no longer calls setStatus(cancel_failed) — cleanup runs even on error
+  6. The SSE cancel handler is still present (idempotent path)
+  7. cancel_failed i18n key is still defined in all locales (key exists, just not used in
+     the catch-path anymore — kept for potential future use)
+"""
+
+import pathlib
+import re
+
+REPO = pathlib.Path(__file__).parent.parent
+
+
+def read(path):
+    return (REPO / path).read_text(encoding="utf-8")
+
+
+# ── 1–4. cancelStream() cleanup is unconditional ─────────────────────────────
+
+class TestCancelStreamCleanup:
+    """cancelStream() must clear all busy state regardless of SSE connection state."""
+
+    def _get_cancel_block(self):
+        """Extract the cancelStream function body from boot.js."""
+        src = read("static/boot.js")
+        idx = src.find("async function cancelStream()")
+        assert idx != -1, "cancelStream not found in boot.js"
+        # Find the closing brace — scan for the matching }
+        depth = 0
+        end = idx
+        for i, ch in enumerate(src[idx:]):
+            if ch == '{':
+                depth += 1
+            elif ch == '}':
+                depth -= 1
+                if depth == 0:
+                    end = idx + i + 1
+                    break
+        return src[idx:end]
+
+    def test_clears_active_stream_id(self):
+        """cancelStream() must null out S.activeStreamId after the request."""
+        block = self._get_cancel_block()
+        assert "S.activeStreamId=null" in block or "S.activeStreamId = null" in block, (
+            "cancelStream() does not clear S.activeStreamId — "
+            "subsequent calls could re-cancel an already-finished stream"
+        )
+
+    def test_calls_set_busy_false(self):
+        """cancelStream() must call setBusy(false) directly."""
+        block = self._get_cancel_block()
+        assert "setBusy(false)" in block, (
+            "cancelStream() does not call setBusy(false) — "
+            "spinner may linger if SSE connection is already closed"
+        )
+
+    def test_calls_set_status_empty(self):
+        """cancelStream() must call setStatus('') to clear 'Cancelling...' text."""
+        block = self._get_cancel_block()
+        assert "setStatus('')" in block or 'setStatus("")' in block, (
+            "cancelStream() does not clear status text — "
+            "'Cancelling...' can linger if SSE cancel event never arrives"
+        )
+
+    def test_hides_cancel_button(self):
+        """cancelStream() must hide the cancel button unconditionally."""
+        block = self._get_cancel_block()
+        assert "btnCancel" in block, (
+            "cancelStream() does not reference btnCancel — cancel button may stay visible"
+        )
+
+    def test_cleanup_not_inside_try_block(self):
+        """Cleanup must happen outside the try block so it runs even if fetch fails."""
+        block = self._get_cancel_block()
+        # The S.activeStreamId=null and setBusy(false) must appear after the try/catch
+        # Verify they are NOT only inside the try block by checking position relative to catch
+        try_idx = block.find("try{")
+        catch_idx = block.find("}catch(")
+        cleanup_idx = block.find("S.activeStreamId=null")
+        if cleanup_idx == -1:
+            cleanup_idx = block.find("S.activeStreamId = null")
+        assert cleanup_idx > catch_idx, (
+            "S.activeStreamId cleanup appears to be inside the try block — "
+            "it won't run if the fetch throws"
+        )
+
+
+# ── 5. Error path behavior ────────────────────────────────────────────────────
+
+class TestCancelStreamErrorPath:
+    """The catch block should not prevent cleanup from running."""
+
+    def test_catch_block_does_not_call_set_status_cancel_failed(self):
+        """The catch block must not call setStatus(cancel_failed) on its own.
+
+        Previously: catch(e){setStatus(t('cancel_failed')+e.message)}
+        After fix: catch swallows the error; cleanup runs in the outer scope.
+        The status is cleared by setStatus('') unconditionally.
+        """
+        src = read("static/boot.js")
+        idx = src.find("async function cancelStream()")
+        block = src[idx:idx + 400]
+        # The old pattern was setStatus inside catch; new pattern has it outside
+        # Look for the catch block specifically
+        catch_idx = block.find("}catch(")
+        if catch_idx == -1:
+            catch_idx = block.find("} catch (")
+        assert catch_idx != -1, "No catch block found in cancelStream"
+        # Get just the catch body
+        brace_open = block.find("{", catch_idx)
+        brace_close = block.find("}", brace_open)
+        catch_body = block[brace_open:brace_close + 1]
+        assert "cancel_failed" not in catch_body, (
+            "catch block still calls setStatus(cancel_failed) — "
+            "this means a failed cancel shows an error instead of cleaning up silently"
+        )
+
+
+# ── 6. SSE cancel handler still present ──────────────────────────────────────
+
+def test_sse_cancel_handler_still_present():
+    """The SSE 'cancel' event handler must still exist in messages.js.
+
+    The new cancelStream() cleanup is not a replacement — the SSE handler
+    provides additional cleanup (removes 'Task cancelled.' message, clears
+    tool cards, etc.) when the connection is still alive.
+    """
+    src = read("static/messages.js")
+    assert "addEventListener('cancel'" in src or 'addEventListener("cancel"' in src, (
+        "SSE cancel event handler missing from messages.js — "
+        "live cancellation cleanup path is broken"
+    )
+
+
+def test_sse_cancel_handler_calls_set_busy():
+    """The SSE cancel handler must still call setBusy(false)."""
+    src = read("static/messages.js")
+    idx = src.find("addEventListener('cancel'") 
+    if idx == -1:
+        idx = src.find('addEventListener("cancel"')
+    assert idx != -1
+    block = src[idx:idx + 800]
+    assert "setBusy(false)" in block, (
+        "SSE cancel handler no longer calls setBusy(false)"
+    )
+
+
+# ── 7. i18n key preserved ─────────────────────────────────────────────────────
+
+def test_cancel_failed_i18n_key_exists_in_all_locales():
+    """cancel_failed key must still exist in i18n.js for all locales."""
+    src = read("static/i18n.js")
+    # Should appear once per locale (en, es, de, zh-Hans, zh-Hant)
+    count = src.count("cancel_failed:")
+    assert count >= 5, (
+        f"cancel_failed key only found {count} times in i18n.js — "
+        "expected at least 5 (one per locale)"
+    )

tests/test_sprint37.py

@@ -0,0 +1,82 @@
+"""
+Sprint 37 Tests: Workspace panel open/closed state persists across refreshes via localStorage.
+"""
+import pathlib
+import re
+
+REPO_ROOT = pathlib.Path(__file__).parent.parent
+BOOT_JS   = (REPO_ROOT / "static" / "boot.js").read_text()
+HTML      = (REPO_ROOT / "static" / "index.html").read_text()
+
+
+# ── Persistence: save on change ───────────────────────────────────────────────
+
+def test_workspace_panel_saves_to_localstorage():
+    """_setWorkspacePanelMode must call localStorage.setItem with hermes-webui-workspace-panel."""
+    assert "hermes-webui-workspace-panel" in BOOT_JS, \
+        "boot.js must use localStorage key 'hermes-webui-workspace-panel' to persist panel state"
+
+
+def test_workspace_panel_save_inside_set_mode():
+    """localStorage.setItem for panel state must live inside _setWorkspacePanelMode."""
+    fn_idx = BOOT_JS.find("function _setWorkspacePanelMode(")
+    fn_end = BOOT_JS.find("\n}", fn_idx) + 2
+    fn_body = BOOT_JS[fn_idx:fn_end]
+    assert "hermes-webui-workspace-panel" in fn_body, \
+        "localStorage save must be inside _setWorkspacePanelMode so every state change is captured"
+
+
+def test_workspace_panel_saves_open_value():
+    """When the panel is open, localStorage must be set to 'open'."""
+    fn_idx = BOOT_JS.find("function _setWorkspacePanelMode(")
+    fn_end = BOOT_JS.find("\n}", fn_idx) + 2
+    fn_body = BOOT_JS[fn_idx:fn_end]
+    assert "'open'" in fn_body or '"open"' in fn_body, \
+        "_setWorkspacePanelMode must store 'open' for an open panel state"
+
+
+def test_workspace_panel_saves_closed_value():
+    """When the panel is closed, localStorage must be set to 'closed'."""
+    fn_idx = BOOT_JS.find("function _setWorkspacePanelMode(")
+    fn_end = BOOT_JS.find("\n}", fn_idx) + 2
+    fn_body = BOOT_JS[fn_idx:fn_end]
+    assert "'closed'" in fn_body or '"closed"' in fn_body, \
+        "_setWorkspacePanelMode must store 'closed' for a closed panel state"
+
+
+# ── Persistence: restore on boot ─────────────────────────────────────────────
+
+def test_workspace_panel_restored_on_boot():
+    """Boot IIFE must read hermes-webui-workspace-panel from localStorage and restore the mode."""
+    # Find the boot IIFE (the async IIFE at the bottom of boot.js)
+    iife_idx = BOOT_JS.rfind("(async function")
+    if iife_idx < 0:
+        iife_idx = BOOT_JS.rfind("(async()=>{")
+    iife_body = BOOT_JS[iife_idx:]
+    assert "hermes-webui-workspace-panel" in iife_body, \
+        "Boot IIFE must read 'hermes-webui-workspace-panel' from localStorage to restore panel state on load"
+
+
+def test_workspace_panel_restore_sets_browse_mode():
+    """When localStorage says 'open', boot must set _workspacePanelMode to 'browse' before syncing."""
+    iife_idx = BOOT_JS.rfind("(async function")
+    if iife_idx < 0:
+        iife_idx = BOOT_JS.rfind("(async()=>{")
+    iife_body = BOOT_JS[iife_idx:]
+    # The restore block must assign _workspacePanelMode = 'browse'
+    assert "_workspacePanelMode='browse'" in iife_body or "_workspacePanelMode = 'browse'" in iife_body, \
+        "Boot must set _workspacePanelMode='browse' when restoring an open panel"
+
+
+def test_workspace_panel_restore_before_sync():
+    """Restore must happen before syncWorkspacePanelState() so the state drives the initial render."""
+    iife_idx = BOOT_JS.rfind("(async function")
+    if iife_idx < 0:
+        iife_idx = BOOT_JS.rfind("(async()=>{")
+    iife_body = BOOT_JS[iife_idx:]
+    restore_pos = iife_body.find("hermes-webui-workspace-panel")
+    sync_pos    = iife_body.find("syncWorkspacePanelState()")
+    assert restore_pos >= 0, "restore read must be present in boot IIFE"
+    assert sync_pos >= 0,    "syncWorkspacePanelState call must be present in boot IIFE"
+    assert restore_pos < sync_pos, \
+        "Workspace panel restore must happen BEFORE syncWorkspacePanelState() so the correct mode is applied"

tests/test_sprint6.py

@@ -36,6 +36,7 @@ def test_index_html_served():
     assert status == 200
     assert b"sidebarResize" in raw, "Resize handle not found in HTML"
     assert b"cronCreateForm" in raw, "Cron create form not found in HTML"
+    assert b"btnHermesPanel" in raw, "Hermes control center trigger not found in HTML"
     assert b"btnExportJSON" in raw, "Export JSON button not found in HTML"
 
 def test_index_html_file_exists():

tests/test_updates.py

@@ -0,0 +1,53 @@
+"""Tests for self-update diagnostics (api/updates.py)."""
+from unittest.mock import MagicMock, patch
+
+import api.updates as updates
+
+
+def test_run_git_returns_stderr_on_failure(tmp_path):
+    """When a git command fails, _run_git should return stderr (not empty string)."""
+    with patch('subprocess.run') as mock_run:
+        mock_run.return_value = MagicMock(
+            returncode=1,
+            stdout='',
+            stderr="fatal: 'origin/master' does not appear to be a git repository\n",
+        )
+        out, ok = updates._run_git(['pull', '--ff-only', 'origin/master'], tmp_path)
+
+    assert ok is False
+    assert "does not appear to be a git repository" in out
+
+
+def test_run_git_returns_stdout_when_no_stderr(tmp_path):
+    """If stderr is empty on failure, fall back to stdout."""
+    with patch('subprocess.run') as mock_run:
+        mock_run.return_value = MagicMock(
+            returncode=128,
+            stdout='Already up to date.',
+            stderr='',
+        )
+        out, ok = updates._run_git(['pull'], tmp_path)
+
+    assert ok is False
+    assert 'Already up to date' in out
+
+
+def test_run_git_returns_exit_code_when_no_output(tmp_path):
+    """If both stdout and stderr are empty, report the exit code."""
+    with patch('subprocess.run') as mock_run:
+        mock_run.return_value = MagicMock(
+            returncode=1,
+            stdout='',
+            stderr='',
+        )
+        out, ok = updates._run_git(['status'], tmp_path)
+
+    assert ok is False
+    assert 'status 1' in out
+
+
+def test_split_remote_ref_splits_tracking_ref():
+    """_split_remote_ref should correctly split origin/branch."""
+    assert updates._split_remote_ref('origin/master') == ('origin', 'master')
+    assert updates._split_remote_ref('origin/feature/foo') == ('origin', 'feature/foo')
+    assert updates._split_remote_ref('master') == (None, 'master')