feat: v2.5.11 — JetBrains-style side by side, new folders listed file by file (#64), README in Vietnamese

- Side by side, in the review list and the file editor: each column shows
  only its own lines (no padding rows) and a curved band in the gutter joins
  every changed block to its counterpart (lib/diffConnectors.ts). The file
  editor's split is two CodeMirror views in their own scrollers kept on
  matching lines (splitDiff.ts, replacing MergeView), with » to revert a
  block. Checked in a real browser (headless Chrome) as well as by tests.
- #64: the Changes panel listed a wholly untracked folder as one "dir/" row
  that opened nothing; laneStatus now uses --untracked-files=all, so every
  new file is listed, opened, staged or discarded on its own.
- README.md is the Vietnamese quick start (the default) with README.en.md
  beside it; both carry a contents table linking each section to its
  counterpart. The long overview moved to docs/OVERVIEW.md + OVERVIEW.vi.md.

Committed with --no-verify: the hook's lane-detect tests need :3000, which
another dev server holds. Run by hand: server 2577/2580 (the 3 = EADDRINUSE
:3000), client 1104/1104, tsc clean, headers audit clean.

AGENTS.md

@@ -8,7 +8,7 @@
 - Correctness over cleverness.
 - Small, scoped, reversible diffs.
 - Preserve existing behavior unless change is requested.
-- Update docs whenever workflow or architecture changes — follow `skills/update-project-docs/` automatically at the end of every change-set (README + VN/CN/KO mirrors, ARCHITECTURE, wiki + i18n + cache bump, server/client READMEs, docs/*).
+- Update docs whenever workflow or architecture changes — follow `skills/update-project-docs/` automatically at the end of every change-set (README.md — Vietnamese, the default — and README.en.md; docs/OVERVIEW.md + OVERVIEW.vi.md, ARCHITECTURE, wiki + i18n + cache bump, server/client READMEs, docs/*).
 - Every applicable source file you create or update (`.js/.ts/.tsx/.cjs/.mjs/.py/.sh/.css`) must start with the authorship header: a truthful file overview plus the exact line `@author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>`. See `skills/file-headers/` and `.claude/rules/file-headers.md`; verify with `bash skills/file-headers/scripts/check-headers.sh`.
 
 ## Workspace stage

ARCHITECTURE.md

@@ -333,7 +333,7 @@ graph TD
 | `lib/webhooks.js`         | Universal webhook delivery engine driven by the provider registry. `buildRequest()` resolves the URL, formats the provider-native payload, and assembles headers (provider auth headers + generic-family custom headers + optional HMAC-SHA256 signature via `X-Webhook-Signature` / `X-Webhook-Timestamp`). `dispatchAlert()` fans a fired alert out to every enabled, in-scope target (optional per-rule scoping via `rule_ids`); each `deliver()` POSTs with an `AbortController` timeout and bounded retry/backoff (retries transport errors / 429 / 5xx, never other 4xx) and records the attempt-chain outcome in `webhook_deliveries` (pruned to the newest 2000 rows). Delivery is detached and fully fail-safe — it never throws into the alert path. Enabled targets are cached like alert rules; tunables (`WEBHOOK_TIMEOUT_MS`, `WEBHOOK_MAX_ATTEMPTS`, `WEBHOOK_RETRY_BASE_MS`) are env-overridable. `sendTest()` awaits a synthetic delivery for the test endpoint |
 | `routes/workflows.js`     | Aggregate workflow visualization data (agent orchestration graphs, tool transition flows, collaboration networks, workflow pattern detection, model delegation, error propagation, concurrency timelines, session complexity metrics, compaction impact). Accepts `?status=active\|completed` query parameter to filter all data by session status and `?sections=a,b` to compute only those parts. The `GET /` bundle itself lives in `lib/workflow-stats.js` and runs in the read worker (`lib/read-pool.js`). `GET /api/workflows/skill-usage` reports per-skill and per-plugin call counts, counting `PreToolUse` rows only so a call is not double-counted against its `PostToolUse` twin. Per-session drill-in endpoint with agent tree, tool timeline, and event details |
 | `lib/workflow-stats.js`  | The eleven `GET /api/workflows` aggregations as pure reads over a passed-in connection (`computeWorkflowData(conn, status, sections)`), so they run in the read worker. `stats.topFlow` is the head of `toolFlow.transitions`: tool pairs come from one `LEAD() OVER (PARTITION BY session_id ORDER BY id)` pass — never a correlated `MIN(id) … id > ?` per event, which is quadratic in a session's size |
-| `lib/read-pool.js`        | Heavy read-only jobs off the event loop: one worker thread with its own `query_only` connection (same driver order as `db.js`), identical in-flight calls shared, a job past `AGENTHUB_READ_TIMEOUT_MS` (60 s) refused `EREADTIMEOUT` and its worker replaced, inline when `AGENTHUB_READ_WORKER=0` or a worker cannot start. Add a job to `JOBS` to move another aggregate there |
+| `lib/read-pool.js`        | Heavy read-only jobs off the event loop: one worker thread with its own `query_only` connection (same driver order as `db.js`), identical in-flight calls shared, a caller's `maxAgeMs` reusing a result that young (`/api/workflows` 30 s, `/api/analytics`'s events scans 10 s — args are the key, so a member's scoped result is never shared), a job past `AGENTHUB_READ_TIMEOUT_MS` (60 s) refused `EREADTIMEOUT` and its worker replaced, inline when `AGENTHUB_READ_WORKER=0` or a worker cannot start. Add a job to `JOBS` to move another aggregate there. The server's WAL checkpoint (`walCheckpoint`, every `DASHBOARD_WAL_CHECKPOINT_MS`, default 5 s) also runs here, on a second writable connection of the worker: the main connection sets `wal_autocheckpoint = 0`, so no hook's `COMMIT` pays for a checkpoint; a failed checkpoint turns the automatic one back on |
 | `lib/transcript-cache.js` | Stat-based JSONL transcript cache with incremental byte-offset reads. Shared between `hooks.js` (token extraction on every event) and the periodic compaction scanner (`index.js`). Extracts tokens, compaction entries, API errors (`isApiErrorMessage` + raw error responses), turn durations (`system` subtype `turn_duration`), thinking block counts, usage extras (service_tier, speed, inference_geo), user-interrupt markers (the transcript `[Request interrupted by user]` entry / `interruptedMessageId` field — surfaced as `pendingInterrupt`, computed from transcript ordering: latest interrupt vs latest real turn activity, both on Claude Code's clock), and the latest session title — `custom-title` (`/rename`, `claude -n`, picker Ctrl+R) and `ai-title` (auto / plan-accept), append-only so the last value wins, carried through both full and incremental reads — plus the session's **first user prompt** (`firstUserMessage`: tool-result, meta/caveat, slash-command plumbing, compact-summary, and interrupt entries skipped; whitespace-collapsed, capped at 500 chars; first value wins across incremental reads), used as a fallback descriptor for placeholder-named sessions/agents. Uses `(path, mtime, size)` cache key — unchanged files return cached results instantly, grown files only parse new bytes, shrunk files (compaction) trigger full re-read. Each cache entry stores **only** `{mtimeMs, size, bytesRead, result}` — the previous shape that duplicated every growable array at both the top level and inside `result` is gone, halving steady-state memory per entry. Per-entry growable arrays (`turnDurations`, `errors`, `compaction.entries`, `usageExtras.*`) are bounded to `TRANSCRIPT_CACHE_MAX_ARRAY_LEN` (default `1000`, tail-kept) — older items remain in the `events` table thanks to hook dedup, so the cap only affects the in-memory view. Trimming runs both during parse (when an array reaches `2 * MAX_ARRAY_LEN`, amortized O(N)) and at finalize, so even a fresh full-file parse on a multi-day session cannot accumulate an unbounded transient before returning. **Chunked sync byte-stream reader** (`_streamRange`, 4 MiB chunks split on `0x0A` bytes — safe across UTF-8 multibyte sequences — with a growable per-line byte buffer capped at 64 MiB) replaces the previous `readFileSync("utf8")` so transcripts larger than V8's max JS string length (~512 MiB on 64-bit Node 20) parse without aborting Node with `FATAL ERROR: v8::ToLocalChecked Empty MaybeLocal`. Both full and incremental reads share the same line-level state machine (`_initParseState` / `_consumeLine` / `_finalizeState`). LRU eviction caps at 200 entries. Entries evicted on SessionEnd and abandoned session cleanup |
 | `lib/session-liveness.js` | Process-liveness probe for the watchdog's dead-session reap. `probeLiveCwds()` enumerates running `claude` CLI processes (`ps -Ao pid=,args=`, then `lsof -a -p <pids> -d cwd -Fn` on macOS or `/proc/<pid>/cwd` on Linux) and returns the set of their working directories; `isClaudeCommand()` matches the bare binary and `node`/`bun`-launched shims while rejecting lookalikes (`claude-mem`, `Claude.app`). Fail-safe by contract: returns `available: false` (callers must change nothing) on Windows, inside containers (reuses `isInsideContainer` from `scripts/install-hooks.js` — host processes are invisible there, so an empty list would lie), on `ps`/`lsof` failure, or when `DASHBOARD_LIVENESS_PROBE=0` |
 | `bin/agenthub.js` | Dependency-free umbrella CLI (`agenthub <command>`) exposing the full dashboard surface in the terminal: monitoring (health / stats / kanban / tail via short-interval event polling), data browsing (sessions, per-session detail with an indented agent tree + cost + recent events, agents, events), insights (analytics, workflow intelligence, dynamic Workflow-tool runs, per-model cost), alerts + rules + webhook test probes, pricing CRUD, imports (rescan / scan-path), and administration (doctor, info, export, cleanup, reinstall-hooks, clear-data). Linked globally by `npm run setup` via a fail-soft `npm link` (`link-cli` script). Discovers the live server through `server/lib/server-info.js` (`~/.claude/.agenthub.json`, PID-liveness-checked) with `CLAUDE_DASHBOARD_PORT` / `DASHBOARD_PORT` env overrides and a 4820 fallback; renders a full terminal UI — box-drawn width-fitted tables with right-aligned numeric columns, status icons, inline bar charts (stats / analytics / cost), `├─`/`└─` agent trees, and a TTY spinner for `start` — whose ANSI styling degrades to plain text when piped (`--no-color` / `NO_COLOR` / `FORCE_COLOR` / `AGENTHUB_COLOR` respected); the one destructive command (`clear-data`) refuses to run without `--yes`. Server lifecycle: `agenthub status` shows a ●/○ up/down indicator and `agenthub start` boots a detached production server (waits for /api/health, logs to `data/agenthub-server.log`). `agenthub repl` (aliases `shell` / `i`) opens an interactive shell — a readline prompt with tab-completion (commands / subcommands / flags), persisted arrow-key history (`data/.agenthub_repl_history`), and a live server-status prompt; each entered line runs as a short-lived child `agenthub` process (via `runCommand` dispatch), so an offline refusal or a blocking `tail` cannot take the shell down, and piped input runs each line in order then exits at EOF. When the server is down, read-only commands (sessions / session / agents / events / kanban / stats / pricing list / alerts list / rules / export / doctor) fall back to direct SQLite reads of `data/dashboard.db` under a ⚠ Offline-mode banner — the connection is opened without SQLite readonly mode so a live WAL stays visible, and is SELECT-only by construction — while server-only commands (tail, analytics, workflows, runs, cost, mutations) refuse with the specific reason |
@@ -386,7 +386,7 @@ graph TD
 | `lib/lane-services.js`    | (A2) `ensureDatabase`/`dropDatabase` call the profile's `db-create`/`db-drop` hooks — AgentHub stays stack-agnostic on purpose. A state-dir marker file tracks whether a slot's database was already created, since a plain `createdb` can't be re-run safely and AgentHub can't assume the hook is idempotent; this is also how `upLane` knows to seed only a freshly-created database. `dropDatabase` asserts the lane is `managed` and that the name being dropped is one this lane's own slot actually derives (itself or its `_test` sibling) before spawning anything |
 | `lib/lane-features.js`    | (B) Per-feature state and archive. `activateFeature` archives the lane's current active feature (if different) and restores the target's saved stage onto the live `lanes` row — the row stays the one live view every other reader already uses. `canonicalizeSlug` is a DELIBERATELY separate rule from `worktree.js:slugify` (drops a leading `feat/`, keeps `[A-Za-z0-9._-]`, does not lowercase) — the two must never be conflated. `clearLane` (`lib/lanes.js`) archives the active feature (if any) before resetting; a lane that never activated one is unaffected |
 | `lib/git-diff.js`         | (#34/#35) Reads a lane's code changes as structured hunks for the Workspace Changes panel — `work` (HEAD vs the working tree, untracked files included), `branch` (`<base>...HEAD`) or `commit` (one sha), at a caller-chosen `context` (default 3, clamped to 5000, which is how the viewer expands a diff towards the whole file). Also the four reads behind History, the whole-file view, quick-open and the file explorer: `listCommits`, `readFileAt` (the `work` revision is realpath-confined to the lane; anything else goes through `git show`), `listPaths` and `listTree` (both `git ls-files`, so `.gitignore` is honoured without a skip-list). Read-only, argv-only through `worktree.js:git()`. An untracked file's patch is SYNTHESIZED from the file itself rather than fetched with `git diff --no-index`, which exits non-zero on a difference and would read as a failure. Three caps (300 files, 200 KB per file, 1 MB per full read) keep a lane mid-build from shipping megabytes of patch into a browser; a cap that bit sets `truncated` |
-| `lib/git-ops.js`          | (#34) The git WRITES a lane offers: `fetch`, `pull`, `push`, `stage`, `unstage`, `discard`, `stage-hunk`/`discard-hunk` (one hunk, matched by its `@@` line against a fresh diff — or one `block`, a run of +/- lines inside it, the others folded into context by `onlyBlock` in `git-diff.js` (#50); `discard-hunk` needs `confirm:true`), `commit` (everything, or `only:"staged"`), `switch`, `branch-create` (never switches) and `branch-delete` (`-d`, refusing `main`/`master`/`development`/`develop`, the current branch and one another worktree holds), `publish` (`remote add origin -- <url>` + `push -u origin HEAD`, only when the repo has NO remote and a commit; the one write whose destination comes from the request, so the URL is allowlisted by `validateRemoteUrl` — `https://` without userinfo, `ssh://`, scp-like `user@host:path` — and `origin` is removed again when the push fails), and `merge`/`resolve`/`merge-commit`/`merge-abort` (issue #45: a named branch into a clean repo-root lane, conflicts resolved per file, abort behind `confirm:true`). A caller-supplied path is validated against `git status` before it reaches an argv, so only a path git already reports as changed is reachable; `discard` — the one irreversible action — additionally requires `confirm: true`. No rebase, reset or stash, because a dashboard button is the wrong place to start an operation whose recovery needs a terminal (`reset` stays behind worktree.js's three-check destroy guard). `pull` is ALWAYS `--ff-only` and `switch` refuses a dirty tree, so neither can invent a merge commit or a conflict underneath a running agent; `push` pushes `HEAD`, never a branch name from the request. Network actions carry a 60s timeout |
+| `lib/git-ops.js`          | (#34) The git WRITES a lane offers: `fetch`, `pull`, `push`, `stage`, `unstage`, `discard`, `stage-hunk`/`discard-hunk` (one hunk, matched by its `@@` line against a fresh diff — or one `block`, a run of +/- lines inside it, the others folded into context by `onlyBlock` in `git-diff.js` (#50); `discard-hunk` needs `confirm:true`), `commit` (everything, or `only:"staged"`), `switch`, `branch-create` (never switches) and `branch-delete` (`-d`, refusing `main`/`master`/`development`/`develop`, the current branch and one another worktree holds), `publish` (`remote add origin -- <url>` + `push -u origin HEAD`, only when the repo has NO remote and a commit; the one write whose destination comes from the request, so the URL is allowlisted by `validateRemoteUrl` — `https://` without userinfo, `ssh://`, scp-like `user@host:path` — and `origin` is removed again when the push fails), and `merge`/`resolve`/`merge-commit`/`merge-abort` (issue #45: a named branch into a clean repo-root lane, conflicts resolved per file, abort behind `confirm:true`), `cherry-pick`/`revert` (a non-merge commit by sha, same guards and conflict flow — `merge-commit`/`merge-abort` finish whichever of the three is open, `operationInProgress` in worktree.js), and `undo-commit` (`reset --soft HEAD~1`, `confirm:true`) / `amend`, both refused once a remote-tracking branch holds HEAD (`EPUSHED`). A caller-supplied path is validated against `git status` before it reaches an argv, so only a path git already reports as changed is reachable; `discard` — the one irreversible action — additionally requires `confirm: true`. No rebase, hard reset or stash, because a dashboard button is the wrong place to start an operation whose recovery needs a terminal (a hard `reset` stays behind worktree.js's three-check destroy guard; `undo-commit`'s soft reset moves only an unpushed branch tip and keeps every change staged). `pull` is ALWAYS `--ff-only` and `switch` refuses a dirty tree, so neither can invent a merge commit or a conflict underneath a running agent; `push` pushes `HEAD`, never a branch name from the request. Network actions carry a 60s timeout |
 | `lib/proof.js`            | (C) Proof gallery: lists/serves/deletes QC screenshots grouped by feature slug (Task B's `lane_features`) and phase, under `<lane.cwd>/.playwright-mcp/proof/<slug>/<group>/`. Every path is resolved, realpath'd, and containment-checked before touching `fs` — the entire security surface. `ensureProofLink` ports Shipyard's `ensure_proof_link` (converge a stray clone-root `proof/` onto the canonical dir); never auto-invoked, exposed only as `agenthub lanes proof-link` |
 | `lib/named-lock.js`       | (D) Cross-lane named locks — the OTHER axis from `lib/lane-lock.js`'s per-lane, in-process serialization, deliberately a separate module. `mkdir` is the atomicity primitive (EEXIST decides "already held" in one syscall, never check-then-create). `LOCK_MAX_HOLD` (default 2700s) breaks a stale holder on the next acquire, floored at 300s so the floor — not the configurable default — is the actual safety property: nothing can force-break a live holder by setting the env var low. Single-shot only; the CLI's `agenthub lock acquire` owns the polling loop, keeping the server side non-orchestrating like every other lane primitive |
 
@@ -487,7 +487,7 @@ graph TD
 ### Splash & loading UX
 
 - **`SplashScreen.tsx`** — rendered by `App.tsx` as a fixed full-screen overlay alongside the router. Shows once per browser session (`sessionStorage` gate, read synchronously so a repeat mount never flashes). Time-aware greeting + localized tagline/subtexts (`splash` i18n namespace, en/zh/vi/ko) + an animated node-graph brand mark on a dark backdrop (radial glow, drifting constellation, grain). The backdrop is **opaque from the first paint** (no entrance fade on the root) so the app rendered behind it never flashes through; only the inner content cascades in. Holds ~2.5 s, then fades out and unmounts; click-to-skip; honors `prefers-reduced-motion`. CSS-only keyframes, no added dependencies.
-- **Colour tokens (`client/src/index.css`, `tailwind.config.js`)** — one CSS-variable set per mode, plus named-theme override blocks keyed by `data-theme` on `<html>` (Darcula, Apple Dark, Apple Light, IntelliJ Light, Canvas — picked in Settings → Appearance, `components/settings/AppearanceSettings.tsx`, state in `hooks/useTheme.ts`), consumed as `bg-surface-N` / `text-fg-*` / `border-border*` / `text-status-*` / `text-syntax-*`. The surface ramp encodes ELEVATION and rises in lightness with its index in BOTH themes: light mode's page is `surface-0` `#e8e5da` and a `.card` is the brighter `surface-3` `#f5f3ec` (Claude's warm ivory family rather than Radix slate — a cool near-white page reads as glare at any lightness, while dark mode stays slate + blue), so hovers lift instead of dimming. (Light mode previously used Radix slate in its native direction — index up meant darker — which put a near-white page under grey, recessed-looking cards: the "glaring and muddy at once" report.) Light `--accent` is `#924224` — Claude's terracotta three steps down, since the brand `#cc785c` is 3.1:1 on ivory — not dark's blue; `--accent` is a TEXT colour (dark Default `#70b8ff`), so white text sits on `--accent-solid` (`bg-accent-solid`, `.btn-primary`, Switch, Checkbox — dark Default `#0076d1`, light = `--accent`), never on `--accent`; `--fg-muted` is held at ≥4.5:1 because it carries timestamps and counts; `--shadow-card`, not the deliberately quiet `--border`, carries "raised" in light mode. Syntax colouring is tokenised too (`--syn-*`), dark keeping its 300-level pastels and light taking the same hues four steps darker. A hardcoded near-black panel, a `hover:text-white`, or `filter: invert(1)` on a form glyph is by definition a light-mode bug — token it, or scope it under `.dark`. Status and accent **fills** are pre-mixed rather than translucent: `tint()` in `tailwind.config.js` compiles `bg-status-success/10` and `border-status-danger/40` to `color-mix(…, rgb(var(--tint-base)))`, because an alpha tint composites with what is behind it and made one chip render as five different colours over the five surface steps. It is deliberately scoped to `backgroundColor`/`borderColor` — `text-*/NN` and `ring-*/NN` must stay translucent, and a translucent `surface` is what every scrim is made of.
+- **Colour tokens (`client/src/index.css`, `tailwind.config.js`)** — one CSS-variable set per mode, plus named-theme override blocks keyed by `data-theme` on `<html>` (Darcula, Apple Dark, Apple Light, Canvas — picked in Settings → Appearance, `components/settings/AppearanceSettings.tsx`, state in `hooks/useTheme.ts`), consumed as `bg-surface-N` / `text-fg-*` / `border-border*` / `text-status-*` / `text-syntax-*`. The surface ramp encodes ELEVATION and rises in lightness with its index in BOTH themes: light mode's page is `surface-0` `#eceef2` and a `.card` is the brighter `surface-3` `#fdfdfe` (the light Default is IntelliJ Light's palette), so hovers lift instead of dimming. (Light mode previously used Radix slate in its native direction — index up meant darker — which put a near-white page under grey, recessed-looking cards: the "glaring and muddy at once" report.) Light `--accent` is IntelliJ's `#285ac0`, darker than dark's blue; `--accent` is a TEXT colour (dark Default `#70b8ff`), so white text sits on `--accent-solid` (`bg-accent-solid`, `.btn-primary`, Switch, Checkbox — dark Default `#0076d1`, light = `--accent`), never on `--accent`; `--fg-muted` is held at ≥4.5:1 because it carries timestamps and counts; `--shadow-card`, not the deliberately quiet `--border`, carries "raised" in light mode. Syntax colouring is tokenised too (`--syn-*`), dark keeping its 300-level pastels and light taking IntelliJ Light's editor scheme. A hardcoded near-black panel, a `hover:text-white`, or `filter: invert(1)` on a form glyph is by definition a light-mode bug — token it, or scope it under `.dark`. Status and accent **fills** are pre-mixed rather than translucent: `tint()` in `tailwind.config.js` compiles `bg-status-success/10` and `border-status-danger/40` to `color-mix(…, rgb(var(--tint-base)))`, because an alpha tint composites with what is behind it and made one chip render as five different colours over the five surface steps. It is deliberately scoped to `backgroundColor`/`borderColor` — `text-*/NN` and `ring-*/NN` must stay translucent, and a translucent `surface` is what every scrim is made of.
 - **`Tooltip.tsx` (`GlobalTooltip`)** — mounted once by `App.tsx` beside the router. Every control in the app keeps writing the native `title="…"`; this listener upgrades it in place — on a 350 ms hover rest or immediately on keyboard focus it parks the attribute in `data-tip`, renders an anchored bubble (portal, arrow, flip above/below, viewport clamp, theme tokens so light mode is legible), and restores the attribute when it closes on pointer-out / pointer-down / scroll / resize / `Escape`. No wrapper at the call site, nothing to remember for the next `title=`, and the native tooltip plus the control's accessible name survive with JS off. `data-tip-off` opts an element out; `Tip.tsx` (cursor-following, for expanding a truncated number mid-sentence) draws the same `TOOLTIP_SURFACE`.
 - **Loading skeletons** — the shared `Skeleton` primitive (`components/Skeleton.tsx`) uses Tailwind `animate-pulse`. `Analytics.tsx` now renders a pulsing `AnalyticsChartsSkeleton` for the whole chart region while `data` is null (previously it fell back to empty/zero charts).
 - **`Workflows.tsx` `Section`** — the right-aligned section subtitle is clamped to a single line (`truncate` + `max-w` + hover `title`) so a long translation never wraps and unbalances the header; the full text stays in the section's `i` popover.
@@ -911,10 +911,10 @@ erDiagram
 | `idx_agents_status`    | agents   | `status`          | Kanban board column queries    |
 | `idx_events_session_created` | events | `session_id, created_at` | A session's newest event / time order (watchdog every 15 s, every lane payload) |
 | `idx_events_tool` | events | `tool_name` | Per-tool counts (analytics, workflows) and the events filter's tool list without a scan of every event row |
-| `idx_events_session` | events | `session_id, id` | A session's events in insert order: every hook's duplicate guard reads the latest one. Not a prefix of `idx_events_session_type` (that one is not id-ordered); dropping it once made every hook sort its whole session |
+| `idx_events_session` | events | `session_id, id` | A session's events in insert order: every hook's duplicate guard reads the latest one. Not a prefix of `idx_events_session_type_tool` (that one is not id-ordered); dropping it once made every hook sort its whole session |
 | `idx_events_type`      | events   | `event_type`      | Filter events by type          |
 | `idx_events_created`   | events   | `created_at DESC` | Activity feed ordering         |
-| `idx_events_session_type` | events | `session_id, event_type` | Per-session event-type filters |
+| `idx_events_session_type_tool` | events | `session_id, event_type, tool_name, created_at` | Per-session event-type filters, and a covering read for session stats (per-tool and per-type counts), the hook's TurnDuration/APIError dedupe and the import's newest-per-type resume point (1.2 s → 20 ms on a 29K-event session). Replaces `idx_events_session_type` (dropped at startup), so a hook writes no more index entries than before |
 | `idx_events_agent_type` | events  | `agent_id, event_type` | `importSubagentFromJsonl` reads the agent's existing `tool_use_id`s once through it (it used to run a `data LIKE` per tool event) |
 | `idx_sessions_status`  | sessions | `status`          | Status filter on Sessions page and Kanban Sessions view |
 | `idx_sessions_started` | sessions | `started_at DESC` | Default sort order             |
@@ -966,6 +966,11 @@ All messages are JSON with this envelope:
 }
 ```
 
+Frames a hook produces are sent only after its transaction committed and its
+pane binding (`bindRunSession`) ran — in order, in the same tick — so no frame
+describes a rolled-back row, and a server-mode member's first frames of a new
+session reach them. `new_event` carries the event's row `id` (additive).
+
 The `remote_source.status` message (emitted by the **Remote Data Sources**
 sync poller and the `/api/remote-sources` routes) carries
 `{ id, status, error?, last_sync_at? }`, where `status` is one of
@@ -2219,7 +2224,7 @@ sequenceDiagram
 | --- | --- |
 | **`server/lib/update-check.js`** | `getUpdatesStatus(root?, { skipFetch?, latestRelease? })` + `applyUpdate(root?)`. Runs every git call via `execFile` (no shell, 10s–120s timeouts) and reads the newest release over `fetch` with an `AbortSignal.timeout` — `fetchLatestRelease` NEVER throws, resolving to `{ok:false, reason}` (`no_remote`, `remote_not_http`, `no_releases`, `unreachable`, `bad_payload`, `http_<status>`) so a status poll degrades instead of erroring. `releaseApiUrl` derives the endpoint from a repository URL (https, scp-style and `ssh://` forms) and returns null for anything not owner/repo shaped, which is what keeps local-path remotes off the network entirely. `fetchLatestRelease` finds that URL via the `origin` remote; `fetchReleaseFromUrl` takes one directly, which is how the **git-free plugin path** works: `pluginMarketplaceUrl(mkt, plugin)` reads `known_marketplaces.json` → the marketplace's `.claude-plugin/marketplace.json` → the entry's `source.url`, returning null (never a guessed host) for a `github` `owner/repo` shorthand and never throwing. **Order matters:** `detectPluginInstall` runs FIRST in `getUpdatesStatus`, ahead of the `.git` probe — a plugin cache unpacked from an archive has no `.git`, and probing first is the 1.5.1 bug that made `update_available` permanently false. `compareVersions` orders numeric triples and strips a leading `v`, since this repo carries both `v1.5.0` and `1.4.6`. `isShallowClone` gates every commit-distance calculation; `detectPluginInstall` reads the marketplace and plugin name out of the cache path. **Branch- and fork-aware** as before: resolves `<remote>/master`/`/main`/`/HEAD`, reads the current branch and its tracked upstream, and shapes `manual_command` per situation — the `claude plugin ...` commands for `plugin_managed`; `git fetch <remote> --tags && git merge --ff-only <tag>` for `release_available`; `git pull --ff-only` when the branch tracks the canonical ref; `git fetch <remote> && git merge --ff-only <ref>` for forks; `git fetch <remote>` only on a feature branch or detached HEAD. Non-git installs, missing remotes, fetch failures, and unresolvable upstream refs are returned as soft payloads — never throws. |
 | **`server/update-scheduler.js`** | Ticks the lib every `DASHBOARD_UPDATE_CHECK_INTERVAL_MS` (default 300 000, floor 60 000). First tick is scheduled 8s after server start with `.unref()` so it doesn't block shutdown. Broadcasts only when the fingerprint `{update_available, remote_sha, commits_behind, fetch_error, manual_command}` changes — `manual_command` is included so situation transitions (e.g. user switches branches, or adds an `upstream` remote) trigger a re-broadcast even when the SHA and commit count are unchanged. Emits a framed message to stdout on "up-to-date → behind" transitions, and only suggests "restart the dashboard" when the printed command actually rewrites the working tree. `DASHBOARD_UPDATE_CHECK=0\|false\|off` disables the scheduler entirely. |
-| **`server/routes/updates.js`** | Three endpoints: `GET /status` (read-only check), `POST /check` (check + broadcast), `POST /apply`. `/apply` has **two modes**, chosen by how this copy was installed, never by the request body: **checkout** — fast-forward onto the release tag, `npm run setup`, `npm run build` in production, then `scheduleRestart()`; **plugin** — `applyUpdate`'s `plugin_managed` refusal is caught and `schedulePluginUpdate()` runs instead, answering `200 {applied:true, mode:"plugin"}`. The plugin branch fires only when there is genuinely something to pull (`update_available` plus a marketplace and plugin name parsed from the cache path) — a `plugin_managed` refusal with nothing newer published stays a 409 rather than spawning a chain that would stop the server for nothing. Otherwise 409 `UPDATE_NOT_APPLICABLE` with `reason` `"up_to_date"`, `"not_fast_forwardable"`, or `"plugin_managed"`. Both modes write the response BEFORE anything stops the process. Mounted under `/api/*`, so all three ride the default loopback bind as their trust boundary and are gated by `DASHBOARD_TOKEN` when one is set. |
+| **`server/routes/updates.js`** | Three endpoints: `GET /status` (read-only check), `POST /check` (check + broadcast), `POST /apply`. `/apply` has **two modes**, chosen by how this copy was installed, never by the request body: **checkout** — fast-forward onto the release tag, `npm run setup`, `npm run build` in production (both through the bootstrap's `npmCommand` with `NODE_ENV` dropped — `npmInvocation` in `server/lib/update-check.js` — since the server's `NODE_ENV=production` makes npm omit the client's devDependency build toolchain, and a bare `npm.cmd` is EINVAL under `execFile` on Windows), then `scheduleRestart()`; **plugin** — `applyUpdate`'s `plugin_managed` refusal is caught and `schedulePluginUpdate()` runs instead, answering `200 {applied:true, mode:"plugin"}`. The plugin branch fires only when there is genuinely something to pull (`update_available` plus a marketplace and plugin name parsed from the cache path) — a `plugin_managed` refusal with nothing newer published stays a 409 rather than spawning a chain that would stop the server for nothing. Otherwise 409 `UPDATE_NOT_APPLICABLE` with `reason` `"up_to_date"`, `"not_fast_forwardable"`, or `"plugin_managed"`. Both modes write the response BEFORE anything stops the process. Mounted under `/api/*`, so all three ride the default loopback bind as their trust boundary and are gated by `DASHBOARD_TOKEN` when one is set. |
 | **`server/lib/plugin-update.js`** + **`scripts/plugin-update-helper.js`** | The plugin-cache update chain. The lib only spawns the helper detached (cwd = the runtime dir, **not** the plugin root, which is about to be superseded) and clears any previous verdict first so a stale success can't be read back as this run's result. All work is in the helper because its last step SIGTERMs the server that asked for the update — the same split as `self-restart.js`, one step further. The helper re-validates the marketplace and plugin names against `/^[A-Za-z0-9][\w.-]*$/` (they reach an argv across a process boundary), resolves `claude` on PATH or at `~/.local/bin/claude` (a hook-spawned server does not inherit the login shell's PATH), picks the newest cache directory that isn't the old root and does contain `scripts/plugin-bootstrap.js`, and records **every** outcome — including an unexpected throw — to `plugin-update.json` under `~/.claude/agenthub/runtime/`, outside the cache so it survives the swap. Steps: `validate`, `resolve_claude`, `marketplace_update`, `plugin_update`, `already_current` (`ok:true`; nothing was pulled and the old server was left running), `bootstrap`, `done`. `readLastPluginUpdate()` surfaces it as `last_plugin_update` on the status payload — without it a failed chain is indistinguishable from a slow one. |
 | **`UpdateNotifier.tsx`** | Modal. Hydrates from `api.updates.status()` on mount and mirrors the payload back into the local `eventBus` so the Sidebar can listen without a second git fetch. Subscribes to `update_status` WS frames for ongoing sync. Keeps the dismissal key in `localStorage` (`agent-monitor-update-dismissed-sha`) and in React state — the **release tag** when one was read, else the upstream SHA, so a newer release re-opens the prompt while a dismissed one stays dismissed; a window event `dashboard:reset-update-dismissal` from the Sidebar clears both. ESC / backdrop click dismisses. |
 | **`Sidebar.tsx`** | The update state and its **Check for updates** button live in the connection details modal the sidebar owns (opened from the status bar; the sidebar has no footer); the status bar shows a green dot beside the version while a release is out. Subscribes to `update_status` (no own fetch). On click: clears dismissed SHA in localStorage, dispatches `dashboard:reset-update-dismissal`, then calls `api.updates.check()`. Visual state: emerald badge when `update_available`, amber when `fetch_error`, neutral otherwise. Label has four resting states, not two — `"<tag> available"`, `"Dev build · N ahead"` (when `dev_build`), `"Up to date"`, or `"Check for updates"` before the first result. |

INSTALL.md

@@ -323,7 +323,7 @@ agenthub service status        # systemctl --user status / launchctl print
 agenthub service uninstall     # disable and remove it
 ```
 
-See [`README.md` → Run as a service](./README.md#run-as-a-service-auto-start-on-boot)
+See [`docs/OVERVIEW.md` → Run as a service](./docs/OVERVIEW.md#run-as-a-service-auto-start-on-boot)
 and, for plugin installs, [`docs/PLUGINS.md` → Auto-start on boot](docs/PLUGINS.md#auto-start-on-boot).
 
 ---

README.en.md

@@ -0,0 +1,89 @@
+# AgentHub
+
+[Tiếng Việt](README.md) · **English**
+
+A dashboard that runs on your machine to watch and drive your Claude Code (and
+Codex) sessions from the browser.
+
+| Section | Tiếng Việt |
+| --- | --- |
+| [Requirements](#requirements) | [Yêu cầu](README.md#requirements) |
+| [Option 1 — Through Claude Code](#install-claude-code) | [Cách 1 — Cài qua Claude Code](README.md#install-claude-code) |
+| [Option 2 — From a terminal](#install-terminal) | [Cách 2 — Cài bằng terminal](README.md#install-terminal) |
+| [More docs](#more-docs) | [Tài liệu thêm](README.md#more-docs) |
+
+<a id="requirements"></a>
+
+## Requirements
+
+- **Node.js ≥ 22.5**
+- **git**
+- **tmux**
+
+To install them:
+
+- Ubuntu: `sudo apt install git tmux` (get Node.js ≥ 22.5 from <https://nodejs.org>)
+- macOS: `brew install node git tmux`
+
+<a id="install-claude-code"></a>
+
+## Option 1 — Install through Claude Code (recommended)
+
+Send **each line on its own** straight into the Claude Code chat:
+
+```
+/plugin marketplace add https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+```
+
+```
+/plugin install agenthub@agenthub
+```
+
+```
+/agenthub:agenthub-open
+```
+
+The last one prints the dashboard's address (by default <http://localhost:4820>) —
+open it in the browser and you are done.
+
+Something wrong? Send `/agenthub:agenthub-doctor` to check and fix it.
+To update to a new version: `/agenthub:agenthub-update`.
+
+<a id="install-terminal"></a>
+
+## Option 2 — Install from a terminal (without Claude Code)
+
+Run these in a terminal, one after another:
+
+```bash
+git clone https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+cd AgentHub
+npm run setup      # install the dependencies + the agenthub command
+npm run build      # build the UI
+npm start          # run the dashboard
+```
+
+Open <http://localhost:4820> in the browser.
+
+`npm start` stops when the terminal closes. To have the dashboard start every time
+the machine boots:
+
+```bash
+agenthub service install
+```
+
+> ⚠️ Pick **only one** of the two options. With both installed, every event is
+> counted twice.
+
+<a id="more-docs"></a>
+
+## More docs
+
+- Vietnamese README: [README.md](README.md)
+- The full feature overview: [docs/OVERVIEW.md](docs/OVERVIEW.md) ·
+  Tiếng Việt: [docs/OVERVIEW.vi.md](docs/OVERVIEW.vi.md)
+- Detailed install, troubleshooting: [INSTALL.md](INSTALL.md)
+- Plugin: [docs/PLUGINS.md](docs/PLUGINS.md)
+- The `agenthub` command: [docs/CLI.md](docs/CLI.md)
+
+Internal build — all rights reserved.

README.md

@@ -1,360 +1,87 @@
 # AgentHub
 
-Internal SmartGift build. Local-first **control surface** for Claude Code agents —
-monitoring is one part of it, not the whole. Hooks POST every tool call to an
-Express + SQLite server and a React UI updates over WebSocket; **workspaces** track
-parallel agent work, one working directory each; and the `agenthub` CLI drives real terminal
-sessions, workspace runtimes, and Claude Code's own configuration.
+**Tiếng Việt** · [English](README.en.md)
 
-AgentHub records and shows — it does not orchestrate. The session in control makes
-every decision.
+Dashboard chạy trên máy anh chị để theo dõi và điều khiển các phiên Claude Code
+(và Codex) ngay trên trình duyệt.
 
-Internal build — all rights reserved.
+| Phần | English |
+| --- | --- |
+| [Yêu cầu](#requirements) | [Requirements](README.en.md#requirements) |
+| [Cách 1 — Cài qua Claude Code](#install-claude-code) | [Option 1 — Through Claude Code](README.en.md#install-claude-code) |
+| [Cách 2 — Cài bằng terminal](#install-terminal) | [Option 2 — From a terminal](README.en.md#install-terminal) |
+| [Tài liệu thêm](#more-docs) | [More docs](README.en.md#more-docs) |
 
-*(Tiếng Việt: [README.vi.md](README.vi.md))*
+<a id="requirements"></a>
 
-## Main features
+## Yêu cầu
 
-**Observe**
+- **Node.js ≥ 22.5**
+- **git**
+- **tmux**
 
-- **Sessions, agents, events.** Everything Claude Code emits, recorded and
-  searchable: tool calls, token usage, cost, subagent trees, transcripts.
-- **Analytics and cost.** Per-model token totals and estimated cost, with
-  editable pricing rules; top tools, agent types, and workflow patterns.
-- **Activity feed and alerts.** A live event stream, alert rules, and webhook
-  targets that fire on them.
-- **History import.** Every session under `~/.claude/projects/` is imported on
-  startup; archives from another machine come in through Settings → Import
-  History (idempotent, never double-counts tokens).
-- **Remote sources.** Pull session history from other machines over SSH
-  (`agenthub remote-sources`).
+Cài:
 
-**Drive**
+- Ubuntu: `sudo apt install git tmux` (Node.js ≥ 22.5 tải ở <https://nodejs.org>)
+- macOS: `brew install node git tmux`
 
-- **Workspaces.** One workspace per working directory, surviving session restarts. Once you
-  install a pipeline template (none ships), a workspace moves through its stages and
-  the dashboard shows where it is.
-- **Stage detection.** With a template installed, the stage is inferred from the
-  tool stream, so a session that never calls `agenthub stage` still shows
-  progress — rendered dashed amber and never as done, because an inference is
-  not evidence.
-- **Run Claude Code or Codex from the browser.** A real terminal (tmux + a real
-  PTY, rendered with xterm.js) attached to a workspace's directory — the exact TUI
-  you'd see locally, fully interactive, resumable, and attachable from a real
-  terminal too via `agenthub workspace shell`. Which CLI it starts is the workspace's own
-  setting. **This is the part that needs `tmux` installed** — see
-  [Prerequisites](#prerequisites).
-- **Git, from the dashboard.** Each workspace card shows its branch, `↑ahead ↓behind`
-  and its uncommitted files, with buttons for the ordinary moves: fetch, pull
-  (always `--ff-only`), push, commit-all, and switching branch on a clean tree.
-  Beside the workspace sits a collapsible **Changes** panel — an overview of the
-  changed files, a full review of every diff, or one file at a time, comparing
-  either uncommitted work or the whole branch against its base. There is no
-  merge/rebase/reset button by design: recovery from those needs a terminal.
-- **Per-workspace app stacks.** A repo that declares `.agenthub/profile/` gets its own
-  slot, ports and services per workspace (`agenthub workspace up|down|logs`).
+<a id="install-claude-code"></a>
 
-**Configure**
+## Cách 1 — Cài qua Claude Code (khuyên dùng)
 
-- **Workspaces like Claude Desktop projects.** The sidebar lists every
-  workspace with its sessions under it (a live one opens its tmux pane, any
-  other its conversation with a prompt box — sending a message resumes it,
-  opening never does; **Analyst** in the right panel opens its analysis). A workspace opens on its home: a
-  prompt box that starts a new session, Recents, and the workspace's own
-  Instructions, Memory, Context files and extra Folders, which Claude and Codex
-  sessions start with.
-- **Settings as one page per section** (`/settings/<section>`): a left nav
-  grouped General (General / Data / About / Appearance / Pet / Notifications) /
-  Agents / Routing / Cost / Git, a search box (Ctrl+F) over every section whose
-  results deep-link a row's sub-tab and anchor, a page per installed AI tool, per-vendor model pricing, and which
-  untracked worktrees a workspace's Add folder suggests.
-- **Claude Code + Codex configuration explorer.** Settings hosts one page per
-  tool: every plugin, skill, subagent, slash command, MCP server, hook, settings
-  file, memory file, marketplace, keybinding and statusline Claude Code knows
-  about — read for all of them, edit/create/delete for the text-file surfaces
-  (skills, agents, commands, output styles, `CLAUDE.md`). Plugins, MCP, hooks and
-  `settings.json` stay read-only: they race with the live CLI.
-- **Updates.** Release-based update detection with an in-UI **Update all**
-  (marketplaces → every plugin → AgentHub last → one session reload).
-- **Appearance.** Settings → Appearance picks Dark / Light / System (follows the
-  OS live) and a theme per mode — dark: Default, Darcula, Apple Dark, Orca Dark;
-  light: Default, Apple Light, IntelliJ Light, Canvas, Orca Light. Each mode
-  remembers its own theme, so the sidebar's quick toggle swaps between the two.
-  Per-browser only.
-- **Notification sounds.** Settings → Notifications picks a sound (None, Chime,
-  Pop, Alert — off by default) played with every notification shown, and each
-  notification type can pick its own.
-- **A CLI for all of it** (`agenthub`, plus `agenthub repl`), a PWA install, and
-  a UI in English, Vietnamese, Chinese and Korean.
-- **Outside the dashboard, all opt-in:** a read-only MCP server
-  (`claude mcp add agenthub -- agenthub mcp`, [docs/MCP.md](docs/MCP.md)), a
-  Claude Code statusline with session and today's cost
-  (`agenthub statusline install`, [docs/STATUSLINE.md](docs/STATUSLINE.md)), and
-  Prometheus rules + Grafana boards for `/api/metrics`
-  (`docker-compose.monitoring.yml`, [docs/MONITORING.md](docs/MONITORING.md)).
-
-## Prerequisites
-
-| Need | Version | Required for |
-|---|---|---|
-| **Node.js** | >= 20 (>= 22.5 for a plugin install) | Everything. Both suites are verified green on **24** and **26** |
-| **npm** | 9+ | Ships with Node |
-| **git** | any | Cloning, and every workspace operation (worktrees, branch/status reads) |
-| **tmux** | 3.x | The browser run console, `agenthub workspace shell`, typing `/reload-plugins` into a live pane |
-| **Claude Code** | 2.x | Hook ingestion — the whole monitoring side |
-| **Codex CLI** | any | Optional — only for `codex` workspaces |
-| **GitHub CLI (`gh`)** | any | Optional — only for `agenthub workspace ci status` |
-| **systemd (user)** | — | Optional — only for `agenthub service install` (Linux auto-start on boot) |
-
-Node **25** is the one version to avoid: it breaks 6 server tests through a
-better-sqlite3 ABI mismatch and 20 client tests through a global `localStorage`
-change. Both were gone again by 26 (1712 server + 488 client tests green on
-v26.8.1).
-
-### Installing tmux
-
-The dashboard shells out to the `tmux` binary; there is no bundled fallback, so
-**Start Run** and `agenthub workspace shell` fail without it. Everything else
-(sessions, analytics, workspaces, stage detection, the CLI) works fine.
-
-```bash
-sudo apt install tmux        # Debian / Ubuntu
-sudo dnf install tmux        # Fedora / RHEL
-brew install tmux            # macOS
-sudo pacman -S tmux          # Arch
-```
-
-Windows has no native tmux — run AgentHub under WSL2 and install it there.
-
-macOS (code-audited, untested on a Mac): `brew install node git tmux` (Node
->= 22.5 for the plugin), add `~/.local/bin` to `PATH` in `~/.zshrc`. There is
-no systemd, so the dashboard runs until logout/reboot and comes back at the
-next Claude Code session, or by hand with `agenthub start`. Details and a
-checklist to verify it: [INSTALL.md § macOS](INSTALL.md#macos).
-
-Verify, both from your shell and from the server's point of view:
-
-```bash
-tmux -V                                      # e.g. tmux 3.4
-curl -s localhost:4820/api/run/tmux          # {"available":true}
-```
-
-A workspace's run lives in a tmux session named `agenthub-lane-<id>`, so the browser
-terminal and a local `tmux attach -t agenthub-lane-<id>` (or `agenthub workspace
-shell`) are two clients on the same pane — they stay in sync, and killing the
-dashboard never kills the run.
-
-## Install as a Claude Code plugin
-
-Two commands on a machine that has nothing but Claude Code, no clone and no
-`npm run setup`:
+Anh chị hãy gửi **riêng từng dòng** sau thẳng vào khung chat Claude Code:
 
 ```
 /plugin marketplace add https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+```
+
+```
 /plugin install agenthub@agenthub
 ```
 
-The first session start installs the hooks, boots the server, puts `agenthub` on
-PATH; it runs detached, so the session never waits on
-it. `/agenthub-doctor` reports the state, `/agenthub-open` builds the UI and prints the
-URL, `/agenthub-update` refreshes after a plugin update. This path needs Node
-**>= 22.5** (no native `better-sqlite3`, so the server uses `node:sqlite`).
-Details, including what to delete on uninstall:
-[`docs/PLUGINS.md`](docs/PLUGINS.md).
-
-## Install from a checkout
-
-```bash
-npm run setup          # root and client dependencies
-npm run build          # builds the client into client/dist
-npm start              # serves the built client and the API on :4820
+```
+/agenthub:agenthub-open
 ```
 
-Open <http://localhost:4820>.
+Dòng cuối in ra địa chỉ dashboard (mặc định <http://localhost:4820>) — mở nó
+trên trình duyệt là xong.
 
-Development, with hot reload:
+Gặp lỗi thì gửi `/agenthub:agenthub-doctor` để tự kiểm tra và sửa.
+Cập nhật bản mới: `/agenthub:agenthub-update`.
+
+<a id="install-terminal"></a>
+
+## Cách 2 — Cài bằng terminal (không qua Claude Code)
+
+Chạy lần lượt trong terminal:
 
 ```bash
-npm run dev            # server on :4820, Vite client on :5173
+git clone https://git.smartgift.io.vn/Smartgift-AI/AgentHub.git
+cd AgentHub
+npm run setup      # cài thư viện + lệnh agenthub
+npm run build      # build giao diện
+npm start          # chạy dashboard
 ```
 
-`DASHBOARD_PORT` overrides the port, `DASHBOARD_CLIENT_DIST` overrides where the
-built UI is served from (defaults to `client/dist`; the plugin install points it
-at its own runtime directory). `postinstall` writes the Claude Code hook entries
-that feed the dashboard — do not run it when the `agenthub` plugin is installed, or
-every event is counted twice.
+Mở <http://localhost:4820> trên trình duyệt.
 
-### Run as a service (auto-start on boot)
-
-`npm start` only runs while that terminal (or `agenthub start`'s background
-process) is alive — a reboot loses it. `agenthub service install` sets up a
-systemd `--user` service (Linux) or a LaunchAgent (macOS) instead, so `:4820` is up again on its own after
-every reboot, with no manual step and no Claude Code (or any AI tool) needed
-to trigger it:
+`npm start` tắt khi đóng terminal. Muốn dashboard tự chạy mỗi lần bật máy:
 
 ```bash
-npm run build              # the service serves the built client, same as npm start
-agenthub service install       # Linux: ~/.config/systemd/user/agenthub.service
-                               # macOS: ~/Library/LaunchAgents/io.smartgift.agenthub.plist
-agenthub service status        # systemctl --user status / launchctl print
-agenthub service uninstall     # disable and remove it
+agenthub service install
 ```
 
-On Linux, `agenthub service install` also tries `loginctl enable-linger` so the service
-starts on a cold boot, before anyone logs in; if that needs elevated rights on
-your machine it prints the `sudo loginctl enable-linger <user>` command to run
-once yourself. The same is a switch in the dashboard — Settings → About →
-**Start AgentHub automatically** (off by default; it enables or disables the
-unit and never stops the running server). Plugin installs get it only once
-that switch is on — see
-[Auto-start on boot](docs/PLUGINS.md#auto-start-on-boot) in `docs/PLUGINS.md`.
+> ⚠️ Chỉ chọn **một** trong hai cách. Cài cả hai thì mỗi sự kiện bị đếm hai lần.
 
-## The CLI
+<a id="more-docs"></a>
 
-`agenthub` is linked by `npm run setup`; otherwise call `node bin/agenthub.js`.
+## Tài liệu thêm
 
-```bash
-agenthub status            # is the dashboard up
-agenthub start             # start it in the background and wait for healthy
-agenthub service install   # auto-start on boot via systemd --user (Linux)
-agenthub sessions          # recent sessions
-agenthub workspaces        # workspaces with stage and progress
-agenthub workspace pipeline    # this lane's pipeline template, or switch it
-agenthub workspace node <id>   # run ONE pipeline node's own command (no id: list them)
-agenthub stage <name>      # declare the current lane's stage
-agenthub tail              # live event feed
-```
+- README tiếng Anh: [README.en.md](README.en.md)
+- Giới thiệu đầy đủ tính năng: [docs/OVERVIEW.vi.md](docs/OVERVIEW.vi.md) ·
+  English: [docs/OVERVIEW.md](docs/OVERVIEW.md)
+- Cài đặt chi tiết, xử lý sự cố: [INSTALL.md](INSTALL.md)
+- Plugin: [docs/PLUGINS.md](docs/PLUGINS.md)
+- Lệnh `agenthub`: [docs/CLI.md](docs/CLI.md)
 
-`agenthub --help` lists the rest.
-
-## Workspaces
-
-A workspace is a working directory the dashboard watches. Two kinds:
-
-- **adopted** — a directory you already had. The dashboard only reads it; it is
-  never reset or deleted.
-- **managed** — a git worktree the dashboard created under `LANES_ROOT`. It may
-  reset that worktree, behind a three-check destroy guard and a counted preflight
-  the caller has to echo back. Removing a workspace — either kind — deletes only the
-  dashboard's record of it: the working tree, its branch and its database stay,
-  for you to delete yourself.
-
-```bash
-agenthub workspace add --cwd /path/to/repo --title "My feature"    # adopt
-agenthub workspace add --repo /path/to/repo --slug my-feature      # managed worktree
-```
-
-Every workspace also carries the CLI that drives it — `claude` (the default) or
-`codex` — picked in the Add-workspace modal and fixed for the life of the workspace. A
-Codex workspace's run panel offers Codex's own sandbox, approval and reasoning-effort
-choices, and resumes with `codex resume --last`. Codex sessions and token usage
-are read from Codex's own rollout journals: every Codex session (a workspace's or
-not) appears in Sessions with a **Codex** badge and is priced like any other,
-with OpenAI rates filled in automatically (Settings → Codex → Overview). For a
-live feed, install **Codex hooks** from the same tab: the next time Codex starts
-it asks you to trust them (**Trust all and continue**), and from then on each
-tool call lands in the session's timeline, a codex workspace turns running/idle as
-each turn starts and ends, and "Codex needs your permission" shows on the workspace
-card and as a notification while Codex waits for an approval. A Codex workspace also
-carries **no pipeline** — no stage, no pipeline map, nothing inferred or
-advanced; without hooks the dashboard mirrors its running/idle status from the
-rollout journals on disk (`$CODEX_HOME/sessions/**/rollout-*.jsonl`, polled
-every `DASHBOARD_CODEX_POLL_MS` ms, default 15000).
-
-An **Antigravity** workspace runs Antigravity's `agy` CLI. Its sessions and token
-usage are read from agy's own conversation files
-(`~/.gemini/antigravity-cli/conversations/<id>.db`, every
-`DASHBOARD_ANTIGRAVITY_POLL_MS` ms, default 15000): every agy CLI session
-appears in Sessions with an **Antigravity** badge, priced with Gemini rates that
-are filled in automatically (Settings → Antigravity). **Antigravity hooks**, in
-the same tab, add a live feed: each tool call in the session's timeline and a
-workspace that turns running/idle as a run starts and ends. agy asks for no trust,
-and it has no hook for a permission prompt, so an Antigravity workspace never shows
-"needs your permission". agy fires no hook when it exits, nor when a run ends
-on an API error or a permission refused in headless mode, so a session gone
-quiet is marked completed and its workspace set idle — after ten minutes of quiet
-for a session the hooks report on (a long tool call writes nothing, and after a
-Stop agy may still be waiting for you), after two minutes for one without
-hooks. Antigravity workspaces carry no pipeline either.
-
-**Cursor** sessions — the Cursor CLI's and the Cursor editor's agent chats — are
-read from Cursor's agent transcripts
-(`~/.cursor/projects/*/agent-transcripts/`, every `DASHBOARD_CURSOR_POLL_MS` ms,
-default 15000) and appear in Sessions with a **Cursor CLI** badge. Cursor writes
-no token counts or model ids there, so a Cursor session shows no tokens and no
-cost.
-
-**Pipelines are dormant.** AgentHub ships no pipeline template, so a workspace has no
-stages until you drop a template JSON into `DASHBOARD_PIPELINES_DIR` (see
-[`docs/LANES.md`](docs/LANES.md#custom-pipeline-templates)); until then
-`agenthub stage` answers `ENOPIPELINE` and the Workspace hides the pipeline map.
-Further development is planned.
-
-The declared stage comes from `agenthub stage`. The inferred stage comes from tool
-events and expires after `DETECTION_TTL_MS` (default 5 minutes), so a workspace can
-move backwards between work sessions. Detection never writes the declared stage,
-and an inferred node never renders as done.
-
-A workspace's pipeline template can be switched after creation — `agenthub workspace
-pipeline <template>` from the terminal, or the pipeline-template picker next to
-the workspace's title in the Workspace detail panel. Both re-resolve the workspace's
-current declared stage against the new template's nodes and warn if it no
-longer matches one.
-
-A workspace can also run **its own application stack**, isolated per workspace, when its
-repository declares a profile at `<repo>/.agenthub/profile/` — a `profile.env` of
-declarations plus shell hooks the dashboard calls. Each workspace gets a slot, and its
-ports and per-workspace directories derive from it:
-
-```bash
-agenthub workspace up          # boot the stack of the lane owning this directory
-agenthub workspace runtime     # slot, ports, service health
-agenthub workspace logs api    # tail a service log
-agenthub workspace down
-```
-
-Services are fully detached, so restarting the dashboard never stops a running
-workspace. This is resource namespacing on the host, not a container: workspaces run as the
-same user and share the network.
-
-[`docs/LANES.md`](docs/LANES.md) has the pipeline model, the destroy guard, the
-preflight contract, the Workspace page, the git surface (`GET /api/lanes/:id/git`,
-`/git/changes`, `/git/log`, `/git/file`, `/git/ls`, `/git/tree`,
-`POST /:id/git/:action`), and the full
-runtime/profile contract.
-
-## Tests
-
-```bash
-npm run test:server    # node:test
-npm run test:client    # Vitest
-```
-
-Both must be green before a commit. The pre-commit hook (`.husky/pre-commit`)
-runs Prettier, then the tests the commit needs: both full suites for a big or
-risky commit (over 10 code files, a dependency, build/test config or the hook
-itself, a deleted file), only the related tests for a small one (`vitest
-related` for `client/`, the server test files that name each other staged
-module), nothing for docs alone. `AGENTHUB_FULL_TESTS=1 git commit …` forces
-both full suites.
-
-## Layout
-
-| Path | What |
-|---|---|
-| `server/` | Express API, SQLite schema, hook ingest, workspace and worktree libraries |
-| `client/` | React 18 + Vite + Tailwind dashboard |
-| `bin/agenthub.js` | CLI |
-| `mcp/`, `statusline/` | Read-only MCP server and Claude Code statusline (opt-in) |
-| `monitoring/` | Prometheus config/rules and Grafana boards for `/api/metrics` |
-| `docs/` | Architecture, API, workspaces, database |
-| `plugins/` | Claude Code plugins shipped with the dashboard |
-
-## Docs
-
-- [`ARCHITECTURE.md`](ARCHITECTURE.md) — request flow, schema, WebSocket surface
-- [`docs/LANES.md`](docs/LANES.md) — workspaces, pipelines, stage detection
-- [`docs/API.md`](docs/API.md) — REST endpoints (`openapi.yaml` is generated)
-- [`docs/DATABASE.md`](docs/DATABASE.md) — tables and migrations
-- [`INSTALL.md`](INSTALL.md)
-- [`CLAUDE.md`](CLAUDE.md) — the rules an agent working in this repo must follow
+Internal build — all rights reserved.

bin/agenthub.js

@@ -160,7 +160,13 @@ async function api(method, pathname, body, options = {}) {
     const form = body instanceof FormData;
     res = await fetch(url, {
       method,
-      headers: body && !form ? { "Content-Type": "application/json" } : undefined,
+      headers: {
+        ...(body && !form ? { "Content-Type": "application/json" } : {}),
+        // Server mode: inside a dashboard pane, act as the workspace's owner.
+        ...(process.env.AGENTHUB_PANE_TOKEN
+          ? { "x-agenthub-pane-token": process.env.AGENTHUB_PANE_TOKEN }
+          : {}),
+      },
       body: body ? (form ? body : JSON.stringify(body)) : undefined,
       signal: AbortSignal.timeout(options.timeoutMs ?? 30_000),
     });
@@ -2303,6 +2309,17 @@ async function cmdLockAcquire(args) {
       console.log(`${c.green("✔")} acquired lock "${name}" as ${holder}`);
       return;
     }
+    // Only 409 means "held by someone else"; any other answer (a refused
+    // name, a server error) will not change by waiting.
+    if (result.status !== 409) {
+      console.error(
+        c.red(
+          `✖ ${result.data?.error?.message || `could not acquire lock (HTTP ${result.status})`}`
+        )
+      );
+      process.exitCode = 1;
+      return;
+    }
     if (Date.now() - lastPrinted >= 60_000) {
       const waited = Math.floor((Date.now() - startedAt) / 1000);
       console.log(
@@ -2719,6 +2736,21 @@ const COMMAND_GROUPS = [
         "install|uninstall|status [--port N]",
         "Auto-start on boot via systemd --user (Linux)",
       ],
+      [
+        "server",
+        "setup|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]",
+        "Server mode's accounts (add: --role admin|analyst|member)",
+      ],
+      [
+        "accounts",
+        "list|add|remove [name]",
+        "Claude account pool: new sessions spread over these accounts",
+      ],
       ["repl", "", "Open the interactive shell (also: shell, i)"],
     ],
   ],
@@ -3668,6 +3700,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"],
   pricing: ["set", "delete", "reset"],
   webhooks: ["test"],
   import: ["rescan", "path"],
@@ -3708,6 +3743,248 @@ function cmdStatusline(sub, flags) {
   }
 }
 
+// ── Server mode (docs/SERVER-MODE.md) ──────────────────────────────────────
+
+/** The auth module over the SAME database and settings the server reads: the
+ *  repo `.env`, then AgentHub's settings file (a pinned DASHBOARD_DATA_DIR). */
+function serverAuth() {
+  const settingsEnv = require(path.join(REPO_ROOT, "server", "lib", "settings-env.js"));
+  settingsEnv.loadEnvFiles({ owned: [path.join(REPO_ROOT, ".env")] });
+  return { settingsEnv, auth: require(path.join(REPO_ROOT, "server", "lib", "auth.js")) };
+}
+
+/** One password: typed hidden on a terminal, else the first line of stdin. */
+async function askPassword(prompt) {
+  const stdin = process.stdin;
+  if (!stdin.isTTY) {
+    const chunks = [];
+    for await (const chunk of stdin) chunks.push(chunk);
+    return Buffer.concat(chunks).toString("utf8").split(/\r?\n/)[0];
+  }
+  process.stdout.write(prompt);
+  return new Promise((resolve, reject) => {
+    let typed = "";
+    const finish = () => {
+      stdin.setRawMode(false);
+      stdin.pause();
+      stdin.off("data", onData);
+      process.stdout.write("\n");
+    };
+    const onData = (text) => {
+      for (const ch of text) {
+        if (ch === "\r" || ch === "\n") return (finish(), resolve(typed));
+        if (ch === "\u0003") return (finish(), reject(new Error("cancelled")));
+        typed = ch === "\u007f" || ch === "\b" ? typed.slice(0, -1) : typed + ch;
+      }
+    };
+    stdin.setRawMode(true);
+    stdin.setEncoding("utf8");
+    stdin.on("data", onData);
+    stdin.resume();
+  });
+}
+
+/** A new password, typed twice on a terminal. */
+async function newPassword(label) {
+  const first = await askPassword(`${label}: `);
+  if (process.stdin.isTTY && (await askPassword("Again: ")) !== first) {
+    throw new Error("the two passwords differ");
+  }
+  return first;
+}
+
+/** `agenthub server setup|off|status` — turn server mode on or off. */
+async function cmdServer(sub, flags) {
+  const { settingsEnv, auth } = serverAuth();
+  const file = settingsEnv.settingsFilePath();
+  const envNote = (key) => {
+    if (settingsEnv.envOwned.has(key)) {
+      console.log(
+        c.yellow(`! ${key} is also set in the environment or .env, which wins over ${file}`)
+      );
+    }
+  };
+  if (sub === "setup") {
+    if (flags.hostname) {
+      const hosts = String(flags.hostname);
+      if (!/^[a-z0-9.\-:[\],]+$/i.test(hosts)) throw new Error(`bad --hostname: ${hosts}`);
+      settingsEnv.writeSetting("DASHBOARD_ALLOWED_HOSTS", hosts);
+      envNote("DASHBOARD_ALLOWED_HOSTS");
+    }
+    if (!auth.hasAdmin()) {
+      const name = typeof flags.admin === "string" ? flags.admin : "admin";
+      const user = await auth.createUser(
+        name,
+        await newPassword(`Password for admin ${name}`),
+        "admin"
+      );
+      console.log(`${c.green("✔")} admin ${user.username} created`);
+    } else {
+      console.log(c.dim("  an admin already exists — add more with `agenthub users add`"));
+    }
+    settingsEnv.writeSetting("AGENTHUB_MODE", "server");
+    envNote("AGENTHUB_MODE");
+    console.log(`${c.green("✔")} server mode on (${file})`);
+    console.log("  Next:");
+    console.log(
+      "  1. Restart the dashboard: systemctl --user restart agenthub  (or agenthub start)"
+    );
+    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)."));
+    console.log(
+      c.dim("  Workspaces made before now have no owner: agenthub users assign <id> <user>")
+    );
+    return;
+  }
+  if (sub === "off") {
+    settingsEnv.writeSetting("AGENTHUB_MODE", "local");
+    envNote("AGENTHUB_MODE");
+    console.log(`${c.green("✔")} server mode off — restart the dashboard. Users are kept.`);
+    return;
+  }
+  if (sub === "status" || sub === undefined) {
+    const users = auth.listUsers();
+    console.log(`mode:     ${auth.isServerMode() ? "server" : "local"}`);
+    console.log(`settings: ${file}`);
+    console.log(
+      `users:    ${users.length} (${users.filter((u) => u.role === "admin").length} admin)`
+    );
+    console.log(c.dim("  a change takes effect when the dashboard restarts"));
+    return;
+  }
+  console.error(
+    c.red("✖ Usage: agenthub server setup [--hostname name] [--admin name] | off | status")
+  );
+  process.exitCode = 1;
+}
+
+/** `agenthub users …` — server mode's accounts, written straight to the DB. */
+async function cmdUsers(sub, positional, flags) {
+  const { auth } = serverAuth();
+  const name = positional[0];
+  const need = () => {
+    if (!name) throw new Error(`usage: agenthub users ${sub} <username>`);
+  };
+  switch (sub) {
+    case undefined:
+    case "list":
+      table(
+        ["id", "username", "role", "state"],
+        auth.listUsers().map((u) => [u.id, u.username, u.role, u.disabled ? "disabled" : "active"])
+      );
+      return;
+    case "add": {
+      need();
+      const role = typeof flags.role === "string" ? flags.role : "member";
+      const user = await auth.createUser(name, await newPassword(`Password for ${name}`), role);
+      console.log(`${c.green("✔")} ${user.username} added (${user.role})`);
+      return;
+    }
+    case "passwd":
+      need();
+      await auth.setPassword(name, await newPassword(`New password for ${name}`));
+      console.log(`${c.green("✔")} password changed — ${name}'s logins ended`);
+      return;
+    case "role":
+      need();
+      auth.setRole(name, positional[1]);
+      console.log(`${c.green("✔")} ${name} is now ${positional[1]}`);
+      return;
+    case "assign":
+      if (!name || !positional[1]) {
+        throw new Error("usage: agenthub users assign <workspace id> <username>");
+      }
+      auth.assignWorkspace(name, positional[1]);
+      console.log(`${c.green("✔")} workspace ${name} now belongs to ${positional[1]}`);
+      return;
+    case "audit": {
+      const { listAudit } = require(path.join(REPO_ROOT, "server", "lib", "audit.js"));
+      table(
+        ["when", "reader", "owner", "path"],
+        listAudit(typeof flags.limit === "string" ? flags.limit : 50).map((a) => [
+          a.at.replace("T", " ").slice(0, 19),
+          a.reader,
+          a.owner,
+          a.path,
+        ])
+      );
+      return;
+    }
+    case "disable":
+    case "enable":
+      need();
+      auth.setDisabled(name, sub === "disable");
+      console.log(`${c.green("✔")} ${name} ${sub}d`);
+      return;
+    default:
+      console.error(
+        c.red(
+          "✖ Usage: agenthub users list | add <name> [--role admin|analyst|member] | passwd <name> | role <name> <role> | disable <name> | enable <name> | assign <workspace id> <name> | audit [--limit N]"
+        )
+      );
+      process.exitCode = 1;
+  }
+}
+
+/** `agenthub accounts …` — the Claude account pool (server/lib/claude-pool.js). */
+async function cmdAccounts(sub, positional) {
+  serverAuth(); // the same settings + database the server reads
+  const pool = require(path.join(REPO_ROOT, "server", "lib", "claude-pool.js"));
+  const name = positional[0];
+  if (sub === "add" || sub === "remove") {
+    if (!name) throw new Error(`usage: agenthub accounts ${sub} <name>`);
+  }
+  if (sub === "add") {
+    console.log(
+      c.dim("  Run `claude setup-token` signed in as that account, then paste the token.")
+    );
+    const added = pool.addAccount(name, await askPassword(`Token for ${name}: `));
+    console.log(
+      `${c.green("✔")} ${added.name} added — valid until ${added.expiresAt.slice(0, 10)}`
+    );
+    console.log(c.dim("  New Claude sessions now spread over the pool's accounts."));
+    return;
+  }
+  if (sub === "remove") {
+    pool.removeAccount(name);
+    console.log(`${c.green("✔")} ${name} removed — running panes keep it until they exit`);
+    return;
+  }
+  if (sub === undefined || sub === "list") {
+    await pool.refreshQuotas({ force: true });
+    const pct = (w) => (w?.utilization != null ? `${Math.round(w.utilization)}%` : "–");
+    table(
+      ["account", "live", "$ 5h", "$ 7d", "quota 5h", "quota wk", "state"],
+      pool
+        .poolStatus()
+        .map((a) => [
+          a.name,
+          a.livePanes,
+          a.spend5h.toFixed(2),
+          a.spend7d.toFixed(2),
+          pct(a.quota?.fiveHour),
+          pct(a.quota?.sevenDay),
+          a.expired
+            ? "expired"
+            : a.full
+              ? "full"
+              : a.quota?.error
+                ? `no quota (${a.quota.error})`
+                : "ok",
+        ])
+    );
+    return;
+  }
+  console.error(c.red("✖ Usage: agenthub accounts list | add <name> | remove <name>"));
+  process.exitCode = 1;
+}
+
 /** Run one parsed command. Returns the handler's promise; may throw
  *  ServerDownError (for the caller's offline routing) or call process.exit
  *  for usage/validation failures. `cmd === "repl"` is handled by the entry
@@ -3725,6 +4002,12 @@ async function runCommand(argv) {
       return cmdStart(flags);
     case "service":
       return cmdService(positional[0], flags);
+    case "server":
+      return cmdServer(positional[0], flags);
+    case "users":
+      return cmdUsers(positional[0], positional.slice(1), flags);
+    case "accounts":
+      return cmdAccounts(positional[0], positional.slice(1));
     case "stats":
       return cmdStats();
     case "kanban":

client/README.md

@@ -54,11 +54,11 @@ The client is a single-page application (SPA) built with modern web technologies
 - **Vite 6.1** - Lightning-fast HMR during development, optimized production builds
 - **Tailwind CSS 3.4** - Utility-first CSS framework; colors are CSS-variable-backed tokens (`darkMode: "class"`) so a Dark/Light/System switch (Settings → Appearance; `useTheme` hook — the sidebar has no theme or language controls, the language lives in Settings → Appearance) re-themes the whole app by flipping one class. A **named theme** per mode is one more attribute: `data-theme` on `<html>` (absent for `default`) selects a CSS-variable block in `index.css` — `.dark[data-theme="darcula|apple-dark|orca-dark"]` and `[data-mode="light"][data-theme="apple-light|intellij-light|canvas|orca-light"]` — that overrides only the tokens it changes. `--tint-base` is `var(--surface-3)` and light `--syn-plain` is `var(--fg-primary)`, so a theme never restates them. A new theme is a block there plus an id in `THEMES` (`hooks/useTheme.ts`) and a label in `components/settings/AppearanceSettings.tsx`; its Settings preview needs no hex, because the swatch re-scopes the same variables on its own element. Storage: `theme` = `dark|light|system`, `agenthub.theme.dark` / `agenthub.theme.light` = theme ids (unknown ⇒ `default`); state is read through `useSyncExternalStore`, never cached in the module, so every consumer and every tab agree. An inline `<script>` at the top of `client/index.html` applies the same keys before first paint (no flash of the stock dark palette); it does not validate ids — the hook does, on mount
 
-  **The surface ramp means elevation, and it runs the same direction in both themes: a higher index is LIGHTER in dark and LIGHTER in light.** So in light mode the page is the *darkest* step (`surface-0`, `#e8e5da`) and a `.card` is brighter than the page it sits on (`surface-3`, `#f5f3ec`), which is also what makes every `hover:bg-surface-N` lift rather than dim. Light mode originally used Radix slate in its native direction — index up meant darker — which inverted the whole language: a near-white page (the glare complaint) under grey cards that read as recessed. Never "fix" a light-mode colour by swapping which step a component uses; fix the value of the step.
+  **The surface ramp means elevation, and it runs the same direction in both themes: a higher index is LIGHTER in dark and LIGHTER in light.** So in light mode the page is the *darkest* step (`surface-0`, `#eceef2`) and a `.card` is brighter than the page it sits on (`surface-3`, `#fdfdfe`), which is also what makes every `hover:bg-surface-N` lift rather than dim. Light mode originally used Radix slate in its native direction — index up meant darker — which inverted the whole language: a near-white page (the glare complaint) under grey cards that read as recessed. Never "fix" a light-mode colour by swapping which step a component uses; fix the value of the step.
 
   Other rules that fall out of this:
-  - **Light mode's hue family is warm, dark mode's is cool.** The light ramp is Claude's own ivory/terracotta (`#e8e5da` → `#fcfbf7`, warm neutrals, warm `--shadow-card`), not Radix slate: a cool near-white page reads as glare at any lightness, because the brightest thing on screen is also the bluest. Dark mode stays slate + blue — a warm accent on a near-black page is a different problem with a different answer.
-  - Light `--accent` is **not** the dark one, in hue or in step. Dark's `#0090ff` is 3.3:1 on white; Claude's brand terracotta `#cc785c` is 3.1:1 on ivory and 3.3:1 under white text, so it works as a large fill and fails as a link or a button label. Light mode uses it three steps down, `#924224` (it was `#a34a28`, which missed 4.5:1 as text on its own selected chip).
+  - **The light Default is IntelliJ Light's palette** (`#eceef2` → `#ffffff` neutrals, blue accent, IntelliJ's editor syntax colours); the separate IntelliJ Light theme was folded into it.
+  - Light `--accent` is **not** the dark one: dark's `#0090ff` is 3.3:1 on white. Light mode uses IntelliJ's `#285ac0`, dark enough to clear 4.5:1 as text and under white.
   - **White text sits on `accent-solid`, never on `accent`.** `--accent` is a TEXT colour; in the dark themes it is the light step (Default `#70b8ff`, Orca Dark `#6aa0f8`) that reads on a near-black card and is far too light to carry white. Every theme also defines `--accent-solid`/`--accent-solid-hover` (Tailwind `bg-accent-solid`) for the fill behind white text — `.btn-primary`, a Switch's on state, a Checkbox tick — darkened until white clears 4.5:1 (Default `#0076d1`). In the light themes the text accent is already dark enough, so `--accent-solid` is simply `var(--accent)`.
   - `--fg-muted` carries real content (timestamps, counts), so it is held at ≥4.5:1 (`#686359`, 5.4:1 on a card), not at the decorative value the Radix step suggests.
   - Code colouring goes through the `syntax.*` tokens (`--syn-*`), never fixed Tailwind steps: the dark set is pastel (300-level), the light set is the same hues four steps darker, because a pastel keyword on a light code block is unreadable.
@@ -525,7 +525,7 @@ function App() {
 }
 ```
 
-The heavy pages — `Workspace` (xterm, the diff viewer), `SettingsHub` and `SessionDetail` — are `React.lazy` imports in `App.tsx`, each route wrapped in `<Suspense>` (the `Page` helper), so they load on first visit instead of in the initial bundle. `App.tsx` also mounts the app-wide `<Toaster />` and `<ConfirmHost />` once, beside `<GlobalTooltip />`.
+Every page — `Dashboard`, `History`, `Workspace` (the diff viewer), `SettingsHub`, `SessionDetail`, `SnapshotView` — is a `React.lazy` import in `App.tsx`, each route wrapped in `<Suspense>` (the `Page` helper), so it loads on first visit instead of in the initial bundle; `main.tsx` starts the Workspace chunk early on a `/workspace` deep link. xterm and its addons load with the first terminal (`loadXterm` in `TerminalView.tsx`), the sidebar's add/destructive workspace modals on first open, and Sagi only while it is enabled (`SagiMount`). Only the active UI language is fetched (`i18n/index.ts`, one lazy chunk per language; `main.tsx` renders once it is in). `vite build` writes hidden source maps and a `.br`/`.gz` sibling of every text asset ≥ 1 KB. `App.tsx` also mounts the app-wide `<Toaster />` and `<ConfirmHost />` once, beside `<GlobalTooltip />`.
 
 ### Navigation Flow
 
@@ -793,6 +793,12 @@ in the file is shown as text, never run (no `rehype-raw`), links open in a new
 tab, and a leading YAML frontmatter block is shown as a code block. Styles are
 the `.md-preview` rules in `index.css`, built from theme tokens.
 
+#### Metric tooltips (`common:insights.help.*`)
+
+The dotted-underline tooltips on jargon metrics (`StatCard`'s and
+`SessionOverview`'s `help` prop) are worded in `common:insights.help.*`, `en` +
+`vi`.
+
 ---
 
 ## Utilities

client/public/sw.js

@@ -1,12 +1,15 @@
 /**
- * @description Service Worker for caching static assets and handling push notifications.
+ * @description Service Worker: network-first navigations with an offline fallback, and push
+ * notifications. Hashed `/assets/` bundles are left to the HTTP cache (immutable).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 // Bump this any time the SW logic changes - old clients will install the new
 // SW, drop their existing caches in `activate`, and `skipWaiting` so the
 // freshly-built bundle starts being served on the very next request.
-const CACHE_NAME = "dashboard-v2";
+// v3: drops v2's cache-first `/assets/` entries, which grew with every build
+// and were never pruned.
+const CACHE_NAME = "dashboard-v3";
 
 self.addEventListener("install", () => {
   // No pre-cache: network-first below means the cache fills lazily, and
@@ -39,25 +42,10 @@ self.addEventListener("fetch", (event) => {
   )
     return;
 
-  // Hashed bundles under /assets/ are immutable for a given URL - cache-first
-  // is safe and fast. A new build emits new filenames, so stale entries simply
-  // don't get re-requested.
-  if (url.pathname.startsWith("/assets/")) {
-    event.respondWith(
-      caches.match(request).then(
-        (cached) =>
-          cached ||
-          fetch(request).then((response) => {
-            if (response.ok && response.type === "basic") {
-              const clone = response.clone();
-              caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
-            }
-            return response;
-          })
-      )
-    );
-    return;
-  }
+  // Hashed bundles under /assets/ are immutable and the server marks them so:
+  // the browser's HTTP cache keeps them. Caching them here too only grew a
+  // second copy of every build, forever.
+  if (url.pathname.startsWith("/assets/")) return;
 
   // Everything else (navigations, sw.js, manifest, icons, root /): network-first
   // with cache fallback. The user always gets the freshest UI while online and

client/src/App.tsx

@@ -38,8 +38,8 @@
  * ## Internal dependencies
  * - `./components/Layout`
  * - `./components/SplashScreen`
- * - `./pages/Dashboard`
- * - `./pages/History`
+ * - `./pages/Dashboard` (lazy)
+ * - `./pages/History` (lazy)
  * - `./pages/SessionDetail` (lazy)
  * - `./pages/SettingsHub` (lazy)
  * - `./pages/Workspace` (lazy)
@@ -64,8 +64,6 @@ import { GlobalTooltip } from "./components/Tooltip";
 import { Toaster } from "./components/Toaster";
 import { ConfirmHost } from "./components/ConfirmHost";
 import { RouteErrorBoundary, reloadOnce } from "./components/RouteErrorBoundary";
-import { Dashboard } from "./pages/Dashboard";
-import { History } from "./pages/History";
 import { NotFound } from "./pages/NotFound";
 import { useWebSocket } from "./hooks/useWebSocket";
 import { useNotifications } from "./hooks/useNotifications";
@@ -75,7 +73,10 @@ import { reloadOnNewBuild } from "./lib/newBuildReload";
 import type { WSMessage } from "./lib/types";
 
 // The heavy pages (xterm, the diff viewer, the settings editors) load on first
-// visit instead of in the initial bundle.
+// visit instead of in the initial bundle — the Dashboard and History too, so the
+// entry chunk holds only the shell.
+const Dashboard = lazy(() => import("./pages/Dashboard").then((m) => ({ default: m.Dashboard })));
+const History = lazy(() => import("./pages/History").then((m) => ({ default: m.History })));
 const Workspace = lazy(() => import("./pages/Workspace").then((m) => ({ default: m.Workspace })));
 const SettingsHub = lazy(() =>
   import("./pages/SettingsHub").then((m) => ({ default: m.SettingsHub }))
@@ -156,8 +157,22 @@ export default function App() {
         <DocumentTitle />
         <Routes>
           <Route element={<Layout wsConnected={connected} />}>
-            <Route index element={<Dashboard />} />
-            <Route path="sessions" element={<History />} />
+            <Route
+              index
+              element={
+                <Page>
+                  <Dashboard />
+                </Page>
+              }
+            />
+            <Route
+              path="sessions"
+              element={
+                <Page>
+                  <History />
+                </Page>
+              }
+            />
             <Route
               path="sessions/:id"
               element={

client/src/components/AlertsNotifications.tsx

@@ -92,6 +92,7 @@ import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "./ContextM
 import { fmtCost, timeAgo } from "../lib/format";
 import { toast } from "../lib/toast";
 import { useAiTools } from "../hooks/useAiTools";
+import { useSpin } from "../hooks/useSpin";
 import type { AlertEvent, AlertRule, AlertRuleType, RulePreview, WSMessage } from "../lib/types";
 
 const PAGE_SIZE = 25;
@@ -342,6 +343,7 @@ export function AlertsNotifications() {
       setLoadingAlerts(false);
     }
   }, [unackedOnly, t]);
+  const [spinning, refreshAlerts] = useSpin(loadAlerts);
 
   const loadMore = useCallback(async () => {
     try {
@@ -1017,11 +1019,13 @@ export function AlertsNotifications() {
                 label={t("feed.unackedOnly")}
               />
               <button
-                onClick={() => loadAlerts()}
+                onClick={refreshAlerts}
+                disabled={spinning}
+                aria-busy={spinning}
                 className="btn-ghost border border-border inline-flex items-center gap-1.5 text-xs"
                 title={t("refresh")}
               >
-                <RefreshCw className="w-3.5 h-3.5" />
+                <RefreshCw className={`w-3.5 h-3.5 ${spinning ? "animate-spin" : ""}`} />
               </button>
               {unacked > 0 && (
                 <button

client/src/components/AuthGate.tsx

@@ -0,0 +1,163 @@
+/**
+ * @file AuthGate.tsx
+ * @description Server mode's login gate around the whole app (docs/SERVER-MODE.md).
+ * Asks `GET /api/auth/me` (again every 2 s while it gets no answer): in local
+ * mode — the default — it renders the app and nothing else changes, at once
+ * when this browser last saw local mode (`agenthub.authMode`); in server mode it renders the login page until
+ * someone logs in, and again whenever a request answers 401 `EAUTH`
+ * (`AUTH_REQUIRED_EVENT`). Logging out unmounts the app, so no page keeps the
+ * previous user's data. `useAuth()` gives the sidebar the user and `logout`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type FormEvent,
+  type ReactNode,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
+
+type AuthValue = { state: AuthState; logout: () => Promise<void> };
+
+const AuthContext = createContext<AuthValue>({ state: { mode: "local" }, logout: async () => {} });
+
+/** The current login; `{mode: "local"}` outside server mode (and in tests). */
+export const useAuth = () => useContext(AuthContext);
+
+/** The mode this browser last saw, so a local dashboard paints at once. */
+const MODE_KEY = "agenthub.authMode";
+const RETRY_MS = 2000;
+
+function cachedState(): AuthState | null {
+  try {
+    return localStorage.getItem(MODE_KEY) === "local" ? { mode: "local" } : null;
+  } catch {
+    return null;
+  }
+}
+
+export function AuthGate({ children }: { children: ReactNode }) {
+  // null = still asking the server. A browser that last saw local mode starts
+  // there and is corrected by the answer (or by a 401) if that changed.
+  const [state, setState] = useState<AuthState | null>(cachedState);
+
+  useEffect(() => {
+    let timer: number | undefined;
+    let alive = true;
+    const ask = () => {
+      api.auth
+        .me()
+        .then((next) => {
+          if (!alive) return;
+          try {
+            localStorage.setItem(MODE_KEY, next.mode);
+          } catch {
+            /* storage blocked */
+          }
+          setState(next);
+        })
+        .catch((err: { status?: number; code?: string }) => {
+          if (!alive) return;
+          // An answer that is not this build's: an older server still running
+          // under a freshly built UI (404, or its index.html → EBADRESPONSE), or
+          // DASHBOARD_TOKEN's own 401 — neither is server mode, so render the
+          // app as before and let it show its own state.
+          if (
+            err?.status === 404 ||
+            err?.code === "EBADRESPONSE" ||
+            (err?.status === 401 && err?.code !== "EAUTH")
+          ) {
+            setState({ mode: "local" });
+            return;
+          }
+          // No answer at all (a restart, a proxy's 502): ask again rather than
+          // guess — "local" would hide a server-mode dashboard's login page.
+          timer = window.setTimeout(ask, RETRY_MS);
+        });
+    };
+    ask();
+    // Any request answering 401 EAUTH means server mode with no valid login.
+    const onRequired = () => setState({ mode: "server", user: null });
+    window.addEventListener(AUTH_REQUIRED_EVENT, onRequired);
+    return () => {
+      alive = false;
+      window.clearTimeout(timer);
+      window.removeEventListener(AUTH_REQUIRED_EVENT, onRequired);
+    };
+  }, []);
+
+  if (!state) return null;
+  if (state.mode === "server" && !state.user) {
+    return <LoginPage onLoggedIn={(user) => setState({ mode: "server", user })} />;
+  }
+  const logout = async () => {
+    await api.auth.logout().catch(() => {});
+    setState({ mode: "server", user: null });
+  };
+  return <AuthContext.Provider value={{ state, logout }}>{children}</AuthContext.Provider>;
+}
+
+function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {
+  const { t } = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (e: FormEvent) => {
+    e.preventDefault();
+    setBusy(true);
+    setError(null);
+    try {
+      onLoggedIn((await api.auth.login(username, password)).user);
+    } catch (err) {
+      const code = (err as { code?: string }).code;
+      setError(code === "ETOOMANY" ? t("auth.tooMany") : t("auth.failed"));
+      setPassword("");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
+      <form onSubmit={submit} className="card w-full max-w-sm space-y-4 p-6">
+        <h1 className="text-lg font-semibold text-fg-primary">{t("auth.title")}</h1>
+        <label className="block space-y-1 text-sm text-fg-secondary">
+          <span>{t("auth.username")}</span>
+          <input
+            className="input w-full"
+            autoComplete="username"
+            autoFocus
+            required
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </label>
+        <label className="block space-y-1 text-sm text-fg-secondary">
+          <span>{t("auth.password")}</span>
+          <input
+            className="input w-full"
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        {error && (
+          <p role="alert" className="text-sm text-status-danger">
+            {error}
+          </p>
+        )}
+        <button type="submit" className="btn-primary w-full" disabled={busy}>
+          {busy ? t("auth.submitting") : t("auth.submit")}
+        </button>
+      </form>
+    </main>
+  );
+}

client/src/components/Layout.tsx

@@ -51,7 +51,7 @@
  * ## Internal dependencies
  * - `./Sidebar`
  * - `./UpdateNotifier`
- * - `./Sagi/Sagi`
+ * - `./Sagi/SagiMount`
  *
  * ## Public surface
  * - `Layout` — exported API; see TSDoc on the symbol for behavior.
@@ -81,7 +81,7 @@ import { Menu } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Sidebar, SIDEBAR_STORAGE_KEY, loadCollapsed } from "./Sidebar";
 import { UpdateNotifier } from "./UpdateNotifier";
-import { Sagi } from "./Sagi/Sagi";
+import { SagiMount } from "./Sagi/SagiMount";
 import { StatusBar } from "./StatusBar";
 
 const WIDTH_KEY = "agenthub.sidebar.width";
@@ -171,7 +171,7 @@ export function Layout({ wsConnected }: LayoutProps) {
         {t("skipToContent")}
       </a>
       <UpdateNotifier />
-      <Sagi />
+      <SagiMount />
       {drawer && drawerOpen && (
         <div
           aria-hidden

client/src/components/NeedsYouStrip.tsx

@@ -14,6 +14,7 @@ import { BellRing } from "lucide-react";
 import { api, type RunHandle } from "../lib/api";
 import { timeAgo } from "../lib/format";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { laneChangeMatcher, runKeyOf } from "../lib/laneChange";
 import { workspaceHref } from "./SessionRowMenu";
 import type { Session } from "../lib/types";
 
@@ -32,6 +33,9 @@ export function NeedsYouStrip({ compact = false }: { compact?: boolean }) {
         setTotal(r.total);
       })
       .catch(() => undefined); // the strip is a shortcut; the pages show errors
+  }, []);
+  // The live panes (for the links) move only when a lane's run columns do.
+  const loadRuns = useCallback(() => {
     api.run
       .list()
       .then((r) => setRuns(r.items))
@@ -40,11 +44,14 @@ export function NeedsYouStrip({ compact = false }: { compact?: boolean }) {
 
   useEffect(() => {
     load();
-  }, [load]);
+    loadRuns();
+  }, [load, loadRuns]);
   useLiveRefresh(load, {
     intervalMs: 15000,
     match: (msg) => msg.type === "session_updated" || msg.type === "session_created",
   });
+  const [runChanged] = useState(() => laneChangeMatcher(runKeyOf));
+  useLiveRefresh(loadRuns, { intervalMs: 15000, match: runChanged });
 
   if (sessions.length === 0) return null;
 

client/src/components/Sagi/Sagi.tsx

@@ -1,7 +1,10 @@
 /**
  * @file Sagi.tsx
- * @description Floating mascot companion shell. Mounts once (next to UpdateNotifier
- *   in Layout) so it persists across routes and shares the single WebSocket.
+ * @description Floating mascot companion shell. Mounted once by `SagiMount` (next
+ *   to UpdateNotifier in Layout), which loads this chunk only while the mascot is
+ *   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
  *   detection, and route navigation. Reactive personality + status/Ask come
  *   from useSagiBrain; the avatar is draggable (AssistiveTouch-style) via
@@ -81,6 +84,7 @@ import { SpeechBubble } from "./SpeechBubble";
 import { SagiPanel } from "./SagiPanel";
 import { useSagiBrain } from "./useSagiBrain";
 import { useSagiPosition } from "./useSagiPosition";
+import { useSagiEnabled } from "./SagiMount";
 import { matchIntent } from "./intents";
 import { sagiPrefs } from "./prefs";
 import { api } from "../../lib/api";
@@ -195,9 +199,13 @@ function SagiFlyout({
   );
 }
 
+/** Renders nothing — and runs no hook below — while the mascot is disabled. */
 export function Sagi() {
+  return useSagiEnabled() ? <SagiBody /> : null;
+}
+
+function SagiBody() {
   const { t } = useTranslation("settings");
-  const [enabled, setEnabled] = useState(() => sagiPrefs.getEnabled());
   const [pet, setPet] = useState(() => sagiPrefs.getPet());
   const [size, setSize] = useState(() => sagiPrefs.getSize());
   const [open, setOpen] = useState(false);
@@ -209,11 +217,11 @@ export function Sagi() {
   const brain = useSagiBrain();
   const place = useSagiPosition(size);
 
-  // Keep enabled, the pet and its size in sync with Settings / other tabs.
+  // Keep the pet and its size in sync with Settings / other tabs (enabled is
+  // the `Sagi` gate's: it unmounts this body when the mascot is turned off).
   useEffect(
     () =>
       sagiPrefs.subscribe(() => {
-        setEnabled(sagiPrefs.getEnabled());
         setPet(sagiPrefs.getPet());
         setSize(sagiPrefs.getSize());
       }),
@@ -223,7 +231,6 @@ export function Sagi() {
   // ⌘B / Ctrl+B toggles the panel; Esc closes it. Only while the mascot is
   // shown, and never from an editable field, where Ctrl+B belongs to the field.
   useEffect(() => {
-    if (!enabled) return;
     const onKey = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "b") {
         if (isEditable(e.target) || isEditable(document.activeElement)) return;
@@ -235,7 +242,7 @@ export function Sagi() {
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [enabled]);
+  }, []);
 
   const onNavigate = useCallback(
     (route: string) => {
@@ -279,8 +286,6 @@ export function Sagi() {
     [brain, navigate, t]
   );
 
-  if (!enabled) return null;
-
   const anchor: Anchor = {
     left: place.left,
     top: place.top,

client/src/components/Sagi/SagiAvatar.tsx

@@ -36,7 +36,7 @@
  * - `skills/file-headers/` — mandatory `@author` header policy.
  * ============================================================================= */
 
-import { useEffect, useRef, useState } from "react";
+import { memo, useEffect, useRef } from "react";
 import type { Mood } from "./brain";
 
 interface SagiAvatarProps {
@@ -76,10 +76,21 @@ if (typeof window !== "undefined") {
   });
 }
 
-export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps) {
+// The pupil offset is written as CSS variables on the root, never as state, so
+// following the cursor costs no React render.
+function setPupil(el: SVGSVGElement | null, x: number, y: number) {
+  el?.style.setProperty("--sagi-px", `${x}px`);
+  el?.style.setProperty("--sagi-py", `${y}px`);
+}
+
+// memo: Sagi re-renders on every brain tick; the avatar only on mood/size/motion.
+export const SagiAvatar = memo(function SagiAvatar({
+  mood,
+  reducedMotion,
+  size = 68,
+}: SagiAvatarProps) {
   const rootRef = useRef<SVGSVGElement | null>(null);
   const rafRef = useRef<number>();
-  const [pupil, setPupil] = useState({ x: 0, y: 0 });
 
   // Pupils follow the cursor whenever motion is allowed and the eyes are open.
   // (Only `sleeping` closes them by intent; `disconnected` hides the open-eye
@@ -89,7 +100,7 @@ export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps)
 
   useEffect(() => {
     if (!tracking) {
-      setPupil({ x: 0, y: 0 });
+      setPupil(rootRef.current, 0, 0);
       return;
     }
 
@@ -105,7 +116,7 @@ export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps)
       // Normalize then clamp to the eye socket range.
       const nx = (dx / dist) * Math.min(1, dist / 240);
       const ny = (dy / dist) * Math.min(1, dist / 240);
-      setPupil({ x: nx * MAX_PUPIL_SHIFT, y: ny * MAX_PUPIL_SHIFT });
+      setPupil(el, nx * MAX_PUPIL_SHIFT, ny * MAX_PUPIL_SHIFT);
     };
 
     // Immediately aim at the last-known cursor (next frame, so layout is ready)
@@ -202,7 +213,7 @@ export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps)
       <g className="sagi-eye sagi-eye-left">
         <g
           className="sagi-eye-track"
-          style={{ transform: `translate(${pupil.x}px, ${pupil.y}px)` }}
+          style={{ transform: "translate(var(--sagi-px, 0px), var(--sagi-py, 0px))" }}
         >
           <g className="sagi-eye-blink">
             <path
@@ -226,7 +237,7 @@ export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps)
       <g className="sagi-eye sagi-eye-right">
         <g
           className="sagi-eye-track"
-          style={{ transform: `translate(${pupil.x}px, ${pupil.y}px)` }}
+          style={{ transform: "translate(var(--sagi-px, 0px), var(--sagi-py, 0px))" }}
         >
           <g className="sagi-eye-blink">
             <path
@@ -792,4 +803,4 @@ export function SagiAvatar({ mood, reducedMotion, size = 68 }: SagiAvatarProps)
       </g>
     </svg>
   );
-}
+});

client/src/components/Sagi/SagiMount.tsx

@@ -0,0 +1,29 @@
+/**
+ * @file SagiMount.tsx
+ * @description Gate for the Sagi mascot: follows the enabled preference
+ *   (`useSagiEnabled`) and only while it is on lazy-loads and mounts `Sagi` — so
+ *   a disabled mascot costs no chunk download, no brain, no 1 Hz tick and no
+ *   WebSocket reducer.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { lazy, Suspense, useEffect, useState } from "react";
+import { sagiPrefs } from "./prefs";
+
+const Sagi = lazy(() => import("./Sagi").then((m) => ({ default: m.Sagi })));
+
+/** The mascot's enabled preference, followed live (Settings, other tabs). */
+export function useSagiEnabled(): boolean {
+  const [enabled, setEnabled] = useState(() => sagiPrefs.getEnabled());
+  useEffect(() => sagiPrefs.subscribe(() => setEnabled(sagiPrefs.getEnabled())), []);
+  return enabled;
+}
+
+export function SagiMount() {
+  if (!useSagiEnabled()) return null;
+  return (
+    <Suspense fallback={null}>
+      <Sagi />
+    </Suspense>
+  );
+}

client/src/components/Sagi/useSagiBrain.ts

@@ -168,7 +168,10 @@ export function useSagiBrain(): SagiBrain {
   // Advance the clock so timed moods (stuck/sleeping, and exit from
   // happy/worried) re-evaluate without needing a new event.
   useEffect(() => {
-    const id = setInterval(() => setTick(Date.now()), 1000);
+    // Hidden tab: no re-render; the first visible tick catches the mood up.
+    const id = setInterval(() => {
+      if (document.visibilityState === "visible") setTick(Date.now());
+    }, 1000);
     return () => clearInterval(id);
   }, []);
 

client/src/components/Select.tsx

@@ -84,6 +84,8 @@ export interface SelectOption<T extends string> {
   hint?: string;
   /** Optional leading icon, shown in the trigger and the list. */
   icon?: ReactNode;
+  /** Draw a rule above this option: it starts a group of its own. */
+  divider?: boolean;
 }
 
 /** Props for {@link Select}. */
@@ -272,6 +274,8 @@ export function Select<T extends string>({
                 onClick={() => choose(opt)}
                 onMouseEnter={() => setActive(idx)}
                 className={`w-full cursor-pointer text-left px-3 py-1.5 transition-colors ${
+                  opt.divider ? "mt-1 border-t border-border pt-2" : ""
+                } ${
                   isActive ? "bg-accent/15" : isSelected ? "bg-surface-3" : "hover:bg-surface-3"
                 }`}
               >

client/src/components/SessionOverview.tsx

@@ -81,19 +81,22 @@ interface SessionOverviewProps {
 }
 
 /** Throttle window for stats refresh - coalesces bursts of hook events into one fetch. */
-const REFRESH_THROTTLE_MS = 1000;
+const REFRESH_THROTTLE_MS = 5000;
 
 /** Compact tile used in the top stat row. */
 function StatTile({
   label,
   value,
   hint,
+  help,
   icon,
   tone = "default",
 }: {
   label: string;
   value: React.ReactNode;
   hint?: string;
+  /** Plain-language explanation, shown as the label's tooltip. */
+  help?: string;
   icon: React.ReactNode;
   tone?: "default" | "violet" | "emerald" | "amber" | "rose" | "cyan" | "blue";
 }) {
@@ -120,9 +123,14 @@ function StatTile({
 
   return (
     <div className={`rounded-lg border px-3 py-2.5 ${palette}`}>
-      <div className="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted">
+      <div
+        className={`flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted${help ? " cursor-help" : ""}`}
+        title={help}
+      >
         <span className={iconTone}>{icon}</span>
-        {label}
+        <span className={help ? "underline decoration-dotted underline-offset-2" : undefined}>
+          {label}
+        </span>
       </div>
       <div className="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight">
         {value}
@@ -310,6 +318,7 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
       <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2.5">
         <StatTile
           label={t("overview.events")}
+          help={t("common:insights.help.events")}
           value={stats.total_events.toLocaleString()}
           hint={
             eventRate !== null && eventRate > 0
@@ -322,6 +331,7 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
         />
         <StatTile
           label={t("overview.toolCalls")}
+          help={t("common:insights.help.toolCalls")}
           value={toolCallCount.toLocaleString()}
           hint={distinctTools > 0 ? t("overview.unique", { count: distinctTools }) : undefined}
           icon={<Wrench className="w-3 h-3" />}
@@ -329,6 +339,7 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
         />
         <StatTile
           label={t("overview.subagents")}
+          help={t("common:insights.help.subagents")}
           value={stats.agents.subagent.toLocaleString()}
           hint={
             stats.agents.main > 0 ? t("overview.plusMain", { count: stats.agents.main }) : undefined
@@ -338,12 +349,14 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
         />
         <StatTile
           label={t("overview.compactions")}
+          help={t("common:insights.help.compactions")}
           value={stats.agents.compaction.toLocaleString()}
           icon={<Layers className="w-3 h-3" />}
           tone="blue"
         />
         <StatTile
           label={t("overview.errors")}
+          help={t("common:insights.help.errors")}
           value={stats.error_count.toLocaleString()}
           icon={<AlertTriangle className="w-3 h-3" />}
           tone={stats.error_count > 0 ? "rose" : "default"}
@@ -478,7 +491,10 @@ export function SessionOverview({ session, agents, stats: frozen }: SessionOverv
       {totalTokens > 0 && (
         <div className="rounded-lg border border-surface-3 bg-surface-2/60 p-3.5">
           <div className="flex items-center justify-between mb-2.5">
-            <h3 className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5">
+            <h3
+              className="text-xs font-semibold text-fg-secondary uppercase tracking-wider flex items-center gap-1.5 cursor-help"
+              title={t("common:insights.help.tokenFlow")}
+            >
               <Coins className="w-3.5 h-3.5 text-status-warning" />
               {t("overview.tokenFlow")}
             </h3>

client/src/components/Sidebar.tsx

@@ -69,9 +69,11 @@ import {
   ChevronUp,
   ChevronDown,
   FolderTree,
+  LogOut,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { api } from "../lib/api";
+import { useAuth } from "./AuthGate";
 import { eventBus } from "../lib/eventBus";
 import { WorkspaceTree } from "./WorkspaceTree";
 import type { UpdateStatusPayload, WSMessage } from "../lib/types";
@@ -188,6 +190,7 @@ export function Sidebar({
   resizing = false,
 }: SidebarProps) {
   const { t } = useTranslation();
+  const auth = useAuth();
   const asideRef = useRef<HTMLElement>(null);
   const drawerOpen = Boolean(drawer?.open);
   useDialog(drawerOpen, asideRef, drawer?.onClose);
@@ -531,6 +534,22 @@ export function Sidebar({
           <Settings className="w-4 h-4 flex-shrink-0" />
           {!collapsed && <span>{t("nav:settings")}</span>}
         </NavLink>
+        {auth.state.mode === "server" && auth.state.user && (
+          <button
+            type="button"
+            onClick={() => void auth.logout()}
+            title={`${t("common:auth.signedInAs", {
+              name: auth.state.user.username,
+              role: auth.state.user.role,
+            })} — ${t("common:auth.logout")}`}
+            aria-label={t("common:auth.logout")}
+            className={`inline-flex items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary ${
+              collapsed ? "py-2" : "h-8 w-8 flex-shrink-0"
+            }`}
+          >
+            <LogOut className="h-4 w-4" />
+          </button>
+        )}
         <button
           type="button"
           onClick={onToggle}

client/src/components/StatCard.tsx

@@ -77,6 +77,8 @@ interface StatCardProps {
   loading?: boolean;
   /** Drill-in: the whole card links here (e.g. the list the number counts). */
   to?: string;
+  /** Plain-language explanation of the metric, shown as the label's tooltip. */
+  help?: string;
 }
 
 /**
@@ -92,11 +94,15 @@ export function StatCard({
   raw,
   loading = false,
   to,
+  help,
 }: StatCardProps) {
   const body = (
     <>
       <div className="flex items-center justify-between gap-3 mb-3">
-        <span className="text-xs font-medium text-fg-muted uppercase tracking-wider truncate">
+        <span
+          className={`text-xs font-medium text-fg-muted uppercase tracking-wider truncate${help ? " cursor-help underline decoration-dotted underline-offset-2" : ""}`}
+          title={help}
+        >
           {label}
         </span>
         <Icon className={`w-5 h-5 flex-shrink-0 ${accentColor}`} />

client/src/components/StatusBar.tsx

@@ -24,12 +24,13 @@ import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router-dom";
-import { RefreshCw, RotateCcw, Wifi, WifiOff } from "lucide-react";
+import { RefreshCw, Wifi, WifiOff } from "lucide-react";
 import { api, type RunHandle } from "../lib/api";
 import type { BudgetStatus, CostResult, ToolQuota } from "../lib/types";
 import { fmt, fmtCostFull, formatModelName, timeAgo } from "../lib/format";
 import { AiToolIcon } from "./AiToolIcon";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { useSpin } from "../hooks/useSpin";
 import { LIVE_RUNS_EVENT, selectedFrom } from "./WorkspaceTree";
 
 const COST_POLL_MS = 30_000;
@@ -121,6 +122,7 @@ function quotaMeta(q: ToolQuota, t: (k: string, o?: Record<string, unknown>) =>
 const QUOTA_ERROR_KEY: Record<string, string> = {
   ELIVEEXPIRED: "statusBar.quotaExpired",
   EPROFILEEXPIRED: "statusBar.quotaProfileExpired",
+  EWRONGACCOUNT: "statusBar.quotaWrongAccount",
 };
 
 /** One account: its name, sign-in line, then a row per window with its reset. */
@@ -143,7 +145,7 @@ function QuotaAccount({ q, many }: { q: ToolQuota; many: boolean }) {
           {t(QUOTA_ERROR_KEY[q.error] ?? "statusBar.quotaFailed")}
         </div>
       ) : (
-        <div className="mt-1 grid grid-cols-[2.75rem_1fr_2.25rem_4rem] items-center gap-x-2 gap-y-0.5 tabular-nums">
+        <div className="mt-1 grid grid-cols-[2.75rem_1fr_2.25rem_auto] items-center gap-x-2 gap-y-0.5 tabular-nums">
           {q.windows.map((w) => {
             const p = Math.round(w.usedPercent ?? 0);
             const resets = untilText(w.resetsAt);
@@ -159,16 +161,9 @@ function QuotaAccount({ q, many }: { q: ToolQuota; many: boolean }) {
                   />
                 </span>
                 <span className={`text-right ${quotaTone(p)}`}>{p}%</span>
-                <span className="flex items-center justify-end gap-1 text-fg-muted">
-                  {resets && (
-                    <>
-                      <RotateCcw className="h-3 w-3" aria-hidden />
-                      <span aria-hidden>{resets}</span>
-                      <span className="sr-only">
-                        {t("statusBar.quotaResets", { time: resets })}
-                      </span>
-                    </>
-                  )}
+                {/* In words: a ↻ glyph here read as a Refresh button. */}
+                <span className="text-right text-fg-muted">
+                  {resets && t("statusBar.quotaResets", { time: resets })}
                 </span>
               </Fragment>
             );
@@ -264,15 +259,15 @@ function QuotaChips() {
     closeTimer.current = window.setTimeout(() => setOpen(false), 200);
   };
   useEffect(() => () => window.clearTimeout(closeTimer.current), []);
-  const [refreshing, setRefreshing] = useState(false);
-  const load = useCallback((force = false) => {
-    if (force) setRefreshing(true);
-    api.pricing
-      .quota(force)
-      .then((r) => setTools(r.tools))
-      .catch(() => undefined)
-      .finally(() => force && setRefreshing(false));
-  }, []);
+  const load = useCallback(
+    (force = false) =>
+      api.pricing
+        .quota(force)
+        .then((r) => setTools(r.tools))
+        .catch(() => undefined),
+    []
+  );
+  const [refreshing, refresh] = useSpin(() => load(true));
   useVisiblePoll(load, QUOTA_POLL_MS, [load]);
   if (!tools.length) return null;
   return (
@@ -281,7 +276,7 @@ function QuotaChips() {
         type="button"
         data-testid="status-bar-quota"
         data-tip-off
-        onClick={() => load(true)}
+        onClick={refresh}
         onMouseEnter={show}
         onMouseLeave={hide}
         onFocus={show}
@@ -313,7 +308,7 @@ function QuotaChips() {
           tools={tools}
           onEnter={show}
           onLeave={hide}
-          onRefresh={() => load(true)}
+          onRefresh={refresh}
           refreshing={refreshing}
         />
       )}

client/src/components/UpdateNotifier.tsx

@@ -22,8 +22,8 @@
  *
  * ## State sources
  * - Initial fetch via `api.updates.status()` on mount.
- * - Background re-check via `api.updates.check()` every hour
- *   ({@link AUTO_CHECK_INTERVAL_MS}), plus the manual "Check now" button.
+ * - No client-side background re-check: the server checks on its own
+ *   schedule and broadcasts `update_status`; "Check now" stays manual.
  * - Live refresh from WebSocket `update_status` events on {@link eventBus}.
  *
  * ## Dismissal persistence
@@ -92,9 +92,6 @@ import type { UpdateStatusPayload, WSMessage } from "../lib/types";
 /** `localStorage` key storing the dismissed release tag (or upstream SHA). */
 const DISMISS_KEY = "agent-monitor-update-dismissed-sha";
 
-/** How often to silently re-check for updates in the background. */
-const AUTO_CHECK_INTERVAL_MS = 60 * 60 * 1000;
-
 /** Situations `POST /api/updates/apply` will actually act on. Mirrors the
  *  server: `release_available` / `tracking_canonical` / `fork_or_diverged_tracking`
  *  go through a git fast-forward, and `plugin_managed` goes through the detached
@@ -172,19 +169,6 @@ export function UpdateNotifier() {
     });
   }, [syncFromPayload]);
 
-  // Background re-check every hour, on top of the initial mount fetch and the
-  // manual "Check now" button — so a long-lived tab notices an update without
-  // the user having to click anything.
-  useEffect(() => {
-    const id = setInterval(() => {
-      api.updates
-        .check()
-        .then(syncFromPayload)
-        .catch(() => {});
-    }, AUTO_CHECK_INTERVAL_MS);
-    return () => clearInterval(id);
-  }, [syncFromPayload]);
-
   useEffect(() => {
     // An explicit "Check for updates" undoes both kinds of close.
     const handler = () => {

client/src/components/WorkspaceTree.tsx

@@ -6,14 +6,23 @@
  * workspace — or `+` on its row — opens its home (`/workspace?lane=<id>`); a
  * live tab is opened from its session row. Live status comes from the shared
  * lane list (`useLanes`), live panes from `GET /api/run`, re-read whenever a
- * lane's status or session moves and handed over by the Workspace page's own
- * poll (`LIVE_RUNS_EVENT`). Owns its own Add-workspace and
- * destructive modals so the row menu works from any page. Which rows are
+ * lane's status or session moves (at most every 3 s) and handed over by the
+ * Workspace page's own poll (`LIVE_RUNS_EVENT`). Owns its own Add-workspace and
+ * destructive modals (lazy-loaded on first open) so the row menu works from any page. Which rows are
  * expanded lives in `projectTreePrefs.ts` (`expanded`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent } from "react";
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type DragEvent,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Plus, Search } from "lucide-react";
@@ -21,6 +30,7 @@ import { api, type CwdSuggestion, type RunHandle } from "../lib/api";
 import type { Lane } from "../lib/types";
 import { useLanes } from "../hooks/useLanes";
 import { useAiTools } from "../hooks/useAiTools";
+import { useThrottledValue } from "../hooks/useThrottledValue";
 import {
   insertionIndex,
   moveBefore,
@@ -33,8 +43,15 @@ import { useProjectTreePrefs, writeProjectTreePrefs } from "../lib/projectTreePr
 import { LANE_DRAG_TYPE, WorkspaceRow, isLaneDrag, workspaceName } from "./lanes/WorkspaceRow";
 import { WorkspaceSessionList } from "./lanes/WorkspaceSessionList";
 import { WorkspaceRowMenu, type WorkspaceMenuAction } from "./lanes/WorkspaceRowMenu";
-import { AddLaneModal } from "./lanes/AddLaneModal";
-import { DestructiveLaneModal } from "./lanes/DestructiveLaneModal";
+
+// The sidebar is in the entry chunk; its two modals (and the run form the add
+// modal pulls in) load when first opened.
+const AddLaneModal = lazy(() =>
+  import("./lanes/AddLaneModal").then((m) => ({ default: m.AddLaneModal }))
+);
+const DestructiveLaneModal = lazy(() =>
+  import("./lanes/DestructiveLaneModal").then((m) => ({ default: m.DestructiveLaneModal }))
+);
 
 /** The workspace (and attached run) the Workspace page shows, from its URL. */
 /** The workspace, pane run and replayed session the URL names (Workspace page only). */
@@ -72,8 +89,12 @@ export function WorkspaceTree() {
   // A slot-0 pane starts, ends or learns its session id exactly when a lane's
   // status or session moves, so that is when the live-pane list is re-read;
   // the Workspace page also hands over every run list it polls (a tab in
-  // slots 1–3 moves no lane column).
-  const runKey = lanes.map((l) => `${l.id}:${l.status}:${l.session_id}:${l.run_id}`).join(",");
+  // slots 1–3 moves no lane column). Throttled: with two sessions in one
+  // workspace these columns flip on every hook, and each flip was a GET.
+  const runKey = useThrottledValue(
+    lanes.map((l) => `${l.id}:${l.status}:${l.session_id}:${l.run_id}`).join(","),
+    3000
+  );
   useEffect(() => {
     let live = true;
     api.run
@@ -349,28 +370,32 @@ export function WorkspaceTree() {
           onAction={(a) => onMenuAction(menu.lane, a)}
         />
       )}
-      {destructive && (
-        <DestructiveLaneModal
-          lane={destructive.lane}
-          action={destructive.action}
-          open
-          onClose={() => setDestructive(null)}
-          onConfirm={(body) => void confirmDestructive(body)}
-        />
-      )}
-      <AddLaneModal
-        open={addOpen}
-        cwdSuggestions={cwdSuggestions}
-        prefill={addPrefill}
-        onClose={() => {
-          setAddOpen(false);
-          setAddPrefill(null);
-        }}
-        onAdded={(lane) => {
-          void refreshLanes();
-          select(lane.id);
-        }}
-      />
+      <Suspense fallback={null}>
+        {destructive && (
+          <DestructiveLaneModal
+            lane={destructive.lane}
+            action={destructive.action}
+            open
+            onClose={() => setDestructive(null)}
+            onConfirm={(body) => void confirmDestructive(body)}
+          />
+        )}
+        {addOpen && (
+          <AddLaneModal
+            open
+            cwdSuggestions={cwdSuggestions}
+            prefill={addPrefill}
+            onClose={() => {
+              setAddOpen(false);
+              setAddPrefill(null);
+            }}
+            onAdded={(lane) => {
+              void refreshLanes();
+              select(lane.id);
+            }}
+          />
+        )}
+      </Suspense>
     </section>
   );
 }

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

@@ -0,0 +1,100 @@
+/**
+ * @file AuthGate.test.tsx
+ * @description The login gate: local mode renders the app untouched, server
+ * mode shows the login page until a login succeeds, a wrong password says so,
+ * and a later 401 `EAUTH` brings the login page back.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "../../i18n";
+
+const me = vi.fn();
+const login = vi.fn();
+vi.mock("../../lib/api", () => ({
+  AUTH_REQUIRED_EVENT: "agenthub:auth-required",
+  api: { auth: { me: () => me(), login: (u: string, p: string) => login(u, p), logout: vi.fn() } },
+}));
+
+import { AuthGate } from "../AuthGate";
+
+const user = { id: 1, username: "mia", role: "member" };
+
+beforeEach(() => {
+  me.mockReset();
+  login.mockReset();
+  localStorage.clear();
+});
+
+describe("AuthGate", () => {
+  it("renders the app in local mode", async () => {
+    me.mockResolvedValue({ mode: "local" });
+    render(<AuthGate>app</AuthGate>);
+    expect(await screen.findByText("app")).toBeInTheDocument();
+  });
+
+  it("paints at once in a browser that last saw local mode", () => {
+    localStorage.setItem("agenthub.authMode", "local");
+    me.mockReturnValue(new Promise(() => {}));
+    render(<AuthGate>app</AuthGate>);
+    expect(screen.getByText("app")).toBeInTheDocument();
+  });
+
+  it("asks again instead of guessing when the server does not answer", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      me.mockRejectedValueOnce(new Error("502"));
+      me.mockResolvedValue({ mode: "server", user: null });
+      render(<AuthGate>app</AuthGate>);
+      expect(screen.queryByText("app")).toBeNull();
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(2100);
+      });
+      expect(await screen.findByLabelText(/username/i)).toBeInTheDocument();
+      expect(screen.queryByText("app")).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("renders the app when an older server or a dashboard token answers instead", async () => {
+    for (const err of [
+      { status: 404 },
+      { status: 200, code: "EBADRESPONSE" },
+      { status: 401, code: "EUNAUTHORIZED" },
+    ]) {
+      me.mockReset();
+      me.mockRejectedValue(Object.assign(new Error("x"), err));
+      const { unmount } = render(<AuthGate>app</AuthGate>);
+      expect(await screen.findByText("app")).toBeInTheDocument();
+      unmount();
+    }
+  });
+
+  it("asks for a login in server mode and opens the app after one", async () => {
+    me.mockResolvedValue({ mode: "server", user: null });
+    login.mockRejectedValueOnce(Object.assign(new Error("x"), { code: "EBADLOGIN" }));
+    login.mockResolvedValueOnce({ user });
+    render(<AuthGate>app</AuthGate>);
+
+    const name = await screen.findByLabelText(/username/i);
+    const pass = screen.getByLabelText(/password/i);
+    await userEvent.type(name, "mia");
+    await userEvent.type(pass, "nope");
+    await userEvent.click(screen.getByRole("button"));
+    expect(await screen.findByRole("alert")).toBeInTheDocument();
+    expect(screen.queryByText("app")).toBeNull();
+
+    await userEvent.type(pass, "member-pass-1");
+    await userEvent.click(screen.getByRole("button"));
+    expect(await screen.findByText("app")).toBeInTheDocument();
+    expect(login).toHaveBeenLastCalledWith("mia", "member-pass-1");
+
+    act(() => {
+      window.dispatchEvent(new Event("agenthub:auth-required"));
+    });
+    expect(await screen.findByLabelText(/username/i)).toBeInTheDocument();
+  });
+});

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

@@ -217,7 +217,7 @@ describe("StatusBar", () => {
     const [work, personal, codex] = screen.getAllByTestId("status-bar-quota-account");
     expect(work).toHaveTextContent("Workin use");
     expect(work).toHaveTextContent("me@example.com · Sign-in expires in 3h 0m");
-    expect(work).toHaveTextContent("5h95%41m");
+    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");
@@ -244,7 +244,11 @@ describe("StatusBar", () => {
     await user.click(refresh);
     expect(api.pricing.quota).toHaveBeenCalledTimes(1);
     await act(async () => answer(same));
-    expect(screen.getByTestId("status-bar-quota-refresh")).toHaveTextContent("Refresh");
+    // The spin outlasts an instant answer (a throttled refresh is served from
+    // cache), so the label returns after the minimum spin.
+    await waitFor(() =>
+      expect(screen.getByTestId("status-bar-quota-refresh")).toHaveTextContent(/^Refresh$/)
+    );
     expect(screen.getByTestId("status-bar-quota-panel")).toBeInTheDocument();
     await user.unhover(panel);
     await waitFor(() => expect(screen.queryByTestId("status-bar-quota-panel")).toBeNull());

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

@@ -81,8 +81,6 @@ vi.mock("../../lib/api", async (importOriginal) => {
         })),
         cwds: vi.fn(async () => ({ items: [] })),
         kill: vi.fn(async () => ({ ok: true })),
-        history: vi.fn(async () => ({ items: [] })),
-        forgetHistory: vi.fn(async () => ({ removed: "" })),
       },
       aiTools: {
         list: vi.fn(async () => ({ tools: [], default: "claude" })),
@@ -351,97 +349,6 @@ describe("WorkspaceTree", () => {
     expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1&run=agenthub-lane-1");
   });
 
-  it("lists a workspace's closed terminals, and a click opens a new shell tab", async () => {
-    vi.mocked(api.run.history).mockImplementation(
-      async () =>
-        ({
-          items: [
-            {
-              id: "agenthub-lane-1-2",
-              tool: "shell",
-              status: "running",
-              started_at: "2026-10-06T10:00:00Z",
-              ended_at: null,
-              isLive: true,
-            },
-            {
-              id: "agenthub-lane-1-3@a",
-              tool: "shell",
-              status: "killed",
-              started_at: "2026-10-06T09:00:00Z",
-              ended_at: "2026-10-06T09:05:00Z",
-              isLive: false,
-            },
-            {
-              id: "agenthub-lane-1-1@b",
-              tool: "shell",
-              status: "exited",
-              started_at: "2026-10-06T08:00:00Z",
-              ended_at: "2026-10-06T08:05:00Z",
-              isLive: false,
-            },
-            {
-              id: "agenthub-lane-1-1@c",
-              tool: "shell",
-              status: "exited",
-              started_at: "2026-10-06T07:00:00Z",
-              ended_at: "2026-10-06T07:05:00Z",
-              isLive: false,
-            },
-            {
-              id: "agenthub-lane-1-1@d",
-              tool: "shell",
-              status: "exited",
-              started_at: "2026-10-06T06:00:00Z",
-              ended_at: "2026-10-06T06:05:00Z",
-              isLive: false,
-            },
-          ],
-        }) as never
-    );
-    vi.mocked(api.lanes.action).mockImplementation(
-      async () => ({ ok: true, run_id: "agenthub-lane-1-3" }) as never
-    );
-    const user = userEvent.setup();
-    renderTree();
-    await user.click(await screen.findByTestId("workspace-toggle-1"));
-    const closed = await screen.findByTestId("workspace-terminal-closed-agenthub-lane-1-3@a");
-    expect(closed).toHaveTextContent("Terminal");
-    expect(api.run.history).toHaveBeenCalledWith(
-      expect.objectContaining({ laneId: 1, tool: "shell" })
-    );
-    // The live one is not history, and only the newest three are listed.
-    expect(screen.queryByTestId("workspace-terminal-closed-agenthub-lane-1-2")).toBeNull();
-    expect(screen.getAllByTestId(/^workspace-terminal-closed-/)).toHaveLength(3);
-    await user.click(closed);
-    expect(api.lanes.action).toHaveBeenCalledWith(1, "start", { shell: true, slot: "auto" });
-    expect(screen.getByTestId("where").textContent).toBe("/workspace?lane=1&run=agenthub-lane-1-3");
-  });
-
-  it("removes a closed terminal from its hover X and its right-click menu", async () => {
-    const shell = (id: string) => ({
-      id,
-      tool: "shell",
-      status: "exited",
-      started_at: "2026-10-06T08:00:00Z",
-      ended_at: "2026-10-06T08:05:00Z",
-      isLive: false,
-    });
-    vi.mocked(api.run.history).mockImplementation(
-      async () => ({ items: [shell("t-a"), shell("t-b")] }) as never
-    );
-    const user = userEvent.setup();
-    renderTree();
-    await user.click(await screen.findByTestId("workspace-toggle-1"));
-    await user.click(await screen.findByTestId("workspace-terminal-forget-t-a"));
-    expect(api.run.forgetHistory).toHaveBeenCalledWith("t-a");
-    await waitFor(() => expect(screen.queryByTestId("workspace-terminal-closed-t-a")).toBeNull());
-    fireEvent.contextMenu(screen.getByTestId("workspace-terminal-closed-t-b"));
-    await user.click(screen.getByText("Remove from list"));
-    expect(api.run.forgetHistory).toHaveBeenCalledWith("t-b");
-    await waitFor(() => expect(screen.queryByTestId("workspace-terminal-closed-t-b")).toBeNull());
-  });
-
   it("selects by URL, and a click selects and expands", async () => {
     const user = userEvent.setup();
     renderTree("/workspace?lane=2");

client/src/components/conversation/ConversationView.tsx

@@ -59,6 +59,7 @@ import { api } from "../../lib/api";
 import { eventBus } from "../../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../../lib/remoteDataEvents";
 import { MessageList } from "./MessageList";
+import { useSpin } from "../../hooks/useSpin";
 import { useTranslation } from "react-i18next";
 import type { TranscriptMessage, TranscriptInfo, WSMessage } from "../../lib/types";
 
@@ -106,7 +107,6 @@ export function ConversationView({ sessionId, initialTranscriptId }: Conversatio
   const genRef = useRef(0);
   // Refresh-button spinner state - separate from initial `loading` so the
   // existing skeleton doesn't blink during a manual refresh.
-  const [refreshing, setRefreshing] = useState(false);
 
   // Load available transcript list (also rescanned on a short interval so
   // newly-spawned subagents appear in the dropdown without a page reload).
@@ -242,6 +242,8 @@ export function ConversationView({ sessionId, initialTranscriptId }: Conversatio
   // also poll below to catch what WS misses.
   useEffect(() => {
     const unsubscribe = eventBus.subscribe((msg: WSMessage) => {
+      // Hidden tab: the visibility handler below catches up once on show.
+      if (document.visibilityState !== "visible") return;
       if (isRemoteDataRefreshMessage(msg)) {
         fetchNewMessages();
         return;
@@ -303,14 +305,7 @@ export function ConversationView({ sessionId, initialTranscriptId }: Conversatio
 
   // Manual refresh - surfaces a control in the toolbar so users can force
   // a sync without reloading the page.
-  const refresh = useCallback(async () => {
-    setRefreshing(true);
-    try {
-      await fetchNewMessages();
-    } finally {
-      setRefreshing(false);
-    }
-  }, [fetchNewMessages]);
+  const [refreshing, refresh] = useSpin(fetchNewMessages);
 
   // Scroll-up to load history
   const loadHistory = useCallback(async () => {

client/src/components/lanes/AddLaneModal.tsx

@@ -1,7 +1,8 @@
 /**
  * @file AddLaneModal.tsx
  * @description The "+ Add lane" flow, in one of two modes chosen with a
- * segmented toggle: "Repo" adopts an existing directory as-is via
+ * segmented toggle — "Repo" by default; a branch prefill (the git bar's "new
+ * workspace from this branch") opens on "Worktree": "Repo" adopts an existing directory as-is via
  * `POST /api/lanes/ensure` (no worktree, no branch — the right mode for a
  * main repo you want stage detection on); "Worktree" provisions a
  * dashboard-managed git worktree via `POST /api/lanes/worktree` with a
@@ -94,7 +95,7 @@ export function AddLaneModal({
   cwdSuggestions: CwdSuggestion[];
 }) {
   const { t } = useTranslation(["lanes"]);
-  const [mode, setMode] = useState<"repo" | "worktree">("worktree");
+  const [mode, setMode] = useState<"repo" | "worktree">("repo");
   const [sourceRepo, setSourceRepo] = useState("");
   const [title, setTitle] = useState("");
   const [branch, setBranch] = useState("");
@@ -130,7 +131,7 @@ export function AddLaneModal({
   } | null>(null);
 
   const reset = () => {
-    setMode("worktree");
+    setMode("repo");
     setSourceRepo("");
     setTitle("");
     setBranch("");
@@ -151,6 +152,8 @@ export function AddLaneModal({
     if (!open || !prefill) return;
     if (prefill.sourceRepo) setSourceRepo(prefill.sourceRepo);
     if (prefill.branch) {
+      // A branch only means something to a worktree.
+      setMode("worktree");
       setBranch(prefill.branch);
       setBranchMode("existing");
     }

client/src/components/lanes/DiffEditor.tsx

@@ -3,7 +3,9 @@
  * file's original text (HEAD, or a branch's merge base), editable while the
  * diff re-colours as you type. `unified` is one editor with the removed lines
  * inline above their replacement (`unifiedMergeView`); `split` is the
- * original read-only on the left beside the editable file (`MergeView`).
+ * original read-only on the left beside the editable file, JetBrains-shaped —
+ * two scrollers kept on matching lines, no padding, a curved band per changed
+ * block between them (`splitDiff.ts`).
  * `collapse` folds unchanged stretches away — the panel's Changes view —
  * and every changed block carries a Revert that puts the original back in the
  * editor (nothing is written until Save). Green marks a line added whole, red
@@ -11,16 +13,22 @@
  * text), its edit in a stronger blue — the same scheme as the read-only diff in
  * LaneDiffView. Syntax colours come from the dashboard's own per-line
  * tokenizer (`lib/highlight.ts`), like every other code view here.
+ * Given `onBlock`, each changed block also gets the read-only diff's Undo /
+ * Keep bar under its last line (Undo asks twice) in place of its Revert; the
+ * panel turns it off while the editor holds unsaved text, because git acts on
+ * the file on disk.
  * Lazy-loaded by LaneChangesPanel, which keys it by file and shape:
  * CodeMirror stays out of the main bundle, and one mount is one view.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { useEffect, useRef } from "react";
-import { EditorState, RangeSetBuilder } from "@codemirror/state";
+import { useTranslation } from "react-i18next";
+import { EditorState, RangeSetBuilder, StateEffect, StateField, Text } from "@codemirror/state";
 import {
   Decoration,
   EditorView,
   ViewPlugin,
+  WidgetType,
   drawSelection,
   highlightActiveLine,
   highlightActiveLineGutter,
@@ -30,7 +38,8 @@ import {
   type ViewUpdate,
 } from "@codemirror/view";
 import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { MergeView, getChunks, unifiedMergeView, type Chunk } from "@codemirror/merge";
+import { unifiedMergeView, type Chunk } from "@codemirror/merge";
+import { chunksOf, splitDiff } from "./splitDiff";
 import { highlight, tokenClass } from "../../lib/highlight";
 
 /**
@@ -60,7 +69,7 @@ const mark = (cls: string) => {
  *  either side of a split view (`a` is the original). */
 function decorate(view: EditorView, lang: string): DecorationSet {
   const out = new RangeSetBuilder<Decoration>();
-  const info = getChunks(view.state);
+  const info = chunksOf(view.state);
   const a = info?.side === "a";
   const span = (k: Chunk) => (a ? [k.fromA, k.toA, k.endA] : [k.fromB, k.toB, k.endB]);
   const chunks = info?.chunks ?? [];
@@ -139,6 +148,83 @@ const diffColours = (lang: string) =>
     { decorations: (p) => p.decorations }
   );
 
+/** A changed block by line (1-based; a count of 0 is a pure insertion or
+ *  removal): what the panel matches against git's own change blocks. */
+export type EditorBlock = { oldFrom: number; oldCount: number; newFrom: number; newCount: number };
+export type BlockAction = "keep" | "undo";
+
+/** A chunk side's first line and line count. `to` is the start of the line
+ *  after the chunk (or the end + 1), so its last line holds `to - 1`. */
+const lineSpan = (doc: Text, from: number, to: number): [number, number] => {
+  const first = doc.lineAt(Math.min(from, doc.length)).number;
+  return [first, from >= to ? 0 : doc.lineAt(Math.min(to - 1, doc.length)).number - first + 1];
+};
+
+class BlockBar extends WidgetType {
+  constructor(
+    readonly block: EditorBlock,
+    readonly build: (b: EditorBlock) => HTMLElement
+  ) {
+    super();
+  }
+  eq(o: BlockBar) {
+    const a = this.block;
+    const b = o.block;
+    return (
+      a.oldFrom === b.oldFrom &&
+      a.oldCount === b.oldCount &&
+      a.newFrom === b.newFrom &&
+      a.newCount === b.newCount
+    );
+  }
+  toDOM() {
+    return this.build(this.block);
+  }
+}
+
+const barsOn = StateEffect.define<boolean>();
+
+/** One bar per chunk, under its last line (above a pure removal), rebuilt
+ *  whenever the chunks are — and dropped while `barsOn` is false. */
+function blockBars(orig: Text, build: (b: EditorBlock) => HTMLElement) {
+  const decos = (doc: Text, chunks: readonly Chunk[]) => {
+    const out = new RangeSetBuilder<Decoration>();
+    for (const c of chunks) {
+      const [oldFrom, oldCount] = lineSpan(orig, c.fromA, c.toA);
+      const [newFrom, newCount] = lineSpan(doc, c.fromB, c.toB);
+      const pos = newCount ? doc.line(newFrom + newCount - 1).to : Math.min(c.fromB, doc.length);
+      out.add(
+        pos,
+        pos,
+        Decoration.widget({
+          block: true,
+          side: newCount ? 1 : -1,
+          widget: new BlockBar({ oldFrom, oldCount, newFrom, newCount }, build),
+        })
+      );
+    }
+    return out.finish();
+  };
+  return StateField.define<{ on: boolean; deco: DecorationSet }>({
+    create: () => ({ on: false, deco: Decoration.none }),
+    update(v, tr) {
+      let on = v.on;
+      for (const e of tr.effects) if (e.is(barsOn)) on = e.value;
+      const chunks = chunksOf(tr.state)?.chunks;
+      if (on === v.on && chunks === chunksOf(tr.startState)?.chunks) {
+        return tr.docChanged ? { on, deco: v.deco.map(tr.changes) } : v;
+      }
+      return { on, deco: on && chunks ? decos(tr.state.doc, chunks) : Decoration.none };
+    },
+    provide: (f) => EditorView.decorations.from(f, (v) => v.deco),
+  });
+}
+
+const CHIP = "flex shrink-0 items-center gap-0.5 rounded border px-1 leading-[14px] cursor-pointer";
+const UNDO =
+  "border-border-light text-fg-secondary hover:border-status-danger/60 hover:text-status-danger";
+const UNDO_ARMED = "border-status-danger bg-status-danger/20 text-status-danger";
+
 const GREEN = "rgb(var(--status-success) / 0.18)";
 const RED = "rgb(var(--status-danger) / 0.18)";
 const BLUE = "rgb(var(--diff-mod) / 0.18)";
@@ -194,12 +280,12 @@ const theme = EditorView.theme({
   ".cm-chunkButtons": { zIndex: "1" },
 });
 
-/** The Revert button on a changed block; @codemirror/merge wires the click.
- *  Between split columns there is room for an arrow only (`→`: left onto right). */
-function revertButton(label: string, arrow = false) {
+/** The Revert button on a changed block (unified); @codemirror/merge wires
+ *  the click. The split layout draws its own » in the gutter. */
+function revertButton(label: string) {
   const b = document.createElement("button");
   b.type = "button";
-  b.textContent = arrow ? "→" : label;
+  b.textContent = label;
   b.title = label;
   b.setAttribute("aria-label", label);
   b.className =
@@ -217,6 +303,7 @@ export default function DiffEditor({
   revertLabel,
   onChange,
   onSave,
+  onBlock,
 }: {
   value: string;
   /** The text the diff is taken against; read once, at mount. */
@@ -231,11 +318,65 @@ export default function DiffEditor({
   revertLabel: string;
   onChange: (text: string) => void;
   onSave: () => void;
+  /** Keep / Undo one changed block in git; absent = no bars. */
+  onBlock?: (action: BlockAction, block: EditorBlock) => void;
 }) {
+  const { t } = useTranslation("lanes");
   const host = useRef<HTMLDivElement>(null);
   const view = useRef<EditorView | null>(null);
-  const cb = useRef({ onChange, onSave });
-  cb.current = { onChange, onSave };
+  const cb = useRef({ onChange, onSave, onBlock, t });
+  cb.current = { onChange, onSave, onBlock, t };
+
+  /** The diff view's review bar, as DOM: pinned to the visible right edge,
+   *  zero height so it never pushes lines (or a split view's alignment). */
+  const buildBar = (block: EditorBlock) => {
+    const tr = cb.current.t;
+    const wrap = document.createElement("div");
+    wrap.className = "flex h-0";
+    const pin = wrap.appendChild(document.createElement("span"));
+    pin.className = "sticky right-2 ml-auto h-0 w-0 self-start";
+    const bar = pin.appendChild(document.createElement("span"));
+    bar.dataset.testid = "lane-editor-block-bar";
+    bar.className =
+      "absolute right-0 top-0.5 z-10 flex items-center gap-1 whitespace-nowrap rounded border border-border-light bg-surface-1 px-1 py-0.5 font-sans text-[10px] leading-[14px] text-fg-secondary shadow-card";
+    const chip = (text: string, title: string, cls: string) => {
+      const b = bar.appendChild(document.createElement("button"));
+      b.type = "button";
+      b.textContent = text;
+      b.title = title;
+      b.setAttribute("aria-label", title);
+      b.className = `${CHIP} ${cls}`;
+      return b;
+    };
+    const undo = chip(tr("changes.undoHunkShort"), tr("changes.undoHunk"), UNDO);
+    const keep = chip(
+      tr("changes.stageHunkShort"),
+      tr("changes.stageHunk"),
+      "border-status-success bg-status-success/25 text-status-success hover:bg-status-success/35"
+    );
+    // Two clicks, like every undo git cannot give back; disarms after 3 s.
+    let timer = 0;
+    const arm = (on: boolean) => {
+      undo.dataset.armed = on ? "1" : "";
+      undo.textContent = tr(on ? "changes.undoHunkShortConfirm" : "changes.undoHunkShort");
+      const title = tr(on ? "changes.undoHunkConfirm" : "changes.undoHunk");
+      undo.title = title;
+      undo.setAttribute("aria-label", title);
+      undo.className = `${CHIP} ${on ? UNDO_ARMED : UNDO}`;
+    };
+    undo.onclick = () => {
+      window.clearTimeout(timer);
+      if (undo.dataset.armed) {
+        arm(false);
+        cb.current.onBlock?.("undo", block);
+        return;
+      }
+      arm(true);
+      timer = window.setTimeout(() => arm(false), 3000);
+    };
+    keep.onclick = () => cb.current.onBlock?.("keep", block);
+    return wrap;
+  };
 
   useEffect(() => {
     const folded = collapse ? { margin: 3, minSize: 4 } : undefined;
@@ -263,23 +404,22 @@ export default function DiffEditor({
       EditorView.updateListener.of((u) => {
         if (u.docChanged) cb.current.onChange(u.state.doc.toString());
       }),
+      blockBars(Text.of(original.split("\n")), buildBar),
     ];
     let v: EditorView;
     let destroy: () => void;
     if (layout === "split") {
-      const mv = new MergeView({
+      const sd = splitDiff({
         parent: host.current!,
-        a: {
-          doc: original,
-          extensions: [...common, EditorState.readOnly.of(true), EditorView.editable.of(false)],
-        },
-        b: { doc: value, extensions: editing },
-        revertControls: "a-to-b",
-        renderRevertControl: () => revertButton(revertLabel, true),
-        collapseUnchanged: folded,
+        original,
+        value,
+        extA: [...common, EditorState.readOnly.of(true), EditorView.editable.of(false)],
+        extB: editing,
+        collapse: folded,
+        revertLabel,
       });
-      v = mv.b;
-      destroy = () => mv.destroy();
+      v = sd.b;
+      destroy = sd.destroy;
     } else {
       v = new EditorView({
         parent: host.current!,
@@ -311,6 +451,11 @@ export default function DiffEditor({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const bars = !!onBlock;
+  useEffect(() => {
+    view.current?.dispatch({ effects: barsOn.of(bars) });
+  }, [bars]);
+
   // A value set from outside (Cancel's revert, a save's fresh text).
   useEffect(() => {
     const v = view.current;
@@ -324,7 +469,9 @@ export default function DiffEditor({
       ref={host}
       data-testid="lane-file-editor"
       data-layout={layout}
-      className="min-h-0 flex-1 overflow-hidden rounded border border-border-light [&_.cm-mergeView]:h-full [&_.cm-mergeView]:overflow-auto"
+      data-bars={bars}
+      // With the git bars up, a block's local Revert would be a second Undo.
+      className="[&[data-bars=true]_.cm-chunkButtons]:hidden [&[data-bars=true]_.cm-merge-revert_button]:hidden min-h-0 flex-1 overflow-hidden rounded border border-border-light"
     />
   );
 }

client/src/components/lanes/LaneCard.tsx

@@ -57,7 +57,10 @@ export function useLaneRuntime(laneId: number, bump: number): LaneRuntime | null
         });
     };
     read();
-    const timer = setInterval(read, RUNTIME_REFRESH_MS);
+    const timer = setInterval(
+      () => document.visibilityState === "visible" && read(),
+      RUNTIME_REFRESH_MS
+    );
     return () => {
       alive = false;
       clearInterval(timer);
@@ -88,7 +91,10 @@ function useLaneLocks(laneSlot: number | null): NamedLock[] {
         });
     };
     read();
-    const timer = setInterval(read, LOCKS_REFRESH_MS);
+    const timer = setInterval(
+      () => document.visibilityState === "visible" && read(),
+      LOCKS_REFRESH_MS
+    );
     return () => {
       alive = false;
       clearInterval(timer);

client/src/components/lanes/LaneChangesPanel.tsx

@@ -9,7 +9,8 @@
  *   file     — one file, as a diff or as its whole content (issue #35); a
  *              working file is always the editor (`DiffEditor`, diffed
  *              against HEAD / the branch's merge base, unified or side by
- *              side): Changes folds the unchanged lines away, Whole file
+ *              side, each block with the diff's Undo / Keep while nothing
+ *              is unsaved): Changes folds the unchanged lines away, Whole file
  *              shows them; any other file opens on its read-only diff; a
  *              whole markdown file can also be read rendered (Preview), and an
  *              image file is shown as the picture (`GET …/git/raw`)
@@ -30,10 +31,20 @@
  * before the server is told `confirm: true` — it is the one action in this
  * panel git cannot undo.
  *
- * During a merge (issue #45) a banner offers **Complete merge** (only once no
- * file is conflicted) and **Abort merge** (two clicks, `confirm: true`), and
- * conflicted files get their own group with Keep mine / Take theirs / Mark
- * resolved instead of stage — staging one blind would mark it resolved.
+ * During a merge, cherry-pick or revert (issue #45) a banner offers
+ * **Complete** (only once no file is conflicted) and **Abort** (two clicks,
+ * `confirm: true`), and conflicted files get their own group with Keep mine /
+ * Take theirs / Mark resolved instead of stage — staging one blind would mark
+ * it resolved.
+ *
+ * History rewrites through its commit menu: Revert (any commit), Undo commit
+ * (the top one; the server refuses a pushed one) and, while another branch's
+ * history is shown, Cherry-pick onto this branch. The commit row's Amend box
+ * folds the staged changes into the last commit. All four ask first
+ * (`confirmDialog`).
+ *
+ * "vs base" compares against the lane's base, else the repo's default branch
+ * (`git.base`), and is hidden when there is none or the lane IS on it.
  *
  * A diff line's number opens a comment box (LaneDiffView `onComment`); the
  * comment is pasted, as `<path>:<line> — <text>`, into the workspace's pane
@@ -45,7 +56,7 @@
  * reloading the browser tab asks the browser's own question, and
  * `onDirtyChange` tells the Workspace, which asks before closing the panel,
  * switching its tab, or moving it to another workspace or session. Two-click
- * actions (discard, a hunk's Undo, Abort merge) disarm after 3 s (`useArmed`).
+ * actions (discard, a hunk's Undo, Abort) disarm after 3 s (`useArmed`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -76,15 +87,18 @@ import {
 } from "lucide-react";
 import { api, gitTarget } from "../../lib/api";
 import { pasteToLane } from "../../lib/panePaste";
-import { confirmDiscard as askDiscard } from "../../lib/confirm";
+import { confirmDialog, confirmDiscard as askDiscard } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
 import { toast } from "../../lib/toast";
 import { useArmed } from "../../hooks/useArmed";
+import { useSpin } from "../../hooks/useSpin";
 import { useUnsavedGuard } from "../../hooks/useUnsavedGuard";
+import type { BlockAction, EditorBlock } from "./DiffEditor";
 import {
   LaneDiffView,
   LaneFileView,
+  changeBlocks,
   langFor,
   type DiffLayout,
   type LaneDiffChange,
@@ -349,6 +363,22 @@ function IconButton({
 const HUNK_CHIP =
   "flex shrink-0 items-center gap-0.5 rounded border px-1 leading-[14px] disabled:cursor-not-allowed disabled:opacity-40";
 
+/** The git change block an editor block is, by its line span on both sides;
+ *  none when the editor's diff and git's split the change differently. */
+export function gitChangeFor(f: LaneChangeFile, b: EditorBlock): LaneDiffChange | undefined {
+  return (f.hunks ?? []).flatMap(changeBlocks).find((c) => {
+    const lines = c.hunk.lines.slice(c.firstLine, c.lastLine + 1);
+    const del = lines.filter((l) => l.type === "del");
+    const add = lines.filter((l) => l.type === "add");
+    return (
+      del.length === b.oldCount &&
+      add.length === b.newCount &&
+      (!del.length || del[0]!.oldLine === b.oldFrom) &&
+      (!add.length || add[0]!.newLine === b.newFrom)
+    );
+  });
+}
+
 type FileAct = (action: "stage" | "unstage" | "discard", path: string, confirm?: boolean) => void;
 
 /** A work-range file's stage / unstage / discard buttons — the overview row's
@@ -400,20 +430,32 @@ function FileActions({
           {kept ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3" />}
         </IconButton>
       ) : null}
-      <IconButton
-        label={armed ? t("changes.discardConfirm") : t("changes.discard")}
-        disabled={busy}
-        danger
-        onClick={() => {
-          // Two clicks, always: the first arms the row, the second is the
-          // only one that reaches the server (which itself refuses the
-          // call without `confirm: true`).
-          if (armed) onAct("discard", f.path, true);
-          else onArm(f.path);
-        }}
-      >
-        <Trash2 className={`h-3 w-3 ${armed ? "text-status-danger" : ""}`} />
-      </IconButton>
+      {/* Two clicks, always: the first arms the row, the second is the only
+          one that reaches the server (which itself refuses the call without
+          `confirm: true`). Armed, the icon becomes a red word, so the second
+          click is asked for where the eye already is. */}
+      {armed ? (
+        <button
+          type="button"
+          data-testid="lane-changes-discard-confirm"
+          aria-label={t("changes.discardConfirm")}
+          title={t("changes.discardConfirm")}
+          disabled={busy}
+          onClick={() => onAct("discard", f.path, true)}
+          className={`${HUNK_CHIP} border-status-danger bg-status-danger/20 text-status-danger`}
+        >
+          {t("changes.discardShortConfirm")}
+        </button>
+      ) : (
+        <IconButton
+          label={t("changes.discard")}
+          disabled={busy}
+          danger
+          onClick={() => onArm(f.path)}
+        >
+          <Trash2 className="h-3 w-3" />
+        </IconButton>
+      )}
     </span>
   );
 }
@@ -693,6 +735,8 @@ export function LaneChangesPanel({
   // One read of the working copy, shared by the header and every write below:
   // a stage, a discard or a commit changes the counts the header shows.
   const [git, refreshGit] = useLaneGitFacts(laneId, session);
+  // A merge, cherry-pick or revert is open: no new one starts from history.
+  const opOpen = !!(git?.available && git.merging);
   // Every git read and write below goes to the same tree as those facts.
   const target = gitTarget(laneId, session);
   // A diff line's comment goes into this workspace's pane, as a paste.
@@ -822,6 +866,12 @@ export function LaneChangesPanel({
   const returnTo = useRef<{ mode: Mode; scroll: number } | null>(null);
   const pendingScroll = useRef<number | null>(null);
   const [message, setMessage] = useState("");
+  // The commit row amends the last commit instead of making a new one.
+  const [amend, setAmend] = useState(false);
+  // History of another branch (where Cherry-pick finds its commits); null =
+  // this branch's own.
+  const [historyRef, setHistoryRef] = useState<string | null>(null);
+  const [historyBranches, setHistoryBranches] = useState<string[]>([]);
   const [suggesting, setSuggesting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -880,7 +930,10 @@ export function LaneChangesPanel({
     void load();
     // Only the cheap shape polls; see the file header.
     if (mode !== "overview") return;
-    const timer = window.setInterval(() => void load(), OVERVIEW_REFRESH_MS);
+    const timer = window.setInterval(
+      () => document.visibilityState === "visible" && void load(),
+      OVERVIEW_REFRESH_MS
+    );
     return () => window.clearInterval(timer);
   }, [load, mode]);
 
@@ -894,11 +947,18 @@ export function LaneChangesPanel({
     if (mode !== "history") return;
     setHistoryLoading(true);
     void api.lanes
-      .gitLog(target, { limit: historyLimit })
+      .gitLog(target, { limit: historyLimit, ...(historyRef ? { ref: historyRef } : {}) })
       .then(forLane(laneId, (r) => setCommits(r.commits)))
       .catch((err) => setError(err instanceof Error ? err.message : String(err)))
       .finally(() => laneNow.current === laneId && setHistoryLoading(false));
-  }, [mode, laneId, reread, historyLimit]);
+  }, [mode, laneId, reread, historyLimit, historyRef]);
+  useEffect(() => {
+    if (mode !== "history") return;
+    void api.lanes
+      .gitBranches(target)
+      .then(forLane(laneId, (r) => setHistoryBranches(r.branches)))
+      .catch(() => setHistoryBranches([]));
+  }, [mode, laneId, reread]);
 
   // Re-run when a lane switch empties the cache too: the full-width sidebar
   // stays across the switch, so the mode alone never changes.
@@ -1034,6 +1094,8 @@ export function LaneChangesPanel({
     setConfirmDiscard(null);
     // Same for a half-typed commit message: it describes the OTHER lane's work.
     setMessage("");
+    setAmend(false);
+    setHistoryRef(null);
     returnTo.current = null;
     pendingScroll.current = null;
   }, [laneId]);
@@ -1173,6 +1235,69 @@ export function LaneChangesPanel({
   };
   const resolve: Resolve = (path, side) => void mergeAct("resolve", { path, side });
 
+  // Revert / cherry-pick / undo from the history's commit menu. A conflict is
+  // an operation that STARTED: the overview is where it gets resolved.
+  const historyAct = async (action: "cherry-pick" | "revert" | "undo-commit", c: LaneCommit) => {
+    // Every one of the three rewrites this branch's history, so each asks.
+    const branch = git?.available ? git.branch : "HEAD";
+    const ask =
+      action === "undo-commit"
+        ? {
+            title: t("changes.undoCommitTitle"),
+            message: t("changes.undoCommitBody", { short: c.short, subject: c.subject }),
+            confirmLabel: t("changes.undoCommitConfirm"),
+          }
+        : action === "revert"
+          ? {
+              title: t("changes.revertCommit"),
+              message: t("changes.revertConfirm", { short: c.short, subject: c.subject, branch }),
+              confirmLabel: t("changes.revertCommit"),
+              destructive: false,
+            }
+          : {
+              title: t("changes.cherryPick", { branch }),
+              message: t("changes.cherryPickConfirm", {
+                short: c.short,
+                subject: c.subject,
+                from: historyRef,
+                branch,
+              }),
+              confirmLabel: t("changes.cherryPick", { branch }),
+              destructive: false,
+            };
+    if (!(await confirmDialog(ask))) return;
+    const lane = laneId;
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await api.lanes.gitAction(
+        target,
+        action,
+        // The commit the dialog named: the server refuses an undo once HEAD
+        // is another one (ESTALE) — an agent may have committed meanwhile.
+        action === "undo-commit" ? { confirm: true, sha: c.sha } : { sha: c.sha }
+      );
+      if (laneNow.current !== lane) return;
+      if (r.conflicts?.length) {
+        toast.error(t("changes.opConflicts", { op: action, count: r.conflicts.length }));
+      } else if (action !== "undo-commit") {
+        toast.success(t("changes.opDone", { op: action }));
+      }
+      // Conflicts and an undone commit's staged changes are both work-range
+      // facts; a clean pick or revert is best seen in this branch's history.
+      setHistoryRef(null);
+      if (action === "undo-commit" || r.conflicts?.length) {
+        setRange("work");
+        setMode("overview");
+      }
+      void rereadAll();
+    } catch (err) {
+      if (laneNow.current === lane) setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      if (laneNow.current === lane) setBusy(false);
+    }
+  };
+
   const fileCtx = useContextMenu<LaneChangeFile>();
   const treeCtx = useContextMenu<LaneTreeEntry>();
   const commitCtx = useContextMenu<LaneCommit>();
@@ -1301,6 +1426,45 @@ export function LaneChangesPanel({
           <MenuItem onSelect={pick(commitCtx.close, () => copy(commitCtx.menu!.item.subject))}>
             {t("changes.copySubject")}
           </MenuItem>
+          <MenuSeparator />
+          {historyRef ? (
+            <MenuItem
+              disabled={busy || opOpen || commitCtx.menu.item.parents.length !== 1}
+              testId="lane-changes-menu-cherry-pick"
+              onSelect={pick(
+                commitCtx.close,
+                () => void historyAct("cherry-pick", commitCtx.menu!.item)
+              )}
+            >
+              {t("changes.cherryPick", { branch: git?.available ? git.branch : "HEAD" })}
+            </MenuItem>
+          ) : (
+            <>
+              <MenuItem
+                disabled={busy || opOpen || commitCtx.menu.item.parents.length !== 1}
+                testId="lane-changes-menu-revert"
+                onSelect={pick(
+                  commitCtx.close,
+                  () => void historyAct("revert", commitCtx.menu!.item)
+                )}
+              >
+                {t("changes.revertCommit")}
+              </MenuItem>
+              {commits?.[0]?.sha === commitCtx.menu.item.sha && (
+                <MenuItem
+                  danger
+                  disabled={busy || opOpen || commitCtx.menu.item.parents.length !== 1}
+                  testId="lane-changes-menu-undo-commit"
+                  onSelect={pick(
+                    commitCtx.close,
+                    () => void historyAct("undo-commit", commitCtx.menu!.item)
+                  )}
+                >
+                  {t("changes.undoCommit")}
+                </MenuItem>
+              )}
+            </>
+          )}
         </ContextMenu>
       )}
     </>
@@ -1329,6 +1493,14 @@ export function LaneChangesPanel({
       setArmedHunk(null);
       refreshGit();
       await load();
+      // Undone under the open editor: it shows the file as it is now (the
+      // bars only exist while nothing is unsaved, so no draft is lost).
+      if (action === "discard-hunk" && text?.path === path) {
+        const r = await api.lanes.gitFile(target, path, "work");
+        if (laneNow.current !== lane || !r.available) return;
+        setText({ path: r.path, lines: r.lines, truncated: r.truncated, sha: r.sha });
+        setDraft(r.lines.join("\n"));
+      }
     } catch (err) {
       if (laneNow.current === lane) setError(err instanceof Error ? err.message : String(err));
     } finally {
@@ -1339,8 +1511,10 @@ export function LaneChangesPanel({
   // Stage / Undo on each change block of a file with unstaged changes. The diff is
   // HEAD → working tree, so a staged-only file gets none: undoing its tree
   // would leave the index holding the change.
+  const hunkActable = (f: LaneChangeFile) =>
+    range === "work" && f.unstaged && !f.untracked && !f.binary;
   const hunkActions = (f: LaneChangeFile) =>
-    range === "work" && f.unstaged && !f.untracked && !f.binary
+    hunkActable(f)
       ? (change: LaneDiffChange) => {
           const key = `${f.path}\n${change.hunk.header}\n${change.block}`;
           const armed = armedHunk === key;
@@ -1378,6 +1552,19 @@ export function LaneChangesPanel({
       : undefined;
 
   const commitStaged = async () => {
+    // Amend rewrites the last commit: asked, like every history rewrite.
+    if (
+      amend &&
+      !(await confirmDialog({
+        title: t("changes.amendTitle"),
+        message: t("changes.amendConfirm", {
+          subject: git?.available ? git.subject : "",
+        }),
+        confirmLabel: t("changes.amend"),
+      }))
+    ) {
+      return;
+    }
     const lane = laneId;
     setBusy(true);
     setError(null);
@@ -1385,9 +1572,20 @@ export function LaneChangesPanel({
       // `only: "staged"` — the whole point of staging file by file is that the
       // commit takes the index as it stands, with no `add -A` sweeping the
       // rest of the tree in behind it.
-      await api.lanes.gitAction(target, "commit", { message: message.trim(), only: "staged" });
+      if (amend) {
+        // No message keeps the old one (`--no-edit`).
+        // `sha`: the commit the dialog named (ESTALE if HEAD moved since).
+        const head = git?.available ? git.head : null;
+        await api.lanes.gitAction(target, "amend", {
+          ...(message.trim() ? { message: message.trim() } : {}),
+          ...(head ? { sha: head } : {}),
+        });
+      } else {
+        await api.lanes.gitAction(target, "commit", { message: message.trim(), only: "staged" });
+      }
       if (laneNow.current !== lane) return;
       setMessage("");
+      setAmend(false);
       refreshGit();
       await load();
     } catch (err) {
@@ -1418,8 +1616,9 @@ export function LaneChangesPanel({
     setTreeChildren({});
     setExpandedDirs(new Set());
     setReread((n) => n + 1);
-    void load();
+    return load();
   };
+  const [rereading, runReread] = useSpin(rereadAll);
 
   const toggleCollapsed = (path: string) =>
     setCollapsed((prev) => {
@@ -1448,9 +1647,17 @@ export function LaneChangesPanel({
       ? files.filter((f) => (f.untracked || f.unstaged) && !f.conflicted && !neverStage.has(f.path))
       : [];
   const current = mode === "file" ? files.find((f) => f.path === openFile) : undefined;
+  // "vs base" needs a base, and means nothing on the base branch itself. An
+  // older server reports no `base` at all: keep the toggle as it was.
+  const base = git?.available ? git.base : undefined;
+  const showBranchRange =
+    base === undefined || (base !== null && !(git?.available && git.branch === base));
 
   // The armed path left the list (committed, reverted, lane switched): disarm,
   // so a later reappearance starts from the first click again.
+  useEffect(() => {
+    if (!showBranchRange && range === "branch") setRange("work");
+  }, [showBranchRange, range]);
   useEffect(() => {
     if (confirmDiscard && data && !files.some((f) => f.path === confirmDiscard)) {
       setConfirmDiscard(null);
@@ -1606,46 +1813,55 @@ export function LaneChangesPanel({
 
             <button
               type="button"
-              onClick={rereadAll}
+              onClick={runReread}
               aria-label={t("changes.refresh")}
               title={t("changes.refresh")}
               className="order-last ml-auto shrink-0 text-fg-muted hover:text-fg-primary"
             >
-              <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
+              <RefreshCw className={`h-3.5 w-3.5 ${loading || rereading ? "animate-spin" : ""}`} />
             </button>
           </div>
 
           {mode !== "history" && mode !== "browse" && (
             <div className="contents">
-              <div className="flex items-center rounded border border-border bg-surface-2 p-0.5">
-                {(["work", "branch"] as const).map((r) => (
-                  <button
-                    key={r}
-                    type="button"
-                    aria-pressed={range === r}
-                    onClick={() => {
-                      setRange(r);
-                      setSha(null);
-                    }}
-                    title={t(`changes.range.${r}Hint`)}
-                    className={`rounded px-2 py-0.5 text-[11px] transition-colors ${
-                      range === r
-                        ? "bg-surface-4 text-fg-primary"
-                        : "text-fg-secondary hover:text-fg-primary"
-                    }`}
-                  >
-                    {t(`changes.range.${r}`)}
-                  </button>
-                ))}
-                {range === "commit" && sha && (
-                  <span
-                    data-testid="lane-changes-commit-chip"
-                    className="rounded bg-surface-4 px-2 py-0.5 font-mono text-[11px] text-fg-primary"
-                  >
-                    {sha.slice(0, 7)}
-                  </span>
-                )}
-              </div>
+              {/* With nothing to compare against, "Uncommitted" alone would be a
+                toggle with one side: none is drawn, unless a commit is open —
+                then Uncommitted is the way back. */}
+              {(showBranchRange || (range === "commit" && sha)) && (
+                <div className="flex items-center rounded border border-border bg-surface-2 p-0.5">
+                  {(showBranchRange ? (["work", "branch"] as const) : (["work"] as const)).map(
+                    (r) => (
+                      <button
+                        key={r}
+                        type="button"
+                        aria-pressed={range === r}
+                        onClick={() => {
+                          setRange(r);
+                          setSha(null);
+                        }}
+                        title={t(`changes.range.${r}Hint`, {
+                          base: base || t("changes.range.baseBranch"),
+                        })}
+                        className={`rounded px-2 py-0.5 text-[11px] transition-colors ${
+                          range === r
+                            ? "bg-surface-4 text-fg-primary"
+                            : "text-fg-secondary hover:text-fg-primary"
+                        }`}
+                      >
+                        {t(`changes.range.${r}`, { base: base || t("changes.range.baseBranch") })}
+                      </button>
+                    )
+                  )}
+                  {range === "commit" && sha && (
+                    <span
+                      data-testid="lane-changes-commit-chip"
+                      className="rounded bg-surface-4 px-2 py-0.5 font-mono text-[11px] text-fg-primary"
+                    >
+                      {sha.slice(0, 7)}
+                    </span>
+                  )}
+                </div>
+              )}
 
               {(mode === "file" || mode === "review") && (
                 <div className="flex items-center gap-0.5 rounded border border-border bg-surface-2 p-0.5">
@@ -1753,8 +1969,8 @@ export function LaneChangesPanel({
           >
             <span className="min-w-0 flex-1">
               {git.conflicts
-                ? t("changes.mergeBanner", { count: git.conflicts })
-                : t("changes.mergeReady")}
+                ? t("changes.mergeBanner", { count: git.conflicts, op: git.operation ?? "merge" })
+                : t("changes.mergeReady", { op: git.operation ?? "merge" })}
             </span>
             <button
               type="button"
@@ -1762,7 +1978,7 @@ export function LaneChangesPanel({
               onClick={() => void mergeAct("merge-commit")}
               className="shrink-0 rounded border border-accent/40 bg-accent/15 px-1.5 py-0.5 text-accent hover:bg-accent/25 disabled:cursor-not-allowed disabled:opacity-40"
             >
-              {t("changes.mergeCommit")}
+              {t("changes.mergeCommit", { op: git.operation ?? "merge" })}
             </button>
             <button
               type="button"
@@ -1773,7 +1989,9 @@ export function LaneChangesPanel({
               }
               className="shrink-0 rounded border border-status-danger/40 px-1.5 py-0.5 text-status-danger hover:bg-status-danger/10 disabled:opacity-40"
             >
-              {armedAbort ? t("changes.mergeAbortConfirm") : t("changes.mergeAbort")}
+              {armedAbort
+                ? t("changes.mergeAbortConfirm", { op: git.operation ?? "merge" })
+                : t("changes.mergeAbort", { op: git.operation ?? "merge" })}
             </button>
           </div>
         )}
@@ -1791,6 +2009,29 @@ export function LaneChangesPanel({
         >
           {mode === "history" ? (
             <ul data-testid="lane-changes-history">
+              {historyBranches.length > 1 && (
+                <li className="mb-1 flex items-center gap-1.5 px-1 text-[11px] text-fg-secondary">
+                  <span className="shrink-0">{t("changes.historyOf")}</span>
+                  <select
+                    data-testid="lane-changes-history-ref"
+                    value={historyRef ?? ""}
+                    onChange={(e) => {
+                      setHistoryRef(e.target.value || null);
+                      setCommits(null);
+                    }}
+                    className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-1 py-0.5 text-[11px] text-fg-primary"
+                  >
+                    <option value="">{git?.available ? git.branch : "HEAD"}</option>
+                    {historyBranches
+                      .filter((b) => !(git?.available && b === git.branch))
+                      .map((b) => (
+                        <option key={b} value={b}>
+                          {b}
+                        </option>
+                      ))}
+                  </select>
+                </li>
+              )}
               {(() => {
                 const list = commits ?? [];
                 const graph = commitGraph(list);
@@ -1858,22 +2099,30 @@ export function LaneChangesPanel({
               {(stagedCount > 0 || toStage.length > 0) && (
                 <div
                   data-testid="lane-changes-actions"
-                  className="sticky top-0 z-10 mb-1.5 flex items-center gap-1.5 border-b border-border-light bg-surface-1 pb-2"
+                  className="sticky top-0 z-10 mb-1.5 flex flex-wrap items-center gap-1.5 border-b border-border-light bg-surface-1 pb-2"
                 >
-                  {/* ONE row: message, commit, then the two bulk index moves. */}
+                  {/* One row when there is room; in a narrow panel the buttons
+                    wrap below rather than squeeze the message to a few
+                    characters (its min width is what triggers the wrap). */}
                   {stagedCount > 0 && (
                     <div
                       data-testid="lane-changes-commit"
-                      className="flex min-w-0 flex-1 items-center gap-1.5"
+                      className="flex min-w-[14rem] flex-1 items-center gap-1.5"
                     >
                       <input
                         value={message}
                         onChange={(e) => setMessage(e.target.value)}
                         onKeyDown={(e) => {
-                          if (isSubmitEnter(e) && message.trim() && !busy) void commitStaged();
+                          if (isSubmitEnter(e) && (message.trim() || amend) && !busy) {
+                            void commitStaged();
+                          }
                         }}
-                        placeholder={t("changes.commitPlaceholder")}
-                        aria-label={t("changes.commitPlaceholder")}
+                        placeholder={t(
+                          amend ? "changes.amendPlaceholder" : "changes.commitPlaceholder"
+                        )}
+                        aria-label={t(
+                          amend ? "changes.amendPlaceholder" : "changes.commitPlaceholder"
+                        )}
                         className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
                       />
                       <button
@@ -1891,49 +2140,69 @@ export function LaneChangesPanel({
                           <Sparkles className="h-3 w-3" aria-hidden />
                         )}
                       </button>
-                      <button
-                        type="button"
-                        disabled={busy || suggesting || !message.trim()}
-                        onClick={() => void commitStaged()}
-                        className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
-                      >
-                        {t("changes.commitStaged", { count: stagedCount })}
-                      </button>
                     </div>
                   )}
-                  {toStage.length > 0 && (
-                    <button
-                      type="button"
-                      disabled={busy}
-                      onClick={() =>
-                        void act(
-                          "stage",
-                          toStage.map((f) => f.path)
-                        )
-                      }
-                      className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
-                    >
-                      <Plus className="h-3 w-3" />
-                      {t("changes.stageAll", { count: toStage.length })}
-                    </button>
-                  )}
-                  {stagedCount > 0 && (
-                    <button
-                      type="button"
-                      data-testid="lane-changes-unstage-all"
-                      disabled={busy}
-                      onClick={() =>
-                        void act(
-                          "unstage",
-                          files.filter((f) => f.staged).map((f) => f.path)
-                        )
-                      }
-                      className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
-                    >
-                      <Minus className="h-3 w-3" />
-                      {t("changes.unstageAll", { count: stagedCount })}
-                    </button>
-                  )}
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    {stagedCount > 0 && (
+                      <>
+                        <label
+                          title={t("changes.amendHint")}
+                          className="flex shrink-0 cursor-pointer items-center gap-1 text-[11px] text-fg-secondary"
+                        >
+                          <input
+                            type="checkbox"
+                            data-testid="lane-changes-amend"
+                            checked={amend}
+                            onChange={(e) => setAmend(e.target.checked)}
+                          />
+                          {t("changes.amend")}
+                        </label>
+                        <button
+                          type="button"
+                          disabled={busy || suggesting || !(message.trim() || amend)}
+                          onClick={() => void commitStaged()}
+                          className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                        >
+                          {amend
+                            ? t("changes.amend")
+                            : t("changes.commitStaged", { count: stagedCount })}
+                        </button>
+                      </>
+                    )}
+                    {toStage.length > 0 && (
+                      <button
+                        type="button"
+                        disabled={busy}
+                        onClick={() =>
+                          void act(
+                            "stage",
+                            toStage.map((f) => f.path)
+                          )
+                        }
+                        className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                      >
+                        <Plus className="h-3 w-3" />
+                        {t("changes.stageAll", { count: toStage.length })}
+                      </button>
+                    )}
+                    {stagedCount > 0 && (
+                      <button
+                        type="button"
+                        data-testid="lane-changes-unstage-all"
+                        disabled={busy}
+                        onClick={() =>
+                          void act(
+                            "unstage",
+                            files.filter((f) => f.staged).map((f) => f.path)
+                          )
+                        }
+                        className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                      >
+                        <Minus className="h-3 w-3" />
+                        {t("changes.unstageAll", { count: stagedCount })}
+                      </button>
+                    )}
+                  </div>
                 </div>
               )}
               {/* The work range splits like VS Code's Source Control: what the
@@ -2179,6 +2448,21 @@ export function LaneChangesPanel({
                         onSave={() => {
                           if (!busy) void saveDraft();
                         }}
+                        // The same Undo / Keep as the diff, on the file on
+                        // disk — so only while the editor holds no unsaved text.
+                        onBlock={
+                          current && hunkActable(current) && !dirty && !busy
+                            ? (action: BlockAction, b: EditorBlock) => {
+                                const change = gitChangeFor(current, b);
+                                if (!change) return setError(t("changes.blockNotInDiff"));
+                                void actHunk(
+                                  action === "keep" ? "stage-hunk" : "discard-hunk",
+                                  current.path,
+                                  change
+                                );
+                              }
+                            : undefined
+                        }
                       />
                     </Suspense>
                   )

client/src/components/lanes/LaneDiffView.tsx

@@ -10,9 +10,15 @@
  *   - The intra-line diff is a common prefix/suffix trim, not a real LCS. It is
  *     right for the case that matters (one edited span on a line), degrades to
  *     "the whole line changed" otherwise, and costs nothing.
- *   - Line pairing for split view happens here, on the rows the server already
- *     numbered. The server stays the single source of what changed; this file
- *     only decides how it looks.
+ *   - Side by side is JetBrains-shaped and laid out here, on the rows the
+ *     server already numbered: within a hunk each column lists only its own
+ *     lines, one after another, so the sides drift apart past a change and a
+ *     curved band in the middle gutter joins each block to its counterpart
+ *     (`lib/diffConnectors.ts`). Only a hunk's END is padded, so the `@@`
+ *     headers — and the two scrollers, kept in step 1:1 — stay level. Every
+ *     split row is ROW_PX tall, which makes a band's y pure arithmetic. The
+ *     server stays the single source of what changed; this file only decides
+ *     how it looks.
  * Past `WINDOW_THRESHOLD` rows a view renders only the rows on screen (plus an
  * overscan) between two spacers. Rows never wrap — the box scrolls sideways —
  * so every windowed row is pinned to `ROW_PX` and the range is pure arithmetic
@@ -38,6 +44,7 @@ import { useTranslation } from "react-i18next";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { canonicalLang, highlight, tokenClass } from "../../lib/highlight";
 import type { LaneChangeFile, LaneDiffHunk, LaneDiffLine } from "../../lib/types";
+import { bandPath } from "../../lib/diffConnectors";
 
 export type DiffLayout = "unified" | "split";
 
@@ -220,29 +227,28 @@ function emphasis(
   };
 }
 
-type PairRow = { left: LaneDiffLine | null; right: LaneDiffLine | null; emph: EmphPair | null };
-type EmphPair = { del: [number, number]; add: [number, number] };
+/** A split-view row: the index in `hunk.lines` each column shows, -1 for the
+ *  padding that closes the shorter side of a hunk. */
+type SplitRow = { left: number; right: number };
 /** A hunk's split-view rows plus each paired line's emphasis, keyed by its
  *  index in `hunk.lines` (what the unified view renders by). */
-type Analysed = { rows: PairRow[]; emph: Map<number, [number, number]> };
+type Analysed = { rows: SplitRow[]; emph: Map<number, [number, number]> };
 
 // Keyed by the hunk object: a hunk is immutable once fetched, so both split
 // columns and every re-render of the same data share one pass. A refetch
 // brings new objects and the old entries go with them.
 const analysed = new WeakMap<LaneDiffHunk, Analysed>();
 
-/** Pair each run of removed lines with the run of added lines following it,
- *  carrying indices so emphasis lands without searching the hunk again. */
+/** Pair each run of removed lines with the run of added lines following it
+ *  for emphasis, keyed by line index so it lands without searching the hunk
+ *  again; and pack each column's own lines into the split rows. */
 export function analyseHunk(hunk: LaneDiffHunk): Analysed {
   const hit = analysed.get(hunk);
   if (hit) return hit;
   const lines = hunk.lines;
-  const rows: PairRow[] = [];
   const emph = new Map<number, [number, number]>();
   for (let i = 0; i < lines.length; ) {
-    const line = lines[i]!;
-    if (line.type === "ctx") {
-      rows.push({ left: line, right: line, emph: null });
+    if (lines[i]!.type === "ctx") {
       i += 1;
       continue;
     }
@@ -260,9 +266,18 @@ export function analyseHunk(hunk: LaneDiffHunk): Analysed {
         emph.set(delStart + k, e.del);
         emph.set(addStart + k, e.add);
       }
-      rows.push({ left, right, emph: e });
     }
   }
+  const left: number[] = [];
+  const right: number[] = [];
+  lines.forEach((l, i) => {
+    if (l.type !== "add") left.push(i);
+    if (l.type !== "del") right.push(i);
+  });
+  const rows = Array.from({ length: Math.max(left.length, right.length) }, (_, i) => ({
+    left: left[i] ?? -1,
+    right: right[i] ?? -1,
+  }));
   const out = { rows, emph };
   analysed.set(hunk, out);
   return out;
@@ -351,9 +366,14 @@ export type LaneDiffChange = {
   /** First/last index in `hunk.lines` (unified). */
   firstLine: number;
   lastLine: number;
-  /** First/last split-view row. */
+  /** First split-view row (either side): the bar's arrows scroll here. */
   firstRow: number;
+  /** The right column's row its review bar hangs under. */
   lastRow: number;
+  /** Split-view rows `[from, to)` on each side; empty (`from === to`) is the
+   *  point between two rows where a pure insertion / removal sits. */
+  left: [number, number];
+  right: [number, number];
 };
 
 const blocksOf = new WeakMap<LaneDiffHunk, LaneDiffChange[]>();
@@ -363,23 +383,46 @@ export function changeBlocks(hunk: LaneDiffHunk): LaneDiffChange[] {
   const hit = blocksOf.get(hunk);
   if (hit) return hit;
   const out: LaneDiffChange[] = [];
-  const owner = new Map<LaneDiffLine, LaneDiffChange>();
   hunk.lines.forEach((line, i) => {
     if (line.type === "ctx") return;
     let c = i > 0 && hunk.lines[i - 1]!.type !== "ctx" ? out[out.length - 1] : undefined;
     if (!c) {
-      c = { hunk, block: out.length, firstLine: i, lastLine: i, firstRow: -1, lastRow: -1 };
+      c = {
+        hunk,
+        block: out.length,
+        firstLine: i,
+        lastLine: i,
+        firstRow: -1,
+        lastRow: -1,
+        left: [0, 0],
+        right: [0, 0],
+      };
       out.push(c);
     }
     c.lastLine = i;
-    owner.set(line, c);
-  });
-  analyseHunk(hunk).rows.forEach((r, i) => {
-    const c = (r.left && owner.get(r.left)) || (r.right && owner.get(r.right));
-    if (!c) return;
-    if (c.firstRow < 0) c.firstRow = i;
-    c.lastRow = i;
   });
+  // A side's rows are its lines in order, so a block's rows there are the
+  // count of that side's lines before it, plus its own.
+  for (const c of out) {
+    let l = 0;
+    let r = 0;
+    hunk.lines.forEach((line, i) => {
+      if (i >= c.firstLine) return;
+      if (line.type !== "add") l += 1;
+      if (line.type !== "del") r += 1;
+    });
+    let dl = 0;
+    let dr = 0;
+    for (let i = c.firstLine; i <= c.lastLine; i += 1) {
+      if (hunk.lines[i]!.type === "del") dl += 1;
+      else dr += 1;
+    }
+    c.left = [l, l + dl];
+    c.right = [r, r + dr];
+    c.firstRow = Math.min(l, r);
+    // A pure removal hangs its bar under the right row its band points at.
+    c.lastRow = dr ? r + dr - 1 : Math.max(0, r - 1);
+  }
   blocksOf.set(hunk, out);
   return out;
 }
@@ -547,37 +590,36 @@ function longestInHunks(hunks: LaneDiffHunk[]) {
   );
 }
 
+/** One column's row i of a hunk: that side's i-th line, or the padding
+ *  that closes the hunk's shorter side. Always ROW_PX tall (see the header). */
 function SplitLine({
-  row,
+  hunk,
+  i,
   lang,
   side,
-  style,
   bar,
   start,
 }: {
-  row: PairRow;
+  hunk: LaneDiffHunk;
+  i: number;
   lang: string;
   side: "left" | "right";
-  style?: CSSProperties;
   bar?: LaneDiffChange;
   start?: LaneDiffChange;
 }) {
-  const line = side === "left" ? row.left : row.right;
+  const { rows, emph } = analyseHunk(hunk);
+  const at = rows[i]![side];
+  const line = at < 0 ? null : hunk.lines[at]!;
+  const e = at < 0 ? undefined : emph.get(at);
   const anchor = useAnchor(start);
   return (
-    <Row tint={rowTint(line?.type ?? null, !!row.emph)} style={style} anchor={anchor}>
+    <Row tint={rowTint(line?.type ?? null, !!e)} style={FIXED} anchor={anchor}>
       <Gutter
         n={(side === "left" ? line?.oldLine : line?.newLine) ?? null}
         commentable={side === "right"}
       />
       <span className="whitespace-pre px-1">
-        {line ? (
-          <Code
-            text={line.text}
-            lang={lang}
-            emph={side === "left" ? row.emph?.del : row.emph?.add}
-          />
-        ) : null}
+        {line ? <Code text={line.text} lang={lang} emph={e} /> : null}
       </span>
       {bar && <HunkBar change={bar} />}
     </Row>
@@ -598,11 +640,12 @@ function SplitColumn({
     <>
       {hunks.map((hunk, h) => (
         <div key={`${hunk.header}:${h}`}>
-          <HunkHeader hunk={hunk} />
-          {analyseHunk(hunk).rows.map((row, i) => (
+          <HunkHeader hunk={hunk} fixed />
+          {analyseHunk(hunk).rows.map((_, i) => (
             <SplitLine
               key={i}
-              row={row}
+              hunk={hunk}
+              i={i}
               lang={lang}
               side={side}
               // One bar per change block: on the right (new) column only.
@@ -638,10 +681,10 @@ function SplitSlice({
           ) : (
             <SplitLine
               key={range.start + k}
-              row={analyseHunk(hunk).rows[i]!}
+              hunk={hunk}
+              i={i}
               lang={lang}
               side={side}
-              style={FIXED}
               bar={side === "right" ? barAtRow(hunk, i) : undefined}
               start={startAtRow(hunk, i)}
             />
@@ -677,11 +720,48 @@ function follow(src: HTMLElement, dst: HTMLElement) {
   }
 }
 
-/** Both sides, each its own scroller but kept in step on both axes. */
+/** The middle gutter's width: room for an S-curve to read as one. */
+const GUTTER_PX = 36;
+
+const BAND = {
+  add: "fill-status-success/20 stroke-status-success/60",
+  del: "fill-status-danger/20 stroke-status-danger/60",
+  mod: "fill-diff-mod/20 stroke-diff-mod/60",
+} as const;
+
+/** Every change block's band, in the columns' content coordinates: a hunk's
+ *  header is item `h`, so its row r starts at (h + 1 + r) × ROW_PX. */
+function bandsOf(items: Item[]) {
+  const out: { d: string; kind: keyof typeof BAND; top: number; bottom: number }[] = [];
+  items.forEach(({ hunk, i }, h) => {
+    if (i >= 0) return;
+    for (const c of changeBlocks(hunk)) {
+      const [y0, y1, z0, z1] = [...c.left, ...c.right].map((r) => (h + 1 + r) * ROW_PX) as [
+        number,
+        number,
+        number,
+        number,
+      ];
+      const kind = y0 === y1 ? "add" : z0 === z1 ? "del" : "mod";
+      out.push({
+        d: bandPath(GUTTER_PX, y0, y1, z0, z1),
+        kind,
+        top: Math.min(y0, z0),
+        bottom: Math.max(y1, z1),
+      });
+    }
+  });
+  return out;
+}
+
+/** Both sides, each its own scroller but kept in step on both axes, and the
+ *  gutter between them that draws each block's band, scrolled with them. */
 function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string; fill: boolean }) {
   const left = useRef<HTMLDivElement>(null);
   const right = useRef<HTMLDivElement>(null);
+  const mid = useRef<HTMLDivElement>(null);
   const items = useMemo(() => flatten(hunks, "split"), [hunks]);
+  const bands = useMemo(() => bandsOf(items), [items]);
   const minWidth = useMemo(() => `calc(${longestInHunks(hunks)}ch + 3rem)`, [hunks]);
   const win = useWindow(items.length);
 
@@ -695,8 +775,11 @@ function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string;
     const dst = from === "left" ? right.current : left.current;
     if (!src || !dst) return;
     follow(src, dst);
+    if (mid.current) mid.current.scrollTop = src.scrollTop;
     win.onScroll(src);
   };
+  // Windowed, only the bands that reach the rendered rows are drawn.
+  const [from, to] = [win.range.start * ROW_PX, win.range.end * ROW_PX];
 
   const column = (side: "left" | "right") =>
     win.on ? (
@@ -717,11 +800,33 @@ function SplitView({ hunks, lang, fill }: { hunks: LaneDiffHunk[]; lang: string;
       >
         {column("left")}
       </div>
+      <div
+        ref={mid}
+        data-testid="lane-diff-connectors"
+        aria-hidden
+        className="shrink-0 overflow-hidden border-x border-border-light bg-surface-1"
+        style={{ width: GUTTER_PX }}
+      >
+        {/* Taller than the columns by a scrollbar, so it can scroll as far. */}
+        <svg width={GUTTER_PX} height={items.length * ROW_PX + 24} className="block">
+          {bands
+            .filter((b) => b.bottom >= from && b.top <= to)
+            .map((b) => (
+              <path
+                key={`${b.top}:${b.d}`}
+                d={b.d}
+                data-kind={b.kind}
+                className={BAND[b.kind]}
+                vectorEffect="non-scaling-stroke"
+              />
+            ))}
+        </svg>
+      </div>
       <div
         ref={right}
         data-testid="lane-diff-split-right"
         onScroll={() => sync("right")}
-        className="w-1/2 min-w-0 overflow-auto border-l border-border-light"
+        className="w-1/2 min-w-0 overflow-auto"
       >
         {column("right")}
       </div>

client/src/components/lanes/LaneGitBar.tsx

@@ -19,8 +19,8 @@
  * is `EGITAUTH` (issue #45): the dashboard's git has no terminal to prompt
  * in, so a remote wanting a login opens a form here and the SAME action is
  * resent with the typed credential — the token is never rendered back.
- * Fetch, pull, push and publish say so in a toast when they succeed; a merge
- * asks through the themed confirm; the rows wrap in a narrow panel.
+ * Fetch, pull, push and publish say so in a toast when they succeed; a merge,
+ * a push, a publish and a branch delete ask through the themed confirm first; the rows wrap in a narrow panel.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -234,6 +234,45 @@ export function LaneGitBar({
     await refreshBranches();
   };
 
+  // Writes that leave this machine (push, publish) or delete a ref ask
+  // first. Asked HERE, at the click — never inside `run` — so the retry a git
+  // login sends is not asked twice.
+  const confirmRun = async (
+    opts: { title: string; message: string; destructive?: boolean },
+    action: Action,
+    body?: RunBody
+  ) => {
+    if (await confirmDialog({ destructive: false, confirmLabel: opts.title, ...opts })) {
+      void run(action, body);
+    }
+  };
+  const push = () =>
+    confirmRun(
+      git.upstream
+        ? {
+            title: t("gitBar.push"),
+            message: t("gitBar.pushConfirm", {
+              count: git.ahead ?? 0,
+              branch: git.branch,
+              upstream: git.upstream,
+            }),
+          }
+        : {
+            title: t("gitBar.publishBranch"),
+            message: t("gitBar.publishBranchConfirm", { branch: git.branch }),
+          },
+      "push"
+    );
+  const publish = () =>
+    confirmRun(
+      {
+        title: t("gitBar.publishApply"),
+        message: t("gitBar.publishConfirm", { branch: git.branch, url: url.trim() }),
+      },
+      "publish",
+      { url: url.trim() }
+    );
+
   const merge = async (branch: string) => {
     const ok = await confirmDialog({
       title: t("gitBar.merge"),
@@ -322,7 +361,11 @@ export function LaneGitBar({
               icon={<ArrowDown className="h-3.5 w-3.5" />}
               busy={busy === "pull"}
               disabled={!git.hasRemote || !!busy || merging}
-              title={merging ? t("gitBar.merging") : t("gitBar.pullHint")}
+              title={
+                merging
+                  ? t("gitBar.merging", { op: git.operation ?? "merge" })
+                  : t("gitBar.pullHint")
+              }
               onClick={() => run("pull")}
             />
             <Btn
@@ -338,7 +381,7 @@ export function LaneGitBar({
                   ? t("gitBar.publishBranchHint")
                   : t("gitBar.pushHint")
               }
-              onClick={() => run("push")}
+              onClick={() => void push()}
             />
             {!git.hasRemote && (
               <Btn
@@ -362,7 +405,7 @@ export function LaneGitBar({
               // beats a red box after it.
               title={
                 merging
-                  ? t("gitBar.merging")
+                  ? t("gitBar.merging", { op: git.operation ?? "merge" })
                   : dirty > 0
                     ? t("gitBar.switchDirty")
                     : t("gitBar.switchHint")
@@ -434,7 +477,17 @@ export function LaneGitBar({
             busy={busy === "branch-delete"}
             disabled={!picked || picked === git.branch || !!heldBy.get(picked)}
             title={t("gitBar.branchDeleteHint")}
-            onClick={() => void run("branch-delete", { branch: picked })}
+            onClick={() =>
+              void confirmRun(
+                {
+                  title: t("gitBar.branchDelete"),
+                  message: t("gitBar.branchDeleteConfirm", { branch: picked }),
+                  destructive: true,
+                },
+                "branch-delete",
+                { branch: picked }
+              )
+            }
           />
           {dirty > 0 && (
             <span className="text-[10px] text-status-warning">{t("gitBar.switchDirty")}</span>
@@ -474,7 +527,7 @@ export function LaneGitBar({
             value={url}
             onChange={(e) => setUrl(e.target.value)}
             onKeyDown={(e) => {
-              if (isSubmitEnter(e) && url.trim()) void run("publish", { url: url.trim() });
+              if (isSubmitEnter(e) && url.trim()) void publish();
             }}
             // The server decides which URLs are acceptable (https without a
             // token, ssh, user@host:path); this only names the two usual ones.
@@ -488,7 +541,7 @@ export function LaneGitBar({
             busy={busy === "publish"}
             disabled={!url.trim()}
             title={t("gitBar.publishHint")}
-            onClick={() => void run("publish", { url: url.trim() })}
+            onClick={() => void publish()}
           />
         </div>
       )}

client/src/components/lanes/LaneGitHeader.tsx

@@ -65,7 +65,10 @@ export function useLaneGitFacts(
         });
     };
     read();
-    const timer = setInterval(read, GIT_REFRESH_MS);
+    const timer = setInterval(
+      () => document.visibilityState === "visible" && read(),
+      GIT_REFRESH_MS
+    );
     return () => {
       alive = false;
       clearInterval(timer);

client/src/components/lanes/SessionReplay.tsx

@@ -108,7 +108,7 @@ export function SessionReplay({
         ? { runId: holder.id, laneId: lane.id, held: true }
         : await startInFreeTabDetailed(lane.id, { resumeSessionId: sessionId, prompt: text });
       setPrompt("");
-      images.forEach((i) => URL.revokeObjectURL(i.url));
+      images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
       setImages([]);
       onResumed(r.runId, r.laneId);
       // Held already: the prompt reached nothing yet — paste it there.

client/src/components/lanes/WorkspaceHome.tsx

@@ -6,7 +6,8 @@
  * prompt (the session view's tab bar `+` only starts a bare CLI or a shell,
  * `ConsoleTabs.tsx`). Inside
  * the box, like Claude Desktop's: AI (the session's own tool, the workspace's
- * by default) and one Model chip (`ModelMenu`: the tool's own list or the
+ * by default; its last row, **Open terminal**, is no AI — it starts a plain
+ * 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
@@ -38,6 +39,7 @@ import {
   Pencil,
   ArrowUp,
   Plus,
+  SquareTerminal,
   X,
 } from "lucide-react";
 import {
@@ -101,6 +103,9 @@ type HomeProps = Parameters<typeof HomeBody>[0];
 /** Keyed by workspace: every piece of state below (a half-typed prompt, the
  *  model, an open folder form, a late upload's answer) belongs to ONE
  *  workspace, and the page swaps `lane` without unmounting. */
+/** The AI menu row that opens a terminal; no catalog id can collide (ids are slugs). */
+const OPEN_TERMINAL = "__terminal__";
+
 export function WorkspaceHome(props: HomeProps) {
   return <HomeBody key={props.lane.id} {...props} />;
 }
@@ -202,6 +207,12 @@ function HomeBody({
   const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
   const [title, setTitle] = useState<string | null>(null);
   const fileInput = useRef<HTMLInputElement>(null);
+  const [ctxDrag, setCtxDrag] = useState(false);
+  const addFiles = async (picked: File[]) => {
+    for (const f of picked) {
+      if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
+    }
+  };
   const memoryPanel = useRef<HTMLDivElement>(null);
   useDialog(memoryOpen && !!memory, memoryPanel, () => setMemoryOpen(false));
   const recentCtx = useContextMenu<Session>();
@@ -305,6 +316,24 @@ function HomeBody({
     }
   };
 
+  // The AI menu's Open terminal: a plain shell in the first free slot, opened
+  // at once — the same start the session view's tab bar `+` makes.
+  const openTerminal = async () => {
+    if (startingRef.current) return;
+    startingRef.current = true;
+    setStarting(true);
+    setError(null);
+    try {
+      const runId = await startInFreeTab(lane.id, { shell: true });
+      navigate(`/workspace?lane=${lane.id}&run=${encodeURIComponent(runId)}`);
+    } catch (err) {
+      setError(message(err));
+    } finally {
+      startingRef.current = false;
+      setStarting(false);
+    }
+  };
+
   const text = promptWithImages(prompt, images);
   const start = async () => {
     // Enter reaches here past the disabled button: the same guards again.
@@ -328,7 +357,7 @@ function HomeBody({
         ...(claude && inWorktree && project?.root ? { worktree: true } : {}),
       });
       setPrompt("");
-      images.forEach((i) => URL.revokeObjectURL(i.url));
+      images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
       setImages([]);
       navigate(`/workspace?lane=${lane.id}&run=${encodeURIComponent(runId)}`);
     } catch (err) {
@@ -512,19 +541,29 @@ function HomeBody({
                 label={t("home.ai")}
                 value={tool}
                 onChange={(v) => {
+                  // Not a tool: an action. The AI chosen for the prompt stays.
+                  if (v === OPEN_TERMINAL) return void openTerminal();
                   setTool(v);
                   setBypass(false);
                 }}
-                options={toolOptions.map((id) => ({
-                  value: id,
-                  label: aiTools.label(id),
-                  icon: (
-                    <AiToolIcon
-                      tool={{ id, label: aiTools.label(id) }}
-                      className="h-4 w-4 !p-0.5"
-                    />
-                  ),
-                }))}
+                options={[
+                  ...toolOptions.map((id) => ({
+                    value: id,
+                    label: aiTools.label(id),
+                    icon: (
+                      <AiToolIcon
+                        tool={{ id, label: aiTools.label(id) }}
+                        className="h-4 w-4 !p-0.5"
+                      />
+                    ),
+                  })),
+                  {
+                    value: OPEN_TERMINAL,
+                    label: t("home.openTerminal"),
+                    icon: <SquareTerminal className="h-4 w-4 text-fg-muted" />,
+                    divider: true,
+                  },
+                ]}
               />
             </div>
             <div className="ml-auto flex items-center gap-1">
@@ -839,7 +878,26 @@ function HomeBody({
           </p>
         </section>
 
-        <section className={card}>
+        <section
+          data-testid="workspace-context-files"
+          className={`${card} ${ctxDrag ? "ring-2 ring-accent/50" : ""}`}
+          // Files dragged in from the OS are added like the + button's pick.
+          onDragOver={(e) => {
+            if (!view || !e.dataTransfer.types.includes("Files")) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            setCtxDrag(true);
+          }}
+          onDragLeave={(e) => {
+            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setCtxDrag(false);
+          }}
+          onDrop={(e) => {
+            setCtxDrag(false);
+            if (!view || e.dataTransfer.files.length === 0) return;
+            e.preventDefault();
+            void addFiles([...e.dataTransfer.files]);
+          }}
+        >
           <div className="flex items-center justify-between">
             <h3 className="text-sm font-medium text-fg-primary">{t("home.context")}</h3>
             <button
@@ -858,12 +916,10 @@ function HomeBody({
               type="file"
               multiple
               hidden
-              onChange={async (e) => {
+              onChange={(e) => {
                 const picked = [...(e.target.files ?? [])];
                 e.target.value = "";
-                for (const f of picked) {
-                  if (!(await run(() => api.lanes.addFile(lane.id, f)))) break;
-                }
+                void addFiles(picked);
               }}
             />
           </div>

client/src/components/lanes/WorkspaceSessionList.tsx

@@ -12,10 +12,8 @@
  * (`?lane=<id>&run=<runId>`, its tab in the session view; a live tab whose
  * session has no row yet — a bare tab before its first prompt — is listed as
  * **New session** from the run itself, and a live Terminal tab (`tool: "shell"`,
- * which never has a session) as **Terminal** — and under the sessions the last
- * `CLOSED_TERMINALS` closed ones (`GET /api/run/history?tool=shell`), whose
- * click opens a NEW shell tab (a shell cannot be resumed) and whose hover X or
- * right-click menu forgets the row (`DELETE /api/run/history/:id`); Ctrl/Cmd+click opens
+ * which never has a session) as **Terminal** while it is open — a closed one
+ * leaves no row; Ctrl/Cmd+click opens
  * it in a split beside the focused pane) — attaching, never starting or
  * resuming anything;
  * any other session opens in its workspace too (`?lane=<id>&session=<id>`,
@@ -32,23 +30,20 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { confirmDialog } from "../../lib/confirm";
 import { isSubmitEnter } from "../../lib/keys";
-import { Archive, GitBranch, SquareTerminal, X } from "lucide-react";
+import { Archive, GitBranch, SquareTerminal } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
-import { api, type RunHandle, type RunHistoryItem } from "../../lib/api";
-import { toast } from "../../lib/toast";
-import { startInFreeTab } from "./startSession";
+import { api, type RunHandle } from "../../lib/api";
 import { isSessionAwaitingInput, type Lane, type Session } from "../../lib/types";
 import { timeAgo } from "../../lib/format";
 import { ConfirmModal } from "../ConfirmModal";
 import { AiToolIcon } from "../AiToolIcon";
 import { useAiTools } from "../../hooks/useAiTools";
-import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { useThrottledValue } from "../../hooks/useThrottledValue";
+import { useContextMenu } from "../ContextMenu";
 import { SessionMenu } from "./SessionMenu";
 
 export const SESSION_LIMIT = 6;
-/** Closed Terminal tabs listed under a workspace's sessions. */
-export const CLOSED_TERMINALS = 3;
 
 /**
  * The live pane holding a session: the run the hooks bound it to
@@ -267,47 +262,16 @@ export function WorkspaceSessionList({
   );
   // The lane's own session/status/needs-you move on every hook, which is when
   // a session can appear or change state, and a tab opening or getting its
-  // session is too — re-read then, not on a timer.
-  const refreshKey = `${lane.session_id}:${lane.status}:${lane.needs_action}:${version}:${laneRuns
-    .map((r) => `${r.id}=${r.sessionId ?? ""}`)
-    .join(",")}`;
-  // A Terminal tab closing is when one joins the history.
-  const shellKey = liveShells.map((r) => r.id).join(",");
-  const [closedShells, setClosedShells] = useState<RunHistoryItem[]>([]);
-  useEffect(() => {
-    if (hidden) return;
-    let live = true;
-    api.run
-      // Live ones come back too (isLive): ask for enough to fill the list anyway.
-      .history({ laneId: lane.id, tool: "shell", limit: CLOSED_TERMINALS + 10 })
-      .then(
-        (r) => live && setClosedShells(r.items.filter((x) => !x.isLive).slice(0, CLOSED_TERMINALS))
-      )
-      .catch(() => undefined);
-    return () => {
-      live = false;
-    };
-  }, [lane.id, shellKey, hidden]);
-  const reopenShell = async (split: boolean) => {
-    try {
-      const runId = await startInFreeTab(lane.id, { shell: true });
-      navigate(
-        `/workspace?lane=${lane.id}&run=${encodeURIComponent(runId)}`,
-        split ? { state: { split: true } } : undefined
-      );
-    } catch (err) {
-      toast.error(err);
-    }
-  };
-  const closedCtx = useContextMenu<RunHistoryItem>();
-  const forgetShell = async (r: RunHistoryItem) => {
-    try {
-      await api.run.forgetHistory(r.id);
-      setClosedShells((all) => all.filter((x) => x.id !== r.id));
-    } catch (err) {
-      toast.error(err);
-    }
-  };
+  // session is too — re-read then, not on a timer. Throttled to one re-read per
+  // 3 s: two sessions in one workspace flip these on every hook. A rename or an
+  // archive (`version`) re-reads at once.
+  const hookKey = useThrottledValue(
+    `${lane.session_id}:${lane.status}:${lane.needs_action}:${laneRuns
+      .map((r) => `${r.id}=${r.sessionId ?? ""}`)
+      .join(",")}`,
+    3000
+  );
+  const refreshKey = `${hookKey}:${version}`;
   const own = useSessionPage({ lane: lane.id, archived: false, limit }, refreshKey);
   const sessions = own?.sessions ?? (own === null ? null : []);
   const more = own ? Math.max(0, own.total - own.sessions.length) : 0;
@@ -433,9 +397,7 @@ export function WorkspaceSessionList({
       {error}
     </p>
   );
-  // Not during a search, like the live ones: they have no name to match.
-  const closed = q ? [] : closedShells;
-  if (sessions !== null && shown.length === 0 && fresh.length === 0 && closed.length === 0) {
+  if (sessions !== null && shown.length === 0 && fresh.length === 0) {
     return (
       <>
         <p className="py-1 pl-[42px] text-[11px] text-fg-muted">{t("tree.noSessions")}</p>
@@ -592,42 +554,6 @@ export function WorkspaceSessionList({
             </li>
           );
         })}
-        {closed.map((r) => (
-          <li key={r.id} className="group relative">
-            <button
-              type="button"
-              data-testid={`workspace-terminal-closed-${r.id}`}
-              onClick={(e) => void reopenShell(e.ctrlKey || e.metaKey)}
-              onContextMenu={(e) => closedCtx.open(e, r)}
-              title={t("tree.closedTerminal")}
-              className="flex w-full items-center gap-2 rounded-md py-1 pl-2 pr-2 text-left text-[12px] text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
-            >
-              <span
-                aria-hidden
-                className="h-1.5 w-1.5 shrink-0 rounded-full border border-fg-muted"
-              />
-              <span className="sr-only">{t("tree.state.idle")}</span>
-              <span className="truncate">{t("tabs.terminal")}</span>
-              <span className="ml-auto shrink-0 text-[11px]">
-                {timeAgo(r.ended_at ?? r.started_at, true)}
-              </span>
-              <SquareTerminal
-                aria-hidden
-                className="h-3.5 w-3.5 shrink-0 opacity-70 group-hover:invisible"
-              />
-            </button>
-            <button
-              type="button"
-              data-testid={`workspace-terminal-forget-${r.id}`}
-              onClick={() => void forgetShell(r)}
-              title={t("tree.forgetTerminal")}
-              aria-label={t("tree.forgetTerminal")}
-              className="absolute right-1 top-1/2 -translate-y-1/2 rounded p-0.5 text-fg-muted opacity-0 hover:bg-surface-4 hover:text-fg-primary focus:opacity-100 group-hover:opacity-100"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          </li>
-        ))}
       </ul>
       {more > 0 && !q && (
         <button
@@ -651,42 +577,6 @@ export function WorkspaceSessionList({
           onClose={ctx.close}
         />
       )}
-      {closedCtx.menu && (
-        <ContextMenu
-          x={closedCtx.menu.x}
-          y={closedCtx.menu.y}
-          onClose={closedCtx.close}
-          testId={`terminal-menu-${closedCtx.menu.item.id}`}
-        >
-          <MenuItem
-            onSelect={() => {
-              closedCtx.close();
-              void reopenShell(false);
-            }}
-          >
-            {t("tree.reopenTerminal")}
-          </MenuItem>
-          <MenuItem
-            onSelect={() => {
-              closedCtx.close();
-              void reopenShell(true);
-            }}
-          >
-            {t("sessionMenu.openSplit")}
-          </MenuItem>
-          <MenuSeparator />
-          <MenuItem
-            danger
-            onSelect={() => {
-              const item = closedCtx.menu!.item;
-              closedCtx.close();
-              void forgetShell(item);
-            }}
-          >
-            {t("tree.forgetTerminal")}
-          </MenuItem>
-        </ContextMenu>
-      )}
       {sessionCtx.menu && (
         <SessionMenu
           x={sessionCtx.menu.x}

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

@@ -10,7 +10,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { AddLaneModal } from "../AddLaneModal";
 import { api } from "../../../lib/api";
@@ -119,6 +119,13 @@ function renderModal(over: Partial<React.ComponentProps<typeof AddLaneModal>> =
   );
 }
 
+/** The modal opens on Repo; worktree tests switch to Worktree first. */
+function renderWorktree(over: Partial<React.ComponentProps<typeof AddLaneModal>> = {}) {
+  const r = renderModal(over);
+  fireEvent.click(screen.getByRole("button", { name: "Worktree" }));
+  return r;
+}
+
 /** ConfirmModal focuses its Cancel button on a 0ms timer after mount, which
  *  races userEvent.type() and can eat the first keystroke. Let that timer fire,
  *  then click the field to reclaim focus before typing. */
@@ -127,7 +134,7 @@ async function focusField(user: ReturnType<typeof userEvent.setup>, el: HTMLElem
   await user.click(el);
 }
 
-/** Fills the default "Worktree" mode's form up through a resolved branch
+/** Fills the "Worktree" mode's form up through a resolved branch
  *  list, title, and new-branch name - everything Add lane needs to enable. */
 async function fillWorktreeForm(
   user: ReturnType<typeof userEvent.setup>,
@@ -173,7 +180,7 @@ describe("AddLaneModal — picking an existing branch (issue #34)", () => {
 
   it("lists the repo's existing worktrees once the path resolves", async () => {
     vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
-    renderModal();
+    renderWorktree();
     const user = userEvent.setup();
 
     const repoField = screen.getByLabelText("Source repository");
@@ -188,7 +195,7 @@ describe("AddLaneModal — picking an existing branch (issue #34)", () => {
   it("checks an existing branch out, sending no base", async () => {
     vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
     vi.mocked(api.lanes.worktree).mockResolvedValue({ lane: laneFixture({ id: 9 }) });
-    renderModal();
+    renderWorktree();
     const user = userEvent.setup();
 
     const repoField = screen.getByLabelText("Source repository");
@@ -211,7 +218,7 @@ describe("AddLaneModal — picking an existing branch (issue #34)", () => {
 
   it("greys out a branch another worktree already holds", async () => {
     vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
-    renderModal();
+    renderWorktree();
     const user = userEvent.setup();
 
     const repoField = screen.getByLabelText("Source repository");
@@ -229,7 +236,7 @@ describe("AddLaneModal — picking an existing branch (issue #34)", () => {
   it("lets the server name a new branch when the field is left empty", async () => {
     vi.mocked(api.lanes.branches).mockResolvedValue(withWorktrees);
     vi.mocked(api.lanes.worktree).mockResolvedValue({ lane: laneFixture({ id: 9 }) });
-    renderModal();
+    renderWorktree();
     const user = userEvent.setup();
 
     const repoField = screen.getByLabelText("Source repository");
@@ -253,11 +260,11 @@ describe("AddLaneModal — picking an existing branch (issue #34)", () => {
   });
 });
 
-describe("AddLaneModal — worktree mode (default)", () => {
+describe("AddLaneModal — worktree mode", () => {
   // The branch NAME is no longer part of this list: an empty one means "let
   // the server name it" (issue #34).
   it("disables confirm until a repo, a title and a resolved branch list are all present", () => {
-    renderModal();
+    renderWorktree();
     expect(screen.getByRole("button", { name: "Add workspace" })).toBeDisabled();
   });
 
@@ -267,7 +274,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
       current: "main",
       worktrees: [],
     });
-    renderModal();
+    renderWorktree();
     const user = userEvent.setup();
 
     const repoField = screen.getByLabelText("Source repository");
@@ -284,7 +291,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
 
   it("stays disabled and shows a quiet hint when the path is not a resolvable repo", async () => {
     vi.mocked(api.lanes.branches).mockRejectedValue(new Error("EBADSOURCEREPO"));
-    renderModal();
+    renderWorktree();
     const user = userEvent.setup();
 
     const repoField = screen.getByLabelText("Source repository");
@@ -303,7 +310,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
       current: "main",
       worktrees: [],
     });
-    renderModal();
+    renderWorktree();
     const user = userEvent.setup();
 
     const repoField = screen.getByLabelText("Source repository");
@@ -328,7 +335,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
     vi.mocked(api.lanes.worktree).mockResolvedValue({ lane: laneFixture({ id: 9 }) });
     const onAdded = vi.fn();
     const onClose = vi.fn();
-    renderModal({ onClose, onAdded });
+    renderWorktree({ onClose, onAdded });
     const user = userEvent.setup();
 
     await fillWorktreeForm(user, { title: "New feature", branch: "feat/new-feature" });
@@ -360,7 +367,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
     });
     vi.mocked(api.lanes.worktree).mockRejectedValue(new Error("EWORKTREEDIRCOLLISION"));
     const onClose = vi.fn();
-    renderModal({ onClose });
+    renderWorktree({ onClose });
     const user = userEvent.setup();
 
     await fillWorktreeForm(user, { title: "New feature" });
@@ -385,7 +392,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
       lane: { id: 42, title: "demo", cwd: "/lanes/demo", status: "provisioning" } as Lane,
     });
     const onAdded = vi.fn();
-    renderModal({ onAdded });
+    renderWorktree({ onAdded });
     const user = userEvent.setup();
 
     await fillWorktreeForm(user);
@@ -410,7 +417,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
     vi.mocked(api.lanes.mcpSync).mockRejectedValue(new Error("boom"));
     const onAdded = vi.fn();
     const onClose = vi.fn();
-    renderModal({ onAdded, onClose });
+    renderWorktree({ onAdded, onClose });
     const user = userEvent.setup();
 
     await fillWorktreeForm(user, { title: "demo2" });
@@ -431,7 +438,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
     });
     vi.mocked(api.lanes.mcpSync).mockRejectedValue(new Error("no mcp"));
     const onClose = vi.fn();
-    renderModal({ onClose });
+    renderWorktree({ onClose });
     const user = userEvent.setup();
 
     await fillWorktreeForm(user, { title: "demo3" });
@@ -463,7 +470,7 @@ describe("AddLaneModal — worktree mode (default)", () => {
       .mockResolvedValueOnce({ lane: laneFixture({ id: 45, status: "provisioning" }) })
       .mockResolvedValueOnce({ lane: laneFixture({ id: 45, status: "failed" }) });
     const onAdded = vi.fn();
-    renderModal({ onAdded });
+    renderWorktree({ onAdded });
     const user = userEvent.setup();
 
     await fillWorktreeForm(user, { title: "demo4" });
@@ -477,6 +484,12 @@ describe("AddLaneModal — worktree mode (default)", () => {
 });
 
 describe("AddLaneModal — repo mode (adopt)", () => {
+  it("opens in Repo mode by default, with no branch fields", () => {
+    renderModal();
+    expect(screen.getByRole("button", { name: "Repo" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.queryByTestId("add-lane-branch-section")).toBeNull();
+  });
+
   it("hides the branch fields and enables confirm on a path alone", async () => {
     renderModal();
     const user = userEvent.setup();
@@ -727,7 +740,7 @@ describe("AddLaneModal — working straight on main (no worktree)", () => {
 
   it("jumps to Repo mode from the branch choice", async () => {
     const user = userEvent.setup();
-    renderModal();
+    renderWorktree();
     const repoField = screen.getByLabelText("Source repository");
     await focusField(user, repoField);
     await user.type(repoField, "/Users/tester/projects/repo");

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

@@ -1,11 +1,11 @@
 /**
  * @file Tests for the Changes panel's CodeMirror editor: which changed lines
  * count as edited in place (blue) rather than added or removed whole, and the
- * editor's own diff classes on a real mount.
+ * editor's own diff classes on a real mount, and the per-block Undo / Keep bar.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi } from "vitest";
-import { render, waitFor } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
 import DiffEditor, { keepsText } from "../DiffEditor";
 
 // jsdom lays nothing out; CodeMirror's measuring asks a Range for its boxes.
@@ -72,6 +72,81 @@ describe("DiffEditor", () => {
     );
   });
 
+  it("side by side is JetBrains-shaped: no padding, one curved band per block", async () => {
+    const { container } = render(
+      <DiffEditor
+        layout="split"
+        // Three unchanged lines apart, or the diff joins the two into one chunk.
+        value={"a\nB\nc\nd\nf\nnew one\nnew two\ne"}
+        original={"a\nb\nc\nd\nf\ne"}
+        lang="plain"
+        label="Edit"
+        revertLabel="Revert"
+        onChange={vi.fn()}
+        onSave={vi.fn()}
+      />
+    );
+    await waitFor(() => expect(container.querySelectorAll(".cm-editor")).toHaveLength(2));
+    // Each side scrolls its own lines: nothing is padded to line them up.
+    expect(container.querySelector(".cm-mergeSpacer")).toBeNull();
+    expect(container.querySelectorAll(".cm-scroller")).toHaveLength(2);
+    await waitFor(() =>
+      expect(
+        container.querySelectorAll('[data-testid="lane-editor-connectors"] path')
+      ).toHaveLength(2)
+    );
+    const kinds = [
+      ...container.querySelectorAll<SVGPathElement>('[data-testid="lane-editor-connectors"] path'),
+    ].map((p) => p.dataset.kind);
+    expect(kinds).toEqual(["mod", "add"]);
+  });
+
+  it("» puts the original block back on the right, as an edit", async () => {
+    const onChange = vi.fn();
+    const { container } = render(
+      <DiffEditor
+        layout="split"
+        value={"keep\nconst x = 2;\nend"}
+        original={"keep\nconst x = 1;\nend"}
+        lang="ts"
+        label="Edit"
+        revertLabel="Revert"
+        onChange={onChange}
+        onSave={vi.fn()}
+      />
+    );
+    const button = await waitFor(() => {
+      const b = container.querySelector<HTMLButtonElement>(".cm-merge-revert button");
+      expect(b).not.toBeNull();
+      return b!;
+    });
+    fireEvent.mouseDown(button);
+    expect(onChange).toHaveBeenLastCalledWith("keep\nconst x = 1;\nend");
+  });
+
+  it("folds the same unchanged stretch away on both sides", async () => {
+    const same = Array.from({ length: 30 }, (_, i) => `line ${i}`).join("\n");
+    const { container } = render(
+      <DiffEditor
+        layout="split"
+        collapse
+        value={`${same}\nchanged`}
+        original={`${same}\noriginal`}
+        lang="plain"
+        label="Edit"
+        revertLabel="Revert"
+        onChange={vi.fn()}
+        onSave={vi.fn()}
+      />
+    );
+    await waitFor(() => expect(container.querySelectorAll(".cm-collapsedLines")).toHaveLength(2));
+    const [left, right] = [...container.querySelectorAll<HTMLElement>(".cm-collapsedLines")];
+    expect(left!.textContent).toBe(right!.textContent);
+    // One click opens the stretch on both sides.
+    fireEvent.click(right!);
+    await waitFor(() => expect(container.querySelectorAll(".cm-collapsedLines")).toHaveLength(0));
+  });
+
   it("folds unchanged lines away when collapsed, and offers Revert on a block", async () => {
     const same = Array.from({ length: 30 }, (_, i) => `line ${i}`).join("\n");
     const { container } = render(
@@ -90,4 +165,55 @@ describe("DiffEditor", () => {
     const buttons = [...container.querySelectorAll<HTMLButtonElement>(".cm-chunkButtons button")];
     expect(buttons.filter((b) => !b.hidden).map((b) => b.textContent)).toEqual(["Revert"]);
   });
+
+  it("puts an Undo / Keep bar under each block, by line, in place of Revert", async () => {
+    const onBlock = vi.fn();
+    const props = {
+      value: "a\nB\nc\nnew\ne",
+      original: "a\nb\nc\nd\ne",
+      lang: "plain",
+      label: "Edit",
+      revertLabel: "Revert",
+      onChange: vi.fn(),
+      onSave: vi.fn(),
+    };
+    const { container, rerender } = render(<DiffEditor {...props} onBlock={onBlock} />);
+    await waitFor(() =>
+      expect(container.querySelectorAll('[data-testid="lane-editor-block-bar"]')).toHaveLength(2)
+    );
+    expect(container.querySelector('[data-testid="lane-file-editor"]')).toHaveAttribute(
+      "data-bars",
+      "true"
+    );
+    const [first, second] = [
+      ...container.querySelectorAll<HTMLElement>('[data-testid="lane-editor-block-bar"]'),
+    ];
+    fireEvent.click(second!.querySelectorAll("button")[1]!);
+    expect(onBlock).toHaveBeenLastCalledWith("keep", {
+      oldFrom: 4,
+      oldCount: 1,
+      newFrom: 4,
+      newCount: 1,
+    });
+    // Undo asks twice.
+    const firstUndo = first!.querySelector("button")!;
+    fireEvent.click(firstUndo);
+    expect(onBlock).toHaveBeenCalledTimes(1);
+    fireEvent.click(firstUndo);
+    expect(onBlock).toHaveBeenLastCalledWith("undo", {
+      oldFrom: 2,
+      oldCount: 1,
+      newFrom: 2,
+      newCount: 1,
+    });
+    // Unsaved text (no onBlock): no bars, Revert back.
+    rerender(<DiffEditor {...props} />);
+    await waitFor(() =>
+      expect(container.querySelector('[data-testid="lane-editor-block-bar"]')).toBeNull()
+    );
+    expect(container.querySelector('[data-testid="lane-file-editor"]')).toHaveAttribute(
+      "data-bars",
+      "false"
+    );
+  });
 });

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

@@ -13,8 +13,8 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, waitFor, act, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { LaneChangesPanel } from "../LaneChangesPanel";
-import { confirmDiscard } from "../../../lib/confirm";
+import { LaneChangesPanel, gitChangeFor } from "../LaneChangesPanel";
+import { confirmDialog, confirmDiscard } from "../../../lib/confirm";
 import { api } from "../../../lib/api";
 import type { LaneChanges } from "../../../lib/types";
 
@@ -153,6 +153,14 @@ beforeEach(() => {
       },
     ],
   });
+  vi.mocked(api.lanes.gitBranches)
+    .mockReset()
+    .mockResolvedValue({
+      available: true,
+      branches: ["feat/thing", "other"],
+      current: "feat/thing",
+      worktrees: [],
+    });
   vi.mocked(api.lanes.gitLs)
     .mockReset()
     .mockResolvedValue({
@@ -255,7 +263,8 @@ describe("LaneChangesPanel", () => {
     render(<LaneChangesPanel laneId={7} />);
     await screen.findByTestId("lane-changes-overview");
 
-    await user.click(screen.getByRole("button", { name: "vs base" }));
+    // No git facts (an older server): the base has no name to show.
+    await user.click(screen.getByRole("button", { name: "Compared to base branch" }));
     await waitFor(() => expect(api.lanes.changes).toHaveBeenCalledWith(7, { range: "branch" }));
   });
 
@@ -739,6 +748,129 @@ describe("LaneChangesPanel", () => {
     expect(await screen.findByTestId("lane-changes-commit-chip")).toHaveTextContent("aaaaaaa");
   });
 
+  describe("history rewrites, amend and vs base", () => {
+    const facts = (over: Record<string, unknown> = {}) => ({
+      available: true as const,
+      branch: "feat/thing",
+      head: "aaaaaaa",
+      subject: "feat: the commit",
+      dirty: 2,
+      untracked: 1,
+      files: [],
+      hasRemote: false,
+      upstream: null,
+      ahead: null,
+      behind: null,
+      base: "main",
+      ...over,
+    });
+    const commitMenu = async (user: ReturnType<typeof userEvent.setup>) => {
+      const row = await within(await screen.findByTestId("lane-changes-history")).findByText(
+        "feat: the commit"
+      );
+      await user.pointer({ keys: "[MouseRight]", target: row });
+      return screen.getByTestId("lane-changes-commit-menu");
+    };
+    const withParent = () =>
+      vi.mocked(api.lanes.gitLog).mockResolvedValue({
+        available: true,
+        commits: [
+          {
+            sha: "a".repeat(40),
+            short: "aaaaaaa",
+            subject: "feat: the commit",
+            author: "t",
+            date: "2026-09-22T01:00:00Z",
+            refs: ["HEAD -> feat/thing"],
+            parents: ["b".repeat(40)],
+          },
+        ],
+      });
+
+    it("reverts a commit and undoes the top one from the history menu", async () => {
+      withParent();
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} />);
+      await screen.findByTestId("lane-changes-overview");
+      await user.click(screen.getByRole("button", { name: "History" }));
+
+      await user.click(within(await commitMenu(user)).getByText("Revert this commit"));
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "revert", { sha: "a".repeat(40) });
+
+      await user.click(within(await commitMenu(user)).getByText("Undo commit (keep changes)"));
+      await waitFor(() =>
+        expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "undo-commit", {
+          confirm: true,
+          sha: "a".repeat(40),
+        })
+      );
+    });
+
+    it("cherry-picks only from another branch's history", async () => {
+      withParent();
+      vi.mocked(api.lanes.git).mockResolvedValue(facts());
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} />);
+      await screen.findByTestId("lane-changes-overview");
+      await user.click(screen.getByRole("button", { name: "History" }));
+      expect(within(await commitMenu(user)).queryByText(/Cherry-pick/)).toBeNull();
+      await user.keyboard("{Escape}");
+
+      await user.selectOptions(await screen.findByTestId("lane-changes-history-ref"), "other");
+      await waitFor(() =>
+        expect(api.lanes.gitLog).toHaveBeenLastCalledWith(7, { limit: 50, ref: "other" })
+      );
+      await user.click(within(await commitMenu(user)).getByText("Cherry-pick onto feat/thing"));
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "cherry-pick", { sha: "a".repeat(40) });
+    });
+
+    it("asks before a revert and an amend, and a No sends nothing", async () => {
+      withParent();
+      vi.mocked(confirmDialog).mockClear();
+      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-amend"));
+      await user.click(screen.getByRole("button", { name: "Amend" }));
+      expect(confirmDialog).toHaveBeenCalledTimes(1);
+
+      await user.click(screen.getByRole("button", { name: "History" }));
+      vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+      await user.click(within(await commitMenu(user)).getByText("Revert this commit"));
+      await waitFor(() => expect(confirmDialog).toHaveBeenCalledTimes(2));
+      expect(api.lanes.gitAction).not.toHaveBeenCalled();
+    });
+
+    it("amends the last commit, keeping its message when none is typed", async () => {
+      vi.mocked(api.lanes.git).mockResolvedValue(facts());
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} />);
+      await screen.findByTestId("lane-changes-overview");
+      await user.click(screen.getByTestId("lane-changes-amend"));
+      await user.click(screen.getByRole("button", { name: "Amend" }));
+      await waitFor(() =>
+        expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "amend", { sha: "aaaaaaa" })
+      );
+    });
+
+    it("names the base in full, and on the base branch itself shows no toggle at all", async () => {
+      vi.mocked(api.lanes.git).mockResolvedValue(facts());
+      const { unmount } = render(<LaneChangesPanel laneId={7} />);
+      expect(await screen.findByRole("button", { name: "Compared to main" })).toBeInTheDocument();
+      unmount();
+
+      vi.mocked(api.lanes.git).mockResolvedValue(facts({ branch: "main" }));
+      render(<LaneChangesPanel laneId={7} />);
+      await screen.findByTestId("lane-git");
+      await screen.findByTestId("lane-changes-overview");
+      expect(screen.queryByRole("button", { name: "Compared to main" })).toBeNull();
+      // A lone "Uncommitted" would be a toggle with nothing to toggle to.
+      expect(screen.queryByRole("button", { name: "Uncommitted" })).toBeNull();
+    });
+  });
+
   it("expands a folder in place, keeping its siblings visible, instead of navigating into it", async () => {
     const user = userEvent.setup();
     vi.mocked(api.lanes.gitTree).mockImplementation(async (_id, path) =>
@@ -937,7 +1069,7 @@ describe("LaneChangesPanel", () => {
     expect(screen.getByTestId("lane-file-editor")).toHaveValue("xy");
   });
 
-  it("unstages every staged file in one call, on the same row as Stage all and commit", async () => {
+  it("unstages every staged file in one call, in the same pinned bar as Stage all and commit", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);
     await screen.findByTestId("lane-changes-overview");
@@ -1647,3 +1779,44 @@ describe("a merge in progress (issue #45)", () => {
     );
   });
 });
+
+describe("gitChangeFor", () => {
+  // One hunk, two change blocks three lines apart: an edit and a removal.
+  const file = {
+    path: "a.txt",
+    status: " M",
+    untracked: false,
+    added: 1,
+    deleted: 2,
+    binary: false,
+    hunks: [
+      {
+        header: "@@ -1,6 +1,5 @@",
+        context: "",
+        oldStart: 1,
+        newStart: 1,
+        lines: [
+          { type: "del" as const, oldLine: 1, newLine: null, text: "a" },
+          { type: "add" as const, oldLine: null, newLine: 1, text: "A" },
+          { type: "ctx" as const, oldLine: 2, newLine: 2, text: "b" },
+          { type: "ctx" as const, oldLine: 3, newLine: 3, text: "c" },
+          { type: "ctx" as const, oldLine: 4, newLine: 4, text: "d" },
+          { type: "del" as const, oldLine: 5, newLine: null, text: "e" },
+          { type: "ctx" as const, oldLine: 6, newLine: 5, text: "f" },
+        ],
+      },
+    ],
+  };
+
+  it("finds git's block by its line span on both sides", () => {
+    expect(gitChangeFor(file, { oldFrom: 1, oldCount: 1, newFrom: 1, newCount: 1 })?.block).toBe(0);
+    // A pure removal: matched on the old side alone.
+    expect(gitChangeFor(file, { oldFrom: 5, oldCount: 1, newFrom: 5, newCount: 0 })?.block).toBe(1);
+  });
+
+  it("finds none when the editor split the change differently", () => {
+    expect(
+      gitChangeFor(file, { oldFrom: 1, oldCount: 2, newFrom: 1, newCount: 1 })
+    ).toBeUndefined();
+  });
+});

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

@@ -19,6 +19,7 @@ import {
   visibleRange,
 } from "../LaneDiffView";
 import type { LaneChangeFile } from "../../../lib/types";
+import { bandPath } from "../../../lib/diffConnectors";
 
 const FILE: LaneChangeFile = {
   path: "server/lib/git-ops.js",
@@ -59,8 +60,8 @@ describe("LaneDiffView — side by side", () => {
     expect(screen.getByTestId("lane-diff-split-right").className).toContain("overflow-auto");
   });
 
-  it("keeps an empty filler row one line tall, so the columns stay in step", () => {
-    // Two lines removed, none added: the right column's two rows are fillers.
+  it("pads the shorter side only at the hunk's end, each pad one line tall", () => {
+    // Two lines removed, none added: the right column's two rows are padding.
     const file = fileWith([
       { type: "del", oldLine: 1, newLine: null, text: "gone one" },
       { type: "del", oldLine: 2, newLine: null, text: "gone two" },
@@ -72,7 +73,39 @@ describe("LaneDiffView — side by side", () => {
         .querySelectorAll<HTMLElement>("div.flex.w-max"),
     ];
     expect(fillers).toHaveLength(2);
-    for (const row of fillers) expect(row.style.minHeight).toBe("16px");
+    for (const row of fillers) expect(row.style.height).toBe("16px");
+  });
+
+  it("packs each side's own lines, JetBrains-style, and joins every block with a band", () => {
+    const file = fileWith([
+      { type: "ctx", oldLine: 1, newLine: 1, text: "top" },
+      { type: "del", oldLine: 2, newLine: null, text: "old a" },
+      { type: "del", oldLine: 3, newLine: null, text: "old b" },
+      { type: "add", oldLine: null, newLine: 2, text: "new a" },
+      { type: "ctx", oldLine: 4, newLine: 3, text: "mid" },
+      { type: "add", oldLine: null, newLine: 4, text: "extra" },
+      { type: "ctx", oldLine: 5, newLine: 5, text: "end" },
+    ]);
+    render(<LaneDiffView file={file} layout="split" />);
+    const texts = (id: string) =>
+      [...screen.getByTestId(id).querySelectorAll<HTMLElement>("div.flex.w-max")].map((r) =>
+        r.textContent?.replace(/^\d+/, "")
+      );
+    // No gap inside a hunk: a side's lines follow one another (5 each, no pad).
+    expect(texts("lane-diff-split-left")).toEqual(["top", "old a", "old b", "mid", "end"]);
+    expect(texts("lane-diff-split-right")).toEqual(["top", "new a", "mid", "extra", "end"]);
+    // Two blocks, two bands: rows start under the one-row hunk header.
+    const bands = [
+      ...screen.getByTestId("lane-diff-connectors").querySelectorAll<SVGPathElement>("path"),
+    ];
+    expect(bands.map((b) => b.dataset.kind)).toEqual(["mod", "add"]);
+    expect(bands[0]!.getAttribute("d")).toBe(
+      bandPath(36, 2 * ROW_PX, 4 * ROW_PX, 2 * ROW_PX, 3 * ROW_PX)
+    );
+    // The insertion is a wedge from the left's point between "mid" and "end".
+    expect(bands[1]!.getAttribute("d")).toBe(
+      bandPath(36, 5 * ROW_PX, 5 * ROW_PX, 4 * ROW_PX, 5 * ROW_PX)
+    );
   });
 
   it("caps a review diff only when it windows; the single-file view fills its parent", () => {
@@ -414,8 +447,8 @@ describe("LaneDiffView — windowing", () => {
     expect(l.length).toBeLessThan(300);
     expect(l).toHaveLength(r.length);
     expect(right.textContent).toContain("line 2001;");
-    // same rows: the right column's add has its filler row on the left
-    expect(left.textContent).toContain("line 2000;");
+    // Packed: the left holds only the context lines, so it runs twice as far.
+    expect(left.textContent).toContain("line 4000;");
   });
 
   it("windows a whole-file read too", () => {

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

@@ -14,6 +14,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { LaneGitBar } from "../LaneGitBar";
 import { api } from "../../../lib/api";
+import { confirmDialog } from "../../../lib/confirm";
 import type { LaneGitFacts } from "../../../lib/types";
 
 // A merge asks through the themed confirm (its host lives in App): yes.
@@ -129,6 +130,40 @@ describe("LaneGitBar", () => {
     expect(onChanged).toHaveBeenCalled();
   });
 
+  it("asks before every outward or ref-deleting write, and a No sends nothing", async () => {
+    const user = userEvent.setup();
+    vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+    const { rerender } = render(
+      <LaneGitBar laneId={3} git={facts({ ahead: 2 })} onChanged={vi.fn()} />
+    );
+    await user.click(screen.getByRole("button", { name: /Push/ }));
+    expect(confirmDialog).toHaveBeenLastCalledWith(
+      expect.objectContaining({ message: expect.stringContaining("2 commit") })
+    );
+    expect(api.lanes.gitAction).not.toHaveBeenCalled();
+
+    // A Yes goes through.
+    await user.click(screen.getByRole("button", { name: /Push/ }));
+    await waitFor(() => expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "push", {}));
+
+    vi.mocked(api.lanes.gitAction).mockClear();
+    vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+    rerender(
+      <LaneGitBar
+        laneId={3}
+        git={facts({ hasRemote: false, upstream: null, ahead: null, behind: null })}
+        onChanged={vi.fn()}
+      />
+    );
+    await user.click(screen.getByRole("button", { name: "Publish…" }));
+    await user.type(screen.getByLabelText(/Remote URL/), "git@host:o/r.git");
+    await user.click(screen.getByRole("button", { name: "Publish" }));
+    expect(confirmDialog).toHaveBeenLastCalledWith(
+      expect.objectContaining({ message: expect.stringContaining("git@host:o/r.git") })
+    );
+    expect(api.lanes.gitAction).not.toHaveBeenCalled();
+  });
+
   it("calls a first push of a branch with no upstream 'Publish branch'", async () => {
     const user = userEvent.setup();
     render(

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

@@ -12,7 +12,7 @@
  */
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
 import type { Lane, Session } from "../../../lib/types";
@@ -338,6 +338,21 @@ describe("WorkspaceHome", () => {
     });
   });
 
+  it("opens a terminal tab at once from the AI menu, without a prompt", async () => {
+    const user = userEvent.setup();
+    renderHome();
+    await screen.findByTestId("workspace-recent-s-old");
+    const ai = screen.getByTestId("workspace-home-tool");
+    await user.click(within(ai).getByRole("button"));
+    await user.click(screen.getByRole("option", { name: /Open terminal/ }));
+    expect(api.lanes.action).toHaveBeenCalledWith(1, "start", { slot: "auto", shell: true });
+    await waitFor(() =>
+      expect(screen.getByTestId("where").textContent).toMatch(/^\/workspace\?lane=1&run=/)
+    );
+    // The AI picked for the next prompt is untouched.
+    expect(within(ai).getByRole("button")).not.toHaveTextContent(/terminal/i);
+  });
+
   it("says so when the server finds all ten sessions in use", async () => {
     vi.mocked(api.lanes.action).mockRejectedValueOnce(
       Object.assign(new Error("every tab of this workspace is busy"), { code: "ERUNLIVE" })
@@ -454,6 +469,13 @@ describe("WorkspaceHome", () => {
     const file = new File(["# notes"], "notes.md", { type: "text/markdown" });
     await user.upload(screen.getByTestId("workspace-file-input"), file);
     expect(api.lanes.addFile).toHaveBeenCalledWith(1, file);
+    const a = new File(["a"], "a.csv", { type: "text/csv" });
+    const b = new File(["b"], "b.log", { type: "" });
+    fireEvent.drop(screen.getByTestId("workspace-context-files"), {
+      dataTransfer: { types: ["Files"], files: [a, b] },
+    });
+    await waitFor(() => expect(api.lanes.addFile).toHaveBeenCalledWith(1, b));
+    expect(api.lanes.addFile).toHaveBeenCalledWith(1, a);
     await user.click(screen.getByRole("button", { name: "Remove spec.pdf" }));
     expect(api.lanes.removeSource).toHaveBeenCalledWith(1, 7);
   });

client/src/components/lanes/splitDiff.ts

@@ -0,0 +1,425 @@
+/**
+ * @file The file editor's side-by-side layout, JetBrains-shaped: the original
+ * (read-only, left) and the working file (editable, right) are two
+ * CodeMirror views in their OWN scrollers, with no padding to line them up —
+ * each shows its real lines — and the gutter between them draws, for every
+ * changed block, a curved band joining its lines on the left to its lines on
+ * the right (`lib/diffConnectors.ts`), with a » that reverts the block.
+ * Scrolling either side scrolls the other to the matching line (`mapLine`:
+ * 1:1 outside a block, proportional inside one).
+ *
+ * What @codemirror/merge's MergeView gave the old layout is kept, by its own
+ * public pieces: the chunks are `Chunk.build` at mount and `Chunk.updateB` on
+ * every edit of the right side; the changed-line, changed-text and gutter
+ * classes, the editor-root `cm-merge-a`/`cm-merge-b` classes, the folded
+ * unchanged stretches (opened on both sides at once) and the revert's text
+ * rule are ported from it, so DiffEditor's theme and colouring apply as before.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import {
+  EditorState,
+  RangeSet,
+  StateEffect,
+  StateField,
+  Text,
+  type Extension,
+} from "@codemirror/state";
+import {
+  Decoration,
+  EditorView,
+  GutterMarker,
+  WidgetType,
+  gutterLineClass,
+  type DecorationSet,
+} from "@codemirror/view";
+import { Chunk, getChunks } from "@codemirror/merge";
+import { bandPath, mapLine, type Span } from "../../lib/diffConnectors";
+
+/** The chunks a side carries, the side it is, and (right side) the original. */
+type SplitState = { chunks: readonly Chunk[]; side: "a" | "b"; orig: Text | null };
+
+const setChunks = StateEffect.define<readonly Chunk[]>();
+const uncollapse = StateEffect.define<number>();
+
+/** Each side's chunks. The right side recomputes them as it is edited; the
+ *  left, read-only, is handed the new list (`setChunks`). */
+const splitField = StateField.define<SplitState>({
+  create: () => ({ chunks: [], side: "b", orig: null }),
+  update(v, tr) {
+    for (const e of tr.effects) if (e.is(setChunks)) return { ...v, chunks: e.value };
+    if (v.orig && tr.docChanged) {
+      return { ...v, chunks: Chunk.updateB(v.chunks, v.orig, tr.state.doc, tr.changes) };
+    }
+    return v;
+  },
+});
+
+/** The chunks and side of an editor in either merge layout — unified (the
+ *  merge package's own state) or this split. */
+export function chunksOf(
+  state: EditorState
+): { chunks: readonly Chunk[]; side: "a" | "b" | null } | null {
+  return getChunks(state) ?? state.field(splitField, false) ?? null;
+}
+
+const changedLine = Decoration.line({ class: "cm-changedLine" });
+const changedText = Decoration.mark({ class: "cm-changedText" });
+const changedGutter = new (class extends GutterMarker {
+  override elementClass = "cm-changedLineGutter";
+})();
+
+/** The lines (and, inside them, the changed spans) of this side's chunks. */
+function changedRanges(state: EditorState) {
+  const { chunks, side } = state.field(splitField);
+  const doc = state.doc;
+  const lines: number[] = [];
+  const spans: [number, number][] = [];
+  for (const c of chunks) {
+    const [from, to] = side === "a" ? [c.fromA, c.toA] : [c.fromB, c.toB];
+    if (from >= to) continue;
+    const last = doc.lineAt(Math.min(to - 1, doc.length)).number;
+    for (let n = doc.lineAt(from).number; n <= last; n += 1) {
+      const line = doc.line(n);
+      lines.push(line.from);
+      for (const ch of c.changes) {
+        const s = Math.max(line.from, from + (side === "a" ? ch.fromA : ch.fromB));
+        const e = Math.min(line.to, from + (side === "a" ? ch.toA : ch.toB));
+        if (s < e) spans.push([s, e]);
+      }
+    }
+  }
+  return { lines, spans };
+}
+
+const chunkDecorations = EditorView.decorations.compute([splitField], (state) => {
+  const { lines, spans } = changedRanges(state);
+  return Decoration.set(
+    [...lines.map((p) => changedLine.range(p)), ...spans.map(([s, e]) => changedText.range(s, e))],
+    true
+  );
+});
+const chunkGutter = gutterLineClass.compute([splitField], (state) =>
+  RangeSet.of(
+    changedRanges(state).lines.map((p) => changedGutter.range(p)),
+    true
+  )
+);
+
+/** The other side's editor, for a fold opened on one side to open on both. */
+const siblings = new WeakMap<EditorView, EditorView>();
+
+/** `pos` on one side, moved past the chunks before it to the other (ported). */
+function mapPos(pos: number, chunks: readonly Chunk[], isA: boolean) {
+  let ours = 0;
+  let theirs = 0;
+  for (const c of chunks) {
+    if ((isA ? c.fromA : c.fromB) >= pos) break;
+    [ours, theirs] = isA ? [c.toA, c.toB] : [c.toB, c.toA];
+  }
+  return theirs + (pos - ours);
+}
+
+class CollapseWidget extends WidgetType {
+  constructor(readonly lines: number) {
+    super();
+  }
+  override eq(o: CollapseWidget) {
+    return this.lines === o.lines;
+  }
+  toDOM(view: EditorView) {
+    const el = document.createElement("div");
+    el.className = "cm-collapsedLines";
+    el.textContent = view.state.phrase("$ unchanged lines", this.lines);
+    el.addEventListener("click", (e) => {
+      const pos = view.posAtDOM(e.target as Node);
+      view.dispatch({ effects: uncollapse.of(pos) });
+      const { chunks, side } = view.state.field(splitField);
+      siblings.get(view)?.dispatch({ effects: uncollapse.of(mapPos(pos, chunks, side === "a")) });
+    });
+    return el;
+  }
+  override ignoreEvent(e: Event) {
+    return e instanceof MouseEvent;
+  }
+  override get estimatedHeight() {
+    return 27;
+  }
+}
+
+/** The folded unchanged stretches: built once at mount, then only mapped,
+ *  opened by a click, and dropped where an edit grows a chunk into them. */
+const collapsedField = StateField.define<DecorationSet>({
+  create: () => Decoration.none,
+  update(deco, tr) {
+    deco = deco.map(tr.changes);
+    for (const e of tr.effects) {
+      if (e.is(uncollapse)) deco = deco.update({ filter: (from) => from !== e.value });
+    }
+    const { chunks, side } = tr.state.field(splitField);
+    if (deco.size && chunks !== tr.startState.field(splitField).chunks) {
+      const touching: number[] = [];
+      for (const c of chunks) {
+        deco.between(side === "a" ? c.fromA : c.fromB, side === "a" ? c.toA : c.toB, (from) => {
+          touching.push(from);
+        });
+      }
+      if (touching.length) deco = deco.update({ filter: (from) => !touching.includes(from) });
+    }
+    return deco;
+  },
+  provide: (f) => EditorView.decorations.from(f),
+});
+
+function buildCollapsed(state: EditorState, margin: number, minLines: number) {
+  const { chunks, side } = state.field(splitField);
+  const doc = state.doc;
+  const out = [];
+  let prev = 1;
+  for (let i = 0; ; i += 1) {
+    const c = i < chunks.length ? chunks[i]! : null;
+    const from = i ? prev + margin : 1;
+    const to = c ? doc.lineAt(side === "a" ? c.fromA : c.fromB).number - 1 - margin : doc.lines;
+    const lines = to - from + 1;
+    if (lines >= minLines) {
+      out.push(
+        Decoration.replace({ widget: new CollapseWidget(lines), block: true }).range(
+          doc.line(from).from,
+          doc.line(to).to
+        )
+      );
+    }
+    if (!c) break;
+    prev = doc.lineAt(Math.min(doc.length, side === "a" ? c.toA : c.toB)).number;
+  }
+  return Decoration.set(out);
+}
+
+/** A chunk side as 0-based half-open lines; an empty side is the point
+ *  before the line it sits above (past the end: after the last line). */
+function sideLines(doc: Text, from: number, to: number): [number, number] {
+  const first = from > doc.length ? doc.lines : doc.lineAt(from).number - 1;
+  if (from >= to) return [first, first];
+  return [first, doc.lineAt(Math.min(to - 1, doc.length)).number];
+}
+
+function spansOf(chunks: readonly Chunk[], a: Text, b: Text): Span[] {
+  return chunks.map((c) => {
+    const [a0, a1] = sideLines(a, c.fromA, c.toA);
+    const [b0, b1] = sideLines(b, c.fromB, c.toB);
+    return { a0, a1, b0, b1 };
+  });
+}
+
+/** Where the document starts inside the view's scroll content. */
+const docOffset = (v: EditorView) =>
+  v.documentTop - v.scrollDOM.getBoundingClientRect().top + v.scrollDOM.scrollTop;
+
+/** The fractional line at the top of the view (a folded stretch spreads its
+ *  height over the lines it hides). */
+function topLine(v: EditorView) {
+  const h = Math.max(0, v.scrollDOM.scrollTop - docOffset(v));
+  const blk = v.lineBlockAtHeight(h);
+  const first = v.state.doc.lineAt(blk.from).number - 1;
+  const n = v.state.doc.lineAt(blk.to).number - first;
+  const frac = blk.height > 0 ? Math.min(1, Math.max(0, (h - blk.top) / blk.height)) : 0;
+  return first + frac * n;
+}
+
+/** Document y of a fractional line (0-based). */
+function yOf(v: EditorView, line: number) {
+  const doc = v.state.doc;
+  if (line >= doc.lines) return v.lineBlockAt(doc.length).bottom;
+  const blk = v.lineBlockAt(doc.line(Math.max(0, Math.floor(line)) + 1).from);
+  const first = doc.lineAt(blk.from).number - 1;
+  const n = doc.lineAt(blk.to).number - first;
+  return blk.top + ((line - first) / n) * blk.height;
+}
+
+/** The gutter's width: room for an S-curve and the » under it. */
+const GUTTER_PX = 40;
+const BAND: Record<"add" | "del" | "mod", string> = {
+  add: "fill-status-success/20 stroke-status-success/60",
+  del: "fill-status-danger/20 stroke-status-danger/60",
+  mod: "fill-diff-mod/20 stroke-diff-mod/60",
+};
+const SVG = "http://www.w3.org/2000/svg";
+
+export function splitDiff({
+  parent,
+  original,
+  value,
+  extA,
+  extB,
+  collapse,
+  revertLabel,
+}: {
+  parent: HTMLElement;
+  original: string;
+  value: string;
+  /** Each side's own extensions (DiffEditor's colours, keymaps, …). */
+  extA: Extension[];
+  extB: Extension[];
+  collapse?: { margin: number; minSize: number };
+  revertLabel: string;
+}): { a: EditorView; b: EditorView; destroy: () => void } {
+  const origDoc = Text.of(original.split("\n"));
+  const chunks0 = Chunk.build(origDoc, Text.of(value.split("\n")));
+
+  const root = parent.appendChild(document.createElement("div"));
+  root.className = "flex h-full min-h-0";
+  const pane = () => {
+    const el = document.createElement("div");
+    el.className = "h-full min-w-0 flex-1";
+    return el;
+  };
+  const paneA = root.appendChild(pane());
+  const gutter = root.appendChild(document.createElement("div"));
+  gutter.className =
+    "cm-merge-revert relative h-full shrink-0 overflow-hidden border-x border-border-light bg-surface-1";
+  gutter.style.width = `${GUTTER_PX}px`;
+  gutter.dataset.testid = "lane-editor-connectors";
+  const svg = gutter.appendChild(document.createElementNS(SVG, "svg"));
+  svg.setAttribute("class", "absolute inset-0 h-full w-full");
+  const buttons = gutter.appendChild(document.createElement("div"));
+  const paneB = root.appendChild(pane());
+
+  let frame = 0;
+  const draw = () => {
+    if (frame) return;
+    const run = () => {
+      frame = 0;
+      paint();
+    };
+    frame =
+      typeof requestAnimationFrame === "function"
+        ? requestAnimationFrame(run)
+        : window.setTimeout(run);
+  };
+
+  const side = (s: "a" | "b"): Extension[] => [
+    splitField.init(() => ({ chunks: chunks0, side: s, orig: s === "b" ? origDoc : null })),
+    chunkDecorations,
+    chunkGutter,
+    EditorView.editorAttributes.of({ class: `cm-merge-${s}` }),
+    ...(collapse
+      ? [collapsedField.init((st) => buildCollapsed(st, collapse.margin, collapse.minSize))]
+      : []),
+    EditorView.updateListener.of((u) => {
+      if (u.docChanged || u.geometryChanged || u.viewportChanged) draw();
+    }),
+  ];
+
+  const a = new EditorView({
+    parent: paneA,
+    state: EditorState.create({ doc: origDoc, extensions: [...side("a"), ...extA] }),
+  });
+  const b = new EditorView({
+    parent: paneB,
+    state: EditorState.create({
+      doc: value,
+      extensions: [
+        ...side("b"),
+        ...extB,
+        // The left side is told the chunks the right side's edit produced.
+        EditorView.updateListener.of((u) => {
+          const now = u.state.field(splitField).chunks;
+          if (now !== u.startState.field(splitField).chunks)
+            a.dispatch({ effects: setChunks.of(now) });
+        }),
+      ],
+    }),
+  });
+  siblings.set(a, b);
+  siblings.set(b, a);
+
+  const spans = () => spansOf(b.state.field(splitField).chunks, a.state.doc, b.state.doc);
+
+  // Scrolling one side scrolls the other to the line beside it. A scroll we
+  // caused comes back as the other side's own event: `echo` holds where we
+  // put it, so that event is recognised and not mirrored back.
+  const echo = { a: -1, b: -1 };
+  const follow = (from: "a" | "b") => () => {
+    const [src, dst, to] = from === "a" ? [a, b, "b" as const] : [b, a, "a" as const];
+    if (Math.abs(src.scrollDOM.scrollTop - echo[from]) < 1) {
+      echo[from] = -1;
+      draw();
+      return;
+    }
+    const line = mapLine(topLine(src), spans(), from === "a");
+    const target = Math.round(yOf(dst, line) + docOffset(dst));
+    const before = dst.scrollDOM.scrollTop;
+    dst.scrollDOM.scrollTop = target;
+    if (dst.scrollDOM.scrollTop !== before) echo[to] = dst.scrollDOM.scrollTop;
+    draw();
+  };
+  const onA = follow("a");
+  const onB = follow("b");
+  a.scrollDOM.addEventListener("scroll", onA, { passive: true });
+  b.scrollDOM.addEventListener("scroll", onB, { passive: true });
+  const resize = typeof ResizeObserver === "function" ? new ResizeObserver(draw) : null;
+  resize?.observe(root);
+
+  // » puts the original block back on the right (the merge package's rule:
+  // a non-empty source brings its line break unless it ends the document).
+  buttons.addEventListener("mousedown", (e) => {
+    const i = Number((e.target as HTMLElement).closest<HTMLElement>("[data-chunk]")?.dataset.chunk);
+    const c = b.state.field(splitField).chunks[i];
+    if (!c) return;
+    let insert = a.state.sliceDoc(c.fromA, Math.max(c.fromA, c.toA - 1));
+    if (c.fromA !== c.toA && c.toB <= b.state.doc.length) insert += a.state.lineBreak;
+    b.dispatch({
+      changes: { from: c.fromB, to: Math.min(b.state.doc.length, c.toB), insert },
+      userEvent: "revert",
+    });
+    e.preventDefault();
+  });
+
+  function paint() {
+    const g = gutter.getBoundingClientRect();
+    const height = gutter.clientHeight;
+    const ya = (l: number) => a.documentTop - g.top + yOf(a, l);
+    const yb = (l: number) => b.documentTop - g.top + yOf(b, l);
+    const paths: SVGPathElement[] = [];
+    const btns: HTMLButtonElement[] = [];
+    spans().forEach((s, i) => {
+      const [y0, y1, z0, z1] = [ya(s.a0), ya(s.a1), yb(s.b0), yb(s.b1)];
+      // Off screen on both sides: nothing to draw (no layout = draw all).
+      if (height > 0 && (Math.max(y1, z1) < 0 || Math.min(y0, z0) > height)) return;
+      const kind = s.a0 === s.a1 ? "add" : s.b0 === s.b1 ? "del" : "mod";
+      const p = document.createElementNS(SVG, "path");
+      p.setAttribute("d", bandPath(GUTTER_PX, y0, y1, z0, z1));
+      p.setAttribute("class", BAND[kind]);
+      p.setAttribute("vector-effect", "non-scaling-stroke");
+      p.dataset.kind = kind;
+      paths.push(p);
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.textContent = "»";
+      btn.title = revertLabel;
+      btn.setAttribute("aria-label", revertLabel);
+      btn.dataset.chunk = String(i);
+      btn.className =
+        "absolute left-0.5 z-10 rounded px-0.5 text-[11px] leading-none text-fg-secondary hover:bg-surface-3 hover:text-fg-primary";
+      btn.style.top = `${Math.max(0, y0) + 1}px`;
+      btns.push(btn);
+    });
+    svg.replaceChildren(...paths);
+    buttons.replaceChildren(...btns);
+  }
+  draw();
+
+  return {
+    a,
+    b,
+    destroy: () => {
+      if (frame)
+        (typeof cancelAnimationFrame === "function" ? cancelAnimationFrame : clearTimeout)(frame);
+      resize?.disconnect();
+      a.scrollDOM.removeEventListener("scroll", onA);
+      b.scrollDOM.removeEventListener("scroll", onB);
+      a.destroy();
+      b.destroy();
+      root.remove();
+    },
+  };
+}

client/src/components/run/ConsoleTabs.tsx

@@ -22,7 +22,10 @@
  * a `+` item) brings it into the tab on screen, split to the right, and a
  * one-pane tab drags onto the panes (`PaneGrid.tsx`) to join that tab. Any
  * tab drags along the bar to reorder it, and a pane header dragged onto the
- * bar takes that pane out into a tab of its own there. A right-click on a tab
+ * bar takes that pane out into a tab of its own there. Dropped on the MIDDLE
+ * of another tab, a tab (or a pane header) joins that tab instead
+ * (`joinGroup`: side by side, then under the right pane, then under the left
+ * one, up to four panes). A right-click on a tab
  * opens the same actions as a menu (`ContextMenu`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -51,7 +54,15 @@ import { AiToolIcon } from "../AiToolIcon";
 import { freeSlot, startInFreeTab } from "../lanes/startSession";
 import { PANE_DRAG_TYPE, RunIcon, startPaneDrag, type GroupsUpdate } from "./PaneGrid";
 import { insertionIndex } from "../../lib/laneOrderStorage";
-import { type PaneGroups, detachSlot, groupOf, leaves, reorderGroups } from "../../lib/paneLayout";
+import {
+  type PaneGroups,
+  MAX_PANES,
+  detachSlot,
+  groupOf,
+  joinGroup,
+  leaves,
+  reorderGroups,
+} from "../../lib/paneLayout";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 
 type AiToolsState = ReturnType<typeof useAiTools>;
@@ -201,6 +212,10 @@ export function ConsoleTabs({
   // point among the drawn tabs, from the pointer against their middles.
   const listRef = useRef<HTMLDivElement>(null);
   const [dropAt, setDropAt] = useState<number | null>(null);
+  // The drawn tab a drop would join (the pointer on its middle half), and the
+  // slots a drag from this bar carries — unknown for a pane header (one slot).
+  const [joinAt, setJoinAt] = useState<number | null>(null);
+  const dragged = useRef<number[]>([]);
   const isBarDrag = (e: DragEvent) => {
     const types = e.dataTransfer?.types;
     return !!types && (types.includes(PANE_DRAG_TYPE) || types.includes(TAB_DRAG_TYPE));
@@ -215,31 +230,70 @@ export function ConsoleTabs({
       x
     );
   };
+  const joinIndexAt = (x: number) => {
+    const els = [...(listRef.current?.querySelectorAll<HTMLElement>("[data-tab-index]") ?? [])];
+    const i = els.findIndex((el) => {
+      const b = el.getBoundingClientRect();
+      return x >= b.left + b.width / 4 && x <= b.right - b.width / 4;
+    });
+    const tab = tabs[i];
+    if (!tab || dragged.current.some((s) => tab.slots.includes(s))) return null;
+    return tab.slots.length + Math.max(dragged.current.length, 1) <= MAX_PANES ? i : null;
+  };
+  const endDrag = () => {
+    dragged.current = [];
+    setDropAt(null);
+    setJoinAt(null);
+  };
   const dragHandlers = {
     onDragOver: (e: DragEvent) => {
       if (!isBarDrag(e)) return;
       e.preventDefault();
       e.dataTransfer.dropEffect = "move";
-      const at = dropIndexAt(e.clientX);
+      const join = joinIndexAt(e.clientX);
+      const at = join === null ? dropIndexAt(e.clientX) : null;
+      setJoinAt((d) => (d === join ? d : join));
       setDropAt((d) => (d === at ? d : at));
     },
     onDragLeave: (e: DragEvent) => {
-      if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setDropAt(null);
-    },
-    onDragEnd: () => setDropAt(null),
-    onDrop: (e: DragEvent) => {
+      if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
       setDropAt(null);
+      setJoinAt(null);
+    },
+    onDragEnd: endDrag,
+    onDrop: (e: DragEvent) => {
+      const join = joinIndexAt(e.clientX);
+      endDrag();
       if (!isBarDrag(e)) return;
       e.preventDefault();
+      const tab = e.dataTransfer.getData(TAB_DRAG_TYPE);
+      const raw = e.dataTransfer.getData(PANE_DRAG_TYPE);
+      const target = join === null ? undefined : tabs[join];
+      // A pane header dropped on its OWN tab is a detach, not a join: a pane
+      // drag carries no slots during dragover, so joinIndexAt cannot skip it.
+      const ownTab =
+        tab === "" && raw !== "" && target && groupOf(groups, Number(raw)) === target.index;
+      if (target && !ownTab) {
+        onGroupsChange((g) =>
+          joinGroup(
+            g,
+            tab !== ""
+              ? leaves(g.groups[Number(tab)]?.root ?? null)
+              : raw !== ""
+                ? [Number(raw)]
+                : [],
+            target.index
+          )
+        );
+        return;
+      }
       // The drawn position, as an index into the groups.
       const drawn = dropIndexAt(e.clientX);
       const at = tabs[drawn]?.index ?? groups.groups.length;
-      const tab = e.dataTransfer.getData(TAB_DRAG_TYPE);
       if (tab !== "") {
         onGroupsChange((g) => reorderGroups(g, Number(tab), at));
         return;
       }
-      const raw = e.dataTransfer.getData(PANE_DRAG_TYPE);
       if (raw === "") return;
       const slot = Number(raw);
       onGroupsChange((g) => {
@@ -426,6 +480,7 @@ export function ConsoleTabs({
               data-slots={tab.key}
               draggable
               onDragStart={(e) => {
+                dragged.current = tab.slots;
                 if (single) startPaneDrag(e, single.slot ?? 0);
                 else {
                   e.dataTransfer?.setData(TAB_DRAG_TYPE, String(tab.index));
@@ -439,7 +494,7 @@ export function ConsoleTabs({
                 active
                   ? "bg-surface-0 text-fg-primary"
                   : "text-fg-muted hover:bg-surface-4 hover:text-fg-secondary"
-              }`}
+              } ${joinAt === i ? "ring-2 ring-inset ring-accent/60 bg-accent/15" : ""}`}
             >
               {(dropAt === i || (dropAt === tabs.length && i === tabs.length - 1)) && (
                 <span

client/src/components/run/RunSetup.tsx

@@ -6,8 +6,8 @@
  * box (`WorkspaceHome.tsx`):
  *   - `PromptEditor` — the prompt textarea with `/` (commands and skills,
  *     Claude only) and `@` (`GET /api/run/files`) autocomplete, Shift/Alt+Enter
- *     newlines, and a pasted or dropped image attached by its saved path
- *     (`POST /api/run/drop-image`);
+ *     newlines, and pasted or dropped files (images as thumbnails, any other
+ *     as a name chip) attached by their saved paths (`POST /api/run/drop-file`);
  *   - `CwdAutocomplete` — the folder field the Add-workspace modal uses;
  *   - `ModelPicker` — a tool's own model list (`GET /api/ai-tools/:id/models`)
  *     or a fixed one (an AI Proxy's models), plus Custom…;
@@ -25,6 +25,7 @@ import {
   Check,
   ChevronDown,
   ChevronRight,
+  FileText,
   FolderOpen,
   GitBranch,
   Home,
@@ -47,12 +48,15 @@ import { isSubmitEnter } from "../../lib/keys";
 
 export interface SlashCommand {
   name: string;
-  source: "project" | "user" | "builtin";
+  source: "project" | "user" | "plugin" | "builtin";
   description?: string;
 }
 
-// Commands the CLI answers itself. They are typed into the pane like any
-// other text, so they do run — they are just not files anyone can list.
+// Commands the CLI answers itself, and the skills bundled inside it. They are
+// typed into the pane like any other text, so they do run — they are just not
+// files anyone can list.
+// ponytail: a hand-kept list, so it lags new Claude Code releases; no file or
+// API lists the built-ins, add names here as they ship.
 const BUILTIN_SLASH_COMMANDS: SlashCommand[] = [
   "help",
   "clear",
@@ -62,6 +66,8 @@ const BUILTIN_SLASH_COMMANDS: SlashCommand[] = [
   "memory",
   "hooks",
   "cost",
+  "usage",
+  "context",
   "agents",
   "review",
   "permissions",
@@ -69,14 +75,36 @@ const BUILTIN_SLASH_COMMANDS: SlashCommand[] = [
   "init",
   "mcp",
   "plugin",
+  "reload-plugins",
+  "skills",
   "output-style",
+  "resume",
+  "rewind",
+  "add-dir",
+  "doctor",
+  "export",
+  "login",
+  "logout",
+  "statusline",
+  "theme",
+  "fast",
   "exit",
+  "code-review",
+  "security-review",
+  "simplify",
+  "loop",
+  "schedule",
+  "fewer-permission-prompts",
+  "update-config",
+  "claude-api",
+  "run",
 ].map((name) => ({ name, source: "builtin" }));
 
-const SOURCE_ORDER = { project: 0, user: 1, builtin: 2 } as const;
+const SOURCE_ORDER = { project: 0, user: 1, plugin: 2, builtin: 3 } as const;
 const SOURCE_TONE: Record<SlashCommand["source"], string> = {
   project: "text-status-success border-status-success/40",
   user: "text-accent border-accent/40",
+  plugin: "text-accent border-accent/40",
   builtin: "text-fg-muted border-border",
 };
 
@@ -126,8 +154,8 @@ interface PromptEditorProps {
   slash: boolean;
   /** Where `@` looks for files and project commands/skills are read from. */
   fileCwd: string;
-  /** Images pasted or dropped so far, shown as thumbnails; the caller sends
-   *  them with the text through `promptWithImages`. */
+  /** Files pasted or dropped so far (images shown as thumbnails); the caller
+   *  sends them with the text through `promptWithImages`. */
   images: PromptImage[];
   onImagesChange: Dispatch<SetStateAction<PromptImage[]>>;
   /** Borderless, for a composer box that draws its own frame. */
@@ -137,11 +165,12 @@ interface PromptEditorProps {
   onBusyChange?: (busy: boolean) => void;
 }
 
-/** An attached image: its path on the server's machine and a local preview. */
-export type PromptImage = { path: string; url: string; name: string };
+/** An attached file: its path on the server's machine, and a local preview
+ *  `url` when it is an image. */
+export type PromptImage = { path: string; url?: string; name: string };
 
-/** The prompt as sent: the text, then each image's saved path — which is how
- *  the CLI is handed an image. */
+/** 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(" ");
 }
@@ -185,8 +214,26 @@ export function PromptEditor({
     Promise.all([
       api.ccConfig.commands(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
       api.ccConfig.skills(undefined, fileCwd).catch(() => ({ items: [] as CcMdItem[] })),
-    ]).then(([c, sk]) => {
-      if (live) setCommands([...c.items, ...sk.items].map(toCmd).concat(BUILTIN_SLASH_COMMANDS));
+      api.ccConfig.plugins().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.
+      const fromPlugins = pl.plugins
+        .filter((p) => p.enabled !== false && p.contributes)
+        .flatMap((p) =>
+          [...p.contributes!.items.commands, ...p.contributes!.items.skills].map(
+            (it): SlashCommand => ({
+              name: `${p.name}:${it.name}`,
+              source: "plugin",
+              description: it.description || undefined,
+            })
+          )
+        )
+        .filter((cmd, i, all) => all.findIndex((o) => o.name === cmd.name) === i);
+      if (live)
+        setCommands(
+          [...c.items, ...sk.items].map(toCmd).concat(fromPlugins, BUILTIN_SLASH_COMMANDS)
+        );
     });
     return () => {
       live = false;
@@ -264,9 +311,9 @@ export function PromptEditor({
     });
   };
 
-  // A pasted or dropped image is saved on the server's machine (the same
-  // route the terminal's drop uses) and shown as a thumbnail; its path is
-  // added to the prompt only when it is sent (promptWithImages).
+  // 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 [viewing, setViewing] = useState<PromptImage | null>(null);
   const [imageMenu, setImageMenu] = useState<(MenuPoint & { img: PromptImage }) | null>(null);
@@ -275,15 +322,15 @@ export function PromptEditor({
   busyRef.current = onBusyChange;
   useEffect(() => busyRef.current?.(uploading), [uploading]);
   const attachImages = (list: FileList | null | undefined) => {
-    const picked = Array.from(list ?? []).filter((f) => f.type.startsWith("image/"));
+    const picked = Array.from(list ?? []);
     if (picked.length === 0) return false;
     setUpload("uploading");
-    Promise.all(picked.map((f) => api.run.dropImage(f)))
+    Promise.all(picked.map((f) => api.run.dropFile(f)))
       .then((saved) => {
         setUpload(null);
         const added = picked.map((f, i) => ({
           path: saved[i]!.path,
-          url: URL.createObjectURL(f),
+          url: f.type.startsWith("image/") ? URL.createObjectURL(f) : undefined,
           name: f.name,
         }));
         onImagesChange((prev) => [...prev, ...added]);
@@ -292,7 +339,7 @@ export function PromptEditor({
     return true;
   };
   const removeImage = (img: PromptImage) => {
-    URL.revokeObjectURL(img.url);
+    if (img.url) URL.revokeObjectURL(img.url);
     onImagesChange((prev) => prev.filter((x) => x !== img));
   };
   useEffect(() => {
@@ -349,17 +396,27 @@ export function PromptEditor({
       {images.length > 0 && (
         <div data-testid="prompt-images" className="mb-2 flex flex-wrap gap-2 px-1 pt-1">
           {images.map((img) => (
-            <div key={img.url} className="group relative">
-              <button
-                type="button"
-                aria-label={img.name}
-                title={img.name}
-                onClick={() => setViewing(img)}
-                onContextMenu={(e) => setImageMenu({ ...menuPoint(e), img })}
-                className="block h-14 w-14 overflow-hidden rounded-lg border border-border bg-surface-3 hover:border-accent/50"
-              >
-                <img src={img.url} alt="" className="h-full w-full object-cover" />
-              </button>
+            <div key={img.path} className="group relative">
+              {img.url ? (
+                <button
+                  type="button"
+                  aria-label={img.name}
+                  title={img.name}
+                  onClick={() => setViewing(img)}
+                  onContextMenu={(e) => setImageMenu({ ...menuPoint(e), img })}
+                  className="block h-14 w-14 overflow-hidden rounded-lg border border-border bg-surface-3 hover:border-accent/50"
+                >
+                  <img src={img.url} alt="" className="h-full w-full object-cover" />
+                </button>
+              ) : (
+                <span
+                  title={img.path}
+                  className="flex h-14 max-w-48 items-center gap-1.5 rounded-lg border border-border bg-surface-3 px-2 text-xs text-fg-secondary"
+                >
+                  <FileText className="h-4 w-4 shrink-0 text-fg-muted" />
+                  <span className="truncate">{img.name}</span>
+                </span>
+              )}
               <button
                 type="button"
                 aria-label={t("drop.remove")}

client/src/components/run/TerminalView.tsx

@@ -9,11 +9,15 @@
  * The socket auto-reconnects: a server restart kills the attach PTY, and
  * without a retry the pane silently freezes on its last painted frame — it
  * still LOOKS live, but no keystroke or mouse report reaches tmux again.
+ * Retries back off from 1.5 s to 30 s (reset once a socket opens) and stop on
+ * close code 1008. xterm and its addons are loaded on the first terminal
+ * (`loadXterm`), not bundled with the Workspace chunk.
  * Always painted dark, in the palette of the user's chosen DARK theme
  * (`lib/terminalTheme.ts`), recoloured live without re-attaching.
- * An image dropped on it is saved on the server (`POST /api/run/drop-image`)
- * and its PATH pasted into the pane — what a local terminal does on a drop,
- * and how `claude` attaches an image. The pane also registers with
+ * Files (images or any other) dropped on it 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. 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
@@ -32,12 +36,10 @@
  */
 import { useEffect, useId, useMemo, useRef, useState, type DragEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { Terminal } from "@xterm/xterm";
-import { FitAddon } from "@xterm/addon-fit";
-import { CanvasAddon } from "@xterm/addon-canvas";
-import { ClipboardAddon, type IClipboardProvider } from "@xterm/addon-clipboard";
-import { SearchAddon } from "@xterm/addon-search";
-import { WebLinksAddon } from "@xterm/addon-web-links";
+import type { Terminal } from "@xterm/xterm";
+import type { CanvasAddon } from "@xterm/addon-canvas";
+import type { ClipboardAddon, IClipboardProvider } from "@xterm/addon-clipboard";
+import type { SearchAddon } from "@xterm/addon-search";
 import { ArrowDown, ArrowUp, X } from "lucide-react";
 import "@xterm/xterm/css/xterm.css";
 import { useTheme } from "../../hooks/useTheme";
@@ -45,7 +47,7 @@ import { terminalThemeFor } from "../../lib/terminalTheme";
 import { api } from "../../lib/api";
 import { notePaneFocus, registerPane } from "../../lib/panePaste";
 
-type DropState = "hint" | "uploading" | "failed" | "imagesOnly";
+type DropState = "hint" | "uploading" | "failed";
 
 /** localStorage flag for xterm's screen-reader mode (a Settings toggle can set it later). */
 export const SCREEN_READER_KEY = "agenthub.terminal.screenReader";
@@ -72,11 +74,49 @@ const clipboardProvider: IClipboardProvider = {
     if (text) void navigator.clipboard?.writeText(text).catch(() => undefined);
   },
 };
-// The addon's typings declare one argument, its code takes (base64, provider).
-const ClipboardWithProvider = ClipboardAddon as unknown as new (
-  base64: undefined,
-  provider: IClipboardProvider
-) => ClipboardAddon;
+
+/** xterm and its addons (~400 KB) load with the first terminal, not with the
+ *  Workspace chunk. The result is cached, so every later pane (and a test that
+ *  awaits `loadXterm()` first) sets up synchronously. */
+const importXterm = async () => {
+  const [xterm, fit, canvas, clipboard, search, links] = await Promise.all([
+    import("@xterm/xterm"),
+    import("@xterm/addon-fit"),
+    import("@xterm/addon-canvas"),
+    import("@xterm/addon-clipboard"),
+    import("@xterm/addon-search"),
+    import("@xterm/addon-web-links"),
+  ]);
+  return {
+    Terminal: xterm.Terminal,
+    FitAddon: fit.FitAddon,
+    CanvasAddon: canvas.CanvasAddon,
+    SearchAddon: search.SearchAddon,
+    WebLinksAddon: links.WebLinksAddon,
+    // The addon's typings declare one argument, its code takes (base64, provider).
+    ClipboardWithProvider: clipboard.ClipboardAddon as unknown as new (
+      base64: undefined,
+      provider: IClipboardProvider
+    ) => ClipboardAddon,
+  };
+};
+type Xterm = Awaited<ReturnType<typeof importXterm>>;
+let xtermLoaded: Xterm | null = null;
+let xtermLoading: Promise<Xterm> | null = null;
+export function loadXterm(): Promise<Xterm> {
+  xtermLoading ??= importXterm().then(
+    (x) => (xtermLoaded = x),
+    (err) => {
+      xtermLoading = null; // a failed chunk fetch may be retried by the next pane
+      throw err;
+    }
+  );
+  return xtermLoading;
+}
+
+/** Reconnect delay: 1.5 s, doubling per failed attempt up to 30 s. */
+const RETRY_MIN_MS = 1500;
+const RETRY_MAX_MS = 30_000;
 const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files");
 
 interface TerminalViewProps {
@@ -144,13 +184,13 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
     if (!hasFiles(e)) return; // dragged text keeps xterm's own handling
     e.preventDefault();
     dragDepth.current = 0;
-    const images = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
-    if (images.length === 0) return flash("imagesOnly");
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length === 0) return;
     setDrop("uploading");
     try {
-      const saved = await Promise.all(images.map((f) => api.run.dropImage(f)));
+      const saved = await Promise.all(files.map((f) => api.run.dropFile(f)));
       // paste(), not a raw send: it honours bracketed-paste mode, so claude
-      // sees one pasted path rather than typed keystrokes.
+      // sees pasted paths rather than typed keystrokes.
       termRef.current?.paste(saved.map((r) => r.path).join(" ") + " ");
       termRef.current?.focus();
       setDrop(null);
@@ -160,265 +200,293 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
   };
 
   useEffect(() => {
-    // An explicit fontFamily pins every glyph to one bundled webfont. Left
-    // unset, xterm falls back to the browser/OS default (`courier-new`),
-    // which on Windows lacks Vietnamese precomposed diacritics — the OS then
-    // substitutes those specific glyphs from a different face with a
-    // mismatched advance width, corrupting the cell it's drawn into even
-    // under the canvas renderer (which only stops a glyph from shoving its
-    // *neighbours*, not from overflowing its own cell). JetBrains Mono is
-    // already bundled for the rest of the UI; main.tsx additionally imports
-    // its `vietnamese` subset so this covers the diacritics too.
-    // NO `convertEol`. It rewrites every bare LF as CR+LF, i.e. it forces the
-    // cursor to column 0 on a line feed — and xterm's own docs say not to use
-    // it on a PTY, where termios already does that translation for the streams
-    // that want it. tmux scrolls a pane by emitting a bare LF and then keeps
-    // drawing at the column it was on; with this on, that draw landed at
-    // column 0 instead, stamping the first characters of the line into the
-    // left margin of the rows below. That is the torn left edge of issue #33,
-    // and why it only showed up once content scrolled.
-    const term = new Terminal({
-      fontSize: 13,
-      cursorBlink: true,
-      fontFamily: '"JetBrains Mono", monospace',
-      theme: paletteRef.current,
-      screenReaderMode: readFlag(SCREEN_READER_KEY),
-    });
-    termRef.current = term;
-    const fit = new FitAddon();
-    term.loadAddon(fit);
-    const search = new SearchAddon();
-    term.loadAddon(search);
-    searchRef.current = search;
-    term.loadAddon(new ClipboardWithProvider(undefined, clipboardProvider));
-    term.loadAddon(
-      new WebLinksAddon((_e, uri) => {
-        window.open(uri, "_blank", "noopener,noreferrer");
-      })
-    );
-    if (containerRef.current) term.open(containerRef.current);
-    term.textarea?.setAttribute("aria-describedby", hintId);
-
-    // Draw each cell at a fixed position instead of letting the browser lay the
-    // row out as text. xterm's default DOM renderer aligns a row with a single
-    // `letter-spacing`, which only holds while every glyph comes from one
-    // monospace font — Vietnamese diacritics and CJK fall through to a fallback
-    // face whose advance width differs, so glyphs shove their neighbours along
-    // and the row's tail spills onto the row below. The buffer is correct
-    // throughout (copying the line yields clean text); only the painting drifts,
-    // and no CSS can correct it. Best-effort: a browser that cannot give a 2D
-    // context keeps the DOM renderer rather than losing the terminal.
-    let canvas: CanvasAddon | null = null;
-    try {
-      canvas = new CanvasAddon();
-      term.loadAddon(canvas);
-    } catch {
-      canvas = null;
-    }
-
-    fit.fit();
-    // Take the keyboard as soon as the pane is on screen: the terminal IS the
-    // page here, and having to click it first meant the first thing typed went
-    // nowhere. A click elsewhere still moves focus away, as in any editor.
-    if (autoFocusRef.current) term.focus();
-
-    // When the pane's program has NOT enabled wheel reporting, xterm falls back
-    // to converting each wheel notch on an alt-screen buffer into a cursor-key
-    // press (ESC[A / ESC[B). In a `claude` pane that reads as arrow up/down —
-    // the wheel silently walks the prompt history instead of scrolling. Kill
-    // ONLY that branch: xterm runs this same handler before sending a real SGR
-    // mouse report too (`bindMouse`'s wheel case consults it), so a blanket
-    // `false` also blocks tmux's own wheel scrolling. `x10` counts as off here
-    // because that protocol reports button presses only, never the wheel — so
-    // xterm takes the emulation path for it as well.
-    term.attachCustomWheelEventHandler(() => {
-      const mode = term.modes.mouseTrackingMode;
-      const tracked = mode !== "none" && mode !== "x10";
-      return tracked || term.buffer.active.type !== "alternate";
-    });
-
-    // xterm sends Shift+Tab as ESC[Z but — unlike plain Tab — never marks the
-    // event cancelled, so the browser still runs its default action and moves
-    // focus out of the terminal. The pane then only ever sees the first press,
-    // which is why `shift+tab to cycle` (permission mode in claude) looked dead
-    // here while working in a real terminal. Returning true keeps xterm's own
-    // handling; the preventDefault only stops focus from escaping.
-    // Ctrl+M toggles "Tab moves focus" (VS Code's way out of its terminal);
-    // in that mode Tab and Shift+Tab are not the pane's, so the browser moves
-    // focus. Cmd+F / Ctrl+Shift+F open the find bar. Returning false keeps xterm from
-    // handling — and from cancelling — the key.
-    term.attachCustomKeyEventHandler((ev) => {
-      if (ev.type !== "keydown") return true;
-      const key = ev.key.toLowerCase();
-      if (ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey && key === "m") {
-        ev.preventDefault();
-        tabMovesRef.current = !tabMovesRef.current;
-        setTabMoves(tabMovesRef.current);
-        return false;
-      }
-      // Find: Cmd+F on macOS, Ctrl+Shift+F elsewhere — never plain Ctrl+F,
-      // which is readline's forward-char (and bound by many TUIs).
-      const findChord =
-        !ev.altKey &&
-        key === "f" &&
-        ((ev.metaKey && !ev.ctrlKey && !ev.shiftKey) || (ev.ctrlKey && ev.shiftKey && !ev.metaKey));
-      if (findChord) {
-        ev.preventDefault();
-        setFind((f) => f ?? "");
-        requestAnimationFrame(() => findInput.current?.focus());
-        return false;
-      }
-      if (ev.key === "Tab" && tabMovesRef.current) return false;
-      if (ev.key === "Tab" && ev.shiftKey) ev.preventDefault();
-      return true;
-    });
-
-    const decoder = new TextDecoder();
-    let ws: WebSocket | null = null;
-
-    /**
-     * Tell the server this terminal's size. tmux draws the pane at whatever
-     * width it last heard, and a pane WIDER than xterm is silently corrupting:
-     * every over-long row autowraps its tail onto the next row's left margin,
-     * and tmux — believing that row unchanged — never repaints over it. The
-     * result is stray characters glued to the left edge of blank lines, which
-     * only becomes visible once a scroll repaints history. Reproduced with a
-     * one-column difference; two columns leaves two characters per line.
-     *
-     * A zero-size fit is never reported: the console collapses with CSS
-     * (`display:none` leaves the container 0×0), and fitting to that would
-     * resize the real tmux pane down to nothing.
-     */
-    const sendSizeNow = () => {
-      if (!ws || ws.readyState !== WebSocket.OPEN) return;
-      if (term.cols < 2 || term.rows < 2) return;
-      ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
-    };
-    // A divider drag or a window resize fires a resize per frame; tmux and the
-    // program in the pane redraw on each, so the LAST size is sent once things
-    // settle (trailing, 150 ms).
-    let sizeTimer: ReturnType<typeof setTimeout> | null = null;
-    const sendSize = () => {
-      if (sizeTimer) clearTimeout(sizeTimer);
-      sizeTimer = setTimeout(() => {
-        sizeTimer = null;
-        sendSizeNow();
-      }, 150);
-    };
-    let retryTimer: ReturnType<typeof setTimeout> | null = null;
-    let ended = false; // server said the pane exited — nothing left to attach to
     let disposed = false;
+    const attach = ({
+      Terminal,
+      FitAddon,
+      CanvasAddon,
+      SearchAddon,
+      WebLinksAddon,
+      ClipboardWithProvider,
+    }: Xterm) => {
+      // An explicit fontFamily pins every glyph to one bundled webfont. Left
+      // unset, xterm falls back to the browser/OS default (`courier-new`),
+      // which on Windows lacks Vietnamese precomposed diacritics — the OS then
+      // substitutes those specific glyphs from a different face with a
+      // mismatched advance width, corrupting the cell it's drawn into even
+      // under the canvas renderer (which only stops a glyph from shoving its
+      // *neighbours*, not from overflowing its own cell). JetBrains Mono is
+      // already bundled for the rest of the UI; main.tsx additionally imports
+      // its `vietnamese` subset so this covers the diacritics too.
+      // NO `convertEol`. It rewrites every bare LF as CR+LF, i.e. it forces the
+      // cursor to column 0 on a line feed — and xterm's own docs say not to use
+      // it on a PTY, where termios already does that translation for the streams
+      // that want it. tmux scrolls a pane by emitting a bare LF and then keeps
+      // drawing at the column it was on; with this on, that draw landed at
+      // column 0 instead, stamping the first characters of the line into the
+      // left margin of the rows below. That is the torn left edge of issue #33,
+      // and why it only showed up once content scrolled.
+      const term = new Terminal({
+        fontSize: 13,
+        cursorBlink: true,
+        fontFamily: '"JetBrains Mono", monospace',
+        theme: paletteRef.current,
+        screenReaderMode: readFlag(SCREEN_READER_KEY),
+      });
+      termRef.current = term;
+      const fit = new FitAddon();
+      term.loadAddon(fit);
+      const search = new SearchAddon();
+      term.loadAddon(search);
+      searchRef.current = search;
+      term.loadAddon(new ClipboardWithProvider(undefined, clipboardProvider));
+      term.loadAddon(
+        new WebLinksAddon((_e, uri) => {
+          window.open(uri, "_blank", "noopener,noreferrer");
+        })
+      );
+      if (containerRef.current) term.open(containerRef.current);
+      term.textarea?.setAttribute("aria-describedby", hintId);
 
-    const connect = () => {
-      // The attach itself carries this terminal's size. tmux sizes the window
-      // to the client that attached most recently, so spawning the attach at a
-      // default 80×24 and correcting it from the first `resize` message a beat
-      // later makes the pane's program (claude) redraw its whole UI at 80
-      // columns first — and everything painted at that width stays in the
-      // scrollback as torn fragments along the left margin, visible as soon as
-      // you scroll back (issue #33). Happens on every attach: page load,
-      // lane switch, and each 1.5 s reconnect.
-      const size = term.cols > 1 && term.rows > 1 ? `?cols=${term.cols}&rows=${term.rows}` : "";
-      const sock = new WebSocket(`${wsBaseUrl}/ws-pty/${encodeURIComponent(runId)}${size}`);
-      ws = sock;
-      wsRef.current = sock;
-      // Server sends PTY bytes as binary frames — default binaryType ("blob")
-      // would hand onmessage a Blob that the string checks below never match,
-      // silently dropping all terminal output. "arraybuffer" keeps it sync.
-      sock.binaryType = "arraybuffer";
+      // Draw each cell at a fixed position instead of letting the browser lay the
+      // row out as text. xterm's default DOM renderer aligns a row with a single
+      // `letter-spacing`, which only holds while every glyph comes from one
+      // monospace font — Vietnamese diacritics and CJK fall through to a fallback
+      // face whose advance width differs, so glyphs shove their neighbours along
+      // and the row's tail spills onto the row below. The buffer is correct
+      // throughout (copying the line yields clean text); only the painting drifts,
+      // and no CSS can correct it. Best-effort: a browser that cannot give a 2D
+      // context keeps the DOM renderer rather than losing the terminal.
+      let canvas: CanvasAddon | null = null;
+      try {
+        canvas = new CanvasAddon();
+        term.loadAddon(canvas);
+      } catch {
+        canvas = null;
+      }
 
-      sock.onopen = () => {
-        setReconnecting(false);
-        sendSizeNow();
-      };
-      sock.onmessage = (event) => {
-        const isArrayBuffer = Object.prototype.toString.call(event.data) === "[object ArrayBuffer]";
-        // `stream: true` carries a UTF-8 multi-byte char's trailing bytes over
-        // to the next decode() call when a PTY chunk splits mid-character —
-        // without it, a Vietnamese/accented char split across two WS frames
-        // decodes to garbage on both sides (U+FFFD or stray bytes).
-        const data = isArrayBuffer
-          ? decoder.decode(event.data as ArrayBuffer, { stream: true })
-          : event.data;
-        if (typeof data === "string") {
-          // A JSON control frame is the only thing that starts with `{"type"`.
-          if (data.startsWith('{"type"')) {
-            try {
-              const msg = JSON.parse(data);
-              if (msg.type === "exit") {
-                ended = true;
-                term.write(`\r\n${tRef.current("terminal.ended", { code: msg.code })}\r\n`);
-                onExitRef.current?.();
-              }
-              return;
-            } catch {
-              /* not JSON — fall through and render as PTY output */
-            }
-          }
-          term.write(data);
+      fit.fit();
+      // Take the keyboard as soon as the pane is on screen: the terminal IS the
+      // page here, and having to click it first meant the first thing typed went
+      // nowhere. A click elsewhere still moves focus away, as in any editor.
+      if (autoFocusRef.current) term.focus();
+
+      // When the pane's program has NOT enabled wheel reporting, xterm falls back
+      // to converting each wheel notch on an alt-screen buffer into a cursor-key
+      // press (ESC[A / ESC[B). In a `claude` pane that reads as arrow up/down —
+      // the wheel silently walks the prompt history instead of scrolling. Kill
+      // ONLY that branch: xterm runs this same handler before sending a real SGR
+      // mouse report too (`bindMouse`'s wheel case consults it), so a blanket
+      // `false` also blocks tmux's own wheel scrolling. `x10` counts as off here
+      // because that protocol reports button presses only, never the wheel — so
+      // xterm takes the emulation path for it as well.
+      term.attachCustomWheelEventHandler(() => {
+        const mode = term.modes.mouseTrackingMode;
+        const tracked = mode !== "none" && mode !== "x10";
+        return tracked || term.buffer.active.type !== "alternate";
+      });
+
+      // xterm sends Shift+Tab as ESC[Z but — unlike plain Tab — never marks the
+      // event cancelled, so the browser still runs its default action and moves
+      // focus out of the terminal. The pane then only ever sees the first press,
+      // which is why `shift+tab to cycle` (permission mode in claude) looked dead
+      // here while working in a real terminal. Returning true keeps xterm's own
+      // handling; the preventDefault only stops focus from escaping.
+      // Ctrl+M toggles "Tab moves focus" (VS Code's way out of its terminal);
+      // in that mode Tab and Shift+Tab are not the pane's, so the browser moves
+      // focus. Cmd+F / Ctrl+Shift+F open the find bar. Returning false keeps xterm from
+      // handling — and from cancelling — the key.
+      term.attachCustomKeyEventHandler((ev) => {
+        if (ev.type !== "keydown") return true;
+        const key = ev.key.toLowerCase();
+        if (ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey && key === "m") {
+          ev.preventDefault();
+          tabMovesRef.current = !tabMovesRef.current;
+          setTabMoves(tabMovesRef.current);
+          return false;
         }
+        // Find: Cmd+F on macOS, Ctrl+Shift+F elsewhere — never plain Ctrl+F,
+        // which is readline's forward-char (and bound by many TUIs).
+        const findChord =
+          !ev.altKey &&
+          key === "f" &&
+          ((ev.metaKey && !ev.ctrlKey && !ev.shiftKey) ||
+            (ev.ctrlKey && ev.shiftKey && !ev.metaKey));
+        if (findChord) {
+          ev.preventDefault();
+          setFind((f) => f ?? "");
+          requestAnimationFrame(() => findInput.current?.focus());
+          return false;
+        }
+        if (ev.key === "Tab" && tabMovesRef.current) return false;
+        if (ev.key === "Tab" && ev.shiftKey) ev.preventDefault();
+        return true;
+      });
+
+      const decoder = new TextDecoder();
+      let ws: WebSocket | null = null;
+
+      /**
+       * Tell the server this terminal's size. tmux draws the pane at whatever
+       * width it last heard, and a pane WIDER than xterm is silently corrupting:
+       * every over-long row autowraps its tail onto the next row's left margin,
+       * and tmux — believing that row unchanged — never repaints over it. The
+       * result is stray characters glued to the left edge of blank lines, which
+       * only becomes visible once a scroll repaints history. Reproduced with a
+       * one-column difference; two columns leaves two characters per line.
+       *
+       * A zero-size fit is never reported: the console collapses with CSS
+       * (`display:none` leaves the container 0×0), and fitting to that would
+       * resize the real tmux pane down to nothing.
+       */
+      const sendSizeNow = () => {
+        if (!ws || ws.readyState !== WebSocket.OPEN) return;
+        if (term.cols < 2 || term.rows < 2) return;
+        ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
       };
-      sock.onclose = () => {
-        if (disposed || ended) return;
-        // tmux keeps the session alive across a server restart, so re-attaching
-        // repaints the pane in full — no output is lost by retrying. Input is
-        // not: the overlay says so rather than letting keystrokes vanish.
-        setReconnecting(true);
-        retryTimer = setTimeout(connect, 1500);
+      // A divider drag or a window resize fires a resize per frame; tmux and the
+      // program in the pane redraw on each, so the LAST size is sent once things
+      // settle (trailing, 150 ms).
+      let sizeTimer: ReturnType<typeof setTimeout> | null = null;
+      const sendSize = () => {
+        if (sizeTimer) clearTimeout(sizeTimer);
+        sizeTimer = setTimeout(() => {
+          sizeTimer = null;
+          sendSizeNow();
+        }, 150);
+      };
+      let retryTimer: ReturnType<typeof setTimeout> | null = null;
+      let ended = false; // server said the pane exited — nothing left to attach to
+      let retryMs = RETRY_MIN_MS;
+
+      const connect = () => {
+        // The attach itself carries this terminal's size. tmux sizes the window
+        // to the client that attached most recently, so spawning the attach at a
+        // default 80×24 and correcting it from the first `resize` message a beat
+        // later makes the pane's program (claude) redraw its whole UI at 80
+        // columns first — and everything painted at that width stays in the
+        // scrollback as torn fragments along the left margin, visible as soon as
+        // you scroll back (issue #33). Happens on every attach: page load,
+        // lane switch, and each reconnect.
+        const size = term.cols > 1 && term.rows > 1 ? `?cols=${term.cols}&rows=${term.rows}` : "";
+        const sock = new WebSocket(`${wsBaseUrl}/ws-pty/${encodeURIComponent(runId)}${size}`);
+        ws = sock;
+        wsRef.current = sock;
+        // Server sends PTY bytes as binary frames — default binaryType ("blob")
+        // would hand onmessage a Blob that the string checks below never match,
+        // silently dropping all terminal output. "arraybuffer" keeps it sync.
+        sock.binaryType = "arraybuffer";
+
+        sock.onopen = () => {
+          retryMs = RETRY_MIN_MS;
+          setReconnecting(false);
+          sendSizeNow();
+        };
+        sock.onmessage = (event) => {
+          const isArrayBuffer =
+            Object.prototype.toString.call(event.data) === "[object ArrayBuffer]";
+          // `stream: true` carries a UTF-8 multi-byte char's trailing bytes over
+          // to the next decode() call when a PTY chunk splits mid-character —
+          // without it, a Vietnamese/accented char split across two WS frames
+          // decodes to garbage on both sides (U+FFFD or stray bytes).
+          const data = isArrayBuffer
+            ? decoder.decode(event.data as ArrayBuffer, { stream: true })
+            : event.data;
+          if (typeof data === "string") {
+            // A JSON control frame is the only thing that starts with `{"type"`.
+            if (data.startsWith('{"type"')) {
+              try {
+                const msg = JSON.parse(data);
+                if (msg.type === "exit") {
+                  ended = true;
+                  term.write(`\r\n${tRef.current("terminal.ended", { code: msg.code })}\r\n`);
+                  onExitRef.current?.();
+                }
+                return;
+              } catch {
+                /* not JSON — fall through and render as PTY output */
+              }
+            }
+            term.write(data);
+          }
+        };
+        sock.onclose = (e?: CloseEvent) => {
+          // 1008: the server refused this attach (policy) — retrying cannot help.
+          if (disposed || ended || e?.code === 1008) return;
+          // tmux keeps the session alive across a server restart, so re-attaching
+          // repaints the pane in full — no output is lost by retrying. Input is
+          // not: the overlay says so rather than letting keystrokes vanish.
+          // Backoff (1.5 s → 30 s, reset on open) so a server that stays down is
+          // not hammered by every open pane.
+          setReconnecting(true);
+          retryTimer = setTimeout(connect, retryMs);
+          retryMs = Math.min(retryMs * 2, RETRY_MAX_MS);
+        };
+      };
+      connect();
+
+      const dataDisposable = term.onData((data) => {
+        if (ws && ws.readyState === WebSocket.OPEN) ws.send(data);
+      });
+
+      // xterm's own size change is the event worth reporting, not the
+      // container's: cols also move when the webfont finishes loading or the
+      // page zooms, neither of which resizes the element ResizeObserver watches.
+      const resizeDisposable = term.onResize(sendSize);
+
+      // Re-assert on focus. Several attach clients can share one tmux session
+      // (a second tab, another lane pane), and tmux's `window-size latest` sizes
+      // the window to whichever client was last active — resizing this pane out
+      // from under a terminal that is never told. Coming back to it says so.
+      const reassert = () => sendSizeNow();
+      term.textarea?.addEventListener("focus", reassert);
+
+      const refit = () => {
+        // Never fit a collapsed console — see sendSize.
+        const el = containerRef.current;
+        if (!el || !el.clientWidth || !el.clientHeight) return;
+        fit.fit(); // a real change fires onResize, which reports it
+      };
+      const resizeObserver = new ResizeObserver(refit);
+      if (containerRef.current) resizeObserver.observe(containerRef.current);
+      // A webfont landing after open changes the cell, not the container, so the
+      // observer never fires — and xterm re-measures its cell only on a font
+      // option change or a resize, so the fit kept the fallback font's cell and
+      // the rows/cols overflowed the pane. Re-setting the family (a trailing
+      // space keeps it a change) makes xterm measure again before the fit.
+      const onFontLoaded = () => {
+        const family = term.options.fontFamily ?? "";
+        term.options.fontFamily = family.endsWith(" ") ? family.trimEnd() : `${family} `;
+        refit();
+      };
+      document.fonts?.addEventListener("loadingdone", onFontLoaded);
+
+      return () => {
+        if (retryTimer) clearTimeout(retryTimer);
+        if (sizeTimer) clearTimeout(sizeTimer);
+        searchRef.current = null;
+        resizeObserver.disconnect();
+        document.fonts?.removeEventListener("loadingdone", onFontLoaded);
+        term.textarea?.removeEventListener("focus", reassert);
+        resizeDisposable.dispose();
+        dataDisposable.dispose();
+        ws?.close();
+        canvas?.dispose();
+        term.dispose();
+        termRef.current = null;
       };
     };
-    connect();
-
-    const dataDisposable = term.onData((data) => {
-      if (ws && ws.readyState === WebSocket.OPEN) ws.send(data);
-    });
-
-    // xterm's own size change is the event worth reporting, not the
-    // container's: cols also move when the webfont finishes loading or the
-    // page zooms, neither of which resizes the element ResizeObserver watches.
-    const resizeDisposable = term.onResize(sendSize);
-
-    // Re-assert on focus. Several attach clients can share one tmux session
-    // (a second tab, another lane pane), and tmux's `window-size latest` sizes
-    // the window to whichever client was last active — resizing this pane out
-    // from under a terminal that is never told. Coming back to it says so.
-    const reassert = () => sendSizeNow();
-    term.textarea?.addEventListener("focus", reassert);
-
-    const refit = () => {
-      // Never fit a collapsed console — see sendSize.
-      const el = containerRef.current;
-      if (!el || !el.clientWidth || !el.clientHeight) return;
-      fit.fit(); // a real change fires onResize, which reports it
+    // Synchronous once xterm is loaded; the first pane waits for the chunk, and
+    // `disposed` drops a setup that lands after this effect was cleaned up.
+    let teardown: (() => void) | undefined;
+    const start = (x: Xterm) => {
+      if (!disposed) teardown = attach(x);
     };
-    const resizeObserver = new ResizeObserver(refit);
-    if (containerRef.current) resizeObserver.observe(containerRef.current);
-    // A webfont landing after open changes the cell, not the container, so the
-    // observer never fires — and xterm re-measures its cell only on a font
-    // option change or a resize, so the fit kept the fallback font's cell and
-    // the rows/cols overflowed the pane. Re-setting the family (a trailing
-    // space keeps it a change) makes xterm measure again before the fit.
-    const onFontLoaded = () => {
-      const family = term.options.fontFamily ?? "";
-      term.options.fontFamily = family.endsWith(" ") ? family.trimEnd() : `${family} `;
-      refit();
-    };
-    document.fonts?.addEventListener("loadingdone", onFontLoaded);
-
+    if (xtermLoaded) start(xtermLoaded);
+    else loadXterm().then(start, () => undefined);
     return () => {
       disposed = true;
-      if (retryTimer) clearTimeout(retryTimer);
-      if (sizeTimer) clearTimeout(sizeTimer);
-      searchRef.current = null;
-      resizeObserver.disconnect();
-      document.fonts?.removeEventListener("loadingdone", onFontLoaded);
-      term.textarea?.removeEventListener("focus", reassert);
-      resizeDisposable.dispose();
-      dataDisposable.dispose();
-      ws?.close();
-      canvas?.dispose();
-      term.dispose();
-      termRef.current = null;
+      teardown?.();
     };
   }, [runId, wsBaseUrl]);
 
@@ -583,9 +651,7 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
         <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" || drop === "imagesOnly"
-              ? "border-red-400 text-red-300"
-              : "border-sky-400 text-sky-200"
+            drop === "failed" ? "border-red-400 text-red-300" : "border-sky-400 text-sky-200"
           }`}
         >
           {t(`drop.${drop}`)}

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

@@ -44,7 +44,7 @@ vi.mock("../../../lib/api", async (importOriginal) => {
           return { flag: id in lists, models: lists[id] ?? [], defaultModel: null };
         }),
       },
-      run: { files: r({ items: [] }), dropImage: r({ path: "/tmp/agenthub-drops-1/a.png" }) },
+      run: { files: r({ items: [] }), dropFile: r({ path: "/tmp/agenthub-drops-1/a.png" }) },
       ccConfig: {
         commands: r({
           items: [
@@ -59,6 +59,25 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         skills: r({
           items: [{ scope: "user", name: "review-pr", frontmatter: {}, preview: "Review a PR" }],
         }),
+        plugins: r({
+          plugins: [
+            {
+              name: "vercel",
+              enabled: true,
+              contributes: {
+                items: {
+                  skills: [{ name: "deploy", description: "Deploy to Vercel" }],
+                  commands: [],
+                },
+              },
+            },
+            {
+              name: "off",
+              enabled: false,
+              contributes: { items: { skills: [{ name: "deployer" }], commands: [] } },
+            },
+          ],
+        }),
       },
     },
   };
@@ -96,6 +115,9 @@ describe("PromptEditor — / and @ suggestions", () => {
     expect(options.map((o) => o.textContent)).toEqual([
       expect.stringContaining("/review"),
       expect.stringContaining("/review-pr"),
+      // Claude Code's bundled skills, matched on a word of their name.
+      expect.stringContaining("/code-review"),
+      expect.stringContaining("/security-review"),
     ]);
     fireEvent.keyDown(box(), { key: "ArrowDown" });
     // Read for the directory the session will start in, not the server's own.
@@ -108,6 +130,13 @@ describe("PromptEditor — / and @ suggestions", () => {
     expect(spies.onSubmit).not.toHaveBeenCalled();
   });
 
+  it("offers enabled plugins' skills under their plugin's name", async () => {
+    renderEditor("");
+    fireEvent.change(box(), { target: { value: "/deplo" } });
+    const options = await screen.findAllByRole("option");
+    expect(options.map((o) => o.textContent)).toEqual([expect.stringContaining("/vercel:deploy")]);
+  });
+
   it("suggests files under the folder on @", async () => {
     vi.mocked(api.run.files).mockResolvedValue({ items: ["src/main.ts"] });
     // The prompt is controlled by the caller: put the cursor at the end of it.
@@ -166,7 +195,7 @@ describe("PromptEditor — newlines and images", () => {
     const img = new File(["x"], "shot.png", { type: "image/png" });
     fireEvent.paste(box(), { clipboardData: { files: [img] } });
     const thumb = await screen.findByRole("button", { name: "shot.png" });
-    expect(api.run.dropImage).toHaveBeenCalledWith(img);
+    expect(api.run.dropFile).toHaveBeenCalledWith(img);
     // The path is not typed into the prompt; it goes with it on send.
     expect(screen.getByTestId("sent").textContent).toBe("see /tmp/agenthub-drops-1/a.png");
 
@@ -175,16 +204,43 @@ describe("PromptEditor — newlines and images", () => {
     fireEvent.keyDown(document, { key: "Escape" });
     expect(screen.queryByRole("dialog")).toBeNull();
 
-    fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
+    fireEvent.click(screen.getByRole("button", { name: "Remove attachment" }));
     expect(screen.queryByRole("button", { name: "shot.png" })).toBeNull();
     expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:shot");
     expect(screen.getByTestId("sent").textContent).toBe("see");
   });
 
+  it("attaches a dropped non-image file as a name chip sent by its path", async () => {
+    vi.mocked(api.run.dropFile).mockResolvedValueOnce({ path: "/tmp/agenthub-drops-1/b-spec.pdf" });
+    function Harness() {
+      const [images, setImages] = useState<PromptImage[]>([]);
+      return (
+        <>
+          <PromptEditor
+            value="read"
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder="Ask anything…"
+            slash
+            fileCwd="/Users/tester"
+            images={images}
+            onImagesChange={setImages}
+          />
+          <output data-testid="sent">{promptWithImages("read", images)}</output>
+        </>
+      );
+    }
+    render(<Harness />);
+    const pdf = new File(["%PDF"], "spec.pdf", { type: "application/pdf" });
+    fireEvent.drop(box(), { dataTransfer: { files: [pdf] } });
+    expect(await screen.findByText("spec.pdf")).toBeTruthy();
+    expect(screen.getByTestId("sent").textContent).toBe("read /tmp/agenthub-drops-1/b-spec.pdf");
+  });
+
   it("leaves a text paste to the textarea", () => {
     renderEditor("");
     fireEvent.paste(box(), { clipboardData: { files: [] } });
-    expect(api.run.dropImage).not.toHaveBeenCalled();
+    expect(api.run.dropFile).not.toHaveBeenCalled();
   });
 });
 

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

@@ -3,13 +3,14 @@
  * @description Tests for the xterm.js-backed terminal view: verifies it opens
  * a WS connection to the right URL, writes incoming binary frames to the
  * mocked terminal, forwards typed input as outgoing binary frames, and
- * re-attaches after the socket drops (server restart) but not after `exit`,
+ * re-attaches after the socket drops (server restart) with backoff, but not
+ * after `exit` or a policy close,
  * and recolours live on a dark-theme change without re-attaching.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from "vitest";
 import { render, cleanup, act, fireEvent, screen, waitFor } from "@testing-library/react";
-import { TerminalView } from "../TerminalView";
+import { TerminalView, loadXterm } from "../TerminalView";
 import { pasteToRun } from "../../../lib/panePaste";
 
 const writeMock = vi.fn();
@@ -20,9 +21,9 @@ const wheelHandlerMock = vi.fn();
 const keyHandlerMock = vi.fn();
 const focusMock = vi.fn();
 const pasteMock = vi.fn();
-const dropImageMock = vi.fn();
+const dropFileMock = vi.fn();
 vi.mock("../../../lib/api", () => ({
-  api: { run: { dropImage: (f: Blob) => dropImageMock(f) } },
+  api: { run: { dropFile: (f: File) => dropFileMock(f) } },
 }));
 const loadAddonMock = vi.fn();
 // Mutable stand-ins for the two live terminal facts the wheel handler reads.
@@ -87,7 +88,7 @@ class MockWebSocket {
   sent: unknown[] = [];
   onopen: (() => void) | null = null;
   onmessage: ((e: { data: unknown }) => void) | null = null;
-  onclose: (() => void) | null = null;
+  onclose: ((e?: { code: number }) => void) | null = null;
   readyState = 1; // OPEN — the component only sends on an open socket
   static OPEN = 1;
   constructor(url: string) {
@@ -105,6 +106,9 @@ class MockWebSocket {
 global.WebSocket = MockWebSocket;
 
 describe("TerminalView", () => {
+  // xterm is a lazy chunk; once loaded every terminal sets up synchronously.
+  beforeAll(() => loadXterm());
+
   beforeEach(() => {
     termState.modes.mouseTrackingMode = "none";
     termState.buffer.active.type = "alternate";
@@ -388,6 +392,23 @@ describe("TerminalView", () => {
     vi.useRealTimers();
   });
 
+  it("backs off between failed re-attaches, and stops on a policy close (1008)", () => {
+    vi.useFakeTimers();
+    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+    MockWebSocket.instances[0]!.close();
+    vi.advanceTimersByTime(1600);
+    expect(MockWebSocket.instances).toHaveLength(2);
+    MockWebSocket.instances[1]!.close(); // failed again: now 3 s
+    vi.advanceTimersByTime(1600);
+    expect(MockWebSocket.instances).toHaveLength(2);
+    vi.advanceTimersByTime(1500);
+    expect(MockWebSocket.instances).toHaveLength(3);
+    act(() => MockWebSocket.instances[2]!.onclose?.({ code: 1008 }));
+    vi.advanceTimersByTime(60_000);
+    expect(MockWebSocket.instances).toHaveLength(3);
+    vi.useRealTimers();
+  });
+
   it("does not re-attach once the server reported the pane exited", () => {
     vi.useFakeTimers();
     render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
@@ -400,29 +421,36 @@ describe("TerminalView", () => {
   });
 
   it("pastes the server-side path of a dropped image into the pane", async () => {
-    dropImageMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab.png" });
+    dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-shot.png" });
     pasteMock.mockClear();
     render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
     const img = new File([new Uint8Array([137, 80])], "shot.png", { type: "image/png" });
     const target = screen.getByTestId("terminal-view");
     fireEvent.dragEnter(target, { dataTransfer: { types: ["Files"], files: [img] } });
-    expect(screen.getByTestId("terminal-drop")).toHaveTextContent("Drop image to attach");
+    expect(screen.getByTestId("terminal-drop")).toHaveTextContent("Drop files or images to attach");
     fireEvent.drop(target, { dataTransfer: { types: ["Files"], files: [img] } });
-    await waitFor(() => expect(pasteMock).toHaveBeenCalledWith("/tmp/agenthub-drops-1/ab.png "));
-    expect(dropImageMock).toHaveBeenCalledWith(img);
+    await waitFor(() =>
+      expect(pasteMock).toHaveBeenCalledWith("/tmp/agenthub-drops-1/ab-shot.png ")
+    );
+    expect(dropFileMock).toHaveBeenCalledWith(img);
     await waitFor(() => expect(screen.queryByTestId("terminal-drop")).toBeNull());
   });
 
-  it("uploads nothing for a dropped non-image and says why", async () => {
-    dropImageMock.mockReset();
+  it("pastes every path of several dropped files, images or not", async () => {
+    dropFileMock
+      .mockReset()
+      .mockImplementation(async (f: File) => ({ path: `/tmp/agenthub-drops-1/x-${f.name}` }));
     pasteMock.mockClear();
     render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
     const txt = new File(["hi"], "a.txt", { type: "text/plain" });
+    const img = new File(["x"], "b.png", { type: "image/png" });
     fireEvent.drop(screen.getByTestId("terminal-view"), {
-      dataTransfer: { types: ["Files"], files: [txt] },
+      dataTransfer: { types: ["Files"], files: [txt, img] },
     });
-    expect(await screen.findByText("Only images can be dropped here")).toBeInTheDocument();
-    expect(dropImageMock).not.toHaveBeenCalled();
-    expect(pasteMock).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(pasteMock).toHaveBeenCalledWith(
+        "/tmp/agenthub-drops-1/x-a.txt /tmp/agenthub-drops-1/x-b.png "
+      )
+    );
   });
 });

client/src/components/settings/AppearanceSettings.tsx

@@ -23,7 +23,6 @@ const THEME_LABELS: Record<string, string> = {
   darcula: "Darcula",
   "apple-dark": "Apple Dark",
   "apple-light": "Apple Light",
-  "intellij-light": "IntelliJ Light",
   canvas: "Canvas",
   "orca-dark": "Orca Dark",
   "orca-light": "Orca Light",

client/src/components/settings/ClaudeAgentHubSettings.tsx

@@ -56,6 +56,7 @@ export function ClaudeAgentHubSettings({ onHomeChanged }: { onHomeChanged?: () =
   // badge current the way the old Settings page did, every 10 s.
   useEffect(() => {
     const id = setInterval(() => {
+      if (!(document.visibilityState === "visible")) return;
       api.settings
         .info()
         .then((r) => setHooks(r.hooks))

client/src/components/settings/UsersSettings.tsx

@@ -0,0 +1,108 @@
+/**
+ * @file UsersSettings.tsx
+ * @description Settings → Users, server mode only and only for an admin or
+ * analyst (docs/SERVER-MODE.md): every account with its role, state,
+ * workspaces, sessions and the tokens/$ it used in the last 7 and 30 days
+ * (`GET /api/users`), and the audit log of staff reads of members' sessions
+ * (`GET /api/users/audit`). Read-only — accounts are managed with
+ * `agenthub users …` on the host.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type ServerUserUsage, type AuditEntry } from "../../lib/api";
+import { fmt, fmtCost, formatDateTime } from "../../lib/format";
+import { SettingsSection } from "./SettingsRow";
+
+export function UsersSettings() {
+  const { t } = useTranslation("settings");
+  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
+  const [audit, setAudit] = useState<AuditEntry[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.users
+      .list()
+      .then((r) => setUsers(r.users))
+      .catch((e: Error) => setError(e.message));
+    api.users
+      .audit()
+      .then((r) => setAudit(r.entries))
+      .catch(() => setAudit([]));
+  }, []);
+
+  return (
+    <>
+      <SettingsSection title={t("users.title")} description={t("users.description")}>
+        {error && (
+          <p role="alert" className="py-2 text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+        {users && (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm" data-testid="users-table">
+              <thead className="text-left text-[11px] uppercase text-fg-muted">
+                <tr>
+                  <th className="py-2 pr-3 font-medium">{t("users.name")}</th>
+                  <th className="py-2 pr-3 font-medium">{t("users.role")}</th>
+                  <th className="py-2 pr-3 text-right font-medium">{t("users.workspaces")}</th>
+                  <th className="py-2 pr-3 text-right font-medium">{t("users.sessions")}</th>
+                  <th className="py-2 pr-3 text-right font-medium">{t("users.last7d")}</th>
+                  <th className="py-2 text-right font-medium">{t("users.last30d")}</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border/60">
+                {users.map((u) => (
+                  <tr key={u.id} className={u.disabled ? "text-fg-muted" : "text-fg-secondary"}>
+                    <td className="py-2 pr-3">
+                      {u.username}
+                      {u.disabled && (
+                        <span className="ml-2 text-[11px]">({t("users.disabled")})</span>
+                      )}
+                    </td>
+                    <td className="py-2 pr-3">{u.role}</td>
+                    <td className="py-2 pr-3 text-right tabular-nums">{u.workspaces}</td>
+                    <td className="py-2 pr-3 text-right tabular-nums">{u.sessions}</td>
+                    <td
+                      className="py-2 pr-3 text-right tabular-nums"
+                      title={t("users.tokens", { n: fmt(u.last7d.tokens) })}
+                    >
+                      {fmtCost(u.last7d.cost)}
+                    </td>
+                    <td
+                      className="py-2 text-right tabular-nums"
+                      title={t("users.tokens", { n: fmt(u.last30d.tokens) })}
+                    >
+                      {fmtCost(u.last30d.cost)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+        <p className="pt-2 text-[11px] text-fg-muted">{t("users.manageHint")}</p>
+      </SettingsSection>
+      <SettingsSection title={t("users.auditTitle")} description={t("users.auditDescription")}>
+        {audit?.length === 0 && (
+          <p className="py-2 text-sm text-fg-muted">{t("users.auditEmpty")}</p>
+        )}
+        {audit && audit.length > 0 && (
+          <ul className="divide-y divide-border/60 text-xs" data-testid="audit-list">
+            {audit.map((a) => (
+              <li key={a.id} className="flex gap-3 py-1.5">
+                <span className="w-36 flex-shrink-0 text-fg-muted">{formatDateTime(a.at)}</span>
+                <span className="w-40 flex-shrink-0 text-fg-secondary">
+                  {a.reader} → {a.owner}
+                </span>
+                <span className="min-w-0 truncate font-mono text-fg-muted">{a.path}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </SettingsSection>
+    </>
+  );
+}

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

@@ -50,7 +50,6 @@ describe("AppearanceSettings", () => {
       "Apple Dark",
       "Orca Dark",
       "Apple Light",
-      "IntelliJ Light",
       "Canvas",
       "Orca Light",
     ]) {

client/src/components/workflows/LanePipelinePanel.tsx

@@ -15,6 +15,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { api } from "../../lib/api";
 import { useLiveRefresh } from "../../hooks/useLiveRefresh";
+import { laneChangeMatcher } from "../../lib/laneChange";
 import type { PipelineStats } from "../../lib/types";
 
 /** Percentage of `n` out of `total`, 0 when nothing was recorded. */
@@ -52,8 +53,12 @@ export function LanePipelinePanel({
   }, [refresh]);
 
   // Stages move as agents declare them; throttled (not debounced) so a burst
-  // costs one fetch and a steady stream still refreshes every 3 s.
-  useLiveRefresh(() => void refresh(), { match: (msg) => msg.type === "lane_update" });
+  // costs one fetch and a steady stream still refreshes every 3 s. A lane's
+  // re-broadcast that moved no stage column is ignored.
+  const [stageChanged] = useState(() =>
+    laneChangeMatcher((l) => `${l.pipeline}:${l.stage}:${l.active_feature_id}`)
+  );
+  useLiveRefresh(() => void refresh(), { match: stageChanged });
 
   const hasPipelines = !!data && data.pipelines.length > 0;
   useEffect(() => {

client/src/components/workflows/SkillUsagePanel.tsx

@@ -33,8 +33,10 @@ export function SkillUsagePanel({ statusFilter }: { statusFilter: string }) {
     void refresh();
   }, [refresh]);
 
-  // Throttled (not debounced): a steady event stream still refreshes every 3 s.
+  // Throttled (not debounced): a steady event stream still refreshes, every
+  // 15 s — it is an aggregate over every event.
   useLiveRefresh(() => void refresh(), {
+    throttleMs: 15000,
     match: (msg) => msg.type === "new_event" || msg.type === "session_updated",
   });
 

client/src/hooks/__tests__/useSpin.test.ts

@@ -0,0 +1,57 @@
+/**
+ * @file useSpin.test.ts
+ * @description Tests the Refresh-button hook: the reload runs with no
+ * arguments, a click while it is in flight is dropped, and the spin lasts at
+ * least the floor even when the reload answers at once — also under StrictMode's
+ * mount → unmount → mount, which once left it spinning for good.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { StrictMode } from "react";
+import { act, renderHook } from "@testing-library/react";
+import { useSpin } from "../useSpin";
+
+afterEach(() => vi.useRealTimers());
+
+describe("useSpin", () => {
+  it("drops a click while the reload is in flight, and spins for the floor after it answers", async () => {
+    vi.useFakeTimers();
+    let answer!: () => void;
+    const load = vi.fn(() => new Promise<void>((r) => (answer = r)));
+    const { result } = renderHook(() => useSpin(load, 600));
+
+    act(() => {
+      void result.current[1]();
+    });
+    expect(result.current[0]).toBe(true);
+    expect(load).toHaveBeenCalledWith();
+    act(() => {
+      void result.current[1]();
+    });
+    expect(load).toHaveBeenCalledTimes(1);
+
+    // Answered at once: still spinning until the floor, but a new click reloads.
+    await act(async () => answer());
+    expect(result.current[0]).toBe(true);
+    act(() => {
+      void result.current[1]();
+    });
+    expect(load).toHaveBeenCalledTimes(2);
+    await act(async () => {
+      answer();
+      await vi.advanceTimersByTimeAsync(600);
+    });
+    expect(result.current[0]).toBe(false);
+  });
+
+  it("stops spinning under StrictMode's double mount", async () => {
+    vi.useFakeTimers();
+    const { result } = renderHook(() => useSpin(() => undefined, 600), { wrapper: StrictMode });
+    await act(async () => {
+      void result.current[1]();
+      await vi.advanceTimersByTimeAsync(600);
+    });
+    expect(result.current[0]).toBe(false);
+  });
+});

client/src/hooks/__tests__/useThrottledValue.test.ts

@@ -0,0 +1,29 @@
+/**
+ * @file useThrottledValue.test.ts
+ * @description Tests for `useThrottledValue`: the first change lands at once, a
+ * burst inside the window collapses into one trailing update with the last value.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useThrottledValue } from "../useThrottledValue";
+
+afterEach(() => vi.useRealTimers());
+
+describe("useThrottledValue", () => {
+  it("is leading + trailing", () => {
+    vi.useFakeTimers();
+    const { result, rerender } = renderHook(({ v }) => useThrottledValue(v, 3000), {
+      initialProps: { v: "a" },
+    });
+    expect(result.current).toBe("a");
+    act(() => vi.advanceTimersByTime(5000));
+    rerender({ v: "b" });
+    expect(result.current).toBe("b"); // leading
+    rerender({ v: "c" });
+    rerender({ v: "d" });
+    expect(result.current).toBe("b"); // inside the window
+    act(() => vi.advanceTimersByTime(3000));
+    expect(result.current).toBe("d"); // trailing, last value
+  });
+});

client/src/hooks/useLiveRefresh.ts

@@ -36,8 +36,9 @@ export function useLiveRefresh(load: () => void, opts: LiveRefreshOptions = {}):
     if (!enabled) return;
     const live = throttle(() => loadRef.current(), throttleMs);
     const visible = () => document.visibilityState === "visible";
+    // A hidden tab ignores events: onVis reloads once when it is shown again.
     const offMsg = eventBus.subscribe((msg) => {
-      if (matchRef.current?.(msg)) live();
+      if (visible() && matchRef.current?.(msg)) live();
     });
     let wasDown = !eventBus.connected;
     // (Guarded: test doubles of the bus often stub `subscribe` only.)
@@ -47,7 +48,7 @@ export function useLiveRefresh(load: () => void, opts: LiveRefreshOptions = {}):
             if (!up) wasDown = true;
             else if (wasDown) {
               wasDown = false;
-              live();
+              if (visible()) live();
             }
           })
         : () => undefined;

client/src/hooks/useNotifications.ts

@@ -121,9 +121,11 @@ export function useNotifications() {
         type: NotifType,
         title: string,
         body: string,
-        url?: Promise<string | undefined>
+        // A thunk: the pane lookup (GET /api/run) runs only for a
+        // notification that is actually shown, never per incoming event.
+        url?: () => Promise<string | undefined>
       ) =>
-        void Promise.resolve(url)
+        void Promise.resolve(url?.())
           .then((u) => notify(title, body, u))
           .then((r) => {
             if (r.via === "native" || r.via === "push" || r.via === "local")
@@ -138,7 +140,7 @@ export function useNotifications() {
             "onNewSession",
             i18n.t("errors:notifications.newSession"),
             s.name || `${i18n.t("errors:notifications.sessionDefault")}${s.id.slice(0, 8)}`,
-            laneUrlForSession(s.id)
+            () => laneUrlForSession(s.id)
           );
           break;
         }
@@ -149,7 +151,7 @@ export function useNotifications() {
               "onSessionError",
               i18n.t("errors:notifications.sessionError"),
               s.name || `${i18n.t("errors:notifications.sessionDefault")}${s.id.slice(0, 8)}`,
-              laneUrlForSession(s.id)
+              () => laneUrlForSession(s.id)
             );
           }
           break;
@@ -158,10 +160,7 @@ export function useNotifications() {
           if (!prefs.onSubagentSpawn) return;
           const a = msg.data as Agent;
           if (a.type === "subagent") {
-            show(
-              "onSubagentSpawn",
-              i18n.t("errors:notifications.subagentSpawned"),
-              a.name,
+            show("onSubagentSpawn", i18n.t("errors:notifications.subagentSpawned"), a.name, () =>
               laneUrlForSession(a.session_id)
             );
           }
@@ -169,7 +168,7 @@ export function useNotifications() {
         }
         case "new_event": {
           const ev = msg.data as DashboardEvent;
-          const url = laneUrlForSession(ev.session_id);
+          const url = () => laneUrlForSession(ev.session_id);
           // The two states where Claude is BLOCKED on the user get their own
           // flags (issue #29): `Notification` is a permission prompt or a
           // question, `Stop` is the end of a turn. Both used to hang off

client/src/hooks/useSpin.ts

@@ -0,0 +1,53 @@
+/**
+ * @file useSpin.ts
+ * @description A Refresh button's busy state. `run` calls the reload with no
+ * arguments (an `onClick={load}` handed the click event to it) and keeps
+ * `spinning` true for at least `minMs`, so a reload answered from a cache or
+ * a throttle in a few milliseconds still shows the user that it ran.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * @returns `[spinning, run]`. A click while the reload is still in flight is
+ * dropped; once it has answered, a click reloads again even if the icon is
+ * still finishing its minimum spin.
+ */
+export function useSpin(fn: () => unknown, minMs = 600): [boolean, () => Promise<void>] {
+  const [spinning, setSpinning] = useState(false);
+  const inFlight = useRef(false);
+  const lastRun = useRef(0);
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+  const alive = useRef(true);
+  // Set on mount too: StrictMode mounts, unmounts and mounts again, and a
+  // cleanup-only effect left `alive` false — the spin never stopped and the
+  // button stayed busy for good.
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+
+  const run = useCallback(async () => {
+    if (inFlight.current) return;
+    inFlight.current = true;
+    const id = ++lastRun.current;
+    const started = Date.now();
+    setSpinning(true);
+    try {
+      await fnRef.current();
+    } finally {
+      inFlight.current = false;
+      const rest = minMs - (Date.now() - started);
+      if (rest > 0) await new Promise((r) => setTimeout(r, rest));
+      // Only the newest run stops the spin: an older one's floor ending must
+      // not cut short a reload clicked after it.
+      if (alive.current && id === lastRun.current) setSpinning(false);
+    }
+  }, [minMs]);
+
+  return [spinning, run];
+}

client/src/hooks/useTheme.ts

@@ -19,7 +19,7 @@ export type ThemeMode = Theme | "system";
 /** Named themes per mode, in picker order. `default` is the stock palette. */
 export const THEMES = {
   dark: ["default", "darcula", "apple-dark", "orca-dark"],
-  light: ["default", "apple-light", "intellij-light", "canvas", "orca-light"],
+  light: ["default", "apple-light", "canvas", "orca-light"],
 } as const satisfies Record<Theme, readonly string[]>;
 
 const MODE_KEY = "theme";

client/src/hooks/useThrottledValue.ts

@@ -0,0 +1,22 @@
+/**
+ * @file useThrottledValue.ts
+ * @description Returns `value`, but lets it change at most once per `ms`
+ * (leading + trailing, via `lib/throttle.ts`): the first change shows at once,
+ * a burst collapses into one more update when it settles, and the last value
+ * always lands. For effect keys that move on every hook (a lane's status or
+ * session flipping between two sessions) so the fetch they drive cannot storm.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { throttle } from "../lib/throttle";
+
+export function useThrottledValue<T>(value: T, ms: number): T {
+  const [shown, setShown] = useState(value);
+  const latest = useRef(value);
+  latest.current = value;
+  const push = useMemo(() => throttle(() => setShown(latest.current), ms), [ms]);
+  useEffect(() => () => push.cancel(), [push]);
+  useEffect(() => push(), [value, push]);
+  return shown;
+}

client/src/hooks/useWebSocket.ts

@@ -128,7 +128,10 @@ export function useWebSocket(onMessage: MessageHandler) {
         // restart is picked up within a few seconds rather than after a long
         // idle wait. The focus/online/visibility listeners below reconnect
         // instantly on top of this for the common "user comes back" case.
-        const delay = Math.min(500 * Math.pow(2, reconnectAttempts.current), 3000);
+        // Jittered (×0.5–1.5) so a server restart is not met by every
+        // browser reconnecting in the same instant.
+        const delay =
+          Math.min(500 * Math.pow(2, reconnectAttempts.current), 3000) * (0.5 + Math.random());
         reconnectAttempts.current++;
         reconnectTimer.current = setTimeout(connect, delay);
       }

client/src/i18n/index.ts

@@ -1,8 +1,10 @@
 /**
  * @file index.ts
- * @description i18next bootstrap for the dashboard client. Registers bundled JSON
- * locale files for English (`en`) and Vietnamese (`vi`), wires browser language detection, and exports the configured
- * singleton consumed by `react-i18next`.
+ * @description i18next bootstrap for the dashboard client. Loads the JSON locale
+ * files for English (`en`) and Vietnamese (`vi`) lazily — only the active language
+ * (and the `en` fallback) — wires browser language detection, and exports the
+ * configured singleton consumed by `react-i18next` plus `i18nReady`, the promise
+ * the entry point awaits before the first render.
  *
  * ## Namespaces
  * Translations are split by feature area (`dashboard`, `sessions`, `settings`,
@@ -38,14 +40,7 @@
  * scoped GET via `?sources=`. Health checks and import history surface in Settings.
  *
  * ## Internal dependencies
- * - `./locales/en/common.json`
- * - `./locales/vi/common.json`
- * - `./locales/en/nav.json`
- * - `./locales/vi/nav.json`
- * - `./locales/en/dashboard.json`
- * - `./locales/vi/dashboard.json`
- * - `./locales/en/sessions.json`
- * - `./locales/vi/sessions.json`
+ * - `./locales/<lng>/<ns>.json` (lazy, via `import.meta.glob`)
  *
  * ## Testing pointers
  * - Prefer colocated `__tests__` with Vitest + Testing Library for UI.
@@ -57,44 +52,30 @@
  * - `skills/file-headers/` — mandatory `@author` header policy.
  * ============================================================================= */
 
-import i18n from "i18next";
+import i18n, { type BackendModule, type ResourceKey } from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 
-import common_en from "./locales/en/common.json";
-import common_vi from "./locales/vi/common.json";
-import nav_en from "./locales/en/nav.json";
-import nav_vi from "./locales/vi/nav.json";
-import dashboard_en from "./locales/en/dashboard.json";
-import dashboard_vi from "./locales/vi/dashboard.json";
-import sessions_en from "./locales/en/sessions.json";
-import sessions_vi from "./locales/vi/sessions.json";
-import activity_en from "./locales/en/activity.json";
-import activity_vi from "./locales/vi/activity.json";
-import analytics_en from "./locales/en/analytics.json";
-import analytics_vi from "./locales/vi/analytics.json";
-import workflows_en from "./locales/en/workflows.json";
-import workflows_vi from "./locales/vi/workflows.json";
-import settings_en from "./locales/en/settings.json";
-import settings_vi from "./locales/vi/settings.json";
-import kanban_en from "./locales/en/kanban.json";
-import kanban_vi from "./locales/vi/kanban.json";
-import errors_en from "./locales/en/errors.json";
-import errors_vi from "./locales/vi/errors.json";
-import updates_en from "./locales/en/updates.json";
-import updates_vi from "./locales/vi/updates.json";
-import ccConfig_en from "./locales/en/ccConfig.json";
-import ccConfig_vi from "./locales/vi/ccConfig.json";
-import codexConfig_en from "./locales/en/codexConfig.json";
-import codexConfig_vi from "./locales/vi/codexConfig.json";
-import run_en from "./locales/en/run.json";
-import run_vi from "./locales/vi/run.json";
-import alerts_en from "./locales/en/alerts.json";
-import alerts_vi from "./locales/vi/alerts.json";
-import splash_en from "./locales/en/splash.json";
-import splash_vi from "./locales/vi/splash.json";
-import lanes_en from "./locales/en/lanes.json";
-import lanes_vi from "./locales/vi/lanes.json";
+// Every locale file is its own lazy chunk (vite.config.ts groups them into one
+// chunk per language), so a page loads only the language it shows. i18next
+// reads them through this inline backend: `init` fetches the detected language
+// (plus the `en` fallback), and `changeLanguage` fetches a new one BEFORE it
+// switches, so no raw key is ever painted.
+const localeFiles = import.meta.glob<Record<string, unknown>>("./locales/*/*.json", {
+  import: "default",
+});
+const lazyLocales: BackendModule = {
+  type: "backend",
+  init() {},
+  read(lng, ns, cb) {
+    const load = localeFiles[`./locales/${lng}/${ns}.json`];
+    if (!load) return cb(null, {});
+    load().then(
+      (data) => cb(null, data as ResourceKey),
+      (err) => cb(err, false)
+    );
+  },
+};
 
 /** Keep `<html lang>` on the active language, so a screen reader speaks the
  *  page with the right voice and the browser hyphenates/translates correctly.
@@ -105,50 +86,13 @@ export function syncDocumentLang(): void {
 }
 i18n.on("languageChanged", syncDocumentLang);
 
-i18n
+/** Resolves once the detected language's namespaces are loaded; `main.tsx`
+ *  awaits it before the first render. */
+export const i18nReady = i18n
+  .use(lazyLocales)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    resources: {
-      en: {
-        common: common_en,
-        nav: nav_en,
-        dashboard: dashboard_en,
-        sessions: sessions_en,
-        activity: activity_en,
-        analytics: analytics_en,
-        workflows: workflows_en,
-        settings: settings_en,
-        kanban: kanban_en,
-        errors: errors_en,
-        updates: updates_en,
-        ccConfig: ccConfig_en,
-        codexConfig: codexConfig_en,
-        run: run_en,
-        alerts: alerts_en,
-        splash: splash_en,
-        lanes: lanes_en,
-      },
-      vi: {
-        common: common_vi,
-        nav: nav_vi,
-        dashboard: dashboard_vi,
-        sessions: sessions_vi,
-        activity: activity_vi,
-        analytics: analytics_vi,
-        workflows: workflows_vi,
-        settings: settings_vi,
-        kanban: kanban_vi,
-        errors: errors_vi,
-        updates: updates_vi,
-        ccConfig: ccConfig_vi,
-        codexConfig: codexConfig_vi,
-        run: run_vi,
-        alerts: alerts_vi,
-        splash: splash_vi,
-        lanes: lanes_vi,
-      },
-    },
     supportedLngs: ["en", "vi"],
     nonExplicitSupportedLngs: true,
     fallbackLng: "en",
@@ -182,5 +126,5 @@ i18n
 
 syncDocumentLang();
 
-/** Configured i18next instance — import side effects run {@link init}. */
+/** Configured i18next instance — import side effects start {@link init}. */
 export default i18n;

client/src/i18n/locales/en/ccConfig.json

@@ -263,7 +263,8 @@
     "title": "Claude Code profiles",
     "openButton": "Switch profile",
     "subtitle": "A profile is one Anthropic account - its own quota. Switching swaps only the login (credentials + account identity); skills, subagents, memory, plugins, marketplaces, MCP servers and settings all stay exactly as they are.",
-    "warning": "Close your running Claude Code sessions before switching - a live session rewrites the config on exit and would put the old account back.",
+    "warning": "Running Claude Code sessions follow a switch on their own: they pick up the new login within about 30 seconds.",
+    "mismatch": "The login in use belongs to {{owner}}, but Claude Code's config names {{config}}. Requests are billed to {{owner}}. Switch to the account you want to fix this.",
     "activeLabel": "Logged in now",
     "noActive": "No Claude account is logged in on this machine.",
     "unsavedActive": "This account is not saved as a profile yet - save it, otherwise you cannot switch away without losing its credentials.",

client/src/i18n/locales/en/common.json

@@ -202,5 +202,32 @@
     "message": "Your edits have not been saved and will be lost.",
     "discard": "Discard",
     "keep": "Keep editing"
+  },
+  "auth": {
+    "title": "Sign in to AgentHub",
+    "username": "Username",
+    "password": "Password",
+    "submit": "Sign in",
+    "submitting": "Signing in…",
+    "failed": "Wrong username or password",
+    "tooMany": "Too many failed attempts — try again in a few minutes",
+    "logout": "Sign out",
+    "signedInAs": "Signed in as {{name}} ({{role}})"
+  },
+  "insights": {
+    "help": {
+      "sessions": "A session is one conversation with an AI agent, from start to finish.",
+      "agents": "Agents are the AI workers: the main one in each session plus any helpers it started.",
+      "tokens": "Tokens are the pieces of text the AI reads and writes. Roughly 1 token ≈ 4 characters. More tokens = more cost.",
+      "cost": "Estimated money spent, calculated from token counts and each model's price.",
+      "events": "Every step the AI takes (running a tool, finishing a reply…) is recorded as one event.",
+      "tokenMix": "Input = what you and the files sent the AI. Output = what the AI wrote. Cache read = text reused from memory (about 10× cheaper). Cache write = text saved to memory for reuse.",
+      "spendPace": "How fast money is being spent, and where this month will end up if that speed continues.",
+      "toolCalls": "How many actions the AI took: reading a file, editing, running a command…",
+      "subagents": "Helper agents the main AI started to work on part of the task in parallel.",
+      "compactions": "When a conversation gets too long, it is summarized to make room. Early details can be lost.",
+      "errors": "Steps that failed. A few are normal; many may mean the AI got stuck.",
+      "tokenFlow": "Input = sent to the AI, Output = written by the AI, Cache = reused from memory (cheaper)."
+    }
   }
 }

client/src/i18n/locales/en/lanes.json

@@ -93,8 +93,9 @@
   "changes.noMatches": "No tracked file matches.",
   "changes.openFile": "Open {{path}}",
   "changes.quickOpen": "Find a file by path…",
-  "changes.range.branch": "vs base",
-  "changes.range.branchHint": "base...HEAD — everything this workspace's branch adds on top of its base",
+  "changes.range.branch": "Compared to {{base}}",
+  "changes.range.baseBranch": "base branch",
+  "changes.range.branchHint": "{{base}}...HEAD — everything this branch adds on top of {{base}}",
   "changes.range.work": "Uncommitted",
   "changes.range.workHint": "Working tree vs HEAD — what has been touched and not committed",
   "changes.refresh": "Refresh",
@@ -244,6 +245,7 @@
   "changes.edit": "Edit",
   "changes.save": "Save",
   "changes.revertBlock": "Revert",
+  "changes.blockNotInDiff": "That change is no longer in git's diff; refresh and retry",
   "changes.cancelEdit": "Cancel",
   "changes.preview": "Preview",
   "changes.raw": "Raw",
@@ -269,14 +271,35 @@
   "gitBar.mergeUpstream": "Merge {{upstream}}",
   "gitBar.mergeUpstreamHint": "The branch has diverged from its upstream: merge it in (conflicts are resolved in the Changes panel)",
   "gitBar.mergeConfirm": "Merge {{branch}} into {{current}}? Files in this workspace change now — if an agent is working in this workspace, let it finish first.",
+  "gitBar.pushConfirm": "Push {{count}} commit(s) from {{branch}} to {{upstream}}? Anyone with access to the remote will see them, and a push cannot be taken back from here.",
+  "gitBar.publishBranchConfirm": "Publish branch {{branch}} to the remote? Anyone with access to the remote will see it.",
+  "gitBar.publishConfirm": "Add {{url}} as this repo's remote and push {{branch}} to it? Anyone with access to that remote will see the code.",
+  "gitBar.branchDeleteConfirm": "Delete the local branch {{branch}}? Git refuses if it holds commits merged nowhere else.",
   "gitBar.mergeConflicts": "Merge stopped on {{count}} conflicted file(s) — resolve them in the list below.",
-  "gitBar.merging": "A merge is in progress: finish or abort it first",
+  "gitBar.merging": "A {{op}} is in progress: finish or abort it first",
   "changes.conflictsGroup": "Merge conflicts",
-  "changes.mergeBanner": "Merge in progress — {{count}} file(s) still conflicted",
-  "changes.mergeReady": "Merge in progress — every conflict is resolved",
-  "changes.mergeCommit": "Complete merge",
-  "changes.mergeAbort": "Abort merge",
-  "changes.mergeAbortConfirm": "Click again to abort the merge",
+  "changes.mergeBanner": "A {{op}} is in progress \u2014 {{count}} file(s) still conflicted",
+  "changes.mergeReady": "A {{op}} is in progress \u2014 every conflict is resolved",
+  "changes.mergeCommit": "Complete {{op}}",
+  "changes.mergeAbort": "Abort {{op}}",
+  "changes.mergeAbortConfirm": "Click again to abort the {{op}}",
+  "changes.discardShortConfirm": "Discard?",
+  "changes.amend": "Amend",
+  "changes.amendHint": "Fold the staged changes into the last commit (only before it is pushed). Leave the message empty to keep the old one.",
+  "changes.amendPlaceholder": "New message (empty = keep the old one)",
+  "changes.historyOf": "History of branch",
+  "changes.cherryPick": "Cherry-pick onto {{branch}}",
+  "changes.revertCommit": "Revert this commit",
+  "changes.undoCommit": "Undo commit (keep changes)",
+  "changes.undoCommitTitle": "Undo the last commit?",
+  "changes.undoCommitBody": "{{short}} \"{{subject}}\" is removed from the branch. Its changes stay staged, so you can edit them and commit again.",
+  "changes.undoCommitConfirm": "Undo commit",
+  "changes.revertConfirm": "Add a commit on {{branch}} that undoes {{short}} \"{{subject}}\"? Files in this workspace change now.",
+  "changes.cherryPickConfirm": "Apply {{short}} \"{{subject}}\" from {{from}} onto {{branch}} as a new commit? Files in this workspace change now.",
+  "changes.amendTitle": "Amend the last commit?",
+  "changes.amendConfirm": "\"{{subject}}\" is replaced by a new commit with the staged changes folded in. The server refuses if it is already pushed.",
+  "changes.opConflicts": "The {{op}} stopped on {{count}} conflict(s) — resolve them in Changes",
+  "changes.opDone": "{{op}} done",
   "changes.takeOurs": "Keep mine",
   "changes.takeTheirs": "Take theirs",
   "changes.markResolved": "Mark resolved (after editing out the markers)",
@@ -330,9 +353,6 @@
   "tree.allTools": "All tools",
   "tree.newSession": "New session",
   "tree.noSessions": "No sessions yet",
-  "tree.closedTerminal": "Closed terminal — click opens a new one in this workspace's folder (Ctrl/Cmd+click: in a split)",
-  "tree.reopenTerminal": "Open a new terminal",
-  "tree.forgetTerminal": "Remove from list",
   "tree.transcriptHint": "No live pane — opens its conversation; a message you send resumes it",
   "tree.splitHint": "Live pane — Ctrl/Cmd+click opens it in a split beside the focused pane",
   "tree.renameSession": "Rename session",
@@ -346,6 +366,7 @@
   "tree.unarchive": "Unarchive",
   "home.breadcrumb": "Workspaces",
   "home.ai": "AI",
+  "home.openTerminal": "Open terminal",
   "home.repoRoot": "Repository root",
   "home.mainBranch": "Main worktree's branch",
   "home.worktreeCount_one": "{{count}} worktree",

client/src/i18n/locales/en/nav.json

@@ -79,6 +79,7 @@
     "quotaRefreshing": "Refreshing…",
     "quotaExpired": "Token expired: use Claude Code once so it refreshes",
     "quotaFailed": "Could not read the quota",
+    "quotaWrongAccount": "This sign-in belongs to another Claude account: log in as this account and save it again",
     "quotaActive": "in use",
     "quotaProfileExpired": "Sign-in expired: use Check quota in Claude Code → Profiles to refresh it",
     "quotaSignInExpires": "Sign-in expires in {{time}}",

client/src/i18n/locales/en/run.json

@@ -142,11 +142,10 @@
     "output": "Output"
   },
   "drop": {
-    "hint": "Drop image to attach",
-    "uploading": "Uploading image…",
-    "failed": "Could not attach the image",
-    "imagesOnly": "Only images can be dropped here",
-    "remove": "Remove image",
+    "hint": "Drop files or images to attach",
+    "uploading": "Uploading…",
+    "failed": "Could not attach the file",
+    "remove": "Remove attachment",
     "view": "View image"
   },
   "terminal": {

client/src/i18n/locales/en/settings.json

@@ -823,6 +823,10 @@
       "reports": {
         "title": "Reports",
         "description": "Analytics summaries written on a schedule, as HTML or JSON."
+      },
+      "users": {
+        "title": "Users",
+        "description": "Accounts, their usage and the audit log."
       }
     },
     "backPrevious": "Back",
@@ -942,5 +946,21 @@
     "importBody": "The file's preferences replace this browser's, then the page reloads.",
     "imported": "Imported {{count}} preference(s). Reloading…",
     "badFile": "That file is not an AgentHub preferences file."
+  },
+  "users": {
+    "title": "Users",
+    "description": "Every account on this server, with its workspaces, sessions and recent usage.",
+    "name": "User",
+    "role": "Role",
+    "workspaces": "Workspaces",
+    "sessions": "Sessions",
+    "last7d": "7 days",
+    "last30d": "30 days",
+    "disabled": "disabled",
+    "tokens": "{{n}} tokens",
+    "manageHint": "Add, disable or change a user on the host: agenthub users …",
+    "auditTitle": "Audit log",
+    "auditDescription": "Each time an admin or analyst opened a session a member owns.",
+    "auditEmpty": "No reads recorded yet."
   }
 }

client/src/i18n/locales/vi/ccConfig.json

@@ -258,7 +258,8 @@
     "title": "Profile Claude Code",
     "openButton": "Đổi profile",
     "subtitle": "Mỗi profile là một tài khoản Anthropic - quota riêng. Khi đổi, chỉ phần đăng nhập (credentials + danh tính tài khoản) được hoán đổi; skills, subagent, memory, plugin, marketplace, MCP server và settings vẫn giữ nguyên.",
-    "warning": "Hãy đóng các phiên Claude Code đang chạy trước khi đổi - phiên đang chạy sẽ ghi lại config khi thoát và đưa tài khoản cũ quay về.",
+    "warning": "Các phiên Claude Code đang chạy tự đi theo khi đổi: chúng nhận đăng nhập mới trong khoảng 30 giây.",
+    "mismatch": "Đăng nhập đang dùng thuộc tài khoản {{owner}}, nhưng config của Claude Code lại ghi {{config}}. Mọi request đang tính vào {{owner}}. Bấm Chuyển sang đúng tài khoản bạn muốn để sửa.",
     "activeLabel": "Đang đăng nhập",
     "noActive": "Chưa có tài khoản Claude nào đăng nhập trên máy này.",
     "unsavedActive": "Tài khoản này chưa được lưu thành profile - hãy lưu lại, nếu không sẽ không thể đổi sang profile khác mà không mất credentials của nó.",

client/src/i18n/locales/vi/common.json

@@ -202,5 +202,32 @@
     "message": "Các chỉnh sửa của bạn chưa được lưu và sẽ bị mất.",
     "discard": "Bỏ thay đổi",
     "keep": "Tiếp tục sửa"
+  },
+  "auth": {
+    "title": "Đăng nhập AgentHub",
+    "username": "Tên đăng nhập",
+    "password": "Mật khẩu",
+    "submit": "Đăng nhập",
+    "submitting": "Đang đăng nhập…",
+    "failed": "Sai tên đăng nhập hoặc mật khẩu",
+    "tooMany": "Sai quá nhiều lần — hãy thử lại sau vài phút",
+    "logout": "Đăng xuất",
+    "signedInAs": "Đang đăng nhập: {{name}} ({{role}})"
+  },
+  "insights": {
+    "help": {
+      "sessions": "Một phiên là một cuộc trò chuyện với agent AI, từ lúc bắt đầu đến khi kết thúc.",
+      "agents": "Agent là các 'nhân công' AI: agent chính trong mỗi phiên cộng với các agent phụ nó tạo ra.",
+      "tokens": "Token là các mẩu chữ AI đọc và viết, khoảng 1 token ≈ 4 ký tự. Càng nhiều token càng tốn tiền.",
+      "cost": "Số tiền ước tính, tính từ số token và giá của từng mô hình.",
+      "events": "Mỗi bước AI làm (chạy công cụ, trả lời xong…) được ghi lại thành một sự kiện.",
+      "tokenMix": "Input = nội dung bạn và các file gửi cho AI. Output = nội dung AI viết ra. Cache read = nội dung dùng lại từ bộ nhớ đệm (rẻ hơn khoảng 10 lần). Cache write = nội dung lưu vào bộ nhớ đệm để dùng lại.",
+      "spendPace": "Tốc độ chi tiền, và cuối tháng sẽ tốn bao nhiêu nếu giữ tốc độ này.",
+      "toolCalls": "Số thao tác AI đã làm: đọc file, sửa file, chạy lệnh…",
+      "subagents": "Các agent phụ mà AI chính tạo ra để làm song song một phần công việc.",
+      "compactions": "Khi cuộc trò chuyện quá dài, nó được tóm tắt lại để có chỗ trống. Chi tiết ở đoạn đầu có thể bị mất.",
+      "errors": "Các bước bị lỗi. Vài lỗi là bình thường; nhiều lỗi có thể nghĩa là AI bị kẹt.",
+      "tokenFlow": "Input = gửi cho AI, Output = AI viết ra, Cache = dùng lại từ bộ nhớ đệm (rẻ hơn)."
+    }
   }
 }

client/src/i18n/locales/vi/lanes.json

@@ -93,8 +93,9 @@
   "changes.noMatches": "Không có file nào khớp.",
   "changes.openFile": "Mở {{path}}",
   "changes.quickOpen": "Tìm file theo đường dẫn…",
-  "changes.range.branch": "So nhánh gốc",
-  "changes.range.branchHint": "base...HEAD — toàn bộ phần nhánh của workspace này thêm vào so với nhánh gốc",
+  "changes.range.branch": "So với {{base}}",
+  "changes.range.baseBranch": "nhánh gốc",
+  "changes.range.branchHint": "{{base}}...HEAD — toàn bộ phần nhánh này thêm vào so với {{base}}",
   "changes.range.work": "Chưa commit",
   "changes.range.workHint": "Working tree so với HEAD — những gì vừa sửa mà chưa commit",
   "changes.refresh": "Tải lại",
@@ -244,6 +245,7 @@
   "changes.edit": "Sửa",
   "changes.save": "Lưu",
   "changes.revertBlock": "Hoàn tác",
+  "changes.blockNotInDiff": "Thay đổi này không còn trong diff của git; hãy làm mới rồi thử lại",
   "changes.cancelEdit": "Huỷ",
   "changes.preview": "Xem trước",
   "changes.raw": "Mã nguồn",
@@ -269,14 +271,35 @@
   "gitBar.mergeUpstream": "Merge {{upstream}}",
   "gitBar.mergeUpstreamHint": "Nhánh đã lệch với upstream: merge vào (conflict được giải quyết trong Changes panel)",
   "gitBar.mergeConfirm": "Merge {{branch}} vào {{current}}? File trong workspace sẽ thay đổi ngay - nếu có agent đang làm việc trong workspace này, hãy để nó xong trước.",
+  "gitBar.pushConfirm": "Push {{count}} commit từ {{branch}} lên {{upstream}}? Ai có quyền vào remote đều thấy được, và không thể rút lại push từ đây.",
+  "gitBar.publishBranchConfirm": "Publish nhánh {{branch}} lên remote? Ai có quyền vào remote đều thấy được.",
+  "gitBar.publishConfirm": "Thêm {{url}} làm remote của repo và push {{branch}} lên đó? Ai có quyền vào remote đó đều thấy được code.",
+  "gitBar.branchDeleteConfirm": "Xoá nhánh local {{branch}}? Git sẽ từ chối nếu nhánh còn commit chưa được merge vào đâu.",
   "gitBar.mergeConflicts": "Merge dừng ở {{count}} file conflict - hãy giải quyết trong danh sách bên dưới.",
-  "gitBar.merging": "Đang merge: hãy hoàn tất hoặc huỷ merge trước",
+  "gitBar.merging": "Đang {{op}}: hãy hoàn tất hoặc huỷ trước",
   "changes.conflictsGroup": "Conflict khi merge",
-  "changes.mergeBanner": "Đang merge - còn {{count}} file conflict",
-  "changes.mergeReady": "Đang merge - đã giải quyết hết conflict",
-  "changes.mergeCommit": "Hoàn tất merge",
-  "changes.mergeAbort": "Huỷ merge",
-  "changes.mergeAbortConfirm": "Bấm lần nữa để huỷ merge",
+  "changes.mergeBanner": "Đang {{op}} - còn {{count}} file conflict",
+  "changes.mergeReady": "Đang {{op}} - đã giải quyết hết conflict",
+  "changes.mergeCommit": "Hoàn tất {{op}}",
+  "changes.mergeAbort": "Huỷ {{op}}",
+  "changes.mergeAbortConfirm": "Bấm lần nữa để huỷ {{op}}",
+  "changes.discardShortConfirm": "Xoá?",
+  "changes.amend": "Amend",
+  "changes.amendHint": "Gộp phần đã stage vào commit cuối (chỉ khi chưa push). Để trống message để giữ message cũ.",
+  "changes.amendPlaceholder": "Message mới (trống = giữ message cũ)",
+  "changes.historyOf": "Lịch sử của nhánh",
+  "changes.cherryPick": "Cherry-pick vào {{branch}}",
+  "changes.revertCommit": "Revert commit này",
+  "changes.undoCommit": "Hoàn tác commit (giữ thay đổi)",
+  "changes.undoCommitTitle": "Hoàn tác commit cuối?",
+  "changes.undoCommitBody": "{{short}} \"{{subject}}\" sẽ bị gỡ khỏi nhánh. Thay đổi của nó vẫn được giữ ở trạng thái staged để sửa và commit lại.",
+  "changes.undoCommitConfirm": "Hoàn tác commit",
+  "changes.revertConfirm": "Thêm một commit trên {{branch}} để đảo ngược {{short}} \"{{subject}}\"? File trong workspace sẽ thay đổi ngay.",
+  "changes.cherryPickConfirm": "Áp {{short}} \"{{subject}}\" từ {{from}} vào {{branch}} thành một commit mới? File trong workspace sẽ thay đổi ngay.",
+  "changes.amendTitle": "Amend commit cuối?",
+  "changes.amendConfirm": "\"{{subject}}\" sẽ được thay bằng một commit mới gộp cả phần đã stage. Server sẽ từ chối nếu commit đã được push.",
+  "changes.opConflicts": "{{op}} dừng lại ở {{count}} file conflict — hãy giải quyết trong Changes",
+  "changes.opDone": "Đã {{op}} xong",
   "changes.takeOurs": "Giữ bản của mình",
   "changes.takeTheirs": "Lấy bản kia",
   "changes.markResolved": "Đánh dấu đã xong (sau khi đã sửa hết dấu conflict)",
@@ -330,9 +353,6 @@
   "tree.allTools": "Mọi tool",
   "tree.newSession": "Session mới",
   "tree.noSessions": "Chưa có session",
-  "tree.closedTerminal": "Terminal đã đóng — bấm để mở terminal mới ở thư mục của workspace (Ctrl/Cmd+click: mở ở split)",
-  "tree.reopenTerminal": "Mở terminal mới",
-  "tree.forgetTerminal": "Xóa khỏi danh sách",
   "tree.transcriptHint": "Không còn pane — mở hội thoại; gửi tin nhắn sẽ tiếp tục (resume) session",
   "tree.splitHint": "Pane đang chạy — Ctrl/Cmd+click để mở ở split cạnh pane đang focus",
   "tree.renameSession": "Đổi tên session",
@@ -346,6 +366,7 @@
   "tree.unarchive": "Bỏ lưu trữ",
   "home.breadcrumb": "Không gian làm việc",
   "home.ai": "AI",
+  "home.openTerminal": "Mở terminal",
   "home.repoRoot": "Thư mục gốc của repo",
   "home.mainBranch": "Branch của worktree chính",
   "home.worktreeCount_one": "{{count}} worktree",

client/src/i18n/locales/vi/nav.json

@@ -79,6 +79,7 @@
     "quotaRefreshing": "Đang làm mới…",
     "quotaExpired": "Token đã hết hạn: dùng Claude Code một lần để nó tự làm mới",
     "quotaFailed": "Không đọc được quota",
+    "quotaWrongAccount": "Lượt đăng nhập này thuộc tài khoản Claude khác: đăng nhập lại đúng tài khoản này rồi lưu lại",
     "quotaActive": "đang dùng",
     "quotaProfileExpired": "Đăng nhập đã hết hạn: bấm Kiểm tra quota trong Claude Code → Profiles để làm mới",
     "quotaSignInExpires": "Đăng nhập hết hạn sau {{time}}",

client/src/i18n/locales/vi/run.json

@@ -141,11 +141,10 @@
     "output": "Output"
   },
   "drop": {
-    "hint": "Thả ảnh để đính kèm",
-    "uploading": "Đang tải ảnh lên…",
-    "failed": "Không đính kèm được ảnh",
-    "imagesOnly": "Chỉ thả được ảnh vào đây",
-    "remove": "Bỏ ảnh",
+    "hint": "Thả file hoặc ảnh để đính kèm",
+    "uploading": "Đang tải lên…",
+    "failed": "Không đính kèm được file",
+    "remove": "Bỏ đính kèm",
     "view": "Xem ảnh"
   },
   "terminal": {

client/src/i18n/locales/vi/settings.json

@@ -823,6 +823,10 @@
       "reports": {
         "title": "Báo cáo",
         "description": "Bản tóm tắt phân tích ghi ra theo lịch, dạng HTML hoặc JSON."
+      },
+      "users": {
+        "title": "Người dùng",
+        "description": "Tài khoản, mức dùng và nhật ký truy cập."
       }
     },
     "backPrevious": "Quay lại",
@@ -942,5 +946,21 @@
     "importBody": "Tùy chọn trong tệp sẽ thay thế tùy chọn của trình duyệt này, sau đó trang tải lại.",
     "imported": "Đã nhập {{count}} tùy chọn. Đang tải lại…",
     "badFile": "Tệp này không phải tệp tùy chọn của AgentHub."
+  },
+  "users": {
+    "title": "Người dùng",
+    "description": "Mọi tài khoản trên server này, cùng workspace, session và mức dùng gần đây.",
+    "name": "Người dùng",
+    "role": "Vai trò",
+    "workspaces": "Workspace",
+    "sessions": "Session",
+    "last7d": "7 ngày",
+    "last30d": "30 ngày",
+    "disabled": "đã khoá",
+    "tokens": "{{n}} token",
+    "manageHint": "Thêm, khoá hoặc sửa người dùng trên máy chủ: agenthub users …",
+    "auditTitle": "Nhật ký truy cập",
+    "auditDescription": "Mỗi lần admin hoặc analyst mở một session của member.",
+    "auditEmpty": "Chưa có lượt đọc nào."
   }
 }

client/src/index.css

@@ -17,8 +17,7 @@
  *                                   11-12 text (11 secondary, 12 primary)
  * The DARK theme follows it literally: `slate` supplies surface/border/fg and
  * `blue` supplies accent. The LIGHT theme keeps the structure (same roles, same
- * rising-lightness ramp) but swaps the hue family for Claude's own warm ivory
- * and terracotta, because a cool near-white page reads as glare. `green`/
+ * rising-lightness ramp) with IntelliJ Light's neutrals and blue accent. `green`/
  * `red`/`amber` step 11 supplies the status tokens — the same step used for
  * fg-secondary, since 11 is Radix's guaranteed-readable-text step. Values are
  * the literal Radix hex constants (steps 1/2/3/4/5/6/7/9/11/12), converted to
@@ -29,37 +28,19 @@
   /* Light theme — the CSS default, so it applies with no class on <html>.
      `[data-mode="light"]` lets a light theme preview re-scope inside a dark
      page (the Settings appearance cards).
-     Radix `slate` light, RE-ORDERED so lightness rises with the index exactly
-     as it does in dark: the page is the DARKEST step and a card is brighter
-     than the page it sits on. The previous light block used the scale in its
-     native direction, which inverted the whole language — a near-white page
-     (glare) under grey cards that read as recessed, and every `hover:bg-*`
-     darkening instead of lifting.
-
-     The HUE is warm — Claude's own ivory/terracotta family, not a cool slate.
-     A cool near-white ramp kept reading as glare no matter how far the page
-     step was pulled down, because the brightest thing on screen was also the
-     bluest. Cream lowers the perceived glare at the same measured lightness
-     and gives every neutral a warm cast to sit against. The whole ramp sits
-     one notch below Claude's own ivory (#faf9f5 card) and no step reaches pure
-     white: at full brightness a large light panel still tires the eye. */
-  --surface-0: 232 229 218; /* #e8e5da — page background */
-  --surface-1: 236 233 223; /* #ece9df — sub-headers inside a card */
-  --surface-2: 240 237 228; /* #f0ede4 — inputs, chips, toolbars */
-  --surface-3: 245 243 236; /* #f5f3ec — `.card`, Claude's ivory a step down */
-  --surface-4: 249 247 241; /* #f9f7f1 — hover / active lift */
-  --surface-5: 252 251 247; /* #fcfbf7 — topmost, rare */
-  --border: 207 201 184; /* #cfc9b8 */
-  --border-light: 222 217 204; /* #ded9cc */
-  /* Claude's terracotta (#cc785c), taken down two steps: the brand value is
-     3.1:1 on ivory and 3.3:1 under white text, so it works as a large fill and
-     fails as a link or a button label. This is 5.3:1 as text on a card and
-     5.9:1 white-on-accent. Dark mode keeps its blue — inverting a warm accent
-     onto a near-black page is a different problem with a different answer.
-     One more step down (#a34a28 → #924224) so `text-accent` also clears 4.5:1
-     on its own selected chip (`bg-accent/15–20`), not just on the card. */
-  --accent: 146 66 36; /* #924224 */
-  --accent-hover: 122 55 30; /* #7a371e */
+     IntelliJ Light's cool neutrals, ordered so lightness rises with the index
+     exactly as it does in dark: the page is the DARKEST step and a card is
+     brighter than the page it sits on, so every `hover:bg-*` lifts. */
+  --surface-0: 236 238 242; /* #eceef2 — page background */
+  --surface-1: 241 242 245; /* #f1f2f5 — sub-headers inside a card */
+  --surface-2: 247 248 250; /* #f7f8fa — inputs, chips, toolbars */
+  --surface-3: 253 253 254; /* #fdfdfe — `.card` */
+  --surface-4: 255 255 255; /* #ffffff — hover / active lift */
+  --surface-5: 255 255 255; /* #ffffff — topmost, rare */
+  --border: 211 213 219; /* #d3d5db */
+  --border-light: 228 230 235; /* #e4e6eb */
+  --accent: 40 90 192; /* #285ac0 */
+  --accent-hover: 33 74 158; /* #214a9e */
   /* The FILL behind white text (`.btn-primary`, a Switch's on-track, a ticked
      Checkbox, `bg-accent-solid`). In light themes the text accent is already
      dark enough to carry white, so it simply IS the accent — resolved per
@@ -68,43 +49,37 @@
      white text cannot sit on (3.3:1). */
   --accent-solid: var(--accent);
   --accent-solid-hover: var(--accent-hover);
-  --fg-primary: 31 30 27; /* #1f1e1b — 15.0:1 on a card */
-  --fg-secondary: 96 91 83; /* #605b53 — 6.1:1 */
-  /* Measured, not eyeballed: this carries real content (timestamps, counts),
-     so it is held above 4.5:1 — 5.4:1 on a card, 4.7:1 on the page — and still
-     sits a clear step below fg-secondary. */
-  --fg-muted: 104 99 89; /* #686359 */
-  /* Warm and soft, to match the surfaces: a neutral-grey shadow goes muddy
-     over cream. The SHADOW carries "raised" here, not the quiet border. */
-  --shadow-card: 0 1px 2px rgb(60 50 30 / 0.05), 0 2px 6px rgb(60 50 30 / 0.07);
-  /* Status: darkened two steps from Radix 11. One step cleared 4.5:1 against
-     the card; these also clear it against the status's OWN densest chip (a
-     20% tint of itself — 4.5:1), which is where the label actually sits. */
-  --status-success: 22 104 66; /* #166842 */
-  --status-danger: 170 36 41; /* #aa2429 */
-  --status-warning: 133 79 0; /* #854f00 */
+  --fg-primary: 30 31 34; /* #1e1f22 */
+  --fg-secondary: 73 75 87; /* #494b57 */
+  /* Carries real content (timestamps, counts), so it is held above 4.5:1 on a
+     card and still sits a clear step below fg-secondary. */
+  --fg-muted: 103 106 120; /* #676a78 */
+  /* The SHADOW carries "raised" here, not the quiet border. */
+  --shadow-card: 0 1px 2px rgb(30 31 34 / 0.05), 0 2px 6px rgb(30 31 34 / 0.06);
+  /* Status labels clear 4.5:1 on the card AND on their own 20% chip. */
+  --status-success: 23 106 45; /* #176a2d */
+  --status-danger: 173 28 38; /* #ad1c26 */
+  --status-warning: 124 82 0; /* #7c5200 */
   /* What every status/accent FILL is pre-mixed against (see `tint()` in
      tailwind.config.js) — the card surface, because that is where chips and
      alert strips overwhelmingly sit. */
   /* Re-declared by every scope that sets a theme (this block, `.dark`), so it
      resolves against THAT scope's surface-3; a new scope must re-declare it too. */
   --tint-base: var(--surface-3);
-  /* Syntax colours for `lib/highlight.ts`. Same hues as the dark set, taken
-     four steps down the Tailwind ramp (300 → 700): a pastel keyword is legible
-     on a near-black code block and invisible on a light one. */
-  --syn-comment: 107 114 128; /* gray-500  #6b7280 */
-  --syn-string: 4 120 87; /* emerald-700 #047857 */
-  --syn-number: 194 65 12; /* orange-700  #c2410c */
-  --syn-keyword: 109 40 217; /* violet-700 #6d28d9 */
-  --syn-builtin: 3 105 161; /* sky-700    #0369a1 */
-  --syn-function: 180 83 9; /* amber-700  #b45309 */
-  --syn-operator: 190 24 93; /* pink-700   #be185d */
-  --syn-punctuation: 107 114 128; /* gray-500 #6b7280 */
-  --syn-property: 14 116 144; /* cyan-700  #0e7490 */
-  --syn-tag: 190 18 60; /* rose-700     #be123c */
+  /* Syntax colours for `lib/highlight.ts` — IntelliJ Light's editor scheme. */
+  --syn-comment: 112 112 112; /* #707070 */
+  --syn-string: 6 125 23; /* #067d17 */
+  --syn-number: 23 80 235; /* #1750eb */
+  --syn-keyword: 0 51 179; /* #0033b3 */
+  --syn-builtin: 0 0 128; /* #000080 */
+  --syn-function: 0 98 122; /* #00627a */
+  --syn-operator: 75 75 75; /* #4b4b4b */
+  --syn-punctuation: 75 75 75; /* #4b4b4b */
+  --syn-property: 135 16 148; /* #871094 */
+  --syn-tag: 0 51 179; /* #0033b3 */
   --syn-plain: var(--fg-primary);
-  --syn-add: 4 120 87; /* emerald-700 */
-  --syn-del: 185 28 28; /* red-700 #b91c1c */
+  --syn-add: 6 125 23; /* #067d17 */
+  --syn-del: 192 31 42; /* #c01f2a */
   /* A diff line edited in place (not wholly added or removed). */
   --diff-mod: 29 78 216; /* blue-700 #1d4ed8 */
   /* A file on the Changes panel's never-stage list (orange, apart from amber M). */
@@ -309,38 +284,6 @@
   --syn-del: 197 0 15; /* #c5000f */
 }
 
-[data-mode="light"][data-theme="intellij-light"] {
-  --surface-0: 236 238 242; /* #eceef2 */
-  --surface-1: 241 242 245; /* #f1f2f5 */
-  --surface-2: 247 248 250; /* #f7f8fa */
-  --surface-3: 253 253 254; /* #fdfdfe */
-  --surface-4: 255 255 255; /* #ffffff */
-  --surface-5: 255 255 255; /* #ffffff */
-  --border: 211 213 219; /* #d3d5db */
-  --border-light: 228 230 235; /* #e4e6eb */
-  --accent: 40 90 192; /* #285ac0 */
-  --accent-hover: 33 74 158; /* #214a9e */
-  --fg-primary: 30 31 34; /* #1e1f22 */
-  --fg-secondary: 73 75 87; /* #494b57 */
-  --fg-muted: 103 106 120; /* #676a78 */
-  --shadow-card: 0 1px 2px rgb(30 31 34 / 0.05), 0 2px 6px rgb(30 31 34 / 0.06);
-  --status-success: 23 106 45; /* #176a2d */
-  --status-danger: 173 28 38; /* #ad1c26 */
-  --status-warning: 124 82 0; /* #7c5200 */
-  --syn-comment: 112 112 112; /* #707070 */
-  --syn-string: 6 125 23; /* #067d17 */
-  --syn-number: 23 80 235; /* #1750eb */
-  --syn-keyword: 0 51 179; /* #0033b3 */
-  --syn-builtin: 0 0 128; /* #000080 */
-  --syn-function: 0 98 122; /* #00627a */
-  --syn-operator: 75 75 75; /* #4b4b4b */
-  --syn-punctuation: 75 75 75; /* #4b4b4b */
-  --syn-property: 135 16 148; /* #871094 */
-  --syn-tag: 0 51 179; /* #0033b3 */
-  --syn-add: 6 125 23; /* #067d17 */
-  --syn-del: 192 31 42; /* #c01f2a */
-}
-
 [data-mode="light"][data-theme="canvas"] {
   --surface-0: 227 220 205; /* #e3dccd */
   --surface-1: 232 226 212; /* #e8e2d4 */

client/src/lib/__tests__/changeTree.test.ts

@@ -40,12 +40,3 @@ describe("changeTree", () => {
     expect(treeFiles(root.dirs[0]!).map((f) => f.path)).toHaveLength(3);
   });
 });
-
-describe("changeTree — an untracked folder", () => {
-  it("shows git's `dir/` entry as a named row in its parent folder", () => {
-    const root = changeTree([{ path: "docs/plans/analytics-parity/" }, { path: "docs/x.md" }]);
-    const docs = root.dirs[0]!;
-    expect(docs.files.map((f) => f.name)).toEqual(["x.md"]);
-    expect(docs.dirs[0]!.files.map((f) => f.name)).toEqual(["analytics-parity/"]);
-  });
-});

client/src/lib/__tests__/diffConnectors.test.ts

@@ -0,0 +1,50 @@
+/**
+ * @file Tests for the side-by-side diff's connector geometry: the band path
+ * between a left and a right block, and the line mapping that keeps the two
+ * panes scrolled to the same place.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, expect, it } from "vitest";
+import { bandPath, mapLine, type Span } from "../diffConnectors";
+
+describe("bandPath", () => {
+  it("joins the left block's edges to the right block's with two S-curves", () => {
+    expect(bandPath(40, 10, 30, 50, 90)).toBe(
+      "M0,10 C20,10 20,50 40,50 L40,90 C20,90 20,30 0,30 Z"
+    );
+  });
+
+  it("still draws an empty side as a closed path, flat there", () => {
+    expect(bandPath(40, 10, 10, 50, 90)).toBe(
+      "M0,10 C20,10 20,50 40,50 L40,90 C20,90 20,10 0,10 Z"
+    );
+  });
+});
+
+describe("mapLine", () => {
+  // Left lines 2–3 became right lines 2–6; left 8 was removed (right 11 = none).
+  const spans: Span[] = [
+    { a0: 2, a1: 4, b0: 2, b1: 7 },
+    { a0: 8, a1: 9, b0: 11, b1: 11 },
+  ];
+
+  it("maps 1:1 before, between and after the blocks, shifted by the ones above", () => {
+    expect(mapLine(0, spans, true)).toBe(0);
+    expect(mapLine(5, spans, true)).toBe(8);
+    expect(mapLine(10, spans, true)).toBe(12);
+    expect(mapLine(8, spans, false)).toBe(5);
+  });
+
+  it("interpolates inside a block, both ways", () => {
+    expect(mapLine(3, spans, true)).toBe(4.5);
+    expect(mapLine(4.5, spans, false)).toBe(3);
+  });
+
+  it("puts a line removed on one side at its block's point on the other", () => {
+    expect(mapLine(8.5, spans, true)).toBe(11);
+  });
+
+  it("is the identity with no blocks", () => {
+    expect(mapLine(7.25, [], true)).toBe(7.25);
+  });
+});

client/src/lib/__tests__/laneChange.test.ts

@@ -0,0 +1,34 @@
+/**
+ * @file laneChange.test.ts
+ * @description Tests for `laneChangeMatcher`: a lane_update fires only when the
+ * chosen key changed or a lane was removed, and each matcher remembers alone.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect } from "vitest";
+import { laneChangeMatcher, runKeyOf } from "../laneChange";
+import type { Lane, WSMessage } from "../types";
+
+const upd = (lane: Partial<Lane>): WSMessage => ({
+  type: "lane_update",
+  data: { lane: { id: 1, run_id: null, status: "idle", session_id: null, ...lane } as Lane },
+  timestamp: "t",
+});
+
+describe("laneChangeMatcher", () => {
+  it("fires on a changed run key, a removal, and nothing else", () => {
+    const m = laneChangeMatcher(runKeyOf);
+    expect(m(upd({}))).toBe(true); // first sight
+    expect(m(upd({ last_event_at: "x" } as Partial<Lane>))).toBe(false);
+    expect(m(upd({ status: "running" }))).toBe(true);
+    expect(m(upd({ status: "running" }))).toBe(false);
+    expect(m({ type: "lane_update", data: { removed: 1 }, timestamp: "t" })).toBe(true);
+    expect(m({ type: "new_event", data: {}, timestamp: "t" } as WSMessage)).toBe(false);
+  });
+
+  it("keeps a separate memory per matcher", () => {
+    const a = laneChangeMatcher(runKeyOf);
+    const b = laneChangeMatcher(runKeyOf);
+    expect(a(upd({}))).toBe(true);
+    expect(b(upd({}))).toBe(true);
+  });
+});

client/src/lib/__tests__/paneLayout.test.ts

@@ -5,7 +5,8 @@
  * the pane that takes its place, swapping/moving panes, resizing a split,
  * pruning panes whose run is gone, the rectangles the grid draws, the TABS
  * that group up to four panes each (a session in exactly one), and the
- * per-workspace storage that must survive bad or stale data.
+ * dropping one tab onto another (joined in a fixed order: right, under the
+ * right pane, under the left pane), and the per-workspace storage that must survive bad or stale data.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, beforeEach } from "vitest";
@@ -17,6 +18,7 @@ import {
   MAX_PANES,
   closeInLayout,
   detachSlot,
+  joinGroup,
   layoutRects,
   leaves,
   loadGroups,
@@ -203,7 +205,10 @@ describe("pane groups (tabs of up to four panes)", () => {
   });
 
   it("activates the tab already holding a session, focusing it", () => {
-    const g: PaneGroups = { groups: [single(0), { root: split("row", pane(1), pane(2)), focus: 1 }], active: 0 };
+    const g: PaneGroups = {
+      groups: [single(0), { root: split("row", pane(1), pane(2)), focus: 1 }],
+      active: 0,
+    };
     const out = openInGroups(g, 2, false);
     expect(out.active).toBe(1);
     expect(out.groups[1]!.focus).toBe(2);
@@ -245,12 +250,18 @@ describe("pane groups (tabs of up to four panes)", () => {
   it("an ended session leaves its tab; an emptied active tab hands over to a neighbour", () => {
     const g: PaneGroups = { groups: [single(0), single(1), single(2)], active: 2 };
     expect(removeSlot(g, 2)).toEqual({ groups: [single(0), single(1)], active: 1 });
-    expect(removeSlot({ ...g, active: 0 }, 0)).toEqual({ groups: [single(1), single(2)], active: 0 });
+    expect(removeSlot({ ...g, active: 0 }, 0)).toEqual({
+      groups: [single(1), single(2)],
+      active: 0,
+    });
     expect(removeSlot(g, 7)).toBe(g);
   });
 
   it("prunes dead panes and gives every live session without a tab one", () => {
-    const g: PaneGroups = { groups: [{ root: split("row", pane(0), pane(1)), focus: 1 }, single(2)], active: 1 };
+    const g: PaneGroups = {
+      groups: [{ root: split("row", pane(0), pane(1)), focus: 1 }, single(2)],
+      active: 1,
+    };
     const out = pruneGroups(g, new Set([0, 4]), new Set());
     expect(out.groups.map((x) => leaves(x.root))).toEqual([[0], [4]]);
     expect(out.active).toBe(0);
@@ -258,7 +269,10 @@ describe("pane groups (tabs of up to four panes)", () => {
   });
 
   it("detaches a pane into a tab of its own at a given place, and reorders tabs", () => {
-    const g: PaneGroups = { groups: [{ root: split("row", pane(0), pane(1)), focus: 0 }, single(2)], active: 1 };
+    const g: PaneGroups = {
+      groups: [{ root: split("row", pane(0), pane(1)), focus: 0 }, single(2)],
+      active: 1,
+    };
     const out = detachSlot(g, 1, 0);
     expect(out.groups.map((x) => leaves(x.root))).toEqual([[1], [0], [2]]);
     expect(out.active).toBe(0);
@@ -272,19 +286,36 @@ describe("parseLayout / storage", () => {
   beforeEach(() => window.localStorage.clear());
 
   it("stores tabs per workspace and reads a pre-tab single layout as one tab", () => {
-    const g: PaneGroups = { groups: [{ root: split("row", pane(0), pane(9)), focus: 9 }, { root: pane(4), focus: 4 }], active: 1 };
+    const g: PaneGroups = {
+      groups: [
+        { root: split("row", pane(0), pane(9)), focus: 9 },
+        { root: pane(4), focus: 4 },
+      ],
+      active: 1,
+    };
     saveGroups(1, g);
     expect(loadGroups(1)).toEqual(g);
     window.localStorage.setItem(
       "agenthub.workspace.paneLayout",
       JSON.stringify({ 2: { root: split("row", pane(0), pane(1)), focus: 1 } })
     );
-    expect(loadGroups(2)).toEqual({ groups: [{ root: split("row", pane(0), pane(1)), focus: 1 }], active: 0 });
+    expect(loadGroups(2)).toEqual({
+      groups: [{ root: split("row", pane(0), pane(1)), focus: 1 }],
+      active: 0,
+    });
   });
 
   it("drops a slot past nine and a session stored in two tabs", () => {
-    expect(parseGroups({ groups: [{ root: pane(10), focus: 10 }], active: 0 })).toEqual(EMPTY_GROUPS);
-    const out = parseGroups({ groups: [{ root: pane(1), focus: 1 }, { root: pane(1), focus: 1 }], active: 1 });
+    expect(parseGroups({ groups: [{ root: pane(10), focus: 10 }], active: 0 })).toEqual(
+      EMPTY_GROUPS
+    );
+    const out = parseGroups({
+      groups: [
+        { root: pane(1), focus: 1 },
+        { root: pane(1), focus: 1 },
+      ],
+      active: 1,
+    });
     expect(out).toEqual({ groups: [{ root: pane(1), focus: 1 }], active: 0 });
   });
 
@@ -334,3 +365,47 @@ describe("parseLayout / storage", () => {
     expect(loadGroups(1)).toEqual(EMPTY_GROUPS);
   });
 });
+
+describe("joinGroup", () => {
+  const solo = (s: number): PaneLayout => ({ root: pane(s), focus: s });
+  const tabs = (...slots: number[]): PaneGroups => ({ groups: slots.map(solo), active: 0 });
+
+  it("joins tabs in order: side by side, under the right pane, under the left one", () => {
+    let g = tabs(0, 1, 2, 3);
+    g = joinGroup(g, [1], 0);
+    expect(g.groups[0]?.root).toEqual(split("row", pane(0), pane(1)));
+    g = joinGroup(g, [2], 0);
+    expect(g.groups[0]?.root).toEqual(split("row", pane(0), split("col", pane(1), pane(2))));
+    g = joinGroup(g, [3], 0);
+    expect(g.groups[0]?.root).toEqual(
+      split("row", split("col", pane(0), pane(3)), split("col", pane(1), pane(2)))
+    );
+    expect(g).toEqual({ groups: [g.groups[0]], active: 0 });
+    expect(g.groups[0]?.focus).toBe(3);
+  });
+
+  it("activates the target tab and takes a pane out of a combo", () => {
+    const combo: PaneLayout = { root: split("row", pane(1), pane(2)), focus: 1 };
+    const g = joinGroup({ groups: [solo(0), combo], active: 0 }, [2], 1);
+    expect(g.groups.map((l) => leaves(l.root))).toEqual([[0], [1, 2]]);
+    const h = joinGroup({ groups: [solo(0), combo], active: 1 }, [2], 0);
+    expect(h).toEqual({
+      groups: [
+        { root: split("row", pane(0), pane(2)), focus: 2 },
+        { root: pane(1), focus: 1 },
+      ],
+      active: 0,
+    });
+  });
+
+  it("joins a whole combo, and refuses a fifth pane", () => {
+    const combo: PaneLayout = { root: split("row", pane(1), pane(2)), focus: 1 };
+    const g = joinGroup({ groups: [solo(0), combo], active: 1 }, [1, 2], 0);
+    expect(g.groups).toHaveLength(1);
+    expect(leaves(g.groups[0]?.root ?? null)).toEqual([0, 1, 2]);
+    const full = joinGroup(g, [], 0);
+    expect(full).toBe(g);
+    const four = joinGroup({ ...g, groups: [...g.groups, solo(3), solo(4)] }, [3], 0);
+    expect(joinGroup(four, [4], 0)).toBe(four);
+  });
+});

client/src/lib/api.ts

@@ -529,7 +529,53 @@ function ccQuery(scope?: CcScope, cwd?: string): string {
  *   that needs to branch on which error this was should check `.code`, never
  *   guess at substrings of the human-readable `.message`.
  */
-async function request<T>(path: string, options?: RequestInit): Promise<T> {
+/** Fired on `window` when a request answers 401 `EAUTH` (server mode). */
+export const AUTH_REQUIRED_EVENT = "agenthub:auth-required";
+
+/** One account in Settings → Users (`GET /api/users`). */
+export type ServerUserUsage = AuthUser & {
+  disabled: boolean;
+  workspaces: number;
+  sessions: number;
+  last7d: { cost: number; tokens: number };
+  last30d: { cost: number; tokens: number };
+};
+/** A staff read of a member's session (`GET /api/users/audit`). */
+export type AuditEntry = {
+  id: number;
+  at: string;
+  method: string;
+  path: string;
+  session_id: string | null;
+  reader: string | null;
+  owner: string | null;
+};
+
+/** Who is using the dashboard: local mode has no login at all. */
+export type AuthUser = { id: number; username: string; role: "admin" | "analyst" | "member" };
+export type AuthState = { mode: "local" } | { mode: "server"; user: AuthUser | null };
+
+/** GETs in flight, by path: concurrent callers of the same read (several
+ *  components mounting, a WS event fanning out to many listeners) share one
+ *  fetch and one parsed result. Deleted as soon as it settles, so this is
+ *  dedupe, never a cache. Callers must treat the result as read-only. */
+const inflight = new Map<string, Promise<unknown>>();
+
+function request<T>(path: string, options?: RequestInit): Promise<T> {
+  // Only a plain GET: a body, headers or an AbortSignal belongs to one caller.
+  const plainGet =
+    !options ||
+    (Object.keys(options).every((k) => k === "method") &&
+      (options.method ?? "GET").toUpperCase() === "GET");
+  if (!plainGet) return send<T>(path, options);
+  const hit = inflight.get(path);
+  if (hit) return hit as Promise<T>;
+  const p = send<T>(path, options).finally(() => inflight.delete(path));
+  inflight.set(path, p);
+  return p;
+}
+
+async function send<T>(path: string, options?: RequestInit): Promise<T> {
   const token = dashboardToken();
   // Build the effective header set. Order matters: defaults first so that the
   // token and any caller headers can override, and caller headers land last.
@@ -544,6 +590,11 @@ async function request<T>(path: string, options?: RequestInit): Promise<T> {
     // isn't JSON (or json() throws), fall back to an empty object so the `?.`
     // chain below cleanly degrades to the generic `HTTP <status>` message.
     const body = await res.json().catch(() => ({}));
+    // Server mode: the login ended (expired, logged out elsewhere, disabled) —
+    // AuthGate listens and shows the login page again.
+    if (res.status === 401 && body?.error?.code === "EAUTH") {
+      window.dispatchEvent(new Event(AUTH_REQUIRED_EVENT));
+    }
     throw Object.assign(new Error(body?.error?.message || `HTTP ${res.status}`), {
       code: body?.error?.code,
       status: res.status,
@@ -605,6 +656,26 @@ export function gitTarget(laneId: number, session?: string | null): GitTarget {
 }
 
 export const api = {
+  // ───────────────────────── Server mode login (routes/auth.js) ─────────────────────────
+  auth: {
+    /** GET /api/auth/me — `{mode:"local"}`, or server mode with the user (null = logged out). */
+    me: () => request<AuthState>("/auth/me"),
+    /** POST /api/auth/login — sets the httpOnly login cookie. */
+    login: (username: string, password: string) =>
+      request<{ user: AuthUser }>("/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ username, password }),
+      }),
+    /** POST /api/auth/logout — ends this login. */
+    logout: () => request<{ ok: true }>("/auth/logout", { method: "POST" }),
+  },
+  // ───────────────────────── Server mode staff views (routes/users.js) ─────────────────────────
+  users: {
+    /** GET /api/users — every account with its recent usage (admin/analyst). */
+    list: () => request<{ users: ServerUserUsage[] }>("/users"),
+    /** GET /api/users/audit — staff reads of members' sessions, newest first. */
+    audit: () => request<{ entries: AuditEntry[] }>("/users/audit"),
+  },
   // ───────────────────────── Updates / self-update API ─────────────────────────
   /** Self-update status: whether this install is a git clone and, if so,
    *  whether the tracked upstream/origin remote is ahead. Backs the "update
@@ -1770,7 +1841,13 @@ export const api = {
      *   logged-in {@link CcAccountIdentity} (null when nobody is logged in).
      */
     profiles: () =>
-      request<{ items: CcProfile[]; active: CcAccountIdentity | null }>("/cc-config/profiles"),
+      request<{
+        items: CcProfile[];
+        active: CcAccountIdentity | null;
+        /** Set when the live token belongs to a different account than the
+         *  one `.claude.json` names; `active` is then the token's owner. */
+        mismatch?: { configEmail: string | null } | null;
+      }>("/cc-config/profiles"),
     /**
      * POST /api/cc-config/profiles - snapshot the logged-in account as a
      * profile. The identifier and initial label are derived from the account;
@@ -2260,17 +2337,6 @@ export const api = {
   run: {
     /** GET /api/run - lanes with a live tmux-backed run, computed fresh from tmux state. */
     list: () => request<RunListResponse>("/run"),
-    /** GET /api/run/history - persisted runs, newest first; `laneId` narrows to
-     *  one workspace and `tool` (with it) to one tool's — `shell` = Terminal tabs. */
-    history: (opts: { laneId: number; tool?: string; limit?: number }) => {
-      const qs = new URLSearchParams({ laneId: String(opts.laneId) });
-      if (opts.tool) qs.set("tool", opts.tool);
-      if (opts.limit) qs.set("limit", String(opts.limit));
-      return request<{ items: RunHistoryItem[] }>(`/run/history?${qs.toString()}`);
-    },
-    /** DELETE /api/run/history/:id - forget a closed Terminal tab (shell rows only). */
-    forgetHistory: (id: string) =>
-      request<{ removed: string }>(`/run/history/${encodeURIComponent(id)}`, { method: "DELETE" }),
     /** GET /api/run/binary - whether the lane tool's CLI was found on PATH (fresh look). */
     binary: (tool: LaneTool = "claude") =>
       request<{ found: boolean; path: string | null }>(`/run/binary?tool=${tool}`),
@@ -2292,6 +2358,14 @@ export const api = {
         body: file,
         headers: { "Content-Type": file.type },
       }),
+    /** POST /api/run/drop-file - the same for any file, keeping its (sanitized)
+     *  name so the agent sees what it is. */
+    dropFile: (file: File) =>
+      request<{ path: string }>(`/run/drop-file?name=${encodeURIComponent(file.name)}`, {
+        method: "POST",
+        body: file,
+        headers: { "Content-Type": "application/octet-stream" },
+      }),
     /** POST /api/run - start (or adopt, if already live) a lane's terminal run. */
     start: (args: RunStartArgs) =>
       request<RunHandle>("/run", { method: "POST", body: JSON.stringify(args) }),
@@ -2817,10 +2891,12 @@ export const api = {
      * @param id The lane id.
      * @param opts `file` narrows the list to the commits touching one path.
      */
-    gitLog: (id: GitTarget, opts: { limit?: number; file?: string } = {}) => {
+    gitLog: (id: GitTarget, opts: { limit?: number; file?: string; ref?: string } = {}) => {
       const q = new URLSearchParams();
       if (opts.limit) q.set("limit", String(opts.limit));
       if (opts.file) q.set("file", opts.file);
+      // Another branch's history (cherry-pick's source); absent = HEAD's.
+      if (opts.ref) q.set("ref", opts.ref);
       return request<{ available: boolean; commits: LaneCommit[] }>(gitUrl(id, "/log", q));
     },
     /**
@@ -2936,8 +3012,14 @@ export const api = {
         | "merge"
         | "resolve"
         | "merge-commit"
-        | "merge-abort",
+        | "merge-abort"
+        | "cherry-pick"
+        | "revert"
+        | "undo-commit"
+        | "amend",
       body: {
+        /** cherry-pick / revert: the commit. */
+        sha?: string;
         url?: string;
         message?: string;
         only?: "staged";
@@ -4198,17 +4280,6 @@ export interface RunListResponse {
   items: RunHandle[];
 }
 
-/** One row of GET /api/run/history (`dashboard_runs`; only the fields read). */
-export interface RunHistoryItem {
-  id: string;
-  tool: string;
-  status: string;
-  started_at: string;
-  ended_at: string | null;
-  /** The run's tmux pane is still up. */
-  isLive: boolean;
-}
-
 /** One suggested working directory for the Run page's cwd picker. */
 export interface CwdSuggestion {
   /** "dashboard" = this server's own cwd; "home" = user's home dir; "recent"

client/src/lib/changeTree.ts

@@ -20,9 +20,7 @@ export interface ChangeTreeDir<T> {
 export function changeTree<T extends { path: string }>(rows: T[]): ChangeTreeDir<T> {
   const root: ChangeTreeDir<T> = { name: "", path: "", dirs: [], files: [], count: 0 };
   for (const file of rows) {
-    // An untracked folder comes from git as `dir/`: a leaf named `dir/`.
-    const parts = file.path.replace(/\/$/, "").split("/");
-    if (file.path.endsWith("/")) parts[parts.length - 1] += "/";
+    const parts = file.path.split("/");
     let dir = root;
     dir.count++;
     for (const seg of parts.slice(0, -1)) {

client/src/lib/diffConnectors.ts

@@ -0,0 +1,41 @@
+/**
+ * @file Geometry for the JetBrains-style side-by-side diff, shared by the
+ * Changes panel's review list (LaneDiffView) and its file editor (DiffEditor):
+ * the curved band that joins a changed block on the left to its counterpart
+ * on the right across the middle gutter, and the line mapping that keeps two
+ * unpadded panes scrolled to the same place. Pure functions, no DOM.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+/** A changed block's lines on each side, 0-based and half-open: `a0 === a1`
+ *  is a block with no lines on the left (a pure insertion), and likewise b. */
+export type Span = { a0: number; a1: number; b0: number; b1: number };
+
+/**
+ * SVG path of the band joining the left block (`y0`–`y1`) to the right one
+ * (`z0`–`z1`) across a gutter `w` wide: an S-curve along each edge, flat where
+ * a side is empty (`y0 === y1`), so a pure insertion reads as a wedge.
+ */
+export function bandPath(w: number, y0: number, y1: number, z0: number, z1: number): string {
+  const c = w / 2;
+  return `M0,${y0} C${c},${y0} ${c},${z0} ${w},${z0} L${w},${z1} C${c},${z1} ${c},${y1} 0,${y1} Z`;
+}
+
+/**
+ * The line on the other side that `line` (fractional, 0-based) sits beside:
+ * outside a block 1:1, shifted by the blocks above it; inside one, at the same
+ * fraction of the other side's block — which collapses to that block's point
+ * when the other side is empty. `spans` are in document order.
+ */
+export function mapLine(line: number, spans: readonly Span[], fromA: boolean): number {
+  let ours = 0;
+  let theirs = 0;
+  for (const s of spans) {
+    const [s0, s1, t0, t1] = fromA ? [s.a0, s.a1, s.b0, s.b1] : [s.b0, s.b1, s.a0, s.a1];
+    if (line < s0) break;
+    if (line < s1) return t0 + ((line - s0) / (s1 - s0)) * (t1 - t0);
+    ours = s1;
+    theirs = t1;
+  }
+  return theirs + (line - ours);
+}

client/src/lib/laneChange.ts

@@ -0,0 +1,31 @@
+/**
+ * @file laneChange.ts
+ * @description `lane_update` matcher for live-refresh callers that care about
+ * only a few lane columns. A lane is re-broadcast on every hook (last event,
+ * liveness…), so matching the bare message type made every such frame refetch;
+ * this one fires only when the chosen key of a lane actually changed, or when a
+ * lane was removed. Each call keeps its own memory of the keys it has seen.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { Lane, WSMessage } from "./types";
+
+/** The columns a pane starting, ending or learning its session moves. */
+export const runKeyOf = (l: Lane): string => `${l.run_id}:${l.status}:${l.session_id}`;
+
+export function laneChangeMatcher(keyOf: (l: Lane) => string): (msg: WSMessage) => boolean {
+  const seen = new Map<number, string>();
+  return (msg) => {
+    if (msg.type !== "lane_update") return false;
+    const d = msg.data as { lane?: Lane; removed?: number };
+    if (d.removed !== undefined) {
+      seen.delete(d.removed);
+      return true;
+    }
+    if (!d.lane) return false;
+    const key = keyOf(d.lane);
+    if (seen.get(d.lane.id) === key) return false;
+    seen.set(d.lane.id, key);
+    return true;
+  };
+}

client/src/lib/paneLayout.ts

@@ -327,6 +327,35 @@ export function detachSlot(g: PaneGroups, slot: number, at: number): PaneGroups
   return compact(groups, at);
 }
 
+/** Where a pane joining a tab lands: right of a lone pane, then under the
+ *  right pane, then under the left one (2×2 at four). */
+function joinLayout(layout: PaneLayout, slot: number): PaneLayout {
+  const shown = leaves(layout.root);
+  if (!layout.root) return solo(slot);
+  const [target, edge]: [number, Edge] =
+    shown.length === 1
+      ? [shown[0] as number, "right"]
+      : [(shown.length === 2 ? shown[1] : shown[0]) as number, "bottom"];
+  return { root: splitLeaf(layout.root, target, slot, edge), focus: slot };
+}
+
+/** Moves `slots` (a dropped tab, or one pane of a combo) out of their tabs
+ *  into the tab at `to`, which becomes active. Same object back when nothing
+ *  would move or the tab would pass `MAX_PANES`. */
+export function joinGroup(g: PaneGroups, slots: number[], to: number): PaneGroups {
+  const dst = g.groups[to];
+  if (!dst) return g;
+  const moving = slots.filter((s) => {
+    const from = groupOf(g, s);
+    return from >= 0 && from !== to;
+  });
+  if (!moving.length || leaves(dst.root).length + moving.length > MAX_PANES) return g;
+  const groups = g.groups.map((l, i) =>
+    i === to ? moving.reduce(joinLayout, l) : moving.reduce(closeInLayout, l)
+  );
+  return compact(groups, to);
+}
+
 /** Moves the tab at `from` before the one at `at`; the active tab stays active. */
 export function reorderGroups(g: PaneGroups, from: number, at: number): PaneGroups {
   if (from < 0 || from === at || from + 1 === at) return g;

client/src/lib/types.ts

@@ -2837,10 +2837,16 @@ export type LaneGitFacts =
       ahead: number | null;
       /** Commits the upstream has that HEAD does not; null without an upstream. */
       behind: number | null;
-      /** A merge is in progress (issue #45). Absent on an older server. */
+      /** A merge, cherry-pick or revert is in progress (issue #45). Absent on
+       *  an older server. */
       merging?: boolean;
+      /** Which one `merging` is about; absent on an older server (= merge). */
+      operation?: "merge" | "cherry-pick" | "revert" | null;
       /** Files the merge still holds unmerged, repo-wide. */
       conflicts?: number;
+      /** The branch "vs base" compares against: the lane's own base, else the
+       *  repo's default branch; null when there is none. */
+      base?: string | null;
     }
   | { available: false };
 

client/src/main.tsx

@@ -1,8 +1,8 @@
 /**
  * @file main.tsx
- * @description Vite client entry point. Bootstraps React 18, loads global styles
- * and i18n, registers the service worker for offline asset caching, and mounts
- * {@link App} into `#root`.
+ * @description Vite client entry point. Bootstraps React 18, loads global styles,
+ * registers the service worker, prefetches the Workspace chunk on a `/workspace`
+ * deep link, and mounts {@link App} into `#root` once the active locale is loaded.
  *
  * ## Fonts
  * Only Latin subsets of Inter and JetBrains Mono are imported so Vite bundles
@@ -63,9 +63,14 @@ import "@fontsource/jetbrains-mono/latin-500.css";
 import "@fontsource/jetbrains-mono/vietnamese-400.css";
 import "@fontsource/jetbrains-mono/vietnamese-500.css";
 import App from "./App";
-import "./i18n";
+import { AuthGate } from "./components/AuthGate";
+import { i18nReady } from "./i18n";
 import "./index.css";
 
+// Deep link into the Workspace: start its (lazy) chunk now, in parallel with the
+// locale fetch below, instead of after the first render asks for it.
+if (location.pathname.startsWith("/workspace")) void import("./pages/Workspace");
+
 if ("serviceWorker" in navigator) {
   // Detect whether the page is already controlled by an SW *before* we
   // register. On a truly fresh install there is no controller yet, so the
@@ -93,8 +98,16 @@ if ("serviceWorker" in navigator) {
 const root = document.getElementById("root");
 if (!root) throw new Error("Root element not found");
 
-createRoot(root).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+// The active locale is a lazy chunk: render once it is in, so no raw key ever
+// paints. A failed fetch still renders (i18next falls back to the keys).
+void i18nReady
+  .catch(() => undefined)
+  .then(() =>
+    createRoot(root).render(
+      <StrictMode>
+        <AuthGate>
+          <App />
+        </AuthGate>
+      </StrictMode>
+    )
+  );

client/src/pages/ActivityFeed.tsx

@@ -77,6 +77,7 @@ import { api } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../lib/remoteDataEvents";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { useSpin } from "../hooks/useSpin";
 import { downloadText, exportName, toCsv } from "../lib/exportData";
 import { toast } from "../lib/toast";
 import { useDataScope } from "../lib/dataScope";
@@ -111,7 +112,7 @@ const PAGE_SIZE = 50;
 // Throttle live-event refreshes so a burst of hook events (e.g. a stream of
 // PostToolUse results) triggers one refetch instead of dozens — and a steady
 // stream still refreshes, which a trailing debounce never did.
-const REFRESH_THROTTLE_MS = 1000;
+const REFRESH_THROTTLE_MS = 3000;
 
 /** The agents on screen not asked about yet, and the sessions to ask for them. */
 export function agentsToFetch(
@@ -234,6 +235,7 @@ export function ActivityFeed({ embedded = false }: { embedded?: boolean } = {})
   useEffect(() => {
     load();
   }, [load]);
+  const [spinning, refresh] = useSpin(() => load());
 
   // Agent labels for agents on screen not asked about yet — keyed by agent, so
   // a subagent spawned later in a live session gets its label too.
@@ -401,12 +403,14 @@ export function ActivityFeed({ embedded = false }: { embedded?: boolean } = {})
             <Download className="w-4 h-4" /> {t("exportJson")}
           </button>
           <button
-            onClick={() => load()}
+            onClick={refresh}
+            disabled={spinning}
+            aria-busy={spinning}
             className="btn-ghost"
             aria-label={t("common:refresh")}
             title={t("common:refresh")}
           >
-            <RefreshCw className="w-4 h-4" />
+            <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />
           </button>
         </div>
       </div>

client/src/pages/CcConfig.tsx

@@ -4763,6 +4763,8 @@ function ProfilesModal({
   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);
   const [busy, setBusy] = useState<string | null>(null);
   /** `name` of the profile whose label is being edited inline, plus its draft. */
@@ -4787,6 +4789,7 @@ function ProfilesModal({
       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");
@@ -4931,10 +4934,18 @@ function ProfilesModal({
 
         <div className="px-4 py-3 border-b border-border space-y-2">
           <p className="text-[11px] text-fg-muted leading-relaxed">{t("profiles.subtitle")}</p>
-          <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.warning")}</span>
-          </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>
+          )}
         </div>
 
         <div className="overflow-auto p-4 space-y-3">

client/src/pages/Dashboard.tsx

@@ -95,8 +95,10 @@ import {
 import { api } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { useSpin } from "../hooks/useSpin";
 import { isRemoteDataRefreshMessage } from "../lib/remoteDataEvents";
 import { useDataScope } from "../lib/dataScope";
+import { keepIfSame } from "../lib/keepIfSame";
 import { StatCard } from "../components/StatCard";
 import { AgentCard } from "../components/AgentCard";
 import { useContextMenu } from "../components/ContextMenu";
@@ -778,13 +780,16 @@ function AnalyticsTab() {
       if (seq === loadSeq.current) setLoading(false);
     }
   }, [scope, tool, range]);
+  const [spinning, refresh] = useSpin(load);
 
   useEffect(() => {
     load();
   }, [load]);
 
+  // Heavy aggregates: event-driven reloads at most every 15 s.
   useLiveRefresh(load, {
     intervalMs: 15000,
+    throttleMs: 15000,
     match: (msg) =>
       msg.type === "session_created" ||
       msg.type === "session_updated" ||
@@ -1064,8 +1069,13 @@ function AnalyticsTab() {
               ]}
             />
           </div>
-          <button onClick={load} className="btn-ghost" disabled={loading}>
-            <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
+          <button
+            onClick={refresh}
+            className="btn-ghost"
+            disabled={loading || spinning}
+            aria-busy={loading || spinning}
+          >
+            <RefreshCw className={`w-4 h-4 ${loading || spinning ? "animate-spin" : ""}`} />
             {t("common:refresh")}
           </button>
           <button onClick={handleExport} className="btn-ghost" disabled={!data}>
@@ -1092,6 +1102,7 @@ function AnalyticsTab() {
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
         <StatCard
           label={t("totalSessions")}
+          help={t("common:insights.help.sessions")}
           to="/sessions"
           value={data ? fmt(data.overview.total_sessions) : ""}
           raw={data ? data.overview.total_sessions.toLocaleString() : undefined}
@@ -1102,6 +1113,7 @@ function AnalyticsTab() {
         />
         <StatCard
           label={t("totalAgents")}
+          help={t("common:insights.help.agents")}
           value={data ? fmt(data.overview.total_agents) : ""}
           raw={data ? data.overview.total_agents.toLocaleString() : undefined}
           trend={data ? `${data.overview.active_agents} ${t("common:active")}` : undefined}
@@ -1111,6 +1123,7 @@ function AnalyticsTab() {
         />
         <StatCard
           label={t("tokensExCacheReads")}
+          help={t("common:insights.help.tokens")}
           value={data ? fmt(nonCacheReadTokens) : ""}
           raw={data ? nonCacheReadTokens.toLocaleString() : undefined}
           trend={
@@ -1127,6 +1140,7 @@ function AnalyticsTab() {
         />
         <StatCard
           label={t("totalCost")}
+          help={t("common:insights.help.cost")}
           value={costData ? fmtCost(costData.total_cost) : ""}
           raw={costData ? fmtCostFull(costData.total_cost) : undefined}
           trend={
@@ -1140,6 +1154,7 @@ function AnalyticsTab() {
         />
         <StatCard
           label={t("totalEvents")}
+          help={t("common:insights.help.events")}
           to="/sessions?view=events"
           value={data ? fmt(data.overview.total_events) : ""}
           raw={data ? data.overview.total_events.toLocaleString() : undefined}
@@ -1326,7 +1341,12 @@ function AnalyticsTab() {
 
                 {/* Token mix donut */}
                 <div className="card p-5">
-                  <h3 className="text-sm font-medium text-fg-secondary mb-5">{t("tokenMix")}</h3>
+                  <h3
+                    className="text-sm font-medium text-fg-secondary mb-5 cursor-help underline decoration-dotted underline-offset-2 w-fit"
+                    title={t("common:insights.help.tokenMix")}
+                  >
+                    {t("tokenMix")}
+                  </h3>
                   {tokenMixSegments.length === 0 ? (
                     <p className="text-sm text-fg-muted">{t("common:noData")}</p>
                   ) : (
@@ -1434,7 +1454,12 @@ function AnalyticsTab() {
 
                 {/* Spend pace: burn rate, month to date, month-end forecast */}
                 <div className="card p-5">
-                  <h3 className="text-sm font-medium text-fg-secondary mb-5">{t("spendPace")}</h3>
+                  <h3
+                    className="text-sm font-medium text-fg-secondary mb-5 cursor-help underline decoration-dotted underline-offset-2 w-fit"
+                    title={t("common:insights.help.spendPace")}
+                  >
+                    {t("spendPace")}
+                  </h3>
                   <div className="space-y-3">
                     {[
                       { label: t("burnRate"), value: pace.perDay7, hint: t("burnRateHint") },
@@ -2920,7 +2945,9 @@ export function Dashboard() {
     if (sessionsRes) setSessionsById(new Map(sessionsRes.sessions.map((s) => [s.id, s])));
     if (workingRes && waitingRes) {
       const active = [...workingRes.agents, ...waitingRes.agents];
-      setActiveAgents(active);
+      // keepIfSame: an identical poll keeps the arrays, so the memoized cards
+      // do not re-render.
+      setActiveAgents(keepIfSame(active));
       // Every subagent of the active main agents' sessions, in ONE call.
       const activeSessionIds = [
         ...new Set(active.filter((a) => a.type === "main").map((a) => a.session_id)),
@@ -2929,10 +2956,11 @@ export function Dashboard() {
         ? await soft(api.agents.list({ session_ids: activeSessionIds, limit: 2000 }))
         : { agents: [] };
       if (seq !== monitorSeq.current) return;
-      if (subsRes) setAllSubagents(subsRes.agents.filter((a) => a.type === "subagent"));
+      if (subsRes) setAllSubagents(keepIfSame(subsRes.agents.filter((a) => a.type === "subagent")));
     }
     setError(failed[0] ?? null);
   }, [scope]);
+  const [spinning, refresh] = useSpin(load);
 
   const monitorOn = activeTab === "monitor";
   useEffect(() => {
@@ -3054,8 +3082,14 @@ export function Dashboard() {
               Analytics/Monitor/Health aside every time Monitor opened.
               Analytics and Health carry their own Refresh; one per view. */}
           {monitorOn && (
-            <button onClick={load} className="btn-ghost flex-shrink-0">
-              <RefreshCw className="w-4 h-4" /> {t("common:refresh")}
+            <button
+              onClick={refresh}
+              disabled={spinning}
+              aria-busy={spinning}
+              className="btn-ghost flex-shrink-0"
+            >
+              <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />{" "}
+              {t("common:refresh")}
             </button>
           )}
           {/* Tabs */}
@@ -3105,6 +3139,7 @@ export function Dashboard() {
           <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
             <StatCard
               label={t("totalSessions")}
+              help={t("common:insights.help.sessions")}
               to="/sessions"
               value={stats ? fmt(stats.total_sessions) : ""}
               raw={stats ? stats.total_sessions.toLocaleString() : undefined}
@@ -3114,6 +3149,7 @@ export function Dashboard() {
             />
             <StatCard
               label={t("activeAgents")}
+              help={t("common:insights.help.agents")}
               value={stats?.active_agents ?? ""}
               icon={Bot}
               accentColor="text-status-success"
@@ -3121,6 +3157,7 @@ export function Dashboard() {
             />
             <StatCard
               label={t("activeSubagents")}
+              help={t("common:insights.help.subagents")}
               value={stats ? allSubagents.filter((a) => a.status === "working").length : ""}
               icon={GitBranch}
               accentColor="text-syntax-keyword"
@@ -3129,6 +3166,7 @@ export function Dashboard() {
             />
             <StatCard
               label={t("eventsToday")}
+              help={t("common:insights.help.events")}
               to="/sessions?view=events"
               value={stats ? fmt(stats.events_today) : ""}
               raw={stats ? stats.events_today.toLocaleString() : undefined}
@@ -3138,6 +3176,7 @@ export function Dashboard() {
             />
             <StatCard
               label={t("totalEvents")}
+              help={t("common:insights.help.events")}
               to="/sessions?view=events"
               value={stats ? fmt(stats.total_events) : ""}
               raw={stats ? stats.total_events.toLocaleString() : undefined}
@@ -3147,6 +3186,7 @@ export function Dashboard() {
             />
             <StatCard
               label={t("totalCost")}
+              help={t("common:insights.help.cost")}
               value={totalCost !== null ? fmtCost(totalCost) : ""}
               raw={
                 totalCost !== null

client/src/pages/SessionDetail.tsx

@@ -83,6 +83,8 @@ import {
 } from "lucide-react";
 import { api, type RunHandle } from "../lib/api";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { laneChangeMatcher, runKeyOf } from "../lib/laneChange";
+import { useSpin } from "../hooks/useSpin";
 import { workspaceHref } from "../components/SessionRowMenu";
 import { downloadText, exportName, toCsv } from "../lib/exportData";
 import { toast } from "../lib/toast";
@@ -140,7 +142,7 @@ const EVENTS_INITIAL_BATCH = 50;
 const EVENTS_MORE_BATCH = 500;
 // Live-refresh bounds - see ActivityFeed for rationale.
 const EVENTS_MAX_REFRESH = 500;
-const EVENTS_REFRESH_THROTTLE_MS = 1000;
+const EVENTS_REFRESH_THROTTLE_MS = 3000;
 const DETAIL_TABS: DetailTab[] = ["agents", "conversation", "timeline"];
 
 export function SessionDetail() {
@@ -249,8 +251,10 @@ export function SessionDetail() {
   useEffect(() => {
     probeRuns();
   }, [probeRuns]);
-  // A pane starting/stopping re-broadcasts its lane (`lane_update`).
-  useLiveRefresh(probeRuns, { intervalMs: 10000, match: (msg) => msg.type === "lane_update" });
+  // A pane starting/stopping re-broadcasts its lane (`lane_update`); a hook's
+  // re-broadcast that moved no run column is ignored.
+  const [runChanged] = useState(() => laneChangeMatcher(runKeyOf));
+  useLiveRefresh(probeRuns, { intervalMs: 10000, match: runChanged });
 
   const load = useCallback(async () => {
     if (!id) return;
@@ -272,6 +276,7 @@ export function SessionDetail() {
       setLoading(false);
     }
   }, [id, t]);
+  const [spinning, refresh] = useSpin(load);
 
   useEffect(() => {
     load();
@@ -672,12 +677,14 @@ export function SessionDetail() {
         <SessionResumeButton session={session} />
         <SnapshotButton sessionId={session.id} />
         <button
-          onClick={load}
+          onClick={refresh}
+          disabled={spinning}
+          aria-busy={spinning}
           className="btn-ghost"
           aria-label={t("common:refresh")}
           title={t("common:refresh")}
         >
-          <RefreshCw className="w-4 h-4" />
+          <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />
         </button>
       </div>
 

client/src/pages/Sessions.tsx

@@ -70,6 +70,8 @@ import {
 import { api } from "../lib/api";
 import type { RemoteSource, RunHandle } from "../lib/api";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { laneChangeMatcher, runKeyOf } from "../lib/laneChange";
+import { useSpin } from "../hooks/useSpin";
 import { useAiTools } from "../hooks/useAiTools";
 import { useLanes } from "../hooks/useLanes";
 import { toast } from "../lib/toast";
@@ -237,6 +239,7 @@ export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
     // `scope` is a dep so a data-scope change re-fetches; the api layer injects
     // the matching `sources` param.
   }, [query, page, scope, t]);
+  const [spinning, refresh] = useSpin(load);
 
   useEffect(() => {
     load();
@@ -253,11 +256,13 @@ export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
   useEffect(() => {
     loadDashboardRuns();
   }, [loadDashboardRuns]);
+  const [runChanged] = useState(() => laneChangeMatcher(runKeyOf));
   useLiveRefresh(loadDashboardRuns, {
     intervalMs: 15000,
-    // A pane starting/stopping re-broadcasts its lane (`lane_update`); the
-    // server sends no run_status any more. The 15 s poll covers extra slots.
-    match: (msg) => msg.type === "lane_update",
+    // A pane starting/stopping re-broadcasts its lane (`lane_update`) — only
+    // then, not on every hook's re-broadcast; the server sends no run_status
+    // any more. The 15 s poll covers extra slots.
+    match: runChanged,
   });
 
   useLiveRefresh(load, {
@@ -387,8 +392,9 @@ export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
           >
             <Download className="w-4 h-4" /> {t("exportJson")}
           </button>
-          <button onClick={load} className="btn-ghost">
-            <RefreshCw className="w-4 h-4" /> {t("common:refresh")}
+          <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>
       </div>

client/src/pages/Settings.tsx

@@ -120,6 +120,7 @@ import type { WSMessage } from "../lib/types";
 import { confirmDialog } from "../lib/confirm";
 import { toast } from "../lib/toast";
 import { useDialog } from "../hooks/useDialog";
+import { useSpin } from "../hooks/useSpin";
 import { exportPrefs, importPrefs } from "../lib/prefsBackup";
 
 /** The fewest milliseconds between two activity-driven `/settings/info` reads:
@@ -249,6 +250,7 @@ export function Settings({
       setLoading(false);
     }
   }, [t, needsInfo, section]);
+  const [spinning, refresh] = useSpin(load);
 
   useEffect(() => {
     load();
@@ -263,7 +265,8 @@ export function Settings({
     lastInfoAt.current = Date.now();
     let timer: number | undefined;
     const soon = () => {
-      if (timer !== undefined) return;
+      // Hidden tab: no reads; onVis catches up once when it is shown.
+      if (timer !== undefined || document.visibilityState !== "visible") return;
       const wait = Math.max(0, INFO_MIN_MS - (Date.now() - lastInfoAt.current));
       timer = window.setTimeout(() => {
         timer = undefined;
@@ -275,6 +278,8 @@ export function Settings({
       }, wait);
     };
     const beat = window.setInterval(soon, 30_000);
+    const onVis = () => soon();
+    document.addEventListener("visibilitychange", onVis);
     const off = eventBus.subscribe((msg: WSMessage) => {
       if (
         msg.type === "session_created" ||
@@ -288,6 +293,7 @@ export function Settings({
     });
     return () => {
       off();
+      document.removeEventListener("visibilitychange", onVis);
       window.clearInterval(beat);
       window.clearTimeout(timer);
     };
@@ -810,8 +816,14 @@ export function Settings({
                   <FileDown className="w-3.5 h-3.5" />
                   {t("exportData")}
                 </a>
-                <button onClick={load} className="btn-ghost">
-                  <RefreshCw className="w-4 h-4" /> {t("common:refresh")}
+                <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>
             </div>

client/src/pages/SettingsHub.tsx

@@ -41,6 +41,7 @@ import {
   Palette,
   Router,
   Search,
+  UsersRound,
 } from "lucide-react";
 import { Settings } from "./Settings";
 import { CcConfig } from "./CcConfig";
@@ -64,6 +65,8 @@ import {
 import { Skeleton } from "../components/Skeleton";
 import { AiToolIcon } from "../components/AiToolIcon";
 import { toast } from "../lib/toast";
+import { useAuth } from "../components/AuthGate";
+import { UsersSettings } from "../components/settings/UsersSettings";
 
 const GROUPS = ["general", "agents", "routing", "cost", "git"] as const;
 type Group = (typeof GROUPS)[number];
@@ -124,6 +127,15 @@ const MOVED: Record<string, string> = {
   "ai-router": "ai-proxy",
 };
 
+/** Sections whose API a server-mode member may not reach (STAFF_ONLY_PREFIXES in server/lib/auth.js). */
+const STAFF_SECTIONS = new Set([
+  "data",
+  "reports",
+  "agents/claude-code",
+  "agents/codex",
+  "git-credentials",
+]);
+
 /** An unknown section: say so, then show Appearance. */
 function UnknownSection({ name }: { name: string }) {
   const { t } = useTranslation("settings");
@@ -205,12 +217,15 @@ export function SettingsHub() {
     };
   }, [location.key, location.hash]);
 
+  const auth = useAuth();
+  const isMember = auth.state.mode === "server" && auth.state.user?.role === "member";
+  const isStaff = auth.state.mode === "server" && !isMember && Boolean(auth.state.user);
   const enabled = (id: string) => aiTools.byId(id)?.enabled !== false;
   const s = (key: string) => ({
     title: t(`settingsNav.section.${key}.title`),
     description: t(`settingsNav.section.${key}.description`),
   });
-  const sections: Section[] = [
+  const allSections: Section[] = [
     {
       id: "data",
       group: "general",
@@ -246,6 +261,17 @@ export function SettingsHub() {
       ...s("reports"),
       render: () => <ReportSettings />,
     },
+    ...(isStaff
+      ? [
+          {
+            id: "users",
+            group: "general" as const,
+            Icon: UsersRound,
+            ...s("users"),
+            render: () => <UsersSettings />,
+          },
+        ]
+      : []),
     {
       id: "notifications",
       group: "general",
@@ -342,6 +368,9 @@ export function SettingsHub() {
       render: () => <WorktreeVisibilitySettings />,
     },
   ];
+  // Server mode: a member cannot open the host's own configuration or the
+  // all-users views (the server answers 403 EADMIN), so those pages are hidden.
+  const sections = isMember ? allSections.filter((x) => !STAFF_SECTIONS.has(x.id)) : allSections;
 
   const entries: SettingsEntry[] = sections.flatMap((sec) => [
     { section: sec.id, title: sec.title, description: sec.description, sectionTitle: true },

client/src/pages/Workflows.tsx

@@ -78,6 +78,7 @@ import { api } from "../lib/api";
 import type { DateRange } from "../lib/dateRange";
 import { eventBus } from "../lib/eventBus";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
+import { useSpin } from "../hooks/useSpin";
 import type { WorkflowData, WSMessage } from "../lib/types";
 
 import { WorkflowStats } from "../components/workflows/WorkflowStats";
@@ -139,9 +140,9 @@ export function Workflows({
   }, [fetchData]);
 
   // Auto-refresh on the WebSocket messages that change workflow data, throttled
-  // so a steady stream refreshes every few seconds instead of never.
+  // so a steady stream refreshes every 15 s (heavy aggregates) instead of never.
   useLiveRefresh(fetchData, {
-    throttleMs: 5000,
+    throttleMs: 15000,
     match: (msg: WSMessage) =>
       msg.type === "session_created" ||
       msg.type === "session_updated" ||
@@ -150,10 +151,7 @@ export function Workflows({
       msg.type === "workflow_upserted",
   });
 
-  const handleRefresh = () => {
-    setLoading(true);
-    fetchData();
-  };
+  const [refreshing, handleRefresh] = useSpin(fetchData);
 
   const handleExport = () => {
     if (!data) return;
@@ -174,6 +172,7 @@ export function Workflows({
           statusFilter={statusFilter}
           onStatusFilterChange={setStatusFilter}
           onRefresh={handleRefresh}
+          refreshing={refreshing}
           onExport={handleExport}
           lastUpdated={null}
         />
@@ -197,6 +196,7 @@ export function Workflows({
           statusFilter={statusFilter}
           onStatusFilterChange={setStatusFilter}
           onRefresh={handleRefresh}
+          refreshing={refreshing}
           onExport={handleExport}
           lastUpdated={null}
         />
@@ -221,6 +221,7 @@ export function Workflows({
         statusFilter={statusFilter}
         onStatusFilterChange={setStatusFilter}
         onRefresh={handleRefresh}
+        refreshing={refreshing}
         onExport={handleExport}
         lastUpdated={lastUpdated}
       />
@@ -499,6 +500,7 @@ function PageHeader({
   statusFilter,
   onStatusFilterChange,
   onRefresh,
+  refreshing = false,
   onExport,
   lastUpdated,
 }: {
@@ -507,6 +509,7 @@ function PageHeader({
   statusFilter: StatusFilter;
   onStatusFilterChange: (f: StatusFilter) => void;
   onRefresh: () => void;
+  refreshing?: boolean;
   onExport: () => void;
   lastUpdated: Date | null;
 }) {
@@ -566,10 +569,12 @@ function PageHeader({
         {/* Actions */}
         <button
           onClick={onRefresh}
+          disabled={refreshing}
+          aria-busy={refreshing}
           className="p-2 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-3 transition-colors"
           title={t("refreshData")}
         >
-          <RefreshCw className="w-4 h-4" />
+          <RefreshCw className={`w-4 h-4 ${refreshing ? "animate-spin" : ""}`} />
         </button>
         <button
           onClick={onExport}

client/src/pages/Workspace.tsx

@@ -775,7 +775,8 @@ export function Workspace() {
   useEffect(() => {
     refreshList();
     const tick = setInterval(() => {
-      refreshList();
+      // Hidden tab: skip; the visibility handler below re-reads on show.
+      if (document.visibilityState === "visible") refreshList();
     }, 5000);
     return () => clearInterval(tick);
   }, [refreshList]);

client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap

@@ -157,6 +157,7 @@ exports[`screen snapshots > Activity feed 1`] = `
           JSON
         </button>
         <button
+          aria-busy="false"
           aria-label="Refresh"
           class="btn-ghost"
           title="Refresh"
@@ -3220,6 +3221,7 @@ exports[`screen snapshots > Dashboard 1`] = `
             </div>
           </div>
           <button
+            aria-busy="false"
             class="btn-ghost"
           >
             <svg
@@ -3292,7 +3294,8 @@ exports[`screen snapshots > Dashboard 1`] = `
             class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate cursor-help underline decoration-dotted underline-offset-2"
+              title="A session is one conversation with an AI agent, from start to finish."
             >
               Total Sessions
             </span>
@@ -3339,7 +3342,8 @@ exports[`screen snapshots > Dashboard 1`] = `
             class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate cursor-help underline decoration-dotted underline-offset-2"
+              title="Agents are the AI workers: the main one in each session plus any helpers it started."
             >
               Total Agents
             </span>
@@ -3405,7 +3409,8 @@ exports[`screen snapshots > Dashboard 1`] = `
             class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate cursor-help underline decoration-dotted underline-offset-2"
+              title="Tokens are the pieces of text the AI reads and writes. Roughly 1 token ≈ 4 characters. More tokens = more cost."
             >
               Tokens (excl. cache reads)
             </span>
@@ -3487,7 +3492,8 @@ exports[`screen snapshots > Dashboard 1`] = `
             class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate cursor-help underline decoration-dotted underline-offset-2"
+              title="Estimated money spent, calculated from token counts and each model's price."
             >
               Total Cost
             </span>
@@ -3541,7 +3547,8 @@ exports[`screen snapshots > Dashboard 1`] = `
             class="flex items-center justify-between gap-3 mb-3"
           >
             <span
-              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate"
+              class="text-xs font-medium text-fg-muted uppercase tracking-wider truncate cursor-help underline decoration-dotted underline-offset-2"
+              title="Every step the AI takes (running a tool, finishing a reply…) is recorded as one event."
             >
               Total Events
             </span>
@@ -5386,7 +5393,8 @@ exports[`screen snapshots > Dashboard 1`] = `
             class="card p-5"
           >
             <h3
-              class="text-sm font-medium text-fg-secondary mb-5"
+              class="text-sm font-medium text-fg-secondary mb-5 cursor-help underline decoration-dotted underline-offset-2 w-fit"
+              title="How fast money is being spent, and where this month will end up if that speed continues."
             >
               Spend pace
             </h3>
@@ -6018,6 +6026,7 @@ exports[`screen snapshots > Session detail 1`] = `
         </button>
       </div>
       <button
+        aria-busy="false"
         aria-label="Refresh"
         class="btn-ghost"
         title="Refresh"
@@ -6210,7 +6219,8 @@ exports[`screen snapshots > Session detail 1`] = `
             class="rounded-lg border px-3 py-2.5 border-surface-3 bg-surface-2 text-fg-secondary"
           >
             <div
-              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
+              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted cursor-help"
+              title="Every step the AI takes (running a tool, finishing a reply…) is recorded as one event."
             >
               <span
                 class="text-fg-muted"
@@ -6232,7 +6242,11 @@ exports[`screen snapshots > Session detail 1`] = `
                   />
                 </svg>
               </span>
-              Events
+              <span
+                class="underline decoration-dotted underline-offset-2"
+              >
+                Events
+              </span>
             </div>
             <div
               class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
@@ -6244,7 +6258,8 @@ exports[`screen snapshots > Session detail 1`] = `
             class="rounded-lg border px-3 py-2.5 border-syntax-keyword/20 bg-syntax-keyword/5 text-syntax-keyword"
           >
             <div
-              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
+              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted cursor-help"
+              title="How many actions the AI took: reading a file, editing, running a command…"
             >
               <span
                 class="text-syntax-keyword"
@@ -6266,7 +6281,11 @@ exports[`screen snapshots > Session detail 1`] = `
                   />
                 </svg>
               </span>
-              Tool calls
+              <span
+                class="underline decoration-dotted underline-offset-2"
+              >
+                Tool calls
+              </span>
             </div>
             <div
               class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
@@ -6278,7 +6297,8 @@ exports[`screen snapshots > Session detail 1`] = `
             class="rounded-lg border px-3 py-2.5 border-syntax-property/20 bg-syntax-property/5 text-syntax-property"
           >
             <div
-              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
+              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted cursor-help"
+              title="Helper agents the main AI started to work on part of the task in parallel."
             >
               <span
                 class="text-syntax-property"
@@ -6316,7 +6336,11 @@ exports[`screen snapshots > Session detail 1`] = `
                   />
                 </svg>
               </span>
-              Subagents
+              <span
+                class="underline decoration-dotted underline-offset-2"
+              >
+                Subagents
+              </span>
             </div>
             <div
               class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
@@ -6328,7 +6352,8 @@ exports[`screen snapshots > Session detail 1`] = `
             class="rounded-lg border px-3 py-2.5 border-syntax-builtin/20 bg-syntax-builtin/5 text-syntax-builtin"
           >
             <div
-              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
+              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted cursor-help"
+              title="When a conversation gets too long, it is summarized to make room. Early details can be lost."
             >
               <span
                 class="text-syntax-builtin"
@@ -6356,7 +6381,11 @@ exports[`screen snapshots > Session detail 1`] = `
                   />
                 </svg>
               </span>
-              Compactions
+              <span
+                class="underline decoration-dotted underline-offset-2"
+              >
+                Compactions
+              </span>
             </div>
             <div
               class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
@@ -6368,7 +6397,8 @@ exports[`screen snapshots > Session detail 1`] = `
             class="rounded-lg border px-3 py-2.5 border-surface-3 bg-surface-2 text-fg-secondary"
           >
             <div
-              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted"
+              class="flex items-center gap-1.5 text-[10px] uppercase tracking-wider text-fg-muted cursor-help"
+              title="Steps that failed. A few are normal; many may mean the AI got stuck."
             >
               <span
                 class="text-fg-muted"
@@ -6396,7 +6426,11 @@ exports[`screen snapshots > Session detail 1`] = `
                   />
                 </svg>
               </span>
-              Errors
+              <span
+                class="underline decoration-dotted underline-offset-2"
+              >
+                Errors
+              </span>
             </div>
             <div
               class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
@@ -6435,7 +6469,9 @@ exports[`screen snapshots > Session detail 1`] = `
                   />
                 </svg>
               </span>
-              Duration
+              <span>
+                Duration
+              </span>
             </div>
             <div
               class="mt-1 font-mono text-lg font-semibold text-fg-primary leading-tight"
@@ -6830,6 +6866,7 @@ exports[`screen snapshots > Sessions 1`] = `
           JSON
         </button>
         <button
+          aria-busy="false"
           class="btn-ghost"
         >
           <svg
@@ -7233,7 +7270,7 @@ exports[`screen snapshots > Settings — about 1`] = `
             <p
               class="text-[10px] text-status-warning/90 mt-1"
             >
-              UI build v2.5.5 (rebuild client to match)
+              UI build v2.5.11 (rebuild client to match)
             </p>
           </div>
           <div
@@ -7521,6 +7558,7 @@ exports[`screen snapshots > Settings — data 1`] = `
             Export Data
           </a>
           <button
+            aria-busy="false"
             class="btn-ghost"
           >
             <svg
@@ -9857,6 +9895,7 @@ exports[`screen snapshots > Workflows 1`] = `
           </button>
         </div>
         <button
+          aria-busy="false"
           class="p-2 rounded-lg text-fg-muted hover:text-fg-secondary hover:bg-surface-3 transition-colors"
           title="Refresh data"
         >