chore: v2.8.19 — avatar from a link the browser loads, Files groups workspaces by owner

- POST /api/me/avatar/url stores the https link (users.avatar_link) instead
  of downloading it; GET /api/me/avatar and /api/users/:id/avatar answer 302
  to it (no referrer). Link rules: https, no userinfo, <= 2048 chars, no
  localhost or private/reserved IP literal. Upload and link replace each other.
- Settings -> Account first loads the link as an embedded image and refuses
  one this browser cannot show: a picture behind a login (Mattermost's
  /api/v4/users/<id>/image) gets no cookie cross-site and 401s.
- Files sidebar: each workspace under its owner's home, chevrons remembered
  per browser (agenthub.files.homesOpen); ownerless ones stay flat.

.env.example

@@ -72,9 +72,21 @@
 #   DASHBOARD_SESSION_SYNC_MS=30000
 
 # Hourly database upkeep: a non-blocking WAL checkpoint (the WAL then shrinks
-# to 64 MB) and PRAGMA optimize. 0 turns it off. Never VACUUMs.
+# to 64 MB), PRAGMA optimize, the opt-in retention below and a bounded
+# incremental_vacuum. 0 turns it off. Never a full VACUUM (that is Settings →
+# Data → Compact, on a click).
 #   DASHBOARD_DB_MAINTAIN_MS=3600000
 
+# Automatic retention (OFF unless set): finished sessions that started more
+# than N days ago (1–3650) are purged by the hourly upkeep. Usually set from
+# Settings → Data → Session cleanup, which writes it to the settings file.
+#   AGENTHUB_RETENTION_DAYS=90
+
+# Update check interval (ms, default 3600000 = 1 h, minimum 60000). A tick
+# with no browser connected is skipped; the next browser to connect gets one.
+# DASHBOARD_UPDATE_CHECK=0 turns the scheduled check off.
+#   DASHBOARD_UPDATE_CHECK_INTERVAL_MS=3600000
+
 # Poll interval (ms) for Antigravity CLI sessions and tokens, read from agy's
 # own ~/.gemini/antigravity-cli/conversations/*.db (0 disables; default: 15000).
 #   DASHBOARD_ANTIGRAVITY_POLL_MS=15000

.prettierignore

@@ -11,3 +11,4 @@ client/package-lock.json
 *.md
 *.yml
 *.yaml
+server/vendor/

INSTALL.md

@@ -1,6 +1,6 @@
 # Installation
 
-A step-by-step guide to get AgentHub — the local control surface for Claude Code agents — up and running on your machine, with optional sections for importing history and running in a container.
+The one install-and-setup guide for AgentHub — the local control surface for Claude Code agents: the plugin install, a checkout install, configuration, the database, importing history, and troubleshooting. (`SETUP.md` is only a pointer here now.)
 
 ## Fastest path — install it as a Claude Code plugin
 
@@ -17,17 +17,20 @@ on PATH — no clone, no `npm run setup`, no
 result and `/agenthub-open` to build the UI and get the URL.
 
 Requires Node **>= 22.5** (a plugin install has no native `better-sqlite3`, so
-the server stores data through `node:sqlite`). Full behavior, including the
-uninstall cleanup (`agenthub uninstall`), is in [`docs/PLUGINS.md`](docs/PLUGINS.md).
+the server stores data through `node:sqlite`), plus `git` and `tmux` from
+[Step 0](#step-0--system-packages). Full behavior, including the uninstall
+cleanup (`agenthub uninstall`), is in [`docs/PLUGINS.md`](docs/PLUGINS.md). If
+the dashboard never comes up, see
+[Plugin bootstrap never comes up](#plugin-bootstrap-never-comes-up).
 
 Follow the steps below instead when you want a checkout — to develop the
-dashboard, run it from source, or stay on Node 20.
+dashboard or run it from source.
 
 ## Requirements
 
 | Requirement | Version | Notes |
 |---|---|---|
-| Node.js | 20+ (22+ recommended) | Required for server and client |
+| Node.js | **22.5+** | Required for server and client (`node:sqlite`). Node 20 is end-of-life and unsupported |
 | npm | 9+ | Comes with Node.js |
 | Claude Code | 2.x+ | Required for hook integration |
 | Git | Any | Cloning the repository, and every lane operation (worktrees, branch/status reads) |
@@ -76,7 +79,7 @@ Check it:
 ```bash
 tmux -V          # e.g. tmux 3.4
 git --version
-node -v          # v20.x / v22.x / v24.x
+node -v          # v22.5+ / v24.x
 ```
 
 Once the server is up you can ask it directly — this is the same probe the
@@ -113,8 +116,8 @@ brew install node git tmux       # Node >= 22.5 for the plugin install (nvm work
 echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc   # where the plugin puts `agenthub`
 ```
 
-- **Node:** a plugin install needs **>= 22.5** (it stores data through
-  `node:sqlite`); a checkout still runs on Node 20. The `agenthub` launcher
+- **Node:** **>= 22.5** (the plugin stores data through `node:sqlite`; a
+  checkout needs the same). The `agenthub` launcher
   pins the node that installed it and falls back to `node` on `PATH` when a
   `brew upgrade` or `nvm` switch deletes that binary.
 - **Starts at login once you turn it on (LaunchAgent).** Off by default; with
@@ -172,24 +175,20 @@ cd AgentHub
 ## Step 2 — Install dependencies
 
 ```bash
-npm run setup
+npm run setup        # or: make setup
 ```
 
-This installs all server and client dependencies, plus the VS Code extension, and links the `agenthub` CLI.
+This runs `npm install` (whose `postinstall` hook installs the client's
+dependencies in `client/`), installs `client/` once more explicitly, and links
+the `agenthub` CLI (`npm link`; if that has no permission it prints how to link
+it by hand). A plain `npm install` is enough to build and run the dashboard —
+only the CLI link is missing.
 
-A plain root install already covers server **and** client — a `postinstall` hook installs the client dependencies automatically, so this alone is enough to build and run the dashboard:
+With `--ignore-scripts` the `postinstall` hook is skipped; install the client
+yourself with `npm --prefix client install`.
 
-```bash
-npm install
-```
-
-`npm run setup` additionally installs the VS Code extension and links the `agenthub` CLI. (If you install with `--ignore-scripts`, the `postinstall` hook is skipped — run `cd client && npm install` manually in that case.)
-
-Or via Makefile:
-
-```bash
-make setup
-```
+`better-sqlite3` gyp/compile warnings here are harmless — see
+[Troubleshooting](#better-sqlite3-errors-during-npm-install--npm-run-setup).
 
 ---
 
@@ -234,7 +233,7 @@ After starting a Claude Code session, you should see:
 - **Dashboard** — stats updating in real-time
 - **Settings page** — data export and cleanup tools on the Dashboard tab; Claude Code's model pricing rules, hook configuration status and CLAUDE_HOME on **Settings → Claude Code → Overview**
 
-If nothing appears after 30 seconds, see [SETUP.md](./SETUP.md#troubleshooting).
+If nothing appears after 30 seconds, see [Troubleshooting](#no-sessions-appearing-after-starting-claude-code).
 
 ### PWA install (optional)
 
@@ -246,57 +245,110 @@ The dashboard is a Progressive Web App. After opening it in a supported browser
 
 ---
 
-## Step 5 — (Optional) Import existing Claude Code history
+## Step 5 — (Optional) Importing existing Claude Code history
 
-The server **automatically imports** every session under
-`~/.claude/projects/` on startup, so if you've used Claude Code on this
-machine before, your historical sessions, agents, events, token counts,
-and cost totals should already be visible in the Sessions list.
+The dashboard automatically imports sessions from `~/.claude/projects/` on
+**every startup**, so if Claude Code has been used on this machine, you'll
+see history immediately after the first launch. If you need to bring in
+history from another machine, from a backup, or just force a rescan, use
+**Settings → Import History** in the UI — it's a guided, drag-and-drop
+experience with live progress.
 
-To bring in history from another machine, a backup, or a `.tar.gz`
-archive a teammate sent you, use **Settings → Import History** in the
-UI. It supports three modes:
+### Pick the right mode
 
 ```mermaid
-flowchart LR
-    UI["Settings →<br/>Import History"] --> M1["Rescan default folder<br/>~/.claude/projects"]
-    UI --> M2["Scan a folder<br/>any absolute path"]
-    UI --> M3["Upload files<br/>.jsonl / .zip / .tar.gz / .gz"]
-    M1 --> P["Same parser as live<br/>hook ingestion"]
-    M2 --> P
-    M3 --> P
-    P --> DB[("SQLite<br/>sessions + tokens + cost")]
+flowchart TD
+    Q["Where is the history?"] --> Q1{Is it on this machine<br/>under ~/.claude/projects?}
+    Q1 -->|yes, and I just want<br/>to re-scan| M1["Mode: Rescan default folder<br/>one click"]
+    Q1 -->|yes, but in another folder<br/>on this machine| M2["Mode: Scan a folder<br/>paste the absolute path"]
+    Q1 -->|no — it's on another machine<br/>or in an archive file| M3["Mode: Upload files<br/>drag-drop JSONL or archive"]
 
-    style UI fill:#a855f7,stroke:#c084fc,color:#fff
-    style P fill:#f59e0b,stroke:#fbbf24,color:#000
-    style DB fill:#10b981,stroke:#34d399,color:#fff
+    M3 --> PREP["Archive source:<br/>tar -czf claude-history.tar.gz<br/>-C ~/.claude projects"]
+
+    style M1 fill:#10b981,stroke:#34d399,color:#fff
+    style M2 fill:#f59e0b,stroke:#fbbf24,color:#000
+    style M3 fill:#a855f7,stroke:#c084fc,color:#fff
 ```
 
-Re-imports are idempotent: sessions are deduplicated by UUID and
-compaction baselines preserve pre-compaction token totals, so running
-the importer twice never double-counts tokens or cost.
+### Step-by-step: moving history from one machine to another
 
-Verify it worked by opening the **Analytics** page and checking that
-per-model token totals and estimated cost look correct. Full walkthrough
-with per-OS archive commands in
-[SETUP.md → Importing existing Claude Code history](./SETUP.md#importing-existing-claude-code-history).
-### Optional: tune import limits
+**On the source machine**, bundle the projects folder:
 
-If you regularly import very large archives, these environment variables
-can be raised (the defaults are generous for typical use):
+```bash
+# macOS / Linux
+tar -czf claude-history.tar.gz -C ~/.claude projects
 
-| Variable                          | Default | Purpose                                                     |
-| --------------------------------- | ------- | ----------------------------------------------------------- |
-| `AGENTHUB_IMPORT_MAX_BYTES`           | 1 GB    | Maximum size per uploaded file                              |
-| `AGENTHUB_IMPORT_MAX_FILES`           | 2000    | Maximum files per upload request                            |
-| `AGENTHUB_IMPORT_MAX_EXTRACT_BYTES`   | 4 GB    | Ceiling on uncompressed bytes per archive (zip-bomb guard)  |
+# Windows (PowerShell, via built-in tar)
+tar -czf claude-history.tar.gz -C "$env:USERPROFILE\.claude" projects
+```
 
-Set them before `npm run dev` or `npm start`:
+Transfer the resulting `claude-history.tar.gz` to the destination machine
+however you like — AirDrop, `scp`, USB, cloud storage.
+
+**On the destination machine**, in the dashboard:
+
+1. Open **Settings → Import History**.
+2. Pick **Upload files** (the third tab).
+3. Drag the archive onto the drop zone.
+4. Click **Upload & Import** and watch the progress.
+5. When the green result card appears, open **Analytics → Cost** to confirm
+   per-model token totals and estimated cost.
+
+### Supported inputs
+
+Any of the following can be dropped onto the upload zone or found inside a
+folder given to **Scan a folder**:
+
+- `.jsonl` — session transcripts
+- `.meta.json` — subagent metadata sidecars
+- `.zip` — extracted with path-traversal protection
+- `.tar`, `.tar.gz`, `.tgz` — extracted via the `tar` package
+- `.gz` — single gzipped JSONL (streaming-decompressed)
+
+### Accuracy guarantees
+
+- **Idempotent** — re-importing never double-counts. Sessions are
+  deduplicated by UUID.
+- **Cost-preserving** — the `token_usage` table uses `baseline_*` columns
+  to preserve pre-compaction token totals, so re-ingesting a compacted
+  transcript never erases historical cost.
+- **Same parser as live** — `parseSessionFile` + `importSession` is the
+  single source of truth for both hook-driven ingestion and manual
+  import, so imported numbers match captured numbers exactly.
+
+### Safety
+
+Archive extraction is hardened against path traversal and archive bombs.
+The defaults are generous for real-world transcripts but tight enough to
+stop obvious attacks. If you regularly import very large archives, raise them
+before `npm run dev` or `npm start` (also listed under
+[Environment variables](#environment-variables)):
+
+| Variable                            | Default | Purpose                                                    |
+| ----------------------------------- | ------- | ---------------------------------------------------------- |
+| `AGENTHUB_IMPORT_MAX_BYTES`         | 1 GB    | Maximum size per uploaded file                             |
+| `AGENTHUB_IMPORT_MAX_FILES`         | 2000    | Maximum files per upload request                           |
+| `AGENTHUB_IMPORT_MAX_EXTRACT_BYTES` | 4 GB    | Ceiling on uncompressed bytes per archive (zip-bomb guard) |
 
 ```bash
 AGENTHUB_IMPORT_MAX_EXTRACT_BYTES=17179869184 npm start   # allow 16 GB extraction
 ```
 
+### CLI alternative
+
+For scripts and automation, the same logic runs from the terminal:
+
+```bash
+# Import (or re-import) everything under ~/.claude/projects
+npm run import-history
+
+# Dry run — show what would be imported without writing
+node scripts/import-history.js --dry-run
+
+# Scope to a single project dir
+node scripts/import-history.js --project my-project
+```
+
 ---
 
 ## Production mode
@@ -328,44 +380,260 @@ and, for plugin installs, [`docs/PLUGINS.md` → Auto-start on boot](docs/PLUGIN
 
 ---
 
-## Optional: Agent extension packs
+## How it works
 
-This repository includes extension packs for both Claude Code and Codex.
+AgentHub integrates with Claude Code through its native hook system. When Claude Code performs any action (session start, tool use, turn completion, subagent finish, session exit), it fires a hook that calls a small Node.js script bundled with this project. That script forwards the event over HTTP to the dashboard server, which stores it in SQLite and broadcasts it to the browser over WebSocket.
 
-- Claude Code loads project extensions from:
+```
+Claude Code  →  hook fires  →  hook-handler.js  →  POST /api/hooks/event
+                                                         ↓
+Browser  ←  WebSocket broadcast  ←  Express server  ←  SQLite
+```
+
+No extra Claude Code configuration is required in the normal host-run path — when you start the dashboard with `npm run dev` or `npm start`, the server configures the hooks automatically on startup (or, with the `agenthub` plugin enabled in `~/.claude/settings.json`, removes the checkout's copies — the plugin's own hooks already run, and both would post every event twice). Container deployments are the exception: after the container is up, run `npm run install-hooks` on the host so Claude Code points at `http://localhost:4820`.
+
+---
+
+## Configuration
+
+### Hook auto-installation
+
+When the dashboard is running directly on the host, the server writes the following to `~/.claude/settings.json` every time it starts:
+
+```json
+{
+  "hooks": {
+    "SessionStart": [{ "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" SessionStart" }] }],
+    "PreToolUse":   [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" PreToolUse" }] }],
+    "PostToolUse":  [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" PostToolUse" }] }],
+    "Stop":         [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" Stop" }] }],
+    "SubagentStop": [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" SubagentStop" }] }],
+    "Notification": [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" Notification" }] }],
+    "SessionEnd":   [{ "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" SessionEnd" }] }]
+  }
+}
+```
+
+> [!NOTE]
+> Note: `SessionStart` and `SessionEnd` hooks do not support the `matcher` field — they fire unconditionally on every session start and exit.
+
+Existing hooks in that file are preserved. The dashboard only adds or updates entries that contain `hook-handler.js`.
+
+To re-run hook installation manually:
+
+```bash
+npm run install-hooks
+```
+
+> [!TIP]
+> Container note: if you run the dashboard inside a container (a Dev Container, Codespaces, or your own image), do not install hooks from in there — the hook path a container writes points at the container filesystem, not the host. Run `npm run install-hooks` on the host instead. As a safeguard (issue #193) the installer **detects container execution and refuses to run** (exiting non-zero) so it can never poison a bind-mounted host `~/.claude`. If Claude Code itself genuinely runs inside that container, override with `AGENTHUB_ALLOW_CONTAINER_HOOKS=1 npm run install-hooks`.
+
+> [!NOTE]
+> Prefer a ready-made dev environment? This repo ships an **optional** Dev Container (`.devcontainer/`) for VS Code / GitHub Codespaces — Node 22, native build tools for `better-sqlite3`, Python, and ports `4820`/`5173` preconfigured. It's purely opt-in and changes nothing for host-based development. See [`.devcontainer/README.md`](.devcontainer/README.md). (Hooks remain host-side there too.)
+
+### Environment variables
+
+| Variable | Default | Description |
+|---|---|---|
+| `DASHBOARD_PORT` | `4820` | Port the Express server listens on |
+| `CLAUDE_DASHBOARD_PORT` | `4820` | Port the hook handler uses when posting events to the dashboard |
+| `DASHBOARD_DB_PATH` | `data/dashboard.db` | Path to the SQLite database file |
+| `NODE_ENV` | `development` | Set to `production` to serve built client |
+| `DASHBOARD_CLIENT_DIST` | `client/dist` | Directory the built UI is served from in production. Set by the `agenthub` plugin bootstrap to its own runtime dir, because the plugin cache is replaced on every update |
+| `AGENTHUB_IMPORT_MAX_BYTES` | `1073741824` (1 GB) | Maximum size per uploaded file on `/api/import/upload` |
+| `AGENTHUB_IMPORT_MAX_FILES` | `2000` | Maximum number of files per upload request |
+| `AGENTHUB_IMPORT_MAX_EXTRACT_BYTES` | `4294967296` (4 GB) | Maximum uncompressed bytes any single archive is allowed to expand to (zip-bomb defense) |
+| `DASHBOARD_DATA_DIR` | `~/.claude/agenthub` | AgentHub's data dir; a plugin install keeps its runtime (deps, UI build, logs) in `runtime/` under it |
+
+Example with a custom port:
+
+```bash
+DASHBOARD_PORT=9000 npm run dev
+```
+
+> [!NOTE]
+> You usually do **not** need to set `DASHBOARD_PORT` manually. `npm run dev` is wrapped by `scripts/dev.js`, which probes both `127.0.0.1` and `::1` (so an SSH `LocalForward` bound to one loopback can't slip past) and picks the first free port in `4820–4859` automatically. The chosen port is propagated to the Vite dev proxy via `DASHBOARD_PORT`, and the Express server writes it to `~/.claude/.agenthub.json` so the Claude Code hook handler discovers it without any env var.
+>
+> Multiple dashboards can run side by side — for example two `npm run dev` checkouts, or `npm run dev` alongside `npm start`. Each one appends its `{port, pid, startedAt}` entry to the discovery file, and `scripts/hook-handler.js` fan-outs every hook event to every live entry, so both UIs keep their real-time stream.
+>
+> Setting `CLAUDE_DASHBOARD_PORT=N` overrides discovery entirely and forces the hook handler to a single port — useful for tests and container setups where the in-process discovery file isn't reachable from the host.
+>
+> If you bypass the picker (e.g. `npm run dev:raw`, container builds, or anything else that calls `node server/index.js` directly), make sure your client is built / proxied against the port the server actually bound.
+
+### Agent extension setup (Claude Code + Codex)
+
+This repository ships extension files for both agent ecosystems:
+
+- Claude Code:
   - `CLAUDE.md`
-  - `.claude/rules/`
-  - `skills/` (shipped as the `agenthub` plugin's skills)
-- Codex project packs live under `.codex/`:
+  - `.claude/rules/*`
+  - `skills/*` (the `agenthub` plugin's own skills)
+- Codex:
   - `AGENTS.md`
-  - `.codex/rules/`
-  - `.codex/agents/`
-  - `.codex/skills/`
+  - `.codex/config.toml`
+  - `.codex/rules/default.rules`
+  - `.codex/agents/*`
+  - `.codex/skills/*`
 
 See [`.codex/README.md`](./.codex/README.md) for Codex extension details.
 
+### PWA configuration (optional)
+
+The dashboard ships as a Progressive Web App. No configuration is required — its manifest and service worker are included out of the box.
+
+**Customising the manifest:** Edit `client/public/manifest.json`. Common fields to change:
+
+- `name` / `short_name` — displayed on the home screen / dock
+- `theme_color` — address bar / title bar tint (default: `#6366f1`)
+- `background_color` — splash screen background
+- `start_url` — entry point when launched from home screen
+
+**Updating the service worker cache:** The SW has a `CACHE_NAME` constant (e.g. `dashboard-v2`). After deploying new assets, bump the version string to force browsers to re-fetch — though for the dashboard this is rarely needed: hashed `/assets/*` URLs are immutable per build, everything else is fetched network-first with cache fallback, and a `controllerchange` listener in the client reloads the page exactly once when a new SW takes over, so a rebuild propagates without a hard refresh.
+
+**Browser support:** PWA install prompts appear in Chrome 107+, Edge 107+, and Firefox 110+ (desktop and Android). Safari supports `apple-mobile-web-app-capable` for iOS home-screen mode but does not show an install banner.
+
+**Verifying PWA status:** Open DevTools → Application → Manifest to confirm the manifest loads. Check the Service Workers section to verify the SW is registered and active. The Lighthouse PWA audit should pass all core checks.
+
+---
+
+## Database
+
+The SQLite database is created automatically on first run (`data/dashboard.db` in a checkout, unless `DASHBOARD_DB_PATH` says otherwise). The directory is created if it does not exist. The database uses WAL mode for concurrent reads and foreign keys for referential integrity.
+
+### Clear all data
+
+To remove all sessions, agents, events, and token usage (useful after running seed data or for a clean start):
+
+```bash
+npm run clear-data
+```
+
+### Data management via Settings page
+
+The Settings page (`/settings`) provides a UI for the following. **Model Pricing**
+and **Hook Configuration** are not on its Dashboard tab: they sit under the
+Claude Code tab's **Overview** (Settings → Claude Code → Overview), beside
+CLAUDE_HOME; Codex (its Overview) and Antigravity have their own pricing and
+hooks in their own tabs.
+
+- **Model Pricing** — view and edit per-model cost rates, reset to defaults, add custom models
+- **Hook Configuration** — check which hooks are installed and reinstall them
+- **Data Export** — download all sessions, agents, events, and pricing as a JSON file
+- **Session Cleanup** — abandon stale active sessions after N hours, purge old completed sessions after N days
+- **Clear All Data** — remove all sessions, agents, events, and token usage
+- **Data Management** and **About** sections render with loading placeholders while server info is being fetched, so the page is always fully navigable
+
+### Seed demo data
+
+To populate the dashboard with sample sessions, agents, and events for UI exploration:
+
+```bash
+npm run seed
+```
+
+---
+
+## Scripts reference
+
+| Script | Command | Description |
+|---|---|---|
+| `setup` | `npm run setup` | Install all dependencies (server + client) |
+| `dev` | `npm run dev` | Start server + client in development mode |
+| `start` | `npm start` | Start server in production mode |
+| `build` | `npm run build` | Build the React client to `client/dist/` |
+| `install-hooks` | `npm run install-hooks` | Write Claude Code hooks to `~/.claude/settings.json` |
+| `clear-data` | `npm run clear-data` | Delete all data from the database |
+| `seed` | `npm run seed` | Insert demo sessions/agents/events |
+| `import-history` | `npm run import-history` | Import legacy sessions from `~/.claude/` (also runs on startup) |
+| `claude` | Claude CLI | Uses `CLAUDE.md`, `.claude/rules`, and `.claude/skills` automatically |
+| `test` | `npm test` | Run all server and client tests |
+| `test:server` | `npm run test:server` | Run server integration tests only |
+| `test:client` | `npm run test:client` | Run client unit tests only |
+| `format` | `npm run format` | Format all files with Prettier |
+| `format:check` | `npm run format:check` | Check formatting without writing |
+
+---
+
+## Makefile targets
+
+All npm scripts are mirrored as `make` targets for convenience. Run `make help` to list them:
+
+```bash
+make help
+```
+
+Commonly used targets:
+
+| Make target | Equivalent npm command | Description |
+|---|---|---|
+| `make setup` | `npm run setup` | Install all dependencies (root + client) |
+| `make dev` | `npm run dev` | Start server + client in watch mode |
+| `make build` | `npm run build` | Build the React client for production |
+| `make start` | `npm start` | Start the production server |
+| `make prod` | `npm run build && npm start` | Build then start in one step |
+| `make test` | `npm test` | Run all tests (server + client) |
+| `make test-server` | `npm run test:server` | Run server tests only |
+| `make test-client` | `npm run test:client` | Run client tests only |
+| `make format` | `npm run format` | Format all files with Prettier |
+| `make format-check` | `npm run format:check` | Check formatting without writing |
+| `make seed` | `npm run seed` | Load demo data |
+| `make clear-data` | `npm run clear-data` | Delete all data rows |
+
 ---
 
 ## Troubleshooting
 
-### `npm run setup` shows `better-sqlite3` errors
+### Plugin bootstrap never comes up
 
-This is expected and **non-fatal**. `better-sqlite3` is a native C++ module listed as an optional dependency. If prebuilt binaries are not available for your Node version or platform, npm will print gyp/compilation errors but still complete successfully.
+The plugin's `SessionStart` hook only checks a fast path and hands the real
+work (npm install, UI build, server start) to a detached background worker, so
+a failure there does not show in the session. When the worker's last run
+failed, the next session start prints a one-time **AgentHub:** message naming
+the log to read. Everything is logged under `~/.claude/agenthub/runtime/`:
 
-At runtime the server uses this fallback chain:
+| File | What it holds |
+|---|---|
+| `bootstrap.log` | Each bootstrap step and why it stopped (Node too old, install failed, superseded build, …) |
+| `npm-install.log` | npm's output for the runtime dependency install |
+| `client-build.log` | The dashboard UI build (the API still works when only this fails) |
+| `server.log` | The server's own output, when it was started detached |
+| `last-failure.json` | The last failure the session-start message reports (removed once a bootstrap succeeds) |
 
-1. **`better-sqlite3`** — used when prebuilt binaries are available (Node 20/22/24 on Windows x64, macOS arm64/x64, Linux x64/arm64)
-2. **`node:sqlite`** — Node.js built-in SQLite module, used automatically on Node 22+ when `better-sqlite3` is unavailable
+Then run `/agenthub-doctor` from Claude Code — it checks Node, the runtime
+dependencies, the server and the service unit, and names the fix for each
+failing row. `/agenthub-update` re-runs the bootstrap in the foreground with its
+output visible. The most common causes: Node older than 22.5 (`node -v` in the
+shell Claude Code was started from), no network or a proxy blocking the npm
+registry (`npm-install.log`), and a port held by another program (`server.log`,
+see [Port 4820 already in use](#port-4820-already-in-use)).
 
-If you see an error box at startup saying *"SQLite backend not available"*, either:
+### `better-sqlite3` errors during `npm install` / `npm run setup`
 
-- **Upgrade to Node.js 22+** (recommended — zero native dependencies needed), or
-- **Install build tools** so `better-sqlite3` can compile from source:
-  - **Windows:** `npm install -g windows-build-tools` or install [Visual Studio Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/) with the C++ workload
-  - **macOS:** `xcode-select --install`
-  - **Linux:** `sudo apt install python3 make g++` (Debian/Ubuntu) or equivalent
+Only a **checkout** install sees these — the plugin installs with
+`--ignore-scripts` and never builds `better-sqlite3`. They are **harmless**:
+`better-sqlite3` is an optional dependency, and when it cannot be built npm
+skips it and the server uses Node's built-in `node:sqlite` (Node 22.5+). You do
+**not** need Python, Visual Studio Build Tools or a C++ compiler.
 
-  Then run: `npm rebuild better-sqlite3`
+To build it anyway (it is used when present), install a toolchain and run
+`npm rebuild better-sqlite3`:
+
+- **Windows:** [Visual Studio Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/) with the C++ workload
+- **macOS:** `xcode-select --install`
+- **Linux:** `sudo apt install python3 make g++` (Debian/Ubuntu) or equivalent
+
+### "SQLite backend not available" error on startup
+
+Neither `better-sqlite3` nor `node:sqlite` could be loaded — almost always a
+Node older than 22.5. Upgrade Node.
+
+### Database is locked / busy errors
+
+The SQLite database uses WAL mode with a 5-second busy timeout. If you see lock errors:
+
+- Ensure only one dashboard server instance is running
+- Check for zombie `node server/index.js` processes: `ps aux | grep server/index`
+- Delete `data/dashboard.db-wal` and `data/dashboard.db-shm` if the server was killed uncleanly, then restart
 
 ### `npm run dev` fails immediately
 
@@ -375,7 +643,7 @@ Ensure both server and client dependencies are installed:
 npm run setup
 ```
 
-If the error mentions a missing module like `express` or `react`, dependencies may be incomplete. Delete `node_modules` in both root and `client/`, then re-run setup:
+If the error mentions a missing module like `express` or `react`, dependencies may be incomplete. Delete `node_modules` in both the root and `client/`, then re-run setup:
 
 ```bash
 rm -rf node_modules client/node_modules
@@ -409,9 +677,66 @@ that case.
 
 ### No sessions appearing after starting Claude Code
 
-See [SETUP.md — Troubleshooting](./SETUP.md#troubleshooting) for detailed hook debugging steps.
+**Check 1 — Is the server running?**
 
----
+```bash
+curl http://localhost:4820/api/health
+# Expected: {"status":"ok","timestamp":"..."}
+```
+
+**Check 2 — Are hooks installed?**
+
+With the plugin, its hooks come with it — run `/agenthub-doctor` instead. For a
+checkout, open `~/.claude/settings.json` and confirm it contains a `hooks`
+section with entries referencing `hook-handler.js`. If not, run:
+
+```bash
+npm run install-hooks
+```
+
+**Check 3 — Did you start a new Claude Code session after the server started?**
+
+Hooks only apply to sessions started after installation. Restart Claude Code.
+
+**Check 4 — Is Node.js in PATH when Claude Code runs hooks?**
+
+On some systems, the shell environment when Claude Code fires hooks may not include the full PATH. Test with:
+
+```bash
+node --version
+```
+
+If Node.js is not found, use the full path to `node` in the hook command. Edit `scripts/install-hooks.js`, replace `node` with the absolute path (e.g. `/usr/local/bin/node`), and re-run `npm run install-hooks`.
+
+### Dashboard shows "Disconnected" in the sidebar
+
+The WebSocket connection to the server failed. Ensure the server is running:
+
+```bash
+npm run dev
+```
+
+The client will automatically reconnect every 2 seconds once the server is available.
+
+### Port 4820 already in use
+
+When another program holds the port, the server stops with
+`Port 4820 is already in use by another program…` (a running AgentHub there is
+detected and simply reused). Pick another port:
+
+```bash
+DASHBOARD_PORT=4821 npm start      # or: DASHBOARD_PORT=4821 npm run dev
+```
+
+The Vite dev proxy and the Claude Code hooks follow the port on their own
+(`client/vite.config.ts` reads `DASHBOARD_PORT`; the server publishes the port it bound).
+
+And make sure Claude Code posts hooks to the new port:
+
+```bash
+CLAUDE_DASHBOARD_PORT=4821 claude
+# or edit scripts/hook-handler.js and change the default port
+```
 
 ## Ports
 

SETUP.md

@@ -1,422 +1,14 @@
 # Setup Guide
 
-A comprehensive guide to setting up and configuring the Agent Dashboard, including how it integrates with Claude Code, environment variables, container deployment, and troubleshooting common issues.
-
-## How it works
-
-Agent Dashboard integrates with Claude Code through its native hook system. When Claude Code performs any action (session start, tool use, turn completion, subagent finish, session exit), it fires a hook that calls a small Node.js script bundled with this project. That script forwards the event over HTTP to the dashboard server, which stores it in SQLite and broadcasts it to the browser over WebSocket.
-
-```
-Claude Code  →  hook fires  →  hook-handler.js  →  POST /api/hooks/event
-                                                         ↓
-Browser  ←  WebSocket broadcast  ←  Express server  ←  SQLite
-```
-
-No extra Claude Code configuration is required in the normal host-run path — when you start the dashboard with `npm run dev` or `npm start`, the server configures the hooks automatically on startup (or, with the `agenthub` plugin enabled in `~/.claude/settings.json`, removes the checkout's copies — the plugin's own hooks already run, and both would post every event twice). Container deployments are the exception: after the container is up, run `npm run install-hooks` on the host so Claude Code points at `http://localhost:4820`.
-
----
-
-## Configuration
-
-### Hook auto-installation
-
-When the dashboard is running directly on the host, the server writes the following to `~/.claude/settings.json` every time it starts:
-
-```json
-{
-  "hooks": {
-    "SessionStart": [{ "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" SessionStart" }] }],
-    "PreToolUse":   [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" PreToolUse" }] }],
-    "PostToolUse":  [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" PostToolUse" }] }],
-    "Stop":         [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" Stop" }] }],
-    "SubagentStop": [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" SubagentStop" }] }],
-    "Notification": [{ "matcher": "*", "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" Notification" }] }],
-    "SessionEnd":   [{ "hooks": [{ "type": "command", "command": "node \"/path/to/scripts/hook-handler.js\" SessionEnd" }] }]
-  }
-}
-```
-
-> [!NOTE]
-> Note: `SessionStart` and `SessionEnd` hooks do not support the `matcher` field — they fire unconditionally on every session start and exit.
-
-Existing hooks in that file are preserved. The dashboard only adds or updates entries that contain `hook-handler.js`.
-
-To re-run hook installation manually:
-
-```bash
-npm run install-hooks
-```
-
-> [!TIP]
-> Container note: if you run the dashboard inside a container (a Dev Container, Codespaces, or your own image), do not install hooks from in there — the hook path a container writes points at the container filesystem, not the host. Run `npm run install-hooks` on the host instead. As a safeguard (issue #193) the installer **detects container execution and refuses to run** (exiting non-zero) so it can never poison a bind-mounted host `~/.claude`. If Claude Code itself genuinely runs inside that container, override with `AGENTHUB_ALLOW_CONTAINER_HOOKS=1 npm run install-hooks`.
-
-> [!NOTE]
-> Prefer a ready-made dev environment? This repo ships an **optional** Dev Container (`.devcontainer/`) for VS Code / GitHub Codespaces — Node 22, native build tools for `better-sqlite3`, Python, and ports `4820`/`5173` preconfigured. It's purely opt-in and changes nothing for host-based development. See [`.devcontainer/README.md`](.devcontainer/README.md). (Hooks remain host-side there too.)
-
-### Environment variables
-
-| Variable | Default | Description |
-|---|---|---|
-| `DASHBOARD_PORT` | `4820` | Port the Express server listens on |
-| `CLAUDE_DASHBOARD_PORT` | `4820` | Port the hook handler uses when posting events to the dashboard |
-| `DASHBOARD_DB_PATH` | `data/dashboard.db` | Path to the SQLite database file |
-| `NODE_ENV` | `development` | Set to `production` to serve built client |
-| `DASHBOARD_CLIENT_DIST` | `client/dist` | Directory the built UI is served from in production. Set by the `agenthub` plugin bootstrap to its own runtime dir, because the plugin cache is replaced on every update |
-| `AGENTHUB_IMPORT_MAX_BYTES` | `1073741824` (1 GB) | Maximum size per uploaded file on `/api/import/upload` |
-| `AGENTHUB_IMPORT_MAX_FILES` | `2000` | Maximum number of files per upload request |
-| `AGENTHUB_IMPORT_MAX_EXTRACT_BYTES` | `4294967296` (4 GB) | Maximum uncompressed bytes any single archive is allowed to expand to (zip-bomb defense) |
-
-Example with a custom port:
-
-```bash
-DASHBOARD_PORT=9000 npm run dev
-```
-
-> [!NOTE]
-> You usually do **not** need to set `DASHBOARD_PORT` manually. `npm run dev` is wrapped by `scripts/dev.js`, which probes both `127.0.0.1` and `::1` (so an SSH `LocalForward` bound to one loopback can't slip past) and picks the first free port in `4820–4859` automatically. The chosen port is propagated to the Vite dev proxy via `DASHBOARD_PORT`, and the Express server writes it to `~/.claude/.agenthub.json` so the Claude Code hook handler discovers it without any env var.
->
-> Multiple dashboards can run side by side — for example two `npm run dev` checkouts, or `npm run dev` alongside `npm start`. Each one appends its `{port, pid, startedAt}` entry to the discovery file, and `scripts/hook-handler.js` fan-outs every hook event to every live entry, so both UIs keep their real-time stream.
->
-> Setting `CLAUDE_DASHBOARD_PORT=N` overrides discovery entirely and forces the hook handler to a single port — useful for tests and container setups where the in-process discovery file isn't reachable from the host.
->
-> If you bypass the picker (e.g. `npm run dev:raw`, container builds, or anything else that calls `node server/index.js` directly), make sure your client is built / proxied against the port the server actually bound.
-
-### Agent extension setup (Claude Code + Codex)
-
-This repository ships extension files for both agent ecosystems:
-
-- Claude Code:
-  - `CLAUDE.md`
-  - `.claude/rules/*`
-  - `skills/*` (the `agenthub` plugin's own skills)
-  - `agents/*` (the `agenthub` plugin's own agents)
-- Codex:
-  - `AGENTS.md`
-  - `.codex/config.toml`
-  - `.codex/rules/default.rules`
-  - `.codex/agents/*`
-  - `.codex/skills/*`
-
-See [`.codex/README.md`](./.codex/README.md) for Codex extension details.
-
-### PWA configuration (optional)
-
-The dashboard ships as a Progressive Web App. No configuration is required — its manifest and service worker are included out of the box.
-
-**Customising the manifest:** Edit `client/public/manifest.json`. Common fields to change:
-
-- `name` / `short_name` — displayed on the home screen / dock
-- `theme_color` — address bar / title bar tint (default: `#6366f1`)
-- `background_color` — splash screen background
-- `start_url` — entry point when launched from home screen
-
-**Updating the service worker cache:** The SW has a `CACHE_NAME` constant (e.g. `dashboard-v2`). After deploying new assets, bump the version string to force browsers to re-fetch — though for the dashboard this is rarely needed: hashed `/assets/*` URLs are immutable per build, everything else is fetched network-first with cache fallback, and a `controllerchange` listener in the client reloads the page exactly once when a new SW takes over, so a rebuild propagates without a hard refresh.
-
-**Browser support:** PWA install prompts appear in Chrome 107+, Edge 107+, and Firefox 110+ (desktop and Android). Safari supports `apple-mobile-web-app-capable` for iOS home-screen mode but does not show an install banner.
-
-**Verifying PWA status:** Open DevTools → Application → Manifest to confirm the manifest loads. Check the Service Workers section to verify the SW is registered and active. The Lighthouse PWA audit should pass all core checks.
-
----
-
-## Database
-
-The SQLite database is created automatically at `data/dashboard.db` on first run. The directory is created if it does not exist. The database uses WAL mode for concurrent reads and foreign keys for referential integrity.
-
-### Clear all data
-
-To remove all sessions, agents, events, and token usage (useful after running seed data or for a clean start):
-
-```bash
-npm run clear-data
-```
-
-### Data management via Settings page
-
-The Settings page (`/settings`) provides a UI for the following. **Model Pricing**
-and **Hook Configuration** are not on its Dashboard tab: they sit under the
-Claude Code tab's **Overview** (Settings → Claude Code → Overview), beside
-CLAUDE_HOME; Codex (its Overview) and Antigravity have their own pricing and
-hooks in their own tabs.
-
-- **Model Pricing** — view and edit per-model cost rates, reset to defaults, add custom models
-- **Hook Configuration** — check which hooks are installed and reinstall them
-- **Data Export** — download all sessions, agents, events, and pricing as a JSON file
-- **Session Cleanup** — abandon stale active sessions after N hours, purge old completed sessions after N days
-- **Clear All Data** — remove all sessions, agents, events, and token usage
-- **Data Management** and **About** sections render with loading placeholders while server info is being fetched, so the page is always fully navigable
-
-### Seed demo data
-
-To populate the dashboard with sample sessions, agents, and events for UI exploration:
-
-```bash
-npm run seed
-```
-
----
-
-## Importing existing Claude Code history
-
-The dashboard automatically imports sessions from `~/.claude/projects/` on
-**every startup**, so if Claude Code has been used on this machine, you'll
-see history immediately after the first launch. If you need to bring in
-history from another machine, from a backup, or just force a rescan, use
-**Settings → Import History** in the UI — it's a guided, drag-and-drop
-experience with live progress.
-### Pick the right mode
-
-```mermaid
-flowchart TD
-    Q["Where is the history?"] --> Q1{Is it on this machine<br/>under ~/.claude/projects?}
-    Q1 -->|yes, and I just want<br/>to re-scan| M1["Mode: Rescan default folder<br/>one click"]
-    Q1 -->|yes, but in another folder<br/>on this machine| M2["Mode: Scan a folder<br/>paste the absolute path"]
-    Q1 -->|no — it's on another machine<br/>or in an archive file| M3["Mode: Upload files<br/>drag-drop JSONL or archive"]
-
-    M3 --> PREP["Archive source:<br/>tar -czf claude-history.tar.gz<br/>-C ~/.claude projects"]
-
-    style M1 fill:#10b981,stroke:#34d399,color:#fff
-    style M2 fill:#f59e0b,stroke:#fbbf24,color:#000
-    style M3 fill:#a855f7,stroke:#c084fc,color:#fff
-```
-
-### Step-by-step: moving history from one machine to another
-
-**On the source machine**, bundle the projects folder:
-
-```bash
-# macOS / Linux
-tar -czf claude-history.tar.gz -C ~/.claude projects
-
-# Windows (PowerShell, via built-in tar)
-tar -czf claude-history.tar.gz -C "$env:USERPROFILE\.claude" projects
-```
-
-Transfer the resulting `claude-history.tar.gz` to the destination machine
-however you like — AirDrop, `scp`, USB, cloud storage.
-
-**On the destination machine**, in the dashboard:
-
-1. Open **Settings → Import History**.
-2. Pick **Upload files** (the third tab).
-3. Drag the archive onto the drop zone.
-4. Click **Upload & Import** and watch the progress.
-5. When the green result card appears, open **Analytics → Cost** to confirm
-   per-model token totals and estimated cost.
-
-### Supported inputs
-
-Any of the following can be dropped onto the upload zone or found inside a
-folder given to **Scan a folder**:
-
-- `.jsonl` — session transcripts
-- `.meta.json` — subagent metadata sidecars
-- `.zip` — extracted with path-traversal protection
-- `.tar`, `.tar.gz`, `.tgz` — extracted via the `tar` package
-- `.gz` — single gzipped JSONL (streaming-decompressed)
-
-### Accuracy guarantees
-
-- **Idempotent** — re-importing never double-counts. Sessions are
-  deduplicated by UUID.
-- **Cost-preserving** — the `token_usage` table uses `baseline_*` columns
-  to preserve pre-compaction token totals, so re-ingesting a compacted
-  transcript never erases historical cost.
-- **Same parser as live** — `parseSessionFile` + `importSession` is the
-  single source of truth for both hook-driven ingestion and manual
-  import, so imported numbers match captured numbers exactly.
-
-### Safety
-
-Archive extraction is hardened against path traversal and archive bombs.
-The defaults are generous for real-world transcripts but tight enough to
-stop obvious attacks; see the env vars table above for
-`AGENTHUB_IMPORT_MAX_BYTES`, `AGENTHUB_IMPORT_MAX_FILES`, and
-`AGENTHUB_IMPORT_MAX_EXTRACT_BYTES`.
-
-### CLI alternative
-
-For scripts and automation, the same logic runs from the terminal:
-
-```bash
-# Import (or re-import) everything under ~/.claude/projects
-npm run import-history
-
-# Dry run — show what would be imported without writing
-node scripts/import-history.js --dry-run
-
-# Scope to a single project dir
-node scripts/import-history.js --project my-project
-```
-
----
-
-## Scripts reference
-
-| Script | Command | Description |
-|---|---|---|
-| `setup` | `npm run setup` | Install all dependencies (server + client) |
-| `dev` | `npm run dev` | Start server + client in development mode |
-| `start` | `npm start` | Start server in production mode |
-| `build` | `npm run build` | Build the React client to `client/dist/` |
-| `install-hooks` | `npm run install-hooks` | Write Claude Code hooks to `~/.claude/settings.json` |
-| `clear-data` | `npm run clear-data` | Delete all data from the database |
-| `seed` | `npm run seed` | Insert demo sessions/agents/events |
-| `import-history` | `npm run import-history` | Import legacy sessions from `~/.claude/` (also runs on startup) |
-| `claude` | Claude CLI | Uses `CLAUDE.md`, `.claude/rules`, and `.claude/skills` automatically |
-| `test` | `npm test` | Run all server and client tests |
-| `test:server` | `npm run test:server` | Run server integration tests only |
-| `test:client` | `npm run test:client` | Run client unit tests only |
-| `format` | `npm run format` | Format all files with Prettier |
-| `format:check` | `npm run format:check` | Check formatting without writing |
-
----
-
-## Makefile targets
-
-All npm scripts are mirrored as `make` targets for convenience. Run `make help` to list them:
-
-```bash
-make help
-```
-
-Commonly used targets:
-
-| Make target | Equivalent npm command | Description |
-|---|---|---|
-| `make setup` | `npm run setup` | Install all dependencies (root + client) |
-| `make dev` | `npm run dev` | Start server + client in watch mode |
-| `make build` | `npm run build` | Build the React client for production |
-| `make start` | `npm start` | Start the production server |
-| `make prod` | `npm run build && npm start` | Build then start in one step |
-| `make test` | `npm test` | Run all tests (server + client) |
-| `make test-server` | `npm run test:server` | Run server tests only |
-| `make test-client` | `npm run test:client` | Run client tests only |
-| `make format` | `npm run format` | Format all files with Prettier |
-| `make format-check` | `npm run format:check` | Check formatting without writing |
-| `make seed` | `npm run seed` | Load demo data |
-| `make clear-data` | `npm run clear-data` | Delete all data rows |
-
----
-
-## Troubleshooting
-
-### `better-sqlite3` errors during `npm install` / `npm run setup`
-
-These warnings are **harmless**. `better-sqlite3` is an optional dependency — if it cannot compile, npm skips it and the server falls back to Node.js built-in `node:sqlite` (available on Node 22+).
-
-You do **not** need Python, Visual Studio Build Tools, or any C++ compiler to run this project on Node 22+.
-
-If you are on Node 20 or 21 and `better-sqlite3` prebuilds are not available for your platform (there is no `node:sqlite` fallback below Node 22), you have two options:
-
-1. **Upgrade to Node.js 22+** — the built-in `node:sqlite` fallback requires no native compilation at all
-2. **Install build tools** and run `npm rebuild better-sqlite3`:
-   - **Windows:** install [Visual Studio Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/) with the C++ workload
-   - **macOS:** `xcode-select --install`
-   - **Linux:** `sudo apt install python3 make g++` (Debian/Ubuntu)
-
-### "SQLite backend not available" error on startup
-
-This means neither `better-sqlite3` nor `node:sqlite` could be loaded. The most common cause is running Node.js < 22 without `better-sqlite3` prebuilds. Upgrade to Node.js 22+ to resolve this.
-
-### Database is locked / busy errors
-
-The SQLite database uses WAL mode with a 5-second busy timeout. If you see lock errors:
-
-- Ensure only one dashboard server instance is running
-- Check for zombie `node server/index.js` processes: `ps aux | grep server/index`
-- Delete `data/dashboard.db-wal` and `data/dashboard.db-shm` if the server was killed uncleanly, then restart
-
----
-
-### The run console won't start a run / the terminal never attaches
-
-Runs are tmux-backed: the server executes the `tmux` binary and has no fallback.
-
-```bash
-tmux -V                                               # missing → sudo apt install tmux
-curl -s http://localhost:4820/api/run/tmux            # {"available":true}
-curl -s "http://localhost:4820/api/run/binary?tool=claude"   # {"found":true,"path":"…"}
-```
-
-`{"available":false}` while your own shell finds tmux means the **server's**
-`PATH` differs from yours — typically a systemd `--user` service, which never
-reads your shell profile. Install tmux system-wide (`/usr/bin/tmux`) and
-re-run `agenthub service uninstall && agenthub service install`. The same
-applies to `claude` / `codex`: a run launches them by name.
-
-Install instructions per OS: [INSTALL.md → Step 0](./INSTALL.md#step-0--system-packages).
-
----
-
-### No sessions appearing after starting Claude Code
-
-**Check 1 — Is the server running?**
-
-```bash
-curl http://localhost:4820/api/health
-# Expected: {"status":"ok","timestamp":"..."}
-```
-
-**Check 2 — Are hooks installed?**
-
-Open `~/.claude/settings.json` and confirm it contains a `hooks` section with entries referencing `hook-handler.js`. If not, run:
-
-```bash
-npm run install-hooks
-```
-
-**Check 3 — Did you start a new Claude Code session after the server started?**
-
-Hooks only apply to sessions started after installation. Restart Claude Code.
-
-**Check 4 — Is Node.js in PATH when Claude Code runs hooks?**
-
-On some systems, the shell environment when Claude Code fires hooks may not include the full PATH. Test with:
-
-```bash
-node --version
-```
-
-If Node.js is not found, use the full path to `node` in the hook command. Edit `scripts/install-hooks.js`, replace `node` with the absolute path (e.g. `/usr/local/bin/node`), and re-run `npm run install-hooks`.
-
----
-
-### Dashboard shows "Disconnected" in the sidebar
-
-The WebSocket connection to the server failed. Ensure the server is running:
-
-```bash
-npm run dev
-```
-
-The client will automatically reconnect every 2 seconds once the server is available.
-
----
-
-### Events Today shows 0 despite recent activity
-
-This was a known timezone bug (fixed in current version). If you are still seeing this, ensure you are running the latest code and restart the server.
-
----
-
-### Port 4820 already in use
-
-```bash
-DASHBOARD_PORT=4821 npm run dev
-```
-
-Then update the Vite proxy in `client/vite.config.ts`:
-
-```ts
-proxy: {
-  "/api": "http://localhost:4821",
-  "/ws":  { target: "ws://localhost:4821", ws: true }
-}
-```
-
-And make sure Claude Code posts hooks to the new port:
-
-```bash
-CLAUDE_DASHBOARD_PORT=4821 claude
-# or edit scripts/hook-handler.js and change the default port
-```
+This guide has moved into **[INSTALL.md](./INSTALL.md)** — the one install and
+setup guide (it and this file had grown into near-duplicates). Everything that
+was here is there:
+
+| Was in SETUP.md | Now in INSTALL.md |
+|---|---|
+| How it works | [How it works](./INSTALL.md#how-it-works) |
+| Hook auto-installation, environment variables, agent extensions, PWA | [Configuration](./INSTALL.md#configuration) |
+| Database (clear, Settings page, seed) | [Database](./INSTALL.md#database) |
+| Importing existing Claude Code history | [Step 5](./INSTALL.md#step-5--optional-importing-existing-claude-code-history) |
+| Scripts reference, Makefile targets | [Scripts reference](./INSTALL.md#scripts-reference) |
+| Troubleshooting (incl. "Port 4820 already in use") | [Troubleshooting](./INSTALL.md#troubleshooting) |

bin/agenthub.js

@@ -2845,18 +2845,18 @@ const COMMAND_GROUPS = [
       ],
       [
         "server",
-        "setup|off|status [--hostname name] [--admin name]",
+        "setup|install-system|tools|off|status [--hostname name] [--admin name]",
         "Server mode: logins for a shared dashboard (docs/SERVER-MODE.md)",
       ],
       [
         "users",
-        "list|add|passwd|role|disable|enable|assign|audit [name]",
+        "list|add|passwd|role|disable|enable|provision|assign|audit [name]",
         "Server mode's accounts (add: --role admin|analyst|developer)",
       ],
       [
         "accounts",
-        "list|add|remove [name] [--tool codex]",
-        "Claude/Codex account pool: new sessions spread over these accounts",
+        "list|add|remove [name]|pin <account> <user>|unpin <user> [--tool codex]",
+        "Claude/Codex account pool: new sessions spread over these accounts; pin = one user always on one",
       ],
       ["repl", "", "Open the interactive shell (also: shell, i)"],
     ],
@@ -3812,9 +3812,9 @@ const COMMANDS = (() => {
 const SUBCOMMANDS = {
   alerts: ["ack", "ack-all"],
   service: ["install", "uninstall", "status"],
-  server: ["setup", "off", "status"],
-  users: ["list", "add", "passwd", "role", "disable", "enable", "assign", "audit"],
-  accounts: ["list", "add", "remove"],
+  server: ["setup", "install-system", "tools", "off", "status"],
+  users: ["list", "add", "passwd", "role", "disable", "enable", "provision", "assign", "audit"],
+  accounts: ["list", "add", "remove", "pin", "unpin"],
   pricing: ["set", "delete", "reset"],
   webhooks: ["test"],
   import: ["rescan", "path"],
@@ -3905,7 +3905,7 @@ async function newPassword(label) {
   return first;
 }
 
-/** `agenthub server setup|off|status` — turn server mode on or off. */
+/** `agenthub server setup|install-system|tools|off|status` — turn server mode on or off. */
 async function cmdServer(sub, flags) {
   const { settingsEnv, auth } = serverAuth();
   const file = settingsEnv.settingsFilePath();
@@ -3934,21 +3934,73 @@ async function cmdServer(sub, flags) {
     } else {
       console.log(c.dim("  an admin already exists — add more with `agenthub users add`"));
     }
+    const wasServer = auth.isServerMode();
     settingsEnv.writeSetting("AGENTHUB_MODE", "server");
     envNote("AGENTHUB_MODE");
     console.log(`${c.green("✔")} server mode on (${file})`);
+    // One Linux user per account (S3) is the default on Linux: install it now
+    // (one sudo), unless it is already in place or `--no-system` opts out.
+    const linux = require(path.join(REPO_ROOT, "server", "lib", "linux-accounts.js"));
+    const shared = flags["no-system"] === true || process.platform !== "linux";
+    if (!shared) {
+      if (linux.serverConf()) {
+        console.log(c.dim("  one Linux user per account is already installed"));
+        // The system unit serves; it reads the mode only when it starts.
+        if (!wasServer) {
+          const r = spawnSync("sudo", [
+            "-n",
+            "systemctl",
+            "restart",
+            "--no-block",
+            "agenthub.service",
+          ]);
+          console.log(
+            r.status === 0
+              ? `${c.green("✔")} agenthub.service restarted`
+              : c.yellow("! restart it: sudo systemctl restart agenthub")
+          );
+        }
+      } else {
+        console.log("  Installing one Linux user per account (asks for your sudo password)…");
+        try {
+          await installSystem({}, settingsEnv);
+        } catch (e) {
+          throw new Error(
+            `${e.message}\n  Server mode is on, but every pane still runs as this account.` +
+              "\n  Fix it and run `agenthub server install-system`, or keep one shared" +
+              " account with `agenthub server setup --no-system`."
+          );
+        }
+      }
+      // The admin made above (and anyone made before) gets their Linux account.
+      process.env.AGENTHUB_MODE = "server";
+      await cmdUsers("provision", [], { all: true });
+    }
     console.log("  Next:");
     console.log(
-      "  1. Restart the dashboard: systemctl --user restart agenthub  (or agenthub start)"
+      shared
+        ? "  1. Restart the dashboard: systemctl --user restart agenthub  (or agenthub start)"
+        : "  1. Log out and back in once, so your shell joins the agenthub groups"
     );
     console.log(
       "  2. Serve it over HTTPS through a reverse proxy that keeps the Host header,\n" +
         "     and run setup with --hostname <that name> — see docs/SERVER-MODE.md."
     );
-    console.log(
-      c.dim("  Members see only their own workspaces, but every pane still runs as this")
-    );
-    console.log(c.dim("  one Linux account — use it with people you trust (docs/SERVER-MODE.md)."));
+    if (shared) {
+      console.log(
+        c.yellow(
+          process.platform === "linux"
+            ? "! --no-system: every pane runs as this one Linux account"
+            : "! one Linux user per account needs Linux: every pane runs as this one account"
+        )
+      );
+      console.log(
+        c.dim("  Members see only their own workspaces, but an agent in a pane can read")
+      );
+      console.log(
+        c.dim("  every user's files — use it with people you trust (docs/SERVER-MODE.md).")
+      );
+    }
     console.log(
       c.dim("  Workspaces made before now have no owner: agenthub users assign <id> <user>")
     );
@@ -3989,7 +4041,7 @@ async function cmdServer(sub, flags) {
   }
   console.error(
     c.red(
-      "✖ Usage: agenthub server setup [--hostname name] [--admin name] | install-system [--dry-run|--uninstall] | tools | off | status"
+      "✖ Usage: agenthub server setup [--hostname name] [--admin name] [--no-system] | install-system [--dry-run|--uninstall] | tools | off | status"
     )
   );
   process.exitCode = 1;
@@ -4010,7 +4062,7 @@ async function installSystem(flags, settingsEnv) {
     throw new Error("run this as the account that runs the dashboard, not as root (it uses sudo)");
   }
   const which = (bin) =>
-    spawnSync("sh", ["-c", `command -v ${bin}`], { encoding: "utf8" }).stdout.trim();
+    spawnSync("sh", ["-c", 'command -v "$1"', "sh", bin], { encoding: "utf8" }).stdout.trim();
   const host = os.userInfo().username;
   const { getDataDir } = require(path.join(REPO_ROOT, "server", "lib", "claude-home.js"));
   const data = getDataDir();
@@ -4114,14 +4166,25 @@ async function cmdUsers(sub, positional, flags) {
     case "list":
       table(
         ["id", "username", "role", "state"],
-        auth.listUsers().map((u) => [u.id, u.username, u.role, u.disabled ? "disabled" : "active"])
+        auth
+          .listUsers()
+          .map((u) => [
+            u.id,
+            u.username,
+            u.role,
+            u.disabled ? "disabled" : u.mustChangePassword ? "active (new password due)" : "active",
+          ])
       );
       return;
     case "add": {
       need();
       const role = typeof flags.role === "string" ? flags.role : "developer";
-      const user = await auth.createUser(name, await newPassword(`Password for ${name}`), role);
-      console.log(`${c.green("✔")} ${user.username} added (${user.role})`);
+      const user = await auth.createUser(name, await newPassword(`Password for ${name}`), role, {
+        mustChange: true,
+      });
+      console.log(
+        `${c.green("✔")} ${user.username} added (${user.role}) — they choose their own password at first login`
+      );
       return;
     }
     case "passwd":
@@ -4234,7 +4297,18 @@ async function cmdCodexAccounts(sub, name, flags) {
   }
   pool.resetQuota();
   table(
-    ["codex account", "kind", "live", "$ 5h", "$ 7d", "tok 5h", "tok 7d", "quota", "state"],
+    [
+      "codex account",
+      "kind",
+      "live",
+      "$ 5h",
+      "$ 7d",
+      "tok 5h",
+      "tok 7d",
+      "quota",
+      "state",
+      "pinned",
+    ],
     pool
       .poolStatus()
       .map((a) => [
@@ -4249,10 +4323,64 @@ async function cmdCodexAccounts(sub, name, flags) {
           ? a.quota.windows.map((w) => `${w.label} ${Math.round(w.usedPercent)}%`).join(" ")
           : "–",
         a.full ? "full" : "ok",
+        pinnedUsers("codex", a.name),
       ])
   );
 }
 
+/**
+ * `agenthub accounts pin <account> <user>` / `unpin <user>` [--tool codex] —
+ * that user's new sessions run on that account (server/lib/account-pins.js).
+ */
+async function cmdAccountPin(sub, positional, tool) {
+  const pins = require(path.join(REPO_ROOT, "server", "lib", "account-pins.js"));
+  const [first, second] = positional;
+  const username = sub === "pin" ? second : first;
+  if (!username || (sub === "pin" && !first)) {
+    throw new Error("usage: agenthub accounts pin <account> <user> | unpin <user> [--tool codex]");
+  }
+  const user = require(path.join(REPO_ROOT, "server", "db.js"))
+    .db.prepare("SELECT id FROM users WHERE username = ?")
+    .get(username);
+  if (!user) throw new Error(`no user ${username}`);
+  const pin = pins.setPin(user.id, tool, sub === "pin" ? first : null);
+  if (!require(path.join(REPO_ROOT, "server", "lib", "auth.js")).isServerMode()) {
+    console.log(c.dim("  Pins apply in server mode only."));
+  }
+  if (!pin.account) {
+    console.log(`${c.green("✔")} ${pin.username} unpinned — new ${tool} sessions use the balancer`);
+    return;
+  }
+  const switched = await pins.applyPin(user.id, tool);
+  console.log(`${c.green("✔")} ${pin.username}'s ${tool} sessions run on ${pin.account}`);
+  console.log(c.dim(`  ${SWITCH_NOTE[switched] || SWITCH_NOTE["next-session"]}`));
+}
+
+/** What `applyPin` did, for the CLI. */
+const SWITCH_NOTE = {
+  switched: "Switched now: running sessions take it at their next login check, new ones at once.",
+  kept: "Their home already holds it.",
+  "own-login":
+    "They signed in with their own login, which is left alone: no pool login is written over it.",
+  expired: "That login has expired: new sessions fall back to the balancer until it is re-added.",
+  "next-session": "New sessions use it; running ones keep their account until they end.",
+};
+
+/** The `pinned` column: who an admin pinned to `account`. */
+function pinnedUsers(tool, account) {
+  try {
+    return (
+      require(path.join(REPO_ROOT, "server", "lib", "account-pins.js"))
+        .listPins(tool)
+        .filter((p) => p.account === account)
+        .map((p) => p.username)
+        .join(",") || "–"
+    );
+  } catch {
+    return "–";
+  }
+}
+
 /** `agenthub accounts …` — the Claude account pool (server/lib/claude-pool.js). */
 async function cmdAccounts(sub, positional, flags = {}) {
   serverAuth(); // the same settings + database the server reads
@@ -4264,6 +4392,8 @@ async function cmdAccounts(sub, positional, flags = {}) {
   if (flags.tool != null && flags.tool !== "claude" && flags.tool !== "codex") {
     throw new Error("--tool is claude (the default) or codex");
   }
+  if (sub === "pin" || sub === "unpin")
+    return cmdAccountPin(sub, positional, flags.tool || "claude");
   if (flags.tool === "codex") return cmdCodexAccounts(sub, name, flags);
   if (sub === "add") {
     console.log(
@@ -4285,7 +4415,18 @@ async function cmdAccounts(sub, positional, flags = {}) {
     await pool.refreshQuotas({ force: true });
     const pct = (w) => (w?.utilization != null ? `${Math.round(w.utilization)}%` : "–");
     table(
-      ["account", "live", "$ 5h", "$ 7d", "tok 5h", "tok 7d", "quota 5h", "quota wk", "state"],
+      [
+        "account",
+        "live",
+        "$ 5h",
+        "$ 7d",
+        "tok 5h",
+        "tok 7d",
+        "quota 5h",
+        "quota wk",
+        "state",
+        "pinned",
+      ],
       pool
         .poolStatus()
         .map((a) => [
@@ -4304,6 +4445,7 @@ async function cmdAccounts(sub, positional, flags = {}) {
               : a.quota?.error
                 ? `no quota (${a.quota.error})`
                 : "ok",
+          pinnedUsers("claude", a.name),
         ])
     );
     const codex = require(path.join(REPO_ROOT, "server", "lib", "codex-pool.js"));
@@ -4311,7 +4453,9 @@ async function cmdAccounts(sub, positional, flags = {}) {
     return;
   }
   console.error(
-    c.red("✖ Usage: agenthub accounts list | add <name> | remove <name> [--tool codex]")
+    c.red(
+      "✖ Usage: agenthub accounts list | add <name> | remove <name> | pin <account> <user> | unpin <user> [--tool codex]"
+    )
   );
   process.exitCode = 1;
 }

client/package-lock.json

@@ -29,7 +29,7 @@
         "react-dom": "^18.3.1",
         "react-i18next": "^17.0.4",
         "react-markdown": "^10.1.0",
-        "react-router-dom": "^6.28.2",
+        "react-router-dom": "^7.18.4",
         "remark-gfm": "^4.0.1"
       },
       "devDependencies": {
@@ -1251,15 +1251,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@remix-run/router": {
-      "version": "1.23.4",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.4.tgz",
-      "integrity": "sha512-q7j5geK7xs3UJSdm9/iytUNclBnLmYx1EnSeCFXHPeutdqgIMeFeHtUZgS3EhlKxdBEAu8OwtJCwmLrEzpSs7Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -2740,6 +2731,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/crelt": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
@@ -5472,35 +5475,39 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.6",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.6.tgz",
-      "integrity": "sha512-5HfK7k5im7LTOB0EqCQmfvy4C13G92Ssj1VTmouTK3AJvyjKTnFuCV0vcMAD/JS+JC4DvDIBRrlAeJIFjh5VWg==",
-      "license": "MIT",
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.4.tgz",
+      "integrity": "sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==",
       "dependencies": {
-        "@remix-run/router": "1.23.4"
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.30.6",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.6.tgz",
-      "integrity": "sha512-0RHKZz7wwffvkU+2MFVT2NnjK44ssLEV+m0CAJaS2Ksmorrwj7WxH00jO0SOCW26/tINUnJHToXblDs33I38YQ==",
-      "license": "MIT",
+      "version": "7.18.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.4.tgz",
+      "integrity": "sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==",
       "dependencies": {
-        "@remix-run/router": "1.23.4",
-        "react-router": "6.30.6"
+        "react-router": "7.18.4"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       },
       "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
+        "react": ">=18",
+        "react-dom": ">=18"
       }
     },
     "node_modules/read-cache": {
@@ -5766,6 +5773,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="
+    },
     "node_modules/siginfo": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",

client/package.json

@@ -32,7 +32,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^17.0.4",
     "react-markdown": "^10.1.0",
-    "react-router-dom": "^6.28.2",
+    "react-router-dom": "^7.18.4",
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {

client/src/App.tsx

@@ -89,7 +89,9 @@ const SnapshotView = lazy(() =>
   import("./pages/SnapshotView").then((m) => ({ default: m.SnapshotView }))
 );
 const FilesPage = lazy(() => import("./pages/FilesPage").then((m) => ({ default: m.FilesPage })));
-const Users = lazy(() => import("./pages/Users").then((m) => ({ default: m.Users })));
+const Administration = lazy(() =>
+  import("./pages/Administration").then((m) => ({ default: m.Administration }))
+);
 const Artifacts = lazy(() => import("./pages/Artifacts").then((m) => ({ default: m.Artifacts })));
 
 function PageFallback() {
@@ -237,13 +239,15 @@ export default function App() {
               }
             />
             <Route
-              path="users"
+              path="admin"
               element={
                 <Page>
-                  <Users />
+                  <Administration />
                 </Page>
               }
             />
+            {/* The Users page became Administration's first tab. */}
+            <Route path="users" element={<Navigate to="/admin" replace />} />
             <Route
               path="settings/*"
               element={

client/src/components/AuthCard.tsx

@@ -0,0 +1,64 @@
+/**
+ * @file AuthCard.tsx
+ * @description The card the signed-out screens share (the login page, the
+ * first-login password change in `FirstPasswordPage.tsx`): a centred form
+ * with the theme's accent glow and grid behind the brand logo, a title and a
+ * subtitle. While it shows, the OS's light/dark applies (`applySystemTheme`),
+ * since no account's theme has been chosen for it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useLayoutEffect, type FormEvent, type ReactNode } from "react";
+import { BRAND_LOGO } from "../lib/brand";
+import { applySystemTheme } from "../hooks/useTheme";
+
+export function AuthCard({
+  title,
+  subtitle,
+  onSubmit,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  onSubmit: (e: FormEvent) => void;
+  children: ReactNode;
+}) {
+  // Follow the OS, live.
+  useLayoutEffect(() => {
+    applySystemTheme();
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mq?.addEventListener?.("change", applySystemTheme);
+    return () => mq?.removeEventListener?.("change", applySystemTheme);
+  }, []);
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
+      <form
+        onSubmit={onSubmit}
+        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
+      >
+        {/* Accent glow and a grid fading out from the top, drawn from the
+            theme's own accent so it holds in every theme. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-x-0 top-0 h-56"
+          style={{
+            backgroundImage:
+              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
+            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
+            backgroundPosition: "center top",
+            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
+          }}
+        />
+        <div className="relative space-y-5">
+          <div className="text-center">
+            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
+            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">{title}</h1>
+            <p className="mt-2 text-sm text-fg-secondary">{subtitle}</p>
+          </div>
+          {children}
+        </div>
+      </form>
+    </main>
+  );
+}

client/src/components/AuthGate.tsx

@@ -11,7 +11,9 @@
  * `usePermissions()` says what that user's role may do, so pages hide the rest.
  * Once an account is known (local mode is one), its own UI preferences are
  * loaded into this browser (`lib/userPrefs.ts`).
- * The login page follows the OS's light/dark (`applySystemTheme`).
+ * The login page follows the OS's light/dark (`AuthCard`). An account whose
+ * password an admin gave (`mustChangePassword`) sees only
+ * `FirstPasswordPage` until it picks its own.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -20,15 +22,14 @@ import {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useState,
   type FormEvent,
   type ReactNode,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Eye, EyeOff } from "lucide-react";
-import { BRAND_LOGO } from "../lib/brand";
-import { applySystemTheme } from "../hooks/useTheme";
+import { AuthCard } from "./AuthCard";
+import { FirstPasswordPage } from "./FirstPasswordPage";
 import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
 import { hydrate } from "../lib/userPrefs";
 
@@ -165,6 +166,17 @@ export function AuthGate({ children }: { children: ReactNode }) {
     await api.auth.logout().catch(() => {});
     setState({ mode: "server", user: null });
   };
+  // A password an admin gave: nothing else until the user picks their own
+  // (the server refuses the rest anyway — EPWCHANGE).
+  if (state.mode === "server" && state.user?.mustChangePassword) {
+    return (
+      <FirstPasswordPage
+        user={state.user}
+        onDone={() => updateUser({ mustChangePassword: false })}
+        onLogout={() => void logout()}
+      />
+    );
+  }
   return (
     <AuthContext.Provider value={{ state, logout, updateUser }}>{children}</AuthContext.Provider>
   );
@@ -178,14 +190,6 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Nobody is signed in, so no account's theme applies: follow the OS, live.
-  useLayoutEffect(() => {
-    applySystemTheme();
-    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
-    mq?.addEventListener?.("change", applySystemTheme);
-    return () => mq?.removeEventListener?.("change", applySystemTheme);
-  }, []);
-
   const submit = async (e: FormEvent) => {
     e.preventDefault();
     setBusy(true);
@@ -201,86 +205,60 @@ function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
     }
   };
 
+  // Nobody is signed in, so no account's theme applies: AuthCard follows the OS.
   return (
-    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
-      <form
-        onSubmit={submit}
-        className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
-      >
-        {/* Accent glow and a grid fading out from the top, drawn from the
-            theme's own accent so it holds in every theme. */}
-        <div
-          aria-hidden
-          className="pointer-events-none absolute inset-x-0 top-0 h-56"
-          style={{
-            backgroundImage:
-              "linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
-            backgroundSize: "48px 48px, 48px 48px, 100% 100%",
-            backgroundPosition: "center top",
-            maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
-          }}
+    <AuthCard title={t("auth.title")} subtitle={t("auth.subtitle")} onSubmit={submit}>
+      <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
+        <span>{t("auth.username")}</span>
+        <input
+          className="input h-11 w-full px-4"
+          autoComplete="username"
+          autoFocus
+          required
+          placeholder={t("auth.username")}
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
         />
-        <div className="relative space-y-5">
-          <div className="text-center">
-            <img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
-            <h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">
-              {t("auth.title")}
-            </h1>
-            <p className="mt-2 text-sm text-fg-secondary">{t("auth.subtitle")}</p>
-          </div>
-          <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
-            <span>{t("auth.username")}</span>
-            <input
-              className="input h-11 w-full px-4"
-              autoComplete="username"
-              autoFocus
-              required
-              placeholder={t("auth.username")}
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-            />
-          </label>
-          <div className="space-y-1.5 text-sm font-medium text-fg-primary">
-            <label htmlFor="login-password">{t("auth.password")}</label>
-            <div className="relative">
-              <input
-                id="login-password"
-                className="input h-11 w-full pl-4 pr-11"
-                type={showPassword ? "text" : "password"}
-                autoComplete="current-password"
-                required
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword((v) => !v)}
-                aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
-                aria-pressed={showPassword}
-                className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-              >
-                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-              </button>
-            </div>
-          </div>
-          {error && (
-            <p role="alert" className="text-sm text-status-danger">
-              {error}
-            </p>
-          )}
-          {/* Inverted fill (text colour behind the surface colour): black in a
-              light theme, light in a dark one, like the reference design. */}
+      </label>
+      <div className="space-y-1.5 text-sm font-medium text-fg-primary">
+        <label htmlFor="login-password">{t("auth.password")}</label>
+        <div className="relative">
+          <input
+            id="login-password"
+            className="input h-11 w-full pl-4 pr-11"
+            type={showPassword ? "text" : "password"}
+            autoComplete="current-password"
+            required
+            placeholder="••••••••"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
           <button
-            type="submit"
-            className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
-            disabled={busy}
+            type="button"
+            onClick={() => setShowPassword((v) => !v)}
+            aria-label={showPassword ? t("auth.hidePassword") : t("auth.showPassword")}
+            aria-pressed={showPassword}
+            className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-lg text-fg-muted hover:text-fg-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
           >
-            {busy ? t("auth.submitting") : t("auth.submit")}
+            {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
           </button>
-          <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
         </div>
-      </form>
-    </main>
+      </div>
+      {error && (
+        <p role="alert" className="text-sm text-status-danger">
+          {error}
+        </p>
+      )}
+      {/* Inverted fill (text colour behind the surface colour): black in a
+              light theme, light in a dark one, like the reference design. */}
+      <button
+        type="submit"
+        className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={busy}
+      >
+        {busy ? t("auth.submitting") : t("auth.submit")}
+      </button>
+      <p className="text-center text-sm text-fg-secondary">{t("auth.noAccount")}</p>
+    </AuthCard>
   );
 }

client/src/components/ContextMenu.tsx

@@ -165,12 +165,15 @@ export function MenuItem({
   danger,
   disabled,
   testId,
+  title,
   children,
 }: {
   onSelect: () => void;
   danger?: boolean;
   disabled?: boolean;
   testId?: string;
+  /** Hover text — e.g. why a disabled item cannot run. */
+  title?: string;
   children: ReactNode;
 }) {
   return (
@@ -179,6 +182,7 @@ export function MenuItem({
       role="menuitem"
       data-testid={testId}
       disabled={disabled}
+      title={title}
       className={`${MENU_ITEM}${danger ? " !text-status-danger" : ""}`}
       onClick={onSelect}
     >

client/src/components/FirstPasswordPage.tsx

@@ -0,0 +1,110 @@
+/**
+ * @file FirstPasswordPage.tsx
+ * @description The screen an account signed in with a password an admin GAVE
+ * (created or reset on the Users page — `mustChangePassword`) sees instead of
+ * the app: the current password, a new one that must pass every rule (the
+ * `PasswordRules` checklist ticks them as they are typed) and the same again,
+ * sent to `POST /api/me/password`. On success the app opens; "Sign out"
+ * leaves. The server refuses every other request meanwhile (EPWCHANGE).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState, type FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type AuthUser } from "../lib/api";
+import { passwordProblems } from "../lib/passwordRules";
+import { AuthCard } from "./AuthCard";
+import { PasswordRules } from "./users/PasswordRules";
+
+export function FirstPasswordPage({
+  user,
+  onDone,
+  onLogout,
+}: {
+  user: AuthUser;
+  onDone: () => void;
+  onLogout: () => void;
+}) {
+  const { t } = useTranslation();
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [again, setAgain] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const mismatch = again.length > 0 && again !== next;
+  const strong = passwordProblems(next, user.username).length === 0;
+  const ready = current.length > 0 && strong && again === next && !busy;
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!ready) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.me.changePassword(current, next);
+      onDone();
+    } catch (err) {
+      const code = (err as { code?: string }).code;
+      setError(
+        code && t(`users:errors.${code}`, { defaultValue: "" })
+          ? t(`users:errors.${code}`)
+          : (err as Error).message
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const field = (
+    label: string,
+    value: string,
+    set: (v: string) => void,
+    autoComplete: string,
+    autoFocus = false
+  ) => (
+    <label className="block space-y-1.5 text-sm font-medium text-fg-primary">
+      <span>{label}</span>
+      <input
+        type="password"
+        className="input h-11 w-full px-4"
+        autoComplete={autoComplete}
+        autoFocus={autoFocus}
+        required
+        value={value}
+        onChange={(e) => set(e.target.value)}
+      />
+    </label>
+  );
+
+  return (
+    <AuthCard
+      title={t("auth.mustChangeTitle")}
+      subtitle={t("auth.mustChangeSubtitle")}
+      onSubmit={submit}
+    >
+      {field(t("auth.currentPassword"), current, setCurrent, "current-password", true)}
+      {field(t("auth.newPassword"), next, setNext, "new-password")}
+      <PasswordRules password={next} username={user.username} />
+      {field(t("auth.confirmPassword"), again, setAgain, "new-password")}
+      {(mismatch || error) && (
+        <p role="alert" className="text-sm text-status-danger">
+          {error ?? t("auth.mismatch")}
+        </p>
+      )}
+      <button
+        type="submit"
+        className="h-11 w-full rounded-xl bg-fg-primary text-sm font-medium text-surface-0 shadow-sm transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50"
+        disabled={!ready}
+      >
+        {busy ? t("auth.saving") : t("auth.mustChangeSubmit")}
+      </button>
+      <button
+        type="button"
+        className="block w-full text-center text-sm text-fg-secondary hover:text-fg-primary"
+        onClick={onLogout}
+      >
+        {t("auth.logout")}
+      </button>
+    </AuthCard>
+  );
+}

client/src/components/ImageLightbox.tsx

@@ -4,12 +4,14 @@
  * Escape closes it. Rendered into `document.body`, so no pane, its stacking
  * layer or a header drawn over a pane can cover it — opened from inside a
  * pane's Chat view, a `fixed` overlay would otherwise stay in that pane's
- * layer, under anything stacked above it.
+ * layer, under anything stacked above it. `useDialog` takes the focus while it
+ * is open and gives it back, and its Escape closes only this, the top dialog.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect } from "react";
+import { useRef } from "react";
 import { createPortal } from "react-dom";
+import { useDialog } from "../hooks/useDialog";
 
 export function ImageLightbox({
   src,
@@ -20,18 +22,18 @@ export function ImageLightbox({
   alt: string;
   onClose: () => void;
 }) {
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  const panel = useRef<HTMLDivElement>(null);
+  useDialog(true, panel, onClose);
   return createPortal(
     <div
+      ref={panel}
+      tabIndex={-1}
       role="dialog"
+      aria-modal="true"
       aria-label={alt}
       data-testid="image-lightbox"
       onClick={onClose}
-      className="fixed inset-0 z-[200] flex cursor-zoom-out items-center justify-center bg-black/60 p-8"
+      className="fixed inset-0 z-[200] flex cursor-zoom-out items-center justify-center bg-black/60 p-8 outline-none"
     >
       <img
         src={src}

client/src/components/ImportHistory.tsx

@@ -82,6 +82,7 @@ import { api, type ImportResult, type ImportBackupResult } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import type { WSMessage, ImportProgressMessage } from "../lib/types";
 import { PathPickButton } from "./PathPickButton";
+import { copyText } from "../lib/clipboard";
 
 type Mode = "rescan" | "path" | "upload" | "backup";
 
@@ -247,13 +248,9 @@ export function ImportHistory() {
 
   const copyArchiveCmd = async () => {
     if (!guide) return;
-    try {
-      await navigator.clipboard.writeText(guide.archive_command);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      /* clipboard unavailable */
-    }
+    if (!(await copyText(guide.archive_command, true))) return;
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
   };
 
   const progressText = (() => {

client/src/components/Layout.tsx

@@ -76,7 +76,7 @@
  *
  * ----------------------------------------------------------------------------- */
 
-import { useState, useCallback, useEffect, useSyncExternalStore } from "react";
+import { lazy, Suspense, useState, useCallback, useEffect, useSyncExternalStore } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { Menu } from "lucide-react";
 import { useTranslation } from "react-i18next";
@@ -85,9 +85,15 @@ import { UpdateNotifier } from "./UpdateNotifier";
 import { InterruptedSessionsPrompt } from "./lanes/InterruptedSessionsPrompt";
 import { SagiMount } from "./Sagi/SagiMount";
 import { StatusBar } from "./StatusBar";
-import { OnboardingWizard } from "./onboarding/OnboardingWizard";
+import { useOnboarding } from "../lib/userPrefs";
 import { OnboardingTour } from "./onboarding/OnboardingTour";
 
+// Loaded only for an account that has not finished onboarding: the wizard
+// carries the appearance, pet and notification settings screens.
+const OnboardingWizard = lazy(() =>
+  import("./onboarding/OnboardingWizard").then((m) => ({ default: m.OnboardingWizard }))
+);
+
 const WIDTH_KEY = "agenthub.sidebar.width";
 /** The default width, and the narrowest the edge drags to. */
 export const SIDEBAR_MIN = 240;
@@ -136,6 +142,7 @@ export function Layout({ wsConnected }: LayoutProps) {
   const { t } = useTranslation("nav");
   const [collapsed, setCollapsed] = useState(loadCollapsed);
   const [connectionOpen, setConnectionOpen] = useState(false);
+  const onboarding = useOnboarding();
   const [updateAvailable, setUpdateAvailable] = useState(false);
   const drawer = useMedia(DRAWER_QUERY);
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -177,7 +184,11 @@ export function Layout({ wsConnected }: LayoutProps) {
       <UpdateNotifier />
       <InterruptedSessionsPrompt />
       <SagiMount />
-      <OnboardingWizard />
+      {onboarding.loaded && !onboarding.onboardedAt && (
+        <Suspense fallback={null}>
+          <OnboardingWizard />
+        </Suspense>
+      )}
       <OnboardingTour />
       {drawer && drawerOpen && (
         <div

client/src/components/RemoteSources.tsx

@@ -88,6 +88,7 @@ import { isRemoteDataRefreshMessage } from "../lib/remoteDataEvents";
 import { useDataScope } from "../lib/dataScope";
 import type { ScopeMode } from "../lib/dataScope";
 import { PathPickButton } from "./PathPickButton";
+import { copyText } from "../lib/clipboard";
 
 /** Data-scope choices in display order (the radio group's arrow-key order). */
 const SCOPE_MODES: ScopeMode[] = ["all", "local", "selected"];
@@ -863,7 +864,7 @@ export function RemoteSources() {
                   : t("remoteSources.enable", "Enable")}
               </MenuItem>
               <MenuItem onSelect={pick(openEdit)}>{t("common:edit", "Edit")}</MenuItem>
-              <MenuItem onSelect={pick((s) => void navigator.clipboard.writeText(s.host))}>
+              <MenuItem onSelect={pick((s) => void copyText(s.host))}>
                 {t("rowMenu.copyHost")}
               </MenuItem>
               <MenuSeparator />

client/src/components/Sagi/PetChat.tsx

@@ -1,7 +1,11 @@
 /**
  * @file PetChat.tsx
- * @description The pet's chat window. A question its Ask box cannot answer
- * locally opens here instead of leaving the page: the first message starts a
+ * @description The pet's chat window — its whole UI: clicking the pet opens
+ * it. Above the conversation sits what the pet knows (`info`: live / waiting /
+ * errored, the sessions that need you, Mute, Clear alerts — `SagiInfo.tsx`).
+ * Before a chat runs, a question the pet can answer itself (`onLocal`: status,
+ * who are you…) is answered right here; anything else — and every message once
+ * a chat runs — goes to the AI: the first message starts a
  * session of the user's DEFAULT AI tool (`agenthub.defaultTool`, Claude or
  * Codex — the two with a readable transcript) in the "Sagi" workspace, in its
  * first free tab (`startInFreeTabDetailed`), and the conversation is shown as
@@ -11,16 +15,17 @@
  * attached pane, exactly like the workspace's own Chat view), so nothing new
  * reaches the server. A menu the CLI asks with (a permission or trust prompt)
  * is read off that pane and answered with `PaneMenuCard`. The chat is kept in
- * `localStorage` (`agenthub.pet.chat`) while its pane lives; **New chat**
- * forgets it (the session stays in the workspace), **Open in workspace**
+ * `localStorage` (`agenthub.pet.chat`) while its pane lives, so closing and
+ * reopening the window continues it; **New chat** STOPS that session (kills
+ * its pane and archives it, asking first only mid-reply), **Open in workspace**
  * opens its pane there. Opening never resumes an ended session: once the pane
  * is gone, the next message starts a new one.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
+import { useCallback, useEffect, useRef, useState, type FormEvent, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowLeft, ArrowUp, ExternalLink, Loader2, SquarePen, Wrench, X } from "lucide-react";
+import { ArrowUp, ExternalLink, Loader2, SquarePen, Wrench, X } from "lucide-react";
 import { api } from "../../lib/api";
 import type { TranscriptMessage } from "../../lib/types";
 import { readDefaultMode, readDefaultTool } from "../../lib/sessionDefaults";
@@ -29,10 +34,13 @@ import {
   chooseRunOption,
   interruptRun,
   readRunMenu,
+  stepRunMenu,
   submitToRun,
   type PaneMenu,
 } from "../../lib/panePaste";
 import { isSubmitEnter } from "../../lib/keys";
+import { confirmDialog } from "../../lib/confirm";
+import { toast } from "../../lib/toast";
 import { startInFreeTabDetailed } from "../lanes/startSession";
 import { TerminalView } from "../run/TerminalView";
 import { PaneMenuCard } from "../run/PaneChat";
@@ -141,14 +149,21 @@ function toolSummary(names: string[]): string {
   return [...counts].map(([n, c]) => (c > 1 ? `${n} ×${c}` : n)).join(" · ");
 }
 
+/** What the container made of a message: an answer the pet gives itself, or
+ *  `handled` (it took the message elsewhere); null sends it to the AI. */
+export type PetLocalReply = { answer: string } | { handled: true } | null;
+
 interface PetChatProps {
   /** The pet's shown name, for the header and greeting. */
   name: string;
-  /** A question to send as soon as the chat opens (the Ask box's handoff). */
-  initialPrompt?: string | null;
-  /** Called once the initial prompt has been taken, so a re-render never sends it twice. */
-  onPromptTaken?: () => void;
-  onBack: () => void;
+  /** Shown in place of the plain name (the rename button). */
+  title?: ReactNode;
+  /** Extra header buttons, before Open in workspace (the pat heart). */
+  headerActions?: ReactNode;
+  /** Under the header: what the pet knows (status, sessions that need you). */
+  info?: ReactNode;
+  /** Asked first while no chat runs. */
+  onLocal?: (text: string) => PetLocalReply;
   onClose: () => void;
   /** Opens the chat's pane in its workspace. */
   onOpenWorkspace: (laneId: number, runId: string) => void;
@@ -158,9 +173,10 @@ interface PetChatProps {
 
 export function PetChat({
   name,
-  initialPrompt,
-  onPromptTaken,
-  onBack,
+  title,
+  headerActions,
+  info,
+  onLocal,
   onClose,
   onOpenWorkspace,
   onBusy,
@@ -175,6 +191,8 @@ export function PetChat({
   const [error, setError] = useState<string | null>(null);
   const [draft, setDraft] = useState("");
   const [menu, setMenu] = useState<PaneMenu | null>(null);
+  // The pet's own answers, given before any chat ran.
+  const [local, setLocal] = useState<Line[]>([]);
   const listRef = useRef<HTMLDivElement>(null);
 
   const remember = (ref: PetChatRef | null) => {
@@ -248,7 +266,7 @@ export function PetChat({
     return () => window.clearInterval(timer);
   }, [chat]);
 
-  const lines = chatLines(messages);
+  const lines = [...local, ...chatLines(messages)];
   // The pending line shows until the transcript has it.
   useEffect(() => {
     if (pending && lines.some((l) => l.role === "user" && l.text === pending.trim()))
@@ -269,6 +287,19 @@ export function PetChat({
       const prompt = text.trim();
       if (!prompt || starting) return;
       setError(null);
+      if (!chat && onLocal) {
+        const reply = onLocal(prompt);
+        if (reply && "handled" in reply) return;
+        if (reply) {
+          const n = Date.now();
+          setLocal((prev) => [
+            ...prev,
+            { key: `lu${n}`, role: "user", text: prompt },
+            { key: `la${n}`, role: "assistant", text: reply.answer },
+          ]);
+          return;
+        }
+      }
       setPending(prompt);
       if (chat) {
         // Typed into the attached pane; it may still be attaching.
@@ -288,7 +319,7 @@ export function PetChat({
         const r = await startInFreeTabDetailed(lane.id, {
           prompt,
           ...(tool !== lane.tool ? { tool } : {}),
-          ...(tool === "claude" ? { permissionMode: readDefaultMode() } : {}),
+          ...(tool === "claude" ? { permissionMode: readDefaultMode({ safe: true }) } : {}),
         });
         remember({ laneId: r.laneId, runId: r.runId, tool });
       } catch (err) {
@@ -302,17 +333,35 @@ export function PetChat({
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [chat, starting, t]
+    [chat, starting, t, onLocal]
   );
 
-  // The Ask box's question, sent once.
-  const taken = useRef(false);
-  useEffect(() => {
-    if (!initialPrompt || taken.current) return;
-    taken.current = true;
-    onPromptTaken?.();
-    void send(initialPrompt);
-  }, [initialPrompt, onPromptTaken, send]);
+  // New chat: the old one's session is stopped, not left running unseen —
+  // asking first only while it is still writing a reply.
+  const newChat = async () => {
+    if (chat) {
+      if (
+        busy &&
+        !(await confirmDialog({
+          title: t("sagi.chat.endTitle"),
+          message: t("sagi.chat.endBody"),
+          confirmLabel: t("sagi.chat.endConfirm"),
+          destructive: true,
+        }))
+      )
+        return;
+      try {
+        await api.run.kill(chat.runId, { archive: true });
+      } catch (err) {
+        toast.error(err);
+        return;
+      }
+    }
+    remember(null);
+    setLocal([]);
+    setPending(null);
+    setError(null);
+  };
 
   const submit = (e?: FormEvent) => {
     e?.preventDefault();
@@ -333,11 +382,11 @@ export function PetChat({
     >
       {/* header */}
       <div className="pet-chat-head flex items-center gap-1 px-2 py-2">
-        <IconButton label={t("sagi.chat.back")} onClick={onBack}>
-          <ArrowLeft size={16} />
-        </IconButton>
+        <span className="pl-1.5 text-base leading-none" aria-hidden>
+          🐾
+        </span>
         <div className="min-w-0 flex-1 px-1">
-          <div className="truncate text-sm font-semibold text-fg-primary">{name}</div>
+          {title ?? <div className="truncate text-sm font-semibold text-fg-primary">{name}</div>}
           <div className="flex items-center gap-1 text-[10px] uppercase tracking-wider text-fg-muted">
             <span
               className={`inline-block h-1.5 w-1.5 rounded-full ${
@@ -352,6 +401,7 @@ export function PetChat({
             {busy ? t("sagi.chat.typing") : toolLabel}
           </div>
         </div>
+        {headerActions}
         {chat && (
           <IconButton
             label={t("sagi.chat.openWorkspace")}
@@ -362,8 +412,8 @@ export function PetChat({
         )}
         <IconButton
           label={t("sagi.chat.new")}
-          onClick={() => remember(null)}
-          disabled={!chat || starting}
+          onClick={() => void newChat()}
+          disabled={(!chat && !local.length) || starting}
         >
           <SquarePen size={15} />
         </IconButton>
@@ -372,6 +422,8 @@ export function PetChat({
         </IconButton>
       </div>
 
+      {info}
+
       {/* conversation */}
       <div ref={listRef} className="flex-1 space-y-2 overflow-y-auto px-3 py-3">
         {empty && (
@@ -454,6 +506,9 @@ export function PetChat({
                 if (answerRunMenu(chat.runId, menu, text)) setMenu(null);
                 else setError(t("sagi.chat.notSent"));
               }}
+              onStep={(dir) => {
+                if (!stepRunMenu(chat.runId, dir)) setError(t("sagi.chat.notSent"));
+              }}
               onCancel={() => {
                 if (interruptRun(chat.runId)) setMenu(null);
                 else setError(t("sagi.chat.notSent"));
@@ -475,10 +530,9 @@ export function PetChat({
                   e.preventDefault();
                   submit();
                 } else if (e.key === "Escape") {
-                  // Esc leaves the chat for the panel, not the whole mascot.
                   e.stopPropagation();
                   e.nativeEvent.stopImmediatePropagation();
-                  onBack();
+                  onClose();
                 }
               }}
             />

client/src/components/Sagi/Sagi.tsx

@@ -5,17 +5,20 @@
  *   enabled; `Sagi` gates on the same preference itself, and the body (brain,
  *   tick, WS reducer) runs only while it is on. Persists across routes and
  *   shares the single WebSocket.
- *   Owns the open/closed panel state, the ⌘B / Esc shortcuts, reduced-motion
+ *   Clicking the pet opens its chat window (`PetChat`), which is its whole UI:
+ *   the status strip (`SagiInfo`) sits on top, a question the pet can answer
+ *   itself is answered there, anything else goes to the AI.
+ *   Owns the open/closed chat state, the ⌘B / Esc shortcuts, reduced-motion
  *   detection, and route navigation. Reactive personality + status/Ask come
  *   from useSagiBrain; the avatar is draggable (AssistiveTouch-style) via
  *   useSagiPosition (a v2 Codex pet also looks toward the pointer), and the
  *   bubble/panel render in a self-clamping flyout so
  *   they never spill off any screen edge regardless of where the mascot is docked.
  *
- *   The "do the job" path: an unmatched Ask query starts a claude session in
- *   the "Sagi" workspace carrying it as the first prompt, then opens that
- *   workspace's session view (`/workspace?lane=<id>&run=<runId>`) — no new LLM
- *   backend. ⌘B/Ctrl+B is taken only while the mascot is shown and focus is not
+ *   The "do the job" path: an unmatched question is the chat's — it starts a
+ *   session of the default AI tool in the "Sagi" workspace; a default tool the
+ *   chat cannot read back starts there and its session view opens
+ *   (`/workspace?lane=<id>&run=<runId>`) — no new LLM backend. ⌘B/Ctrl+B is taken only while the mascot is shown and focus is not
  *   in an editable field (a terminal's Ctrl+B is tmux's prefix).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -39,7 +42,7 @@
  * ## Internal dependencies
  * - `./SagiAvatar`
  * - `./SpeechBubble`
- * - `./SagiPanel`
+ * - `./SagiInfo`
  * - `./useSagiBrain`
  * - `./useSagiPosition`
  * - `./intents`
@@ -78,12 +81,13 @@ import {
 } from "react";
 import { useNavigate } from "react-router-dom";
 import { useSettingsHref } from "../../lib/settingsLink";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion";
 import { useTranslation } from "react-i18next";
 import { SagiAvatar } from "./SagiAvatar";
 import { PetSprite } from "./PetSprite";
 import { PetMenu } from "./PetMenu";
 import { SpeechBubble } from "./SpeechBubble";
-import { SagiPanel } from "./SagiPanel";
+import { PetNameButton, SagiInfo } from "./SagiInfo";
 import { useSagiBrain } from "./useSagiBrain";
 import { useSagiPosition } from "./useSagiPosition";
 import { useSagiEnabled } from "./SagiMount";
@@ -94,7 +98,8 @@ import { api } from "../../lib/api";
 import { readDefaultTool } from "../../lib/sessionDefaults";
 import { startInFreeTabDetailed } from "../lanes/startSession";
 import { workspaceHref } from "../SessionRowMenu";
-import { PetChat, petChatTool } from "./PetChat";
+import { Heart } from "lucide-react";
+import { PetChat, petChatTool, type PetLocalReply } from "./PetChat";
 
 // Stroking: this many left/right turns of the pointer over the pet, within
 // STROKE_MS and with no button held, is a pat; then a pause before the next.
@@ -126,23 +131,6 @@ interface Anchor {
   dragging: boolean;
 }
 
-/** The OS "reduce motion" preference, followed live. */
-export function usePrefersReducedMotion(): boolean {
-  const [reduced, setReduced] = useState(
-    () =>
-      typeof window !== "undefined" &&
-      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
-  );
-  useEffect(() => {
-    const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
-    if (!mq) return;
-    const onChange = () => setReduced(mq.matches);
-    mq.addEventListener?.("change", onChange);
-    return () => mq.removeEventListener?.("change", onChange);
-  }, []);
-  return reduced;
-}
-
 /**
  * Fixed-position wrapper that places its content next to the avatar and clamps
  * it inside the viewport. It measures itself (and re-measures on content/size
@@ -241,10 +229,8 @@ function SagiBody() {
   // The name it goes by: the user's nickname, the pet's own, else Sagi.
   const [name, setName] = useState(() => petName(sagiPrefs.getPet()));
   const [size, setSize] = useState(() => sagiPrefs.getSize());
+  // The chat window (PetChat.tsx): the pet's whole UI.
   const [open, setOpen] = useState(false);
-  // The chat window (PetChat.tsx), and the Ask question it should send.
-  const [chatOpen, setChatOpen] = useState(false);
-  const [chatPrompt, setChatPrompt] = useState<string | null>(null);
   // The right-click pet menu (`PetMenu.tsx`).
   const [menu, setMenu] = useState(false);
   const [hover, setHover] = useState(false);
@@ -296,7 +282,6 @@ function SagiBody() {
         setOpen((v) => !v);
       } else if (e.key === "Escape") {
         setOpen(false);
-        setChatOpen(false);
       }
     };
     window.addEventListener("keydown", onKey);
@@ -346,7 +331,6 @@ function SagiBody() {
         navigate(workspaceHref(s, runs) ?? `/sessions/${encodeURIComponent(s.id)}`);
         brain.dismissBubble();
         setOpen(false);
-        setChatOpen(false);
       };
       api.run
         .list()
@@ -356,21 +340,17 @@ function SagiBody() {
     [brain, navigate]
   );
 
-  const onAsk = useCallback(
-    (query: string): string | null => {
+  // Asked by the chat before any session runs.
+  const onLocal = useCallback(
+    (query: string): PetLocalReply => {
       const result = matchIntent(query, brain.status, { name, attention: brain.attention });
       if (result.kind === "answer") {
         if (result.moment) brain.playMoment(result.moment);
-        return result.text;
-      }
-      // Handoff: a question the pet cannot answer goes to the chat window,
-      // which starts a session of the default AI tool and shows it as chat.
-      if (petChatTool()) {
-        setChatPrompt(result.prompt);
-        setOpen(false);
-        setChatOpen(true);
-        return null;
+        return { answer: result.text };
       }
+      // A question the pet cannot answer: the chat starts a session of the
+      // default AI tool and shows it as chat.
+      if (petChatTool()) return null;
       // A default tool the chat cannot read back (not Claude/Codex): start it
       // in the "Sagi" workspace and open its pane there, as before.
       const prompt = result.prompt;
@@ -392,7 +372,7 @@ function SagiBody() {
           brain.setThinking(false);
         }
       })();
-      return null;
+      return { handled: true };
     },
     [brain, navigate, t, name]
   );
@@ -431,46 +411,49 @@ function SagiBody() {
 
   return (
     <>
-      {/* The panel is too big to drag around, so it hides mid-drag. The bubble
-          does not - it is Sagi talking, and it has to stay by its mouth. */}
-      {!place.dragging && open && (
-        <SagiFlyout anchor={anchor}>
-          <SagiPanel
-            name={name}
-            ownName={"kind" in pet ? pet.name || "Sagi" : "Sagi"}
-            nickname={sagiPrefs.getNickname(pet.id)}
-            onRename={(next) => sagiPrefs.setNickname(pet.id, next)}
-            onPat={brain.pat}
-            attention={brain.attention}
-            onOpenSession={openSession}
-            status={brain.status}
-            muted={brain.muted}
-            onToggleMute={brain.toggleMute}
-            onClearAlerts={brain.clearAlerts}
-            onNavigate={onNavigate}
-            onAsk={onAsk}
-            onClose={() => setOpen(false)}
-          />
-        </SagiFlyout>
-      )}
-
       {/* Beside the pet, riding along with it mid-drag too (SagiFlyout follows
-          it 1:1), and kept mounted: unmounting would detach its terminal and
-          lose a half-typed message. */}
-      {chatOpen && (
+          it 1:1). Closing unmounts it; its chat is remembered, so reopening
+          re-attaches the same session. */}
+      {open && (
         <SagiFlyout anchor={anchor} beside>
           <PetChat
             name={name}
-            initialPrompt={chatPrompt}
-            onPromptTaken={() => setChatPrompt(null)}
-            onBack={() => {
-              setChatOpen(false);
-              setOpen(true);
-            }}
-            onClose={() => setChatOpen(false)}
+            title={
+              <PetNameButton
+                name={name}
+                ownName={"kind" in pet ? pet.name || "Sagi" : "Sagi"}
+                nickname={sagiPrefs.getNickname(pet.id)}
+                onRename={(next) => sagiPrefs.setNickname(pet.id, next)}
+              />
+            }
+            headerActions={
+              <button
+                type="button"
+                className="rounded-full p-1.5 text-fg-muted transition-colors hover:bg-surface-4 hover:text-status-danger"
+                onClick={brain.pat}
+                aria-label={t("sagi.panel.pat", { name })}
+                title={t("sagi.panel.pat", { name })}
+              >
+                <Heart size={15} />
+              </button>
+            }
+            info={
+              <SagiInfo
+                attention={brain.attention}
+                onOpenSession={openSession}
+                status={brain.status}
+                muted={brain.muted}
+                onToggleMute={brain.toggleMute}
+                onClearAlerts={brain.clearAlerts}
+                onNavigate={onNavigate}
+                defaultOpen={brain.attention.length > 0}
+              />
+            }
+            onLocal={onLocal}
+            onClose={() => setOpen(false)}
             onOpenWorkspace={(laneId, runId) => {
               navigate(`/workspace?lane=${laneId}&run=${encodeURIComponent(runId)}`);
-              setChatOpen(false);
+              setOpen(false);
             }}
             onBusy={onBusy}
           />
@@ -491,7 +474,7 @@ function SagiBody() {
         </SagiFlyout>
       )}
 
-      {!open && !menu && !chatOpen && brain.bubble && (
+      {!open && !menu && brain.bubble && (
         <SagiFlyout anchor={anchor}>
           <SpeechBubble
             bubble={brain.bubble}
@@ -519,18 +502,16 @@ function SagiBody() {
           // A drag just ended - swallow the synthetic click so the panel
           // doesn't toggle when the user only repositioned the avatar.
           if (place.consumeDrag()) return;
-          if (chatOpen) setChatOpen(false);
-          else setOpen((v) => !v);
+          setOpen((v) => !v);
         }}
         // Right-click: the pet menu (hide, size, choose, upload, import).
         onContextMenu={(e) => {
           e.preventDefault();
           setOpen(false);
-          setChatOpen(false);
           setMenu(true);
         }}
-        aria-label={open || chatOpen ? t("sagi.closeAvatar", { name }) : t("sagi.open", { name })}
-        aria-expanded={open || chatOpen}
+        aria-label={open ? t("sagi.closeAvatar", { name }) : t("sagi.open", { name })}
+        aria-expanded={open}
         title={t("sagi.avatarTitle", { name })}
       >
         {pet.id === "sagi" || !("kind" in pet) ? (

client/src/components/Sagi/SagiInfo.tsx

@@ -0,0 +1,298 @@
+/**
+ * @file SagiInfo.tsx
+ * @description What the pet knows, shown inside its chat window (`PetChat`):
+ *   the name you rename by clicking it (`PetNameButton`), and a status strip
+ *   (`SagiInfo`) — live / waiting / errored counts and the connection state
+ *   always in sight, and on expanding, the sessions that need the user, by
+ *   name, plus Mute and Clear alerts. Pure presentational: all data and
+ *   behavior are injected by the container (`Sagi.tsx`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import {
+  AlertTriangle,
+  Bell,
+  BellOff,
+  ChevronDown,
+  ChevronRight,
+  Hourglass,
+  Radio,
+  Trash2,
+  type LucideIcon,
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { subjectLabel, type AttentionItem, type SagiStatus, type SagiSubject } from "./brain";
+import { PET_NAME_MAX } from "./prefs";
+import { isSubmitEnter } from "../../lib/keys";
+
+/** How many sessions the "Needs you" list shows before pointing at Sessions. */
+const ATTENTION_SHOWN = 4;
+
+/** The pet's name; a click renames it in place (empty = its own name). */
+export function PetNameButton({
+  name,
+  ownName,
+  nickname,
+  onRename,
+}: {
+  name: string;
+  ownName: string;
+  nickname: string;
+  onRename: (name: string) => void;
+}) {
+  const { t } = useTranslation("settings");
+  // The name being typed, or null while not renaming.
+  const [renaming, setRenaming] = useState<string | null>(null);
+  const save = () => {
+    if (renaming === null) return;
+    onRename(renaming);
+    setRenaming(null);
+  };
+  return renaming === null ? (
+    <button
+      type="button"
+      className="max-w-full truncate rounded px-0.5 text-sm font-semibold text-fg-primary hover:bg-surface-4"
+      onClick={() => setRenaming(nickname)}
+      aria-label={t("sagi.panel.rename", { name })}
+      title={t("sagi.panel.rename", { name })}
+    >
+      {name}
+    </button>
+  ) : (
+    <input
+      autoFocus
+      className="w-28 rounded border border-accent bg-surface-1 px-1 py-0.5 text-sm text-fg-primary focus:outline-none"
+      value={renaming}
+      maxLength={PET_NAME_MAX}
+      placeholder={ownName}
+      aria-label={t("sagi.panel.renameLabel")}
+      title={t("sagi.panel.renameHint")}
+      onChange={(e) => setRenaming(e.target.value)}
+      onBlur={save}
+      onKeyDown={(e) => {
+        if (isSubmitEnter(e)) {
+          e.preventDefault();
+          save();
+        } else if (e.key === "Escape") {
+          // Esc cancels the rename only, not the whole chat.
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+          setRenaming(null);
+        }
+      }}
+    />
+  );
+}
+
+interface SagiInfoProps {
+  attention: ReadonlyArray<AttentionItem>;
+  onOpenSession: (s: SagiSubject) => void;
+  status: SagiStatus;
+  muted: boolean;
+  onToggleMute: () => void;
+  onClearAlerts: () => void;
+  onNavigate: (route: string) => void;
+  /** Expanded at first: the sessions that need the user and the actions. */
+  defaultOpen?: boolean;
+}
+
+/** The status strip under the chat's header. */
+export function SagiInfo({
+  attention,
+  onOpenSession,
+  status,
+  muted,
+  onToggleMute,
+  onClearAlerts,
+  onNavigate,
+  defaultOpen = false,
+}: SagiInfoProps) {
+  const { t } = useTranslation("settings");
+  const [open, setOpen] = useState(defaultOpen);
+  const Chevron = open ? ChevronDown : ChevronRight;
+  return (
+    <div className="pet-chat-info border-b border-border/60 px-3 py-2">
+      <button
+        type="button"
+        className="flex w-full items-center gap-1.5 rounded-lg text-left"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        aria-label={t("sagi.chat.status")}
+        title={t("sagi.chat.status")}
+      >
+        <StatChip
+          icon={Radio}
+          label={t("sagi.panel.statLive")}
+          value={status.liveCount}
+          tone={status.liveCount > 0 ? "accent" : "muted"}
+        />
+        <StatChip
+          icon={Hourglass}
+          label={t("sagi.panel.statWaiting")}
+          value={status.waitingCount}
+          tone={status.waitingCount > 0 ? "amber" : "muted"}
+        />
+        <StatChip
+          icon={AlertTriangle}
+          label={t("sagi.panel.statErrored")}
+          value={status.errorCount}
+          tone={status.errorCount > 0 ? "red" : "muted"}
+        />
+        <span
+          className={`ml-auto inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${
+            status.connected
+              ? "bg-status-success/15 text-status-success"
+              : "bg-status-danger/15 text-status-danger"
+          }`}
+        >
+          <span
+            className={`inline-block h-1.5 w-1.5 rounded-full ${
+              status.connected ? "bg-status-success" : "bg-status-danger"
+            }`}
+            aria-hidden
+          />
+          {status.connected ? t("sagi.panel.live") : t("sagi.panel.offline")}
+        </span>
+        <Chevron size={13} className="shrink-0 text-fg-muted" aria-hidden />
+      </button>
+
+      {open && (
+        <div className="mt-2 max-h-48 overflow-y-auto">
+          {/* the sessions that need the user, by name */}
+          {attention.length > 0 && (
+            <div className="mb-2">
+              <div className="mb-1 text-[10px] font-medium uppercase tracking-wider text-fg-muted">
+                {t("sagi.panel.attention")}
+              </div>
+              <ul className="space-y-1">
+                {attention.slice(0, ATTENTION_SHOWN).map((item) => (
+                  <li key={item.id}>
+                    <button
+                      className="group flex w-full items-center gap-2 rounded-lg bg-surface-1 px-2 py-1.5 text-left text-xs transition-colors hover:bg-surface-4"
+                      onClick={() => onOpenSession(item)}
+                      title={item.cwd ?? item.id}
+                    >
+                      {item.kind === "error" ? (
+                        <AlertTriangle
+                          size={13}
+                          className="shrink-0 text-status-danger"
+                          aria-hidden
+                        />
+                      ) : (
+                        <Hourglass size={13} className="shrink-0 text-status-warning" aria-hidden />
+                      )}
+                      <span className="min-w-0 flex-1 truncate text-fg-secondary group-hover:text-fg-primary">
+                        {subjectLabel(item)}
+                      </span>
+                      <span className="shrink-0 text-[10px] text-fg-muted">
+                        {item.kind === "error"
+                          ? t("sagi.panel.attentionError")
+                          : t("sagi.panel.attentionWaiting")}
+                      </span>
+                      <ChevronRight size={12} className="shrink-0 text-fg-muted" aria-hidden />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+              {attention.length > ATTENTION_SHOWN && (
+                <button
+                  className="mt-1 text-[11px] text-accent hover:underline"
+                  onClick={() => onNavigate("/sessions")}
+                >
+                  {t("sagi.panel.attentionMore", { count: attention.length - ATTENTION_SHOWN })}
+                </button>
+              )}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-1.5">
+            <ActionButton
+              icon={muted ? BellOff : Bell}
+              label={muted ? t("sagi.panel.unmute") : t("sagi.panel.mute")}
+              onClick={onToggleMute}
+            />
+            <ActionButton
+              icon={Trash2}
+              label={t("sagi.panel.clearAlerts")}
+              disabled={status.errorCount === 0}
+              onClick={onClearAlerts}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface Tone {
+  wrap: string;
+  value: string;
+  icon: string;
+}
+
+const TONE_MUTED: Tone = {
+  wrap: "border-border bg-surface-1",
+  value: "text-fg-secondary",
+  icon: "text-fg-muted",
+};
+
+const TONES: Record<string, Tone> = {
+  accent: { wrap: "border-accent/30 bg-accent/10", value: "text-fg-primary", icon: "text-accent" },
+  amber: {
+    wrap: "border-status-warning/30 bg-status-warning/10",
+    value: "text-status-warning",
+    icon: "text-status-warning",
+  },
+  red: {
+    wrap: "border-status-danger/30 bg-status-danger/10",
+    value: "text-status-danger",
+    icon: "text-status-danger",
+  },
+  muted: TONE_MUTED,
+};
+
+/** One count, compact: icon, number, label on one line. */
+function StatChip({
+  icon: Icon,
+  label,
+  value,
+  tone,
+}: {
+  icon: LucideIcon;
+  label: string;
+  value: number;
+  tone: string;
+}) {
+  const t = TONES[tone] ?? TONE_MUTED;
+  return (
+    <span className={`inline-flex items-center gap-1 rounded-full border px-1.5 py-0.5 ${t.wrap}`}>
+      <Icon size={11} className={t.icon} aria-hidden />
+      <span className={`text-xs font-semibold tabular-nums ${t.value}`}>{value}</span>
+      <span className="text-[9px] uppercase tracking-wider text-fg-muted">{label}</span>
+    </span>
+  );
+}
+
+function ActionButton({
+  icon: Icon,
+  label,
+  onClick,
+  disabled,
+}: {
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      className="flex w-full items-center gap-1.5 rounded-lg bg-surface-1 px-2 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Icon size={14} className="shrink-0" />
+      <span className="truncate">{label}</span>
+    </button>
+  );
+}

client/src/components/Sagi/SagiPanel.tsx

@@ -1,392 +0,0 @@
-/**
- * @file SagiPanel.tsx
- * @description Expanded Sagi panel: a live status strip (live / waiting /
- *   errored stat chips + connection state), quick navigation actions, and a
- *   local "Ask" box. Pure presentational - all data and the ask/navigation
- *   behavior are injected by the container.
- * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
- */
-/* =============================================================================
- * MODULE_GUIDE — extended in-file reference (comments only; safe to read, never executed)
- * =============================================================================
- * **Purpose:** Sagi is the optional on-screen mascot assistant — quips, intents, and lightweight event reactions layered above the dashboard chrome.
- *
- * ## Design constraints
- * - Local-first: no telemetry leaves the machine unless the user configures webhooks.
- * - Fail-safe hooks path on the server must never block Claude Code; UI mirrors that
- *   philosophy by degrading gracefully (empty states, stale badges, reconnect loops).
- * - Destructive flows stay behind explicit confirmation modals and server-side gates.
- * - Internationalization: user-visible strings belong in i18n JSON, not literals here.
- *
- * ## Remote data & SSH
- * Remote Data Sources let operators aggregate multiple machines. SSH entries describe
- * how to reach a peer dashboard; the global data scope (`dataScope.ts`) narrows every
- * scoped GET via `?sources=`. Health checks and import history surface in Settings.
- *
- * ## Internal dependencies
- * - `./brain`
- *
- * ## Public surface
- * - `SagiPanel` — exported API; see TSDoc on the symbol for behavior.
- *
- * ## Testing pointers
- * - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
- * - Server contract changes require `npm run test:server` and OpenAPI sync.
- *
- * ## Related docs
- * - `ARCHITECTURE.md` — hooks → API → SQLite → WebSocket → UI pipeline.
- * - `docs/API.md` — REST reference.
- * - `skills/file-headers/` — mandatory `@author` header policy.
- * ============================================================================= */
-/* -----------------------------------------------------------------------------
- * EXPORT CATALOG — quick index of symbols defined below (documentation only).
- * -----------------------------------------------------------------------------
- * **SagiPanel**
- *   Part of this module's public contract. Downstream imports should treat
- *   the signature and return type as stable unless release notes say otherwise.
- *   When behavior changes, update the `@file` overview and relevant tests.
- *
- * ----------------------------------------------------------------------------- */
-
-import { useState, type FormEvent, type ReactNode } from "react";
-import {
-  Bell,
-  BellOff,
-  Trash2,
-  X,
-  Send,
-  AlertTriangle,
-  Hourglass,
-  Radio,
-  Heart,
-  ChevronRight,
-  type LucideIcon,
-} from "lucide-react";
-import { useTranslation } from "react-i18next";
-import { subjectLabel, type AttentionItem, type SagiStatus, type SagiSubject } from "./brain";
-import { PET_NAME_MAX } from "./prefs";
-
-/** How many sessions the "Needs you" list shows before pointing at Sessions. */
-const ATTENTION_SHOWN = 4;
-
-interface SagiPanelProps {
-  /** The name the pet goes by now. */
-  name: string;
-  /** The pet's own name, which an empty nickname falls back to. */
-  ownName: string;
-  /** The user's nickname for the pet, "" when none. */
-  nickname: string;
-  onRename: (name: string) => void;
-  onPat: () => void;
-  /** Errored, then waiting sessions, named. */
-  attention: ReadonlyArray<AttentionItem>;
-  onOpenSession: (s: SagiSubject) => void;
-  status: SagiStatus;
-  muted: boolean;
-  onToggleMute: () => void;
-  onClearAlerts: () => void;
-  onNavigate: (route: string) => void;
-  /** Returns an answer to display, or null when the query was handed off. */
-  onAsk: (query: string) => string | null;
-  onClose: () => void;
-}
-
-export function SagiPanel({
-  name,
-  ownName,
-  nickname,
-  onRename,
-  onPat,
-  attention,
-  onOpenSession,
-  status,
-  muted,
-  onToggleMute,
-  onClearAlerts,
-  onNavigate,
-  onAsk,
-  onClose,
-}: SagiPanelProps) {
-  const { t } = useTranslation("settings");
-  const [query, setQuery] = useState("");
-  const [answer, setAnswer] = useState<string | null>(null);
-  // The name being typed, or null while not renaming.
-  const [renaming, setRenaming] = useState<string | null>(null);
-  const saveName = () => {
-    if (renaming === null) return;
-    onRename(renaming);
-    setRenaming(null);
-  };
-
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    const result = onAsk(query);
-    setAnswer(result); // null means it handed off (container navigates/closes)
-    setQuery("");
-  };
-
-  return (
-    <div
-      className="w-72 overflow-hidden rounded-2xl border border-border-light bg-surface-2/95 shadow-2xl backdrop-blur-md animate-slide-up"
-      role="dialog"
-      aria-label={t("sagi.panel.label", { name })}
-    >
-      {/* header */}
-      <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-gradient-to-r from-accent/10 to-transparent px-3.5 py-2.5">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="text-base leading-none" aria-hidden>
-            🐾
-          </span>
-          {renaming === null ? (
-            <button
-              type="button"
-              className="min-w-0 truncate rounded px-0.5 text-sm font-semibold text-fg-primary hover:bg-surface-4"
-              onClick={() => setRenaming(nickname)}
-              aria-label={t("sagi.panel.rename", { name })}
-              title={t("sagi.panel.rename", { name })}
-            >
-              {name}
-            </button>
-          ) : (
-            <input
-              autoFocus
-              className="w-28 rounded border border-accent bg-surface-1 px-1 py-0.5 text-sm text-fg-primary focus:outline-none"
-              value={renaming}
-              maxLength={PET_NAME_MAX}
-              placeholder={ownName}
-              aria-label={t("sagi.panel.renameLabel")}
-              title={t("sagi.panel.renameHint")}
-              onChange={(e) => setRenaming(e.target.value)}
-              onBlur={saveName}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  saveName();
-                } else if (e.key === "Escape") {
-                  // Esc cancels the rename only, not the whole panel.
-                  e.stopPropagation();
-                  e.nativeEvent.stopImmediatePropagation();
-                  setRenaming(null);
-                }
-              }}
-            />
-          )}
-          <span
-            className={`ml-0.5 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${
-              status.connected
-                ? "bg-status-success/15 text-status-success"
-                : "bg-status-danger/15 text-status-danger"
-            }`}
-          >
-            <span
-              className={`inline-block h-1.5 w-1.5 rounded-full ${
-                status.connected ? "bg-status-success" : "bg-status-danger"
-              }`}
-              aria-hidden
-            />
-            {status.connected ? t("sagi.panel.live") : t("sagi.panel.offline")}
-          </span>
-        </div>
-        <div className="flex shrink-0 items-center">
-          <button
-            className="rounded-md p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-status-danger"
-            onClick={onPat}
-            aria-label={t("sagi.panel.pat", { name })}
-            title={t("sagi.panel.pat", { name })}
-          >
-            <Heart size={15} />
-          </button>
-          <button
-            className="rounded-md p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-secondary"
-            onClick={onClose}
-            aria-label={t("sagi.panel.close", { name })}
-          >
-            <X size={15} />
-          </button>
-        </div>
-      </div>
-
-      <div className="p-3">
-        {/* status stat chips */}
-        <div className="mb-3 grid grid-cols-3 gap-1.5">
-          <StatChip
-            icon={Radio}
-            label={t("sagi.panel.statLive")}
-            value={status.liveCount}
-            tone={status.liveCount > 0 ? "accent" : "muted"}
-          />
-          <StatChip
-            icon={Hourglass}
-            label={t("sagi.panel.statWaiting")}
-            value={status.waitingCount}
-            tone={status.waitingCount > 0 ? "amber" : "muted"}
-          />
-          <StatChip
-            icon={AlertTriangle}
-            label={t("sagi.panel.statErrored")}
-            value={status.errorCount}
-            tone={status.errorCount > 0 ? "red" : "muted"}
-          />
-        </div>
-
-        {/* the sessions that need the user, by name */}
-        {attention.length > 0 && (
-          <div className="mb-3">
-            <div className="mb-1 text-[10px] font-medium uppercase tracking-wider text-fg-muted">
-              {t("sagi.panel.attention")}
-            </div>
-            <ul className="space-y-1">
-              {attention.slice(0, ATTENTION_SHOWN).map((item) => (
-                <li key={item.id}>
-                  <button
-                    className="group flex w-full items-center gap-2 rounded-lg bg-surface-1 px-2 py-1.5 text-left text-xs transition-colors hover:bg-surface-4"
-                    onClick={() => onOpenSession(item)}
-                    title={item.cwd ?? item.id}
-                  >
-                    {item.kind === "error" ? (
-                      <AlertTriangle
-                        size={13}
-                        className="shrink-0 text-status-danger"
-                        aria-hidden
-                      />
-                    ) : (
-                      <Hourglass size={13} className="shrink-0 text-status-warning" aria-hidden />
-                    )}
-                    <span className="min-w-0 flex-1 truncate text-fg-secondary group-hover:text-fg-primary">
-                      {subjectLabel(item)}
-                    </span>
-                    <span className="shrink-0 text-[10px] text-fg-muted">
-                      {item.kind === "error"
-                        ? t("sagi.panel.attentionError")
-                        : t("sagi.panel.attentionWaiting")}
-                    </span>
-                    <ChevronRight size={12} className="shrink-0 text-fg-muted" aria-hidden />
-                  </button>
-                </li>
-              ))}
-            </ul>
-            {attention.length > ATTENTION_SHOWN && (
-              <button
-                className="mt-1 text-[11px] text-accent hover:underline"
-                onClick={() => onNavigate("/sessions")}
-              >
-                {t("sagi.panel.attentionMore", { count: attention.length - ATTENTION_SHOWN })}
-              </button>
-            )}
-          </div>
-        )}
-
-        {/* quick actions */}
-        <div className="mb-3 grid grid-cols-2 gap-1.5">
-          <ActionButton
-            icon={muted ? BellOff : Bell}
-            label={muted ? t("sagi.panel.unmute") : t("sagi.panel.mute")}
-            onClick={onToggleMute}
-          />
-          <ActionButton
-            icon={Trash2}
-            label={t("sagi.panel.clearAlerts")}
-            disabled={status.errorCount === 0}
-            onClick={onClearAlerts}
-          />
-        </div>
-
-        {/* ask */}
-        <form onSubmit={submit} className="flex items-center gap-1.5">
-          <input
-            className="flex-1 rounded-lg border border-border bg-surface-1 px-2.5 py-1.5 text-xs text-fg-secondary placeholder-fg-muted transition-colors focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/30"
-            placeholder={t("sagi.panel.askPlaceholder", { name })}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            aria-label={t("sagi.panel.ask", { name })}
-          />
-          <button
-            type="submit"
-            className="btn-primary justify-center px-2.5 py-2"
-            aria-label={t("sagi.panel.send")}
-          >
-            <Send size={14} />
-          </button>
-        </form>
-        {answer && (
-          <p className="mt-2 rounded-lg bg-surface-1/70 px-2.5 py-2 text-xs leading-relaxed text-fg-secondary">
-            {answer}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface Tone {
-  wrap: string;
-  value: string;
-  icon: string;
-}
-
-const TONE_MUTED: Tone = {
-  wrap: "border-border bg-surface-1",
-  value: "text-fg-secondary",
-  icon: "text-fg-muted",
-};
-
-const TONES: Record<string, Tone> = {
-  accent: { wrap: "border-accent/30 bg-accent/10", value: "text-fg-primary", icon: "text-accent" },
-  amber: {
-    wrap: "border-status-warning/30 bg-status-warning/10",
-    value: "text-status-warning",
-    icon: "text-status-warning",
-  },
-  red: {
-    wrap: "border-status-danger/30 bg-status-danger/10",
-    value: "text-status-danger",
-    icon: "text-status-danger",
-  },
-  muted: TONE_MUTED,
-};
-
-function StatChip({
-  icon: Icon,
-  label,
-  value,
-  tone,
-}: {
-  icon: LucideIcon;
-  label: string;
-  value: number;
-  tone: string;
-}): ReactNode {
-  const t = TONES[tone] ?? TONE_MUTED;
-  return (
-    <div className={`flex flex-col items-center gap-0.5 rounded-xl border py-1.5 ${t.wrap}`}>
-      <Icon size={13} className={t.icon} aria-hidden />
-      <span className={`text-base font-semibold leading-none tabular-nums ${t.value}`}>
-        {value}
-      </span>
-      <span className="text-[9px] uppercase tracking-wider text-fg-muted">{label}</span>
-    </div>
-  );
-}
-
-function ActionButton({
-  icon: Icon,
-  label,
-  onClick,
-  disabled,
-}: {
-  icon: LucideIcon;
-  label: string;
-  onClick: () => void;
-  disabled?: boolean;
-}) {
-  return (
-    <button
-      className="flex w-full items-center gap-1.5 rounded-lg bg-surface-1 px-2 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
-      onClick={onClick}
-      disabled={disabled}
-    >
-      <Icon size={14} className="shrink-0" />
-      <span className="truncate">{label}</span>
-    </button>
-  );
-}

client/src/components/Sagi/__tests__/Sagi.test.tsx

@@ -1,6 +1,6 @@
 /**
  * @file Sagi.test.tsx
- * @description Render tests for the Sagi companion component — mounting, mood rendering, the ⌘B panel toggle, and accessibility attributes.
+ * @description Render tests for the Sagi companion component — mounting, mood rendering, the ⌘B chat toggle (the chat window is the pet's whole UI: status strip, local answers, New chat stopping the old session), and accessibility attributes.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -18,6 +18,7 @@ import { useSagiPosition } from "../useSagiPosition";
 import { MemoryRouter } from "react-router-dom";
 import { Sagi } from "../Sagi";
 import { eventBus } from "../../../lib/eventBus";
+import { api } from "../../../lib/api";
 import type { WSMessage, Session } from "../../../lib/types";
 
 function renderSagi() {
@@ -54,13 +55,13 @@ describe("Sagi widget", () => {
     expect(screen.getByRole("img", { name: /sagi/i })).toBeInTheDocument();
   });
 
-  it("opens the panel on click and answers a local status question", () => {
+  it("opens the chat on click and answers a local status question there", () => {
     renderSagi();
     fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const panel = screen.getByRole("dialog", { name: /sagi companion/i });
+    const panel = screen.getByRole("dialog", { name: /chat with sagi/i });
     expect(panel).toBeInTheDocument();
 
-    const input = within(panel).getByLabelText(/ask sagi/i);
+    const input = within(panel).getByLabelText(/ask sagi anything/i);
     fireEvent.change(input, { target: { value: "status" } });
     fireEvent.submit(input.closest("form")!);
     expect(within(panel).getByText(/live ·/i)).toBeInTheDocument();
@@ -88,7 +89,7 @@ describe("Sagi widget", () => {
     expect(within(btn).getByText("1")).toBeInTheDocument();
   });
 
-  it("names the errored session in its bubble and in the panel", () => {
+  it("names the errored session in its bubble and in the chat", () => {
     renderSagi();
     act(() => {
       eventBus.publish({
@@ -101,7 +102,7 @@ describe("Sagi widget", () => {
     expect(within(bubble).getByText("Fix login")).toBeInTheDocument();
     expect(within(bubble).getByRole("button", { name: "Open" })).toBeInTheDocument();
     fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const panel = screen.getByRole("dialog", { name: /sagi companion/i });
+    const panel = screen.getByRole("dialog", { name: /chat with sagi/i });
     expect(within(panel).getByText("Needs you")).toBeInTheDocument();
     expect(within(panel).getByRole("button", { name: /Fix login/ })).toBeInTheDocument();
   });
@@ -121,43 +122,54 @@ describe("Sagi widget", () => {
     expect(JSON.parse(localStorage.getItem("agenthub.pet.dismissedErrors")!)).toEqual(["a"]);
   });
 
-  it("renames the pet from the panel header", () => {
+  it("renames the pet from the chat header", () => {
     renderSagi();
     fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
     fireEvent.click(screen.getByRole("button", { name: /rename sagi/i }));
     const input = screen.getByLabelText("Pet name");
     fireEvent.change(input, { target: { value: "Mochi" } });
     fireEvent.keyDown(input, { key: "Enter" });
-    expect(screen.getByRole("dialog", { name: /mochi companion/i })).toBeInTheDocument();
-    expect(screen.getByLabelText(/ask mochi/i)).toBeInTheDocument();
+    expect(screen.getByRole("dialog", { name: /chat with mochi/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/ask mochi anything/i)).toBeInTheDocument();
   });
 
-  it("hands a question it cannot answer to the chat window", () => {
+  it("hands a question it cannot answer to the AI", () => {
     localStorage.setItem("agenthub.defaultTool", "claude");
+    const ensure = vi.spyOn(api.lanes, "ensure").mockReturnValue(new Promise(() => {}));
     renderSagi();
     fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const input = screen.getByLabelText(/ask sagi/i);
-    fireEvent.change(input, { target: { value: "write me a haiku" } });
-    fireEvent.submit(input.closest("form")!);
     const chat = screen.getByRole("dialog", { name: /chat with sagi/i });
-    expect(within(chat).getByText("write me a haiku")).toBeInTheDocument();
-    expect(screen.queryByRole("dialog", { name: /sagi companion/i })).not.toBeInTheDocument();
-  });
-
-  it("has no Chat button — Ask opens the chat — and Back returns to the panel", () => {
-    localStorage.setItem("agenthub.defaultTool", "claude");
-    renderSagi();
-    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    expect(screen.queryByRole("button", { name: /chat with sagi/i })).not.toBeInTheDocument();
-    const input = screen.getByLabelText(/ask sagi/i);
+    const input = within(chat).getByLabelText(/ask sagi anything/i);
     fireEvent.change(input, { target: { value: "write me a haiku" } });
     fireEvent.submit(input.closest("form")!);
-    expect(screen.getByRole("dialog", { name: /chat with sagi/i })).toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: "Back" }));
-    expect(screen.getByRole("dialog", { name: /sagi companion/i })).toBeInTheDocument();
+    expect(within(chat).getByText("write me a haiku")).toBeInTheDocument();
+    expect(ensure).toHaveBeenCalledWith({ title: "Sagi" });
+    ensure.mockRestore();
   });
 
-  it("a pat shows its reaction on the pet even while the panel is open", () => {
+  it("reopens the remembered chat, and New chat stops its session", async () => {
+    localStorage.setItem(
+      "agenthub.pet.chat",
+      JSON.stringify({ laneId: 7, runId: "agenthub-lane-7-1", tool: "claude" })
+    );
+    const get = vi
+      .spyOn(api.run, "get")
+      .mockReturnValue(new Promise(() => {}) as ReturnType<typeof api.run.get>);
+    const kill = vi.spyOn(api.run, "kill").mockResolvedValue({ ok: true });
+    renderSagi();
+    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
+    expect(screen.getByRole("button", { name: /open in workspace/i })).toBeInTheDocument();
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /new chat/i }));
+    });
+    expect(kill).toHaveBeenCalledWith("agenthub-lane-7-1", { archive: true });
+    expect(localStorage.getItem("agenthub.pet.chat")).toBeNull();
+    expect(screen.queryByRole("button", { name: /open in workspace/i })).not.toBeInTheDocument();
+    get.mockRestore();
+    kill.mockRestore();
+  });
+
+  it("a pat shows its reaction on the pet even while the chat is open", () => {
     renderSagi();
     fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
     fireEvent.click(screen.getByRole("button", { name: /pat sagi/i }));
@@ -175,16 +187,16 @@ describe("Sagi widget", () => {
     expect(pet.querySelector(".sagi-reaction-text")).not.toBeNull();
   });
 
-  it("reflects the live count in the panel status", () => {
+  it("reflects the live count in the chat status", () => {
     renderSagi();
     act(() => {
       eventBus.publish(sessionMsg("a", "active"));
       eventBus.publish(sessionMsg("b", "active"));
     });
     fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
-    const panel = screen.getByRole("dialog", { name: /sagi companion/i });
+    const panel = screen.getByRole("dialog", { name: /chat with sagi/i });
     // The "live" stat chip shows value 2 next to its label.
-    const liveChip = within(panel).getByText("live").closest("div")!;
+    const liveChip = within(panel).getByText("live").closest("span.rounded-full")! as HTMLElement;
     expect(within(liveChip).getByText("2")).toBeInTheDocument();
   });
 
@@ -194,7 +206,7 @@ describe("Sagi widget", () => {
     expect(screen.queryByRole("button", { name: /open sagi companion/i })).not.toBeInTheDocument();
   });
 
-  it("a tap (no movement) still opens the panel", () => {
+  it("a tap (no movement) still opens the chat", () => {
     renderSagi();
     const btn = screen.getByRole("button", { name: /open sagi companion/i });
     act(() => {
@@ -202,7 +214,7 @@ describe("Sagi widget", () => {
       fireEvent.pointerUp(btn, { clientX: 990, clientY: 700 });
     });
     fireEvent.click(btn);
-    expect(screen.getByRole("dialog", { name: /sagi companion/i })).toBeInTheDocument();
+    expect(screen.getByRole("dialog", { name: /chat with sagi/i })).toBeInTheDocument();
   });
 
   it("dragging snaps to an edge, persists position, and does not open the panel", () => {
@@ -231,7 +243,7 @@ describe("Sagi widget", () => {
       fireEvent.pointerUp(btn, { clientX: 992, clientY: 701 });
     });
     fireEvent.click(btn);
-    expect(screen.getByRole("dialog", { name: /sagi companion/i })).toBeInTheDocument();
+    expect(screen.getByRole("dialog", { name: /chat with sagi/i })).toBeInTheDocument();
     // No position was persisted because no real drag happened.
     expect(localStorage.getItem("agent-dashboard-sagi-pos")).toBeNull();
   });

client/src/components/Sidebar.tsx

@@ -73,7 +73,7 @@ import {
   ChevronDown,
   FolderTree,
   LogOut,
-  UsersRound,
+  ShieldCheck,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { api } from "../lib/api";
@@ -479,11 +479,11 @@ export function Sidebar({
           {[
             // The file manager serves a shared server; locally it is the desktop's.
             ...NAV_KEYS.filter((n) => !(perms.local && n.to === "/files")),
-            // Server mode: the Users page, for an admin or analyst.
+            // Server mode: Administration (users, server), for an admin or analyst.
             ...(auth.state.mode === "server" &&
             auth.state.user &&
             auth.state.user.role !== "developer"
-              ? [{ to: "/users", icon: UsersRound, key: "nav:users" }]
+              ? [{ to: "/admin", icon: ShieldCheck, key: "nav:admin" }]
               : []),
           ].map(({ to, icon: Icon, key }) => {
             const label = t(key);

client/src/components/SnapshotButton.tsx

@@ -14,6 +14,7 @@ import { api } from "../lib/api";
 import { ConfirmModal } from "./ConfirmModal";
 import { Checkbox } from "./Checkbox";
 import { CopyButton } from "./event-views/primitives";
+import { copyText } from "../lib/clipboard";
 
 export function snapshotUrl(token: string): string {
   return `${window.location.origin}/snapshot/${token}`;
@@ -33,7 +34,7 @@ export function SnapshotButton({ sessionId }: { sessionId: string }) {
     try {
       const { snapshot } = await api.snapshots.create(sessionId, { filePaths: redact });
       setToken(snapshot.token);
-      navigator.clipboard?.writeText(snapshotUrl(snapshot.token)).catch(() => undefined);
+      void copyText(snapshotUrl(snapshot.token));
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
     } finally {

client/src/components/StatusBar.tsx

@@ -9,8 +9,12 @@
  * Workspace page, the open workspace's total (`?lane=` on the same call: the
  * sessions it owns) and the shown session's (`GET /api/pricing/cost/:id` for
  * the URL's `session`, or the focused pane's session from the page's run poll,
- * `LIVE_RUNS_EVENT`), all re-read every 30 s while the tab is visible and
- * whenever the URL names another workspace or session. Each figure carries its
+ * `LIVE_RUNS_EVENT`), all re-read at once whenever the URL names another
+ * workspace or session, then at most every 30 s while events or session
+ * updates arrive (spend only moves with work) and every 2 min otherwise, while
+ * the tab is visible. The session counts re-read only when a session is
+ * created or its status / waiting / archived state changes (every 60 s
+ * otherwise). Each figure carries its
  * token total, and hovering it lists tokens and cost per model. At the right
  * end, the plan quota spent per native tool (`GET /api/pricing/quota`, every
  * 5 min while visible; a click forces a re-read): one "N% used" chip per tool —
@@ -31,9 +35,15 @@ import { fmt, fmtCostFull, formatModelName, timeAgo } from "../lib/format";
 import { AiToolIcon } from "./AiToolIcon";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
 import { useSpin } from "../hooks/useSpin";
+import { sessionChangeMatcher } from "../lib/sessionChange";
 import { LIVE_RUNS_EVENT, selectedFrom } from "./WorkspaceTree";
 
+/** Spend moves only with work: at most this often while events arrive… */
 const COST_POLL_MS = 30_000;
+/** …and this often regardless (date rollover, budget period, a missed frame). */
+const COST_FALLBACK_MS = 120_000;
+/** The counts' safety poll; session frames that change a count drive the rest. */
+const COUNTS_FALLBACK_MS = 60_000;
 const QUOTA_POLL_MS = 5 * 60_000;
 const QUOTA_TOOL_LABEL: Record<ToolQuota["id"], string> = {
   claude: "Claude",
@@ -384,51 +394,57 @@ export function StatusBar({
       .catch(() => undefined);
   }, []);
   useEffect(loadCounts, [loadCounts]);
-  useLiveRefresh(loadCounts, {
-    intervalMs: 15_000,
-    match: (msg) => msg.type === "session_updated" || msg.type === "session_created",
-  });
+  // Only a frame that moves a session between the counted states (a new
+  // session, a status / waiting / archived change) re-reads: a session row is
+  // re-broadcast on almost every hook.
+  const [countsChanged] = useState(() => sessionChangeMatcher());
+  useLiveRefresh(loadCounts, { intervalMs: COUNTS_FALLBACK_MS, match: countsChanged });
 
+  // Bumped on every lane/session switch: an answer for the previous one is dropped.
+  const costGen = useRef(0);
+  const loadCosts = useCallback(() => {
+    const gen = costGen.current;
+    const live = () => gen === costGen.current;
+    api.pricing
+      .totalCost({ date: localDate() })
+      .then((r) => live() && setToday(r))
+      .catch(() => undefined);
+    api.budgets
+      .status()
+      .then(({ budgets }) => {
+        const hit = budgets.filter((b) => b.crossed.length > 0).sort((a, b) => b.pct - a.pct);
+        if (live()) setBudget(hit[0] ?? null);
+      })
+      .catch(() => undefined);
+    if (lane !== null) {
+      api.pricing
+        .totalCost({ lane })
+        .then((r) => live() && setLaneCost(r))
+        .catch(() => undefined);
+    }
+    if (sessionId) {
+      api.pricing
+        .sessionCost(sessionId)
+        .then((r) => live() && setSessionCost(r))
+        .catch(() => undefined);
+    }
+  }, [lane, sessionId]);
   useEffect(() => {
-    let live = true;
+    costGen.current++;
     // Another workspace or session: never show the previous one's figure.
     setLaneCost(null);
     setSessionCost(null);
-    const tick = () => {
-      if (document.visibilityState !== "visible") return;
-      api.pricing
-        .totalCost({ date: localDate() })
-        .then((r) => live && setToday(r))
-        .catch(() => undefined);
-      api.budgets
-        .status()
-        .then(({ budgets }) => {
-          const hit = budgets.filter((b) => b.crossed.length > 0).sort((a, b) => b.pct - a.pct);
-          if (live) setBudget(hit[0] ?? null);
-        })
-        .catch(() => undefined);
-      if (lane !== null) {
-        api.pricing
-          .totalCost({ lane })
-          .then((r) => live && setLaneCost(r))
-          .catch(() => undefined);
-      }
-      if (sessionId) {
-        api.pricing
-          .sessionCost(sessionId)
-          .then((r) => live && setSessionCost(r))
-          .catch(() => undefined);
-      }
-    };
-    tick();
-    const id = setInterval(tick, COST_POLL_MS);
-    document.addEventListener("visibilitychange", tick);
+    if (document.visibilityState === "visible") loadCosts();
     return () => {
-      live = false;
-      clearInterval(id);
-      document.removeEventListener("visibilitychange", tick);
+      costGen.current++;
     };
-  }, [lane, sessionId]);
+  }, [loadCosts]);
+  useLiveRefresh(loadCosts, {
+    intervalMs: COST_FALLBACK_MS,
+    throttleMs: COST_POLL_MS,
+    match: (msg) =>
+      msg.type === "new_event" || msg.type === "session_updated" || msg.type === "session_created",
+  });
 
   return (
     <footer

client/src/components/Switch.tsx

@@ -33,13 +33,16 @@ export function Switch({
       // On: the solid accent (white knob clears 3:1 in every theme). Off: a
       // border-light track with an inset fg-muted/80 ring (≥3:1 in every theme), so the control's edge
       // is visible on any surface (surface-4 alone was ~1:1 on a light card).
-      className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-50 ${
-        checked ? "bg-accent-solid" : "bg-border-light ring-1 ring-inset ring-fg-muted/80"
+      // Hover darkens the track (enabled only), so it reads as clickable.
+      className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-40 ${
+        checked
+          ? "bg-accent-solid enabled:hover:bg-accent-solid-hover"
+          : "bg-border-light ring-1 ring-inset ring-fg-muted/80 enabled:hover:ring-fg-secondary"
       }`}
     >
       <span
         aria-hidden
-        className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${
+        className={`inline-block h-4 w-4 rounded-full bg-white shadow-sm ring-1 ring-black/10 transition-transform duration-200 ease-out ${
           checked ? "translate-x-[18px]" : "translate-x-0.5"
         }`}
       />

client/src/components/__tests__/AuthGate.test.tsx

@@ -6,7 +6,9 @@
  * `useWorkLanes` mirror the server's roles: an admin changes everything, an
  * analyst reads everything but works only in their own workspaces, a
  * developer only ever sees (and so changes) their own. The login page wears the
- * OS's light/dark; a sign-in swaps in the account's saved appearance.
+ * OS's light/dark; a sign-in swaps in the account's saved appearance. A
+ * password an admin gave shows only the "choose your own password" page,
+ * whose button waits for every rule, until the change succeeds.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -18,6 +20,7 @@ import "../../i18n";
 const me = vi.fn();
 const login = vi.fn();
 const prefs = vi.fn();
+const changePassword = vi.fn();
 const LANES = [
   { id: 1, owner_id: 5 },
   { id: 2, owner_id: 6 },
@@ -27,7 +30,11 @@ vi.mock("../../lib/api", () => ({
   api: {
     auth: { me: () => me(), login: (u: string, p: string) => login(u, p), logout: vi.fn() },
     lanes: { list: () => Promise.resolve({ lanes: LANES }) },
-    me: { prefs: () => prefs(), savePrefs: () => Promise.resolve({ prefs: {} }) },
+    me: {
+      prefs: () => prefs(),
+      savePrefs: () => Promise.resolve({ prefs: {} }),
+      changePassword: (c: string, n: string) => changePassword(c, n),
+    },
   },
 }));
 
@@ -56,10 +63,30 @@ beforeEach(() => {
   me.mockReset();
   login.mockReset();
   prefs.mockReset().mockResolvedValue({ prefs: {} });
+  changePassword.mockReset().mockResolvedValue({ ok: true });
   localStorage.clear();
 });
 
 describe("AuthGate", () => {
+  it("makes an account with an admin-given password choose its own first", async () => {
+    const ue = userEvent.setup();
+    me.mockResolvedValue({ mode: "server", user: { ...user, mustChangePassword: true } });
+    render(<AuthGate>app</AuthGate>);
+    const save = await screen.findByRole("button", { name: "Save and continue" });
+    expect(screen.queryByText("app")).toBeNull();
+    await ue.type(screen.getByLabelText("Current password"), "123");
+    await ue.type(screen.getByLabelText("New password"), "weakpass");
+    await ue.type(screen.getByLabelText("Confirm new password"), "weakpass");
+    expect(save).toBeDisabled();
+    await ue.clear(screen.getByLabelText("New password"));
+    await ue.clear(screen.getByLabelText("Confirm new password"));
+    await ue.type(screen.getByLabelText("New password"), "Green-Tea-42");
+    await ue.type(screen.getByLabelText("Confirm new password"), "Green-Tea-42");
+    await ue.click(save);
+    expect(changePassword).toHaveBeenCalledWith("123", "Green-Tea-42");
+    expect(await screen.findByText("app")).toBeInTheDocument();
+  });
+
   it("renders the app in local mode", async () => {
     me.mockResolvedValue({ mode: "local" });
     render(<AuthGate>app</AuthGate>);

client/src/components/__tests__/MarkdownPreview.test.tsx

@@ -58,14 +58,25 @@ describe("MarkdownPreview", () => {
 describe("FileViewer — markdown preview", () => {
   const data = { text: "# Hello\n", truncated: false } as never;
 
-  it("switches a markdown file between raw and preview", async () => {
+  it("opens a markdown file rendered, and switches it to raw and back", async () => {
     render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
     expect(screen.queryByTestId("markdown-preview")).toBeNull();
     expect(screen.getByText("# Hello")).toBeInTheDocument();
     await userEvent.click(screen.getByRole("button", { name: "Preview" }));
     expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
-    await userEvent.click(screen.getByRole("button", { name: "Raw" }));
-    expect(screen.queryByTestId("markdown-preview")).toBeNull();
+  });
+
+  it("opens it as source when Settings → Appearance says Raw", () => {
+    window.localStorage.setItem("agenthub.markdown.view", "raw");
+    try {
+      render(<FileViewer state={{ path: "/x/CLAUDE.md", data, error: null }} onClose={vi.fn()} />);
+      expect(screen.queryByTestId("markdown-preview")).toBeNull();
+      expect(screen.getByText("# Hello")).toBeInTheDocument();
+    } finally {
+      window.localStorage.removeItem("agenthub.markdown.view");
+    }
   });
 
   it("offers no preview for another file type", () => {

client/src/components/__tests__/StatusBar.test.tsx

@@ -238,7 +238,7 @@ describe("StatusBar", () => {
     expect(work).toHaveTextContent("5h95%Resets in 41m");
     expect(work).toHaveTextContent("Week32%");
     expect(personal).toHaveTextContent("home@example.com · Sign-in expired");
-    expect(personal).toHaveTextContent("Check quota in Claude Code → Profiles");
+    expect(personal).toHaveTextContent("Check quota in Settings → AI tools → Profiles");
     expect(personal).not.toHaveTextContent("in use");
     expect(codex).toHaveTextContent("dev@example.com");
     expect(codex).toHaveTextContent("Sign-in expired");

client/src/components/admin/ServerPanel.tsx

@@ -0,0 +1,417 @@
+/**
+ * @file ServerPanel.tsx
+ * @description The Administration page's Server tab: the machine AgentHub
+ * runs on — hostname, OS, uptime, CPU and its load, memory and swap, every
+ * real disk (HDD/SSD, how full), any NVIDIA GPU — and each user's live share
+ * of it (`GET /api/host`, server/lib/host-stats.js): CPU % of the whole
+ * machine, resident memory, process count, the busiest processes by name, and
+ * the disk their home takes (`GET /api/users/storage`, as a share of the disk
+ * that holds the homes). Re-read every `POLL_MS` while shown; Refresh re-reads
+ * at once. Read-only — the only action here is the members' tmux card
+ * (`MemberTmuxCard`, an admin's restart).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  AlertCircle,
+  ChevronDown,
+  ChevronRight,
+  Cpu,
+  HardDrive,
+  MemoryStick,
+  MonitorCog,
+  RefreshCw,
+  Server,
+} from "lucide-react";
+import {
+  api,
+  type HostStats,
+  type HostUsageGroup,
+  type ServerUserUsage,
+  type UserStorage,
+} from "../../lib/api";
+import { formatBytes } from "../../lib/format";
+import { useSpin } from "../../hooks/useSpin";
+import { StatCard } from "../StatCard";
+import { UserAvatar } from "../users/UserAvatar";
+import { MemberTmuxCard } from "../users/MemberTmuxCard";
+
+const POLL_MS = 5000;
+
+const pct = (part: number, whole: number) => (whole > 0 ? (part / whole) * 100 : 0);
+const fmtPct = (n: number) => `${n < 10 ? n.toFixed(1) : Math.round(n)}%`;
+
+/** A thin bar, amber past 75 %, red past 90 %. */
+function Meter({ value, label }: { value: number; label: string }) {
+  const v = Math.max(0, Math.min(100, value));
+  const tone = v >= 90 ? "bg-status-danger" : v >= 75 ? "bg-status-warning" : "bg-accent-solid";
+  return (
+    <div
+      role="meter"
+      aria-label={label}
+      aria-valuenow={Math.round(v)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className="h-1.5 w-full rounded-full bg-surface-4 overflow-hidden"
+    >
+      <div className={`h-full rounded-full ${tone}`} style={{ width: `${v}%` }} />
+    </div>
+  );
+}
+
+function uptimeText(t: (k: string, o?: Record<string, unknown>) => string, sec: number) {
+  const d = Math.floor(sec / 86400);
+  const h = Math.floor((sec % 86400) / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  return d > 0 ? t("server.uptimeDays", { d, h }) : t("server.uptimeHours", { h, m });
+}
+
+export function ServerPanel({ isAdmin }: { isAdmin: boolean }) {
+  const { t } = useTranslation("admin");
+  const [stats, setStats] = useState<HostStats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
+  const [storage, setStorage] = useState<Record<string, UserStorage> | null>(null);
+  const [open, setOpen] = useState<Set<string>>(new Set());
+
+  const load = useCallback(
+    () =>
+      api.host
+        .stats()
+        .then((s) => {
+          setStats(s);
+          setError(null);
+        })
+        .catch((e: Error) => setError(e.message)),
+    []
+  );
+  const [spinning, refresh] = useSpin(load);
+
+  useEffect(() => {
+    void load();
+    const id = setInterval(() => {
+      if (document.visibilityState === "visible") void load();
+    }, POLL_MS);
+    return () => clearInterval(id);
+  }, [load]);
+
+  // Names, pictures and home sizes: read once, they change slowly.
+  useEffect(() => {
+    api.users
+      .list()
+      .then((r) => setUsers(r.users))
+      .catch(() => setUsers([]));
+    api.users
+      .storage()
+      .then((r) => setStorage(r.storage))
+      .catch(() => setStorage({}));
+  }, []);
+
+  const byId = new Map((users ?? []).map((u) => [u.id, u]));
+  const homesDisk = stats?.disks.find((d) => d.mount === stats.homesMount) ?? null;
+  const loading = !stats && !error;
+  const mem = stats?.memory;
+  const toggle = (key: string) =>
+    setOpen((s) => {
+      const n = new Set(s);
+      if (n.has(key)) n.delete(key);
+      else n.add(key);
+      return n;
+    });
+
+  const groupName = (g: HostUsageGroup) => {
+    if (g.kind === "host") return t("server.hostGroup");
+    if (g.kind === "system") return t("server.systemGroup");
+    const u = g.userId != null ? byId.get(g.userId) : undefined;
+    return u?.displayName || g.username || "";
+  };
+  const th = "px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider";
+
+  return (
+    <div className="space-y-6" data-testid="server-panel">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="flex items-center gap-2 text-sm font-semibold text-fg-primary">
+            <Server className="w-4 h-4 text-accent" />
+            <span className="truncate">{stats?.hostname ?? t("server.title")}</span>
+          </h2>
+          {stats && (
+            <p className="mt-0.5 text-xs text-fg-muted">
+              {[stats.os.distro ?? stats.os.platform, stats.os.release, stats.os.arch].join(" · ")}
+              {" · "}
+              {t("server.uptime", { v: uptimeText(t, stats.uptime) })}
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={refresh}
+          disabled={spinning}
+          aria-busy={spinning}
+          className="btn-ghost"
+        >
+          <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />{" "}
+          {t("common:refresh")}
+        </button>
+      </div>
+
+      {error && (
+        <div
+          role="alert"
+          className="card flex flex-wrap items-center gap-3 p-3 border-status-danger/40 text-sm text-status-danger"
+        >
+          <AlertCircle className="w-4 h-4 flex-shrink-0" />
+          <span className="flex-1 min-w-0">{error}</span>
+          <button type="button" onClick={refresh} className="btn-ghost text-xs">
+            {t("common:retry")}
+          </button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          label={t("server.cpu")}
+          value={stats?.usage ? fmtPct(stats.usage.cpu) : "—"}
+          icon={Cpu}
+          trend={
+            stats
+              ? t("server.cores", {
+                  n: stats.cpu.cores,
+                  load: stats.cpu.load.map((l) => l.toFixed(2)).join(" "),
+                })
+              : undefined
+          }
+          raw={stats?.cpu.model ?? undefined}
+          help={t("server.cpuHelp")}
+          loading={loading}
+        />
+        <StatCard
+          label={t("server.memory")}
+          value={mem ? fmtPct(pct(mem.used, mem.total)) : "—"}
+          icon={MemoryStick}
+          trend={mem ? `${formatBytes(mem.used)} / ${formatBytes(mem.total)}` : undefined}
+          loading={loading}
+        />
+        <StatCard
+          label={t("server.swap")}
+          value={mem && mem.swapTotal ? fmtPct(pct(mem.swapUsed, mem.swapTotal)) : "—"}
+          icon={MonitorCog}
+          trend={mem ? `${formatBytes(mem.swapUsed)} / ${formatBytes(mem.swapTotal)}` : undefined}
+          loading={loading}
+        />
+        <StatCard
+          label={t("server.homesDisk")}
+          value={homesDisk ? fmtPct(pct(homesDisk.used, homesDisk.total)) : "—"}
+          icon={HardDrive}
+          trend={
+            homesDisk
+              ? `${formatBytes(homesDisk.free)} ${t("server.free")} · ${homesDisk.mount}`
+              : undefined
+          }
+          help={t("server.homesDiskHelp")}
+          loading={loading}
+        />
+      </div>
+
+      <div className="card overflow-x-auto">
+        <div className="px-5 pt-4 pb-2">
+          <h3 className="text-sm font-semibold text-fg-primary">{t("server.usageTitle")}</h3>
+          <p className="text-xs text-fg-muted">
+            {t("server.usageHelp", { s: (stats?.usage?.sampleMs ?? 1000) / 1000 })}
+          </p>
+        </div>
+        {stats && !stats.usage ? (
+          <p className="px-5 pb-4 text-sm text-fg-muted">{t("server.usageUnavailable")}</p>
+        ) : (
+          <table className="w-full min-w-[760px]" data-testid="server-usage-table">
+            <thead>
+              <tr className="border-b border-border text-left">
+                <th className={th}>{t("server.who")}</th>
+                <th className={`${th} w-[18%]`}>{t("server.cpu")}</th>
+                <th className={`${th} w-[22%]`}>{t("server.memory")}</th>
+                <th className={`${th} text-right`}>{t("server.processes")}</th>
+                <th className={`${th} w-[18%]`}>{t("server.home")}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {loading && (
+                <tr>
+                  <td colSpan={5} className="px-5 py-6 text-sm text-fg-muted">
+                    {t("server.sampling")}
+                  </td>
+                </tr>
+              )}
+              {stats?.usage?.groups.map((g) => {
+                const u = g.userId != null ? byId.get(g.userId) : undefined;
+                const home = g.userId != null && storage ? storage[g.userId] : undefined;
+                const isOpen = open.has(g.key);
+                const name = groupName(g);
+                return (
+                  <Fragment key={g.key}>
+                    <tr className="hover:bg-surface-4/40 transition-colors">
+                      <td className="px-5 py-3">
+                        <button
+                          type="button"
+                          onClick={() => toggle(g.key)}
+                          disabled={!g.top.length}
+                          aria-expanded={isOpen}
+                          className="flex items-center gap-2 text-left disabled:cursor-default"
+                        >
+                          {g.top.length ? (
+                            isOpen ? (
+                              <ChevronDown className="w-3.5 h-3.5 text-fg-muted" />
+                            ) : (
+                              <ChevronRight className="w-3.5 h-3.5 text-fg-muted" />
+                            )
+                          ) : (
+                            <span className="w-3.5" />
+                          )}
+                          {g.kind === "user" ? (
+                            <UserAvatar
+                              name={name}
+                              avatarAt={u?.avatarAt}
+                              userId={g.userId}
+                              className="h-6 w-6 text-[10px]"
+                            />
+                          ) : (
+                            <span className="flex h-6 w-6 items-center justify-center rounded-full bg-surface-4">
+                              <Server className="w-3.5 h-3.5 text-fg-muted" />
+                            </span>
+                          )}
+                          <span className="min-w-0">
+                            <span className="block text-sm text-fg-primary truncate">{name}</span>
+                            {g.kind === "user" && u?.displayName && (
+                              <span className="block text-[11px] text-fg-muted">{g.username}</span>
+                            )}
+                          </span>
+                        </button>
+                      </td>
+                      <td className="px-5 py-3">
+                        <div className="text-sm text-fg-primary tabular-nums">{fmtPct(g.cpu)}</div>
+                        <Meter value={g.cpu} label={`${name} ${t("server.cpu")}`} />
+                      </td>
+                      <td className="px-5 py-3">
+                        <div className="text-sm text-fg-primary tabular-nums">
+                          {formatBytes(g.memory)}{" "}
+                          <span className="text-fg-muted">({fmtPct(g.memoryPercent)})</span>
+                        </div>
+                        <Meter value={g.memoryPercent} label={`${name} ${t("server.memory")}`} />
+                      </td>
+                      <td className="px-5 py-3 text-right text-sm text-fg-secondary tabular-nums">
+                        {g.processes}
+                      </td>
+                      <td className="px-5 py-3">
+                        {home ? (
+                          <>
+                            <div className="text-sm text-fg-primary tabular-nums">
+                              {formatBytes(home.bytes)}
+                              {homesDisk && (
+                                <span className="text-fg-muted">
+                                  {" "}
+                                  ({fmtPct(pct(home.bytes, homesDisk.total))})
+                                </span>
+                              )}
+                            </div>
+                            {homesDisk && (
+                              <Meter
+                                value={pct(home.bytes, homesDisk.total)}
+                                label={`${name} ${t("server.home")}`}
+                              />
+                            )}
+                          </>
+                        ) : (
+                          <span className="text-sm text-fg-muted">—</span>
+                        )}
+                      </td>
+                    </tr>
+                    {isOpen &&
+                      g.top.map((p) => (
+                        <tr key={`${g.key}:${p.pid}`} className="bg-surface-2/40">
+                          <td className="pl-14 pr-5 py-1.5 text-xs text-fg-secondary font-mono truncate">
+                            {p.name} <span className="text-fg-muted">#{p.pid}</span>
+                          </td>
+                          <td className="px-5 py-1.5 text-xs text-fg-secondary tabular-nums">
+                            {fmtPct(p.cpu)}
+                          </td>
+                          <td className="px-5 py-1.5 text-xs text-fg-secondary tabular-nums">
+                            {formatBytes(p.memory)}
+                          </td>
+                          <td colSpan={2} />
+                        </tr>
+                      ))}
+                  </Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {stats && stats.disks.length > 0 && (
+        <div className="card overflow-x-auto">
+          <h3 className="px-5 pt-4 pb-2 text-sm font-semibold text-fg-primary">
+            {t("server.disks")}
+          </h3>
+          <table className="w-full min-w-[640px]" data-testid="server-disks-table">
+            <thead>
+              <tr className="border-b border-border text-left">
+                <th className={th}>{t("server.mount")}</th>
+                <th className={th}>{t("server.device")}</th>
+                <th className={`${th} w-[30%]`}>{t("server.used")}</th>
+                <th className={`${th} text-right`}>{t("server.free")}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {stats.disks.map((d) => (
+                <tr key={d.device}>
+                  <td className="px-5 py-3 text-sm text-fg-primary">
+                    <span className="font-mono">{d.mount}</span>
+                    {d.mount === stats.homesMount && (
+                      <span className="badge ml-2 py-0 text-[10px]">{t("server.homesBadge")}</span>
+                    )}
+                  </td>
+                  <td className="px-5 py-3 text-xs text-fg-secondary">
+                    <span className="font-mono">{d.device}</span> · {d.type}
+                    {d.kind && <span className="badge ml-2 py-0 text-[10px]">{d.kind}</span>}
+                  </td>
+                  <td className="px-5 py-3">
+                    <div className="text-sm text-fg-primary tabular-nums">
+                      {formatBytes(d.used)} / {formatBytes(d.total)}{" "}
+                      <span className="text-fg-muted">({fmtPct(pct(d.used, d.total))})</span>
+                    </div>
+                    <Meter value={pct(d.used, d.total)} label={d.mount} />
+                  </td>
+                  <td className="px-5 py-3 text-right text-sm text-fg-secondary tabular-nums">
+                    {formatBytes(d.free)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {stats && stats.gpus.length > 0 && (
+        <div className="card p-5 space-y-3">
+          <h3 className="text-sm font-semibold text-fg-primary">{t("server.gpus")}</h3>
+          {stats.gpus.map((g, i) => (
+            <div key={i} className="space-y-1">
+              <div className="flex justify-between text-sm">
+                <span className="text-fg-primary">{g.name}</span>
+                <span className="text-fg-muted tabular-nums">
+                  {fmtPct(g.utilization)} · {formatBytes(g.memoryUsed)} /{" "}
+                  {formatBytes(g.memoryTotal)}
+                </span>
+              </div>
+              <Meter value={g.utilization} label={g.name} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      <MemberTmuxCard isAdmin={isAdmin} />
+    </div>
+  );
+}

client/src/components/artifacts/ArtifactAddPanels.tsx

@@ -14,18 +14,19 @@
  *   and tick the ones to add; or type `name@marketplace` by hand, which is
  *   also where a link the server cannot read (ssh, a private repo) ends up.
  * - `FileUploadPanel` — one file from the user's computer (≤ 25 MB).
+ * - `SkillNameField`/`splitSkillMd` — also used by the page's skill editor.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { FileText, FolderOpen, Package, Sparkles, Upload, X } from "lucide-react";
+import { X } from "lucide-react";
 import { api, type MarketplaceInfo } from "../../lib/api";
 import type { Lane } from "../../lib/types";
 import { toast } from "../../lib/toast";
 
-const field = "w-full rounded border border-border bg-surface-1 px-2 py-1 text-sm text-fg-primary";
-const label = "block text-[11px] font-medium text-fg-secondary";
+const field = "input w-full";
+const label = "block text-xs text-fg-secondary";
 const hint = "text-[11px] text-fg-muted";
 
 /** The server's skill folder rule (server/lib/artifacts.js `skillSlug`). */
@@ -155,8 +156,19 @@ function Tabs<T extends string>({
   );
 }
 
+/** SKILL.md split for editing: its frontmatter `name`/`description` and the body. */
+export function splitSkillMd(text: string): { name: string; description: string; body: string } {
+  const clean = text.replace(/^\uFEFF/, "");
+  const fm = /^---\r?\n[\s\S]*?\r?\n---[^\n]*(\r?\n|$)/.exec(clean);
+  return {
+    name: frontmatterField(clean, "name"),
+    description: frontmatterField(clean, "description"),
+    body: (fm ? clean.slice(fm[0].length) : clean).replace(/^\s+/, ""),
+  };
+}
+
 /** The name field with the folder/command it becomes. */
-function SkillNameField({
+export function SkillNameField({
   value,
   onChange,
   disabled,
@@ -175,7 +187,7 @@ function SkillNameField({
         {t("skill.name")}
         {required ? " *" : ""}
         <input
-          className={`${field} mt-0.5`}
+          className={`${field} mt-1`}
           value={value}
           disabled={disabled}
           placeholder="release-notes"
@@ -296,7 +308,7 @@ export function SkillAddPanel({
       <label className={label}>
         {t("skill.description")}
         <textarea
-          className={`${field} mt-0.5`}
+          className={`${field} mt-1`}
           rows={2}
           value={description}
           disabled={many}
@@ -310,7 +322,7 @@ export function SkillAddPanel({
       <label className={label}>
         {t("form.title")}
         <input
-          className={`${field} mt-0.5`}
+          className={`${field} mt-1`}
           value={title}
           disabled={many}
           onChange={(e) => setTitle(e.target.value)}
@@ -362,7 +374,6 @@ export function SkillAddPanel({
               dragging ? "border-accent bg-accent/10" : "border-border"
             }`}
           >
-            <Upload className="mx-auto mb-1 h-5 w-5 text-fg-muted" />
             <p className="text-xs text-fg-secondary">{t("skill.dropHint")}</p>
             <div className="mt-2 flex flex-wrap justify-center gap-2">
               <button
@@ -370,14 +381,14 @@ export function SkillAddPanel({
                 className="btn-ghost text-xs"
                 onClick={() => fileInput.current?.click()}
               >
-                <FileText className="h-3.5 w-3.5" /> {t("skill.pickFiles")}
+                {t("skill.pickFiles")}
               </button>
               <button
                 type="button"
                 className="btn-ghost text-xs"
                 onClick={() => folderInput.current?.click()}
               >
-                <FolderOpen className="h-3.5 w-3.5" /> {t("skill.pickFolder")}
+                {t("skill.pickFolder")}
               </button>
             </div>
             <input
@@ -452,7 +463,10 @@ export function SkillAddPanel({
             />
           )}
           {meta}
-          <div className="flex justify-end">
+          <div className="flex justify-end gap-2 pt-1">
+            <button type="button" className="btn-ghost text-sm" onClick={onClose} disabled={busy}>
+              {t("form.cancel")}
+            </button>
             <button
               type="submit"
               className="btn-primary text-sm"
@@ -489,7 +503,7 @@ export function SkillAddPanel({
           <label className={label}>
             {t("skill.description")} *
             <textarea
-              className={`${field} mt-0.5`}
+              className={`${field} mt-1`}
               rows={2}
               value={description}
               placeholder={t("skill.descriptionHint")}
@@ -499,7 +513,7 @@ export function SkillAddPanel({
           <label className={label}>
             {t("skill.content")} *
             <textarea
-              className={`${field} mt-0.5 font-mono text-xs`}
+              className={`${field} mt-1 font-mono text-xs`}
               rows={10}
               value={content}
               placeholder={t("skill.contentHint")}
@@ -509,12 +523,15 @@ export function SkillAddPanel({
           <label className={label}>
             {t("form.title")}
             <input
-              className={`${field} mt-0.5`}
+              className={`${field} mt-1`}
               value={title}
               onChange={(e) => setTitle(e.target.value)}
             />
           </label>
-          <div className="flex justify-end">
+          <div className="flex justify-end gap-2 pt-1">
+            <button type="button" className="btn-ghost text-sm" onClick={onClose} disabled={busy}>
+              {t("form.cancel")}
+            </button>
             <button
               type="submit"
               className="btn-primary text-sm"
@@ -534,7 +551,7 @@ export function SkillAddPanel({
       {mode === "existing" && (
         <div className="space-y-2">
           <select
-            className={field}
+            className="select w-full"
             aria-label={t("form.workspace")}
             value={laneId ?? ""}
             onChange={(e) => setLaneId(e.target.value ? Number(e.target.value) : null)}
@@ -551,7 +568,6 @@ export function SkillAddPanel({
             <ul className="max-h-72 space-y-0.5 overflow-auto">
               {skills.map((s) => (
                 <li key={`${s.from}:${s.name}`} className="flex items-center gap-2 text-xs">
-                  <Sparkles className="h-3 w-3 shrink-0 text-fg-muted" />
                   <span className="min-w-0 flex-1 truncate text-fg-secondary">{s.name}</span>
                   <span className="text-fg-muted">
                     {t(s.from === "user" ? "form.fromUser" : "form.fromWorkspace")}
@@ -696,7 +712,7 @@ export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onCl
       >
         <label className={label}>
           {t("plugin.link")}
-          <div className="mt-0.5 flex gap-2">
+          <div className="mt-1 flex gap-2">
             <input
               className={field}
               value={link}
@@ -728,10 +744,7 @@ export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onCl
       {info && (
         <div className="space-y-2" data-testid="market-plugins">
           <div>
-            <p className="text-sm font-medium text-fg-primary">
-              <Package className="mr-1 inline h-4 w-4 text-fg-muted" />
-              {info.name}
-            </p>
+            <p className="text-sm font-medium text-fg-primary">{info.name}</p>
             {info.description && <p className={hint}>{info.description}</p>}
           </div>
           {info.plugins.length === 0 ? (
@@ -777,7 +790,15 @@ export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onCl
                   </li>
                 ))}
               </ul>
-              <div className="flex justify-end">
+              <div className="flex justify-end gap-2 pt-1">
+                <button
+                  type="button"
+                  className="btn-ghost text-sm"
+                  onClick={onClose}
+                  disabled={busy}
+                >
+                  {t("form.cancel")}
+                </button>
                 <button
                   type="button"
                   className="btn-primary text-sm"
@@ -853,7 +874,10 @@ export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onCl
               value={description}
               onChange={(e) => setDescription(e.target.value)}
             />
-            <div className="flex justify-end">
+            <div className="flex justify-end gap-2 pt-1">
+              <button type="button" className="btn-ghost text-sm" onClick={onClose} disabled={busy}>
+                {t("form.cancel")}
+              </button>
               <button
                 type="submit"
                 className="btn-primary text-sm"
@@ -902,7 +926,7 @@ export function FileUploadPanel({ onAdded }: { onAdded: () => void }) {
         <input
           type="file"
           data-testid="file-upload"
-          className="mt-0.5 block w-full text-xs text-fg-secondary"
+          className="mt-1 block w-full text-xs text-fg-secondary file:mr-3 file:cursor-pointer file:rounded-lg file:border file:border-border-light file:bg-surface-2 file:px-3 file:py-1.5 file:text-xs file:text-fg-primary hover:file:bg-surface-4"
           onChange={(e) => setFile(e.target.files?.[0] ?? null)}
         />
       </label>
@@ -920,7 +944,7 @@ export function FileUploadPanel({ onAdded }: { onAdded: () => void }) {
           className="btn-primary shrink-0 text-sm"
           disabled={busy || !file || tooBig}
         >
-          <Upload className="h-3.5 w-3.5" /> {t("file.upload")}
+          {t("file.upload")}
         </button>
       </div>
     </form>

client/src/components/config/FileViewer.tsx

@@ -4,7 +4,8 @@
  * already-fetched data as props (path/data/error) rather than fetching
  * itself, so it stays tool-agnostic — the orchestrator (Claude or Codex
  * config page) owns the fetch. A markdown file gets a Raw / Preview switch
- * (`MarkdownPreview`); Raw is the default.
+ * (`MarkdownPreview`), opening as Settings → Appearance says
+ * (`lib/markdownView.ts`: Preview by default).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -15,6 +16,7 @@ import { FileText, X, AlertCircle, Eye, Code2 } from "lucide-react";
 import type { CcFileResponse } from "../../lib/api";
 import { CopyButton } from "./configPrimitives";
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { readMarkdownPreview } from "../../lib/markdownView";
 
 export function FileViewer({
   state,
@@ -24,7 +26,7 @@ export function FileViewer({
   onClose: () => void;
 }) {
   const { t } = useTranslation("ccConfig");
-  const [preview, setPreview] = useState(false);
+  const [preview, setPreview] = useState(readMarkdownPreview);
   const canPreview = isMarkdown(state.path) && !!state.data;
   const panelRef = useRef<HTMLDivElement>(null);
   useDialog(true, panelRef, onClose);

client/src/components/conversation/AgentDetails.tsx

@@ -0,0 +1,276 @@
+/**
+ * @file AgentDetails.tsx
+ * @description What the chat shows of a subagent, like Claude Desktop: an
+ * Agent/Task call's facts (type, model, status, time, tokens, tool calls),
+ * the task it was given and the report it returned — read off the call, its
+ * result (`tool_result.agent`) and, for a background agent, the
+ * `<task-notification>` that closed it — and, one click further, the
+ * subagent's own conversation as a small chat right there in the step, every
+ * step of it. The chat's owner (ConversationView) supplies the links through
+ * `AgentContext`: which agent transcript a call launched, the notifications
+ * seen, and how to render one agent's conversation (a nested
+ * ConversationView — passed in, so this module never imports it back).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { createContext, useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CheckCircle2, ChevronRight, CircleSlash, Loader2, XCircle } from "lucide-react";
+import type { TranscriptContent, TranscriptMessage } from "../../lib/types";
+import { fmt, formatModelName, formatMs } from "../../lib/format";
+import { MarkdownContent } from "./MarkdownContent";
+
+export type AgentStatus = "running" | "done" | "error" | "stopped";
+
+/** One subagent as the chat knows it from the call that launched it. */
+export interface AgentRef {
+  /** The Agent/Task `tool_use` id. */
+  toolUseId: string;
+  /** Its own transcript's `agent_id`; null while nothing names it yet. */
+  agentId: string | null;
+  type: string;
+  description: string;
+  model: string | null;
+  status: AgentStatus;
+  background: boolean;
+  prompt: string | null;
+  report: string | null;
+  durationMs: number | null;
+  tokens: number | null;
+  toolUses: number | null;
+}
+
+/** What a `<task-notification>` said about a background agent. */
+export interface AgentNotice {
+  status: string;
+  result: string | null;
+  durationMs: number | null;
+  tokens: number | null;
+  toolUses: number | null;
+}
+
+export interface AgentLinks {
+  /** tool_use id → agent transcript id, from the session's transcript list. */
+  ids: Map<string, string>;
+  /** tool_use id → the notification that closed that background agent. */
+  notices: Map<string, AgentNotice>;
+  /** The session runs in a pane: a call with no result yet still works. */
+  live: boolean;
+  /** One agent's own conversation, as a chat that fills its box. */
+  render?: (agent: AgentRef) => React.ReactNode;
+}
+
+export const AgentContext = createContext<AgentLinks>({
+  ids: new Map(),
+  notices: new Map(),
+  live: false,
+});
+
+const AGENT_TOOLS = new Set(["Agent", "Task"]);
+export const isAgentCall = (b: TranscriptContent) =>
+  b.type === "tool_use" && AGENT_TOOLS.has(b.name ?? "");
+
+// The result names the agent's own transcript (`agent-<id>.jsonl`).
+const AGENT_ID = /agentId:\s*([\w-]+)/;
+const USAGE = /<usage>([\s\S]*?)<\/usage>/;
+
+const tag = (text: string, name: string) =>
+  text.match(new RegExp(`<${name}>([\\s\\S]*?)</${name}>`))?.[1]?.trim() ?? null;
+
+/** The time, tokens and tool calls of a `<usage>` block, in either form
+ *  Claude Code writes it: `<total_tokens>N</…>` tags or `total_tokens: N`. */
+export function parseUsage(text: string): Pick<AgentNotice, "durationMs" | "tokens" | "toolUses"> {
+  const body = text.match(USAGE)?.[1] ?? "";
+  const num = (...names: string[]) => {
+    for (const n of names) {
+      const v = body.match(new RegExp(`${n}(?:>|:\\s*)(\\d+)`))?.[1];
+      if (v) return Number(v);
+    }
+    return null;
+  };
+  return {
+    durationMs: num("duration_ms"),
+    tokens: num("subagent_tokens", "total_tokens"),
+    toolUses: num("tool_uses"),
+  };
+}
+
+/** Each `<task-notification>` in the transcript, by the call it closes. */
+export function agentNotices(messages: TranscriptMessage[]): Map<string, AgentNotice> {
+  const out = new Map<string, AgentNotice>();
+  for (const msg of messages) {
+    if (msg.type !== "user") continue;
+    for (const c of msg.content) {
+      if (c.type !== "text" || !c.text?.includes("<task-notification>")) continue;
+      for (const part of c.text.split("<task-notification>").slice(1)) {
+        const id = tag(part, "tool-use-id");
+        if (!id) continue;
+        out.set(id, {
+          status: tag(part, "status") ?? "completed",
+          result: tag(part, "result"),
+          ...parseUsage(part),
+        });
+      }
+    }
+  }
+  return out;
+}
+
+/** A report without the footer Claude Code appends for the orchestrator. */
+function stripFooter(text: string): string {
+  return text
+    .replace(USAGE, "")
+    .replace(/^agentId:.*$/m, "")
+    .trim();
+}
+
+/** Everything the chat can say about the subagent `block` launched. */
+export function agentRef(
+  block: TranscriptContent,
+  result: TranscriptContent | null | undefined,
+  links: AgentLinks
+): AgentRef {
+  const raw = block.input as Record<string, unknown> | undefined;
+  const input = raw && !("_truncated" in raw) ? raw : {};
+  const str = (v: unknown) => (typeof v === "string" && v ? v : null);
+  const id = block.id ?? "";
+  const facts = result?.agent;
+  const output = result?.output ?? "";
+  const background = facts?.status === "async_launched" || output.includes("Async agent launched");
+  const notice = background ? links.notices.get(id) : undefined;
+  const usage = !background && output ? parseUsage(output) : null;
+
+  let status: AgentStatus;
+  if (result?.is_error) status = "error";
+  else if (!result || (background && !notice)) status = links.live ? "running" : "stopped";
+  else if (notice && notice.status !== "completed")
+    status = notice.status === "failed" ? "error" : "stopped";
+  else status = "done";
+
+  return {
+    toolUseId: id,
+    agentId: facts?.id ?? output.match(AGENT_ID)?.[1] ?? links.ids.get(id) ?? null,
+    type: str(input.subagent_type) ?? "Agent",
+    description: str(input.description) ?? "",
+    model: facts?.model ?? str(input.model),
+    status,
+    background,
+    prompt: str(input.prompt),
+    report: background ? (notice?.result ?? null) : output ? stripFooter(output) || null : null,
+    durationMs: facts?.duration_ms ?? notice?.durationMs ?? usage?.durationMs ?? null,
+    tokens: facts?.tokens ?? notice?.tokens ?? usage?.tokens ?? null,
+    toolUses: facts?.tool_uses ?? notice?.toolUses ?? usage?.toolUses ?? null,
+  };
+}
+
+const STATUS_ICON: Record<AgentStatus, React.ReactNode> = {
+  running: <Loader2 className="h-3.5 w-3.5 flex-shrink-0 animate-spin text-accent" />,
+  done: <CheckCircle2 className="h-3.5 w-3.5 flex-shrink-0 text-status-success" />,
+  error: <XCircle className="h-3.5 w-3.5 flex-shrink-0 text-status-danger" />,
+  stopped: <CircleSlash className="h-3.5 w-3.5 flex-shrink-0 text-fg-muted" />,
+};
+
+/** One muted line: its status as an icon, then type · model · time ·
+ *  tokens · tool calls, as far as they are known. */
+export function AgentFacts({ agent }: { agent: AgentRef }) {
+  const { t } = useTranslation("sessions");
+  const parts = [
+    agent.type,
+    agent.model && formatModelName(agent.model),
+    agent.background && t("conversation.agent.background"),
+    agent.durationMs != null && formatMs(agent.durationMs),
+    agent.tokens != null && t("conversation.agentContext", { tokens: fmt(agent.tokens) }),
+    agent.toolUses != null && t("conversation.agent.toolUses", { count: agent.toolUses }),
+  ].filter(Boolean);
+  return (
+    <div
+      data-testid="agent-facts"
+      title={t(`conversation.agent.status.${agent.status}`)}
+      className="flex min-w-0 items-center gap-1.5 text-xs text-fg-muted"
+    >
+      {STATUS_ICON[agent.status]}
+      <span className="sr-only">{t(`conversation.agent.status.${agent.status}`)}</span>
+      <span className="truncate">{parts.join(" · ")}</span>
+    </div>
+  );
+}
+
+const linkClass =
+  "inline-flex items-center gap-0.5 text-xs text-fg-muted transition-colors hover:text-fg-secondary";
+
+/** The subagent's own conversation, a thread hung under its step by a line
+ *  on the left — as tall as it is, up to 24rem, then it scrolls. */
+export function AgentChatBox({ agent }: { agent: AgentRef }) {
+  const links = useContext(AgentContext);
+  return (
+    <div data-testid="agent-chat" className="mt-2 border-l-2 border-border pl-3">
+      {links.render?.(agent)}
+    </div>
+  );
+}
+
+/** An Agent/Task step opened in the chat: one line of facts, its report as
+ *  prose, and "View conversation ›", which puts the agent's own thread (its
+ *  task, every step, its reply) in the report's place. With no transcript
+ *  to show, the task it was given opens on its own instead. */
+export function AgentStepBody({
+  block,
+  result,
+}: {
+  block: TranscriptContent;
+  result: TranscriptContent | null;
+}) {
+  const { t } = useTranslation("sessions");
+  const links = useContext(AgentContext);
+  const agent = agentRef(block, result, links);
+  const canOpen = !!agent.agentId && !!links.render;
+  const [thread, setThread] = useState(false);
+  const [task, setTask] = useState(false);
+  return (
+    <div data-testid="agent-step" className="space-y-1.5">
+      <AgentFacts agent={agent} />
+      {thread ? (
+        <AgentChatBox agent={agent} />
+      ) : (
+        <>
+          {!canOpen && agent.prompt && task && (
+            <div className="max-h-60 overflow-auto border-l-2 border-border pl-3 text-fg-secondary">
+              <MarkdownContent text={agent.prompt} dense />
+            </div>
+          )}
+          {agent.report && (
+            <div
+              className={`max-h-60 overflow-auto ${agent.status === "error" ? "text-status-danger" : "text-fg-secondary"}`}
+            >
+              <MarkdownContent text={agent.report} dense />
+            </div>
+          )}
+        </>
+      )}
+      {canOpen ? (
+        <button
+          type="button"
+          data-testid="agent-open"
+          aria-expanded={thread}
+          onClick={() => setThread(!thread)}
+          className={linkClass}
+        >
+          {t(thread ? "conversation.agent.hide" : "conversation.agent.open")}
+          <ChevronRight className={`h-3 w-3 transition-transform ${thread ? "-rotate-90" : ""}`} />
+        </button>
+      ) : (
+        agent.prompt && (
+          <button
+            type="button"
+            aria-expanded={task}
+            onClick={() => setTask(!task)}
+            className={linkClass}
+          >
+            {t("conversation.agent.prompt")}
+            <ChevronRight className={`h-3 w-3 transition-transform ${task ? "rotate-90" : ""}`} />
+          </button>
+        )
+      )}
+    </div>
+  );
+}

client/src/components/conversation/ConversationView.tsx

@@ -14,6 +14,12 @@
  * `onOpenTerminal`) and hears how full the context is (`onContext`) and
  * whether its session has started (`onNotStarted`: no row yet — the CLI may
  * be asking in the terminal, e.g. to trust the folder, which this then says).
+ * A caller that knows the session has ended passes `ended`: nothing more is
+ * being written, so the catch-up poll drops from 3 s to 60 s and the
+ * sub-agent list stops being rescanned — a `new_event` frame, a reconnect or
+ * the view being shown again still fetch the tail at once. The main
+ * transcript hands MessageList its `sessionId`, so the list can read its
+ * background agents' own transcripts for their progress.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -67,6 +73,7 @@ import { api } from "../../lib/api";
 import { eventBus } from "../../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../../lib/remoteDataEvents";
 import { MessageList, promptTokens } from "./MessageList";
+import { agentNotices, type AgentLinks, type AgentRef } from "./AgentDetails";
 import { useSpin } from "../../hooks/useSpin";
 import { useOnScreen, isShown } from "../../hooks/useOnScreen";
 import { throttle } from "../../lib/throttle";
@@ -79,6 +86,9 @@ import type { TranscriptMessage, TranscriptInfo, WSMessage } from "../../lib/typ
 // hook event. A short visibility-gated poll closes that gap and also rescues
 // the conversation from missed/late WebSocket frames.
 const POLL_INTERVAL_MS = 3000;
+// An ended session writes nothing more: a slow safety poll only, in case it was
+// resumed somewhere whose frames this view missed.
+const ENDED_POLL_INTERVAL_MS = 60000;
 // Rescan the transcripts list periodically so new subagents that spawn
 // mid-session appear in the dropdown without a page reload.
 const TRANSCRIPTS_REFRESH_MS = 15000;
@@ -86,6 +96,9 @@ const TRANSCRIPTS_REFRESH_MS = 15000;
 // at most this often: the first event still fetches at once, the last is never
 // lost, and a long transcript is not re-read for every single frame.
 const EVENT_FETCH_MS = 1500;
+// The server saw this session's transcript grow (`transcript_changed`, itself
+// at most every 250 ms): the new lines are on disk, so read them nearly at once.
+const PUSH_FETCH_MS = 300;
 
 interface ConversationViewProps {
   sessionId: string;
@@ -93,8 +106,15 @@ interface ConversationViewProps {
   /** Fill the parent as a chat (a workspace's session view): no toolbar, no
    *  page-height cap — the parent sizes it and puts a composer under it. */
   fill?: boolean;
+  /** A subagent's conversation inside its step: no toolbar, as tall as its
+   *  content up to 24rem, then it scrolls. */
+  compact?: boolean;
   /** Opens a file named in a turn's "Edited N files" card. */
   onOpenFile?: (path: string) => void;
+  /** Opens an artifact card's file in the chat's artifact panel. */
+  onOpenArtifact?: (path: string) => void;
+  /** The messages on screen (for an artifact's versions), as they change. */
+  onMessages?: (messages: TranscriptMessage[]) => void;
   /** The session runs in a pane: show the step in progress. */
   live?: boolean;
   /** Changed (a chat's send): back to the end, and stick to it. */
@@ -110,13 +130,18 @@ interface ConversationViewProps {
   onContext?: (tokens: number, model: string | null) => void;
   /** A live pane's session has no row yet: the CLI has not started it. */
   onNotStarted?: (notStarted: boolean) => void;
+  /** The session has ended (and no pane holds it): poll slowly, if at all. */
+  ended?: boolean;
 }
 
 function ConversationViewPane({
   sessionId,
   initialTranscriptId,
   fill = false,
+  compact = false,
   onOpenFile,
+  onOpenArtifact,
+  onMessages,
   live = false,
   follow = 0,
   waiting = false,
@@ -124,22 +149,25 @@ function ConversationViewPane({
   stopped = 0,
   onContext,
   onNotStarted,
+  ended = false,
 }: ConversationViewProps) {
   const { t } = useTranslation("sessions");
   const [messages, setMessages] = useState<TranscriptMessage[]>([]);
+  const shown = messages;
   // A live pane's session has no row until its first hook — and Claude Code
   // runs no hook before the folder is trusted, so a trust prompt (or any
   // other question before the session starts) waits unseen in the terminal.
   const [notStarted, setNotStarted] = useState(false);
   useEffect(() => onNotStarted?.(notStarted), [notStarted, onNotStarted]);
+  useEffect(() => onMessages?.(shown), [shown, onMessages]);
   useEffect(() => {
     if (!onContext) return;
-    for (let i = messages.length - 1; i >= 0; i--) {
-      const m = messages[i]!;
+    for (let i = shown.length - 1; i >= 0; i--) {
+      const m = shown[i]!;
       if (m.type === "assistant" && m.usage)
         return onContext(promptTokens(m.usage), m.model ?? null);
     }
-  }, [messages, onContext]);
+  }, [shown, onContext]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(true);
   const [loadingHistory, setLoadingHistory] = useState(false);
@@ -174,9 +202,31 @@ function ConversationViewPane({
   // Refresh-button spinner state - separate from initial `loading` so the
   // existing skeleton doesn't blink during a manual refresh.
 
+  // A subagent's own conversation opens inside its step as a small chat: this
+  // same view, on that agent's transcript.
+  const renderAgent = useCallback(
+    (a: AgentRef) => (
+      <ConversationView
+        key={a.agentId}
+        sessionId={sessionId}
+        initialTranscriptId={a.agentId}
+        compact
+        live={live && a.status === "running"}
+        ended={a.status !== "running"}
+      />
+    ),
+    [sessionId, live]
+  );
+  const agentLinks = useMemo<AgentLinks>(() => {
+    const ids = new Map<string, string>();
+    for (const tr of transcripts) if (tr.tool_use_id) ids.set(tr.tool_use_id, tr.id);
+    return { ids, notices: agentNotices(shown), live, render: renderAgent };
+  }, [transcripts, shown, live, renderAgent]);
+
   // Load available transcript list (also rescanned on a short interval so
   // newly-spawned subagents appear in the dropdown without a page reload).
   useEffect(() => {
+    if (!sessionId) return;
     let cancelled = false;
     async function loadTranscripts() {
       try {
@@ -188,14 +238,18 @@ function ConversationViewPane({
       }
     }
     loadTranscripts();
-    const interval = window.setInterval(() => {
-      if (isShown(onScreen)) loadTranscripts();
-    }, TRANSCRIPTS_REFRESH_MS);
+    // An ended session spawns no new sub-agents: the load above (re-run when
+    // it ends, for the last ones) is enough.
+    const interval = ended
+      ? undefined
+      : window.setInterval(() => {
+          if (isShown(onScreen)) loadTranscripts();
+        }, TRANSCRIPTS_REFRESH_MS);
     return () => {
       cancelled = true;
       window.clearInterval(interval);
     };
-  }, [sessionId]);
+  }, [sessionId, ended]);
 
   // Sync external initialTranscriptId to internal state
   useEffect(() => {
@@ -212,6 +266,12 @@ function ConversationViewPane({
     firstLineRef.current = 0;
 
     async function load() {
+      // No session yet: no history.
+      if (!sessionId) {
+        setMessages([]);
+        setLoading(false);
+        return;
+      }
       try {
         setError(null);
         setLoading(true);
@@ -255,6 +315,7 @@ function ConversationViewPane({
   //     parsed message we've seen. The server already de-overlaps via
   //     afterLine, so we can safely append.
   const fetchNewMessages = useCallback(async () => {
+    if (!sessionId) return;
     if (fetchingRef.current) {
       // Coalesce: remember a trigger arrived during this fetch and re-run
       // exactly once when the in-flight request settles.
@@ -316,7 +377,12 @@ function ConversationViewPane({
     () => throttle(() => void fetchNewMessages(), EVENT_FETCH_MS),
     [fetchNewMessages]
   );
+  const fetchPushed = useMemo(
+    () => throttle(() => void fetchNewMessages(), PUSH_FETCH_MS),
+    [fetchNewMessages]
+  );
   useEffect(() => () => fetchSoon.cancel(), [fetchSoon]);
+  useEffect(() => () => fetchPushed.cancel(), [fetchPushed]);
   useEffect(() => {
     const unsubscribe = eventBus.subscribe((msg: WSMessage) => {
       // Hidden tab or hidden pane: catching up once on show is enough.
@@ -325,13 +391,14 @@ function ConversationViewPane({
         fetchSoon();
         return;
       }
-      if (msg.type !== "new_event") return;
+      if (msg.type !== "new_event" && msg.type !== "transcript_changed") return;
       const data = msg.data as { session_id?: string };
       if (data.session_id !== sessionId) return;
-      fetchSoon();
+      if (msg.type === "transcript_changed") fetchPushed();
+      else fetchSoon();
     });
     return unsubscribe;
-  }, [sessionId, fetchSoon, onScreen]);
+  }, [sessionId, fetchSoon, fetchPushed, onScreen]);
 
   onShowRef.current = () => {
     if (document.visibilityState === "visible") void fetchNewMessages();
@@ -355,9 +422,12 @@ function ConversationViewPane({
     let interval: number | null = null;
     function start() {
       if (interval !== null) return;
-      interval = window.setInterval(() => {
-        if (isShown(onScreen)) fetchNewMessages();
-      }, POLL_INTERVAL_MS);
+      interval = window.setInterval(
+        () => {
+          if (isShown(onScreen)) fetchNewMessages();
+        },
+        ended ? ENDED_POLL_INTERVAL_MS : POLL_INTERVAL_MS
+      );
     }
     function stop() {
       if (interval !== null) {
@@ -382,7 +452,7 @@ function ConversationViewPane({
       stop();
       document.removeEventListener("visibilitychange", onVisibility);
     };
-  }, [fetchNewMessages, onScreen]);
+  }, [fetchNewMessages, onScreen, ended]);
 
   // Manual refresh - surfaces a control in the toolbar so users can force
   // a sync without reloading the page.
@@ -490,7 +560,7 @@ function ConversationViewPane({
 
   // Auto-scroll to bottom after initial load
   useEffect(() => {
-    if (!loading && messages.length > 0) {
+    if (!loading && shown.length > 0) {
       scrollToBottom();
     }
   }, [loading, scrollToBottom]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -499,7 +569,7 @@ function ConversationViewPane({
     <div className={`relative flex flex-col ${fill ? "h-full" : ""}`} style={{ minHeight: 0 }}>
       {/* Toolbar - always rendered after the initial load so users can
           refresh even when no messages have streamed yet. */}
-      {!loading && !fill && (
+      {!loading && !fill && !compact && (
         <div className="flex items-center gap-3 mb-3 flex-shrink-0">
           {transcripts.length > 1 && (
             <div className="relative">
@@ -547,7 +617,13 @@ function ConversationViewPane({
         ref={scrollContainerRef}
         onScroll={handleScroll}
         className="flex-1 overflow-y-auto [scrollbar-gutter:stable]"
-        style={fill ? { minHeight: 0 } : { maxHeight: "calc(100vh - 320px)", minHeight: 200 }}
+        style={
+          compact
+            ? { maxHeight: "24rem" }
+            : fill
+              ? { minHeight: 0 }
+              : { maxHeight: "calc(100vh - 320px)", minHeight: 200 }
+        }
       >
         {/* A chat keeps its first turn clear of the pane's top-right controls
             (the outline's file button floats there). */}
@@ -570,10 +646,12 @@ function ConversationViewPane({
           )}
 
           {loading ? (
-            <div className="flex items-center justify-center py-12 text-fg-muted text-sm">
+            <div
+              className={`flex items-center justify-center text-fg-muted text-sm ${compact ? "py-3" : "py-12"}`}
+            >
               {t("conversation.loading")}
             </div>
-          ) : messages.length === 0 && notStarted ? (
+          ) : shown.length === 0 && notStarted ? (
             <div className="mx-auto max-w-md py-12 text-center">
               <p className="text-sm text-fg-secondary">{t("conversation.notStarted")}</p>
               <p className="mt-2 text-xs leading-relaxed text-fg-muted">
@@ -589,7 +667,7 @@ function ConversationViewPane({
                 </button>
               )}
             </div>
-          ) : messages.length === 0 ? (
+          ) : shown.length === 0 ? (
             <div className="mx-auto max-w-md py-12 text-center">
               <p className="text-sm text-fg-secondary">{t("conversation.empty")}</p>
               <p className="mt-2 text-xs leading-relaxed text-fg-muted">
@@ -598,13 +676,19 @@ function ConversationViewPane({
             </div>
           ) : (
             <MessageList
-              messages={messages}
+              messages={shown}
               loading={false}
               onOpenFile={onOpenFile}
+              onOpenArtifact={onOpenArtifact}
               live={live}
               waiting={waiting}
               onOpenTerminal={onOpenTerminal}
               stopped={stopped}
+              agentLinks={agentLinks}
+              compact={compact}
+              sessionId={
+                selectedTranscript && selectedTranscript !== "main" ? undefined : sessionId
+              }
             />
           )}
         </div>
@@ -631,7 +715,7 @@ function ConversationViewPane({
       )}
 
       {/* New messages indicator */}
-      {showNewMsg && !fill && (
+      {showNewMsg && !fill && !compact && (
         <button
           onClick={() => {
             scrollToBottom();

client/src/components/conversation/MarkdownContent.tsx

@@ -4,7 +4,7 @@
  * subset of CommonMark + GFM that actually appears in Claude Code transcripts:
  * fenced code blocks, ATX headings, ordered/unordered lists, task lists, blockquotes,
  * horizontal rules, simple tables, inline code, bold, italic, strikethrough, links,
- * and auto-linked URLs. A file path — absolute, or relative with a folder and
+ * and auto-linked URLs. A file path — absolute (POSIX or a Windows `E:\…`), or relative with a folder and
  * an extension (`server/lib/x.js`), with or without a `:line` suffix, bare, in
  * inline code or as a markdown link's target — opens through `OpenFileContext`
  * when the page provides one (the page resolves a relative one against its own
@@ -272,8 +272,14 @@ const PATH_RE = /^(?:\/[^\s/<>()'"`,;:]*[^\s/<>()'"`,;:.!?]){2,}(?::\d+(?::\d+)?
 // (`github.com/x.js`), not a folder — a leading one (`.claude/…`) is a folder.
 const REL_PATH_RE =
   /^(?:\.{1,2}\/)*(?:\.?[\w@-][\w@-]*\/)(?:[\w.@-]+\/)*[\w.@-]*[\w@-]\.[A-Za-z][A-Za-z0-9]{0,9}(?::\d+(?::\d+)?)?(?![\p{L}\p{N}_/])/u;
+// A Windows absolute path (`E:\notes\a.xlsx`, `C:/x/y.ts:9`): a drive letter and one segment at least.
+const WIN_PATH_RE =
+  /^[A-Za-z]:[\\/](?:[^\s\\/<>()'"`,;:|*?]+[\\/])*[^\s\\/<>()'"`,;:|*?]*[^\s\\/<>()'"`,;:|*?.!](?::\d+(?::\d+)?)?/;
+// In inline code the whole text is the path, so a Windows one may hold spaces.
+const WIN_CODE_PATH_RE = /^[A-Za-z]:[\\/][^<>"|?*\n]*[^\s<>"|?*\\/.]$/;
 /** A path at the start of `text`, absolute or relative, or null. */
-const matchPath = (text: string) => PATH_RE.exec(text)?.[0] ?? REL_PATH_RE.exec(text)?.[0] ?? null;
+const matchPath = (text: string) =>
+  PATH_RE.exec(text)?.[0] ?? WIN_PATH_RE.exec(text)?.[0] ?? REL_PATH_RE.exec(text)?.[0] ?? null;
 /** `a/b.ts:12:5` → `a/b.ts`: what is opened. */
 export const stripLine = (p: string) => p.replace(/(?::\d+){1,2}$/, "");
 // A markdown link target that is a page, not a file.
@@ -393,7 +399,13 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
           {codeM[1]}
         </code>
       );
-      push(matchPath(codeM[1]!) === codeM[1] ? <PathLink path={codeM[1]!}>{code}</PathLink> : code);
+      push(
+        matchPath(codeM[1]!) === codeM[1] || WIN_CODE_PATH_RE.test(codeM[1]!) ? (
+          <PathLink path={codeM[1]!}>{code}</PathLink>
+        ) : (
+          code
+        )
+      );
       i += codeM[0].length;
       continue;
     }

client/src/components/conversation/__tests__/AgentDetails.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * @file AgentDetails.test.tsx
+ * @description Verifies what the chat shows of a subagent: an Agent step's
+ * facts, task and report (from its result, or the task-notification that
+ * closed a background one), and that "View conversation" opens that
+ * agent's own conversation in place, rendered by the chat's owner.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { MessageList } from "../MessageList";
+import { agentNotices, agentRef, parseUsage, type AgentLinks } from "../AgentDetails";
+import type { TranscriptContent, TranscriptMessage } from "../../../lib/types";
+
+const at = new Date().toISOString();
+const m = (p: Partial<TranscriptMessage>): TranscriptMessage =>
+  ({ type: "user", timestamp: at, content: [], ...p }) as TranscriptMessage;
+
+const call: TranscriptContent = {
+  type: "tool_use",
+  id: "t1",
+  name: "Agent",
+  input: { description: "Map the hooks", subagent_type: "Explore", prompt: "Read **server/**" },
+};
+const links = (p: Partial<AgentLinks> = {}): AgentLinks => ({
+  ids: new Map(),
+  notices: new Map(),
+  live: false,
+  ...p,
+});
+
+describe("agentRef", () => {
+  it("reads a foreground agent's facts and report, without the orchestrator's footer", () => {
+    const a = agentRef(
+      call,
+      {
+        type: "tool_result",
+        id: "t1",
+        output: "The hooks live in server/routes/hooks.js.\n\nagentId: a1b2 (for resuming)",
+        agent: {
+          id: "a1b2",
+          model: "claude-opus-5-5",
+          status: "completed",
+          duration_ms: 65_000,
+          tokens: 12_000,
+          tool_uses: 7,
+        },
+      },
+      links()
+    );
+    expect(a).toMatchObject({
+      agentId: "a1b2",
+      type: "Explore",
+      status: "done",
+      background: false,
+      prompt: "Read **server/**",
+      report: "The hooks live in server/routes/hooks.js.",
+      durationMs: 65_000,
+      tokens: 12_000,
+      toolUses: 7,
+    });
+  });
+
+  it("closes a background agent with its notification's report and usage", () => {
+    const notice = m({
+      content: [
+        {
+          type: "text",
+          text: "<task-notification>\n<tool-use-id>t1</tool-use-id>\n<status>completed</status>\n<result>All done</result>\n<usage><subagent_tokens>88007</subagent_tokens><tool_uses>31</tool_uses><duration_ms>132350</duration_ms></usage>\n</task-notification>",
+        },
+      ],
+    });
+    const launched: TranscriptContent = {
+      type: "tool_result",
+      id: "t1",
+      output: "Async agent launched successfully.\nagentId: a9b4",
+    };
+    const running = agentRef(call, launched, links({ live: true }));
+    expect(running).toMatchObject({ status: "running", background: true, report: null });
+    const done = agentRef(call, launched, links({ notices: agentNotices([notice]) }));
+    expect(done).toMatchObject({
+      agentId: "a9b4",
+      status: "done",
+      report: "All done",
+      tokens: 88007,
+      toolUses: 31,
+      durationMs: 132350,
+    });
+  });
+
+  it("finds the transcript from the session's list when the result names none", () => {
+    const a = agentRef(call, null, links({ ids: new Map([["t1", "c3d4"]]) }));
+    expect(a).toMatchObject({ agentId: "c3d4", status: "stopped" });
+  });
+
+  it("parses the line form of a usage block", () => {
+    expect(parseUsage("<usage>total_tokens: 500\ntool_uses: 3\nduration_ms: 900</usage>")).toEqual({
+      tokens: 500,
+      toolUses: 3,
+      durationMs: 900,
+    });
+  });
+});
+
+describe("an Agent step in the chat", () => {
+  it("shows the agent's facts and report, and opens its conversation in place", () => {
+    const render_ = vi.fn((a: { agentId: string | null }) => <p>chat of {a.agentId}</p>);
+    render(
+      <MessageList
+        loading={false}
+        agentLinks={links({ render: render_ })}
+        messages={[
+          m({ sender: "user", content: [{ type: "text", text: "go" }] }),
+          m({ type: "assistant", sender: "assistant", stop_reason: "tool_use", content: [call] }),
+          m({
+            content: [
+              {
+                type: "tool_result",
+                id: "t1",
+                output: "Found **3** hooks",
+                agent: {
+                  id: "a1b2",
+                  model: null,
+                  status: "completed",
+                  duration_ms: null,
+                  tokens: null,
+                  tool_uses: 4,
+                },
+              },
+            ],
+          }),
+        ]}
+      />
+    );
+    fireEvent.click(screen.getByRole("button", { name: /ran an agent/i }));
+    expect(screen.getByTestId("agent-facts").textContent).toContain("Explore");
+    expect(screen.getByTestId("agent-facts").textContent).toContain("done");
+    expect(screen.getByTestId("agent-facts").textContent).toContain("4 tool calls");
+    expect(screen.getByTestId("agent-step").textContent).toContain("Found 3 hooks");
+    expect(screen.queryByTestId("agent-chat")).toBeNull();
+    fireEvent.click(screen.getByTestId("agent-open"));
+    expect(screen.getByTestId("agent-chat").textContent).toBe("chat of a1b2");
+    // The thread takes the report's place.
+    expect(screen.getByTestId("agent-step").textContent).not.toContain("Found 3 hooks");
+  });
+});

client/src/components/conversation/__tests__/ConversationView.pushed.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @file ConversationView.pushed.test.tsx
+ * @description The server says a session's transcript grew
+ * (`transcript_changed`): the chat showing that session reads the new lines
+ * at once, and again within a short window after a burst — not at the hook
+ * throttle's 1.5 s pace — while another session's notice fetches nothing.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ConversationView } from "../ConversationView";
+import { api } from "../../../lib/api";
+import { eventBus } from "../../../lib/eventBus";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      sessions: {
+        transcripts: vi.fn(async () => ({ transcripts: [] })),
+        transcript: vi.fn(async () => ({
+          messages: [
+            {
+              type: "user",
+              content: [{ type: "text", text: "hello" }],
+              timestamp: "2026-10-21T00:00:00Z",
+            },
+          ],
+          total: 1,
+          has_more: false,
+          first_line: 1,
+          last_line: 1,
+        })),
+      },
+    },
+  };
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+  vi.clearAllMocks();
+});
+
+const pushed = (session_id: string) =>
+  act(() => eventBus.publish({ type: "transcript_changed", data: { session_id } } as never));
+const calls = () => vi.mocked(api.sessions.transcript).mock.calls.length;
+
+describe("ConversationView on transcript_changed", () => {
+  it("reads its own session's new lines at once, and a burst within 300 ms", async () => {
+    render(<ConversationView sessionId="s1" fill live />);
+    await screen.findByText("hello");
+    vi.useFakeTimers();
+    const before = calls();
+    pushed("s1");
+    expect(calls()).toBe(before + 1);
+    pushed("s1");
+    pushed("s1");
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(350);
+    });
+    expect(calls()).toBe(before + 2);
+  });
+
+  it("ignores another session's transcript", async () => {
+    render(<ConversationView sessionId="s1" fill live />);
+    await screen.findByText("hello");
+    const before = calls();
+    pushed("s2");
+    await act(async () => {});
+    expect(calls()).toBe(before);
+  });
+});

client/src/components/conversation/__tests__/MarkdownContent.test.tsx

@@ -36,6 +36,20 @@ describe("file links", () => {
     expect(open.mock.calls).toEqual([["/a/b/c.ts"], ["docs/API.md"]]);
   });
 
+  it("opens a Windows path, bare or in inline code", () => {
+    const open = withOpen(
+      "File: `E:\\Jx2-2017\\notes\\HE-SO-REWARD.xlsx`. Also C:/src/a.ts:9, and `D:\\My Docs\\b.md`"
+    );
+    fireEvent.click(screen.getByRole("button", { name: "E:\\Jx2-2017\\notes\\HE-SO-REWARD.xlsx" }));
+    fireEvent.click(screen.getByRole("button", { name: "C:/src/a.ts:9" }));
+    fireEvent.click(screen.getByRole("button", { name: "D:\\My Docs\\b.md" }));
+    expect(open.mock.calls).toEqual([
+      ["E:\\Jx2-2017\\notes\\HE-SO-REWARD.xlsx"],
+      ["C:/src/a.ts"],
+      ["D:\\My Docs\\b.md"],
+    ]);
+  });
+
   it("opens a markdown link to a file instead of navigating", () => {
     const open = withOpen("[the panel](client/src/A%20B.tsx#L12) and [web](https://x.dev)");
     fireEvent.click(screen.getByRole("button", { name: "the panel" }));

client/src/components/conversation/__tests__/MessageList.agents.test.tsx

@@ -0,0 +1,118 @@
+/**
+ * @file MessageList.agents.test.tsx
+ * @description Verifies a live chat's background-agents card reads each
+ * running agent's own transcript (by the agentId its launch result names)
+ * and shows the step it is on and its context size (issue #81).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MessageList, agentProgress } from "../MessageList";
+import { api } from "../../../lib/api";
+import type { TranscriptMessage } from "../../../lib/types";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, api: { sessions: { transcript: vi.fn() } } };
+});
+
+const at = new Date().toISOString();
+const m = (p: Partial<TranscriptMessage>): TranscriptMessage =>
+  ({ type: "user", timestamp: at, content: [], ...p }) as TranscriptMessage;
+
+// The subagent's own transcript: its task, then a search still running.
+const tail: TranscriptMessage[] = [
+  m({ sender: "orchestrator", content: [{ type: "text", text: "Find copyId" }] }),
+  m({
+    type: "assistant",
+    sender: "assistant",
+    stop_reason: "tool_use",
+    usage: { input_tokens: 300, output_tokens: 20, cache_read_input_tokens: 54_000 },
+    content: [
+      {
+        type: "tool_use",
+        id: "g1",
+        name: "Grep",
+        input: { pattern: "copyId", description: "Searching for copyId" },
+      },
+    ],
+  }),
+];
+
+const main: TranscriptMessage[] = [
+  m({ sender: "user", content: [{ type: "text", text: "go" }] }),
+  m({
+    type: "assistant",
+    sender: "assistant",
+    stop_reason: "tool_use",
+    content: [
+      {
+        type: "tool_use",
+        id: "t1",
+        name: "Agent",
+        input: { description: "Checking copyId coverage", subagent_type: "Explore" },
+      },
+    ],
+  }),
+  m({
+    content: [
+      {
+        type: "tool_result",
+        id: "t1",
+        output: JSON.stringify([
+          { type: "text", text: "Async agent launched successfully.\nagentId: a4118367b503adecc" },
+        ]),
+      },
+    ],
+  }),
+  m({
+    type: "assistant",
+    sender: "assistant",
+    stop_reason: "end_turn",
+    content: [{ type: "text", text: "waiting" }],
+  }),
+];
+
+describe("background agents' progress", () => {
+  const rects = Element.prototype.getClientRects;
+  beforeEach(() => {
+    // jsdom lays nothing out: make the card count as on screen.
+    Element.prototype.getClientRects = () => [{}] as unknown as DOMRectList;
+    vi.mocked(api.sessions.transcript).mockResolvedValue({
+      messages: tail,
+      total: 2,
+      has_more: false,
+      first_line: 1,
+      last_line: 2,
+    });
+  });
+  afterEach(() => {
+    Element.prototype.getClientRects = rects;
+    vi.mocked(api.sessions.transcript).mockReset();
+  });
+
+  it("reads the step an agent is on and its context", () => {
+    expect(agentProgress(tail)).toEqual({ step: "Searching for copyId", context: 54_300 });
+    expect(agentProgress(tail.slice(0, 1))).toEqual({ step: null, context: 0 });
+  });
+
+  it("shows them on the agent's line, from its own transcript", async () => {
+    render(<MessageList live loading={false} messages={main} sessionId="s1" />);
+    await waitFor(() =>
+      expect(screen.getByTestId("chat-background-agent-step")).toHaveTextContent(
+        "Searching for copyId"
+      )
+    );
+    expect(api.sessions.transcript).toHaveBeenCalledWith("s1", {
+      agent_id: "a4118367b503adecc",
+      limit: 20,
+    });
+    expect(screen.getByTestId("chat-background-agent")).toHaveTextContent("↓ 54.3K tokens");
+  });
+
+  it("reads nothing without the session", () => {
+    render(<MessageList live loading={false} messages={main} />);
+    expect(screen.getByTestId("chat-background-agent")).toBeInTheDocument();
+    expect(api.sessions.transcript).not.toHaveBeenCalled();
+  });
+});

client/src/components/conversation/__tests__/MessageList.edits.test.tsx

@@ -46,7 +46,7 @@ describe("the Edited N files card", () => {
           user("fix it"),
           call("1", "Edit", "/w/a.ts"),
           result("1", { added: 3, removed: 1 }),
-          call("2", "Write", "/w/b.md"),
+          call("2", "Write", "/w/b.json"),
           result("2", { added: 10, removed: 0 }),
           call("3", "Edit", "/w/a.ts"),
           result("3", { added: 2, removed: 2 }),
@@ -65,8 +65,35 @@ describe("the Edited N files card", () => {
     expect(within(card).getByText("+15")).toBeTruthy();
     expect(within(card).getByText("+5")).toBeTruthy(); // a.ts: 3+2 added
     expect(within(card).queryByText("c.ts")).toBeNull(); // failed
-    fireEvent.click(within(card).getByTitle("/w/b.md"));
-    expect(onOpenFile).toHaveBeenCalledWith("/w/b.md");
+    fireEvent.click(within(card).getByTitle("/w/b.json"));
+    expect(onOpenFile).toHaveBeenCalledWith("/w/b.json");
+  });
+
+  it("shows a page or document the turn made as an artifact card, opened in the chat's panel", () => {
+    const onOpenFile = vi.fn();
+    const onOpenArtifact = vi.fn();
+    render(
+      <MessageList
+        loading={false}
+        onOpenFile={onOpenFile}
+        onOpenArtifact={onOpenArtifact}
+        messages={[
+          user("make a page"),
+          call("1", "Write", "/w/page.html"),
+          result("1", { added: 20, removed: 0 }),
+          call("2", "Edit", "/w/App.tsx"),
+          result("2", { added: 1, removed: 1 }),
+          user("thanks"),
+        ]}
+      />
+    );
+    const cards = screen.getAllByTestId("artifact-card");
+    // A .tsx it only edited is project code, not an artifact.
+    expect(cards).toHaveLength(1);
+    expect(cards[0]!.textContent).toContain("page");
+    fireEvent.click(cards[0]!);
+    expect(onOpenArtifact).toHaveBeenCalledWith("/w/page.html");
+    expect(within(screen.getByTestId("edited-files")).getByTitle("/w/App.tsx")).toBeTruthy();
   });
 
   it("drags a row as its @path attachment, and the header as every file", () => {
@@ -77,7 +104,7 @@ describe("the Edited N files card", () => {
           user("fix it"),
           call("1", "Edit", "/w/a.ts"),
           result("1", { added: 1, removed: 0 }),
-          call("2", "Write", "/w/b.md"),
+          call("2", "Write", "/w/b.json"),
           result("2", { added: 2, removed: 0 }),
         ]}
       />
@@ -90,14 +117,14 @@ describe("the Edited N files card", () => {
       });
       return data;
     };
-    const one = drag(within(card).getByTitle("/w/b.md"));
+    const one = drag(within(card).getByTitle("/w/b.json"));
     expect(JSON.parse(one["application/x-agenthub-attach"]!)).toEqual([
-      { path: "@/w/b.md", name: "b.md" },
+      { path: "@/w/b.json", name: "b.json" },
     ]);
-    expect(one["text/plain"]).toBe("/w/b.md");
+    expect(one["text/plain"]).toBe("/w/b.json");
     const all = drag(within(card).getByText("Edited 2 files"));
     expect(
       JSON.parse(all["application/x-agenthub-attach"]!).map((a: { path: string }) => a.path)
-    ).toEqual(["@/w/a.ts", "@/w/b.md"]);
+    ).toEqual(["@/w/a.ts", "@/w/b.json"]);
   });
 });

client/src/components/conversation/__tests__/MessageList.sender.test.tsx

@@ -5,12 +5,13 @@
  * layout), Main agent / System under their own label — instead of treating
  * every `type:"user"` line as the user (reported transcript mis-attribution) —
  * and folds a run of tool calls into one line; a typed `/command` or `@path`
- * shows as a chip.
+ * shows as a chip. A live chat lists the background subagents still running
+ * and does not call their turn done (issue #81).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect } from "vitest";
 import { fireEvent, render, screen, within } from "@testing-library/react";
-import { MessageList, turnStats, workLabel, workingOn } from "../MessageList";
+import { MessageList, backgroundAgents, turnStats, workLabel, workingOn } from "../MessageList";
 import type { TranscriptMessage } from "../../../lib/types";
 
 function msg(partial: Partial<TranscriptMessage>): TranscriptMessage {
@@ -137,7 +138,28 @@ describe("MessageList — sender attribution", () => {
         ]}
       />
     );
-    expect(screen.getByText(/↓ 123/)).toBeTruthy();
+    // In the hover bar's tooltip, beside the model and time.
+    expect(screen.getByTestId("chat-actions").getAttribute("title")).toMatch(/↓ 123/);
+  });
+
+  it("shows a local command as one line with its output, never its caveat", () => {
+    const line = (text: string, sender: "user" | "system" = "user") =>
+      msg({ type: "user", sender, content: [{ type: "text", text }] });
+    render(
+      <MessageList
+        loading={false}
+        messages={[
+          line("<local-command-caveat>Caveat: the command below…</local-command-caveat>", "system"),
+          line("<command-name>/model</command-name><command-args>opus</command-args>"),
+          line("<local-command-stdout>Set model to Opus</local-command-stdout>"),
+        ]}
+      />
+    );
+    const row = screen.getByTestId("chat-command");
+    expect(row).toHaveTextContent("/model opus");
+    expect(row).toHaveTextContent("Set model to Opus");
+    expect(screen.queryByText(/Caveat/)).toBeNull();
+    expect(screen.queryByTestId("chat-user")).toBeNull();
   });
 
   it("ends a live chat with the step still running", () => {
@@ -167,7 +189,9 @@ describe("MessageList — sender attribution", () => {
     const row = screen.getByTestId("chat-running-step");
     expect(row).toHaveTextContent("Run the full client suite");
     // Like the terminal: the turn's time since the prompt, and its output.
-    expect(row).toHaveTextContent(/\(1m \ds · ↑ 3\.5K tokens\)/);
+    // (the output shows on hover).
+    expect(row).toHaveTextContent(/1m \ds/);
+    expect(row).toHaveTextContent(/↑ 3\.5K tokens/);
     // Its result arrived: nothing is running any more.
     rerender(
       <MessageList
@@ -340,7 +364,88 @@ describe("MessageList — sender attribution", () => {
       content: [{ type: "text", text: "[Request interrupted by user]" }],
     });
     expect(state([prompt, call, result, stopped])).toBeNull();
+    // A local command (`/clear`) is answered by the CLI itself: no turn.
+    const local = (text: string) =>
+      msg({ type: "user", sender: "user", timestamp: at, content: [{ type: "text", text }] });
+    const clear = local("<command-name>/clear</command-name>");
+    const out = local("<local-command-stdout></local-command-stdout>");
+    expect(state([clear, out])).toBeNull();
+    // A prompt command (a skill) is still answered by the model.
+    expect(state([clear])).toEqual(thinking);
     // Silent for 15 minutes with nothing running: the turn died.
     expect(workingOn([prompt], new Map(), now + 20 * 60_000)).toBeNull();
   });
+
+  describe("background subagents", () => {
+    const at = new Date().toISOString();
+    const launch = msg({
+      type: "assistant",
+      sender: "assistant",
+      timestamp: at,
+      stop_reason: "tool_use",
+      content: [
+        {
+          type: "tool_use",
+          id: "t1",
+          name: "Agent",
+          input: { description: "Checking copyId coverage", subagent_type: "Explore" },
+        },
+      ],
+    });
+    const launched = msg({
+      timestamp: at,
+      content: [
+        {
+          type: "tool_result",
+          id: "t1",
+          output: JSON.stringify([{ type: "text", text: "Async agent launched successfully." }]),
+        },
+      ],
+    });
+    const reply = msg({
+      type: "assistant",
+      sender: "assistant",
+      timestamp: at,
+      stop_reason: "end_turn",
+      content: [{ type: "text", text: "waiting for the agent" }],
+    });
+    const notified = msg({
+      sender: "system",
+      timestamp: at,
+      content: [
+        {
+          type: "text",
+          text: "<task-notification>\n<task-id>a1</task-id>\n<tool-use-id>t1</tool-use-id>\n<status>completed</status>\n</task-notification>",
+        },
+      ],
+    });
+    const base = [msg({ sender: "user", timestamp: at }), launch, launched, reply];
+
+    it("lists an agent until its notification names the call", () => {
+      const results = (m: TranscriptMessage[]) =>
+        new Map(
+          m.flatMap((x) => x.content.filter((c) => c.type === "tool_result").map((c) => [c.id!, c]))
+        );
+      expect(backgroundAgents(base, results(base)).map((a) => a.block.id)).toEqual(["t1"]);
+      const all = [...base, notified];
+      expect(backgroundAgents(all, results(all))).toEqual([]);
+    });
+
+    it("does not call the turn done while the agent works", () => {
+      const { rerender } = render(<MessageList live loading={false} messages={base} />);
+      expect(screen.getByTestId("chat-background-agent")).toHaveTextContent(
+        "ExploreChecking copyId coverage"
+      );
+      expect(screen.getByTestId("chat-turn-done")).toHaveTextContent("Replied in");
+      expect(screen.getByTestId("chat-turn-done")).toHaveTextContent("1 agent still running");
+      rerender(<MessageList live loading={false} messages={[...base, notified]} />);
+      expect(screen.queryByTestId("chat-background-agents")).toBeNull();
+      expect(screen.getByTestId("chat-turn-done")).toHaveTextContent("Done in");
+    });
+
+    it("shows nothing once the session is no longer live", () => {
+      render(<MessageList loading={false} messages={base} />);
+      expect(screen.queryByTestId("chat-background-agents")).toBeNull();
+    });
+  });
 });

client/src/components/event-views/primitives.tsx

@@ -103,6 +103,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Copy, Check } from "lucide-react";
+import { copyText } from "../../lib/clipboard";
 
 // ───────────────────────── Copy button ─────────────────────────
 
@@ -111,13 +112,9 @@ export function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
 
   async function copy() {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      // Clipboard API can fail in insecure contexts - silently ignore.
-    }
+    if (!(await copyText(text, true))) return;
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
   }
 
   return (

client/src/components/lanes/AddLaneModal.tsx

@@ -9,7 +9,8 @@
  * manually-typed branch name; "Clone" runs `POST /api/lanes/clone` (an
  * https/ssh URL cloned into a folder of the user's, with their OWN SSH key or
  * HTTPS login — a 409 `ECREDENTIALS` opens a login row, `ESSHAUTH` points to
- * Settings → Git). There is no AI tool picker: the lane is created with the
+ * Settings → Git; **Partial clone** makes it blobless, and `CloneProgress`
+ * shows its queue place, then git's progress). There is no AI tool picker: the lane is created with the
  * default AI tool (Settings → AI Tools), and each new session picks its own
  * AI on the workspace home. Either
  * mode's path field can be filled by typing, by the CwdAutocomplete
@@ -30,6 +31,7 @@ import { useDialog } from "../../hooks/useDialog";
 import { CwdAutocomplete } from "../run/RunSetup";
 import { PathPickButton } from "../PathPickButton";
 import { api } from "../../lib/api";
+import { CloneProgress, newCloneToken } from "./CloneProgress";
 import type { CwdSuggestion } from "../../lib/api";
 import type { Lane, LaneWorktree } from "../../lib/types";
 import { useAiTools } from "../../hooks/useAiTools";
@@ -116,6 +118,9 @@ export function AddLaneModal({
   // server asked for one — a login for the URL's https host.
   const [cloneUrl, setCloneUrl] = useState("");
   const [cloneName, setCloneName] = useState("");
+  const [clonePartial, setClonePartial] = useState(false);
+  /** The running clone's progress token (CloneProgress polls it). */
+  const [cloneToken, setCloneToken] = useState<string | null>(null);
   const [login, setLogin] = useState<{
     host: string;
     username: string;
@@ -159,6 +164,7 @@ export function AddLaneModal({
     setMode("repo");
     setCloneUrl("");
     setCloneName("");
+    setClonePartial(false);
     setLogin(null);
     setSshRefused(false);
     setSourceRepo("");
@@ -236,13 +242,17 @@ export function AddLaneModal({
       const url = cloneUrl.trim();
       if (!url) return;
       setSshRefused(false);
+      const progressToken = newCloneToken();
+      setCloneToken(progressToken);
       try {
         const result = await api.lanes.clone({
+          progressToken,
           url,
           parent: repo,
           name: cloneName.trim() || undefined,
           title: name || undefined,
           tool,
+          ...(clonePartial ? { partial: true } : {}),
           ...(login?.username.trim() && login.token
             ? {
                 credentials: {
@@ -274,6 +284,8 @@ export function AddLaneModal({
           setError(err instanceof Error ? err.message : String(err));
         }
         setBusy(false);
+      } finally {
+        setCloneToken(null);
       }
       return;
     }
@@ -547,6 +559,23 @@ export function AddLaneModal({
                 spellCheck={false}
                 className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
               />
+              <label
+                className="mt-2 flex items-center gap-1.5 text-[11px] text-fg-secondary"
+                title={t("clone.partialHint")}
+              >
+                <input
+                  type="checkbox"
+                  data-testid="add-lane-clone-partial"
+                  checked={clonePartial}
+                  onChange={(e) => setClonePartial(e.target.checked)}
+                />
+                {t("clone.partial")}
+              </label>
+              {cloneToken && (
+                <div className="mt-2">
+                  <CloneProgress token={cloneToken} />
+                </div>
+              )}
             </div>
           )}
 

client/src/components/lanes/CloneHereDialog.tsx

@@ -0,0 +1,224 @@
+/**
+ * @file CloneHereDialog.tsx
+ * @description The Files page's **New → Clone repository**: clones a URL into
+ * the folder the File Explorer has open, through the same
+ * `POST /api/lanes/clone` as Add workspace → Clone — the server holds the URL
+ * to its allowlist and the folder to the user's own, and clones as the
+ * folder's account with that account's own SSH key / HTTPS login — and opens
+ * a workspace on the new folder. A 409 `ECREDENTIALS` opens a login row (sent
+ * once, optionally remembered), `ESSHAUTH` points to Settings → Git.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { FolderGit2 } from "lucide-react";
+import { api } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { useDialog } from "../../hooks/useDialog";
+import { cloneDirName } from "./AddLaneModal";
+
+type Login = { host: string; username: string; token: string; remember: boolean };
+
+export function CloneHereDialog({
+  open,
+  parent,
+  onClose,
+  onCloned,
+}: {
+  open: boolean;
+  /** The absolute folder the clone goes into. */
+  parent: string;
+  onClose: () => void;
+  onCloned: (lane: Lane, path: string) => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  const [url, setUrl] = useState("");
+  const [name, setName] = useState("");
+  const [login, setLogin] = useState<Login | null>(null);
+  const [sshRefused, setSshRefused] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  useDialog(open, panelRef, busy ? () => {} : onClose);
+
+  useEffect(() => {
+    if (!open) return;
+    setUrl("");
+    setName("");
+    setLogin(null);
+    setSshRefused(false);
+    setBusy(false);
+    setError(null);
+  }, [open, parent]);
+
+  if (!open) return null;
+  const folder = name.trim() || cloneDirName(url);
+  const into = `${parent.replace(/\/+$/, "")}/${folder || "…"}`;
+
+  const submit = async () => {
+    const u = url.trim();
+    if (!u || busy) return;
+    setBusy(true);
+    setError(null);
+    setSshRefused(false);
+    try {
+      const result = await api.lanes.clone({
+        url: u,
+        parent,
+        name: name.trim() || undefined,
+        ...(login?.username.trim() && login.token
+          ? {
+              credentials: {
+                username: login.username.trim(),
+                password: login.token,
+                remember: login.remember,
+              },
+            }
+          : {}),
+      });
+      onCloned(result.lane, result.path);
+    } catch (err) {
+      const e = err as { code?: string; auth?: { host?: string }; message?: string };
+      const host = e.auth?.host || u;
+      if (e.code === "ECREDENTIALS") {
+        setError(t(login?.token ? "clone.loginRejected" : "clone.loginNeeded", { host }));
+        setLogin((l) => ({
+          host,
+          username: l?.username ?? "",
+          token: "",
+          remember: l?.remember ?? true,
+        }));
+      } else if (e.code === "ESSHAUTH") {
+        setSshRefused(true);
+        setError(t("clone.sshRefused", { host }));
+      } else {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+      setBusy(false);
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-3"
+      onClick={busy ? undefined : onClose}
+      // A portal still bubbles through React: keep keys away from the File
+      // Explorer's shortcuts (Backspace = up a folder, Delete = delete).
+      onKeyDown={(e) => e.stopPropagation()}
+      role="presentation"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        data-testid="fx-clone-dialog"
+        className="w-full max-w-lg rounded-xl border border-border bg-surface-1 p-4 shadow-2xl shadow-black/50"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 id={titleId} className="mb-3 flex items-center gap-2 text-sm font-semibold text-fg-primary">
+          <FolderGit2 className="h-4 w-4" />
+          {t("fx.cloneRepo")}
+        </h2>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            void submit();
+          }}
+          className="space-y-3"
+        >
+          <div>
+            <label className="mb-1 block text-xs text-fg-secondary" htmlFor={`${titleId}-url`}>
+              {t("clone.urlLabel")}
+            </label>
+            <input
+              id={`${titleId}-url`}
+              autoFocus
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://host/owner/repo.git"
+              disabled={busy}
+              className="input w-full font-mono text-xs"
+            />
+            <p className="mt-1 text-[11px] text-fg-muted">{t("clone.urlHint")}</p>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-fg-secondary" htmlFor={`${titleId}-name`}>
+              {t("clone.nameLabel")}
+            </label>
+            <input
+              id={`${titleId}-name`}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={cloneDirName(url)}
+              disabled={busy}
+              className="input w-full font-mono text-xs"
+            />
+            <p className="mt-1 break-all text-[11px] text-fg-muted">
+              {t("clone.parentHint", { path: into })}
+            </p>
+          </div>
+          {login && (
+            <div data-testid="fx-clone-login" className="space-y-2 rounded-md border border-border p-2">
+              <input
+                aria-label={t("clone.username")}
+                placeholder={t("clone.username")}
+                autoComplete="username"
+                value={login.username}
+                onChange={(e) => setLogin({ ...login, username: e.target.value })}
+                disabled={busy}
+                className="input w-full text-xs"
+              />
+              <input
+                aria-label={t("clone.token")}
+                placeholder={t("clone.token")}
+                type="password"
+                autoComplete="current-password"
+                value={login.token}
+                onChange={(e) => setLogin({ ...login, token: e.target.value })}
+                disabled={busy}
+                className="input w-full text-xs"
+              />
+              <label className="flex items-center gap-2 text-xs text-fg-secondary">
+                <input
+                  type="checkbox"
+                  checked={login.remember}
+                  onChange={(e) => setLogin({ ...login, remember: e.target.checked })}
+                  disabled={busy}
+                />
+                {t("clone.remember")}
+              </label>
+            </div>
+          )}
+          {error && (
+            <p role="alert" className="text-xs text-status-danger">
+              {error}{" "}
+              {sshRefused && (
+                <a href="/settings/git#git-identity" className="underline">
+                  {t("clone.sshSettings")}
+                </a>
+              )}
+            </p>
+          )}
+          <div className="flex justify-end gap-2">
+            <button type="button" onClick={onClose} disabled={busy} className="btn-ghost text-xs">
+              {t("fx.cancel")}
+            </button>
+            <button
+              type="submit"
+              disabled={busy || !url.trim()}
+              className="btn-primary text-xs"
+              data-testid="fx-clone-submit"
+            >
+              {busy ? t("clone.cloning") : t("fx.cloneSubmit")}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body
+  );
+}

client/src/components/lanes/CloneProgress.tsx

@@ -0,0 +1,93 @@
+/**
+ * @file CloneProgress — the live line under a running clone: its place in the
+ * server's clone queue while it waits (clones run a few at a time machine-wide,
+ * `server/lib/clone-queue.js`), then git's own phase, percent, size and speed
+ * with a bar. It polls `GET /api/lanes/clone/progress/:token` every second for
+ * the token the clone's POST carried (`newCloneToken`); a 404 — the POST not
+ * yet arrived, or an older server — just shows nothing yet.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type CloneProgressView } from "../../lib/api";
+
+const POLL_MS = 1000;
+
+/** A fresh, unguessable progress token (works on plain http, unlike randomUUID). */
+export function newCloneToken(): string {
+  const bytes = new Uint8Array(16);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+export function CloneProgress({ token }: { token: string }) {
+  const { t } = useTranslation("lanes");
+  const [view, setView] = useState<CloneProgressView | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    setView(null);
+    // Never throws: progress is a courtesy, the clone's own answer decides.
+    const poll = () =>
+      Promise.resolve()
+        .then(() => api.lanes.cloneProgress(token))
+        .then((v) => {
+          if (alive) setView(v);
+        })
+        .catch(() => {});
+    void poll();
+    const timer = setInterval(() => void poll(), POLL_MS);
+    return () => {
+      alive = false;
+      clearInterval(timer);
+    };
+  }, [token]);
+
+  if (!view || view.state === "done" || view.state === "failed") return null;
+
+  if (view.state === "queued") {
+    return (
+      <p data-testid="clone-progress" className="text-[11px] text-status-warning">
+        {t("clone.queued", {
+          position: view.position ?? 1,
+          waiting: view.waiting,
+          running: view.running,
+          limit: view.limit,
+        })}
+      </p>
+    );
+  }
+
+  const phase = view.phase
+    ? view.phase === "other"
+      ? view.label || ""
+      : t(`clone.phase.${view.phase}`)
+    : t("clone.connecting");
+  const percent = view.percent ?? 0;
+  return (
+    <div data-testid="clone-progress" className="space-y-1">
+      <p className="flex justify-between gap-2 text-[11px] text-fg-secondary">
+        <span className="truncate">
+          {phase}
+          {view.phase ? ` ${percent}%` : ""}
+        </span>
+        {view.detail && (
+          <span className="shrink-0 font-mono text-[10px] text-fg-muted">{view.detail}</span>
+        )}
+      </p>
+      {view.phase && (
+        <div
+          className="h-1 overflow-hidden rounded bg-surface-2"
+          role="progressbar"
+          aria-valuenow={percent}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label={phase}
+        >
+          <div className="h-full bg-accent-solid transition-all" style={{ width: `${percent}%` }} />
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/lanes/CloneSourcesForm.tsx

@@ -4,18 +4,62 @@
  * (`POST /api/lanes/:id/sources/clone`, the server picks the folder) and
  * added as an extra folder, one after another. A host that wants a login
  * (409 `ECREDENTIALS`) opens one login row; Retry re-runs only the failed
- * URLs with it, like Add workspace → Clone.
+ * URLs with it, like Add workspace → Clone. Before anything runs, each URL
+ * is checked against the user's own git identity (`GET /api/me/git`): an SSH
+ * link while the account has no SSH key is not cloned at all — the user is
+ * sent to Settings → Git first — and an HTTPS host with no saved login offers
+ * the login row up front (optional: a public repo needs none). The identity is
+ * read again when the window regains focus, so a key made in another tab
+ * counts at once. The running clone shows its queue place, then git's
+ * progress (`CloneProgress`); **Partial clone** sends `partial: true`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Check, Loader2, X } from "lucide-react";
-import { api, type LaneSourcesView } from "../../lib/api";
+import { api, type GitIdentity, type LaneSourcesView } from "../../lib/api";
+import { CloneProgress, newCloneToken } from "./CloneProgress";
 
-type Row = { url: string; state: "wait" | "busy" | "done" | "failed"; note?: string };
+type Row = {
+  url: string;
+  state: "wait" | "busy" | "done" | "failed";
+  note?: string;
+  /** The note points at Settings → Git (no key, or a key the host refused). */
+  ssh?: boolean;
+  /** While busy: the progress token CloneProgress polls. */
+  token?: string;
+};
 type Login = { host: string; username: string; token: string; remember: boolean };
 
+/** How a clone URL reaches its host: `ssh://…` or scp-like `user@host:path`, else HTTPS. */
+export function cloneTarget(url: string): { kind: "ssh" | "https"; host: string } | null {
+  const scp = /^(?:[^@\s/]+@)?([^:/\s]+):(?!\/\/)/.exec(url);
+  if (scp?.[1]) return { kind: "ssh", host: scp[1] };
+  try {
+    const u = new URL(url);
+    if (u.protocol === "ssh:") return { kind: "ssh", host: u.hostname };
+    if (u.protocol === "https:" || u.protocol === "http:") return { kind: "https", host: u.host };
+  } catch {
+    /* not a URL yet — the server's allowlist answers that one */
+  }
+  return null;
+}
+
+/** What the identity lacks for one URL: `ssh` blocks the clone, `https` only asks. */
+function missingFor(
+  url: string,
+  id: GitIdentity | null
+): { kind: "ssh" | "https"; host: string } | null {
+  const target = cloneTarget(url);
+  if (!id || !target) return null;
+  if (target.kind === "ssh") {
+    const keys = id.sshKeys?.length ?? (id.ssh ? 1 : 0);
+    return keys > 0 ? null : target;
+  }
+  return id.https.some((h) => h.host === target.host) ? null : target;
+}
+
 export function CloneSourcesForm({
   laneId,
   parent,
@@ -31,6 +75,25 @@ export function CloneSourcesForm({
   const [rows, setRows] = useState<Row[]>([]);
   const [busy, setBusy] = useState(false);
   const [login, setLogin] = useState<Login | null>(null);
+  const [partial, setPartial] = useState(false);
+  const [identity, setIdentity] = useState<GitIdentity | null>(null);
+
+  // An unknown identity (an older server, a failed read) checks nothing: the
+  // server's own ECREDENTIALS / ESSHAUTH answers still cover it.
+  const loadIdentity = useCallback(
+    () =>
+      Promise.resolve()
+        .then(() => api.gitIdentity.get())
+        .then(setIdentity)
+        .catch(() => {}),
+    []
+  );
+  useEffect(() => {
+    void loadIdentity();
+    const onFocus = () => void loadIdentity();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [loadIdentity]);
 
   const urls = (s: string) => [
     ...new Set(
@@ -44,16 +107,27 @@ export function CloneSourcesForm({
   const cloneAll = async (list: string[]) => {
     if (busy || !list.length) return;
     setBusy(true);
-    const next: Row[] = list.map((url) => ({ url, state: "wait" }));
+    // An SSH link with no key on the account would only fail at the host:
+    // it is not tried, and its row says what to set up first.
+    const next: Row[] = list.map((url) => {
+      const miss = missingFor(url, identity);
+      return miss?.kind === "ssh"
+        ? { url, state: "failed", note: t("clone.sshNoKey", { host: miss.host }), ssh: true }
+        : { url, state: "wait" };
+    });
     const show = () => setRows([...next]);
     show();
     let asked: Login | null = null;
     for (const row of next) {
+      if (row.state === "failed") continue;
       row.state = "busy";
+      row.token = newCloneToken();
       show();
       try {
         const view = await api.lanes.cloneFolder(laneId, {
           url: row.url,
+          progressToken: row.token,
+          ...(partial ? { partial: true } : {}),
           ...(login?.username.trim() && login.token
             ? {
                 credentials: {
@@ -80,10 +154,12 @@ export function CloneSourcesForm({
           };
         } else if (e.code === "ESSHAUTH") {
           row.note = t("clone.sshRefused", { host });
+          row.ssh = true;
         } else {
           row.note = e.message || String(err);
         }
       }
+      row.token = undefined;
       show();
     }
     if (asked) setLogin(asked);
@@ -99,6 +175,18 @@ export function CloneSourcesForm({
 
   const failed = rows.filter((r) => r.state === "failed").map((r) => r.url);
 
+  // Checked as the user types, so a missing key is said before Clone is pressed.
+  const missing = urls(text)
+    .map((u) => missingFor(u, identity))
+    .filter((m): m is NonNullable<typeof m> => m !== null);
+  const sshHosts = [...new Set(missing.filter((m) => m.kind === "ssh").map((m) => m.host))];
+  const httpsHosts = [...new Set(missing.filter((m) => m.kind === "https").map((m) => m.host))];
+  const settingsLink = (
+    <a href="/settings/git#git-identity" target="_blank" rel="noreferrer" className="underline">
+      {t("clone.sshSettings")}
+    </a>
+  );
+
   return (
     <div className="space-y-2 border-t border-border-light pt-2" data-testid="workspace-clone">
       <p className="text-[10px] uppercase tracking-wide text-fg-muted">{t("home.cloneFolders")}</p>
@@ -112,6 +200,41 @@ export function CloneSourcesForm({
         className="w-full rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
       />
       <p className="text-[11px] text-fg-muted">{t("home.cloneHint", { path: parent })}</p>
+      <label
+        className="flex items-center gap-1.5 text-[11px] text-fg-secondary"
+        title={t("clone.partialHint")}
+      >
+        <input
+          type="checkbox"
+          data-testid="workspace-clone-partial"
+          checked={partial}
+          onChange={(e) => setPartial(e.target.checked)}
+        />
+        {t("clone.partial")}
+      </label>
+      {sshHosts.length > 0 && (
+        <p
+          role="alert"
+          data-testid="workspace-clone-need-ssh"
+          className="text-[11px] text-status-danger"
+        >
+          {t("home.cloneNeedSsh", { hosts: sshHosts.join(", ") })} {settingsLink}
+        </p>
+      )}
+      {httpsHosts.length > 0 && !login && (
+        <p data-testid="workspace-clone-need-login" className="text-[11px] text-status-warning">
+          {t("home.cloneNeedLogin", { hosts: httpsHosts.join(", ") })}{" "}
+          <button
+            type="button"
+            className="underline"
+            onClick={() =>
+              setLogin({ host: httpsHosts[0] ?? "", username: "", token: "", remember: true })
+            }
+          >
+            {t("home.cloneEnterLogin")}
+          </button>
+        </p>
+      )}
       {login && (
         <div className="space-y-1.5 rounded border border-border-light p-2">
           <div className="flex gap-2">
@@ -178,7 +301,17 @@ export function CloneSourcesForm({
                   {r.url}
                 </span>
               </span>
-              {r.note && <span className="ml-[18px] block text-status-danger">{r.note}</span>}
+              {r.state === "busy" && r.token && (
+                <div className="ml-[18px] mt-0.5">
+                  <CloneProgress token={r.token} />
+                </div>
+              )}
+              {r.note && (
+                <span className="ml-[18px] block text-status-danger">
+                  {r.note}
+                  {r.ssh && <> {settingsLink}</>}
+                </span>
+              )}
             </li>
           ))}
         </ul>

client/src/components/lanes/LaneChangesPanel.tsx

@@ -106,6 +106,7 @@ import {
 import { api, gitTarget } from "../../lib/api";
 import { usePermissions } from "../AuthGate";
 import { pasteToLane } from "../../lib/panePaste";
+import { readMarkdownPreview } from "../../lib/markdownView";
 import { confirmDialog, confirmDiscard as askDiscard } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
@@ -873,9 +874,10 @@ export function LaneChangesPanel({
   const [layout, setLayout] = useState<DiffLayout>(wide ? "split" : "unified");
   useEffect(() => setLayout(wide ? "split" : "unified"), [wide]);
   const [whole, setWhole] = useState(false);
-  // A whole markdown file shown rendered instead of as source; per file.
-  const [mdPreview, setMdPreview] = useState(false);
-  useEffect(() => setMdPreview(false), [openFile]);
+  // A whole markdown file shown rendered instead of as source; per file, each
+  // one opening as Settings → Appearance says (`lib/markdownView.ts`).
+  const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
+  useEffect(() => setMdPreview(readMarkdownPreview()), [openFile]);
   const [data, setData] = useState<LaneChanges | null>(null);
   // A folder that is not a repo (an empty new workspace, a parent of clones)
   // has no changes, review or history — only its files, which Files reads
@@ -1061,6 +1063,9 @@ export function LaneChangesPanel({
   const [historyLoading, setHistoryLoading] = useState(false);
   useEffect(() => {
     if (mode !== "history") return;
+    // A reply for the previous ref/file/page lands after the next request
+    // started: drop it, or it overwrites the list the user is looking at.
+    let live = true;
     setHistoryLoading(true);
     void api.lanes
       .gitLog(target, {
@@ -1068,16 +1073,23 @@ export function LaneChangesPanel({
         ...(historyRef ? { ref: historyRef } : {}),
         ...(historyFile ? { file: historyFile } : {}),
       })
-      .then(forLane(laneId, (r) => setCommits(r.commits)))
-      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
-      .finally(() => laneNow.current === laneId && setHistoryLoading(false));
+      .then(forLane(laneId, (r) => live && setCommits(r.commits)))
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => live && laneNow.current === laneId && setHistoryLoading(false));
+    return () => {
+      live = false;
+    };
   }, [mode, laneId, reread, historyLimit, historyRef, historyFile]);
   useEffect(() => {
     if (mode !== "history") return;
+    let live = true;
     void api.lanes
       .gitBranches(target)
-      .then(forLane(laneId, (r) => setHistoryBranches(r.branches)))
-      .catch(() => setHistoryBranches([]));
+      .then(forLane(laneId, (r) => live && setHistoryBranches(r.branches)))
+      .catch(() => live && setHistoryBranches([]));
+    return () => {
+      live = false;
+    };
   }, [mode, laneId, reread]);
 
   // Re-run when a lane switch empties the cache too: the full-width sidebar
@@ -1171,24 +1183,33 @@ export function LaneChangesPanel({
   // own fetch — and only while the viewer is actually showing it.
   useEffect(() => {
     if (mode !== "file" || !(whole || editable) || !openFile) return;
+    // Opening file B before file A's read came back must not show (and let the
+    // editor save) A's text under B's header.
+    let live = true;
     void api.lanes
       .gitFile(target, openFile, range === "commit" && sha ? sha : "work")
       .then(
-        forLane(laneId, (r) =>
-          setText(
-            r.available
-              ? {
-                  path: r.path,
-                  lines: r.lines,
-                  truncated: r.truncated,
-                  binary: r.binary,
-                  sha: r.sha,
-                }
-              : null
-          )
+        forLane(
+          laneId,
+          (r) =>
+            live &&
+            setText(
+              r.available
+                ? {
+                    path: r.path,
+                    lines: r.lines,
+                    truncated: r.truncated,
+                    binary: r.binary,
+                    sha: r.sha,
+                  }
+                : null
+            )
         )
       )
-      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    return () => {
+      live = false;
+    };
   }, [mode, whole, editable, openFile, laneId, range, sha]);
   // The editor's original side, read beside the working file. A file that is
   // not there (new since) diffs against nothing: every line is added.
@@ -1196,10 +1217,17 @@ export function LaneChangesPanel({
   useEffect(() => {
     if (mode !== "file" || !(whole || editable) || !openFile || range === "commit") return;
     const rev = range === "branch" && mergeBase ? mergeBase : "HEAD";
+    let live = true;
     void api.lanes.gitFile(target, openFile, rev).then(
-      forLane(laneId, (r) => setBaseText(r.available && !r.binary ? r.lines.join("\n") : "")),
-      forLane(laneId, () => setBaseText(""))
+      forLane(
+        laneId,
+        (r) => live && setBaseText(r.available && !r.binary ? r.lines.join("\n") : "")
+      ),
+      forLane(laneId, () => live && setBaseText(""))
     );
+    return () => {
+      live = false;
+    };
   }, [mode, whole, editable, openFile, laneId, range, mergeBase]);
 
   useEffect(() => {
@@ -1422,6 +1450,27 @@ export function LaneChangesPanel({
     }
   };
 
+  // Discard all: every non-conflicted file in one `discard`, asked once in a
+  // dialog that names how many untracked files it will delete.
+  const discardAll = async () => {
+    const rows = files.filter((f) => !f.conflicted);
+    if (!rows.length) return;
+    const ok = await confirmDialog({
+      title: t("changes.discardAllTitle"),
+      message: t("changes.discardAllConfirm", {
+        count: rows.length,
+        untracked: rows.filter((f) => f.untracked).length,
+      }),
+      confirmLabel: t("changes.discardAll"),
+    });
+    if (ok)
+      await act(
+        "discard",
+        rows.map((f) => f.path),
+        true
+      );
+  };
+
   // resolve / merge-commit / merge-abort: same shape as `act`, other body.
   const mergeAct = async (
     action: "resolve" | "merge-commit" | "merge-abort",
@@ -1728,7 +1777,12 @@ export function LaneChangesPanel({
               {commits?.[0]?.sha === commitCtx.menu.item.sha && (
                 <MenuItem
                   danger
-                  disabled={busy || opOpen || commitCtx.menu.item.parents.length !== 1}
+                  // Pushed: the server refuses it (EPUSHED), so say why here
+                  // instead of failing after the confirm.
+                  disabled={
+                    busy || opOpen || headPushed || commitCtx.menu.item.parents.length !== 1
+                  }
+                  title={headPushed ? t("changes.undoCommitPushed") : undefined}
                   testId="lane-changes-menu-undo-commit"
                   onSelect={pick(
                     commitCtx.close,
@@ -1988,6 +2042,8 @@ export function LaneChangesPanel({
     });
 
   const dirty = draft !== null && draft !== text?.lines.join("\n");
+  // Rendered only where the toggle is offered: a whole markdown file.
+  const mdShown = mdPreview && whole && isMarkdown(openFile);
   dirtyRef.current = dirty;
   useUnsavedGuard(dirty);
   const dirtyChangeRef = useRef(onDirtyChange);
@@ -2751,6 +2807,17 @@ export function LaneChangesPanel({
                     >
                       {t(amend ? "changes.amendAndPush" : "changes.commitAndPush")}
                     </button>
+                    <button
+                      type="button"
+                      data-testid="lane-changes-discard-all"
+                      disabled={busy}
+                      onClick={() => void discardAll()}
+                      title={t("changes.discardAllTitle")}
+                      className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-status-danger hover:bg-status-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <Trash2 className="h-3 w-3" aria-hidden />
+                      {t("changes.discardAll")}
+                    </button>
                   </div>
                 </div>
               )}
@@ -2990,7 +3057,7 @@ export function LaneChangesPanel({
                       range === "commit" && sha ? sha : "work"
                     )}
                   />
-                ) : !mdPreview &&
+                ) : !mdShown &&
                   (whole || editable) &&
                   (draft !== null || (editable && text === null)) ? (
                   // The editor, once both texts are in: not the diff first.
@@ -3046,7 +3113,7 @@ export function LaneChangesPanel({
                     </Suspense>
                   )
                 ) : whole ? (
-                  text && mdPreview ? (
+                  text && mdShown ? (
                     <div className="min-h-0 flex-1 overflow-auto rounded border border-border-light bg-surface-0 p-4">
                       <MarkdownPreview text={text.lines.join("\n")} />
                     </div>

client/src/components/lanes/SessionReplay.tsx

@@ -9,8 +9,9 @@
  * first, and a session some tab already holds opens THAT tab instead of a
  * second `--resume` (the server refuses one too, `ESESSIONLIVE`) — the typed
  * message is pasted there (never sent: Enter is the user's), with a toast; while
- * it is live the composer is off. Only Claude and Codex can resume a session by id —
- * any other tool's session offers a new session from the workspace home
+ * it is live the composer is off. Only Claude, Codex and a catalog tool with
+ * `resumeById` (omp) can resume a session by id — any other tool's session
+ * offers a new session from the workspace home
  * instead. The header carries the transcript page's Resume/Fork
  * (`SessionResumeButton`, behind its warning). The session's tool and folder
  * come from its row (`GET /api/sessions/:id`), so a resume runs on the tool the
@@ -32,6 +33,7 @@ import { toast } from "../../lib/toast";
 import i18n from "../../i18n";
 import { liveRunFor } from "./WorkspaceSessionList";
 import { SessionResumeButton } from "./SessionResumeButton";
+import { useAiTools } from "../../hooks/useAiTools";
 
 /** A message for a session that a tab already holds goes into THAT tab as a
  *  paste, once its terminal is on screen (it mounts after the navigation);
@@ -47,6 +49,7 @@ function pasteWhenShown(runId: string, text: string) {
 }
 
 /** The tools whose launcher resumes a session BY ID (server/lib/pty-run.js). */
+// Before the catalog loads: the two hand-written launchers resume by id.
 const RESUMABLE = new Set(["claude", "codex"]);
 
 export function SessionReplay({
@@ -65,6 +68,7 @@ export function SessionReplay({
 }) {
   const { t } = useTranslation("lanes");
   const navigate = useNavigate();
+  const { byId } = useAiTools();
   const [session, setSession] = useState<Session | null>(null);
   const [prompt, setPrompt] = useState("");
   const [images, setImages] = useState<PromptImage[]>([]);
@@ -88,9 +92,9 @@ export function SessionReplay({
   }, [sessionId]);
 
   const tool = session?.tool || "claude";
-  const resumable = RESUMABLE.has(tool);
+  const resumable = byId(tool)?.resumeById ?? RESUMABLE.has(tool);
   const livePane = liveRunFor(lane, liveRuns, sessionId);
-  const text = promptWithImages(prompt, images);
+  const text = promptWithImages(prompt, images, tool === "claude");
 
   const send = async () => {
     if (!text || busy || uploading || livePane || !resumable) return;
@@ -132,7 +136,11 @@ export function SessionReplay({
         </div>
       )}
       <div className="min-h-0 flex-1 overflow-hidden">
-        <ConversationView sessionId={sessionId} fill />
+        <ConversationView
+          sessionId={sessionId}
+          fill
+          ended={!livePane && !!session && session.status !== "active"}
+        />
       </div>
       {livePane ? (
         <div

client/src/components/lanes/SessionResumeButton.tsx

@@ -1,7 +1,8 @@
 /**
  * @file SessionResumeButton.tsx
  * @description The transcript page's explicit Resume and Fork for a Claude
- * session inside a workspace. Opening a session never resumes it; this is the
+ * session inside a workspace (Resume only for a catalog tool that resumes by
+ * id — omp's `--resume <id>`). Opening a session never resumes it; this is the
  * one place that does, behind a warning, because a resume re-reads the whole
  * transcript into context. Fork resumes it into a NEW session id
  * (`forkSession: true` → `claude --resume <id> --fork-session`), leaving the
@@ -26,6 +27,7 @@ import { ConfirmModal } from "../ConfirmModal";
 import { startInFreeTabDetailed } from "./startSession";
 import { liveRunFor, sessionWorktreeName } from "./WorkspaceSessionList";
 import { usePermissions } from "../AuthGate";
+import { useAiTools } from "../../hooks/useAiTools";
 
 /** A path without its trailing separators — `/` or a Windows `\`. */
 const strip = (p: string) => p.replace(/[\\/]+$/, "");
@@ -54,6 +56,7 @@ export function SessionResumeButton({
   const navigate = useNavigate();
   const { lanes } = useLanes();
   const { canEditLane } = usePermissions();
+  const { byId } = useAiTools();
   const [runs, setRuns] = useState<RunHandle[] | null>(null);
   const [confirming, setConfirming] = useState<"resume" | "fork" | null>(null);
   const [busy, setBusy] = useState(false);
@@ -70,12 +73,13 @@ export function SessionResumeButton({
     };
   }, [session.id]);
 
-  // Claude only: a Codex session id is not what
-  // `codex resume` takes for every kind of thread.
+  // Claude, or a catalog tool that resumes by id (no launcher of its own): a
+  // Codex session id is not what `codex resume` takes for every kind of thread.
   const tool = session.tool || "claude";
+  const catalogResume = !!byId(tool)?.resumeById && !byId(tool)?.launcher;
   // The workspace that owns it, else the one whose folder holds it.
   const lane =
-    tool !== "claude" || !session.cwd
+    (tool !== "claude" && !catalogResume) || !session.cwd
       ? null
       : (lanes.find((l) => l.id === session.lane_id && l.tool === tool) ??
         owningLane(session.cwd, tool, lanes));
@@ -140,7 +144,7 @@ export function SessionResumeButton({
           {t("sessions.resume")}
         </button>
       )}
-      {resumable && (
+      {resumable && tool === "claude" && (
         <button
           type="button"
           onClick={() => setConfirming("fork")}

client/src/components/lanes/WorkspaceHome.tsx

@@ -11,7 +11,7 @@
  * shell tab at once, like the tab bar's New terminal) and one Model chip (`ModelMenu`: the tool's own list or the
  * proxy's models, plus Effort); under it the quieter choices — AI Proxy
  * (Native or a profile), Permission (Claude's mode, Codex's sandbox/approval,
- * a catalog tool's bypass) and Local / New worktree — the workspace's Recents — the sessions it
+ * a catalog tool's bypass — a YOLO chip for Codex) and Local / New worktree — the workspace's Recents — the sessions it
  * owns and has not archived (`?lane=&archived=0`, with each one's state dot,
  * **Show more** past the first page, and the sidebar row's Rename/Archive in
  * its right-click menu), then the archived ones folded with Unarchive; a live session opens its pane,
@@ -20,7 +20,6 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { Checkbox } from "../Checkbox";
 import { isSubmitEnter } from "../../lib/keys";
 import { confirmDialog } from "../../lib/confirm";
 import { useEffect, useRef, useState } from "react";
@@ -34,6 +33,7 @@ import {
   MoreHorizontal,
   ArrowUp,
   SquareTerminal,
+  Zap,
 } from "lucide-react";
 import {
   api,
@@ -76,7 +76,7 @@ export {
 } from "./startSession";
 import { startInFreeTab } from "./startSession";
 import { WorkspaceContext } from "./WorkspaceContext";
-import { readDefaultMode } from "../../lib/sessionDefaults";
+import { readCodexDefaults, readDefaultMode } from "../../lib/sessionDefaults";
 
 /** Recents' page size; Show more adds another. */
 const RECENT_PAGE = 30;
@@ -165,12 +165,14 @@ function HomeBody({
   // Claude and Codex always take a model and an effort; a catalog tool a
   // model only when its file names the flag, an effort never.
   const hasModel = claude || codex || !!entry?.modelFlag;
-  // The account's own default (first-run setup) — never bypass.
+  // The account's own defaults (first-run setup, Settings → AI tools →
+  // Session defaults); a pick here is for this session only.
   const [mode, setMode] = useState<PermissionMode>(readDefaultMode);
-  const [sandbox, setSandbox] = useState<CodexSandbox>("workspace-write");
-  const [approval, setApproval] = useState<CodexApproval>("on-request");
-  // Per session, never remembered.
+  const [sandbox, setSandbox] = useState<CodexSandbox>(() => readCodexDefaults().sandbox);
+  const [approval, setApproval] = useState<CodexApproval>(() => readCodexDefaults().approval);
+  // Off for every tool but Codex, which starts from the account's default.
   const [bypass, setBypass] = useState(false);
+  useEffect(() => setBypass(codex && readCodexDefaults().bypass), [codex]);
   const canBypass = !claude && !!entry?.bypass;
   const [effort, setEffort] = useState<EffortLevel>("");
   const hasEffort = claude || codex;
@@ -254,7 +256,7 @@ function HomeBody({
     }
   };
 
-  const text = promptWithImages(prompt, images);
+  const text = promptWithImages(prompt, images, claude);
   const start = async () => {
     // Enter reaches here past the disabled button: the same guards again.
     // A ref, not only the state: two Enters in one tick both read `starting` false.
@@ -607,15 +609,25 @@ function HomeBody({
             </div>
           )}
           {canBypass && (
-            <span className="px-2">
-              <Checkbox
-                tone="danger"
-                checked={bypass}
-                onChange={setBypass}
-                label={t("run:fields.bypass")}
-                labelClassName="text-xs text-status-danger"
+            // A chip like the selects beside it: quiet when off, red when on.
+            <button
+              type="button"
+              aria-pressed={bypass}
+              data-testid="workspace-home-bypass"
+              title={t(codex ? "run:fields.yoloHint" : "run:fields.bypass")}
+              onClick={() => setBypass(!bypass)}
+              className={`flex items-center gap-1.5 rounded-md px-2 py-1 text-xs transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-status-danger/60 ${
+                bypass
+                  ? "bg-status-danger/10 font-medium text-status-danger ring-1 ring-inset ring-status-danger/30 hover:bg-status-danger/20"
+                  : "text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
+              }`}
+            >
+              <Zap
+                className={`h-3.5 w-3.5 ${bypass ? "fill-current" : "text-fg-muted"}`}
+                aria-hidden
               />
-            </span>
+              {t(codex ? "run:fields.yolo" : "run:fields.bypassShort")}
+            </button>
           )}
         </div>
         {danger && (

client/src/components/lanes/__tests__/AddLaneModal.test.tsx

@@ -786,9 +786,25 @@ describe("AddLaneModal — Clone", () => {
       )
     );
     expect(vi.mocked(api.lanes.clone).mock.calls[0]?.[0].credentials).toBeUndefined();
+    expect(vi.mocked(api.lanes.clone).mock.calls[0]?.[0].partial).toBeUndefined();
     await waitFor(() => expect(onAdded).toHaveBeenCalled());
   });
 
+  it("sends partial only when the box is ticked", async () => {
+    vi.mocked(api.lanes.clone).mockResolvedValue({
+      lane: laneFixture({ id: 7 }),
+      created: true,
+      path: "/home/an/code/big",
+    });
+    const user = userEvent.setup();
+    await fillClone(user, "https://git.example.com/o/big.git");
+    await user.click(screen.getByTestId("add-lane-clone-partial"));
+    await user.click(screen.getByRole("button", { name: "Add workspace" }));
+    await waitFor(() =>
+      expect(api.lanes.clone).toHaveBeenCalledWith(expect.objectContaining({ partial: true }))
+    );
+  });
+
   it("asks for a login on ECREDENTIALS and sends it on the retry", async () => {
     vi.mocked(api.lanes.clone)
       .mockRejectedValueOnce(

client/src/components/lanes/__tests__/CloneProgress.test.tsx

@@ -0,0 +1,79 @@
+/**
+ * @file Tests for CloneProgress: a queued clone shows its place in the
+ * server's clone queue, a running one git's phase, percent and speed with a
+ * bar, and nothing shows before the server knows the token. Also that
+ * `newCloneToken` makes a token the server accepts.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "../../../i18n";
+
+vi.mock("../../../lib/api", () => ({
+  api: { lanes: { cloneProgress: vi.fn() } },
+}));
+
+import { api, type CloneProgressView } from "../../../lib/api";
+import { CloneProgress, newCloneToken } from "../CloneProgress";
+
+const base: CloneProgressView = {
+  state: "running",
+  position: null,
+  running: 2,
+  waiting: 1,
+  limit: 2,
+  phase: null,
+  label: null,
+  percent: null,
+  detail: null,
+};
+
+describe("CloneProgress", () => {
+  // Braces: a function returned from beforeEach is run as its teardown.
+  beforeEach(() => {
+    vi.mocked(api.lanes.cloneProgress).mockReset();
+  });
+
+  it("shows the clone's place in the queue while it waits", async () => {
+    vi.mocked(api.lanes.cloneProgress).mockResolvedValue({
+      ...base,
+      state: "queued",
+      position: 1,
+    });
+    render(<CloneProgress token="t" />);
+    expect(await screen.findByTestId("clone-progress")).toHaveTextContent(
+      "Waiting in the clone queue — #1 of 1 (2/2 clones running)"
+    );
+  });
+
+  it("shows git's phase, percent and speed with a bar while it runs", async () => {
+    vi.mocked(api.lanes.cloneProgress).mockResolvedValue({
+      ...base,
+      phase: "receiving",
+      label: "Receiving objects",
+      percent: 45,
+      detail: "450/1000, 120.50 MiB | 5.20 MiB/s",
+    });
+    render(<CloneProgress token="t" />);
+    const line = await screen.findByTestId("clone-progress");
+    expect(line).toHaveTextContent("Downloading 45%");
+    expect(line).toHaveTextContent("120.50 MiB | 5.20 MiB/s");
+    expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "45");
+  });
+
+  it("shows nothing while the server does not know the token yet", async () => {
+    vi.mocked(api.lanes.cloneProgress).mockImplementation(() =>
+      Promise.reject(Object.assign(new Error("no such clone"), { code: "ENOTFOUND" }))
+    );
+    render(<CloneProgress token="t" />);
+    await new Promise((r) => setTimeout(r, 20));
+    expect(screen.queryByTestId("clone-progress")).toBeNull();
+  });
+
+  it("makes tokens the server accepts", () => {
+    const a = newCloneToken();
+    expect(a).toMatch(/^[A-Za-z0-9_-]{16,64}$/);
+    expect(newCloneToken()).not.toBe(a);
+  });
+});

client/src/components/lanes/__tests__/CloneSourcesForm.test.tsx

@@ -1,7 +1,10 @@
 /**
  * @file Tests for CloneSourcesForm: every URL in the box is cloned in turn as
  * an extra folder, a host that wants a login opens the login row, and Retry
- * re-runs only the failed URLs with that login.
+ * re-runs only the failed URLs with that login. An SSH link while the
+ * account has no key is never sent — the user is pointed at Settings → Git —
+ * and an HTTPS host with no saved login is flagged before Clone. The
+ * partial-clone box adds `partial: true` to every clone.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -11,16 +14,20 @@ import userEvent from "@testing-library/user-event";
 import "../../../i18n";
 
 vi.mock("../../../lib/api", () => ({
-  api: { lanes: { cloneFolder: vi.fn() } },
+  api: { lanes: { cloneFolder: vi.fn() }, gitIdentity: { get: vi.fn() } },
 }));
 
-import { api, type LaneSourcesView } from "../../../lib/api";
-import { CloneSourcesForm } from "../CloneSourcesForm";
+import { api, type GitIdentity, type LaneSourcesView } from "../../../lib/api";
+import { CloneSourcesForm, cloneTarget } from "../CloneSourcesForm";
 
 const view = { sources: [] } as unknown as LaneSourcesView & { path: string };
 
 describe("CloneSourcesForm", () => {
-  beforeEach(() => vi.mocked(api.lanes.cloneFolder).mockReset());
+  beforeEach(() => {
+    vi.mocked(api.lanes.cloneFolder).mockReset();
+    // Unknown identity: nothing is checked up front.
+    vi.mocked(api.gitIdentity.get).mockReset().mockRejectedValue(new Error("old server"));
+  });
 
   it("clones each URL, asks for a login where needed, and retries only that one", async () => {
     const user = userEvent.setup();
@@ -53,9 +60,61 @@ describe("CloneSourcesForm", () => {
 
     await waitFor(() => expect(onAdded).toHaveBeenCalledTimes(2));
     expect(api.lanes.cloneFolder).toHaveBeenLastCalledWith(3, {
+      progressToken: expect.any(String),
       url: "https://private.test/b.git",
       credentials: { username: "dev", password: "tok", remember: true },
     });
     expect(screen.getByTestId("workspace-clone-input")).toHaveValue("");
   });
+
+  it("asks for partial clones when the box is ticked", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.cloneFolder).mockResolvedValue(view);
+    render(<CloneSourcesForm laneId={3} parent="/w" onAdded={vi.fn()} />);
+    await user.type(screen.getByTestId("workspace-clone-input"), "https://h/big.git");
+    await user.click(screen.getByTestId("workspace-clone-partial"));
+    await user.click(screen.getByTestId("workspace-clone-run"));
+    await waitFor(() =>
+      expect(api.lanes.cloneFolder).toHaveBeenCalledWith(3, {
+        progressToken: expect.any(String),
+        url: "https://h/big.git",
+        partial: true,
+      })
+    );
+  });
+
+  it("tells an SSH link from an HTTPS one", () => {
+    expect(cloneTarget("git@github.com:o/r.git")).toEqual({ kind: "ssh", host: "github.com" });
+    expect(cloneTarget("ssh://git@h.test:2222/o/r")).toEqual({ kind: "ssh", host: "h.test" });
+    expect(cloneTarget("https://h.test/o/r.git")).toEqual({ kind: "https", host: "h.test" });
+    expect(cloneTarget("not a url")).toBeNull();
+  });
+
+  it("does not clone an SSH link before the account has a key, and flags an HTTPS host with no login", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.gitIdentity.get).mockResolvedValue({
+      ssh: null,
+      sshKeys: [],
+      https: [],
+    } as unknown as GitIdentity);
+    vi.mocked(api.lanes.cloneFolder).mockResolvedValue(view);
+    render(<CloneSourcesForm laneId={3} parent="/w" onAdded={vi.fn()} />);
+    await waitFor(() => expect(api.gitIdentity.get).toHaveBeenCalled());
+
+    await user.type(
+      screen.getByTestId("workspace-clone-input"),
+      "git@github.com:o/r.git\nhttps://h.test/a.git"
+    );
+    expect(screen.getByTestId("workspace-clone-need-ssh")).toHaveTextContent("github.com");
+    expect(screen.getByTestId("workspace-clone-need-login")).toHaveTextContent("h.test");
+
+    await user.click(screen.getByTestId("workspace-clone-run"));
+    await waitFor(() => expect(api.lanes.cloneFolder).toHaveBeenCalledTimes(1));
+    expect(api.lanes.cloneFolder).toHaveBeenCalledWith(3, {
+      url: "https://h.test/a.git",
+      progressToken: expect.any(String),
+    });
+    expect(await screen.findByText(/has no SSH key yet/)).toBeInTheDocument();
+    expect(screen.getByTestId("workspace-clone-input")).toHaveValue("git@github.com:o/r.git");
+  });
 });

client/src/components/lanes/__tests__/FileExplorer.test.tsx

@@ -3,7 +3,13 @@
  * opens sub-folders, makes a folder inline, deletes into the Trash without a
  * confirm, copies in one workspace and pastes into another (`fromLane`),
  * asks Replace / Keep both / Skip when an upload's name is taken, refuses a
- * batch over 500 MB before sending anything, and restores from the Trash.
+ * batch over 500 MB before sending anything, restores from the user's own
+ * Trash, opens an admin's Trash on one folder per user (counted, an unreadable
+ * one saying why), opens each user's Trash from its folder (asking before a
+ * purge there, sending the item's store) and
+ * shows a Trash that could not be read as an error, never as empty; nests a
+ * user's workspaces under their home in the sidebar (under a fold-only row
+ * when the viewer may not open that home).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
@@ -12,13 +18,18 @@ import userEvent from "@testing-library/user-event";
 import { FileExplorer } from "../FileExplorer";
 import { api, type FsListing } from "../../../lib/api";
 import { toast } from "../../../lib/toast";
+import { confirmDialog } from "../../../lib/confirm";
+
+vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(async () => false) }));
 
 vi.mock("../../../lib/api", () => ({
-  gitTarget: (lane: number, session?: string | null) => (session ? { lane, session } : lane),
+  gitTarget: (lane: number, session?: string | null, source?: number | null) =>
+    source ? { lane, source } : session ? { lane, session } : lane,
   isHomePlace: (p: unknown) => typeof p === "object" && p !== null && "home" in p,
   api: {
     lanes: {
       list: vi.fn(),
+      clone: vi.fn(),
       gitDownloadUrl: (t: number, p: string) => `/api/lanes/${t}/git/download?path=${p}`,
     },
     files: {
@@ -32,9 +43,12 @@ vi.mock("../../../lib/api", () => ({
       copy: vi.fn(),
       remove: vi.fn(),
       trash: vi.fn(),
+      allTrash: vi.fn(),
       restore: vi.fn(),
       purge: vi.fn(),
       upload: vi.fn(),
+      uploadBatch: vi.fn(),
+      uploadCheck: vi.fn(),
       zipUrl: (t: number, ps: string[]) => `/api/lanes/${t}/fs/zip?p=${ps.join("&p=")}`,
     },
   },
@@ -70,6 +84,7 @@ beforeEach(() => {
   } as never);
   vi.mocked(api.files.list).mockImplementation(async (_t, p = "") => (p === "src" ? src : root));
   vi.mocked(api.files.trash).mockResolvedValue({ items: [] });
+  vi.mocked(api.files.allTrash).mockResolvedValue({ items: [], errors: [] });
   vi.mocked(api.files.homes).mockResolvedValue({
     homes: [
       { id: "me", label: "An", readOnly: false },
@@ -185,6 +200,41 @@ describe("FileExplorer", () => {
     );
   });
 
+  it("sends many small files as one batch, asking once about every taken name", async () => {
+    vi.mocked(api.files.uploadCheck).mockResolvedValue({ taken: ["a.txt", "b.txt"], batch: true });
+    vi.mocked(api.files.uploadBatch).mockResolvedValue({ saved: 3, skipped: 0, paths: [] });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const files = ["a.txt", "b.txt", "c.txt"].map((n) => new File(["hi"], n));
+    await user.upload(screen.getByTestId("fx-upload-files"), files);
+    const ask = await screen.findByTestId("fx-conflict");
+    await user.click(within(ask).getByRole("button", { name: "Replace" }));
+    await waitFor(() =>
+      expect(api.files.uploadBatch).toHaveBeenCalledWith(
+        1,
+        "",
+        files.map((file) => ({ file, rel: file.name })),
+        "replace",
+        expect.any(Function)
+      )
+    );
+    expect(api.files.uploadCheck).toHaveBeenCalledWith(1, "", ["a.txt", "b.txt", "c.txt"]);
+    expect(api.files.upload).not.toHaveBeenCalled();
+  });
+
+  it("falls back to one request per file when the server cannot take a batch", async () => {
+    vi.mocked(api.files.uploadCheck).mockResolvedValue({ taken: [], batch: false });
+    vi.mocked(api.files.upload).mockResolvedValue({ path: "x" });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const files = ["x.txt", "y.txt"].map((n) => new File(["hi"], n));
+    await user.upload(screen.getByTestId("fx-upload-files"), files);
+    await waitFor(() => expect(api.files.upload).toHaveBeenCalledTimes(2));
+    expect(api.files.uploadBatch).not.toHaveBeenCalled();
+  });
+
   it("refuses a batch over 500 MB before sending anything", async () => {
     open();
     await screen.findByText("a.txt");
@@ -212,10 +262,178 @@ describe("FileExplorer", () => {
     const user = userEvent.setup();
     open();
     await screen.findByText("a.txt");
-    await user.click(screen.getByRole("button", { name: "Trash" }));
+    await user.click(
+      within(screen.getByTestId("fx-trashes")).getByRole("button", { name: "Trash" })
+    );
+    await user.click(await screen.findByRole("button", { name: /My Trash/ }));
+    await waitFor(() => expect(api.files.trash).toHaveBeenLastCalledWith({ home: "me" }));
     const trashRow = await screen.findByTestId("fx-trash-row");
     await user.click(within(trashRow).getByRole("button", { name: /Restore/ }));
-    await waitFor(() => expect(api.files.restore).toHaveBeenCalledWith(1, "abc12345"));
+    await waitFor(() =>
+      expect(api.files.restore).toHaveBeenCalledWith({ home: "me" }, "abc12345", undefined)
+    );
+  });
+
+  it("opens an admin's Trash on one folder per user, each opening that user's Trash", async () => {
+    vi.mocked(api.files.allTrash).mockResolvedValue({
+      items: [
+        {
+          id: "bob12345",
+          name: "old",
+          laneId: null,
+          path: "old",
+          isDir: true,
+          deletedAt: "2026-10-15T08:00:00.000Z",
+          store: "host",
+          home: "bob",
+          owner: "Bob",
+        },
+      ],
+      errors: [{ home: "me", owner: "An", message: "EMEMBERGONE" }],
+    });
+    vi.mocked(api.files.trash).mockResolvedValue({
+      items: [
+        {
+          id: "bob12345",
+          name: "old",
+          laneId: null,
+          path: "old",
+          isDir: true,
+          deletedAt: "2026-10-15T08:00:00.000Z",
+          store: "host",
+        },
+      ],
+    });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const trashes = screen.getByTestId("fx-trashes");
+    expect(within(trashes).getAllByRole("button")).toHaveLength(1);
+    await user.click(within(trashes).getByRole("button", { name: "Trash" }));
+    const folders = await screen.findAllByTestId("fx-trash-folder");
+    expect(folders.map((f) => f.textContent)).toEqual(["My TrashEMEMBERGONE", "Bob1 item(s)"]);
+    expect(screen.queryByTestId("fx-trash-row")).toBeNull();
+    await user.click(folders[1]!);
+    await waitFor(() => expect(api.files.trash).toHaveBeenLastCalledWith({ home: "bob" }));
+    expect(screen.getByRole("navigation", { name: "Location" }).textContent).toContain("Bob");
+    const trashRow = await screen.findByTestId("fx-trash-row");
+    await user.click(within(trashRow).getByRole("button", { name: /Delete forever/ }));
+    await waitFor(() =>
+      expect(confirmDialog).toHaveBeenCalledWith(
+        expect.objectContaining({ message: expect.stringContaining("Bob's Trash") })
+      )
+    );
+    expect(api.files.purge).not.toHaveBeenCalled();
+    vi.mocked(confirmDialog).mockResolvedValueOnce(true);
+    await user.click(within(trashRow).getByRole("button", { name: /Delete forever/ }));
+    await waitFor(() =>
+      expect(api.files.purge).toHaveBeenCalledWith({ home: "bob" }, "bob12345", "host")
+    );
+    // Back to the folders through the path bar.
+    await user.click(
+      within(screen.getByRole("navigation", { name: "Location" })).getByRole("button", {
+        name: "Trash",
+      })
+    );
+    expect(await screen.findAllByTestId("fx-trash-folder")).toHaveLength(2);
+  });
+
+  it("right-clicks a Trash folder to empty it, and a Trash row to restore it", async () => {
+    vi.mocked(api.files.allTrash).mockResolvedValue({
+      items: [
+        {
+          id: "bob12345",
+          name: "old",
+          laneId: null,
+          path: "old",
+          isDir: true,
+          deletedAt: "2026-10-15T08:00:00.000Z",
+          store: "host",
+          home: "bob",
+          owner: "Bob",
+        },
+      ],
+      errors: [],
+    });
+    vi.mocked(api.files.trash).mockResolvedValue({
+      items: [
+        {
+          id: "bob12345",
+          name: "old",
+          laneId: null,
+          path: "old",
+          isDir: true,
+          deletedAt: "2026-10-15T08:00:00.000Z",
+          store: "host",
+        },
+      ],
+    });
+    vi.mocked(api.files.restore).mockResolvedValue({ path: "old", laneId: null });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    await user.click(
+      within(screen.getByTestId("fx-trashes")).getByRole("button", { name: "Trash" })
+    );
+    const folders = await screen.findAllByTestId("fx-trash-folder");
+    // My Trash is empty: its Empty Trash is disabled.
+    fireEvent.contextMenu(folders[0]!);
+    expect(
+      within(screen.getByTestId("fx-trash-root-menu")).getByRole("menuitem", {
+        name: "Empty Trash",
+      })
+    ).toHaveProperty("disabled", true);
+    fireEvent.keyDown(document, { key: "Escape" });
+    fireEvent.contextMenu(folders[1]!);
+    vi.mocked(confirmDialog).mockResolvedValueOnce(true);
+    await user.click(
+      within(screen.getByTestId("fx-trash-root-menu")).getByRole("menuitem", {
+        name: "Empty Trash",
+      })
+    );
+    await waitFor(() => expect(api.files.purge).toHaveBeenCalledWith({ home: "bob" }, "all"));
+    expect(screen.queryByTestId("fx-trash-root-menu")).toBeNull();
+
+    fireEvent.contextMenu((await screen.findAllByTestId("fx-trash-folder"))[1]!);
+    await user.click(
+      within(screen.getByTestId("fx-trash-root-menu")).getByRole("menuitem", { name: "Open" })
+    );
+    fireEvent.contextMenu(await screen.findByTestId("fx-trash-row"));
+    await user.click(
+      within(screen.getByTestId("fx-trash-menu")).getByRole("menuitem", { name: "Restore" })
+    );
+    await waitFor(() =>
+      expect(api.files.restore).toHaveBeenCalledWith({ home: "bob" }, "bob12345", "host")
+    );
+  });
+
+  it("right-clicks a sidebar workspace and a path crumb", async () => {
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    fireEvent.contextMenu(screen.getByRole("button", { name: "two" }));
+    await user.click(
+      within(screen.getByTestId("fx-place-menu")).getByRole("menuitem", { name: "Open" })
+    );
+    await waitFor(() => expect(api.files.list).toHaveBeenLastCalledWith(2, ""));
+    fireEvent.contextMenu(screen.getByRole("button", { name: "Home" }));
+    await user.click(
+      within(screen.getByTestId("fx-place-menu")).getByRole("menuitem", { name: "Open Trash" })
+    );
+    await waitFor(() => expect(api.files.trash).toHaveBeenLastCalledWith({ home: "me" }));
+  });
+
+  it("shows why a Trash could not be read instead of an empty one", async () => {
+    vi.mocked(api.files.trash).mockRejectedValue(new Error("ENOENT: no such folder"));
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    await user.click(
+      within(screen.getByTestId("fx-trashes")).getByRole("button", { name: "Trash" })
+    );
+    await user.click(await screen.findByRole("button", { name: /My Trash/ }));
+    expect(await screen.findByText(/ENOENT: no such folder/)).toBeTruthy();
+    expect(screen.queryByText("The Trash is empty.")).toBeNull();
   });
 
   it("opens the user's home from the sidebar, and pastes from it into a workspace", async () => {
@@ -242,7 +460,7 @@ describe("FileExplorer", () => {
     const user = userEvent.setup();
     open();
     await screen.findByText("a.txt");
-    await user.click(await screen.findByRole("button", { name: /Bob/ }));
+    await user.click(await screen.findByRole("button", { name: "Bob" }));
     expect(await screen.findByTestId("fx-readonly")).toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "New" })).toBeNull();
     expect(screen.queryByRole("button", { name: "Upload" })).toBeNull();
@@ -254,4 +472,141 @@ describe("FileExplorer", () => {
     fireEvent.keyDown(screen.getByTestId("fx-list"), { key: "Delete" });
     expect(api.files.remove).not.toHaveBeenCalled();
   });
+
+  it("drops a user's workspaces down under their home; an unowned one stays in the list", async () => {
+    localStorage.removeItem("agenthub.files.homesOpen");
+    vi.mocked(api.lanes.list).mockResolvedValue({
+      lanes: [
+        { id: 1, title: "one", cwd: "/w/one" },
+        { id: 2, title: "two", cwd: "/w/two", owner_id: 7, owner_name: "bob" },
+      ],
+      counts: {},
+    } as never);
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const toggle = await screen.findByRole("button", { name: "Show or hide Bob’s workspaces" });
+    expect(toggle).toHaveAttribute("aria-expanded", "false");
+    const places = screen.getByRole("navigation", { name: "Workspaces" });
+    expect(within(places).queryByRole("button", { name: "two" })).toBeNull();
+    expect(within(places).getByRole("button", { name: "one" })).toBeInTheDocument();
+    await user.click(toggle);
+    await user.click(within(places).getByRole("button", { name: "two" }));
+    await waitFor(() => expect(api.files.list).toHaveBeenLastCalledWith(2, ""));
+    expect(localStorage.getItem("agenthub.files.homesOpen")).toContain("bob");
+  });
+
+  it("groups an owner whose home the viewer cannot open (an analyst) under a row that only folds", async () => {
+    localStorage.removeItem("agenthub.files.homesOpen");
+    vi.mocked(api.files.homes).mockResolvedValue({
+      homes: [{ id: "me", label: "An", readOnly: false }],
+    });
+    vi.mocked(api.lanes.list).mockResolvedValue({
+      lanes: [
+        { id: 1, title: "one", cwd: "/w/one" },
+        {
+          id: 3,
+          title: "three",
+          cwd: "/w/three",
+          owner_id: 9,
+          owner_name: "cara",
+          owner_display_name: "Cara",
+        },
+      ],
+      counts: {},
+    } as never);
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const places = screen.getByRole("navigation", { name: "Workspaces" });
+    expect(within(places).getByText("Users")).toBeInTheDocument();
+    expect(within(places).queryByRole("button", { name: "three" })).toBeNull();
+    await user.click(within(places).getByRole("button", { name: /^Cara/ }));
+    expect(api.files.list).not.toHaveBeenCalledWith({ home: "cara" }, "");
+    expect(within(places).getByRole("button", { name: "three" })).toBeInTheDocument();
+  });
+});
+
+describe("FileExplorer — New → Clone repository", () => {
+  const openClone = async (user: ReturnType<typeof userEvent.setup>) => {
+    await user.click(screen.getByRole("button", { name: "New" }));
+    await user.click(screen.getByRole("menuitem", { name: "Clone repository" }));
+    return screen.getByTestId("fx-clone-dialog");
+  };
+
+  it("clones into the open folder of the workspace and says where", async () => {
+    vi.mocked(api.lanes.clone).mockResolvedValue({
+      lane: { id: 9, title: "repo", cwd: "/w/one/src/repo" },
+      created: true,
+      path: "/w/one/src/repo",
+    } as never);
+    const user = userEvent.setup();
+    open();
+    fireEvent.doubleClick(await screen.findByText("src"));
+    await screen.findByText("x.js");
+    const dialog = await openClone(user);
+    await user.type(within(dialog).getByLabelText("Repository URL"), "git@host:o/repo.git");
+    expect(within(dialog).getByText(/\/w\/one\/src\/repo/)).toBeInTheDocument();
+    await user.click(within(dialog).getByTestId("fx-clone-submit"));
+    await waitFor(() =>
+      expect(api.lanes.clone).toHaveBeenCalledWith({
+        url: "git@host:o/repo.git",
+        parent: "/w/one/src",
+        name: undefined,
+      })
+    );
+    expect(toast.success).toHaveBeenCalled();
+    expect(screen.queryByTestId("fx-clone-dialog")).toBeNull();
+  });
+
+  it("asks for a login on ECREDENTIALS and sends it once", async () => {
+    vi.mocked(api.lanes.clone)
+      .mockRejectedValueOnce(
+        Object.assign(new Error("login"), { code: "ECREDENTIALS", auth: { host: "git.example" } })
+      )
+      .mockResolvedValueOnce({
+        lane: { id: 9, title: "r", cwd: "/w/one/r" },
+        created: true,
+        path: "/w/one/r",
+      } as never);
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const dialog = await openClone(user);
+    await user.type(within(dialog).getByLabelText("Repository URL"), "https://git.example/o/r.git");
+    await user.click(within(dialog).getByTestId("fx-clone-submit"));
+    const login = await within(dialog).findByTestId("fx-clone-login");
+    await user.type(within(login).getByLabelText("Username"), "ann");
+    await user.type(within(login).getByLabelText("Password or access token"), "tok");
+    await user.click(within(dialog).getByTestId("fx-clone-submit"));
+    await waitFor(() =>
+      expect(api.lanes.clone).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          parent: "/w/one",
+          credentials: { username: "ann", password: "tok", remember: true },
+        })
+      )
+    );
+  });
+
+  it("keeps typing in the dialog away from the explorer's shortcuts", async () => {
+    vi.mocked(api.files.remove).mockResolvedValue({ trashed: [] });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    fireEvent.click(row("a.txt"));
+    const dialog = await openClone(user);
+    const url = within(dialog).getByLabelText("Repository URL");
+    await user.type(url, "abc{Backspace}{Delete}");
+    expect(api.files.remove).not.toHaveBeenCalled();
+    expect(url).toHaveValue("ab");
+  });
+
+  it("is not offered in an extra folder", async () => {
+    const user = userEvent.setup();
+    render(<FileExplorer open laneId={1} source={3} onClose={vi.fn()} onChanged={vi.fn()} />);
+    await screen.findByText("a.txt");
+    await user.click(screen.getByRole("button", { name: "New" }));
+    expect(screen.queryByRole("menuitem", { name: "Clone repository" })).toBeNull();
+  });
 });

client/src/components/lanes/__tests__/LaneChangesPanel.test.tsx

@@ -514,7 +514,7 @@ describe("LaneChangesPanel", () => {
     expect(screen.getByText("Unversioned Files")).toBeInTheDocument();
   });
 
-  it("reads a whole markdown file rendered after Preview, and back as source after Raw", async () => {
+  it("opens a whole markdown file rendered, as source after Raw, and rendered again after Preview", async () => {
     vi.mocked(api.lanes.gitTree).mockResolvedValue({
       available: true,
       path: "",
@@ -534,12 +534,13 @@ describe("LaneChangesPanel", () => {
     render(<LaneChangesPanel laneId={7} full />);
     const sidebar = await screen.findByTestId("lane-changes-sidebar");
     await user.click(await within(sidebar).findByText("README.md"));
-    await screen.findByTestId("lane-file-editor");
-    await user.click(screen.getByTestId("lane-file-preview"));
-    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(await screen.findByRole("heading", { name: "Hello" })).toBeInTheDocument();
     expect(screen.queryByTestId("lane-file-editor")).toBeNull();
     await user.click(screen.getByTestId("lane-file-preview"));
     expect(await screen.findByTestId("lane-file-editor")).toHaveValue("# Hello\n\n- one");
+    await user.click(screen.getByTestId("lane-file-preview"));
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(screen.queryByTestId("lane-file-editor")).toBeNull();
   });
 
   it("shows an image file as the picture, with no edit control", async () => {
@@ -770,6 +771,24 @@ describe("LaneChangesPanel", () => {
     });
   });
 
+  it("discards every file at once only after the dialog is confirmed", async () => {
+    const user = userEvent.setup();
+    render(<LaneChangesPanel laneId={7} />);
+    await screen.findByTestId("lane-changes-overview");
+
+    vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+    await user.click(screen.getByTestId("lane-changes-discard-all"));
+    expect(api.lanes.gitAction).not.toHaveBeenCalled();
+
+    await user.click(screen.getByTestId("lane-changes-discard-all"));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "discard", {
+        paths: ["server/lib/git-ops.js", "notes.txt", "docs/API.md"],
+        confirm: true,
+      })
+    );
+  });
+
   it("right-click on a changed file offers Commit File, a two-click discard, copy path and patch", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);
@@ -1062,6 +1081,20 @@ describe("LaneChangesPanel", () => {
       );
     });
 
+    it("does not offer Undo for a top commit its upstream already holds", async () => {
+      withParent();
+      vi.mocked(api.lanes.git).mockResolvedValue(
+        facts({ hasRemote: true, upstream: "origin/feat/thing", ahead: 0, behind: 0 })
+      );
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} />);
+      await screen.findByTestId("lane-changes-overview");
+      await user.click(screen.getByRole("button", { name: "History" }));
+      const undo = within(await commitMenu(user)).getByTestId("lane-changes-menu-undo-commit");
+      await waitFor(() => expect(undo).toBeDisabled());
+      expect(undo).toHaveAttribute("title", expect.stringMatching(/already on the remote/));
+    });
+
     it("cherry-picks only from another branch's history", async () => {
       withParent();
       vi.mocked(api.lanes.git).mockResolvedValue(facts());

client/src/components/lanes/__tests__/WorkspaceHome.test.tsx

@@ -245,7 +245,9 @@ describe("WorkspaceHome", () => {
     // As the Workspace page: `&run=` replaces the home with the session view.
     function HomeUntilRun() {
       const [params] = useSearchParams();
-      return params.get("run") ? null : <WorkspaceHome lane={lane()} onMenuAction={() => undefined} />;
+      return params.get("run") ? null : (
+        <WorkspaceHome lane={lane()} onMenuAction={() => undefined} />
+      );
     }
     const user = userEvent.setup();
     render(

client/src/components/onboarding/OnboardingWizard.tsx

@@ -29,9 +29,9 @@ import { PetSettings } from "../settings/PetSettings";
 import { Swatch, THEME_LABELS } from "../settings/AppearanceSettings";
 import { markOnboarded, useOnboarding } from "../../lib/userPrefs";
 import {
-  DEFAULT_MODES,
   readDefaultMode,
   readDefaultTool,
+  SAFE_MODES,
   writeDefaultMode,
   writeDefaultTool,
   type DefaultMode,
@@ -310,7 +310,7 @@ function AgentStep() {
               writeDefaultMode(m);
               setMode(m);
             }}
-            options={DEFAULT_MODES.map((m) => ({ value: m, label: t(`agent.modes.${m}`) }))}
+            options={SAFE_MODES.map((m) => ({ value: m, label: t(`agent.modes.${m}`) }))}
           />
         </div>
         <p className="text-xs text-fg-muted">{t("agent.permissionHint")}</p>

client/src/components/onboarding/__tests__/Onboarding.test.tsx

@@ -2,7 +2,7 @@
  * @file Onboarding.test.tsx
  * @description The first-run setup (docs/plans/onboarding): the account's
  * preferences are loaded into localStorage on sign-in and every later change
- * is sent back; the starting choices never hold bypass; the wizard shows only
+ * is sent back; the wizard never offers bypass (a Settings default may hold it); the wizard shows only
  * for an account that is new to it, writes each pick like Settings does and
  * ends in the tour; the tour follows the real UI step by step.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -55,7 +55,7 @@ vi.mock("../../settings/PetSettings", () => ({
 }));
 
 import { __resetUserPrefs, hydrate, useOnboarding } from "../../../lib/userPrefs";
-import { readDefaultMode, writeDefaultMode } from "../../../lib/sessionDefaults";
+import { readDefaultMode, SAFE_MODES, writeDefaultMode } from "../../../lib/sessionDefaults";
 import { OnboardingWizard } from "../OnboardingWizard";
 import { OnboardingTour, startTour } from "../OnboardingTour";
 import { __resetAiTools } from "../../../hooks/useAiTools";
@@ -98,10 +98,12 @@ describe("account preferences", () => {
     }
   });
 
-  it("never keeps bypass as the starting permission mode", () => {
+  it("keeps a bypass default from Settings, but the pet chat's safe read and the wizard never offer it", () => {
     localStorage.setItem("agenthub.permissionMode", "bypassPermissions");
-    expect(readDefaultMode()).toBe("auto");
-    writeDefaultMode("bypassPermissions" as never);
+    expect(readDefaultMode()).toBe("bypassPermissions");
+    expect(readDefaultMode({ safe: true })).toBe("auto");
+    expect(SAFE_MODES).not.toContain("bypassPermissions");
+    writeDefaultMode("nonsense" as never);
     expect(localStorage.getItem("agenthub.permissionMode")).toBe("bypassPermissions");
     writeDefaultMode("plan");
     expect(readDefaultMode()).toBe("plan");

client/src/components/run/ChatAddMenu.tsx

@@ -1,7 +1,10 @@
 /**
  * @file ChatAddMenu.tsx
  * @description The Chat view's `+` menu, Claude Desktop's: Upload or add
- * files (the prompt box's own picker), what is already there to attach —
+ * files (the prompt box's own picker), Choose a file on this computer (a
+ * browser on the dashboard's own machine only: the OS's own picker,
+ * `POST /api/lanes/pick-path`, attaches the file by its path — any size,
+ * nothing uploaded), what is already there to attach —
  * Project files (a search of the box's folder, folders too:
  * `GET /api/run/files?dirs=1`, sent as `@path`), the workspace's Context
  * files (`GET /api/lanes/:id/sources`) and Recent uploads (this browser's,
@@ -21,6 +24,7 @@ import {
   ChevronRight,
   FileText,
   FolderOpen,
+  HardDrive,
   History,
   Paperclip,
   Plug,
@@ -29,7 +33,14 @@ import {
   Settings2,
 } from "lucide-react";
 import { api } from "../../lib/api";
-import { projectAttachment, recentUploads, type Attachment } from "../../lib/promptAttach";
+import {
+  isLocalBrowser,
+  localAttachment,
+  projectAttachment,
+  recentUploads,
+  type Attachment,
+} from "../../lib/promptAttach";
+import { toast } from "../../lib/toast";
 
 interface Entry {
   name: string;
@@ -244,6 +255,17 @@ export function ChatAddMenu({
     close();
     onAttach([item]);
   };
+  const pickLocal = async () => {
+    close();
+    // The dialog opens on the desktop, sometimes behind this window.
+    toast.info(t("chat.pickLocalOpen"));
+    try {
+      const r = await api.lanes.pickPath("file", cwd || undefined);
+      if (r.path) onAttach([localAttachment(r.path)]);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  };
   const manage = (tab: "skills" | "plugins") => {
     close();
     navigate(`/cc-config?tab=${tab}`);
@@ -291,6 +313,16 @@ export function ChatAddMenu({
               onUpload();
             }}
           />
+          {isLocalBrowser() && (
+            <Row
+              icon={<HardDrive className="h-4 w-4" />}
+              label={t("chat.pickLocal")}
+              title={t("chat.pickLocalHint")}
+              testId="chat-add-pick-local"
+              onHover={() => setSub(null)}
+              onClick={() => void pickLocal()}
+            />
+          )}
           <Row
             icon={<FolderOpen className="h-4 w-4" />}
             label={t("chat.projectFiles")}

client/src/components/run/ChatFilePreview.tsx

@@ -18,15 +18,41 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useRef, useState, type DragEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { Copy, FileText, Loader2, X } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Copy,
+  Download,
+  FileText,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  Share2,
+  X,
+} from "lucide-react";
 import { api, gitTarget } from "../../lib/api";
 import { copyText } from "../../lib/clipboard";
 import { useDialog } from "../../hooks/useDialog";
 import { dragSkill } from "../../lib/promptAttach";
-import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { readMarkdownPreview } from "../../lib/markdownView";
+import { MarkdownPreview } from "../MarkdownPreview";
+import { CodeBlock } from "../conversation/CodeBlock";
+import { useTheme } from "../../hooks/useTheme";
+import { toast } from "../../lib/toast";
+import type { TranscriptMessage } from "../../lib/types";
+import {
+  RENDERED,
+  artifactDocument,
+  artifactKind,
+  artifactLang,
+  artifactVersions,
+  frameSandbox,
+  parseCsv,
+  type ArtifactKind,
+} from "../../lib/artifactView";
 
 /** Where a Chat pane's files can be read from. */
 export interface PreviewScope {
@@ -146,33 +172,96 @@ function useContent(path: string, scope: PreviewScope): Content {
   return content;
 }
 
-function Body({ path, scope }: { path: string; scope: PreviewScope }) {
+/** A CSV/TSV as a table (the first rows; a file is not a spreadsheet). */
+function CsvTable({ text, tab }: { text: string; tab: boolean }) {
+  const rows = useMemo(() => parseCsv(text, tab ? "\t" : ",").slice(0, 1000), [text, tab]);
+  const [head, ...body] = rows;
+  return (
+    <div className="min-h-0 flex-1 overflow-auto p-3">
+      <table className="w-full border-collapse text-xs">
+        {head && (
+          <thead className="sticky top-0 bg-surface-2">
+            <tr>
+              {head.map((h, i) => (
+                <th
+                  key={i}
+                  className="border border-border px-2 py-1 text-left font-medium text-fg-primary"
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody>
+          {body.map((r, i) => (
+            <tr key={i} className="odd:bg-surface-1 even:bg-surface-2/40">
+              {r.map((c, j) => (
+                <td key={j} className="border border-border px-2 py-1 text-fg-secondary">
+                  {c}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/** An HTML, SVG, Mermaid or React artifact, running in its own sandbox:
+ *  scripts (none for an SVG) but never the dashboard's origin. */
+function ArtifactFrame({ kind, text, title }: { kind: ArtifactKind; text: string; title: string }) {
+  const { theme } = useTheme();
+  const doc = useMemo(() => artifactDocument(kind, text, theme === "dark"), [kind, text, theme]);
+  return (
+    <iframe
+      data-testid="artifact-frame"
+      title={title}
+      srcDoc={doc ?? ""}
+      sandbox={frameSandbox(kind)}
+      referrerPolicy="no-referrer"
+      className={`min-h-0 w-full flex-1 border-0 ${kind === "html" || kind === "react" ? "bg-white" : ""}`}
+    />
+  );
+}
+
+type View = "preview" | "code";
+
+/** A file's first tab: Preview where it renders — Markdown as Settings → Appearance says. */
+function defaultView(path: string): View {
+  const kind = artifactKind(path);
+  if (!RENDERED.has(kind)) return "code";
+  return kind === "markdown" && !readMarkdownPreview() ? "code" : "preview";
+}
+
+function Body({ path, content, view }: { path: string; content: Content; view: View }) {
   const { t } = useTranslation("run");
-  const loaded = useContent(path, scope);
+  const kind = artifactKind(path);
   // An image the route refused (gone, server mode) shows like no preview.
   const [broken, setBroken] = useState<string | null>(null);
-  const content: Content =
-    loaded.kind === "image" && loaded.src === broken ? { kind: "none" } : loaded;
-  if (content.kind === "loading") {
+  const shown: Content =
+    content.kind === "image" && content.src === broken ? { kind: "none" } : content;
+  if (shown.kind === "loading") {
     return (
       <div className="flex flex-1 items-center justify-center">
         <Loader2 className="h-5 w-5 animate-spin text-fg-muted" />
       </div>
     );
   }
-  if (content.kind === "image") {
+  if (shown.kind === "image") {
     return (
       <div className="flex flex-1 items-center justify-center overflow-auto p-4">
         <img
-          src={content.src}
+          src={shown.src}
           alt={baseName(path)}
-          onError={() => setBroken(content.src)}
+          onError={() => setBroken(shown.src)}
           className="max-h-full max-w-full object-contain"
         />
       </div>
     );
   }
-  if (content.kind === "none") {
+  if (shown.kind === "none") {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6 text-center text-sm text-fg-muted">
         <FileText className="h-8 w-8" />
@@ -181,69 +270,244 @@ function Body({ path, scope }: { path: string; scope: PreviewScope }) {
       </div>
     );
   }
-  return (
-    <div className="min-h-0 flex-1 overflow-auto">
-      {isMarkdown(path) ? (
-        <MarkdownPreview text={content.text} className="p-4" />
-      ) : (
-        <pre className="p-4 font-mono text-xs leading-relaxed text-fg-secondary">
-          {content.text}
-        </pre>
-      )}
-      {content.truncated && (
-        <p className="px-4 pb-4 text-xs text-fg-muted">{t("chat.outline.truncated")}</p>
-      )}
-    </div>
+  const note = shown.truncated && (
+    <p className="px-4 pb-4 text-xs text-fg-muted">{t("chat.outline.truncated")}</p>
   );
+  if (view === "code" || !RENDERED.has(kind)) {
+    return (
+      <div className="min-h-0 flex-1 overflow-auto p-3">
+        <CodeBlock code={shown.text} lang={artifactLang(path)} maxHeight="none" showLineNumbers />
+        {note}
+      </div>
+    );
+  }
+  if (kind === "markdown") {
+    return (
+      <div className="min-h-0 flex-1 overflow-auto">
+        <MarkdownPreview text={shown.text} className="p-4" />
+        {note}
+      </div>
+    );
+  }
+  if (kind === "csv") return <CsvTable text={shown.text} tab={/\.tsv$/i.test(path)} />;
+  return <ArtifactFrame kind={kind} text={shown.text} title={baseName(path)} />;
 }
 
-/** One file: header (name · EXT, Copy path, Close) over its content. */
+const iconBtn =
+  "flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary disabled:opacity-40";
+
+/** Saves text (or an image's URL) as a file through the browser. */
+function download(name: string, content: Content) {
+  const a = document.createElement("a");
+  if (content.kind === "image") a.href = content.src;
+  else if (content.kind === "text")
+    a.href = URL.createObjectURL(new Blob([content.text], { type: "text/plain;charset=utf-8" }));
+  else return;
+  a.download = name;
+  a.click();
+  if (content.kind === "text") setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+}
+
+/** One file, Claude Desktop's artifact view: name · EXT, Preview | Code, the
+ *  versions the conversation made of it, Copy, Download, Share to the
+ *  Artifacts Hub, full screen, Close. */
 export function FilePreview({
   path,
   scope,
   onClose,
   className = "",
+  messages,
 }: {
   path: string;
   scope: PreviewScope;
   onClose: () => void;
   className?: string;
+  /** The conversation, for the versions its Write/Edit calls left. */
+  messages?: TranscriptMessage[];
 }) {
   const { t } = useTranslation("run");
-  return (
+  const kind = artifactKind(path);
+  const loaded = useContent(path, scope);
+  const [view, setView] = useState<View>(() => defaultView(path));
+  const [full, setFull] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const versions = useMemo(
+    () => (messages ? artifactVersions(messages, path) : []),
+    [messages, path]
+  );
+  // null: the newest — the file as it is now.
+  const [picked, setPicked] = useState<number | null>(null);
+  // Another file opens on its own default tab, at its newest version.
+  useEffect(() => {
+    setPicked(null);
+    setView(defaultView(path));
+  }, [path]);
+  const last = Math.max(versions.length - 1, 0);
+  const at = picked ?? last;
+  const older = picked !== null && picked < last ? versions[picked] : null;
+  const content: Content =
+    older && older.content !== null
+      ? { kind: "text", text: older.content, truncated: false }
+      : loaded;
+  const known = (i: number) => i === last || versions[i]?.content != null;
+  const step = (dir: -1 | 1) => {
+    for (let i = at + dir; i >= 0 && i <= last; i += dir) {
+      if (known(i)) return setPicked(i === last ? null : i);
+    }
+  };
+  const share = async () => {
+    if (sharing) return;
+    setSharing(true);
+    try {
+      const file = slashed(path);
+      const base = slashed(scope.laneCwd).replace(/\/+$/, "");
+      if (scope.laneId !== null && base && file.startsWith(`${base}/`) && picked === null) {
+        await api.artifacts.pinFile({
+          laneId: scope.laneId,
+          path: file.slice(base.length + 1),
+          title: displayName(path),
+          ...(scope.sessionId ? { sessionId: scope.sessionId } : {}),
+        });
+      } else if (content.kind === "text") {
+        await api.artifacts.uploadFile(new File([content.text], displayName(path)), {
+          title: displayName(path),
+        });
+      } else throw new Error(t("chat.artifact.cannotShare"));
+      toast.success(t("chat.artifact.shared"));
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setSharing(false);
+    }
+  };
+  const panel = (
     <section
       data-testid="chat-file-preview"
-      className={`flex min-h-0 min-w-0 flex-col overflow-hidden bg-surface-1 ${className}`}
+      className={
+        full
+          ? "fixed inset-4 z-[200] flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl"
+          : `flex min-h-0 min-w-0 flex-col overflow-hidden bg-surface-1 ${className}`
+      }
     >
-      <header className="flex items-center gap-2 border-b border-border px-4 py-2.5">
-        <span className="min-w-0 truncate text-sm text-fg-primary" title={path}>
+      <header className="flex items-center gap-2 border-b border-border px-3 py-2">
+        <button
+          type="button"
+          onClick={() => void copyText(path)}
+          title={t("chat.outline.copyPath", { path })}
+          className="min-w-0 truncate text-left text-sm text-fg-primary hover:underline"
+        >
           {displayName(path).replace(/\.[A-Za-z0-9]+$/, "")}
-        </span>
-        <span className="text-xs text-fg-muted">{extOf(path)}</span>
-        <div className="ml-auto flex items-center gap-1">
+        </button>
+        <span className="flex-shrink-0 text-xs text-fg-muted">{extOf(path)}</span>
+        {versions.length > 1 && (
+          <span
+            data-testid="artifact-versions"
+            className="flex flex-shrink-0 items-center text-xs text-fg-muted"
+          >
+            <button
+              type="button"
+              onClick={() => step(-1)}
+              disabled={![...Array(at).keys()].some(known)}
+              aria-label={t("chat.artifact.older")}
+              title={t("chat.artifact.older")}
+              className={iconBtn}
+            >
+              <ChevronLeft className="h-3.5 w-3.5" />
+            </button>
+            <span className="tabular-nums">
+              {t("chat.artifact.version", { n: at + 1, total: versions.length })}
+            </span>
+            <button
+              type="button"
+              onClick={() => step(1)}
+              disabled={at >= last}
+              aria-label={t("chat.artifact.newer")}
+              title={t("chat.artifact.newer")}
+              className={iconBtn}
+            >
+              <ChevronRight className="h-3.5 w-3.5" />
+            </button>
+          </span>
+        )}
+        <div className="ml-auto flex flex-shrink-0 items-center gap-1">
+          {RENDERED.has(kind) && kind !== "image" && (
+            <div role="tablist" className="mr-1 flex rounded-md border border-border p-0.5 text-xs">
+              {(["preview", "code"] as const).map((v) => (
+                <button
+                  key={v}
+                  type="button"
+                  role="tab"
+                  aria-selected={view === v}
+                  data-testid={`artifact-tab-${v}`}
+                  onClick={() => setView(v)}
+                  className={`rounded px-2 py-0.5 ${view === v ? "bg-surface-3 text-fg-primary" : "text-fg-muted hover:text-fg-primary"}`}
+                >
+                  {t(`chat.artifact.${v}`)}
+                </button>
+              ))}
+            </div>
+          )}
           <button
             type="button"
-            onClick={() => void copyText(path)}
-            title={t("chat.outline.copyPath", { path })}
-            aria-label={t("chat.outline.copyPath", { path })}
-            className="flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+            data-testid="artifact-copy"
+            onClick={() => void copyText(content.kind === "text" ? content.text : path)}
+            title={t("chat.artifact.copy")}
+            aria-label={t("chat.artifact.copy")}
+            className={iconBtn}
           >
             <Copy className="h-3.5 w-3.5" />
           </button>
+          <button
+            type="button"
+            onClick={() => download(displayName(path), content)}
+            disabled={content.kind !== "text" && content.kind !== "image"}
+            title={t("chat.artifact.download")}
+            aria-label={t("chat.artifact.download")}
+            className={iconBtn}
+          >
+            <Download className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            data-testid="artifact-share"
+            onClick={() => void share()}
+            disabled={sharing || content.kind === "loading" || content.kind === "none"}
+            title={t("chat.artifact.share")}
+            aria-label={t("chat.artifact.share")}
+            className={iconBtn}
+          >
+            {sharing ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Share2 className="h-3.5 w-3.5" />
+            )}
+          </button>
+          <button
+            type="button"
+            data-testid="artifact-expand"
+            onClick={() => setFull((f) => !f)}
+            title={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
+            aria-label={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
+            className={iconBtn}
+          >
+            {full ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+          </button>
           <button
             type="button"
             onClick={onClose}
             title={t("chat.outline.close")}
             aria-label={t("chat.outline.close")}
-            className="flex h-7 w-7 items-center justify-center rounded text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+            className={iconBtn}
           >
             <X className="h-4 w-4" />
           </button>
         </div>
       </header>
-      <Body path={path} scope={scope} />
+      <Body path={path} content={content} view={view} />
     </section>
   );
+  // Full screen: over the whole page, where a pane's edges cannot clip it.
+  return full ? createPortal(panel, document.body) : panel;
 }
 
 /** Claude's Uploads dialog: the files on the left, the picked one on the right. */

client/src/components/run/LaneConsolePane.tsx

@@ -12,7 +12,8 @@
  * new lane's own live session for its slot, or an empty pane — never the
  * previous lane's terminal. `attachRequest` (a run picked in the sidebar or a
  * tab) attaches to that tmux session only; nothing is started or resumed.
- * A Claude or Codex pane also has a Chat view (`PaneChat`): the session's
+ * A pane of a `CHAT_TOOLS` tool (Claude, Codex, omp, Cursor, Antigravity) also
+ * has a Chat view (`PaneChat`): the session's
  * conversation laid OVER the terminal, which stays mounted and attached under
  * it. Chat or terminal is each SESSION's own (`useSessionChat`, the toggle
  * left of the pane's split buttons); the Chat UI setting (Settings →
@@ -29,9 +30,7 @@ import type { Lane } from "../../lib/types";
 import { useAiTools } from "../../hooks/useAiTools";
 import { TerminalView } from "./TerminalView";
 import { PaneChat } from "./PaneChat";
-import { useSessionChat } from "../../lib/chatUi";
-
-const CHAT_TOOLS = new Set(["claude", "codex"]);
+import { CHAT_TOOLS, useSessionChat } from "../../lib/chatUi";
 
 export interface LaneConsolePaneProps {
   lanes: Lane[];
@@ -218,6 +217,7 @@ export function LaneConsolePane({
             wsBaseUrl={window.location.origin.replace(/^http/, "ws")}
             autoFocus={autoFocus && !(chatable && chat)}
             covered={!!(chatable && chat)}
+            tool={handle.tool}
             // The pane died (double Ctrl+C out of `claude`, `exit`, a crash) —
             // the tab bar moves on (another tab, or the home's prompt box)
             // rather than leaving a dead terminal the user has to click out of.

client/src/components/run/PaneChat.tsx

@@ -15,7 +15,8 @@
  * in the box beside `+`. A menu the CLI asks with — AskUserQuestion, a
  * permission or trust prompt, Codex's approval — is read off the terminal
  * underneath (`readRunMenu`) and shown in the prompt box's place as buttons
- * that press its keys there (`PaneMenuCard`); its "Type something" row opens
+ * that press its keys there (`PaneMenuCard`) — a permission prompt with its tool, command and a deny-with-note
+ * (`PermissionMenuCard`); its "Type something" row opens
  * a field in the card, whose text is typed there as the answer
  * (`answerRunMenu`).
  * It also has Claude Desktop's activity panel (`ChatOutline`: progress,
@@ -56,10 +57,26 @@
 
 import { memo, useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowUp, FileText, Square, SquareCheck } from "lucide-react";
+import {
+  ArrowUp,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  MessageCircleQuestion,
+  ShieldQuestion,
+  Square,
+  SquareCheck,
+} from "lucide-react";
 import { isSubmitEnter } from "../../lib/keys";
 import { ConversationView } from "../conversation/ConversationView";
-import { ModelMenu, PromptEditor, promptWithImages, type PromptImage } from "./RunSetup";
+import {
+  ModelMenu,
+  PromptEditor,
+  promptForPane,
+  promptWithImages,
+  type PromptImage,
+} from "./RunSetup";
 import { ChatAddMenu } from "./ChatAddMenu";
 import { addAttachments, dragAttachments } from "../../lib/promptAttach";
 import { readChatDraft, writeChatDraft } from "../../lib/chatDraft";
@@ -71,7 +88,11 @@ import { Divider, showTerminal } from "./PaneGrid";
 import {
   answerRunMenu,
   chooseRunOption,
+  notePaneFocus,
+  onPaneOutput,
+  stepRunMenu,
   interruptRun,
+  readRunBusy,
   readRunMenu,
   submitToRun,
   type PaneMenu,
@@ -83,7 +104,9 @@ import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { setTabBadge } from "../../lib/tabBadge";
 import { fmt } from "../../lib/format";
-import { agentAwaitingReason } from "../../lib/types";
+import { agentAwaitingReason, type TranscriptMessage, type WSMessage } from "../../lib/types";
+import { eventBus } from "../../lib/eventBus";
+import { throttle } from "../../lib/throttle";
 import { api, type EffortLevel, type PermissionMode, type RunHandle } from "../../lib/api";
 
 const MODES: [PermissionMode, string][] = [
@@ -94,6 +117,11 @@ const MODES: [PermissionMode, string][] = [
   ["bypassPermissions", "Bypass"],
 ];
 const isSettable = (m: unknown): m is PermissionMode => MODES.some(([v]) => v === m);
+// Pane output re-reads the transcript at most this often: a TUI spinner
+// redraws several times a second, and each read walks the transcript file.
+const OUTPUT_FETCH_MS = 1000;
+/** A tool with no known busy line counts as at work this long after its pane last drew. */
+const OUTPUT_BUSY_MS = 2000;
 const SIDE_KEY = "agenthub.chat.panelWidth";
 const clampSide = (f: number) => Math.round(Math.min(0.7, Math.max(0.2, f)) * 100) / 100;
 const outlineKey = (sessionId: string) => `agenthub.chat.panel.${sessionId}`;
@@ -111,6 +139,7 @@ const storedSide = () => {
  *  (LiteLLM's list, 2026-10). Null for another vendor's model. */
 // ponytail: a fixed rule, not a table; read LiteLLM's max_input_tokens if a new 200K model ships.
 export function contextWindow(model: string | null): number | null {
+  // A Codex/omp chat reports its own window (ContextMeter's `window`).
   if (!model?.startsWith("claude-")) return null;
   return /^claude-(?:[23]|instant|(?:opus|sonnet|haiku)-4(?:-[0-5])?(?:-\d{8})?$)/.test(model)
     ? 200_000
@@ -119,7 +148,13 @@ export function contextWindow(model: string | null): number | null {
 
 /** How full the context is: a ring and a percentage, amber then red as
  *  Claude Code's auto-compact comes near. */
-function ContextMeter({ tokens, model }: { tokens: number; model: string | null }) {
+function ContextMeter({
+  tokens,
+  model,
+}: {
+  tokens: number;
+  model: string | null;
+}) {
   const { t } = useTranslation("run");
   const size = contextWindow(model);
   if (!size || !tokens) return null;
@@ -206,33 +241,222 @@ function PermissionChip({ runId, initial }: { runId: string; initial: Permission
   );
 }
 
+/** A permission prompt (Claude's tool approval, Codex's command approval,
+ *  the folder-trust question): it offers a Yes and a No. */
+export function isPermissionMenu(menu: PaneMenu): boolean {
+  if (menu.multi || menu.tabs) return false;
+  const labels = menu.options.map((o) => o.label);
+  return labels.some((l) => /^Yes\b/i.test(l)) && labels.some((l) => /^No\b/i.test(l));
+}
+
+/** A menu row's label without its key hint (`Yes, proceed (y)`). */
+const bareLabel = (label: string) => label.replace(/\s+\((?:[a-z]|esc|shift\+tab)\)$/i, "");
+
+/** A permission prompt read off the terminal: the tool, what it will run, and the CLI's own
+ *  answers as buttons — each still presses its key in the pane. "No, and
+ *  tell … differently" also takes a note, sent as the next message once the
+ *  CLI is back at its prompt. */
+function PermissionMenuCard({
+  menu,
+  onChoose,
+  onDenyNote,
+  onCancel,
+}: {
+  menu: PaneMenu;
+  onChoose: (index: number) => void;
+  onDenyNote: (index: number, note: string) => void;
+  onCancel: () => void;
+}) {
+  const { t } = useTranslation("run");
+  const [noting, setNoting] = useState(false);
+  const [note, setNote] = useState("");
+  const q = menu.question.split("\n");
+  const title = menu.detail?.[0] ?? q[0] ?? "";
+  const body = (menu.detail ? menu.detail.slice(1) : q.slice(1)).join("\n");
+  const ask = menu.detail ? menu.question : "";
+  const yes = menu.options.findIndex((o) => /^Yes\b/i.test(o.label));
+  const tell = menu.options.findIndex((o) => /^No, and tell\b/i.test(o.label));
+  const sendNote = () => {
+    if (note.trim() && tell >= 0) onDenyNote(tell, note.trim());
+  };
+  return (
+    <div data-testid="pane-chat-permission" className="flex flex-col gap-2">
+      <div className="flex items-start gap-2">
+        <ShieldQuestion className="mt-0.5 h-4 w-4 flex-shrink-0 text-status-warning" />
+        <div className="min-w-0 flex-1">
+          <p className="whitespace-pre-wrap break-words text-sm font-medium text-fg-primary">
+            {title}
+          </p>
+          {ask && <p className="text-xs text-fg-muted">{ask}</p>}
+        </div>
+      </div>
+      {body && (
+        <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-all rounded-lg border border-border bg-surface-2 px-3 py-2 font-mono text-xs text-fg-secondary">
+          {body}
+        </pre>
+      )}
+      {noting ? (
+        <div className="flex items-center gap-2 rounded-lg border border-accent/50 bg-surface-2 px-3 py-1">
+          <input
+            autoFocus
+            data-testid="pane-chat-permission-note"
+            value={note}
+            onChange={(e) => setNote(e.target.value)}
+            onKeyDown={(e) => {
+              if (isSubmitEnter(e)) {
+                e.preventDefault();
+                sendNote();
+              } else if (e.key === "Escape") setNoting(false);
+            }}
+            placeholder={t("chat.request.notePlaceholder")}
+            aria-label={t("chat.request.notePlaceholder")}
+            className="min-w-0 flex-1 bg-transparent py-0.5 text-sm text-fg-primary outline-none placeholder:text-fg-muted"
+          />
+          <button
+            type="button"
+            onClick={sendNote}
+            disabled={!note.trim()}
+            className="btn-secondary text-xs disabled:opacity-40"
+          >
+            {t("chat.request.send")}
+          </button>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          {menu.options.map((o, i) => (
+            <button
+              key={`${i}-${o.label}`}
+              type="button"
+              data-testid="pane-chat-permission-option"
+              autoFocus={i === yes}
+              onClick={() => onChoose(i)}
+              title={o.hint || undefined}
+              className={`${i === yes ? "btn-primary" : "btn-secondary"} max-w-full break-words text-left text-xs`}
+            >
+              {bareLabel(o.label)}
+            </button>
+          ))}
+          {tell >= 0 && (
+            <button
+              type="button"
+              data-testid="pane-chat-permission-tell"
+              onClick={() => setNoting(true)}
+              className="text-xs text-fg-muted underline-offset-2 hover:text-fg-primary hover:underline"
+            >
+              {t("chat.request.denyWithNote")}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={onCancel}
+            className="ml-auto rounded-md border border-border px-2 py-0.5 text-xs text-fg-muted hover:bg-surface-3"
+          >
+            {t("chat.menu.cancel")}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 /** The menu the CLI asks with, as buttons: a pick presses its key in the
  *  pane; its "Type something" row opens a field right there instead —
- *  pressing that row's digit again would type the digit into the CLI's own. */
+ *  pressing that row's digit again would type the digit into the CLI's own.
+ *  A permission prompt takes its own layout (`PermissionMenuCard`), any
+ *  other menu the question layout. */
 export function PaneMenuCard({
   menu,
   onChoose,
   onAnswer,
   onCancel,
+  onStep,
+  onDenyNote,
 }: {
   menu: PaneMenu;
   onChoose: (index: number) => void;
   onAnswer: (text: string) => void;
   onCancel: () => void;
+  /** Previous (-1) / next (1) question of a multi-question AskUserQuestion. */
+  onStep?: (dir: -1 | 1) => void;
+  /** A permission prompt's "No, and tell …", with the note to send after it. */
+  onDenyNote?: (index: number, note: string) => void;
 }) {
   const { t } = useTranslation("run");
   const [typing, setTyping] = useState(false);
   const [draft, setDraft] = useState("");
   const submit = () => draft.trim() && onAnswer(draft);
+  if (isPermissionMenu(menu))
+    return (
+      <div
+        data-testid="pane-chat-menu"
+        className="rounded-2xl border border-border bg-surface-1 p-3 shadow-sm"
+      >
+        <PermissionMenuCard
+          menu={menu}
+          onChoose={onChoose}
+          onDenyNote={onDenyNote ?? ((i) => onChoose(i))}
+          onCancel={onCancel}
+        />
+      </div>
+    );
   return (
     <div
       data-testid="pane-chat-menu"
       className="rounded-2xl border border-border bg-surface-1 p-3 shadow-sm"
     >
+      {menu.tabs && (
+        <div
+          data-testid="pane-chat-menu-tabs"
+          className="mb-2 flex flex-wrap items-center gap-1 text-xs"
+        >
+          {onStep && (
+            <button
+              type="button"
+              onClick={() => onStep(-1)}
+              aria-label={t("chat.menu.prev")}
+              title={t("chat.menu.prev")}
+              className="rounded-md border border-border p-0.5 text-fg-muted hover:bg-surface-3"
+            >
+              <ChevronLeft className="h-3.5 w-3.5" />
+            </button>
+          )}
+          {menu.tabs.map((tab, i) => (
+            <span
+              key={`${i}-${tab.label}`}
+              className={`flex items-center gap-1 rounded-md border px-1.5 py-0.5 ${
+                i === menu.tab
+                  ? "border-accent/50 bg-surface-2 text-fg-primary"
+                  : "border-border text-fg-muted"
+              }`}
+            >
+              {tab.done ? (
+                <Check className="h-3 w-3 text-accent" />
+              ) : (
+                <Square className="h-3 w-3" />
+              )}
+              {tab.label}
+            </span>
+          ))}
+          {onStep && (
+            <button
+              type="button"
+              onClick={() => onStep(1)}
+              aria-label={t("chat.menu.next")}
+              title={t("chat.menu.next")}
+              className="rounded-md border border-border p-0.5 text-fg-muted hover:bg-surface-3"
+            >
+              <ChevronRight className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      )}
       {menu.question && (
-        <p className="mb-2 whitespace-pre-wrap break-words text-sm font-medium text-fg-primary">
-          {menu.question}
-        </p>
+        <div className="mb-2 flex items-start gap-2">
+          <MessageCircleQuestion className="mt-0.5 h-4 w-4 flex-shrink-0 text-accent" />
+          <p className="whitespace-pre-wrap break-words text-sm font-medium text-fg-primary">
+            {menu.question}
+          </p>
+        </div>
       )}
       <div className="flex flex-col gap-1">
         {menu.options.map((o, i) =>
@@ -332,9 +556,10 @@ export const PaneChat = memo(function PaneChat({
   const runId = run.id;
   const claude = run.tool === "claude";
   // The unsent prompt outlives the terminal view and a reload (`lib/chatDraft`).
-  const [prompt, setPrompt] = useState(() => readChatDraft(sessionId).prompt);
-  const [images, setImages] = useState<PromptImage[]>(() => readChatDraft(sessionId).images);
-  useEffect(() => writeChatDraft(sessionId, prompt, images), [sessionId, prompt, images]);
+  const draftKey = sessionId;
+  const [prompt, setPrompt] = useState(() => readChatDraft(draftKey).prompt);
+  const [images, setImages] = useState<PromptImage[]>(() => readChatDraft(draftKey).images);
+  useEffect(() => writeChatDraft(draftKey, prompt, images), [draftKey, prompt, images]);
   const [uploading, setUploading] = useState(false);
   const [follow, setFollow] = useState(0);
   const [model, setModel] = useState(run.model ?? "");
@@ -397,7 +622,11 @@ export const PaneChat = memo(function PaneChat({
         // status filter ignored: check the status here.
         .then((r) => {
           const main = r.agents.filter((a) => a.type === "main");
-          setWorking(main.some((a) => a.status === "working"));
+          // A fresh start, resume or `/clear` leaves main "working" at an
+          // empty prompt (SessionStart's flag) until the first prompt.
+          setWorking(
+            main.some((a) => a.status === "working" && agentAwaitingReason(a) !== "session_start")
+          );
           setWaiting(main.some((a) => agentAwaitingReason(a) === "notification"));
         })
         .catch(() => {}),
@@ -406,6 +635,46 @@ export const PaneChat = memo(function PaneChat({
   useEffect(() => {
     void readWorking();
   }, [readWorking]);
+  // The terminal underneath drew something: the CLI is at work, so its
+  // transcript may have grown — read it now, for any tool, hooks or not. A
+  // spinner redraws all the time, hence the throttle.
+  useEffect(() => {
+    if (!sessionId) return;
+    const poke = throttle(
+      () =>
+        eventBus.publish({
+          type: "transcript_changed",
+          data: { session_id: sessionId },
+        } as unknown as WSMessage),
+      OUTPUT_FETCH_MS
+    );
+    const off = onPaneOutput(runId, poke);
+    return () => {
+      off();
+      poke.cancel();
+    };
+  }, [runId, sessionId]);
+  // The terminal's own word on a turn: its busy line (BUSY_LINE) while it
+  // shows, else — a tool whose line we do not know — output in the last
+  // OUTPUT_BUSY_MS. Hooks miss a tool that sends none (omp, Cursor, Codex
+  // without its opt-in hooks), and arrive late on a dashboard they skip.
+  const [screenBusy, setScreenBusy] = useState(false);
+  useEffect(() => {
+    let last = 0;
+    const off = onPaneOutput(runId, () => (last = Date.now()));
+    const read = () => {
+      const known = readRunBusy(runId, run.tool);
+      setScreenBusy(known ?? (last > 0 && Date.now() - last < OUTPUT_BUSY_MS));
+    };
+    read();
+    const timer = window.setInterval(() => {
+      if (isShown(onScreen)) read();
+    }, 700);
+    return () => {
+      off();
+      window.clearInterval(timer);
+    };
+  }, [runId, run.tool, onScreen]);
   useLiveRefresh(readWorking, {
     throttleMs: 500,
     // While Stop shows, also poll: a missed agent_updated (the hook reached
@@ -434,6 +703,7 @@ export const PaneChat = memo(function PaneChat({
     }, 700);
     return () => window.clearInterval(timer);
   }, [runId, onScreen]);
+  const busy = working || screenBusy;
   const asking = waiting || menu !== null;
   // Gone until the pane redraws: no second press on a stale menu.
   const choose = (index: number) => {
@@ -446,15 +716,22 @@ export const PaneChat = memo(function PaneChat({
       setFollow((n) => n + 1);
     } else toast.error(t("chat.notSent"));
   };
+  // "No, and tell … differently": the CLI drops back to its prompt, where
+  // the note is what the user would type next.
+  const denyWithNote = (index: number, note: string) => {
+    if (!menu || !chooseRunOption(runId, menu, index)) return void toast.error(t("chat.notSent"));
+    setMenu(null);
+    window.setTimeout(() => void command(note), 800);
+  };
 
   // A hidden tab says when this session waits on the user or its turn ended.
   const was = useRef({ working: false, asking: false });
   useEffect(() => {
     if (asking) setTabBadge(runId, "waiting");
-    else if (working) setTabBadge(runId, null);
+    else if (busy) setTabBadge(runId, null);
     else if (was.current.working || was.current.asking) setTabBadge(runId, "done");
-    was.current = { working, asking };
-  }, [runId, working, asking]);
+    was.current = { working: busy, asking };
+  }, [runId, busy, asking]);
   useEffect(() => () => setTabBadge(runId, null), [runId]);
   const [context, setContext] = useState<{ tokens: number; model: string | null }>({
     tokens: 0,
@@ -470,7 +747,20 @@ export const PaneChat = memo(function PaneChat({
 
   // Stable, so typing in the prompt box does not re-render the conversation
   // (ConversationView is memoized).
-  const openTerminal = useCallback(() => showTerminal(runId, sessionId), [runId, sessionId]);
+  const openTerminal = useCallback(
+    () => showTerminal(runId, sessionId, run.tool),
+    [runId, sessionId, run.tool]
+  );
+  // The conversation on screen: an artifact's versions are rebuilt from it.
+  const [convMessages, setConvMessages] = useState<TranscriptMessage[]>([]);
+  // An artifact card opens in this chat's own panel, like Claude Desktop's —
+  // not the workspace's Changes panel a plain file link goes to.
+  const openArtifact = useCallback(
+    (named: string) => {
+      setPreview(resolveIn(cwd, named));
+    },
+    [cwd]
+  );
   const openFile = useCallback(
     (named: string) => {
       // A relative path in a reply (`server/lib/x.js`) is relative to this pane's folder.
@@ -491,7 +781,7 @@ export const PaneChat = memo(function PaneChat({
   const [notStarted, setNotStarted] = useState(false);
 
   // A control is a command typed into the pane, like the user would.
-  const command = async (line: string) => {
+  const command = async (line: string, files: string[] = []) => {
     if (
       notStarted &&
       !(await confirmDialog({
@@ -501,14 +791,15 @@ export const PaneChat = memo(function PaneChat({
       }))
     )
       return false;
-    const ok = submitToRun(runId, line);
+    const ok = submitToRun(runId, line, files);
     if (!ok) toast.error(t("chat.notSent"));
     return ok;
   };
 
   const send = async () => {
     if (!text || uploading) return;
-    if (!(await command(text))) return;
+    const out = promptForPane(prompt, images, claude);
+    if (!(await command(out.text, out.files))) return;
     setFollow((n) => n + 1);
     setPrompt("");
     images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
@@ -519,6 +810,8 @@ export const PaneChat = memo(function PaneChat({
     <div
       ref={rootRef}
       data-prompt-drop
+      // The last chat focused is where the Changes panel's comments go.
+      onFocusCapture={() => notePaneFocus(runId)}
       className="relative flex min-h-0 flex-1 [container-type:inline-size]"
       style={{ "--chat-side": `${side * 100}%` } as CSSProperties}
     >
@@ -535,6 +828,8 @@ export const PaneChat = memo(function PaneChat({
             onContext={onContext}
             onNotStarted={setNotStarted}
             onOpenFile={openFile}
+            onOpenArtifact={openArtifact}
+            onMessages={setConvMessages}
           />
           {!outlineOpen && !preview && (
             <button
@@ -551,7 +846,7 @@ export const PaneChat = memo(function PaneChat({
           )}
         </div>
         <div className="mx-4">
-          <div className="mx-auto w-full max-w-[max(48rem,70%)]">
+          <div className="mx-auto w-full max-w-3xl">
             {menu && (
               <PaneMenuCard
                 // A new question starts with its field closed.
@@ -559,6 +854,10 @@ export const PaneChat = memo(function PaneChat({
                 menu={menu}
                 onChoose={choose}
                 onAnswer={answer}
+                onDenyNote={denyWithNote}
+                onStep={(dir) => {
+                  if (!stepRunMenu(runId, dir)) toast.error(t("chat.notSent"));
+                }}
                 onCancel={() => {
                   if (interruptRun(runId)) setMenu(null);
                   else toast.error(t("chat.notSent"));
@@ -568,7 +867,7 @@ export const PaneChat = memo(function PaneChat({
             {/* In the card's place while the CLI asks: hidden, never unmounted,
                 so a draft or an upload in flight survives the question. */}
             <div
-              className={`rounded-2xl border border-border bg-surface-1 p-2 shadow-sm transition-colors focus-within:border-accent/50 ${menu ? "hidden" : ""}`}
+              className={`rounded-[1.25rem] border border-border bg-surface-1 p-2.5 shadow-[0_2px_12px_-4px_rgb(0_0_0/0.12)] transition-[border-color,box-shadow] focus-within:border-border-light focus-within:shadow-[0_4px_20px_-6px_rgb(0_0_0/0.2)] ${menu ? "hidden" : ""}`}
             >
               <PromptEditor
                 bare
@@ -595,6 +894,26 @@ export const PaneChat = memo(function PaneChat({
                   onAttach={(items) => setImages((prev) => addAttachments(prev, items))}
                 />
                 {claude && <PermissionChip runId={runId} initial={run.permissionMode} />}
+                {run.tool === "codex" &&
+                  // Codex's `/model` (then its effort) and `/permissions` are
+                  // numbered pickers: typed here, answered on the menu card.
+                  (
+                    [
+                      ["/permissions", t("fields.permissionMode")],
+                      ["/model", t("fields.model")],
+                    ] as const
+                  ).map(([line, label]) => (
+                    <button
+                      key={line}
+                      type="button"
+                      data-testid={`pane-chat-codex-${line.slice(1)}`}
+                      onClick={() => void command(line)}
+                      title={t("chat.codexPicker")}
+                      className="rounded-md px-2 py-1 text-xs text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg-primary"
+                    >
+                      {label}
+                    </button>
+                  ))}
                 <div className="ml-auto flex items-center gap-1">
                   <ContextMeter tokens={context.tokens} model={context.model} />
                   {claude && (
@@ -610,7 +929,7 @@ export const PaneChat = memo(function PaneChat({
                       }}
                     />
                   )}
-                  {working && !text ? (
+                  {busy && !text ? (
                     <button
                       type="button"
                       data-testid="pane-chat-stop"
@@ -623,8 +942,13 @@ export const PaneChat = memo(function PaneChat({
                       }}
                       aria-label={t("chat.stop")}
                       title={t("chat.stop")}
-                      className="flex h-8 w-8 items-center justify-center rounded-full bg-surface-3 text-fg-primary transition-colors hover:bg-surface-4"
+                      className="relative flex h-8 w-8 items-center justify-center rounded-full bg-surface-3 text-fg-primary transition-colors hover:bg-surface-4"
                     >
+                      {/* A turning ring: the turn is still going. */}
+                      <span
+                        aria-hidden
+                        className="absolute inset-0 animate-spin rounded-full border-2 border-transparent border-t-accent"
+                      />
                       <Square className="h-3 w-3 fill-current" />
                     </button>
                   ) : (
@@ -650,6 +974,7 @@ export const PaneChat = memo(function PaneChat({
         <FilePreview
           path={preview}
           scope={scope}
+          messages={convMessages}
           onClose={() => setPreview(null)}
           // Beside the chat when the pane has room, over it when not.
           className="absolute inset-x-0 top-0 bottom-[calc(100%-var(--chat-area,100%))] z-30 rounded-xl border border-border [@container(min-width:40rem)]:static [@container(min-width:40rem)]:m-3 [@container(min-width:40rem)]:ml-0 [@container(min-width:40rem)]:w-[calc(var(--chat-side)-0.75rem)] [@container(min-width:40rem)]:flex-shrink-0"

client/src/components/run/PaneGrid.tsx

@@ -70,10 +70,10 @@ import {
 } from "../../lib/paneLayout";
 import { AiToolIcon } from "../AiToolIcon";
 import { RunDot, type RunState } from "./ConsoleTabs";
-import { setSessionChat, useSessionChat } from "../../lib/chatUi";
+import { CHAT_TOOLS, setSessionChat, useSessionChat } from "../../lib/chatUi";
 import { readChatDraft, writeChatDraft } from "../../lib/chatDraft";
 import { pasteToRun, takeRunInput } from "../../lib/panePaste";
-import { promptWithImages } from "./RunSetup";
+import { promptForPane } from "./RunSetup";
 
 export const PANE_DRAG_TYPE = "application/x-agenthub-pane";
 /** The slot being dragged: `dataTransfer` data cannot be read during dragover. */
@@ -238,23 +238,23 @@ function PaneMenu({
 const ITEM =
   "flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-sm text-fg-secondary hover:bg-surface-4 hover:text-fg-primary";
 
-/** Chat UI ⇄ terminal for a Claude/Codex pane — this session's own view
+/** Chat UI ⇄ terminal for a `CHAT_TOOLS` pane — this session's own view
  *  (`lib/chatUi.ts`); a session with no id yet has no chat to show. The
  *  unsent prompt goes along: the terminal's input box into the chat's draft,
  *  the draft (its files as paths) back into the input box, never sent. */
 /** A session's chat switched to its terminal: the unsent prompt goes into
  *  the CLI's input box, without Enter. */
-export function showTerminal(runId: string, sessionId: string) {
+export function showTerminal(runId: string, sessionId: string, tool?: string) {
   const draft = readChatDraft(sessionId);
-  const text = promptWithImages(draft.prompt, draft.images);
-  if (text && pasteToRun(runId, text)) writeChatDraft(sessionId, "", []);
+  const { text, files } = promptForPane(draft.prompt, draft.images, tool === "claude");
+  if ((text || files.length) && pasteToRun(runId, text, files)) writeChatDraft(sessionId, "", []);
   setSessionChat(sessionId, false);
 }
 
 function ChatToggle({ run }: { run?: RunHandle }) {
   const { t } = useTranslation("lanes");
   const chat = useSessionChat(run?.sessionId);
-  if (!run?.sessionId || (run.tool !== "claude" && run.tool !== "codex")) return null;
+  if (!run?.sessionId || !CHAT_TOOLS.has(run.tool)) return null;
   const sessionId = run.sessionId;
   const label = chat ? t("panes.showTerminal") : t("panes.showChat");
   return (
@@ -265,7 +265,7 @@ function ChatToggle({ run }: { run?: RunHandle }) {
       title={label}
       aria-label={label}
       onClick={() => {
-        if (chat) return showTerminal(run.id, sessionId);
+        if (chat) return showTerminal(run.id, sessionId, run.tool);
         const draft = readChatDraft(sessionId);
         const text = takeRunInput(run.id);
         if (text)

client/src/components/run/RunSetup.tsx

@@ -11,7 +11,9 @@
  *     other as a name chip) attached by their saved paths (`POST /api/run/drop-file`,
  *     remembered for the + menu's Recent uploads), and a panel row (Files,
  *     Changes, a context file or folder) dropped on it (`lib/promptAttach.ts`)
- *     as an `@path` chip — a `bare` one takes a drop anywhere on its box;
+ *     as an `@path` chip — so is a local file a browser on the dashboard's
+ *     own machine drops or pastes with its `file://` path, never uploaded —
+ *     a `bare` one takes a drop anywhere on its box;
  *     its `/command` and `@path` tokens are coloured by a mirror laid over
  *     the textarea (`lib/promptTokens.ts`);
  *     a borderless (`bare`) one grows with its text up to 40vh;
@@ -67,9 +69,15 @@ import { TOKEN_TONE, promptTokens } from "../../lib/promptTokens";
 import {
   ATTACH_MIME,
   addAttachments,
+  claudeMention,
+  copiedFilePaths,
   droppedAttachments,
   droppedSkill,
   droppedText,
+  isLocalBrowser,
+  localAttachment,
+  localCandidates,
+  sameFilesHere,
   SKILL_MIME,
   rememberUploads,
 } from "../../lib/promptAttach";
@@ -203,9 +211,37 @@ interface PromptEditorProps {
 export type PromptImage = { path: string; url?: string; name: string };
 
 /** The prompt as sent: the text, then each file's saved path — which is how
- *  the CLI is handed an image or a file. */
-export function promptWithImages(text: string, images: PromptImage[]): string {
-  return [text.trim(), ...images.map((i) => i.path)].filter(Boolean).join(" ");
+ *  the CLI is handed an image or a file; for `claude`, as `@` mentions. */
+export function promptWithImages(text: string, images: PromptImage[], claude = false): string {
+  return [text.trim(), ...images.map((i) => (claude ? claudeMention(i.path) : i.path))]
+    .filter(Boolean)
+    .join(" ");
+}
+
+const IMAGE_PATH = /^[^@].*\.(png|jpe?g|gif|webp)$/i;
+
+/** The prompt as pasted into a live pane. `claude`: one paste, every file an
+ *  `@` mention, and a trailing space so a mention at the end does not leave
+ *  the `@` file suggester open to swallow the Enter after it. Any other tool:
+ *  the text with every non-image file in it, and the images' paths apart,
+ *  each in a paste of its own (how `codex` attaches a pasted image path). */
+export function promptForPane(
+  text: string,
+  images: PromptImage[],
+  claude = false
+): { text: string; files: string[] } {
+  if (claude) {
+    const all = promptWithImages(text, images, true);
+    return { text: images.length ? `${all} ` : all, files: [] };
+  }
+  const isImage = (i: PromptImage) => IMAGE_PATH.test(i.path);
+  return {
+    text: promptWithImages(
+      text,
+      images.filter((i) => !isImage(i))
+    ),
+    files: images.filter(isImage).map((i) => i.path),
+  };
 }
 
 /** A plain-text paste longer than this is attached as `pasted-text.txt`. */
@@ -273,7 +309,7 @@ export function PromptEditor({
     Promise.all([
       api.ccConfig.commands(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
       api.ccConfig.skills(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
-      api.ccConfig.plugins().catch(() => ({ plugins: [] })),
+      api.ccConfig.plugins(fileCwd).catch(() => ({ plugins: [] })),
     ]).then(([c, sk, pl]) => {
       // A plugin's commands and skills are addressed as `/<plugin>:<name>`; one
       // installed at both user and project scope is listed once.
@@ -373,7 +409,11 @@ export function PromptEditor({
   // A pasted or dropped file is saved on the server's machine (the same
   // route the terminal's drop uses) and shown as a thumbnail or a name chip;
   // its path is added to the prompt only when it is sent (promptWithImages).
-  const [upload, setUpload] = useState<"uploading" | "failed" | null>(null);
+  const [upload, setUpload] = useState<"uploading" | "failed" | "tooBig" | "tooBigLocal" | null>(
+    null
+  );
+  // The server's own limit, from its ETOOBIG refusal (never a copy of it here).
+  const [limitMb, setLimitMb] = useState(0);
   const [viewing, setViewing] = useState<PromptImage | null>(null);
   const [imageMenu, setImageMenu] = useState<(MenuPoint & { img: PromptImage }) | null>(null);
   const uploading = upload === "uploading";
@@ -384,20 +424,72 @@ export function PromptEditor({
     const picked = Array.from(list ?? []);
     if (picked.length === 0) return false;
     setUpload("uploading");
-    Promise.all(picked.map((f) => api.run.dropFile(f, lane)))
-      .then((saved) => {
-        setUpload(null);
-        const added = picked.map((f, i) => ({
-          path: saved[i]!.path,
+    // Each file on its own: one refused file does not cost the others.
+    void Promise.allSettled(picked.map((f) => api.run.dropFile(f, lane))).then((results) => {
+      const added: PromptImage[] = [];
+      const errors: unknown[] = [];
+      results.forEach((r, i) => {
+        if (r.status === "rejected") return void errors.push(r.reason);
+        const f = picked[i]!;
+        added.push({
+          path: r.value.path,
           url: f.type.startsWith("image/") ? URL.createObjectURL(f) : undefined,
           name: f.name,
-        }));
+        });
+      });
+      if (added.length) {
         rememberUploads(added.map((a) => ({ path: a.path, name: a.name, image: !!a.url })));
+        keepError.current = errors.length > 0; // these came with the error
         onImagesChange((prev) => [...prev, ...added]);
-      })
-      .catch(() => setUpload("failed"));
+      }
+      // Over the server's limit (ETOOBIG): refused before the body is sent.
+      const tooBig = errors
+        .map((e) => e as { code?: string; maxBytes?: number } | null)
+        .find((e) => e?.code === "ETOOBIG");
+      if (tooBig) setLimitMb(Math.round((tooBig.maxBytes ?? 0) / 1024 / 1024));
+      setUpload(
+        !errors.length ? null : !tooBig ? "failed" : isLocalBrowser() ? "tooBigLocal" : "tooBig"
+      );
+    });
     return true;
   };
+  /** A file manager's copy pasted with no file beside it, only `file://`
+   *  text: attached by those paths, as the terminal pastes them. */
+  const pastedLocalFiles = (dt: DataTransfer | null | undefined) => {
+    const paths = isLocalBrowser() ? copiedFilePaths(dt) : null;
+    if (!paths) return false;
+    onImagesChange((prev) => addAttachments(prev, paths.map(localAttachment)));
+    return true;
+  };
+  /** Dropped or pasted files: by their own paths when the browser is on the
+   *  dashboard's machine and the server finds the same files there (a file
+   *  manager hands over `file://` paths beside the bytes), else uploaded. */
+  const attachDropped = (
+    dt: DataTransfer | null | undefined,
+    list: FileList | null | undefined
+  ) => {
+    const files = Array.from(list ?? []);
+    if (files.length === 0) return false;
+    const paths = localCandidates(dt, files);
+    if (!paths) return attachImages(files);
+    setUpload("uploading");
+    void sameFilesHere(paths, files).then((same) => {
+      if (!same) return void attachImages(files);
+      setUpload(null);
+      onImagesChange((prev) => addAttachments(prev, paths.map(localAttachment)));
+    });
+    return true;
+  };
+  // Anything attached since — a path, a panel row, a + menu pick — ends a past
+  // upload's error; not the files that uploaded beside the one refused.
+  const keepError = useRef(false);
+  const imageCount = useRef(images.length);
+  useEffect(() => {
+    const grew = images.length > imageCount.current;
+    imageCount.current = images.length;
+    if (grew && !keepError.current) setUpload((u) => (u === "uploading" ? u : null));
+    keepError.current = false;
+  }, [images.length]);
   const removeImage = (img: PromptImage) => {
     if (img.url) URL.revokeObjectURL(img.url);
     onImagesChange((prev) => prev.filter((x) => x !== img));
@@ -426,7 +518,7 @@ export function PromptEditor({
     } else if (skill) {
       e.preventDefault();
       onChange(`/${skill} ${value.replace(/^\s+/, "")}`);
-    } else if (attachImages(e.dataTransfer?.files)) e.preventDefault();
+    } else if (attachDropped(e.dataTransfer, e.dataTransfer?.files)) e.preventDefault();
     else {
       // Only text (a file manager's or an editor's `file://` list, a
       // selection, a link): what the terminal beneath would paste.
@@ -591,7 +683,8 @@ export function PromptEditor({
           onBlur={() => setTrigger(null)}
           onKeyDown={handleKeyDown}
           onPaste={(e) => {
-            if (attachImages(e.clipboardData?.files)) e.preventDefault();
+            if (attachDropped(e.clipboardData, e.clipboardData?.files)) e.preventDefault();
+            else if (pastedLocalFiles(e.clipboardData)) e.preventDefault();
             else {
               // A very long paste goes in as a text file, like Claude Desktop:
               // the prompt then carries its path, never the text (#68: a CLI's
@@ -635,10 +728,10 @@ export function PromptEditor({
       </div>
       {upload && (
         <p
-          role={upload === "failed" ? "alert" : "status"}
-          className={`mt-1 text-[11px] ${upload === "failed" ? "text-status-danger" : "text-fg-muted"}`}
+          role={upload === "uploading" ? "status" : "alert"}
+          className={`mt-1 text-[11px] ${upload === "uploading" ? "text-fg-muted" : "text-status-danger"}`}
         >
-          {t(`drop.${upload}`)}
+          {t(`drop.${upload}`, { mb: limitMb })}
         </p>
       )}
       {kind && (
@@ -780,7 +873,7 @@ export function CwdAutocomplete({
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setActive((a) => Math.max(0, a - 1));
-    } else if (e.key === "Enter") {
+    } else if (isSubmitEnter(e)) {
       if (open && flat[active]) {
         e.preventDefault();
         choose(flat[active]);

client/src/components/run/TerminalView.tsx

@@ -16,8 +16,11 @@
  * (`lib/terminalTheme.ts`), recoloured live without re-attaching.
  * Files (images or any other) dropped or pasted on it — Ctrl+V included — are saved on the server
  * (`POST /api/run/drop-file`) and their PATHS pasted into the pane — what a
- * local terminal does on a drop, and how `claude` attaches an image or reads
- * a file. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
+ * local terminal does on a drop — as `@` mentions in a `claude` pane, which
+ * reads them when the prompt is sent — an image as its bare path, which claude
+ * shows as `[Image #n]` like a native drop; a browser on the dashboard's own
+ * machine pastes a file manager's files (dropped, or copied: `file://` text)
+ * by their own paths instead, uploading nothing. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
  * `lib/panePaste.ts`, so a diff-line comment from the Changes panel can be
  * pasted into whichever of the workspace's panes was focused last.
  * Keyboard: the terminal keeps Tab and Shift+Tab (claude cycles its permission
@@ -62,12 +65,20 @@ import { useTheme } from "../../hooks/useTheme";
 import { terminalThemeFor } from "../../lib/terminalTheme";
 import { api } from "../../lib/api";
 import { writeClipboard } from "../../lib/clipboard";
-import { MENU_CURSOR_ROW, notePaneFocus, registerPane } from "../../lib/panePaste";
+import { MENU_CURSOR_ROW, notePaneFocus, notePaneOutput, registerPane } from "../../lib/panePaste";
+import {
+  claudePastes,
+  copiedFilePaths,
+  droppedFilePaths,
+  isLocalBrowser,
+  localCandidates,
+  sameFilesHere,
+} from "../../lib/promptAttach";
 import { attachImeInput } from "../../lib/imeInput";
 import { TERMINAL_FONTS, readTerminalFont } from "../../lib/terminalFont";
 import { FONT_SIZE_EVENT, readTerminalFontSize } from "../../lib/fontSize";
 
-type DropState = "hint" | "paste" | "uploading" | "failed";
+type DropState = "hint" | "paste" | "uploading" | "failed" | "tooBig" | "tooBigLocal";
 
 /** localStorage flag for xterm's screen-reader mode (a Settings toggle can set it later). */
 export const SCREEN_READER_KEY = "agenthub.terminal.screenReader";
@@ -160,6 +171,10 @@ interface TerminalViewProps {
    *  so it is moved out of the viewport with a transform, which keeps its
    *  layout size (no PTY resize; the chat still reads and answers its menus). */
   covered?: boolean;
+  /** The pane's AI tool: a `claude` pane is handed a pasted or dropped image
+   *  as its bare path and any other file as an `@` mention (`claudePastes`),
+   *  any other tool its plain path. */
+  tool?: string;
 }
 
 /** Memoized: the Workspace re-renders its pane tree on every lane_update, and
@@ -170,6 +185,7 @@ export const TerminalView = memo(function TerminalView({
   onExit,
   autoFocus = true,
   covered = false,
+  tool,
 }: TerminalViewProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   // Read through a ref: an inline `onExit` from the parent changes identity on
@@ -193,6 +209,8 @@ export const TerminalView = memo(function TerminalView({
   const tRef = useRef(t);
   tRef.current = t;
   const [drop, setDrop] = useState<DropState | null>(null);
+  // The server's own limit, from its ETOOBIG refusal (never a copy of it here).
+  const [limitMb, setLimitMb] = useState(0);
   // The socket dropped after it had been up: keystrokes are not reaching tmux.
   const [reconnecting, setReconnecting] = useState(false);
   // Ctrl+M: Tab and Shift+Tab move focus out instead of reaching the pane.
@@ -207,10 +225,10 @@ export const TerminalView = memo(function TerminalView({
   // only goes away when the pointer leaves the terminal itself.
   const dragDepth = useRef(0);
   const flashTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const flash = (state: DropState) => {
+  const flash = (state: DropState, ms = 2500) => {
     setDrop(state);
     if (flashTimer.current) clearTimeout(flashTimer.current);
-    flashTimer.current = setTimeout(() => setDrop(null), 2500);
+    flashTimer.current = setTimeout(() => setDrop(null), ms);
   };
   useEffect(
     () => () => {
@@ -227,15 +245,18 @@ export const TerminalView = memo(function TerminalView({
       e.preventDefault();
       dragDepth.current = 0;
       setDrop(null);
+      const local = isLocalBrowser() ? droppedFilePaths(e.dataTransfer) : null;
       const text = e.dataTransfer.getData("text/plain");
-      if (text) termRef.current?.paste(text + " ");
+      if (local) pastePaths(local);
+      else if (text) termRef.current?.paste(text + " ");
       termRef.current?.focus();
       return;
     }
     if (!hasFiles(e)) return;
     e.preventDefault();
     dragDepth.current = 0;
-    void attachFiles(Array.from(e.dataTransfer.files));
+    const files = Array.from(e.dataTransfer.files);
+    void attachFiles(files, localCandidates(e.dataTransfer, files));
   };
 
   // A pasted image (a screenshot) goes the way of a drop: xterm only reads
@@ -247,26 +268,60 @@ export const TerminalView = memo(function TerminalView({
     const ctrlV = ctrlVRef.current;
     ctrlVRef.current = false;
     const files = Array.from(e.clipboardData?.files ?? []);
+    // A file manager's copied files reach a browser as `file://` text only.
+    const local = files.length === 0 && isLocalBrowser() ? copiedFilePaths(e.clipboardData) : null;
+    if (local) {
+      e.preventDefault();
+      e.stopPropagation();
+      pastePaths(local);
+      return;
+    }
     if (files.length === 0 && (!ctrlV || e.clipboardData?.getData("text/plain"))) return;
     e.preventDefault();
     e.stopPropagation();
-    if (files.length > 0) void attachFiles(files);
+    if (files.length > 0) void attachFiles(files, localCandidates(e.clipboardData, files));
     else termRef.current?.input("\x16", true);
   };
 
-  const attachFiles = async (files: File[]) => {
+  /** Pastes files' paths as a local terminal hands them over — paste(), not
+   *  a raw send: it honours bracketed-paste mode, so the CLI sees a paste
+   *  rather than typed keystrokes. A `claude` pane gets its images as bare
+   *  paths, which it shows as `[Image #n]`, and other files as `@` mentions
+   *  (`claudePastes`). */
+  const pastePaths = (paths: string[]) => {
+    const term = termRef.current;
+    if (!term) return;
+    for (const text of tool === "claude" ? claudePastes(paths) : [paths.join(" ")])
+      term.paste(text + " ");
+    term.focus();
+  };
+
+  /** Pastes the files' paths: their own (`local`, the `file://` paths a
+   *  browser on the dashboard's machine is handed beside the bytes) once the
+   *  server finds the same files there — nothing uploaded —, else the paths
+   *  the uploads were saved at. A refused file does not cost the others. */
+  const attachFiles = async (files: File[], local: string[] | null = null) => {
     if (files.length === 0) return;
     setDrop("uploading");
-    try {
-      const saved = await Promise.all(files.map((f) => api.run.dropFile(f, runId)));
-      // paste(), not a raw send: it honours bracketed-paste mode, so claude
-      // sees pasted paths rather than typed keystrokes.
-      termRef.current?.paste(saved.map((r) => r.path).join(" ") + " ");
-      termRef.current?.focus();
-      setDrop(null);
-    } catch {
-      flash("failed");
+    let paths = local && (await sameFilesHere(local, files)) ? local : null;
+    const errors: unknown[] = [];
+    if (!paths) {
+      const results = await Promise.allSettled(files.map((f) => api.run.dropFile(f, runId)));
+      paths = results.flatMap((r) => {
+        if (r.status === "fulfilled") return [r.value.path];
+        errors.push(r.reason);
+        return [];
+      });
     }
+    if (paths.length) pastePaths(paths);
+    // Over the server's limit (ETOOBIG): refused before the body is sent.
+    const tooBig = errors
+      .map((e) => e as { code?: string; maxBytes?: number } | null)
+      .find((e) => e?.code === "ETOOBIG");
+    if (tooBig) setLimitMb(Math.round((tooBig.maxBytes ?? 0) / 1024 / 1024));
+    if (!errors.length) setDrop(null);
+    else if (!tooBig) flash("failed");
+    else flash(isLocalBrowser() ? "tooBigLocal" : "tooBig", 6000); // a sentence to read
   };
 
   useEffect(() => {
@@ -554,6 +609,7 @@ export const TerminalView = memo(function TerminalView({
               }
             }
             term.write(data);
+            notePaneOutput(runId);
           }
         };
         sock.onclose = (e?: CloseEvent) => {
@@ -666,8 +722,12 @@ export const TerminalView = memo(function TerminalView({
     () =>
       registerPane(
         runId,
-        (text, submit) => {
-          termRef.current?.paste(text);
+        (text, submit, files = []) => {
+          const term = termRef.current;
+          // The text, then each image's path in a paste of its own — the one
+          // shape `claude` turns into `[Image #n]` on every platform.
+          if (text) term?.paste(files.length ? `${text} ` : text);
+          files.forEach((f, i) => term?.paste(i < files.length - 1 ? `${f} ` : f));
           // Enter a beat after the paste, so a TUI that times its paste
           // detection never reads it as a newline inside the paste. A submit
           // comes from the pane's Chat view, which keeps the keyboard.
@@ -712,6 +772,17 @@ export const TerminalView = memo(function TerminalView({
             rows.push(row);
           }
           return { rows, cols: term.cols };
+        },
+        // Plain text of the rows on screen, dim cells kept (a status line's
+        // `esc to interrupt` is dim): the chat's busy read.
+        () => {
+          const term = termRef.current;
+          if (!term) return [];
+          const buf = term.buffer.active;
+          const rows: string[] = [];
+          for (let y = 0; y < term.rows; y++)
+            rows.push(buf.getLine(buf.baseY + y)?.translateToString(true) ?? "");
+          return rows;
         }
       ),
     [runId]
@@ -868,10 +939,12 @@ export const TerminalView = memo(function TerminalView({
         <div
           data-testid="terminal-drop"
           className={`pointer-events-none absolute inset-2 flex items-center justify-center rounded-lg border-2 border-dashed bg-black/50 text-sm font-medium ${
-            drop === "failed" ? "border-red-400 text-red-300" : "border-sky-400 text-sky-200"
+            drop === "failed" || drop === "tooBig" || drop === "tooBigLocal"
+              ? "border-red-400 text-red-300"
+              : "border-sky-400 text-sky-200"
           }`}
         >
-          {t(`drop.${drop}`)}
+          {t(`drop.${drop}`, { mb: limitMb })}
         </div>
       )}
     </div>

client/src/components/run/__tests__/ChatAddMenu.test.tsx

@@ -2,13 +2,14 @@
  * @file ChatAddMenu.test.tsx
  * @description The `+` menu's existing-resource pickers: Project files (a
  * search with folders, attached as `@path`), the workspace's Context files
- * (files only, none missing) and this browser's Recent uploads.
+ * (files only, none missing), this browser's Recent uploads and, for a
+ * browser on the dashboard's machine, a file chosen in the OS's own picker.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import i18n from "i18next";
 import { ChatAddMenu } from "../ChatAddMenu";
 import { api } from "../../../lib/api";
@@ -21,6 +22,7 @@ vi.mock("../../../lib/api", async (importOriginal) => {
     api: {
       run: { files: vi.fn().mockResolvedValue({ items: ["src/", "src/a.ts"] }) },
       lanes: {
+        pickPath: vi.fn().mockResolvedValue({ path: "/home/u/Videos/demo clip.mp4" }),
         sources: vi.fn().mockResolvedValue({
           sources: [
             { id: 1, kind: "file", path: "/data/ctx/1/brief.md", name: "brief.md", missing: false },
@@ -61,6 +63,28 @@ beforeEach(() => {
   vi.clearAllMocks();
 });
 
+afterEach(() => vi.unstubAllGlobals());
+
+describe("ChatAddMenu — a file on this computer", () => {
+  it("attaches the file the OS picker chose by its path, uploading nothing", async () => {
+    const onAttach = renderMenu();
+    fireEvent.click(screen.getByTestId("chat-add-pick-local"));
+    expect(api.lanes.pickPath).toHaveBeenCalledWith("file", "/repo");
+    await vi.waitFor(() =>
+      expect(onAttach).toHaveBeenCalledWith([
+        { path: '@"/home/u/Videos/demo clip.mp4"', name: "demo clip.mp4" },
+      ])
+    );
+  });
+
+  it("is not offered to a browser on another machine", () => {
+    // Only a loopback address: a name that merely starts with "localhost" is not one.
+    vi.stubGlobal("location", { ...window.location, hostname: "localhost.example.com" });
+    renderMenu();
+    expect(screen.queryByTestId("chat-add-pick-local")).toBeNull();
+  });
+});
+
 describe("ChatAddMenu — existing resources", () => {
   it("searches the project, folders included, and attaches a pick as @path", async () => {
     const onAttach = renderMenu();

client/src/components/run/__tests__/ChatFilePreview.test.tsx

@@ -31,6 +31,10 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         }),
         gitRawUrl: () => "",
       },
+      artifacts: {
+        pinFile: vi.fn().mockResolvedValue({ item: { id: 1 } }),
+        uploadFile: vi.fn().mockResolvedValue({ item: { id: 2 } }),
+      },
       sessions: {
         readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}`,
         readFile: vi.fn((_id: string, p: string) =>
@@ -75,7 +79,11 @@ const scope = { laneId: 4, laneCwd: "/w", cwd: "/w", sessionId: "s1" };
 describe("FilePreview", () => {
   it("reads a workspace file through the lane", async () => {
     render(<FilePreview path="/w/src/a.ts" scope={scope} onClose={() => {}} />);
-    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
+      )
+    ).toBeTruthy();
     expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
   });
 
@@ -89,7 +97,11 @@ describe("FilePreview", () => {
   it("reads Windows paths the same way", async () => {
     const win = { laneId: 4, laneCwd: "D:\\w", cwd: "D:\\w", sessionId: "s1" };
     render(<FilePreview path={"D:\\w\\src\\a.ts"} scope={win} onClose={() => {}} />);
-    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
+      )
+    ).toBeTruthy();
     expect(vi.mocked(api.lanes.gitFile)).toHaveBeenCalledWith(4, "src/a.ts");
     cleanup();
     const tool = "C:\\Users\\k\\.claude\\projects\\D--w\\s1\\tool-results\\b.txt";
@@ -144,7 +156,11 @@ describe("FileListModal", () => {
     );
     expect(screen.getByText("No preview for this file here")).toBeTruthy();
     fireEvent.click(screen.getByRole("button", { name: "a.ts" }));
-    expect(await screen.findByText("export const a = 1;")).toBeTruthy();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("export const a = 1;")
+      )
+    ).toBeTruthy();
   });
 });
 
@@ -172,3 +188,77 @@ describe("SkillListModal", () => {
     expect(screen.getByText("No preview for this file here")).toBeTruthy();
   });
 });
+
+describe("the artifact view", () => {
+  const html = (lines: string[]) =>
+    vi.mocked(api.lanes.gitFile).mockResolvedValueOnce({
+      available: true,
+      path: "page.html",
+      rev: "work",
+      binary: false,
+      truncated: false,
+      lines,
+    } as never);
+
+  it("runs a page in a sandbox with scripts but no same origin, and shows its code", async () => {
+    html(["<button>go</button>"]);
+    render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
+    const frame = (await screen.findByTestId("artifact-frame")) as HTMLIFrameElement;
+    expect(frame.getAttribute("sandbox")).toContain("allow-scripts");
+    expect(frame.getAttribute("sandbox")).not.toContain("allow-same-origin");
+    expect(frame.getAttribute("srcdoc")).toContain("<button>go</button>");
+    fireEvent.click(screen.getByTestId("artifact-tab-code"));
+    expect(screen.queryByTestId("artifact-frame")).toBeNull();
+    expect(
+      await screen.findByText(
+        (_t, el) => el?.tagName === "CODE" && !!el.textContent?.includes("<button>go</button>")
+      )
+    ).toBeTruthy();
+    cleanup();
+  });
+
+  it("steps back to an older version the conversation wrote", async () => {
+    html(["<p>two</p>"]);
+    const tool = (id: string, input: Record<string, unknown>, name = "Write") => ({
+      type: "assistant" as const,
+      timestamp: null,
+      content: [{ type: "tool_use" as const, id, name, input }],
+    });
+    const messages = [
+      tool("1", { file_path: "/w/page.html", content: "<p>one</p>" }),
+      tool("2", { file_path: "/w/page.html", old_string: "one", new_string: "two" }, "Edit"),
+    ];
+    render(
+      <FilePreview
+        path="/w/page.html"
+        scope={scope}
+        onClose={() => {}}
+        messages={messages as never}
+      />
+    );
+    const versions = await screen.findByTestId("artifact-versions");
+    expect(versions.textContent).toContain("2");
+    expect(
+      ((await screen.findByTestId("artifact-frame")) as HTMLIFrameElement).getAttribute("srcdoc")
+    ).toContain("two");
+    fireEvent.click(versions.querySelector("button")!);
+    expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>");
+    cleanup();
+  });
+
+  it("saves a workspace file to the Artifacts library by its path", async () => {
+    html(["<p>x</p>"]);
+    render(<FilePreview path="/w/page.html" scope={scope} onClose={() => {}} />);
+    await screen.findByTestId("artifact-frame");
+    fireEvent.click(screen.getByTestId("artifact-share"));
+    await vi.waitFor(() =>
+      expect(api.artifacts.pinFile).toHaveBeenCalledWith({
+        laneId: 4,
+        path: "page.html",
+        title: "page.html",
+        sessionId: "s1",
+      })
+    );
+    cleanup();
+  });
+});

client/src/components/run/__tests__/PaneChat.test.tsx

@@ -7,9 +7,11 @@
  * activity panel, collapsed into a file button with the output count, whose
  * files open a preview in its place; a file in a turn's "Edited N files" card
  * opens in the Workspace's Changes panel when it is in the pane's folder; and
- * Stop in Send's place while the main agent works, pressing Esc in the pane;
+ * Stop in Send's place while the main agent works (its hooks, or the pane's
+ * own busy line / fresh output), pressing Esc in the pane;
  * and the menu the CLI asks with, shown as buttons that press its keys, a
- * message sent meanwhile typed as its "Type something" answer.
+ * message sent meanwhile typed as its "Type something" answer; a Codex
+ * terminal's Model / Permission mode buttons typing its own pickers.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -22,11 +24,14 @@ import {
   answerRunMenu,
   chooseRunOption,
   interruptRun,
+  onPaneOutput,
+  readRunBusy,
   readRunMenu,
   submitToRun,
   type PaneMenu,
 } from "../../../lib/panePaste";
 import { OPEN_IN_CHANGES_EVENT } from "../../../lib/openInChanges";
+import { eventBus } from "../../../lib/eventBus";
 
 vi.mock("../../conversation/ConversationView", () => ({
   // Stands in for a turn's "Edited N files" card: a click names a file.
@@ -51,8 +56,12 @@ vi.mock("../../../lib/panePaste", () => ({
   submitToRun: vi.fn(() => true),
   interruptRun: vi.fn(() => true),
   readRunMenu: vi.fn(() => null),
+  readRunBusy: vi.fn(() => false),
   chooseRunOption: vi.fn(() => true),
   answerRunMenu: vi.fn(() => true),
+  stepRunMenu: vi.fn(() => true),
+  notePaneFocus: vi.fn(),
+  onPaneOutput: vi.fn(() => () => {}),
 }));
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -212,6 +221,54 @@ describe("PaneChat — Stop", () => {
     }
   });
 
+  it("shows Stop while the pane's own busy line shows, with no hook saying so", async () => {
+    // omp, Cursor or Codex without its hooks: only the terminal knows.
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.mocked(readRunBusy).mockReturnValue(true);
+    try {
+      renderChat();
+      expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
+      expect(readRunBusy).toHaveBeenCalledWith("agenthub-lane-1", "claude");
+      vi.mocked(readRunBusy).mockReturnValue(false);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(800);
+      });
+      await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
+    } finally {
+      vi.useRealTimers();
+      vi.mocked(readRunBusy).mockReturnValue(false);
+    }
+  });
+
+  it("counts a tool with no known busy line as working while its pane draws", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.mocked(readRunBusy).mockReturnValue(null);
+    const fns: (() => void)[] = [];
+    vi.mocked(onPaneOutput).mockImplementation((_runId, fn) => {
+      fns.push(fn);
+      return () => {};
+    });
+    try {
+      renderChat();
+      await waitFor(() => expect(fns.length).toBeGreaterThan(0));
+      expect(screen.queryByTestId("pane-chat-stop")).toBeNull();
+      fns.forEach((fn) => fn());
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(800);
+      });
+      expect(await screen.findByTestId("pane-chat-stop")).toBeInTheDocument();
+      // Quiet for longer than OUTPUT_BUSY_MS: at rest again.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2800);
+      });
+      await waitFor(() => expect(screen.queryByTestId("pane-chat-stop")).toBeNull());
+    } finally {
+      vi.useRealTimers();
+      vi.mocked(readRunBusy).mockReturnValue(false);
+      vi.mocked(onPaneOutput).mockImplementation(() => () => {});
+    }
+  });
+
   it("keeps Send for a session at rest", async () => {
     // With session_id the server answers EVERY agent of the session (its
     // status filter does not apply): the main agent is there, waiting.
@@ -267,7 +324,7 @@ describe("PaneChat — model, effort and permission mode", () => {
     renderChat();
     fireEvent.click(screen.getByRole("button", { name: /Opus/ }));
     fireEvent.click(await screen.findByRole("menuitemradio", { name: /Sonnet/ }));
-    expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "/model sonnet");
+    expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "/model sonnet", []);
   });
 
   it("shows the mode the pane shows, and asks the server to step it", async () => {
@@ -430,7 +487,7 @@ describe("PaneChat — the unsent prompt", () => {
     expect(screen.getByPlaceholderText("Write a message…")).toHaveValue("half typed");
     expect(screen.getByText("a.ts")).toBeInTheDocument();
     fireEvent.click(screen.getByTestId("pane-chat-send"));
-    expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "half typed @src/a.ts");
+    expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "half typed @src/a.ts ", []);
     await waitFor(() => expect(localStorage.getItem("agenthub.chat.draft.s1")).toBeNull());
   });
 
@@ -462,7 +519,10 @@ describe("PaneChat — the unsent prompt", () => {
     fireEvent.click(screen.getByTestId("pane-chat-send"));
     expect(submitToRun).toHaveBeenCalledWith(
       "agenthub-lane-1",
-      'read @"/home/u/My Docs/spec.md" @/home/u/b.ts'
+      // A trailing space: an @ mention at the end would leave claude's file
+      // suggester open, and it takes the Enter.
+      'read @"/home/u/My Docs/spec.md" @/home/u/b.ts ',
+      []
     );
   });
 
@@ -490,7 +550,7 @@ describe("PaneChat — the unsent prompt", () => {
     expect(box).toHaveValue("hello");
     confirmDialog.mockResolvedValueOnce(true);
     fireEvent.click(screen.getByTestId("pane-chat-send"));
-    await waitFor(() => expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "hello"));
+    await waitFor(() => expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "hello", []));
   });
 
   it("sends without asking once the session has started", async () => {
@@ -499,7 +559,7 @@ describe("PaneChat — the unsent prompt", () => {
     renderChat();
     fireEvent.change(screen.getByPlaceholderText("Write a message…"), { target: { value: "hi" } });
     fireEvent.click(screen.getByTestId("pane-chat-send"));
-    await waitFor(() => expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "hi"));
+    await waitFor(() => expect(submitToRun).toHaveBeenCalledWith("agenthub-lane-1", "hi", []));
     expect(confirmDialog).not.toHaveBeenCalled();
   });
 });
@@ -550,4 +610,103 @@ describe("PaneChat — a menu the CLI asks with", () => {
       vi.mocked(readRunMenu).mockReturnValue(null);
     }
   });
+
+  it("re-reads its transcript when the pane draws, at most once a second", async () => {
+    // Every listener the chat put on the pane (the re-read, the busy clock).
+    const fns: (() => void)[] = [];
+    const drew = () => fns.forEach((fn) => fn());
+    vi.mocked(onPaneOutput).mockImplementation((_runId, fn) => {
+      fns.push(fn);
+      return () => {};
+    });
+    const seen: unknown[] = [];
+    const off = eventBus.subscribe((m) => {
+      if (m.type === "transcript_changed") seen.push(m.data);
+    });
+    try {
+      renderChat();
+      await waitFor(() => expect(fns.length).toBeGreaterThan(0));
+      vi.useFakeTimers();
+      drew();
+      drew();
+      drew();
+      expect(seen).toEqual([{ session_id: "s1" }]);
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1100);
+      });
+      expect(seen).toHaveLength(2);
+    } finally {
+      vi.useRealTimers();
+      off();
+      vi.mocked(onPaneOutput).mockImplementation(() => () => {});
+    }
+  });
+
+  const PERMISSION: PaneMenu = {
+    question: "Do you want to proceed?",
+    detail: ["Bash command", "npm test", "Run the tests"],
+    options: [
+      { n: 1, label: "Yes", hint: "", checked: null },
+      { n: 2, label: "Yes, and don't ask again for npm test", hint: "", checked: null },
+      { n: 3, label: "No, and tell Claude what to do differently (esc)", hint: "", checked: null },
+    ],
+    cursor: 0,
+    multi: false,
+    typeAt: -1,
+  };
+
+  it("lays a permission prompt out as a card, each answer its own key", async () => {
+    vi.mocked(readRunMenu).mockReturnValue(PERMISSION);
+    vi.mocked(chooseRunOption).mockClear();
+    try {
+      renderChat();
+      const card = await screen.findByTestId("pane-chat-permission");
+      expect(card).toHaveTextContent("Bash command");
+      expect(card).toHaveTextContent("npm test");
+      expect(card).toHaveTextContent("Do you want to proceed?");
+      const options = screen.getAllByTestId("pane-chat-permission-option");
+      // The key hint is dropped from the label.
+      expect(options.map((o) => o.textContent)).toEqual([
+        "Yes",
+        "Yes, and don't ask again for npm test",
+        "No, and tell Claude what to do differently",
+      ]);
+      fireEvent.click(options[1]!);
+      expect(chooseRunOption).toHaveBeenCalledWith("agenthub-lane-1", PERMISSION, 1);
+    } finally {
+      vi.mocked(readRunMenu).mockReturnValue(null);
+    }
+  });
+
+  it("denies with a note: picks the No row, then sends the note as the next message", async () => {
+    vi.mocked(readRunMenu).mockReturnValue(PERMISSION);
+    vi.mocked(chooseRunOption).mockClear();
+    vi.mocked(submitToRun).mockClear();
+    try {
+      renderChat();
+      fireEvent.click(await screen.findByTestId("pane-chat-permission-tell"));
+      const field = screen.getByTestId("pane-chat-permission-note");
+      fireEvent.change(field, { target: { value: "use pnpm" } });
+      fireEvent.keyDown(field, { key: "Enter" });
+      expect(chooseRunOption).toHaveBeenCalledWith("agenthub-lane-1", PERMISSION, 2);
+      await waitFor(() => expect(submitToRun).toHaveBeenCalled(), { timeout: 2000 });
+      expect(vi.mocked(submitToRun).mock.calls[0]![1]).toContain("use pnpm");
+    } finally {
+      vi.mocked(readRunMenu).mockReturnValue(null);
+    }
+  });
+});
+
+describe("PaneChat — a Codex terminal", () => {
+  it("types /model and /permissions, whose pickers come back as menu cards", () => {
+    renderChat({ tool: "codex" });
+    fireEvent.click(screen.getByTestId("pane-chat-codex-model"));
+    fireEvent.click(screen.getByTestId("pane-chat-codex-permissions"));
+    expect(vi.mocked(submitToRun).mock.calls.map((c) => c[1])).toEqual(["/model", "/permissions"]);
+  });
+
+  it("offers neither to a Claude pane", () => {
+    renderChat();
+    expect(screen.queryByTestId("pane-chat-codex-model")).toBeNull();
+  });
 });

client/src/components/run/__tests__/RunSetup.test.tsx

@@ -24,6 +24,7 @@ import {
   ModelPicker,
   PASTE_AS_FILE_CHARS,
   PromptEditor,
+  promptForPane,
   promptWithImages,
   type PromptImage,
 } from "../RunSetup";
@@ -55,7 +56,11 @@ vi.mock("../../../lib/api", async (importOriginal) => {
           return { flag: id in lists, models: lists[id] ?? [], defaultModel: null };
         }),
       },
-      run: { files: r({ items: [] }), dropFile: r({ path: "/tmp/agenthub-drops-1/a.png" }) },
+      run: {
+        files: r({ items: [] }),
+        dropFile: r({ path: "/tmp/agenthub-drops-1/a.png" }),
+        localPaths: r({ sizes: [1] }),
+      },
       ccConfig: {
         commands: r({
           items: [
@@ -341,6 +346,120 @@ describe("PromptEditor — newlines and images", () => {
     });
   });
 
+  it("attaches a local file manager's files by their own paths, uploading nothing", async () => {
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            value="read"
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            slash={false}
+            fileCwd="/home/u"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages("read", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const big = new File(["x"], "demo.mp4", { type: "video/mp4" });
+    const data: Record<string, string> = { "text/uri-list": "file:///home/u/demo.mp4" };
+    fireEvent.drop(box(), {
+      dataTransfer: { files: [big], types: ["Files"], getData: (k: string) => data[k] ?? "" },
+    });
+    expect(await screen.findByText("demo.mp4")).toBeTruthy();
+    expect(api.run.localPaths).toHaveBeenCalledWith(["/home/u/demo.mp4"]);
+    expect(api.run.dropFile).not.toHaveBeenCalled();
+    expect(screen.getByTestId("sent").textContent).toBe("read @/home/u/demo.mp4");
+  });
+
+  it("uploads a dropped file whose path the server does not have (an SSH tunnel's laptop)", async () => {
+    vi.mocked(api.run.localPaths).mockResolvedValueOnce({ sizes: [null] });
+    const onImagesChange = vi.fn();
+    render(
+      <PromptEditor
+        value=""
+        onChange={() => {}}
+        onSubmit={() => {}}
+        placeholder="Ask anything…"
+        slash={false}
+        fileCwd="/home/u"
+        images={[]}
+        onImagesChange={onImagesChange}
+      />
+    );
+    const doc = new File(["x"], "spec.pdf", { type: "application/pdf" });
+    const data: Record<string, string> = { "text/uri-list": "file:///Users/me/spec.pdf" };
+    fireEvent.drop(box(), {
+      dataTransfer: { files: [doc], types: ["Files"], getData: (k: string) => data[k] ?? "" },
+    });
+    await vi.waitFor(() => expect(api.run.dropFile).toHaveBeenCalledWith(doc, undefined));
+  });
+
+  it("keeps the files that uploaded when another one is refused", async () => {
+    vi.mocked(api.run.dropFile)
+      .mockResolvedValueOnce({ path: "/tmp/agenthub-drops-1/a-ok.txt" })
+      .mockRejectedValueOnce(Object.assign(new Error("too big"), { code: "ETOOBIG" }));
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            value=""
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            slash={false}
+            fileCwd="/home/u"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages("", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    fireEvent.drop(box(), {
+      dataTransfer: { files: [new File(["x"], "ok.txt"), new File(["y"], "huge.iso")] },
+    });
+    expect(await screen.findByText("ok.txt")).toBeTruthy();
+    expect(screen.getByTestId("sent").textContent).toBe("/tmp/agenthub-drops-1/a-ok.txt");
+    expect(screen.getByRole("alert").textContent).toMatch(/too large/);
+    // Anything attached afterwards — here a Files panel row — ends the error.
+    const data: Record<string, string> = {
+      [ATTACH_MIME]: JSON.stringify({ path: "@src/a.ts", name: "a.ts" }),
+    };
+    fireEvent.drop(box(), { dataTransfer: { getData: (k: string) => data[k] ?? "" } });
+    expect(await screen.findByText("a.ts")).toBeTruthy();
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("says a file over the server's limit is too big, and how to attach it", async () => {
+    vi.mocked(api.run.dropFile).mockRejectedValueOnce(
+      Object.assign(new Error("too big"), { code: "ETOOBIG", status: 413, maxBytes: 20971520 })
+    );
+    render(
+      <PromptEditor
+        value=""
+        onChange={() => {}}
+        onSubmit={() => {}}
+        placeholder="Ask anything…"
+        slash={false}
+        fileCwd="/home/u"
+        images={[]}
+        onImagesChange={() => {}}
+      />
+    );
+    fireEvent.drop(box(), { dataTransfer: { files: [new File(["x"], "huge.iso")] } });
+    expect((await screen.findByRole("alert")).textContent).toMatch(
+      /too large to upload \(max 20 MB\).*Choose a file on this computer/
+    );
+  });
+
   it("attaches a Files panel row dropped on it as an @path chip, once", () => {
     function Harness() {
       const [images, setImages] = useState<PromptImage[]>([]);
@@ -586,3 +705,51 @@ describe("ModelMenu", () => {
     expect(onChange).toHaveBeenCalledWith("claude-sonnet-5-5");
   });
 });
+
+describe("promptForPane — images apart, every other file in the text", () => {
+  it("keeps @-mentions and other files in the text, and takes images out", () => {
+    // A Windows path inside a paste of text stayed a plain path in claude; a
+    // paste that is only the path becomes [Image #n].
+    const images: PromptImage[] = [
+      {
+        path: "C:\\Users\\u\\.claude\\agenthub\\drops\\f326fc666d3bdd92-image.png",
+        name: "image.png",
+      },
+      { path: "/data/drops/0123456789abcdef-log.txt", name: "log.txt" },
+      { path: '@"/home/u/My Docs/a.PNG"', name: "a.PNG" },
+      { path: "/data/drops/0123456789abcdef.JPG", name: "b.jpg" },
+    ];
+    expect(promptForPane(" look ", images)).toEqual({
+      text: 'look /data/drops/0123456789abcdef-log.txt @"/home/u/My Docs/a.PNG"',
+      files: [
+        "C:\\Users\\u\\.claude\\agenthub\\drops\\f326fc666d3bdd92-image.png",
+        "/data/drops/0123456789abcdef.JPG",
+      ],
+    });
+  });
+
+  it("hands claude every file as an @ mention in one paste, with a trailing space", () => {
+    // A bare pasted path stayed plain text on Windows, and a path in the
+    // command-line prompt is never an image; claude reads an @ mention at submit.
+    const images: PromptImage[] = [
+      {
+        path: "C:\\Users\\u\\.claude\\agenthub\\drops\\f326fc666d3bdd92-image.png",
+        name: "image.png",
+      },
+      { path: "/data/drops/0123456789abcdef-log.txt", name: "log.txt" },
+      { path: '@"/home/u/My Docs/a.PNG"', name: "a.PNG" },
+      { path: "C:\\Users\\Jo Do\\drops\\0123456789abcdef.png", name: "b.png" },
+    ];
+    expect(promptForPane(" look ", images, true)).toEqual({
+      text:
+        "look @C:/Users/u/.claude/agenthub/drops/f326fc666d3bdd92-image.png " +
+        '@/data/drops/0123456789abcdef-log.txt @"/home/u/My Docs/a.PNG" ' +
+        '@"C:/Users/Jo Do/drops/0123456789abcdef.png" ',
+      files: [],
+    });
+    expect(promptForPane("just text", [], true)).toEqual({ text: "just text", files: [] });
+    expect(promptWithImages("see", [images[1]!], true)).toBe(
+      "see @/data/drops/0123456789abcdef-log.txt"
+    );
+  });
+});

client/src/components/run/__tests__/TerminalView.test.tsx

@@ -26,8 +26,14 @@ const inputMock = vi.fn();
 // The newest terminal's hidden input, where the browser's IME types.
 let textarea: HTMLTextAreaElement;
 const dropFileMock = vi.fn();
+const localPathsMock = vi.fn();
 vi.mock("../../../lib/api", () => ({
-  api: { run: { dropFile: (f: File, lane?: string) => dropFileMock(f, lane) } },
+  api: {
+    run: {
+      dropFile: (f: File, lane?: string) => dropFileMock(f, lane),
+      localPaths: (paths: string[]) => localPathsMock(paths),
+    },
+  },
 }));
 const loadAddonMock = vi.fn();
 // Mutable stand-ins for the two live terminal facts the wheel handler reads.
@@ -512,6 +518,23 @@ describe("TerminalView", () => {
     await waitFor(() => expect(screen.queryByTestId("terminal-drop")).toBeNull());
   });
 
+  it("pastes a local file manager's own paths, uploading nothing", async () => {
+    dropFileMock.mockReset();
+    localPathsMock.mockReset().mockResolvedValue({ sizes: [1] });
+    pasteMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    const big = new File(["x"], "demo.mp4", { type: "video/mp4" });
+    const data: Record<string, string> = {
+      "text/uri-list": "file:///home/u/My%20Videos/demo.mp4",
+    };
+    fireEvent.drop(screen.getByTestId("terminal-view"), {
+      dataTransfer: { types: ["Files"], files: [big], getData: (k: string) => data[k] ?? "" },
+    });
+    await waitFor(() => expect(pasteMock).toHaveBeenCalledWith('@"/home/u/My Videos/demo.mp4" '));
+    expect(localPathsMock).toHaveBeenCalledWith(["/home/u/My Videos/demo.mp4"]);
+    expect(dropFileMock).not.toHaveBeenCalled();
+  });
+
   it("pastes every path of several dropped files, images or not", async () => {
     dropFileMock
       .mockReset()

client/src/components/settings/AccountSettings.tsx

@@ -3,10 +3,12 @@
  * @description Settings → Account (server mode, any signed-in role): the
  * account's own information (`GET /api/me/account` — username, role, member
  * since, workspaces, sessions, active sign-ins, last sign-in), its avatar
- * (`PUT`/`DELETE /api/me/avatar` — PNG, JPEG, GIF or WebP, at most 1 MB; the
- * sidebar shows it at once), its display name
+ * (`PUT`/`DELETE /api/me/avatar` — PNG, JPEG, GIF or WebP, at most 1 MB — or
+ * an https link the browser loads itself, `POST /api/me/avatar/url`; the sidebar
+ * shows it at once), its display name
  * and email (`PATCH /api/me/account`), a password change that asks for the
- * current one (`POST /api/me/password` — this browser stays signed in, every
+ * current one and passes every rule of `lib/passwordRules.ts`, ticked as it is
+ * typed (`POST /api/me/password` — this browser stays signed in, every
  * other sign-in ends) and "Sign out other devices" (`POST
  * /api/me/sign-out-others`, behind `confirmDialog`). Role and state are an
  * admin's to change, on the Users page — never here.
@@ -23,15 +25,18 @@ import {
   type ReactNode,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Camera, LogOut, RefreshCw, Trash2 } from "lucide-react";
+import { Camera, Link2, LogOut, RefreshCw, Trash2 } from "lucide-react";
 import { api, type MyAccount } from "../../lib/api";
 import { formatDateTime } from "../../lib/format";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { isSubmitEnter } from "../../lib/keys";
+import { useSpin } from "../../hooks/useSpin";
 import { useAuth } from "../AuthGate";
 import { ROLE_BADGE } from "../users/UserEditDialog";
 import { UserAvatar } from "../users/UserAvatar";
+import { PasswordRules } from "../users/PasswordRules";
+import { passwordProblems } from "../../lib/passwordRules";
 import { SettingsSection } from "./SettingsRow";
 
 type ServerAccount = Extract<MyAccount, { mode: "server" }>;
@@ -43,6 +48,24 @@ const errText = (t: (k: string, o?: Record<string, unknown>) => string, e: unkno
     : err.message;
 };
 
+/** Whether `url` loads as an image embedded in this page — the way every
+ *  avatar is shown: no referrer, the cookies a cross-site image gets. */
+export function loadsAsImage(url: string, timeoutMs = 10_000): Promise<boolean> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    const done = (ok: boolean) => {
+      window.clearTimeout(timer);
+      img.onload = img.onerror = null;
+      resolve(ok);
+    };
+    const timer = window.setTimeout(() => done(false), timeoutMs);
+    img.referrerPolicy = "no-referrer";
+    img.onload = () => done(img.naturalWidth > 0);
+    img.onerror = () => done(false);
+    img.src = url;
+  });
+}
+
 export function AccountSettings() {
   const { t } = useTranslation("settings");
   const [account, setAccount] = useState<ServerAccount | null>(null);
@@ -64,19 +87,23 @@ export function AccountSettings() {
   );
   const load = useCallback(() => {
     setLoadError(null);
-    api.me
+    return api.me
       .account()
       .then(apply)
       .catch((e: Error) => setLoadError(e.message));
   }, [apply]);
-  useEffect(load, [load]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  const [retrying, retry] = useSpin(load);
 
   if (loadError) {
     return (
       <div role="alert" className="card flex items-center gap-3 p-4 text-sm text-status-danger">
         <span className="flex-1">{t("account.loadFailed", { message: loadError })}</span>
-        <button type="button" className="btn-ghost text-xs" onClick={load}>
-          <RefreshCw className="h-3.5 w-3.5" /> {t("common:retry")}
+        <button type="button" className="btn-ghost text-xs" onClick={retry} disabled={retrying}>
+          <RefreshCw className={`h-3.5 w-3.5${retrying ? " animate-spin" : ""}`} />{" "}
+          {t("common:retry")}
         </button>
       </div>
     );
@@ -110,18 +137,35 @@ function ProfileCard({
   const shown = user.displayName || user.username;
   const fileRef = useRef<HTMLInputElement>(null);
   const [busy, setBusy] = useState(false);
+  // null = the link field is closed.
+  const [link, setLink] = useState<string | null>(null);
 
   const run = async (op: () => Promise<MyAccount>, done: string) => {
     setBusy(true);
     try {
       onSaved(await op());
       toast.success(done);
+      return true;
     } catch (e) {
       toast.error(errText(t, e));
+      return false;
     } finally {
       setBusy(false);
     }
   };
+  const applyLink = async () => {
+    const url = link?.trim();
+    if (!url) return;
+    // The avatar routes only redirect to the link, so it shows only if THIS
+    // browser can load it as an embedded image: a link behind a login (a
+    // Mattermost /api/v4/users/<id>/image) gets no cookie from another site
+    // and fails — say so now instead of saving a picture nobody sees.
+    setBusy(true);
+    const ok = await loadsAsImage(url);
+    setBusy(false);
+    if (!ok) return void toast.error(t("account.avatar.linkUnreachable"));
+    if (await run(() => api.me.setAvatarFromUrl(url), t("account.avatar.saved"))) setLink(null);
+  };
   const pick = (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     e.target.value = ""; // the same file can be picked again
@@ -150,6 +194,18 @@ function ProfileCard({
             >
               <Camera className="h-3.5 w-3.5" />
             </button>
+            <button
+              type="button"
+              className={`btn-ghost h-6 w-6 justify-center p-0 ${link !== null ? "text-accent" : ""}`}
+              onClick={() => setLink((v) => (v === null ? "" : null))}
+              disabled={busy}
+              title={t("account.avatar.fromUrl")}
+              aria-label={t("account.avatar.fromUrl")}
+              aria-pressed={link !== null}
+              data-testid="account-avatar-url-toggle"
+            >
+              <Link2 className="h-3.5 w-3.5" />
+            </button>
             {user.avatarAt && (
               <button
                 type="button"
@@ -187,6 +243,36 @@ function ProfileCard({
           </div>
         </div>
       </div>
+      {link !== null && (
+        <div className="mt-3 flex items-center gap-2">
+          <input
+            type="url"
+            className="input w-full text-sm"
+            value={link}
+            placeholder={t("account.avatar.urlPlaceholder")}
+            aria-label={t("account.avatar.fromUrl")}
+            autoFocus
+            disabled={busy}
+            onChange={(e) => setLink(e.target.value)}
+            onKeyDown={(e) => {
+              if (isSubmitEnter(e)) {
+                e.preventDefault();
+                void applyLink();
+              } else if (e.key === "Escape") setLink(null);
+            }}
+            data-testid="account-avatar-url-input"
+          />
+          <button
+            type="button"
+            className="btn-primary flex-shrink-0 text-sm"
+            onClick={() => void applyLink()}
+            disabled={busy || !link.trim()}
+            data-testid="account-avatar-url-apply"
+          >
+            {t("account.avatar.urlApply")}
+          </button>
+        </div>
+      )}
       <dl className="mt-4 grid grid-cols-2 gap-3 border-t border-border pt-4 text-xs sm:grid-cols-5">
         <Stat label={t("account.memberSince")}>
           {user.createdAt ? formatDateTime(user.createdAt) : "—"}
@@ -283,13 +369,17 @@ function ProfileForm({
 
 function PasswordForm() {
   const { t } = useTranslation("settings");
+  const { state } = useAuth();
+  const username = state.mode === "server" ? state.user?.username : undefined;
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [again, setAgain] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const mismatch = again.length > 0 && again !== next;
-  const ready = current.length > 0 && next.length > 0 && again === next && !busy;
+  // The account's own password: every rule (server/lib/auth.js decides too).
+  const strong = passwordProblems(next, username).length === 0;
+  const ready = current.length > 0 && strong && again === next && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -331,7 +421,7 @@ function PasswordForm() {
             aria-label={t("account.currentPassword")}
           />
         </Field>
-        <Field label={t("account.newPassword")} hint={t("users:passwordHint")}>
+        <Field label={t("account.newPassword")}>
           <input
             type="password"
             className="input w-full text-sm"
@@ -352,6 +442,9 @@ function PasswordForm() {
           />
         </Field>
       </div>
+      <div className="mt-3">
+        <PasswordRules password={next} username={username} />
+      </div>
       {(mismatch || error) && (
         <p role="alert" className="mt-2 text-xs text-status-danger">
           {error ?? t("account.mismatch")}

client/src/components/settings/AgentInstructionsSettings.tsx

@@ -17,6 +17,7 @@ import { FileUp } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { api, type AgentInstructionsView } from "../../lib/api";
 import { useAiTools } from "../../hooks/useAiTools";
+import { useSpin } from "../../hooks/useSpin";
 import { AiToolIcon } from "../AiToolIcon";
 import { toast } from "../../lib/toast";
 import { SettingsSection } from "./SettingsRow";
@@ -41,13 +42,16 @@ export function AgentInstructionsSettings() {
 
   const load = () => {
     setLoadError(null);
-    api.me
+    return api.me
       .instructions()
       .then(apply)
       .catch((err) => setLoadError(err instanceof Error ? err.message : String(err)));
   };
 
-  useEffect(load, []);
+  useEffect(() => {
+    void load();
+  }, []);
+  const [retrying, retry] = useSpin(load);
 
   async function save() {
     setSaving(true);
@@ -123,7 +127,12 @@ export function AgentInstructionsSettings() {
               <span className="truncate">
                 {t("agentInstructions.loadFailed", { message: loadError })}
               </span>
-              <button type="button" className="btn-ghost shrink-0 text-xs" onClick={load}>
+              <button
+                type="button"
+                className="btn-ghost shrink-0 text-xs"
+                onClick={retry}
+                disabled={retrying}
+              >
                 {t("common:retry")}
               </button>
             </p>

client/src/components/settings/AiToolsSettings.tsx

@@ -29,6 +29,7 @@ import { AiToolIcon } from "../AiToolIcon";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { api, type AiTool, type AiToolJob } from "../../lib/api";
 import { usePermissions } from "../AuthGate";
+import { copyText } from "../../lib/clipboard";
 
 type Confirm = { kind: "install" | "update"; tool: AiTool } | { kind: "update-all" };
 
@@ -374,9 +375,7 @@ export function AiToolsSettings({
             {ctx.menu.item.path && (
               <>
                 {isAdmin && <MenuSeparator />}
-                <MenuItem
-                  onSelect={pick((tool) => void navigator.clipboard.writeText(tool.path ?? ""))}
-                >
+                <MenuItem onSelect={pick((tool) => void copyText(tool.path ?? ""))}>
                   {t("rowMenu.copyPath")}
                 </MenuItem>
               </>

client/src/components/settings/AppearanceSettings.tsx

@@ -7,7 +7,8 @@
  * `#terminal-font`, with a preview line); **Sessions** (`#sessions-view`) —
  * the per-user Chat UI default (`ChatUiSettings`, `#chat-ui`) and whether the
  * session view's tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
- * `#workspace-tabs`); then the
+ * `#workspace-tabs`), and whether a Markdown file opens as Preview (the
+ * default) or Raw (`lib/markdownView.ts`, `#markdown-view`); then the
  * Dark / Light / System mode switch and one named-theme picker per mode, and the
  * corner pet (`PetSettings`, deep-linked as `#pet`) — the old General and Pet
  * pages redirect here. Theme state is in `hooks/useTheme.ts`, palettes in
@@ -37,6 +38,7 @@ import {
   type TerminalFont,
 } from "../../lib/terminalFont";
 import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
+import { readMarkdownPreview, writeMarkdownPreview } from "../../lib/markdownView";
 import {
   TERMINAL_FONT_SIZES,
   UI_FONT_SIZES,
@@ -97,6 +99,7 @@ export function AppearanceSettings() {
   const [termSize, setTermSize] = useState(readTerminalFontSize);
   const [uiSize, setUiSize] = useState(readUiFontSize);
   const [allTabs, setAllTabs] = useState(readAllTabs);
+  const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
   const pickTermFont = (font: TerminalFont) => {
     writeTerminalFont(font);
     setTermFont(font);
@@ -224,6 +227,25 @@ export function AppearanceSettings() {
             setAllTabs(on);
           }}
         />
+        <SettingsRow
+          id="markdown-view"
+          label={t("markdownView.label")}
+          description={t("markdownView.description")}
+          control={
+            <SettingsSegmented
+              ariaLabel={t("markdownView.label")}
+              value={mdPreview ? "preview" : "raw"}
+              onChange={(v) => {
+                writeMarkdownPreview(v === "preview");
+                setMdPreview(v === "preview");
+              }}
+              options={[
+                { value: "preview" as const, label: t("markdownView.preview") },
+                { value: "raw" as const, label: t("markdownView.raw") },
+              ]}
+            />
+          }
+        />
       </SettingsSection>
 
       <section id="theme" className="card p-5 space-y-5 scroll-mt-24">

client/src/components/settings/AutostartSettings.tsx

@@ -9,17 +9,24 @@
  * boot/login while the switch is on. Between them, the status-area icon switch
  * (`GET/PUT /api/settings/tray`, on by default — server/lib/tray.js). Last,
  * **Uninstall AgentHub**: `POST /api/settings/uninstall` removes AgentHub from
- * the machine, database included (scripts/uninstall.js).
+ * the machine, database included (scripts/uninstall.js). Quit is a plain
+ * button and Uninstall a danger one, both the same width with an icon, and
+ * each spins while its request runs.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Loader2, Power, Trash2 } from "lucide-react";
 import { api, type AutostartStatus, type TrayStatus } from "../../lib/api";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { SettingsRow, SettingsSection, SettingsSwitchRow } from "./SettingsRow";
 
+// The two action buttons share one width, so they line up under the switches.
+const ACTION = "min-w-[6.5rem] justify-center text-xs";
+const ICON = "h-3.5 w-3.5 shrink-0";
+
 export function AutostartSettings() {
   const { t } = useTranslation("settings");
   const [status, setStatus] = useState<AutostartStatus | null>(null);
@@ -126,9 +133,11 @@ export function AutostartSettings() {
             type="button"
             data-testid="quit-agenthub"
             disabled={quitting}
+            aria-busy={quitting}
             onClick={() => void quit()}
-            className="btn-ghost text-xs text-status-danger disabled:opacity-40"
+            className={`btn-secondary ${ACTION}`}
           >
+            {quitting ? <Loader2 className={ICON + " animate-spin"} /> : <Power className={ICON} />}
             {t("quit.button")}
           </button>
         }
@@ -141,9 +150,15 @@ export function AutostartSettings() {
             type="button"
             data-testid="uninstall-agenthub"
             disabled={uninstalling}
+            aria-busy={uninstalling}
             onClick={() => void uninstall()}
-            className="btn-ghost text-xs text-status-danger disabled:opacity-40"
+            className={`btn-danger ${ACTION}`}
           >
+            {uninstalling ? (
+              <Loader2 className={ICON + " animate-spin"} />
+            ) : (
+              <Trash2 className={ICON} />
+            )}
             {t("uninstall.button")}
           </button>
         }

client/src/components/settings/GitIdentitySettings.tsx

@@ -2,14 +2,19 @@
  * @file GitIdentitySettings.tsx
  * @description Settings → Git → **Your git identity** (`/api/me/git`): the
  * commit author (name + email in the account's global git config — prefilled
- * from Settings → Account while unset, since a member's commits fail without
- * one), the SSH
+ * from Settings → Account while unset, the email else `<username>@smartgift.vn`,
+ * since a member's commits fail without one; a new SSH key is labelled with
+ * that email), the SSH
  * keys a clone (Add workspace → Clone) and the pushes from that clone use —
  * an ED25519 and/or an RSA one (AWS CodeCommit takes only RSA) — make one, copy its public half to add to GitHub/GitLab, replace or delete
  * it, and whether git typed in the account's own terminal uses it too (a
  * switch over `core.sshCommand` in its `~/.gitconfig`, issue #82), the SSH
  * login name per host (AWS CodeCommit's SSH key ID, a `url.<…>.insteadOf` in
- * that same file, so a plain `ssh://git-codecommit…` URL works) — and, for
+ * that same file, so a plain `ssh://git-codecommit…` URL works), and for
+ * SEVERAL accounts (two AWS accounts, a second GitHub user) named keys made
+ * beside the default ones plus a login per account NAME (`ssh://<name>/…`),
+ * each tied to the one key it uses (the SSH part is split into tabs: one per
+ * kind of host, the extra keys, the other hosts) — and, for
  * a user with their own Linux account (S3), their own HTTPS
  * logins. The host account's HTTPS logins are the shared Git credentials
  * table above it, so this lists them only for a member. The private key and
@@ -19,12 +24,23 @@
  */
 import { useCallback, useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { Copy, KeyRound, Plus, RefreshCw, Trash2 } from "lucide-react";
+import {
+  Cloud,
+  Copy,
+  GitBranch,
+  KeyRound,
+  KeySquare,
+  Plus,
+  RefreshCw,
+  Server,
+  Trash2,
+} from "lucide-react";
 import { api, type GitIdentity } from "../../lib/api";
 import { confirmDialog } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
 import { toast } from "../../lib/toast";
 import { useAuth } from "../AuthGate";
+import { PageTabs } from "../PageTabs";
 import { Switch } from "../Switch";
 
 const INPUT =
@@ -176,6 +192,8 @@ export function GitIdentitySettings() {
   const me = auth.mode === "server" ? auth.user : null;
   // null = not edited: the field shows the saved value, else the account's.
   const [author, setAuthor] = useState<{ name: string; email: string } | null>(null);
+  // null = not picked: opens on the first kind of host that has a key.
+  const [sshTab, setSshTab] = useState<string | null>(null);
 
   const load = useCallback(async () => {
     try {
@@ -205,9 +223,36 @@ export function GitIdentitySettings() {
 
   // ed25519 suits GitHub/GitLab/Gitea; AWS IAM (CodeCommit) accepts only RSA.
   // An account may hold one of each; an older server answers `ssh` only.
-  const keys = id ? (id.sshKeys ?? (id.ssh ? [id.ssh] : [])) : [];
+  const keys: Key[] = id ? (id.sshKeys ?? (id.ssh ? [id.ssh] : [])) : [];
   const terminal = id?.sshTerminal ?? id?.ssh?.terminal ?? null;
-  const keyOf = (type: "ed25519" | "rsa") => keys.find((k) => (k.type ?? "ed25519") === type);
+  // The default key of a type (a named key sits beside it).
+  const keyOf = (type: "ed25519" | "rsa") =>
+    keys.find((k) => (k.type ?? "ed25519") === type && !k.name);
+  const named = keys.filter((k) => k.name);
+  const keyLabel = (keyId: string | null | undefined) => {
+    const k = keyId ? keys.find((x) => x.id === keyId) : undefined;
+    if (!k) return t("gitIdentity.anyKey");
+    return k.name ?? (k.type === "rsa" ? t("gitIdentity.defaultRsa") : t("gitIdentity.defaultEd"));
+  };
+  const [newKey, setNewKey] = useState<{ name: string; type: "ed25519" | "rsa" } | null>(null);
+  const makeNamed = async () => {
+    if (!newKey) return;
+    const ok = await run(
+      () => api.gitIdentity.generateKey(false, newKey.type, newKey.name.trim().toLowerCase()),
+      t("gitIdentity.keyMade")
+    );
+    if (ok) setNewKey(null);
+  };
+  const removeNamed = async (keyId: string) => {
+    if (
+      !(await confirmDialog({
+        title: t("gitIdentity.removeKeyConfirm"),
+        confirmLabel: t("gitIdentity.remove"),
+      }))
+    )
+      return;
+    await run(() => api.gitIdentity.removeKeyById(keyId));
+  };
   const generate = async (type: "ed25519" | "rsa") => {
     const taken = !!keyOf(type);
     if (
@@ -259,7 +304,7 @@ export function GitIdentitySettings() {
     return m ? [{ ...r, region: m[1] ?? "" }] : [];
   });
   const otherRows = sshUsers.filter((r) => !CODECOMMIT_RE.test(r.host));
-  const [aws, setAws] = useState({ keyId: "", region: "ap-southeast-1" });
+  const [aws, setAws] = useState({ keyId: "", region: "ap-southeast-1", alias: "", key: "" });
   const saveAws = async () => {
     let user = aws.keyId.trim();
     let host = `git-codecommit.${aws.region}.amazonaws.com`;
@@ -269,23 +314,55 @@ export function GitIdentitySettings() {
       user = m[1];
       host = m[2].toLowerCase();
     }
+    const alias = aws.alias.trim().toLowerCase();
     const ok = await run(
-      () => api.gitIdentity.setSshUser({ host, user }),
-      t("gitIdentity.awsSaved", { region: CODECOMMIT_RE.exec(host)?.[1] ?? host })
+      () =>
+        api.gitIdentity.setSshUser({
+          host,
+          user,
+          ...(alias ? { alias } : {}),
+          ...(aws.key ? { key: aws.key } : {}),
+        }),
+      t("gitIdentity.awsSaved", { region: alias || (CODECOMMIT_RE.exec(host)?.[1] ?? host) })
     );
-    if (ok) setAws({ ...aws, keyId: "" });
+    if (ok) setAws({ ...aws, keyId: "", alias: "" });
   };
-  const [other, setOther] = useState({ host: "", user: "" });
+  const [other, setOther] = useState({ host: "", user: "", alias: "", key: "" });
   const saveOther = async () => {
     let host = other.host.trim();
     const m = /^ssh:\/\/(?:[^@/]+@)?([^/]+)/i.exec(host);
     if (m?.[1]) host = m[1];
+    const alias = other.alias.trim().toLowerCase();
     const ok = await run(
-      () => api.gitIdentity.setSshUser({ host, user: other.user.trim() }),
-      t("gitIdentity.otherSaved", { host })
+      () =>
+        api.gitIdentity.setSshUser({
+          host,
+          user: other.user.trim(),
+          ...(alias ? { alias } : {}),
+          ...(other.key ? { key: other.key } : {}),
+        }),
+      t("gitIdentity.otherSaved", { host: alias || host })
     );
-    if (ok) setOther({ host: "", user: "" });
+    if (ok) setOther({ host: "", user: "", alias: "", key: "" });
   };
+  /** The key picker of a login form: every key, or one. */
+  const keySelect = (value: string, onChange: (v: string) => void, only?: "rsa") => (
+    <select
+      aria-label={t("gitIdentity.loginKey")}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      className="select !py-1 !text-xs"
+    >
+      <option value="">{t("gitIdentity.anyKey")}</option>
+      {keys
+        .filter((k) => k.id && (!only || k.type === only))
+        .map((k) => (
+          <option key={k.id} value={k.id}>
+            {keyLabel(k.id)}
+          </option>
+        ))}
+    </select>
+  );
 
   const removeLogin = async (host: string) => {
     if (
@@ -308,13 +385,38 @@ export function GitIdentitySettings() {
   const member = id.account === "member";
   const authorShown = author ?? {
     name: id.author.name ?? me?.displayName ?? me?.username ?? "",
-    email: id.author.email ?? me?.email ?? "",
+    email: id.author.email ?? me?.email ?? id.defaultEmail ?? "",
   };
   const authorUnset = !id.author.name || !id.author.email;
   const authorDirty =
     authorUnset ||
     authorShown.name.trim() !== (id.author.name ?? "") ||
     authorShown.email.trim() !== (id.author.email ?? "");
+  // The SSH keys, one tab per kind of host — every section at once was a wall.
+  const sshTabs = [
+    { id: "git", label: t("gitIdentity.tabGit"), Icon: GitBranch },
+    { id: "aws", label: t("gitIdentity.awsTitle"), Icon: Cloud },
+    ...(named.length > 0 || id.writable
+      ? [
+          {
+            id: "more",
+            label: named.length
+              ? `${t("gitIdentity.tabMore")} (${named.length})`
+              : t("gitIdentity.tabMore"),
+            Icon: KeySquare,
+          },
+        ]
+      : []),
+    ...(id.sshUsers !== undefined && (otherRows.length > 0 || id.writable)
+      ? [{ id: "other", label: t("gitIdentity.tabOther"), Icon: Server }]
+      : []),
+  ];
+  const activeSshTab =
+    sshTab && sshTabs.some((x) => x.id === sshTab)
+      ? sshTab
+      : !keyOf("ed25519") && keyOf("rsa")
+        ? "aws"
+        : "git";
   const saveAuthor = async () => {
     const ok = await run(
       () =>
@@ -389,50 +491,262 @@ export function GitIdentitySettings() {
         </div>
         <p className="text-[11px] text-fg-muted">{t("gitIdentity.sshIntro")}</p>
 
-        <KeyCard
-          title={t("gitIdentity.gitHubTitle")}
-          sub={t("gitIdentity.gitHubSub")}
-          type="ed25519"
-          k={keyOf("ed25519")}
-          id={id}
-          busy={busy}
-          onGenerate={generate}
-          onRemove={removeKey}
+        <PageTabs
+          ariaLabel={t("gitIdentity.sshTitle")}
+          tabs={sshTabs}
+          activeId={activeSshTab}
+          onSelect={setSshTab}
         >
-          <Step n={2}>{t("gitIdentity.gitHubStepAdd")}</Step>
-          <Step n={3}>
-            {t("gitIdentity.gitHubStepClone")}
-            <Code>git clone git@github.com:&lt;org&gt;/&lt;repo&gt;.git</Code>
-          </Step>
-        </KeyCard>
+          {activeSshTab === "git" && (
+            <KeyCard
+              title={t("gitIdentity.gitHubTitle")}
+              sub={t("gitIdentity.gitHubSub")}
+              type="ed25519"
+              k={keyOf("ed25519")}
+              id={id}
+              busy={busy}
+              onGenerate={generate}
+              onRemove={removeKey}
+            >
+              <Step n={2}>{t("gitIdentity.gitHubStepAdd")}</Step>
+              <Step n={3}>
+                {t("gitIdentity.gitHubStepClone")}
+                <Code>git clone git@github.com:&lt;org&gt;/&lt;repo&gt;.git</Code>
+              </Step>
+            </KeyCard>
+          )}
 
-        <KeyCard
-          title={t("gitIdentity.awsTitle")}
-          sub={t("gitIdentity.awsSub")}
-          type="rsa"
-          k={keyOf("rsa")}
-          id={id}
-          busy={busy}
-          onGenerate={generate}
-          onRemove={removeKey}
-        >
-          <Step n={2}>{t("gitIdentity.awsStepUpload")}</Step>
-          <Step n={3}>
-            {t("gitIdentity.awsStepKeyId")}
-            {id.sshUsers === undefined ? null : (
-              <>
-                {awsRows.map((r) => (
-                  <div key={r.host} className="mt-1 flex items-center gap-2">
+          {activeSshTab === "aws" && (
+            <KeyCard
+              title={t("gitIdentity.awsTitle")}
+              sub={t("gitIdentity.awsSub")}
+              type="rsa"
+              k={keyOf("rsa")}
+              id={id}
+              busy={busy}
+              onGenerate={generate}
+              onRemove={removeKey}
+            >
+              <Step n={2}>{t("gitIdentity.awsStepUpload")}</Step>
+              <Step n={3}>
+                {t("gitIdentity.awsStepKeyId")}
+                {id.sshUsers === undefined ? null : (
+                  <>
+                    {awsRows.map((r) => (
+                      <div key={r.alias ?? r.host} className="mt-1 flex items-center gap-2">
+                        <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-secondary">
+                          {r.alias ? `${r.alias} · ` : ""}
+                          {r.region} · {r.user} · {keyLabel(r.key)}
+                        </span>
+                        {id.writable && (
+                          <button
+                            type="button"
+                            className={`${BTN} hover:text-status-danger`}
+                            disabled={busy}
+                            aria-label={`${t("gitIdentity.remove")} ${r.alias ?? r.host}`}
+                            onClick={() =>
+                              void run(() => api.gitIdentity.removeSshUser(r.alias ?? r.host))
+                            }
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                    {id.writable && (
+                      <form
+                        className="mt-1 grid gap-2 sm:grid-cols-[2fr_1fr_1fr_1fr_auto]"
+                        onSubmit={(e) => {
+                          e.preventDefault();
+                          void saveAws();
+                        }}
+                      >
+                        <input
+                          aria-label={t("gitIdentity.awsKeyId")}
+                          placeholder="APKA…"
+                          autoComplete="off"
+                          value={aws.keyId}
+                          onChange={(e) => setAws({ ...aws, keyId: e.target.value })}
+                          className={`${INPUT} font-mono`}
+                        />
+                        <select
+                          aria-label={t("gitIdentity.awsRegion")}
+                          value={aws.region}
+                          onChange={(e) => setAws({ ...aws, region: e.target.value })}
+                          className="select !py-1 !text-xs"
+                        >
+                          {AWS_REGIONS.map((r) => (
+                            <option key={r} value={r}>
+                              {r}
+                            </option>
+                          ))}
+                        </select>
+                        <input
+                          aria-label={t("gitIdentity.alias")}
+                          title={t("gitIdentity.aliasHint")}
+                          placeholder={t("gitIdentity.aliasPlaceholder")}
+                          autoComplete="off"
+                          value={aws.alias}
+                          onChange={(e) => setAws({ ...aws, alias: e.target.value })}
+                          className={`${INPUT} font-mono`}
+                        />
+                        {keySelect(aws.key, (key) => setAws({ ...aws, key }), "rsa")}
+                        <button type="submit" className={BTN} disabled={busy || !aws.keyId.trim()}>
+                          {t("gitIdentity.awsSave")}
+                        </button>
+                      </form>
+                    )}
+                    <div className="mt-1 text-[10px] text-fg-muted">{t("gitIdentity.awsMany")}</div>
+                  </>
+                )}
+              </Step>
+              {awsRows.length > 0 && (
+                <div className="rounded border border-status-success/40 bg-status-success/10 p-2 text-[11px] text-fg-primary">
+                  {t("gitIdentity.awsReady")}
+                  {awsRows.map((r) => (
+                    <Code key={r.alias ?? r.host}>
+                      git clone ssh://{r.alias ?? r.host}/v1/repos/&lt;repo&gt;
+                    </Code>
+                  ))}
+                </div>
+              )}
+            </KeyCard>
+          )}
+
+          {activeSshTab === "more" && (
+            <section
+              aria-label={t("gitIdentity.moreKeysTitle")}
+              className="space-y-2 rounded border border-border p-2.5"
+            >
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="min-w-0 flex-1">
+                  <div className="text-xs font-medium text-fg-primary">
+                    {t("gitIdentity.moreKeysTitle")}
+                  </div>
+                  <div className="text-[10px] text-fg-muted">{t("gitIdentity.moreKeysSub")}</div>
+                </div>
+                {id.writable && !newKey && (
+                  <button
+                    type="button"
+                    className={BTN}
+                    disabled={busy}
+                    onClick={() => setNewKey({ name: "", type: "rsa" })}
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    {t("gitIdentity.newKey")}
+                  </button>
+                )}
+              </div>
+              {newKey && (
+                <form
+                  className="grid gap-2 sm:grid-cols-[2fr_1fr_auto_auto]"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    void makeNamed();
+                  }}
+                >
+                  <input
+                    aria-label={t("gitIdentity.keyName")}
+                    placeholder={t("gitIdentity.keyNamePlaceholder")}
+                    autoComplete="off"
+                    autoFocus
+                    value={newKey.name}
+                    onChange={(e) => setNewKey({ ...newKey, name: e.target.value })}
+                    className={`${INPUT} font-mono`}
+                  />
+                  <select
+                    aria-label={t("gitIdentity.keyType")}
+                    value={newKey.type}
+                    onChange={(e) =>
+                      setNewKey({ ...newKey, type: e.target.value === "rsa" ? "rsa" : "ed25519" })
+                    }
+                    className="select !py-1 !text-xs"
+                  >
+                    <option value="rsa">RSA 4096 (AWS)</option>
+                    <option value="ed25519">ED25519</option>
+                  </select>
+                  <button type="submit" className={BTN} disabled={busy || !newKey.name.trim()}>
+                    {t("gitIdentity.generate")}
+                  </button>
+                  <button type="button" className={BTN} onClick={() => setNewKey(null)}>
+                    {t("gitCreds.cancel")}
+                  </button>
+                </form>
+              )}
+              {named.map((k) => (
+                <div
+                  key={k.id}
+                  className="space-y-1 rounded border border-border-light p-2"
+                  data-testid="git-named-key"
+                >
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="font-mono text-[11px] font-medium text-fg-primary">
+                      {k.name}
+                    </span>
+                    <span className="rounded bg-surface-3 px-1.5 py-0.5 text-[10px] text-fg-secondary">
+                      {k.type === "rsa" ? "RSA" : "ED25519"}
+                    </span>
+                    <span className="min-w-0 flex-1 truncate font-mono text-[10px] text-fg-muted">
+                      {k.fingerprint}
+                    </span>
+                    <button
+                      type="button"
+                      className={BTN}
+                      onClick={() => void copyText(k.publicKey)}
+                    >
+                      <Copy className="h-3.5 w-3.5" />
+                      {t("gitIdentity.copy")}
+                    </button>
+                    {id.writable && (
+                      <button
+                        type="button"
+                        className={`${BTN} hover:text-status-danger`}
+                        disabled={busy}
+                        aria-label={`${t("gitIdentity.remove")} ${k.name}`}
+                        onClick={() => void removeNamed(k.id!)}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </div>
+                  <textarea
+                    readOnly
+                    aria-label={`${t("gitIdentity.publicKey")} ${k.name}`}
+                    value={k.publicKey}
+                    rows={2}
+                    onFocus={(e) => e.currentTarget.select()}
+                    className={`${INPUT} resize-none break-all font-mono text-[10px]`}
+                  />
+                </div>
+              ))}
+            </section>
+          )}
+
+          {activeSshTab === "other" && (
+            <section
+              aria-label={t("gitIdentity.otherTitle")}
+              className="space-y-1.5 rounded border border-border p-2.5"
+            >
+              <div className="text-xs font-medium text-fg-primary">
+                {t("gitIdentity.otherTitle")}
+              </div>
+              <div className="space-y-1.5">
+                <div className="text-[10px] text-fg-muted">{t("gitIdentity.otherHint")}</div>
+                {otherRows.map((r) => (
+                  <div key={r.alias ?? r.host} className="flex items-center gap-2">
                     <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-secondary">
-                      {r.region} · {r.user}
+                      {r.alias ? `ssh://${r.alias}/ → ` : ""}
+                      {r.user}@{r.host} · {keyLabel(r.key)}
                     </span>
                     {id.writable && (
                       <button
                         type="button"
                         className={`${BTN} hover:text-status-danger`}
                         disabled={busy}
-                        aria-label={`${t("gitIdentity.remove")} ${r.host}`}
-                        onClick={() => void run(() => api.gitIdentity.removeSshUser(r.host))}
+                        aria-label={`${t("gitIdentity.remove")} ${r.alias ?? r.host}`}
+                        onClick={() =>
+                          void run(() => api.gitIdentity.removeSshUser(r.alias ?? r.host))
+                        }
                       >
                         <Trash2 className="h-3.5 w-3.5" />
                       </button>
@@ -441,49 +755,50 @@ export function GitIdentitySettings() {
                 ))}
                 {id.writable && (
                   <form
-                    className="mt-1 grid gap-2 sm:grid-cols-[2fr_1fr_auto]"
+                    className="grid gap-2 sm:grid-cols-[2fr_1fr_1fr_1fr_auto]"
                     onSubmit={(e) => {
                       e.preventDefault();
-                      void saveAws();
+                      void saveOther();
                     }}
                   >
                     <input
-                      aria-label={t("gitIdentity.awsKeyId")}
-                      placeholder="APKA…"
-                      autoComplete="off"
-                      value={aws.keyId}
-                      onChange={(e) => setAws({ ...aws, keyId: e.target.value })}
+                      aria-label={t("gitIdentity.otherHost")}
+                      placeholder="git.example.com"
+                      value={other.host}
+                      onChange={(e) => setOther({ ...other, host: e.target.value })}
                       className={`${INPUT} font-mono`}
                     />
-                    <select
-                      aria-label={t("gitIdentity.awsRegion")}
-                      value={aws.region}
-                      onChange={(e) => setAws({ ...aws, region: e.target.value })}
-                      className="select !py-1 !text-xs"
+                    <input
+                      aria-label={t("gitIdentity.otherUser")}
+                      placeholder={t("gitIdentity.otherUser")}
+                      autoComplete="off"
+                      value={other.user}
+                      onChange={(e) => setOther({ ...other, user: e.target.value })}
+                      className={`${INPUT} font-mono`}
+                    />
+                    <input
+                      aria-label={t("gitIdentity.alias")}
+                      title={t("gitIdentity.aliasHint")}
+                      placeholder={t("gitIdentity.aliasPlaceholder")}
+                      autoComplete="off"
+                      value={other.alias}
+                      onChange={(e) => setOther({ ...other, alias: e.target.value })}
+                      className={`${INPUT} font-mono`}
+                    />
+                    {keySelect(other.key, (key) => setOther({ ...other, key }))}
+                    <button
+                      type="submit"
+                      className={BTN}
+                      disabled={busy || !other.host.trim() || !other.user.trim()}
                     >
-                      {AWS_REGIONS.map((r) => (
-                        <option key={r} value={r}>
-                          {r}
-                        </option>
-                      ))}
-                    </select>
-                    <button type="submit" className={BTN} disabled={busy || !aws.keyId.trim()}>
                       {t("gitIdentity.awsSave")}
                     </button>
                   </form>
                 )}
-              </>
-            )}
-          </Step>
-          {awsRows.length > 0 && (
-            <div className="rounded border border-status-success/40 bg-status-success/10 p-2 text-[11px] text-fg-primary">
-              {t("gitIdentity.awsReady")}
-              {awsRows.map((r) => (
-                <Code key={r.host}>git clone ssh://{r.host}/v1/repos/&lt;repo&gt;</Code>
-              ))}
-            </div>
+              </div>
+            </section>
           )}
-        </KeyCard>
+        </PageTabs>
 
         {terminal && (
           <div className="flex items-start gap-2 rounded border border-border p-2">
@@ -503,67 +818,6 @@ export function GitIdentitySettings() {
             />
           </div>
         )}
-
-        {id.sshUsers !== undefined && (otherRows.length > 0 || id.writable) && (
-          <details className="rounded border border-border p-2" open={otherRows.length > 0}>
-            <summary className="cursor-pointer text-[11px] text-fg-primary">
-              {t("gitIdentity.otherTitle")}
-            </summary>
-            <div className="mt-1.5 space-y-1.5">
-              <div className="text-[10px] text-fg-muted">{t("gitIdentity.otherHint")}</div>
-              {otherRows.map((r) => (
-                <div key={r.host} className="flex items-center gap-2">
-                  <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-secondary">
-                    {r.user}@{r.host}
-                  </span>
-                  {id.writable && (
-                    <button
-                      type="button"
-                      className={`${BTN} hover:text-status-danger`}
-                      disabled={busy}
-                      aria-label={`${t("gitIdentity.remove")} ${r.host}`}
-                      onClick={() => void run(() => api.gitIdentity.removeSshUser(r.host))}
-                    >
-                      <Trash2 className="h-3.5 w-3.5" />
-                    </button>
-                  )}
-                </div>
-              ))}
-              {id.writable && (
-                <form
-                  className="grid gap-2 sm:grid-cols-[2fr_1fr_auto]"
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    void saveOther();
-                  }}
-                >
-                  <input
-                    aria-label={t("gitIdentity.otherHost")}
-                    placeholder="git.example.com"
-                    value={other.host}
-                    onChange={(e) => setOther({ ...other, host: e.target.value })}
-                    className={`${INPUT} font-mono`}
-                  />
-                  <input
-                    aria-label={t("gitIdentity.otherUser")}
-                    placeholder={t("gitIdentity.otherUser")}
-                    autoComplete="off"
-                    value={other.user}
-                    onChange={(e) => setOther({ ...other, user: e.target.value })}
-                    className={`${INPUT} font-mono`}
-                  />
-                  <button
-                    type="submit"
-                    className={BTN}
-                    disabled={busy || !other.host.trim() || !other.user.trim()}
-                  >
-                    {t("gitIdentity.awsSave")}
-                  </button>
-                </form>
-              )}
-            </div>
-          </details>
-        )}
         <p className="text-[10px] text-fg-muted">{t("gitIdentity.privateNote")}</p>
       </div>
 

client/src/components/settings/OmpSharingSettings.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file OmpSharingSettings — Settings → AI tools → Oh My Pi login sharing: the
+ * admin's server-wide switch that lets every member's omp pane run on the
+ * HOST account's omp login through omp's own auth broker + gateway, without
+ * any member holding a credential (`GET/PUT /api/ai-tools/omp-sharing`,
+ * `server/lib/omp-share.js`). Renders nothing outside server mode with
+ * per-user accounts (S3), or for anyone but an admin.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type OmpSharingState } from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { usePermissions } from "../AuthGate";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+export function OmpSharingSettings() {
+  const { t } = useTranslation("settings");
+  const { isAdmin, local } = usePermissions();
+  const [state, setState] = useState<OmpSharingState | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (local || !isAdmin) return;
+    api.aiTools
+      .ompSharing()
+      .then(setState)
+      .catch(() => setState(null));
+  }, [local, isAdmin]);
+
+  if (local || !isAdmin || !state?.available) return null;
+  const error = state.broker.error || state.gateway.error;
+  const status = !state.enabled
+    ? null
+    : !state.installed
+      ? t("ompSharing.notInstalled")
+      : state.broker.running && state.gateway.running
+        ? t("ompSharing.running")
+        : error
+          ? t("ompSharing.failed", { error })
+          : t("ompSharing.starting");
+  return (
+    <SettingsSection id="omp-sharing" title={t("ompSharing.title")}>
+      <SettingsSwitchRow
+        label={t("ompSharing.switch")}
+        description={t("ompSharing.hint")}
+        checked={state.enabled}
+        disabled={busy}
+        onChange={async (on) => {
+          setBusy(true);
+          try {
+            setState(await api.aiTools.setOmpSharing(on));
+          } catch (err) {
+            toast.error(err);
+          } finally {
+            setBusy(false);
+          }
+        }}
+      />
+      {status && (
+        <p data-testid="omp-sharing-status" className="text-xs text-fg-muted">
+          {status}
+        </p>
+      )}
+    </SettingsSection>
+  );
+}

client/src/components/settings/PetSettings.tsx

@@ -28,7 +28,7 @@ import { SettingsRow, SettingsSwitchRow } from "./SettingsRow";
 import { SagiAvatar } from "../Sagi/SagiAvatar";
 import { PetSprite } from "../Sagi/PetSprite";
 import { PET_SIZE, sagiPrefs } from "../Sagi/prefs";
-import { usePrefersReducedMotion } from "../Sagi/Sagi";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion";
 import { confirmDialog } from "../../lib/confirm";
 import { toast } from "../../lib/toast";
 import { usePets, useWornPet } from "../Sagi/usePets";

client/src/components/settings/PushIngestSettings.tsx

@@ -16,8 +16,7 @@ import { api } from "../../lib/api";
 import type { PushTokenStatus } from "../../lib/api";
 import { ConfirmModal } from "../ConfirmModal";
 import { SettingsSection } from "./SettingsRow";
-
-const copyText = (text: string) => navigator.clipboard?.writeText(text).catch(() => undefined);
+import { copyText } from "../../lib/clipboard";
 
 /** The forwarder for the pushing machine; `origin` is how it reaches this dashboard. */
 function forwarder(origin: string) {

client/src/components/settings/RetentionSettings.tsx

@@ -0,0 +1,180 @@
+/**
+ * @file RetentionSettings.tsx
+ * @description Settings → Data → Session cleanup, under the manual purge: the
+ * OPT-IN automatic cleanup (`AGENTHUB_RETENTION_DAYS`, 0 = off, the default)
+ * that the hourly maintenance applies, the database's size and free space, and
+ * **Compact now** — a full VACUUM behind a confirm, polled through
+ * `GET /api/settings/retention` while it runs, then toasted. Backed by
+ * `server/lib/db-retention.js`; a value the environment set is read-only.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AlertTriangle, Minimize2, RefreshCw } from "lucide-react";
+import { api } from "../../lib/api";
+import type { RetentionState } from "../../lib/api";
+import { confirmDialog } from "../../lib/confirm";
+import { formatBytes, formatDateTime } from "../../lib/format";
+import { toast } from "../../lib/toast";
+
+export function RetentionSettings() {
+  const { t } = useTranslation("settings");
+  const [state, setState] = useState<RetentionState | null>(null);
+  const [days, setDays] = useState("0");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    api.settings.retention
+      .get()
+      .then((s) => {
+        setState(s);
+        setDays(String(s.days));
+      })
+      .catch(() => undefined);
+  }, []);
+
+  // A Compact takes a while on a large database: poll until it ends.
+  const compacting = !!state?.compacting;
+  useEffect(() => {
+    if (!compacting) return;
+    const id = window.setInterval(() => {
+      api.settings.retention
+        .get()
+        .then((s) => {
+          setState(s); // the draft keeps its value
+          if (s.compacting || !s.last_compact) return;
+          if (s.last_compact.ok) {
+            toast.success(
+              t("retention.compactDone", {
+                before: formatBytes(s.last_compact.size_before ?? 0),
+                after: formatBytes(s.last_compact.size_after ?? 0),
+              })
+            );
+          } else {
+            toast.error(t("retention.compactFailed", { error: s.last_compact.error }));
+          }
+        })
+        .catch(() => undefined);
+    }, 2000);
+    return () => window.clearInterval(id);
+  }, [compacting, t]);
+
+  const max = state?.max_days ?? 3650;
+  const n = Number(days);
+  const valid = days.trim() !== "" && Number.isInteger(n) && n >= 0 && n <= max;
+  const changed = state !== null && valid && n !== state.days;
+  const owned = !!state?.env_owned.days;
+
+  async function save() {
+    setSaving(true);
+    try {
+      const s = await api.settings.retention.save(n);
+      setState(s);
+      setDays(String(s.days));
+      toast.success(t("retention.saved"));
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function compact() {
+    const ok = await confirmDialog({
+      title: t("retention.compactConfirmTitle"),
+      message: t("retention.compactConfirmBody"),
+      confirmLabel: t("retention.compact"),
+    });
+    if (!ok) return;
+    try {
+      setState(await api.settings.retention.compact());
+    } catch (err) {
+      toast.error(err);
+    }
+  }
+
+  const purged = state?.last_run?.retention?.purged_sessions;
+
+  return (
+    <div className="border-t border-border pt-4 space-y-3">
+      <div>
+        <h4 className="text-xs font-medium text-fg-secondary">{t("retention.title")}</h4>
+        <p className="text-xs text-fg-muted">{t("retention.description")}</p>
+      </div>
+      <div className="flex flex-wrap items-end gap-3">
+        <div className="bg-surface-2 rounded-lg px-4 py-3">
+          <label htmlFor="retention-days" className="text-xs text-fg-secondary block mb-2">
+            {t("retention.days")}
+          </label>
+          <div className="flex items-center gap-2">
+            <input
+              id="retention-days"
+              type="number"
+              min="0"
+              max={max}
+              step="1"
+              inputMode="numeric"
+              value={days}
+              disabled={!state || owned}
+              onChange={(e) => setDays(e.target.value)}
+              aria-invalid={!valid || undefined}
+              aria-describedby={!valid ? "retention-days-error" : undefined}
+              className="input w-20 text-sm text-right font-mono"
+            />
+            <span className="text-xs text-fg-muted">{t("common:days")}</span>
+          </div>
+          {!valid && (
+            <p id="retention-days-error" className="mt-1 text-[11px] text-status-danger">
+              {t("retention.invalid", { max })}
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          className="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          disabled={saving || !changed || owned}
+          onClick={() => void save()}
+        >
+          {saving ? t("homeDir.saving") : t("homeDir.save")}
+        </button>
+      </div>
+      <p className="text-xs text-fg-secondary">
+        {state && state.days > 0 ? t("retention.on", { days: state.days }) : t("retention.off")}
+        {state?.last_run && purged !== undefined && (
+          <> {t("retention.lastRun", { time: formatDateTime(state.last_run.at), n: purged })}</>
+        )}
+      </p>
+      {owned && (
+        <p className="text-xs text-status-warning flex items-start gap-1.5">
+          <AlertTriangle className="w-3.5 h-3.5 flex-shrink-0 mt-px" />
+          {t("privacy.envOwned")}
+        </p>
+      )}
+      <div className="flex flex-wrap items-center gap-3">
+        <button
+          type="button"
+          onClick={() => void compact()}
+          disabled={!state || compacting}
+          className="text-xs px-3 py-1.5 rounded-md transition-colors disabled:opacity-50 text-fg-secondary hover:text-fg-primary hover:bg-surface-4 border border-border"
+        >
+          {compacting ? (
+            <RefreshCw className="w-3 h-3 animate-spin inline mr-1" />
+          ) : (
+            <Minimize2 className="w-3 h-3 inline mr-1" />
+          )}
+          {compacting ? t("retention.compacting") : t("retention.compact")}
+        </button>
+        {state?.space && (
+          <span className="text-xs text-fg-muted">
+            {t("retention.space", {
+              size: formatBytes(state.db_size),
+              free: formatBytes(state.space.free_bytes),
+              mode: state.space.auto_vacuum,
+            })}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

client/src/components/settings/SessionDefaultsSettings.tsx

@@ -0,0 +1,154 @@
+/**
+ * @file SessionDefaultsSettings — Settings → AI tools → Session defaults: the
+ * account's own starting choices for a new Claude Code session (permission
+ * mode, Bypass included) and a new Codex session (sandbox, approval, bypass),
+ * which the workspace home's prompt box starts from (`lib/sessionDefaults.ts`,
+ * synced per account). Turning bypass on as a default asks first; a pick in
+ * the prompt box still changes only that one session.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ShieldAlert } from "lucide-react";
+import type { CodexApproval, CodexSandbox } from "../../lib/api";
+import { useAiTools } from "../../hooks/useAiTools";
+import { confirmDialog } from "../../lib/confirm";
+import {
+  CODEX_APPROVALS,
+  CODEX_SANDBOXES,
+  DEFAULT_MODES,
+  readCodexDefaults,
+  readDefaultMode,
+  writeCodexDefaults,
+  writeDefaultMode,
+  type DefaultMode,
+} from "../../lib/sessionDefaults";
+import { SettingsRow, SettingsSection, SettingsSegmented, SettingsSwitchRow } from "./SettingsRow";
+
+const MODE_KEYS: Record<DefaultMode, string> = {
+  auto: "Auto",
+  acceptEdits: "AcceptEdits",
+  default: "Default",
+  plan: "Plan",
+  bypassPermissions: "Bypass",
+};
+const SANDBOX_KEYS: Record<CodexSandbox, string> = {
+  "read-only": "sandboxReadOnly",
+  "workspace-write": "sandboxWorkspaceWrite",
+  "danger-full-access": "sandboxFullAccess",
+};
+const APPROVAL_KEYS: Record<CodexApproval, string> = {
+  "on-request": "approvalOnRequest",
+  never: "approvalNever",
+};
+
+function Danger({ children }: { children: string }) {
+  return (
+    <p className="flex items-start gap-2 py-2 text-xs text-status-danger">
+      <ShieldAlert className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+      {children}
+    </p>
+  );
+}
+
+export function SessionDefaultsSettings() {
+  const { t } = useTranslation("settings");
+  const aiTools = useAiTools();
+  const shown = (id: string) => aiTools.tools.some((x) => x.id === id && x.enabled);
+  const [mode, setMode] = useState<DefaultMode>(() => readDefaultMode() as DefaultMode);
+  const [codex, setCodex] = useState(readCodexDefaults);
+
+  const askBypass = (tool: string) =>
+    confirmDialog({
+      title:
+        tool === "Codex"
+          ? t("sessionDefaults.codexConfirmTitle")
+          : t("sessionDefaults.confirmTitle", { tool }),
+      message: t("sessionDefaults.confirmBody", { tool }),
+      confirmLabel: t("sessionDefaults.confirmLabel"),
+    });
+
+  const pickMode = async (m: DefaultMode) => {
+    if (m === "bypassPermissions" && !(await askBypass("Claude Code"))) return;
+    writeDefaultMode(m);
+    setMode(m);
+  };
+  const patchCodex = (patch: Partial<typeof codex>) => {
+    writeCodexDefaults(patch);
+    setCodex((c) => ({ ...c, ...patch }));
+  };
+  const pickCodexBypass = async (on: boolean) => {
+    if (on && !(await askBypass("Codex"))) return;
+    patchCodex({ bypass: on });
+  };
+
+  if (!shown("claude") && !shown("codex")) return null;
+  return (
+    <SettingsSection
+      id="session-defaults"
+      title={t("sessionDefaults.title")}
+      description={t("sessionDefaults.description")}
+    >
+      {shown("claude") && (
+        <>
+          <SettingsRow
+            label={t("sessionDefaults.claudeMode")}
+            description={t("sessionDefaults.claudeModeDesc")}
+            control={
+              <SettingsSegmented
+                ariaLabel={t("sessionDefaults.claudeMode")}
+                value={mode}
+                onChange={(m) => void pickMode(m)}
+                options={DEFAULT_MODES.map((m) => ({
+                  value: m,
+                  label: t(`lanes:home.permission${MODE_KEYS[m]}`),
+                }))}
+              />
+            }
+          />
+          {mode === "bypassPermissions" && <Danger>{t("run:hint.permissionWarning")}</Danger>}
+        </>
+      )}
+      {shown("codex") && (
+        <>
+          <SettingsRow
+            label={t("sessionDefaults.codexSandbox")}
+            control={
+              <SettingsSegmented
+                ariaLabel={t("sessionDefaults.codexSandbox")}
+                value={codex.sandbox}
+                onChange={(sandbox) => patchCodex({ sandbox })}
+                options={CODEX_SANDBOXES.map((v) => ({
+                  value: v,
+                  label: t(`run:fields.${SANDBOX_KEYS[v]}`),
+                }))}
+              />
+            }
+          />
+          <SettingsRow
+            label={t("sessionDefaults.codexApproval")}
+            control={
+              <SettingsSegmented
+                ariaLabel={t("sessionDefaults.codexApproval")}
+                value={codex.approval}
+                onChange={(approval) => patchCodex({ approval })}
+                options={CODEX_APPROVALS.map((v) => ({
+                  value: v,
+                  label: t(`run:fields.${APPROVAL_KEYS[v]}`),
+                }))}
+              />
+            }
+          />
+          <SettingsSwitchRow
+            label={t("sessionDefaults.codexBypass")}
+            description={t("sessionDefaults.codexBypassDesc")}
+            checked={codex.bypass}
+            onChange={(on) => void pickCodexBypass(on)}
+          />
+          {codex.bypass && <Danger>{t("run:hint.bypassWarning", { tool: "Codex" })}</Danger>}
+        </>
+      )}
+    </SettingsSection>
+  );
+}

client/src/components/settings/SettingsRow.tsx

@@ -4,7 +4,8 @@
  * switch row (`SettingsSwitchRow`) and a segmented radio group
  * (`SettingsSegmented`, arrow keys + one roving tab stop). Rows divide
  * themselves with a hairline, none after the last, so a section is just its
- * rows in order.
+ * rows in order. A string description shows its `backticked` words as code,
+ * and a `disabled` row dims its label, so an unavailable control reads as one.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -32,30 +33,55 @@ export function SettingsSection({
   );
 }
 
+/** `text` with every `backticked` run drawn as inline code (a command to type). */
+export function withCode(text: string): ReactNode {
+  const parts = text.split(/`([^`]+)`/);
+  if (parts.length === 1) return text;
+  return parts.map((p, i) =>
+    i % 2 ? (
+      <code
+        key={i}
+        className="whitespace-nowrap rounded border border-border bg-surface-2 px-1 py-px font-mono text-[11px] text-fg-secondary"
+      >
+        {p}
+      </code>
+    ) : (
+      p
+    )
+  );
+}
+
 export function SettingsRow({
   label,
   description,
   control,
   alignTop = false,
+  disabled = false,
   id,
 }: {
   label: ReactNode;
   description?: ReactNode;
   control: ReactNode;
   alignTop?: boolean;
+  /** The control cannot be used here: the label is dimmed with it. */
+  disabled?: boolean;
   /** A deep-link anchor (`#id`) for one row inside a grouped section. */
   id?: string;
 }) {
   return (
     <div
       id={id}
-      className={`${id ? "scroll-mt-24 " : ""}flex justify-between gap-4 border-b border-border/60 last:border-b-0 ${
+      className={`${id ? "scroll-mt-24 " : ""}flex justify-between gap-6 border-b border-border/60 last:border-b-0 ${
         description ? "py-3" : "py-2"
       } ${alignTop ? "items-start" : "items-center"}`}
     >
       <div className="min-w-0">
-        <p className="text-sm text-fg-secondary">{label}</p>
-        {description && <p className="mt-0.5 text-xs text-fg-muted">{description}</p>}
+        <p className={`text-sm ${disabled ? "text-fg-muted" : "text-fg-secondary"}`}>{label}</p>
+        {description && (
+          <p className="mt-0.5 text-xs leading-relaxed text-fg-muted">
+            {typeof description === "string" ? withCode(description) : description}
+          </p>
+        )}
       </div>
       <div className="shrink-0">{control}</div>
     </div>
@@ -82,6 +108,7 @@ export function SettingsSwitchRow({
       id={id}
       label={label}
       description={description}
+      disabled={disabled}
       control={<Switch checked={checked} onChange={onChange} label={label} disabled={disabled} />}
     />
   );

client/src/components/settings/SnapshotSettings.tsx

@@ -19,6 +19,7 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../Context
 import { CopyButton } from "../event-views/primitives";
 import { snapshotUrl } from "../SnapshotButton";
 import { SettingsSection } from "./SettingsRow";
+import { copyText } from "../../lib/clipboard";
 
 export function SnapshotSettings() {
   const { t } = useTranslation("settings");
@@ -116,9 +117,7 @@ export function SnapshotSettings() {
           <MenuItem onSelect={pick((s) => navigate(`/snapshot/${s.token}`))}>
             {t("snapshots.open")}
           </MenuItem>
-          <MenuItem
-            onSelect={pick((s) => void navigator.clipboard?.writeText(snapshotUrl(s.token)))}
-          >
+          <MenuItem onSelect={pick((s) => void copyText(snapshotUrl(s.token)))}>
             {t("snapshots.copyLink")}
           </MenuItem>
           <MenuSeparator />

client/src/components/settings/ToolProfilesSettings.tsx

@@ -0,0 +1,808 @@
+/**
+ * @file ToolProfilesSettings — Settings → AI tools → Profiles: every AI tool's
+ * login profiles in ONE place, a tab per tool. Claude Code's are cc-profiles
+ * (`/api/cc-config/profiles`, with its quota check and token-owner mismatch
+ * warning — this panel used to be a modal on the Claude Code page); Codex and
+ * Oh My Pi are `/api/tool-profiles`; a tool that cannot be switched
+ * (Antigravity: an OS-keyring login) says why. In server mode the panel links
+ * each Claude/Codex profile to the account pool in Administration → Users,
+ * where an admin moves it in (`?poolAdd=<tool>&poolProfile=<name>` opens the
+ * pool's Add dialog on it), and shows how many accounts the pool holds.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import {
+  AlertCircle,
+  ArrowRightLeft,
+  Check,
+  Copy,
+  KeyRound,
+  Pencil,
+  Save,
+  ShieldAlert,
+  Terminal,
+  Trash2,
+} from "lucide-react";
+import {
+  api,
+  type AccountPool,
+  type CcAccountIdentity,
+  type CcProfile,
+  type CcProfileUsage,
+  type CcUsageWindow,
+  type ToolProfile,
+  type ToolProfileIdentity,
+  type ToolProfilesTool,
+} from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { confirmDialog } from "../../lib/confirm";
+import { copyText } from "../../lib/clipboard";
+import { useAiTools } from "../../hooks/useAiTools";
+import { usePermissions } from "../AuthGate";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { SkeletonRows } from "../config/configPrimitives";
+import { AiToolIcon } from "../AiToolIcon";
+import { SettingsSection } from "./SettingsRow";
+
+/** The tools the panel covers, in tab order, with the command that signs one in. */
+const TOOLS: { id: string; label: string; login: string }[] = [
+  { id: "claude", label: "Claude Code", login: "claude auth login" },
+  { id: "codex", label: "Codex", login: "codex login" },
+  { id: "omp", label: "Oh My Pi", login: "omp  (then /login)" },
+  { id: "antigravity", label: "Antigravity", login: "agy" },
+];
+/** Tools the account pool takes (server/routes/accounts.js). */
+const POOL_TOOLS = new Set(["claude", "codex"]);
+
+const rowCls = "rounded-lg border border-border bg-surface-2 px-3 py-2.5";
+const btnCls =
+  "h-7 text-[11px] font-medium px-2.5 rounded-md border border-accent/30 bg-accent/10 hover:bg-accent/20 text-accent inline-flex items-center gap-1.5 disabled:opacity-50";
+
+export function ToolProfilesSettings() {
+  const { t } = useTranslation("settings");
+  const aiTools = useAiTools();
+  const { local, seesAll } = usePermissions();
+  const shown = TOOLS.filter((x) => {
+    const tool = aiTools.byId(x.id);
+    if (x.id === "claude") return tool?.enabled !== false;
+    return !!tool && tool.installed && tool.enabled !== false;
+  });
+  const [tab, setTab] = useState<string>("claude");
+  const current = shown.find((x) => x.id === tab) ?? shown[0];
+  const [others, setOthers] = useState<ToolProfilesTool[] | null>(null);
+  const [pool, setPool] = useState<AccountPool | null>(null);
+
+  const loadOthers = useCallback(
+    () =>
+      api.toolProfiles
+        .list()
+        .then((r) => setOthers(r.tools))
+        .catch(() => setOthers([])),
+    []
+  );
+  useEffect(() => {
+    void loadOthers();
+  }, [loadOthers]);
+  // The pool is a server-mode, staff-only read.
+  useEffect(() => {
+    if (local || !seesAll) return;
+    api.accountPool
+      .list()
+      .then(setPool)
+      .catch(() => setPool(null));
+  }, [local, seesAll]);
+
+  if (!current) return null;
+  const poolCount = (tool: string) =>
+    pool ? (tool === "codex" ? pool.codex.length : pool.accounts.length) : null;
+
+  return (
+    <SettingsSection
+      id="tool-profiles"
+      title={t("toolProfiles.title")}
+      description={t("toolProfiles.description")}
+    >
+      <div role="tablist" aria-label={t("toolProfiles.title")} className="flex flex-wrap gap-1.5">
+        {shown.map((x) => (
+          <button
+            key={x.id}
+            type="button"
+            role="tab"
+            aria-selected={x.id === current.id}
+            onClick={() => setTab(x.id)}
+            className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs ${
+              x.id === current.id
+                ? "border-accent/40 bg-accent/10 text-accent"
+                : "border-border bg-surface-2 text-fg-secondary hover:bg-surface-3"
+            }`}
+          >
+            <AiToolIcon tool={{ id: x.id, label: x.label }} className="h-3.5 w-3.5" />
+            {x.label}
+          </button>
+        ))}
+      </div>
+      <div role="tabpanel" className="mt-3 space-y-3">
+        {POOL_TOOLS.has(current.id) && poolCount(current.id) !== null && (
+          <PoolLine count={poolCount(current.id)!} />
+        )}
+        {current.id === "claude" ? (
+          <ClaudeProfiles pooled={!local && POOL_TOOLS.has("claude")} />
+        ) : (
+          <OtherProfiles
+            key={current.id}
+            tool={current.id}
+            label={current.label}
+            login={current.login}
+            state={others?.find((o) => o.tool === current.id) ?? null}
+            loading={others === null}
+            pooled={!local && POOL_TOOLS.has(current.id)}
+            onChanged={loadOthers}
+          />
+        )}
+      </div>
+    </SettingsSection>
+  );
+}
+
+/** "The pool holds N accounts" + the way to it (Administration → Users). */
+function PoolLine({ count }: { count: number }) {
+  const { t } = useTranslation("settings");
+  return (
+    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-xs text-fg-secondary">
+      <KeyRound className="h-3.5 w-3.5 text-fg-muted" />
+      <span className="flex-1">{t("toolProfiles.poolCount", { count })}</span>
+      <Link to="/admin#account-pool" className="text-accent hover:underline">
+        {t("toolProfiles.openPool")}
+      </Link>
+    </div>
+  );
+}
+
+/** The link that opens the pool's Add dialog on one saved profile (admins only). */
+function MoveToPool({ tool, name }: { tool: string; name: string }) {
+  const { t } = useTranslation("settings");
+  const { isAdmin } = usePermissions();
+  if (!isAdmin) return null;
+  return (
+    <Link
+      to={`/admin?${new URLSearchParams({ poolAdd: tool, poolProfile: name })}#account-pool`}
+      title={t("toolProfiles.moveToPoolHint")}
+      className="h-7 text-[11px] px-2 rounded-md text-fg-muted hover:text-accent hover:bg-surface-3 inline-flex items-center gap-1"
+    >
+      <ArrowRightLeft className="h-3 w-3" />
+      {t("toolProfiles.moveToPool")}
+    </Link>
+  );
+}
+
+function LoginHint({ text, command }: { text: string; command: string }) {
+  const { t } = useTranslation("ccConfig");
+  const [copied, setCopied] = useState(false);
+  return (
+    <div>
+      <div className="text-[10px] text-fg-muted mb-1">{text}</div>
+      <div className="rounded-md border border-border bg-surface-2 px-2.5 py-1.5 flex items-center gap-2">
+        <Terminal className="w-3 h-3 text-fg-muted flex-shrink-0" />
+        <code className="font-mono text-[11px] text-fg-secondary truncate flex-1">{command}</code>
+        <button
+          type="button"
+          onClick={async () => {
+            if (await copyText(command, true)) {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1500);
+            }
+          }}
+          className="text-[10px] font-medium px-1.5 py-1 rounded border border-border bg-surface-1 hover:bg-surface-3 text-fg-secondary hover:text-fg-primary inline-flex items-center gap-1 flex-shrink-0"
+          title={t("snippet.copy")}
+        >
+          {copied ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+          <span>{copied ? t("snippet.copied") : t("snippet.copy")}</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** A profile's label, renamed in place: click it (or the menu's Rename), type, Enter. */
+function LabelEdit({
+  label,
+  busy,
+  editing,
+  setEditing,
+  onRename,
+}: {
+  label: string;
+  busy: boolean;
+  editing: boolean;
+  setEditing: (on: boolean) => void;
+  onRename: (next: string) => void;
+}) {
+  const { t } = useTranslation("ccConfig");
+  const [draft, setDraft] = useState(label);
+  useEffect(() => {
+    if (editing) setDraft(label);
+  }, [editing, label]);
+  if (editing) {
+    return (
+      <input
+        autoFocus
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={() => setEditing(false)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") setEditing(false);
+          if (e.key !== "Enter") return;
+          const next = draft.trim();
+          setEditing(false);
+          if (next && next !== label) onRename(next);
+        }}
+        maxLength={60}
+        aria-label={t("profiles.renameLabel")}
+        className="h-7 w-48 rounded-md border border-accent/40 bg-surface-1 px-2 text-xs text-fg-primary focus:outline-none focus:ring-1 focus:ring-accent/40"
+      />
+    );
+  }
+  return (
+    <button
+      disabled={busy}
+      onClick={() => setEditing(true)}
+      title={t("profiles.renameHint")}
+      className="text-xs font-medium text-fg-primary hover:text-accent inline-flex items-center gap-1 group"
+    >
+      {label}
+      <Pencil className="w-3 h-3 opacity-0 group-hover:opacity-100 text-fg-muted" />
+    </button>
+  );
+}
+
+/** One mutation with a busy key, a toast either way, then a reload. */
+function useRunner(load: () => Promise<unknown>) {
+  const [busy, setBusy] = useState<string | null>(null);
+  const run = useCallback(
+    async (key: string, fn: () => Promise<unknown>, success: string) => {
+      setBusy(key);
+      try {
+        await fn();
+        toast.success(success);
+        await load();
+      } catch (err: unknown) {
+        toast.error(err);
+      } finally {
+        setBusy(null);
+      }
+    },
+    [load]
+  );
+  return { busy, run };
+}
+
+// ── Codex, Oh My Pi, … ─────────────────────────────────────────────────
+
+function OtherProfiles({
+  tool,
+  label,
+  login,
+  state,
+  loading,
+  pooled,
+  onChanged,
+}: {
+  tool: string;
+  label: string;
+  login: string;
+  state: ToolProfilesTool | null;
+  loading: boolean;
+  pooled: boolean;
+  onChanged: () => Promise<unknown>;
+}) {
+  const { t } = useTranslation("settings");
+  const { t: tc } = useTranslation("ccConfig");
+  const { busy, run } = useRunner(onChanged);
+  const [renaming, setRenaming] = useState<string | null>(null);
+
+  if (loading) return <SkeletonRows n={2} />;
+  if (!state) return <p className="text-xs text-fg-muted">{t("toolProfiles.noProfiles")}</p>;
+  if (!state.supported) {
+    return (
+      <p className="text-xs text-fg-muted inline-flex items-start gap-1.5">
+        <ShieldAlert className="h-3.5 w-3.5 flex-shrink-0 mt-0.5" />
+        <span>{t(`toolProfiles.unsupported.${tool}`, { defaultValue: state.reason ?? "" })}</span>
+      </p>
+    );
+  }
+  const items = state.items;
+  const activeSaved = items.some((p) => p.active);
+  const remove = async (p: ToolProfile) => {
+    const ok = await confirmDialog({
+      title: tc("profiles.deleteConfirmTitle", { name: p.label }),
+      message: t("toolProfiles.deleteConfirmBody", { tool: label }),
+      confirmLabel: tc("profiles.deleteButton"),
+    });
+    if (ok) {
+      void run(
+        `del:${p.name}`,
+        () => api.toolProfiles.remove(tool, p.name),
+        tc("profiles.deleteSuccess", { name: p.label })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-[11px] text-fg-muted leading-relaxed">
+        {t(`toolProfiles.subtitle.${tool}`, { defaultValue: "" })}
+      </p>
+      {state.error && (
+        <div className="text-sm text-status-danger inline-flex items-center gap-2">
+          <AlertCircle className="w-4 h-4" />
+          {state.error.message}
+        </div>
+      )}
+      <div className={`${rowCls} space-y-1`}>
+        <div className="text-[10px] uppercase tracking-wide text-fg-muted">
+          {tc("profiles.activeLabel")}
+        </div>
+        {state.active ? (
+          <>
+            <div className="text-sm text-fg-primary">{who(state.active)}</div>
+            <OtherIdentityLine identity={state.active} />
+          </>
+        ) : (
+          <div className="text-sm text-fg-muted">{t("toolProfiles.noActive", { tool: label })}</div>
+        )}
+        {state.active && !activeSaved && (
+          <div className="pt-1.5 space-y-1.5">
+            <div className="text-[11px] text-status-warning">{tc("profiles.unsavedActive")}</div>
+            <button
+              disabled={busy !== null}
+              onClick={() =>
+                void run("save", () => api.toolProfiles.save(tool), tc("profiles.saveSuccess"))
+              }
+              className={btnCls}
+            >
+              <Save className="w-3 h-3" />
+              {busy === "save" ? tc("profiles.saving") : t("toolProfiles.saveButton")}
+            </button>
+          </div>
+        )}
+      </div>
+      {items.length === 0 && (
+        <div className="rounded-lg border border-dashed border-border bg-surface-2 px-4 py-6 text-center text-sm text-fg-muted">
+          {tc("profiles.empty")}
+        </div>
+      )}
+      {items.map((p) => (
+        <div key={p.name} data-testid={`profile-row-${tool}-${p.name}`} className={rowCls}>
+          <div className="flex items-center gap-2 flex-wrap">
+            <LabelEdit
+              label={p.label}
+              busy={busy !== null}
+              editing={renaming === p.name}
+              setEditing={(on) => setRenaming(on ? p.name : null)}
+              onRename={(next) =>
+                void run(
+                  `rename:${p.name}`,
+                  () => api.toolProfiles.rename(tool, p.name, next),
+                  tc("profiles.renameSuccess", { name: next })
+                )
+              }
+            />
+            {p.active && <ActiveBadge />}
+            <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">{who(p)}</span>
+            {!p.active && (
+              <button
+                disabled={busy !== null}
+                onClick={() =>
+                  void run(
+                    `switch:${p.name}`,
+                    () => api.toolProfiles.activate(tool, p.name),
+                    t("toolProfiles.switchSuccess", { name: p.label, tool: label })
+                  )
+                }
+                className={btnCls}
+              >
+                {busy === `switch:${p.name}`
+                  ? tc("profiles.switching")
+                  : tc("profiles.switchButton")}
+              </button>
+            )}
+            {pooled && <MoveToPool tool={tool} name={p.name} />}
+            {!p.active && (
+              <button
+                type="button"
+                disabled={busy !== null}
+                onClick={() => void remove(p)}
+                title={tc("profiles.deleteButton")}
+                aria-label={tc("profiles.deleteButton")}
+                className="h-7 w-7 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-status-danger hover:bg-surface-3 disabled:opacity-50"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+          <OtherIdentityLine identity={p} />
+          {p.savedAt && (
+            <div className="text-[10px] text-fg-muted mt-1">
+              {tc("profiles.savedAt", { time: new Date(p.savedAt).toLocaleString() })}
+            </div>
+          )}
+        </div>
+      ))}
+      <LoginHint text={t("toolProfiles.loginHint", { tool: label })} command={login} />
+    </div>
+  );
+}
+
+const who = (id: ToolProfileIdentity) => id.email || id.detail || id.kind;
+
+function OtherIdentityLine({ identity }: { identity: ToolProfileIdentity }) {
+  const { t } = useTranslation("settings");
+  const parts = [
+    t(`toolProfiles.kind.${identity.kind}`, { defaultValue: identity.kind }),
+    identity.email ? identity.detail : null,
+  ].filter(Boolean);
+  return <div className="text-[10px] text-fg-muted mt-0.5">{parts.join(" · ")}</div>;
+}
+
+function ActiveBadge() {
+  const { t } = useTranslation("ccConfig");
+  return (
+    <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-status-success/10 border border-status-success/20 text-status-success">
+      {t("profiles.activeBadge")}
+    </span>
+  );
+}
+
+// ── Claude Code ────────────────────────────────────────────────────────
+//
+// Swaps which Anthropic account the local `claude` CLI runs as. Only the two
+// identity artifacts move (the OAuth blob + `oauthAccount`), so skills,
+// subagents, memory, plugins, marketplaces and settings all stay exactly where
+// they are. The dashboard cannot log a new account in (only `claude auth login`
+// can mint tokens), so adding a profile is always "log in, then snapshot what
+// the CLI wrote" — a save button on the live account, never a name field: the
+// server derives the identifier, and the user edits the label in place. The
+// save button only appears while the live account is unsaved, because one
+// account is one profile.
+
+function ClaudeProfiles({ pooled }: { pooled: boolean }) {
+  const { t } = useTranslation("ccConfig");
+  const [items, setItems] = useState<CcProfile[] | null>(null);
+  const [active, setActive] = useState<CcAccountIdentity | null>(null);
+  /** `.claude.json`'s account, when it is not the one the live token belongs to. */
+  const [mismatchEmail, setMismatchEmail] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  /** Quota per profile, keyed by `name`, fetched for every profile once the
+   *  list arrives: the live account is read from the CLI and never refreshed,
+   *  any other profile only when its token has actually expired. */
+  const [usage, setUsage] = useState<Record<string, CcProfileUsage>>({});
+  const [usageError, setUsageError] = useState<Record<string, string>>({});
+  /** Per profile, so one slow account does not freeze the other rows. */
+  const [usageBusy, setUsageBusy] = useState<Record<string, boolean>>({});
+  /** Names already auto-fetched, so the effect below fires once per profile. */
+  const autoFetched = useRef<Set<string>>(new Set());
+  const ctx = useContextMenu<CcProfile>();
+
+  const load = useCallback(async () => {
+    try {
+      const r = await api.ccConfig.profiles();
+      setItems(r.items);
+      setActive(r.active);
+      setMismatchEmail(r.mismatch ? r.mismatch.configEmail || "?" : null);
+      setError(null);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "unknown");
+    }
+  }, []);
+  const { busy, run } = useRunner(load);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const checkUsage = useCallback(async (name: string) => {
+    setUsageBusy((prev) => ({ ...prev, [name]: true }));
+    setUsageError((prev) => {
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+    try {
+      const result = await api.ccConfig.profileUsage(name);
+      setUsage((prev) => ({ ...prev, [name]: result }));
+    } catch (err: unknown) {
+      setUsageError((prev) => ({
+        ...prev,
+        [name]: err instanceof Error ? err.message : "unknown error",
+      }));
+    } finally {
+      setUsageBusy((prev) => {
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      });
+    }
+  }, []);
+
+  // Every profile's quota, once per profile per mount: a retry is the row's
+  // own button, so a failed account is not re-asked on every render.
+  useEffect(() => {
+    if (!items) return;
+    for (const p of items) {
+      if (autoFetched.current.has(p.name)) continue;
+      autoFetched.current.add(p.name);
+      void checkUsage(p.name);
+    }
+  }, [items, checkUsage]);
+
+  const activeSaved = items?.some((p) => p.active) ?? false;
+  /** How many saved profiles hold the same account as `p`. */
+  const copies = (p: CcProfile) =>
+    items?.filter((q) => q.accountUuid && q.accountUuid === p.accountUuid).length ?? 1;
+  /** Deletable unless it is the ONLY saved copy of the live account. */
+  const deletable = (p: CcProfile) => !p.active || copies(p) > 1;
+  const [renaming, setRenaming] = useState<string | null>(null);
+  const switchTo = (p: CcProfile) =>
+    void run(
+      `switch:${p.name}`,
+      () => api.ccConfig.activateProfile(p.name),
+      t("profiles.switchSuccess", { name: p.label })
+    );
+  const remove = async (p: CcProfile) => {
+    const ok = await confirmDialog({
+      title: t("profiles.deleteConfirmTitle", { name: p.label }),
+      message: t("profiles.deleteConfirmBody"),
+      confirmLabel: t("profiles.deleteButton"),
+    });
+    if (!ok) return;
+    void run(
+      `del:${p.name}`,
+      () => api.ccConfig.deleteProfile(p.name),
+      t("profiles.deleteSuccess", { name: p.label })
+    );
+  };
+  const pick = (fn: (p: CcProfile) => void) => () => {
+    const p = ctx.menu!.item;
+    ctx.close();
+    fn(p);
+  };
+
+  return (
+    <div className="space-y-3">
+      <p className="text-[11px] text-fg-muted leading-relaxed">{t("profiles.subtitle")}</p>
+      <p className="text-[11px] text-fg-muted leading-relaxed">{t("profiles.warning")}</p>
+      {mismatchEmail && (
+        <p className="text-[11px] text-status-warning inline-flex items-start gap-1.5 leading-relaxed">
+          <ShieldAlert className="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
+          <span>
+            {t("profiles.mismatch", {
+              config: mismatchEmail,
+              owner: active?.email || active?.accountUuid || "?",
+            })}
+          </span>
+        </p>
+      )}
+      {error && (
+        <div className="text-sm text-status-danger inline-flex items-center gap-2">
+          <AlertCircle className="w-4 h-4" />
+          {error}
+        </div>
+      )}
+
+      <div className={`${rowCls} space-y-1`}>
+        <div className="text-[10px] uppercase tracking-wide text-fg-muted">
+          {t("profiles.activeLabel")}
+        </div>
+        {active ? (
+          <>
+            <div className="text-sm text-fg-primary">
+              {active.email || active.displayName || active.accountUuid}
+            </div>
+            <IdentityLine identity={active} />
+          </>
+        ) : (
+          <div className="text-sm text-fg-muted">{t("profiles.noActive")}</div>
+        )}
+        {active && !activeSaved && (
+          <div className="pt-1.5 space-y-1.5">
+            <div className="text-[11px] text-status-warning">{t("profiles.unsavedActive")}</div>
+            <button
+              disabled={busy !== null}
+              onClick={() =>
+                void run("save", () => api.ccConfig.saveProfile(), t("profiles.saveSuccess"))
+              }
+              className={btnCls}
+            >
+              <Save className="w-3 h-3" />
+              {busy === "save" ? t("profiles.saving") : t("profiles.saveButton")}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {items === null && !error && <SkeletonRows n={3} />}
+      {items !== null && items.length === 0 && (
+        <div className="rounded-lg border border-dashed border-border bg-surface-2 px-4 py-8 text-center text-sm text-fg-muted">
+          {t("profiles.empty")}
+        </div>
+      )}
+      {items?.map((p) => (
+        <div
+          key={p.name}
+          data-testid={`profile-row-${p.name}`}
+          onContextMenu={(e) => ctx.open(e, p)}
+          className={rowCls}
+        >
+          <div className="flex items-center gap-2 flex-wrap">
+            <LabelEdit
+              label={p.label}
+              busy={busy !== null}
+              editing={renaming === p.name}
+              setEditing={(on) => setRenaming(on ? p.name : null)}
+              onRename={(next) =>
+                void run(
+                  `rename:${p.name}`,
+                  () => api.ccConfig.renameProfile(p.name, next),
+                  t("profiles.renameSuccess", { name: next })
+                )
+              }
+            />
+            {p.active && <ActiveBadge />}
+            <span className="text-xs text-fg-secondary truncate flex-1 min-w-0">
+              {p.email || p.displayName || p.accountUuid}
+            </span>
+            {!p.active && (
+              <button disabled={busy !== null} onClick={() => switchTo(p)} className={btnCls}>
+                {busy === `switch:${p.name}` ? t("profiles.switching") : t("profiles.switchButton")}
+              </button>
+            )}
+            {pooled && <MoveToPool tool="claude" name={p.name} />}
+            {deletable(p) && (
+              <button
+                type="button"
+                disabled={busy !== null}
+                onClick={() => void remove(p)}
+                title={t("profiles.deleteButton")}
+                aria-label={t("profiles.deleteButton")}
+                className="h-7 w-7 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-status-danger hover:bg-surface-3 disabled:opacity-50"
+              >
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            )}
+          </div>
+          <IdentityLine identity={p} />
+          <ProfileUsageLine
+            usage={usage[p.name]}
+            error={usageError[p.name]}
+            busy={!!usageBusy[p.name]}
+            disabled={busy !== null || !!usageBusy[p.name]}
+            onCheck={() => void checkUsage(p.name)}
+          />
+          {p.savedAt && (
+            <div className="text-[10px] text-fg-muted mt-1">
+              {t("profiles.savedAt", { time: new Date(p.savedAt).toLocaleString() })}
+            </div>
+          )}
+        </div>
+      ))}
+
+      {ctx.menu && (
+        <ContextMenu x={ctx.menu.x} y={ctx.menu.y} onClose={ctx.close} testId="profile-menu">
+          <MenuItem onSelect={pick((p) => setRenaming(p.name))}>{t("profiles.rename")}</MenuItem>
+          {!ctx.menu.item.active && (
+            <MenuItem disabled={busy !== null} onSelect={pick(switchTo)}>
+              {t("profiles.switchButton")}
+            </MenuItem>
+          )}
+          <MenuItem
+            disabled={busy !== null || !!usageBusy[ctx.menu.item.name]}
+            onSelect={pick((p) => void checkUsage(p.name))}
+          >
+            {t("profiles.usageCheck")}
+          </MenuItem>
+          {deletable(ctx.menu.item) && (
+            <>
+              <MenuSeparator />
+              <MenuItem
+                danger
+                disabled={busy !== null}
+                testId="profile-menu-delete"
+                onSelect={pick((p) => void remove(p))}
+              >
+                {t("profiles.deleteButton")}
+              </MenuItem>
+            </>
+          )}
+        </ContextMenu>
+      )}
+
+      <LoginHint text={t("profiles.loginHint")} command="claude auth login" />
+    </div>
+  );
+}
+
+/**
+ * One profile's quota: a button until asked, then the two windows Anthropic
+ * reports — the 5-hour session allowance and the 7-day one. Reading a saved
+ * profile's usage may refresh its OAuth token (rotating it on disk), so it
+ * happens once per mount or click, never on a poll.
+ */
+function ProfileUsageLine({
+  usage,
+  error,
+  busy,
+  disabled,
+  onCheck,
+}: {
+  usage?: CcProfileUsage;
+  error?: string;
+  busy: boolean;
+  disabled: boolean;
+  onCheck: () => void;
+}) {
+  const { t } = useTranslation("ccConfig");
+  const pct = (w: CcUsageWindow | null | undefined) =>
+    w && w.utilization !== null ? `${Math.round(w.utilization)}%` : "—";
+  const resetTitle = (w: CcUsageWindow | null | undefined) =>
+    w && w.resetsAt
+      ? t("profiles.usageResets", { time: new Date(w.resetsAt).toLocaleString() })
+      : undefined;
+
+  if (error) {
+    return (
+      <div className="mt-1 flex items-center gap-2 text-[10px]">
+        <span className="text-status-danger">{error}</span>
+        <button
+          onClick={onCheck}
+          disabled={disabled}
+          className="text-fg-muted hover:text-accent disabled:opacity-50"
+        >
+          {t("profiles.usageRetry")}
+        </button>
+      </div>
+    );
+  }
+  if (!usage) {
+    return (
+      <button
+        onClick={onCheck}
+        disabled={disabled}
+        title={t("profiles.usageHint")}
+        className="mt-1 text-[10px] text-fg-muted hover:text-accent disabled:opacity-50"
+      >
+        {busy ? t("profiles.usageChecking") : t("profiles.usageCheck")}
+      </button>
+    );
+  }
+  return (
+    <div className="mt-1 flex items-center gap-2 text-[10px] text-fg-muted">
+      <span title={resetTitle(usage.fiveHour)}>
+        {t("profiles.usageFiveHour")}{" "}
+        <span className="text-fg-secondary">{pct(usage.fiveHour)}</span>
+      </span>
+      <span title={resetTitle(usage.sevenDay)}>
+        {t("profiles.usageSevenDay")}{" "}
+        <span className="text-fg-secondary">{pct(usage.sevenDay)}</span>
+      </span>
+      <button
+        onClick={onCheck}
+        disabled={disabled}
+        className="hover:text-accent disabled:opacity-50"
+      >
+        {busy ? t("profiles.usageChecking") : t("profiles.usageRefresh")}
+      </button>
+    </div>
+  );
+}
+
+/** Org / seat / plan line shared by the active card and each profile row. */
+function IdentityLine({ identity }: { identity: CcAccountIdentity }) {
+  const parts = [identity.organization, identity.seatTier, identity.subscriptionType].filter(
+    Boolean
+  );
+  if (parts.length === 0) return null;
+  return <div className="text-[10px] text-fg-muted mt-0.5">{parts.join(" · ")}</div>;
+}

client/src/components/settings/__tests__/AccountSettings.test.tsx

@@ -2,8 +2,9 @@
  * @file AccountSettings.test.tsx
  * @description Settings → Account: shows the account's own information, saves
  * only a changed display name/email, refuses a password change whose two new
- * passwords differ, sends the current + new password, asks before signing
- * the other devices out, and uploads/removes the avatar.
+ * passwords differ, keeps a password that misses a rule from being sent,
+ * sends the current + new password, asks before signing
+ * the other devices out, and uploads/removes the avatar or sets it from a link.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -17,6 +18,7 @@ const me = vi.hoisted(() => ({
   changePassword: vi.fn(),
   signOutOthers: vi.fn(),
   setAvatar: vi.fn(),
+  setAvatarFromUrl: vi.fn(),
   removeAvatar: vi.fn(),
   avatarUrl: (at?: string | null) => (at ? `/api/me/avatar?v=${at}` : null),
 }));
@@ -76,6 +78,55 @@ describe("AccountSettings", () => {
     expect(await screen.findByTestId("user-avatar-initials")).toBeTruthy();
   });
 
+  /** jsdom never loads an image: play the browser's answer to `src`. */
+  const stubImage = (loads: boolean) =>
+    vi.stubGlobal(
+      "Image",
+      class {
+        naturalWidth = loads ? 64 : 0;
+        referrerPolicy = "";
+        onload: (() => void) | null = null;
+        onerror: (() => void) | null = null;
+        set src(_v: string) {
+          setTimeout(() => (loads ? this.onload?.() : this.onerror?.()), 0);
+        }
+      }
+    );
+
+  it("refuses a link this browser cannot load as an image, and saves nothing", async () => {
+    const ue = userEvent.setup();
+    stubImage(false);
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    await ue.click(screen.getByTestId("account-avatar-url-toggle"));
+    await ue.type(
+      screen.getByTestId("account-avatar-url-input"),
+      "https://chat.example/api/v4/users/x/image{Enter}"
+    );
+    await waitFor(() => expect(screen.getByTestId("account-avatar-url-input")).toBeTruthy());
+    await new Promise((r) => setTimeout(r, 20));
+    expect(me.setAvatarFromUrl).not.toHaveBeenCalled();
+    vi.unstubAllGlobals();
+  });
+
+  it("sets the avatar from a link and closes the field", async () => {
+    const ue = userEvent.setup();
+    stubImage(true);
+    const withAvatar = { ...account, user: { ...account.user, avatarAt: "2026-10-21T00:00:00Z" } };
+    me.setAvatarFromUrl.mockResolvedValue(withAvatar);
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    expect(screen.queryByTestId("account-avatar-url-input")).toBeNull();
+    await ue.click(screen.getByTestId("account-avatar-url-toggle"));
+    await ue.type(screen.getByTestId("account-avatar-url-input"), " https://x.vn/me.png {Enter}");
+    await waitFor(() => expect(me.setAvatarFromUrl).toHaveBeenCalledWith("https://x.vn/me.png"));
+    expect((await screen.findByTestId("user-avatar-img")).getAttribute("src")).toBe(
+      "/api/me/avatar?v=2026-10-21T00:00:00Z"
+    );
+    expect(screen.queryByTestId("account-avatar-url-input")).toBeNull();
+    vi.unstubAllGlobals();
+  });
+
   it("shows the account's own information", async () => {
     render(<AccountSettings />);
     const card = await screen.findByTestId("account-card");
@@ -114,9 +165,21 @@ describe("AccountSettings", () => {
     await ue.type(screen.getByLabelText("Current password"), "old-pass-1");
     await ue.type(screen.getByLabelText("New password"), "new-pass-123");
     await ue.type(screen.getByLabelText("Confirm new password"), "new-pass-123");
+    // No upper-case letter: the checklist says so and the button stays off.
+    expect(
+      screen
+        .getByTestId("password-rules")
+        .querySelector('[data-rule="upper"]')
+        ?.getAttribute("data-ok")
+    ).toBe("false");
+    expect(screen.getByRole("button", { name: "Change password" })).toBeDisabled();
+    await ue.clear(screen.getByLabelText("New password"));
+    await ue.clear(screen.getByLabelText("Confirm new password"));
+    await ue.type(screen.getByLabelText("New password"), "New-pass-123");
+    await ue.type(screen.getByLabelText("Confirm new password"), "New-pass-123");
     await ue.click(screen.getByRole("button", { name: "Change password" }));
     await waitFor(() =>
-      expect(me.changePassword).toHaveBeenCalledWith("old-pass-1", "new-pass-123")
+      expect(me.changePassword).toHaveBeenCalledWith("old-pass-1", "New-pass-123")
     );
   });
 

client/src/components/settings/__tests__/GitIdentitySettings.test.tsx

@@ -4,7 +4,10 @@
  * first, and a member (S3) adds an HTTPS login of their own while the host's
  * view leaves HTTPS to the shared Git credentials table, and an SSH user per
  * host is saved — AWS CodeCommit's key ID inside its own RSA section, any
- * other host under "Other SSH hosts" — so the sections never mix.
+ * other host under "Other SSH hosts" — each kind of host in its own tab, so
+ * the sections never mix; a named key
+ * is made beside the default ones, and a second AWS account is saved under
+ * its own name with the one key it uses.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
@@ -21,6 +24,7 @@ vi.mock("../../../lib/api", () => ({
       get: vi.fn(),
       generateKey: vi.fn(),
       removeKey: vi.fn(),
+      removeKeyById: vi.fn(),
       setTerminalSsh: vi.fn(),
       setSshUser: vi.fn(),
       removeSshUser: vi.fn(),
@@ -44,6 +48,10 @@ const view = (over: Partial<GitIdentity> = {}): GitIdentity => ({
   ...over,
 });
 
+/** Opens one tab of the SSH keys. */
+const tab = async (name: string | RegExp) =>
+  userEvent.click(await screen.findByRole("tab", { name }));
+
 beforeEach(() => {
   vi.clearAllMocks();
 });
@@ -97,6 +105,7 @@ describe("GitIdentitySettings", () => {
       view({ ssh: { ...KEY, type: "rsa", publicKey: "ssh-rsa AAAAB3 an@agenthub" } })
     );
     render(<GitIdentitySettings />);
+    await tab("AWS CodeCommit");
     const aws = await screen.findByRole("region", { name: "AWS CodeCommit" });
     await userEvent.click(within(aws).getByRole("button", { name: "Generate key" }));
     expect(api.gitIdentity.generateKey).toHaveBeenCalledWith(false, "rsa");
@@ -116,11 +125,14 @@ describe("GitIdentitySettings", () => {
     vi.mocked(api.gitIdentity.removeKey).mockResolvedValue(view({ ssh: ED, sshKeys: [ED] }));
     render(<GitIdentitySettings />);
     const gh = await screen.findByRole("region", { name: /GitHub/ });
-    const aws = screen.getByRole("region", { name: "AWS CodeCommit" });
     expect(within(gh).getByLabelText("Public key ED25519")).toHaveValue(ED.publicKey);
-    expect(within(aws).getByLabelText("Public key RSA")).toHaveValue(RSA.publicKey);
-    // Each section explains only its own host.
+    // One tab at a time: the other host's section is not on screen.
+    expect(screen.queryByRole("region", { name: "AWS CodeCommit" })).toBeNull();
     expect(within(gh).queryByText(/IAM/)).toBeNull();
+    await tab("AWS CodeCommit");
+    const aws = screen.getByRole("region", { name: "AWS CodeCommit" });
+    expect(screen.queryByRole("region", { name: /GitHub/ })).toBeNull();
+    expect(within(aws).getByLabelText("Public key RSA")).toHaveValue(RSA.publicKey);
     expect(within(aws).queryByText(/GitHub/)).toBeNull();
     expect(screen.getByRole("switch", { name: /terminal/ })).toBeChecked();
     await userEvent.click(within(aws).getByRole("button", { name: "Delete" }));
@@ -143,7 +155,7 @@ describe("GitIdentitySettings", () => {
     await userEvent.selectOptions(within(aws).getByLabelText("Region"), "eu-west-1");
     await userEvent.click(within(aws).getByRole("button", { name: "Save" }));
     expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({ host: H, user: "APKA1" });
-    expect(await within(aws).findByText("eu-west-1 · APKA1")).toBeInTheDocument();
+    expect(await within(aws).findByText("eu-west-1 · APKA1 · Any key")).toBeInTheDocument();
     expect(within(aws).getByText(`git clone ssh://${H}/v1/repos/<repo>`)).toBeInTheDocument();
     // A CodeCommit host never shows up again under "other hosts".
     expect(screen.queryByText(`APKA1@${H}`)).toBeNull();
@@ -157,7 +169,7 @@ describe("GitIdentitySettings", () => {
       view({ ssh: KEY, sshUsers: [{ host: "git.example.com", user: "deploy" }] })
     );
     render(<GitIdentitySettings />);
-    await userEvent.click(await screen.findByText("Other SSH hosts (advanced)"));
+    await tab("Other hosts");
     await userEvent.type(screen.getByLabelText("Host"), "ssh://git.example.com/x");
     await userEvent.type(screen.getByLabelText("User name"), "deploy");
     const form = screen.getByLabelText("Host").closest("form")!;
@@ -166,7 +178,7 @@ describe("GitIdentitySettings", () => {
       host: "git.example.com",
       user: "deploy",
     });
-    expect(await screen.findByText("deploy@git.example.com")).toBeInTheDocument();
+    expect(await screen.findByText("deploy@git.example.com · Any key")).toBeInTheDocument();
   });
 
   it("warns while the commit author is unset and saves it", async () => {
@@ -194,4 +206,69 @@ describe("GitIdentitySettings", () => {
     expect(screen.queryByRole("button", { name: "Replace key" })).toBeNull();
     expect(screen.queryByRole("button", { name: "Add login" })).toBeNull();
   });
+
+  it("makes a named key and saves a second AWS account under its name with that key", async () => {
+    const RSA = {
+      id: "id_rsa",
+      type: "rsa" as const,
+      name: null,
+      publicKey: "ssh-rsa A x",
+      fingerprint: "SHA256:r",
+    };
+    const PROD = {
+      id: "id_rsa_aws-prod",
+      type: "rsa" as const,
+      name: "aws-prod",
+      publicKey: "ssh-rsa B prod",
+      fingerprint: "SHA256:p",
+    };
+    const H = "git-codecommit.ap-southeast-1.amazonaws.com";
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view({ sshKeys: [RSA], sshUsers: [] }));
+    vi.mocked(api.gitIdentity.generateKey).mockResolvedValue(
+      view({ sshKeys: [RSA, PROD], sshUsers: [] })
+    );
+    vi.mocked(api.gitIdentity.setSshUser).mockResolvedValue(
+      view({
+        sshKeys: [RSA, PROD],
+        sshUsers: [{ host: H, user: "APKA2", alias: "aws-prod", key: "id_rsa_aws-prod" }],
+      })
+    );
+    vi.mocked(api.gitIdentity.removeKeyById).mockResolvedValue(
+      view({ sshKeys: [RSA], sshUsers: [] })
+    );
+    render(<GitIdentitySettings />);
+    // Only an RSA key: the AWS tab opens first.
+    expect(await screen.findByRole("region", { name: "AWS CodeCommit" })).toBeInTheDocument();
+    await tab("More keys");
+    let more = screen.getByRole("region", { name: "More SSH keys" });
+    await userEvent.click(within(more).getByRole("button", { name: "New key" }));
+    await userEvent.type(within(more).getByLabelText("Key name"), "AWS-Prod");
+    await userEvent.click(within(more).getByRole("button", { name: "Generate key" }));
+    expect(api.gitIdentity.generateKey).toHaveBeenCalledWith(false, "rsa", "aws-prod");
+    expect(await within(more).findByLabelText("Public key aws-prod")).toHaveValue("ssh-rsa B prod");
+
+    await tab("AWS CodeCommit");
+    const aws = screen.getByRole("region", { name: "AWS CodeCommit" });
+    await userEvent.type(within(aws).getByLabelText("SSH key ID"), "APKA2");
+    await userEvent.type(within(aws).getByLabelText("Account name"), "aws-prod");
+    await userEvent.selectOptions(within(aws).getByLabelText("Key"), "id_rsa_aws-prod");
+    await userEvent.click(within(aws).getByRole("button", { name: "Save" }));
+    expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({
+      host: H,
+      user: "APKA2",
+      alias: "aws-prod",
+      key: "id_rsa_aws-prod",
+    });
+    expect(
+      await within(aws).findByText("aws-prod · ap-southeast-1 · APKA2 · aws-prod")
+    ).toBeInTheDocument();
+    expect(within(aws).getByText("git clone ssh://aws-prod/v1/repos/<repo>")).toBeInTheDocument();
+
+    await tab("More keys (1)");
+    more = screen.getByRole("region", { name: "More SSH keys" });
+    await userEvent.click(within(more).getByRole("button", { name: "Delete aws-prod" }));
+    await waitFor(() =>
+      expect(api.gitIdentity.removeKeyById).toHaveBeenCalledWith("id_rsa_aws-prod")
+    );
+  });
 });

client/src/components/settings/__tests__/OmpSharingSettings.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @file Tests for OmpSharingSettings — the admin's Oh My Pi login-sharing
+ * switch in Settings → AI tools: hidden in local mode, for a non-admin and
+ * outside S3, and a toggle saves through PUT /api/ai-tools/omp-sharing and
+ * shows the daemons' state.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import "../../../i18n";
+import { OmpSharingSettings } from "../OmpSharingSettings";
+import { api, type OmpSharingState } from "../../../lib/api";
+
+const perms = vi.hoisted(() => ({ isAdmin: true, local: false }));
+vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
+vi.mock("../../../lib/api", () => ({
+  api: { aiTools: { ompSharing: vi.fn(), setOmpSharing: vi.fn() } },
+}));
+
+const get = vi.mocked(api.aiTools.ompSharing);
+const set = vi.mocked(api.aiTools.setOmpSharing);
+const off: OmpSharingState = {
+  available: true,
+  enabled: false,
+  installed: true,
+  broker: { running: false, error: null },
+  gateway: { running: false, error: null },
+};
+
+describe("OmpSharingSettings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    perms.isAdmin = true;
+    perms.local = false;
+  });
+
+  it("lets an admin turn sharing on and shows it running", async () => {
+    get.mockResolvedValue(off);
+    set.mockResolvedValue({
+      ...off,
+      enabled: true,
+      broker: { running: true },
+      gateway: { running: true, port: 4827 },
+    });
+    render(<OmpSharingSettings />);
+    const sw = await screen.findByRole("switch", { name: "Share this server's Oh My Pi login" });
+    fireEvent.click(sw);
+    await waitFor(() => expect(set).toHaveBeenCalledWith(true));
+    expect(await screen.findByTestId("omp-sharing-status")).toHaveTextContent("Running");
+  });
+
+  it("names a daemon's failure", async () => {
+    get.mockResolvedValue({
+      ...off,
+      enabled: true,
+      gateway: { running: false, error: "port 4827 is taken" },
+    });
+    render(<OmpSharingSettings />);
+    expect(await screen.findByTestId("omp-sharing-status")).toHaveTextContent("port 4827 is taken");
+  });
+
+  it("renders nothing outside S3, for a non-admin or in local mode", async () => {
+    get.mockResolvedValue({ ...off, available: false });
+    const r = render(<OmpSharingSettings />);
+    await waitFor(() => expect(get).toHaveBeenCalled());
+    expect(r.container).toBeEmptyDOMElement();
+    r.unmount();
+    perms.isAdmin = false;
+    const r2 = render(<OmpSharingSettings />);
+    expect(r2.container).toBeEmptyDOMElement();
+    expect(get).toHaveBeenCalledTimes(1);
+  });
+});

client/src/components/settings/__tests__/SessionDefaultsSettings.test.tsx

@@ -0,0 +1,72 @@
+/**
+ * @file SessionDefaultsSettings.test.tsx
+ * @description Session defaults: Bypass becomes Claude's default permission
+ * mode or Codex's default bypass only after the confirm, a cancelled confirm
+ * keeps the old default, the plain modes save at once, and the pet chat's
+ * safe read never returns bypass.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { SessionDefaultsSettings } from "../SessionDefaultsSettings";
+import { confirmDialog } from "../../../lib/confirm";
+import { readCodexDefaults, readDefaultMode } from "../../../lib/sessionDefaults";
+
+const aiTools = vi.hoisted(() => ({
+  tools: [
+    { id: "claude", label: "Claude Code", installed: true, enabled: true },
+    { id: "codex", label: "Codex", installed: true, enabled: true },
+  ],
+}));
+vi.mock("../../../hooks/useAiTools", () => ({ useAiTools: () => aiTools }));
+vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn() }));
+const confirm = vi.mocked(confirmDialog);
+
+const radio = (name: RegExp) => screen.getAllByRole("radio", { name })[0]!;
+
+describe("SessionDefaultsSettings", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    confirm.mockReset();
+  });
+
+  it("saves a plain mode without asking", () => {
+    render(<SessionDefaultsSettings />);
+    fireEvent.click(radio(/plan/i));
+    expect(confirm).not.toHaveBeenCalled();
+    expect(readDefaultMode()).toBe("plan");
+  });
+
+  it("makes Bypass Claude's default only once confirmed", async () => {
+    confirm.mockResolvedValueOnce(false);
+    render(<SessionDefaultsSettings />);
+    fireEvent.click(radio(/bypass/i));
+    await waitFor(() => expect(confirm).toHaveBeenCalledTimes(1));
+    expect(readDefaultMode()).toBe("auto");
+
+    confirm.mockResolvedValueOnce(true);
+    fireEvent.click(radio(/bypass/i));
+    await waitFor(() => expect(readDefaultMode()).toBe("bypassPermissions"));
+    expect(readDefaultMode({ safe: true })).toBe("auto");
+  });
+
+  it("turns Codex's default bypass on only once confirmed, off without asking", async () => {
+    confirm.mockResolvedValueOnce(true);
+    render(<SessionDefaultsSettings />);
+    const sw = screen.getByRole("switch");
+    fireEvent.click(sw);
+    await waitFor(() => expect(readCodexDefaults().bypass).toBe(true));
+    fireEvent.click(screen.getByRole("switch"));
+    await waitFor(() => expect(readCodexDefaults().bypass).toBe(false));
+    expect(confirm).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows nothing when neither Claude nor Codex is enabled", () => {
+    const saved = aiTools.tools;
+    aiTools.tools = [];
+    const { container } = render(<SessionDefaultsSettings />);
+    expect(container.firstChild).toBeNull();
+    aiTools.tools = saved;
+  });
+});

client/src/components/settings/__tests__/ToolProfilesSettings.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * @file Tests for ToolProfilesSettings — Settings → AI tools → Profiles: one
+ * tab per AI tool. Claude's tab asks for EVERY saved account's quota once (a
+ * failing account costs the others nothing), and its right-click delete asks
+ * first and never offers to delete the only copy of the live account; Codex's
+ * tab switches through /api/tool-profiles; Antigravity says why it cannot be
+ * switched; and in server mode a profile links into the account pool.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import "../../../i18n";
+import { settleConfirm } from "../../../lib/confirm";
+import { ToolProfilesSettings } from "../ToolProfilesSettings";
+
+const perms = vi.hoisted(() => ({ isAdmin: true, local: true, seesAll: true }));
+vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
+vi.mock("../../../hooks/useAiTools", () => ({
+  useAiTools: () => ({
+    byId: (id: string) => ({ id, installed: true, enabled: true }),
+  }),
+}));
+
+const m = vi.hoisted(() => {
+  const window = (utilization: number) => ({ utilization, resetsAt: "2026-09-18T08:00:00Z" });
+  return {
+    window,
+    cc: {
+      profiles: vi.fn(),
+      profileUsage: vi.fn(),
+      deleteProfile: vi.fn(),
+      activateProfile: vi.fn(),
+      saveProfile: vi.fn(),
+      renameProfile: vi.fn(),
+    },
+    tp: { list: vi.fn(), activate: vi.fn(), save: vi.fn(), rename: vi.fn(), remove: vi.fn() },
+    pool: { list: vi.fn() },
+  };
+});
+vi.mock("../../../lib/api", () => ({
+  api: {
+    ccConfig: m.cc,
+    toolProfiles: m.tp,
+    accountPool: m.pool,
+    aiTools: { iconUrl: (id: string) => `/icons/${id}.png` },
+  },
+}));
+
+async function settle() {
+  await act(async () => {
+    await new Promise((res) => setTimeout(res, 0));
+    await new Promise((res) => setTimeout(res, 0));
+  });
+}
+
+async function show() {
+  render(
+    <MemoryRouter>
+      <ToolProfilesSettings />
+    </MemoryRouter>
+  );
+  await settle();
+  await settle();
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  perms.local = true;
+  m.cc.profiles.mockResolvedValue({
+    items: [
+      { name: "work", label: "Work", active: true, accountUuid: "u1", email: "a@b.c" },
+      { name: "spare", label: "Spare", active: false, accountUuid: "u2", email: "d@e.f" },
+    ],
+    active: { accountUuid: "u1", email: "a@b.c" },
+  });
+  m.cc.profileUsage.mockImplementation(async (name: string) => {
+    if (name === "spare") throw new Error("this profile's saved login has been superseded");
+    return { name, refreshed: false, fiveHour: m.window(8), sevenDay: m.window(70) };
+  });
+  m.cc.deleteProfile.mockResolvedValue({ ok: true, name: "spare" });
+  m.tp.list.mockResolvedValue({
+    tools: [
+      {
+        tool: "codex",
+        supported: true,
+        items: [
+          {
+            name: "a",
+            label: "Alice",
+            active: true,
+            kind: "chatgpt",
+            email: "a@x",
+            detail: "plus",
+          },
+          { name: "b", label: "Bob", active: false, kind: "apikey", email: null, detail: "…1234" },
+        ],
+        active: { kind: "chatgpt", email: "a@x", detail: "plus" },
+      },
+      { tool: "omp", supported: true, items: [], active: null },
+      { tool: "antigravity", supported: false, reason: "keyring", items: [], active: null },
+    ],
+  });
+  m.tp.activate.mockResolvedValue({ ok: true, name: "b", savedOutgoing: "a" });
+  m.pool.list.mockResolvedValue({ accounts: [{ name: "p1" }], codex: [], blockPercent: 90 });
+});
+
+describe("ToolProfilesSettings — Claude", () => {
+  it("asks for every saved account's quota once, a failure costing the others nothing", async () => {
+    await show();
+    await settle();
+    expect(m.cc.profileUsage).toHaveBeenCalledWith("work");
+    expect(m.cc.profileUsage).toHaveBeenCalledWith("spare");
+    expect(m.cc.profileUsage.mock.calls.filter((c) => c[0] === "work")).toHaveLength(1);
+    expect(await screen.findByText("8%")).toBeInTheDocument();
+    expect(await screen.findByText(/saved login has been superseded/i)).toBeInTheDocument();
+  });
+
+  it("deletes from the right-click menu only after confirming", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-spare") });
+    await user.click(screen.getByTestId("profile-menu-delete"));
+    await settle();
+    expect(m.cc.deleteProfile).not.toHaveBeenCalled();
+    await act(async () => settleConfirm(true));
+    await settle();
+    expect(m.cc.deleteProfile).toHaveBeenCalledWith("spare");
+  });
+
+  it("offers no delete for the only saved copy of the live account", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("profile-row-work") });
+    expect(screen.getByTestId("profile-menu")).toBeInTheDocument();
+    expect(screen.queryByTestId("profile-menu-delete")).toBeNull();
+  });
+});
+
+describe("ToolProfilesSettings — other tools", () => {
+  it("switches a Codex login through /api/tool-profiles", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.click(screen.getByRole("tab", { name: /codex/i }));
+    const bob = screen.getByTestId("profile-row-codex-b");
+    expect(bob).toHaveTextContent("…1234");
+    await user.click(screen.getByRole("button", { name: "Switch to" }));
+    await settle();
+    expect(m.tp.activate).toHaveBeenCalledWith("codex", "b");
+    expect(m.tp.list).toHaveBeenCalledTimes(2);
+  });
+
+  it("says why Antigravity cannot be switched", async () => {
+    const user = userEvent.setup();
+    await show();
+    await user.click(screen.getByRole("tab", { name: /antigravity/i }));
+    expect(screen.getByText(/system keyring/i)).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Switch to" })).toBeNull();
+  });
+});
+
+describe("ToolProfilesSettings — account pool", () => {
+  it("is not shown in local mode", async () => {
+    await show();
+    expect(m.pool.list).not.toHaveBeenCalled();
+    expect(screen.queryByText(/Move to pool/)).toBeNull();
+  });
+
+  it("in server mode shows the pool's size and links a profile into it", async () => {
+    perms.local = false;
+    await show();
+    expect(screen.getByText(/holds 1 account/)).toBeInTheDocument();
+    const [link] = screen.getAllByRole("link", { name: /Move to pool/ });
+    expect(link?.getAttribute("href")).toBe("/admin?poolAdd=claude&poolProfile=work#account-pool");
+  });
+});

client/src/components/users/AccountPoolCard.tsx

@@ -4,30 +4,39 @@
  * Claude and Codex accounts every user's new sessions are spread over, each
  * with its live panes, $ and tokens in the last 5 h / 7 d and quota — so nobody signs in
  * per user. An admin adds one — for Claude a login MOVED in from a saved
- * switch-user profile (`GET /api/accounts/profiles`), a pasted
- * `.credentials.json`, or a `claude setup-token` token; for Codex an OpenAI
- * API key or a pasted `auth.json` — or removes one, each time with their own
+ * profile (Settings → AI tools → Profiles, `GET /api/accounts/profiles`), a
+ * pasted `.credentials.json`, or a `claude setup-token` token; for Codex a
+ * saved Codex profile (`?tool=codex`), an OpenAI API key or a pasted
+ * `auth.json` — or removes one, each time with their own
  * password again; an analyst only reads. The secret only goes IN: the server
- * never sends it back.
+ * never sends it back. An account's Edit (pencil) picks the users who run on
+ * it (`PUT /api/accounts/:name/users`): their sessions skip the balancer, and
+ * a Claude login goes into their home at once — no restart. A profile's
+ * "Move to pool" link lands here as `?poolAdd=<tool>&poolProfile=<name>`,
+ * which opens Add on that profile; the header links back to the profiles.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useCallback, useEffect, useState, type KeyboardEvent, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
-import { KeyRound, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Link, useSearchParams } from "react-router-dom";
+import { KeyRound, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
 import {
   api,
+  type AccountPin,
   type AccountPool,
   type PoolAccountInput,
   type PoolProfile,
   type PoolTool,
+  type ServerUserUsage,
 } from "../../lib/api";
 import { fmt, fmtCost, formatDateTime } from "../../lib/format";
 import { toast } from "../../lib/toast";
 import { isSubmitEnter } from "../../lib/keys";
 import { useSpin } from "../../hooks/useSpin";
 import { ConfirmModal } from "../ConfirmModal";
+import { Checkbox } from "../Checkbox";
 
 type Row = {
   tool: PoolTool;
@@ -59,6 +68,8 @@ function rowsOf(pool: AccountPool): Row[] {
   ];
 }
 
+const pinsOf = (pool: AccountPool, tool: PoolTool): AccountPin[] => pool.pins?.[tool] ?? [];
+
 function errorText(t: TFunction<"users">, e: unknown): string {
   const err = e as Error & { code?: string };
   return err.code && t(`pool.errors.${err.code}`, { defaultValue: "" })
@@ -70,8 +81,24 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   const { t } = useTranslation("users");
   const [pool, setPool] = useState<AccountPool | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [adding, setAdding] = useState(false);
+  const [params, setParams] = useSearchParams();
+  // A profile's "Move to pool" (Settings → AI tools → Profiles) lands here.
+  const preset = (() => {
+    const tool = params.get("poolAdd");
+    const profile = params.get("poolProfile");
+    return (tool === "claude" || tool === "codex") && profile ? { tool, profile } : null;
+  })() as { tool: PoolTool; profile: string } | null;
+  const [adding, setAdding] = useState(() => isAdmin && preset !== null);
+  const closeAdd = () => {
+    setAdding(false);
+    if (!preset) return;
+    const next = new URLSearchParams(params);
+    next.delete("poolAdd");
+    next.delete("poolProfile");
+    setParams(next, { replace: true });
+  };
   const [removing, setRemoving] = useState<Row | null>(null);
+  const [editing, setEditing] = useState<Row | null>(null);
 
   const load = useCallback(
     (force = false) =>
@@ -94,13 +121,16 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   const th = "px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider";
 
   return (
-    <section className="card" data-testid="account-pool">
+    <section id="account-pool" className="card scroll-mt-24" data-testid="account-pool">
       <div className="flex flex-wrap items-center gap-2 px-5 py-4 border-b border-border">
         <KeyRound className="w-4 h-4 text-fg-muted" />
         <div className="flex-1 min-w-0">
           <h2 className="text-sm font-semibold text-fg-primary">{t("pool.title")}</h2>
           <p className="text-xs text-fg-muted">{t("pool.description")}</p>
         </div>
+        <Link to="/settings/agents#tool-profiles" className="btn-ghost text-xs">
+          {t("pool.profilesLink")}
+        </Link>
         <button
           type="button"
           onClick={refresh}
@@ -148,6 +178,16 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
                     <div className="text-[11px] text-fg-muted">
                       {t("pool.added", { at: formatDateTime(r.addedAt) })}
                     </div>
+                    {pool && pinsOf(pool, r.tool).some((p) => p.account === r.name) && (
+                      <div className="text-[11px] text-fg-secondary">
+                        {t("pool.pinned", {
+                          users: pinsOf(pool, r.tool)
+                            .filter((p) => p.account === r.name)
+                            .map((p) => p.username)
+                            .join(", "),
+                        })}
+                      </div>
+                    )}
                   </td>
                   <td className="px-5 py-2.5 text-sm text-fg-secondary">
                     {t(`pool.kind.${r.kind}`)}
@@ -188,7 +228,16 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
                     </div>
                   </td>
                   {isAdmin && (
-                    <td className="px-5 py-2 text-right">
+                    <td className="px-5 py-2 text-right whitespace-nowrap">
+                      <button
+                        type="button"
+                        onClick={() => setEditing(r)}
+                        title={t("pool.edit", { name: r.name })}
+                        aria-label={t("pool.edit", { name: r.name })}
+                        className="btn-icon"
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </button>
                       <button
                         type="button"
                         onClick={() => setRemoving(r)}
@@ -206,13 +255,13 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
           </table>
         </div>
       )}
-
       {adding && (
         <AddAccountDialog
-          onClose={() => setAdding(false)}
+          preset={preset}
+          onClose={closeAdd}
           onDone={(name) => {
             toast.success(t("pool.done.added", { name }));
-            setAdding(false);
+            closeAdd();
             void load();
           }}
         />
@@ -228,24 +277,185 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
           }}
         />
       )}
+      {editing && pool && (
+        <EditAccountDialog
+          pool={pool}
+          row={editing}
+          onClose={() => setEditing(null)}
+          onDone={(r) => {
+            const left = r.added.filter(
+              (u) => u.switched === "own-login" || u.switched === "expired"
+            );
+            toast.success(t("pool.editDone", { name: editing.name }));
+            for (const u of left) {
+              toast.info(
+                t(`pool.pinDone.${u.switched}`, { user: u.username, account: editing.name })
+              );
+            }
+            setEditing(null);
+            void load();
+          }}
+        />
+      )}
     </section>
   );
 }
 
-type ClaudeSource = "profile" | "credentials" | "token";
-
-function AddAccountDialog({
+/**
+ * One account's Edit: tick the users whose sessions run on it. A user already
+ * on another account of the tool moves here when ticked; unticking one sends
+ * them back to the least-used account. Saved in one request, password again.
+ */
+function EditAccountDialog({
+  pool,
+  row,
   onClose,
   onDone,
 }: {
+  pool: AccountPool;
+  row: Row;
+  onClose: () => void;
+  onDone: (r: Awaited<ReturnType<typeof api.accountPool.setUsers>>) => void;
+}) {
+  const { t } = useTranslation("users");
+  const pins = pinsOf(pool, row.tool);
+  const initial = pins.filter((p) => p.account === row.name).map((p) => p.userId);
+  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
+  const [chosen, setChosen] = useState<Set<number>>(() => new Set(initial));
+  const [current, setCurrent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.users
+      .list()
+      .then((r) => setUsers(r.users))
+      .catch(() => setUsers([]));
+  }, []);
+
+  const changed = chosen.size !== initial.length || initial.some((id) => !chosen.has(id));
+  const ready = changed && current.length > 0;
+  const toggle = (id: number, on: boolean) =>
+    setChosen((prev) => {
+      const next = new Set(prev);
+      if (on) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+
+  const submit = async () => {
+    if (!ready || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      onDone(await api.accountPool.setUsers(row.tool, row.name, [...chosen], current));
+    } catch (e) {
+      setError(errorText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <ConfirmModal
+      open
+      title={t("pool.edit", { name: row.name })}
+      message={t("pool.editHint")}
+      confirmLabel={t("pool.save")}
+      cancelLabel={t("common:cancel")}
+      destructive={false}
+      busy={busy}
+      disabled={!ready}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <div
+        className="mt-3 space-y-3"
+        onKeyDown={(e) => {
+          if ((e.target as HTMLElement).tagName === "INPUT" && isSubmitEnter(e)) {
+            e.preventDefault();
+            void submit();
+          }
+        }}
+      >
+        <div>
+          <span className="text-xs font-medium text-fg-secondary">{t("pool.users")}</span>
+          <div className="mt-1 max-h-56 overflow-y-auto rounded-md border border-border divide-y divide-border">
+            {users === null && (
+              <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.loadingUsers")}</p>
+            )}
+            {users?.length === 0 && (
+              <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.noUsers")}</p>
+            )}
+            {users?.map((u) => {
+              const elsewhere = pins.find((p) => p.userId === u.id && p.account !== row.name);
+              return (
+                <div key={u.id} className="px-3 py-2">
+                  <Checkbox
+                    checked={chosen.has(u.id)}
+                    onChange={(on) => toggle(u.id, on)}
+                    label={
+                      <span>
+                        {u.username}
+                        {u.disabled && (
+                          <span className="ml-1 text-fg-muted">({t("disabled")})</span>
+                        )}
+                        {elsewhere && (
+                          <span className="ml-1.5 text-[11px] text-fg-muted">
+                            {t("pool.onAccount", { account: elsewhere.account })}
+                          </span>
+                        )}
+                      </span>
+                    }
+                    labelClassName="text-sm text-fg-primary"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("yourPassword")}
+          />
+        </Field>
+        {error && (
+          <p role="alert" className="text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}
+
+type ClaudeSource = "profile" | "credentials" | "token";
+/** What each tool's pool account can come from (server/routes/accounts.js). */
+const SOURCES: Record<PoolTool, ClaudeSource[]> = {
+  claude: ["profile", "credentials", "token"],
+  codex: ["profile", "token"],
+};
+
+function AddAccountDialog({
+  preset,
+  onClose,
+  onDone,
+}: {
+  /** A saved profile to move in, from its "Move to pool" link. */
+  preset?: { tool: PoolTool; profile: string } | null;
   onClose: () => void;
   onDone: (name: string) => void;
 }) {
   const { t } = useTranslation("users");
-  const [tool, setTool] = useState<PoolTool>("claude");
+  const [tool, setTool] = useState<PoolTool>(preset?.tool ?? "claude");
   const [source, setSource] = useState<ClaudeSource>("profile");
   const [profiles, setProfiles] = useState<PoolProfile[] | null>(null);
-  const [profile, setProfile] = useState("");
+  const [profile, setProfile] = useState(preset?.profile ?? "");
   const [name, setName] = useState("");
   const [secret, setSecret] = useState("");
   const [current, setCurrent] = useState("");
@@ -253,13 +463,14 @@ function AddAccountDialog({
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    setProfiles(null);
     api.accountPool
-      .profiles()
+      .profiles(tool)
       .then((r) => setProfiles(r.profiles))
       .catch(() => setProfiles([]));
-  }, []);
+  }, [tool]);
 
-  const fromProfile = tool === "claude" && source === "profile";
+  const fromProfile = source === "profile";
   // A profile already names itself: its name is the default.
   const ready =
     current.length > 0 &&
@@ -270,10 +481,10 @@ function AddAccountDialog({
     setBusy(true);
     setError(null);
     const body: PoolAccountInput =
-      tool === "codex"
-        ? { tool, name: name.trim(), token: secret.trim() }
-        : source === "profile"
-          ? { tool, name: name.trim() || profile, profile }
+      source === "profile"
+        ? { tool, name: name.trim() || profile, profile }
+        : tool === "codex"
+          ? { tool, name: name.trim(), token: secret.trim() }
           : source === "credentials"
             ? { tool, name: name.trim(), credentials: secret.trim() }
             : { tool, name: name.trim(), token: secret.trim() };
@@ -312,29 +523,36 @@ function AddAccountDialog({
           <select
             className="input w-full text-sm"
             value={tool}
-            onChange={(e) => setTool(e.target.value as PoolTool)}
+            onChange={(e) => {
+              setTool(e.target.value as PoolTool);
+              setProfile("");
+              setSource("profile");
+            }}
             aria-label={t("pool.tool")}
           >
             <option value="claude">Claude Code</option>
             <option value="codex">Codex</option>
           </select>
         </Field>
-        {tool === "claude" && (
-          <Field label={t("pool.source")} hint={t(`pool.sourceHint.${source}`)}>
-            <select
-              className="input w-full text-sm"
-              value={source}
-              onChange={(e) => setSource(e.target.value as ClaudeSource)}
-              aria-label={t("pool.source")}
-            >
-              {(["profile", "credentials", "token"] as const).map((s) => (
-                <option key={s} value={s}>
-                  {t(`pool.sources.${s}`)}
-                </option>
-              ))}
-            </select>
-          </Field>
-        )}
+        <Field
+          label={t("pool.source")}
+          hint={t(`pool.sourceHint.${tool === "codex" && source === "token" ? "codex" : source}`)}
+        >
+          <select
+            className="input w-full text-sm"
+            value={source}
+            onChange={(e) => setSource(e.target.value as ClaudeSource)}
+            aria-label={t("pool.source")}
+          >
+            {SOURCES[tool].map((s) => (
+              <option key={s} value={s}>
+                {tool === "codex" && s === "token"
+                  ? t("pool.secret.codex")
+                  : t(`pool.sources.${s}`)}
+              </option>
+            ))}
+          </select>
+        </Field>
         {fromProfile && (
           <Field label={t("pool.profile")} hint={t("pool.profileHint")}>
             <select

client/src/components/users/MemberTmuxCard.tsx

@@ -1,6 +1,6 @@
 /**
  * @file MemberTmuxCard.tsx
- * @description The Users page's tmux card (one Linux user per account only,
+ * @description The Administration page's Server-tab tmux card (one Linux user per account only,
  * `GET /api/users/tmux`): each member's own tmux server — the version it runs
  * beside the installed one, its sessions, whether an agent of theirs is
  * working — so an admin sees who still runs an old tmux after an upgrade.

client/src/components/users/PasswordRules.tsx

@@ -0,0 +1,39 @@
+/**
+ * @file PasswordRules.tsx
+ * @description The checklist under a "new password" field the account picks
+ * for itself (Settings → Account, the first-login password change, an admin's
+ * own password on the Users page): each rule of `lib/passwordRules.ts`, ticked
+ * as the password typed passes it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useTranslation } from "react-i18next";
+import { Check, Circle } from "lucide-react";
+import { PASSWORD_MIN_LENGTH, PASSWORD_RULES, passwordProblems } from "../../lib/passwordRules";
+
+export function PasswordRules({ password, username }: { password: string; username?: string }) {
+  const { t } = useTranslation("users");
+  const failed = new Set(passwordProblems(password, username));
+  return (
+    <ul className="grid gap-x-4 gap-y-1 text-xs sm:grid-cols-2" data-testid="password-rules">
+      {PASSWORD_RULES.map((rule) => {
+        const ok = password.length > 0 && !failed.has(rule);
+        return (
+          <li
+            key={rule}
+            className={`flex items-center gap-1.5 ${ok ? "text-status-success" : "text-fg-muted"}`}
+            data-rule={rule}
+            data-ok={ok}
+          >
+            {ok ? (
+              <Check className="h-3.5 w-3.5 flex-shrink-0" />
+            ) : (
+              <Circle className="h-3 w-3 flex-shrink-0" />
+            )}
+            {t(`passwordRules.${rule}`, { min: PASSWORD_MIN_LENGTH })}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

client/src/components/users/UserEditDialog.tsx

@@ -2,7 +2,9 @@
  * @file UserEditDialog.tsx
  * @description The Users page's ONE account editor (admin only): profile
  * (display name, email), access (role, active/disabled — neither for your own
- * account), a new password (typed or generated, copyable), the workspaces the
+ * account), a new password (typed or generated, copyable — someone else's
+ * may be anything and makes them choose their own at next sign-in; your own
+ * must pass every rule of `lib/passwordRules.ts`), the workspaces the
  * account owns (remove, add from every workspace), and "sign out everywhere".
  * Every change is staged and sent as ONE `PATCH /api/users/:id` carrying only
  * what changed, confirmed with the admin's OWN password (`currentPassword`) —
@@ -20,6 +22,8 @@ import type { Lane } from "../../lib/types";
 import { fmtCost, formatDateTime } from "../../lib/format";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
+import { passwordProblems } from "../../lib/passwordRules";
+import { PasswordRules } from "./PasswordRules";
 import { useDialog } from "../../hooks/useDialog";
 import { Switch } from "../Switch";
 import { Checkbox } from "../Checkbox";
@@ -34,11 +38,15 @@ export const ROLE_BADGE: Record<Role, string> = {
 };
 
 /** A random password of `n` characters, no look-alikes (0/O, 1/l/I). */
-export function generatePassword(n = 16): string {
+export function generatePassword(n = 16, username?: string): string {
   const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789-_!@#%";
   const bytes = new Uint32Array(n);
-  crypto.getRandomValues(bytes);
-  return Array.from(bytes, (b) => chars[b % chars.length]).join("");
+  // Drawn again until it passes every rule, so it also fits an own password.
+  for (;;) {
+    crypto.getRandomValues(bytes);
+    const out = Array.from(bytes, (b) => chars[b % chars.length]).join("");
+    if (passwordProblems(out, username).length === 0) return out;
+  }
 }
 
 type OwnedWorkspace = { id: number; title: string; cwd: string };
@@ -110,8 +118,11 @@ export function UserEditDialog({
   if (removed.size) patch.removeWorkspaces = [...removed];
   if (signOut) patch.signOut = true;
   const changed = Object.keys(patch).length > 0;
-  // No minimum length (server/lib/auth.js) — a blank field keeps the password.
-  const ready = changed && current.length > 0 && !busy;
+  // A blank field keeps the password. Someone else's may be anything (they
+  // choose their own at next sign-in); your own must pass every rule.
+  const weakOwn =
+    self && password.length > 0 && passwordProblems(password, user.username).length > 0;
+  const ready = changed && current.length > 0 && !weakOwn && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -309,7 +320,10 @@ export function UserEditDialog({
           </Section>
 
           <Section title={t("edit.password")}>
-            <Field label={t("newPassword")} hint={t("edit.passwordHint")}>
+            <Field
+              label={t("newPassword")}
+              hint={self ? t("edit.ownPasswordHint") : t("edit.passwordHint")}
+            >
               <div className="flex gap-2">
                 <input
                   type={showPassword ? "text" : "password"}
@@ -343,7 +357,7 @@ export function UserEditDialog({
                   type="button"
                   className="btn-ghost whitespace-nowrap text-xs"
                   onClick={() => {
-                    setPassword(generatePassword());
+                    setPassword(generatePassword(16, user.username));
                     setShowPassword(true);
                   }}
                 >
@@ -351,6 +365,11 @@ export function UserEditDialog({
                 </button>
               </div>
             </Field>
+            {self && password.length > 0 && (
+              <div className="mt-2">
+                <PasswordRules password={password} username={user.username} />
+              </div>
+            )}
           </Section>
 
           <Section title={t("workspaces")}>

client/src/components/users/__tests__/AccountPoolCard.test.tsx

@@ -5,13 +5,15 @@
  * admin adds an account only with their own password typed (the token goes
  * in once and is not shown back) — a saved login moved in (the server's own
  * included), or a setup-token — and removes one the same way, and an analyst
- * sees no add or remove control.
+ * sees no add or remove control. An account's Edit ticks the users who run on
+ * it, saved with the admin's own password; the users show on the account.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
 import type { AccountPool } from "../../../lib/api";
 
 const accountPool = vi.hoisted(() => ({
@@ -19,14 +21,23 @@ const accountPool = vi.hoisted(() => ({
   add: vi.fn(),
   remove: vi.fn(),
   profiles: vi.fn(),
+  setUsers: vi.fn(),
 }));
+const users = vi.hoisted(() => ({ list: vi.fn() }));
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
-  return { ...actual, api: { accountPool } };
+  return { ...actual, api: { accountPool, users } };
 });
 
 import { AccountPoolCard } from "../AccountPoolCard";
 
+/** The card reads `?poolAdd=` and links to Settings: it needs a router. */
+const card = (isAdmin: boolean, url = "/admin") => (
+  <MemoryRouter initialEntries={[url]}>
+    <AccountPoolCard isAdmin={isAdmin} />
+  </MemoryRouter>
+);
+
 const POOL: AccountPool = {
   accounts: [
     {
@@ -66,6 +77,12 @@ const POOL: AccountPool = {
 beforeEach(() => {
   for (const fn of Object.values(accountPool)) fn.mockReset();
   accountPool.list.mockResolvedValue(POOL);
+  users.list.mockResolvedValue({
+    users: [
+      { id: 7, username: "mia", disabled: false },
+      { id: 8, username: "leo", disabled: false },
+    ],
+  });
   accountPool.profiles.mockResolvedValue({
     profiles: [
       {
@@ -82,7 +99,7 @@ beforeEach(() => {
 
 describe("AccountPoolCard", () => {
   it("lists every account, and explains an empty pool", async () => {
-    const { unmount } = render(<AccountPoolCard isAdmin={false} />);
+    const { unmount } = render(card(false));
     expect(await screen.findByText("team-1")).toBeInTheDocument();
     expect(screen.getByText("cx-1")).toBeInTheDocument();
     expect(screen.getByText("42%")).toBeInTheDocument();
@@ -93,14 +110,14 @@ describe("AccountPoolCard", () => {
     expect(screen.queryByRole("button", { name: /remove/i })).toBeNull();
     unmount();
     accountPool.list.mockResolvedValue({ accounts: [], codex: [], blockPercent: 90 });
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
     expect(await screen.findByText(/no accounts yet/i)).toBeInTheDocument();
   });
 
   it("moves a saved login in, the server's own included", async () => {
     accountPool.add.mockResolvedValue({ account: { name: "work" } });
     const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
     await screen.findByText("team-1");
     await user.click(screen.getByRole("button", { name: /add account/i }));
     const dialog = await screen.findByRole("dialog");
@@ -125,7 +142,7 @@ describe("AccountPoolCard", () => {
   it("adds a setup-token only with the admin's own password", async () => {
     accountPool.add.mockResolvedValue({ account: { name: "team-2" } });
     const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
     await screen.findByText("team-1");
     await user.click(screen.getByRole("button", { name: /add account/i }));
     const dialog = await screen.findByRole("dialog");
@@ -150,7 +167,7 @@ describe("AccountPoolCard", () => {
   it("removes an account with the admin's own password", async () => {
     accountPool.remove.mockResolvedValue({ ok: true });
     const user = userEvent.setup();
-    render(<AccountPoolCard isAdmin />);
+    render(card(true));
     await user.click(await screen.findByRole("button", { name: "Remove cx-1" }));
     await user.type(await screen.findByLabelText("Your password"), "boss-pass");
     await user.click(screen.getByRole("button", { name: "Remove" }));
@@ -158,4 +175,79 @@ describe("AccountPoolCard", () => {
       expect(accountPool.remove).toHaveBeenCalledWith("codex", "cx-1", "boss-pass")
     );
   });
+
+  it("sets who runs on an account from its Edit, with the admin's own password", async () => {
+    accountPool.list.mockResolvedValue({
+      ...POOL,
+      pins: {
+        claude: [
+          { userId: 8, username: "leo", account: "team-1" },
+          { userId: 7, username: "mia", account: "team-0" },
+        ],
+        codex: [],
+      },
+    });
+    accountPool.setUsers.mockResolvedValue({
+      added: [{ userId: 7, username: "mia", switched: "switched" }],
+      removed: [{ userId: 8, username: "leo" }],
+    });
+    const user = userEvent.setup();
+    render(card(true));
+    expect(await screen.findByText("Used by: leo")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /switch a user/i })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Edit team-1" }));
+    const dialog = await screen.findByRole("dialog");
+    const leo = await screen.findByRole("checkbox", { name: /leo/ });
+    const mia = screen.getByRole("checkbox", { name: /mia/ });
+    expect(leo).toHaveAttribute("aria-checked", "true");
+    expect(mia).toHaveAttribute("aria-checked", "false");
+    expect(screen.getByText("now on team-0")).toBeInTheDocument();
+    await user.click(mia);
+    await user.click(leo);
+    const save = Array.from(dialog.querySelectorAll("button")).find(
+      (b) => b.textContent === "Save"
+    )!;
+    expect(save).toBeDisabled();
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    await user.click(save);
+    await waitFor(() =>
+      expect(accountPool.setUsers).toHaveBeenCalledWith("claude", "team-1", [7], "boss-pass")
+    );
+  });
+
+  it("moves a saved Codex profile in, and opens on one from its Move to pool link", async () => {
+    accountPool.add.mockResolvedValue({ account: { name: "cx" } });
+    accountPool.profiles.mockImplementation(async (tool: string) =>
+      tool === "codex"
+        ? {
+            profiles: [
+              { name: "cx", label: "Codex", email: "c@x", subscriptionType: "plus", active: false },
+            ],
+          }
+        : { profiles: [] }
+    );
+    const user = userEvent.setup();
+    render(card(true, "/admin?poolAdd=codex&poolProfile=cx"));
+    const dialog = await screen.findByRole("dialog");
+    await waitFor(() => expect(accountPool.profiles).toHaveBeenCalledWith("codex"));
+    expect(screen.getByLabelText("Tool")).toHaveValue("codex");
+    await waitFor(() => expect(screen.getByLabelText("Profile")).toHaveValue("cx"));
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    const confirm = Array.from(dialog.querySelectorAll("button")).find(
+      (b) => b.textContent === "Add account"
+    )!;
+    await user.click(confirm);
+    await waitFor(() =>
+      expect(accountPool.add).toHaveBeenCalledWith(
+        { tool: "codex", name: "cx", profile: "cx" },
+        "boss-pass"
+      )
+    );
+  });
+
+  it("links back to the profiles in Settings", async () => {
+    render(card(false));
+    const link = await screen.findByRole("link", { name: "Profiles in Settings" });
+    expect(link.getAttribute("href")).toBe("/settings/agents#tool-profiles");
+  });
 });

client/src/components/workflows/LanePipelinePanel.tsx

@@ -17,6 +17,7 @@ import { api } from "../../lib/api";
 import { useLiveRefresh } from "../../hooks/useLiveRefresh";
 import { laneChangeMatcher } from "../../lib/laneChange";
 import type { PipelineStats } from "../../lib/types";
+import { copyText } from "../../lib/clipboard";
 
 /** Percentage of `n` out of `total`, 0 when nothing was recorded. */
 function pct(n: number, total: number): number {
@@ -160,7 +161,7 @@ export function LanePipelinePanel({
                     type="button"
                     data-testid={`pipeline-stat-command-${n.id}`}
                     title={t("lanes.copyCommand", { command: n.command })}
-                    onClick={() => void navigator.clipboard?.writeText(n.command || "")}
+                    onClick={() => void copyText(n.command || "")}
                     className="block max-w-full truncate font-mono text-[10px] text-fg-muted hover:text-accent"
                   >
                     {n.command}

client/src/hooks/usePrefersReducedMotion.ts

@@ -0,0 +1,27 @@
+/**
+ * @file usePrefersReducedMotion.ts
+ * @description The OS "reduce motion" preference, followed live. Its own
+ * module so a settings screen can read it without importing the pet overlay
+ * (`components/Sagi/Sagi.tsx`), whose chat and pane UI would otherwise be
+ * pulled into every page's first bundle.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+
+/** The OS "reduce motion" preference, followed live. */
+export function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+  );
+  useEffect(() => {
+    const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!mq) return;
+    const onChange = () => setReduced(mq.matches);
+    mq.addEventListener?.("change", onChange);
+    return () => mq.removeEventListener?.("change", onChange);
+  }, []);
+  return reduced;
+}

client/src/i18n/index.ts

@@ -115,6 +115,7 @@ export const i18nReady = i18n
       "splash",
       "lanes",
       "users",
+      "admin",
       "onboarding",
       "artifacts",
     ],