chore: v2.8.4 — member tmux follows tmux upgrades, Members' tmux card

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.claude-plugin/plugin.json

@@ -22,7 +22,8 @@
           {
             "type": "command",
             "command": "node \"${CLAUDE_PLUGIN_ROOT}/scripts/hook-handler.js\" PreToolUse",
-            "timeout": 5
+            "timeout": 5,
+            "async": true
           }
         ]
       }
@@ -34,7 +35,8 @@
           {
             "type": "command",
             "command": "node \"${CLAUDE_PLUGIN_ROOT}/scripts/hook-handler.js\" PostToolUse",
-            "timeout": 5
+            "timeout": 5,
+            "async": true
           }
         ]
       }

AGENTS.md

@@ -23,9 +23,8 @@ make while you work here as Codex.
 - `scripts/` for hook/install/import/cleanup utilities.
 
 ## Validation expectations
-- Backend changes: run `npm run test:server` when possible.
-- Frontend changes: run `npm run test:client` when possible.
-- Full suites take 5–6 minutes, so while iterating run only what the change touches: `npm run test:server -- server/__tests__/<name>.test.js`, and in `client/` `NODE_ENV=test npx vitest related <changed files> --run` (or `vitest run <test file>`). Run the full suite once before committing, and always when the change touches something every screen uses (`Layout`, `Sidebar`, `StatusBar`, `tailwind.config.js`, global CSS, shared hooks/lib) — the per-screen snapshots catch that.
+- Run only the tests the change touches, never a full suite by default (full suites take 5–6 minutes): `npm run test:server -- server/__tests__/<name>.test.js`, and in `client/` `NODE_ENV=test npx vitest related <changed files> --run` (or `vitest run <test file>`). Docs-only changes run no tests.
+- Run a full suite (`npm run test:server` / `npm run test:client`) only when genuinely needed: the change touches something every screen uses (`Layout`, `Sidebar`, `StatusBar`, `tailwind.config.js`, global CSS, shared hooks/lib), a shared server core (`server/db.js`, `server/index.js`, auth/scope, middleware), a dependency or build/test config, or more than ~10 code files; or the user asks. The pre-commit hook already picks related vs. full tests per commit, so do not add an extra full run before committing.
 - If any check is skipped, report it explicitly.
 
 ## Safety expectations

ARCHITECTURE.md

@@ -375,7 +375,7 @@ graph TD
 | `lib/pty-run.js`          | PTY lifecycle for tmux-backed runs. Manages one tmux session per lane, named `agenthub-lane-<lane.id>`. Exports `startRun()` to create/attach a session and return a `runId` opaque handle; internally uses tmux to manage the pseudoterminal. Spawned `claude` processes run inside the session and fire the dashboard's hooks like any other CLI session, so they show up in `/api/sessions`, the analytics, the Kanban board, and the Workflows page automatically. The PTY frames (terminal input/output deltas) are streamed to the client over `/ws-pty/:runId` (see `server/websocket.js`) at binary frame granularity rather than as JSON envelopes; the client's xterm.js terminal widget renders these raw PTY updates live. Every spawn also mirrors itself into `dashboard_runs` (cwd, model, prompt preview, `resume_session_id`, lane id, start time) — that row is the ONLY source `publicRun` has for those fields, since the handle itself is recomputed from tmux on every read, so a dropped insert renders as a live run with no cwd, model or start date. `mode` is NOT NULL in that table and `recordRun` swallows insert errors by design, which is why this module passes a literal `"interactive"` rather than null. **Create-or-adopt has one refusal:** a pane already running an agent is adopted silently only when the request asked for nothing but a pane — a `resumeSessionId` or an initial prompt cannot be typed over a live agent, so it throws `ERUNLIVE` (409) rather than reporting a resume that never spawned |
 | `lib/pty-attach.js`       | Client-side PTY attachment via WebSocket. Establishes a `/ws-pty/:runId` connection, receives binary PTY frames, and feeds them to an xterm.js terminal instance. Handles reconnection, resize events (sending `TIOCSWINSZ` ioctl to the tmux pane), and cleanup on disconnect. A single tmux session can have many simultaneous PTY clients (browser Workspace, `agenthub lanes shell` CLI, etc.), all synced live The server side (`server/lib/pty-attach.js`) runs `tmux attach` with the LIVE tmux server's own binary (`/proc/<tmux.serverPid()>/exe`, else `tmux` on PATH): a tmux upgraded while its server runs leaves a newer client on PATH that the old server refuses with `open terminal failed: not a terminal`. |
 | `routes/run.js`           | HTTP surface for the tmux+PTY Run feature. **Same-origin guard** on every route — browser requests must come from a localhost-ish Origin (`localhost`, `127.0.0.1`, `::1`, `0.0.0.0`); missing-Origin (curl/CLI) requests pass. When `DASHBOARD_TOKEN` is configured it is **also** required on these routes (same as the rest of `/api/*`). `GET /api/run` lists all live runs (computed fresh from tmux state via `tmux list-sessions`). `GET /api/run/tmux` reports whether `tmux` is installed and on PATH (required for the feature to work). `GET /api/run/binary` probes whether `claude` is on `PATH`. `GET /api/run/cwds` suggests cwds (dashboard + home + recent from sessions table). `GET /api/run/history?laneId=...` returns persisted run history, optionally scoped to one lane. `GET /api/run/files?cwd=&q=` powers the Workspace page's `@`-file autocomplete: scoped fuzzy search inside `cwd` skipping `node_modules`, `.git`, `dist`, `build`, `.next`, `.cache`, `coverage`, `vendor`, etc., capped result count, ranked by basename match. `POST /api/run/drop-image` saves an image dropped on the terminal (raw body, four image types, random name under `<data dir>/drops/` (a member's `~/.agenthub/handoff/drops/` under S3)) and returns the path the terminal pastes. `POST /api/run` requires `laneId` in the body and starts/attaches a tmux-backed run. `GET /api/run/:id` returns the run handle. `DELETE /api/run/:id` kills the tmux session (sends SIGTERM to the pane, escalates to SIGKILL after 5 s). The PTY frames are streamed to the client over `/ws-pty/:runId` as binary frames (not JSON), rendering a real interactive terminal in xterm.js on the Workspace page. `tmux` must be installed on the dashboard server's machine (same as better-sqlite3's native-module requirements) |
-| `routes/lanes.js`         | Durable-lane API. `POST /api/lanes/worktree`, `PATCH /api/lanes/:id`, destructive actions, and `DELETE /api/lanes/:id` use the Run route's same-origin guard. Worktree provisioning validates an absolute source git repository, persists a managed lane as `provisioning`, returns `202`, then uses the per-lane lock to resolve the base and add the worktree. Completion broadcasts the existing `lane_update` payload as `idle`; a git failure leaves a row that the non-destructive delete route can forget. `GET /api/lanes/:id/preflight?action=reset\|remove\|purge` produces counted confirmation facts. Confirmed `POST /:id/{reset,remove,purge}` actions require a complete `expect`, run under the same lock, kill a recorded run and wait for the spawner's actual child-exit timestamp (or return `500 ERUNTIMEOUT` before git), clear `run_id`, reject changed facts with `409 ESTALE` including expected/current diagnostics, and require `force` for unpushed managed reset/remove work. Reset and managed removal call the worktree's independent managed-kind, realpath-within-`LANES_ROOT`, and listed-worktree guard; adopted reset is refused, while adopted remove only forgets its row and never modifies its directory, and a managed lane whose directory was deleted by hand takes a prune path that still enforces the managed-kind and inside-`LANES_ROOT` checks. `start` returns `409 ERUNLIVE` rather than overwriting a live `run_id` and orphaning its child. `kind`, `source_repo`, `slug`, `base_branch`, `slot` and `ports` are not patchable — provisioning writes them through `lanesLib.setProvisioningFacts`. Worktree provisioning also runs `lane-runtime.js:provisionLane` (A2) when the repo declares a `.agenthub/profile` — seed `.env`, `bootstrap`, create the database, migrate, seed — before the lane reports `idle`; `reset`/`remove` likewise call `resetLaneData`/`removeLaneData`, with `reset` accepting a body `keepDb: true` to skip the whole drop-recreate-migrate-reseed block. The runtime routes (`GET /:id/runtime`, `POST /:id/up`, `POST /:id/down`, `POST /:id/hook/:name`, `GET /:id/logs/:svc`) are registered **before** the `/:id/:action` catch-all so `up`/`down` are not swallowed as unknown actions, and are deliberately kept out of it: that catch-all drives a lane's Claude run, these drive the application the lane is working on. `GET /api/lanes/pipeline-stats` aggregates per-node pass counts over every lane and every archived feature. The git surface (#34/#35) sits under `/:id/git/*`, again before the catch-all: `GET /:id/git/changes` (ranges `work`/`branch`/`commit`, with `context`), `/:id/git/log`, `/:id/git/file`, `/:id/git/ls`, `/:id/git/tree` and `/:id/git/branches` are read-only and unguarded like `/:id/git`, while `POST /:id/git/:action` is same-origin guarded and runs under the lane lock — and its per-file actions (`stage`, `unstage`, `discard`) accept only paths `git status` reports as changed, with `discard` additionally requiring `confirm: true`. |
+| `routes/lanes.js`         | Durable-lane API. `POST /api/lanes/worktree`, `PATCH /api/lanes/:id`, destructive actions, and `DELETE /api/lanes/:id` use the Run route's same-origin guard. Worktree provisioning validates an absolute source git repository, persists a managed lane as `provisioning`, returns `202`, then uses the per-lane lock to resolve the base and add the worktree. Completion broadcasts the existing `lane_update` payload as `idle`; a git failure leaves a row that the non-destructive delete route can forget. `GET /api/lanes/:id/preflight?action=reset\|remove\|purge` produces counted confirmation facts. Confirmed `POST /:id/{reset,remove,purge}` actions require a complete `expect`, run under the same lock, kill a recorded run and wait for the spawner's actual child-exit timestamp (or return `500 ERUNTIMEOUT` before git), clear `run_id`, reject changed facts with `409 ESTALE` including expected/current diagnostics, and require `force` for unpushed managed reset/remove work. Reset and managed removal call the worktree's independent managed-kind, realpath-within-`LANES_ROOT`, and listed-worktree guard; adopted reset is refused, while adopted remove only forgets its row and never modifies its directory, and a managed lane whose directory was deleted by hand takes a prune path that still enforces the managed-kind and inside-`LANES_ROOT` checks. `start` returns `409 ERUNLIVE` rather than overwriting a live `run_id` and orphaning its child. `kind`, `source_repo`, `slug`, `base_branch`, `slot` and `ports` are not patchable — provisioning writes them through `lanesLib.setProvisioningFacts`. Worktree provisioning also runs `lane-runtime.js:provisionLane` (A2) when the repo declares a `.agenthub/profile` — seed `.env`, `bootstrap`, create the database, migrate, seed — before the lane reports `idle`; `reset`/`remove` likewise call `resetLaneData`/`removeLaneData`, with `reset` accepting a body `keepDb: true` to skip the whole drop-recreate-migrate-reseed block. The runtime routes (`GET /:id/runtime`, `POST /:id/up`, `POST /:id/down`, `POST /:id/hook/:name`, `GET /:id/logs/:svc`) are registered **before** the `/:id/:action` catch-all so `up`/`down` are not swallowed as unknown actions, and are deliberately kept out of it: that catch-all drives a lane's Claude run, these drive the application the lane is working on. `GET /api/lanes/pipeline-stats` aggregates per-node pass counts over every lane and every archived feature. The git surface (#34/#35) sits under `/:id/git/*`, again before the catch-all: `GET /:id/git/changes` (ranges `work`/`branch`/`commit`, with `context`), `/:id/git/log`, `/:id/git/file`, `/:id/git/ls`, `/:id/git/tree`, `/:id/git/download` and `/:id/git/branches` are read-only and unguarded like `/:id/git`, while `POST /:id/git/upload` (create-only, `lane-file-transfer.js`) and `POST /:id/git/:action` are same-origin guarded and runs under the lane lock — and its per-file actions (`stage`, `unstage`, `discard`) accept only paths `git status` reports as changed, with `discard` additionally requiring `confirm: true`. |
 | `lib/ports.js`            | TCP probing for runtime allocation. `isListening(port)` connects rather than binds (binding races with the hook about to bind, and says nothing about a listener held by another user); a connect timeout counts as occupied. `listenerPids(port)` shells to `lsof`, falls back to `ss`, and returns `[]` with a one-time warning when neither exists — a missing tool must never fail a lane operation |
 | `lib/lane-slots.js`       | Slot and port allocation — the numbering Shipyard gets free from fixed `lane1..lane9` directories and AgentHub, keyed by `cwd`, must allocate. `allocateSlot` takes the lowest free of `LANE_MAX_SLOTS` (default 9) under the per-lane lock, with a partial unique index on `lanes.slot` as the backstop; allocation is **lazy**, so a lane that is only watched never consumes one. `releaseSlot` runs on remove but never on reset (moving a lane's ports mid-feature is a silent failure, not a fresh start). `resolvePorts` prefers `PORT_BASE_<name> + slot`, then steps `+100` at a time so the last digit still reads as the slot, skipping anything listening, recorded by another lane, or already taken in the same boot. `slotDirs` puts run/log state under `LANES_ROOT/.state/lane<slot>/` — outside the worktree, because `reset`'s `git clean -fd` would otherwise sweep live pid files. `dbName`/`dataFacts` (A2) derive the same kind of slot-based fact one layer up: database name, `DATABASE_URL`/`TEST_DATABASE_URL`, a Redis logical index, and the upload directory — each `null` when its owning profile declaration (`DB_PREFIX`, `REDIS`, `UPLOAD_SUBDIR`) is absent |
 | `lib/lane-profile.js`     | The stack seam. Resolves `<repo>/.agenthub/profile/` from the lane's own working copy first (a branch that edits its boot command must boot with it), the source repo second. `profile.env` is **parsed, not sourced** — `$(…)` stays literal, because sourcing repo shell into the dashboard process would be a code-execution path. `runHook` spawns `bash <hook>` with an argv array through a wrapper that `export -f`s `harness_spawn`/`die`, exports Shipyard's env contract verbatim (`LANE` is the **slot**, plus `<NAME>_PORT` per declared port, plus A2's `DB_NAME`/`DATABASE_URL`/`TEST_DATABASE_URL`/`PG_HOST`/`PG_PORT`/`PG_USER`/`REDIS_URL`/`REDIS_HOST`/`REDIS_PORT`/`UPLOAD_DIR` when their profile declaration is present) so its profiles port unchanged, scrubs `GIT_*` exactly as `worktree.js:git()` does, redacts any `secrets.js` password from its output before it reaches the log file or the `lane_hook_output` broadcast, and streams the rest to both `$LOG_DIR/<hook>.log` and that broadcast. Hook names come from a fixed allowlist, never from a request |
@@ -385,7 +385,8 @@ graph TD
 | `lib/lane-env.js`         | (A2) `seedEnv` copies a repo's real `.env` into a lane on first boot (or `--force`) and rewrites the declared `ENV_REWRITE` keys (`DATABASE_URL`/`REDIS_URL`/`UPLOAD_DIR`) in place, byte-identical otherwise. A `--force` refresh preserves `ENV_PRESERVE` keys (e.g. `JWT_SECRET`) from the lane's own existing file — swapping in the source's secret would 401 a running lane until reboot. Falls back to `.env.example` with a warning when the source is missing. Refuses on an adopted lane: that file is the user's real config |
 | `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-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; in a folder that is not a git repo they, and `listTreeAll`, read the disk instead through `walkFolder` — realpath-confined, symlinks never followed, `.git` hidden, `node_modules` never entered, 20 000 entries at most). 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/lane-file-transfer.js` | (#78) The Files tab's download and upload. `openDownload` streams one working file of any type (up to 512 MB) behind the file read's guards (`lanePath`, `resolveInLane` realpath confinement, `isSecretOnDisk`, `openSafe` for a member's file); the route serves it as an `application/octet-stream` attachment under a `sandbox` CSP with `nosniff`. `saveUpload` only CREATES (`EEXISTS` for a taken name, a symlink included), into an existing folder, never under `.git`, never a secret name, at most 25 MB — under S3 as the folder's member through `write-as`, else with an exclusive `wx` create. Works in a folder that is not a git repo |
 | `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 |
@@ -757,6 +758,7 @@ erDiagram
         TEXT metadata "JSON blob"
         TEXT awaiting_input_since "ISO 8601 or NULL — set by waiting Notifications"
         TEXT awaiting_reason "notification|stop|session_start|interrupted or NULL"
+        TEXT pinned_at "ISO 8601 or NULL — pinned to the top of its workspace's sidebar list"
         TEXT source "Data source — 'local' or a remote source id; NOT NULL DEFAULT 'local'"
     }
 
@@ -2354,7 +2356,7 @@ graph TD
         SHELL["Sagi.tsx<br/>shell: open/closed state,<br/>⌘B / Esc, reduced-motion,<br/>navigation"]
         AVATAR["SagiAvatar.tsx<br/>SVG mascot; data-mood drives CSS;<br/>cursor-tracking pupils"]
         BUBBLE["SpeechBubble.tsx<br/>bubble"]
-        PANEL["SagiPanel.tsx<br/>status + quick actions + Ask box"]
+        PANEL["SagiPanel.tsx<br/>status + Needs you + Mute / Clear alerts + Ask box"]
         CSS["sagi.css<br/>keyframes + per-mood expressions"]
     end
 
@@ -2401,16 +2403,17 @@ The mood state machine in `deriveMood` resolves to a single expression using a f
 
 | Component | Responsibility |
 | --- | --- |
-| **`brain.ts`** | Pure, framework-free core. Exposes a `WSMessage` reducer (`reduceSagi`) and a mood state machine (`deriveMood`) with the priority order `disconnected > worried > stuck > happy > thinking > watching > sleeping > idle`. The clock is injected and there are zero side effects, so the brain is fully unit-tested in isolation. |
-| **`useSagiBrain.ts`** | The **only** consumer of the global `eventBus`. Wires the pure brain to real timers (idle / sleep / stuck), the speech-bubble queue, mute, and clear-alerts. Produces the derived `{ mood, status, bubble }` the presentational components render. |
+| **`brain.ts`** | Pure, framework-free core. Exposes a `WSMessage` reducer (`reduceSagi`, which also returns the `subject` session a pulse is about — name, cwd, lane) and a mood state machine (`deriveMood`) with the priority order `disconnected > worried > stuck > happy > thinking > watching > sleeping > idle`. An error alerts on the transition INTO `error` only, and **Clear alerts** (`clearErrors`) moves the errored sessions into `dismissed`: their later updates, agent errors and failure events stay silent until the session goes active again or ends. `attentionOf` lists errored then waiting sessions by name; `MOMENT_OF_PULSE` maps each pulse to a pet animation. The clock is injected and there are zero side effects, so the brain is fully unit-tested in isolation. |
+| **`useSagiBrain.ts`** | The **only** consumer of the global `eventBus`. Wires the pure brain to real timers (idle / sleep / stuck), the speech bubble (naming the session it is about; the same pulse again within 8 s joins it as a count), the one-shot `moment` animation, a once-per-browser-session greeting, an idle fidget every minute or so, pat, mute, and clear-alerts (the dismissed ids persist in `localStorage` `agenthub.pet.dismissedErrors`, newest 200). The reducer runs outside React's updater so StrictMode never doubles a pulse. Produces `{ mood, status, attention, bubble, moment }`. |
 | **`SagiAvatar.tsx`** | Pure presentational SVG mascot. The `data-mood` attribute drives CSS; pupils track the cursor. Rendered at 90×90 px (`size` default, kept in sync with `SAGI_SIZE` in `useSagiPosition.ts`, which is the draggable button's real footprint) through a `viewBox` cropped to the artwork's measured bounding box instead of the exporter's padded `0 0 1280 1280` canvas. Path data is never rescaled, so `MAX_PUPIL_SHIFT` stays in the original 1280-unit space. The `transform-origin` values in `sagi.css` do **not**: an origin on an inner SVG element resolves against `transform-box: view-box`, whose 0,0 sits at the `viewBox` min (`253.5 106`), so those are mascot coordinates **minus that offset**. The root `.sagi-avatar` origin is a percentage on purpose — on the outermost `<svg>` a length would be measured against the 68 px CSS box, and the resulting ~9× overshoot turns every mood animation into a whole-avatar lurch. |
-| **`SpeechBubble.tsx`** | Pure presentational speech bubble. |
-| **`SagiPanel.tsx`** | Pure presentational panel: status readout + quick actions + the Ask box. |
-| **`Sagi.tsx`** | Shell component. Mounted once in `client/src/components/Layout.tsx` as a sibling of `UpdateNotifier`. Owns open/closed state, the `⌘B` / `Esc` shortcuts, reduced-motion detection, and navigation. |
-| **`intents.ts`** | Pure local Q&A over the cached status snapshot. Queries that don't match a local intent become a handoff: `Sagi.tsx` calls `POST /api/lanes/ensure` (adopting the "Sagi" lane whose cwd defaults to `$HOME`), then `POST /api/run` to spawn a fresh tmux-backed `claude` session in that lane with the prompt as its `initialPrompt`, then navigates to `/run?laneId=…&autostart=1` so the live run is observable. |
-| **`quips.ts`** | Pure mood → phrase pools. |
-| **`prefs.ts`** | `localStorage`-backed enabled / muted preferences with cross-tab sync. |
-| **`sagi.css`** | Keyframes and per-mood expressions; selected via the `data-mood` attribute. |
+| **`SpeechBubble.tsx`** | Pure presentational speech bubble: the line, the session(s) it is about, and an **Open** button for a single one (`workspaceHref` — its live pane, else its replay, else `/sessions/<id>`; never a resume). |
+| **`SagiPanel.tsx`** | Pure presentational panel: the pet's name (click to rename — `agenthub.pet.names`, synced to the account), a pat button, status readout, a **Needs you** list of errored/waiting sessions by name, Mute and Clear alerts, and the Ask box. |
+| **`PetChat.tsx`** | The pet's chat window (Ask handoff, or **Chat with …** in the panel), styled as a soft accent gradient with chat bubbles. The first message starts a session of the user's default AI tool (`agenthub.defaultTool`; Claude or Codex — any other tool still opens its pane in the workspace) in the "Sagi" workspace's first free tab; replies are read from the session's transcript every 1.5 s, and follow-ups and menu answers (`PaneMenuCard`) go through a `TerminalView` attached off-screen (`submitToRun`), so no new route exists. The chat is kept in `localStorage` (`agenthub.pet.chat`) while its pane lives; an ended pane is never resumed — the next message starts a new session. |
+| **`Sagi.tsx`** | Shell component. A pat (the panel's heart, the Ask box, or stroking the pet — four left/right turns of the pointer over it within 1.2 s) shows hearts and a line ON the pet, so it reads while the panel or chat is open. Mounted once in `client/src/components/Layout.tsx` as a sibling of `UpdateNotifier`. Owns open/closed state, the `⌘B` / `Esc` shortcuts, reduced-motion detection, and navigation. |
+| **`intents.ts`** | Local Q&A over the cached status snapshot, in English and Vietnamese keywords, answering in the UI language and naming the sessions it counts (also: who are you, hello, thanks, pat). Queries that don't match a local intent open `PetChat`; with a default tool it cannot read back, `Sagi.tsx` instead calls `POST /api/lanes/ensure` (adopting the "Sagi" lane whose cwd defaults to `$HOME`), then `POST /api/run` to spawn a fresh tmux-backed `claude` session in that lane with the prompt as its `initialPrompt`, then navigates to `/run?laneId=…&autostart=1` so the live run is observable. |
+| **`quips.ts`** | Mood/pulse → phrase pools, plus greetings and pat lines, read from `settings:sagi.{quips,greet,pat}` so they follow the UI language. |
+| **`prefs.ts`** | `localStorage`-backed enabled / muted / pet / size / nickname preferences with cross-tab sync; `petName` = nickname, else the worn pet's own name, else Sagi. |
+| **`sagi.css`** | Keyframes and per-mood expressions (`data-mood`), plus the one-shot moments (`data-moment`: jump, wave, fail, wait, review) on Sagi's art and an uploaded image. |
 
 ### Touchpoints Outside the Folder
 
@@ -2422,7 +2425,7 @@ Sagi's only contact with the rest of the app is four light, additive touchpoints
 | `client/src/pages/Settings.tsx` | On/off toggle wired to `sagiPrefs` (`localStorage`). |
 | `client/src/pages/Run.tsx` | Consumes `?laneId=` to attach the page to the lane whose run Sagi just spawned. |
 | `server/routes/lanes.js` (`POST /api/lanes/ensure`) | Accepts a missing `cwd` and resolves it to `os.homedir()` so the mascot can adopt a stable "Sagi" lane. |
-| `client/src/i18n/locales/{en,vi}/settings.json` | `sagi.*` strings for the Settings toggle (zh / ko fall back to the hardcoded English defaults). |
+| `client/src/i18n/locales/{en,vi}/settings.json` | Every `sagi.*` string: the Settings toggle, the panel, the bubbles' quips, coalesced counts, greetings and Ask answers. |
 
 ---
 

bin/agenthub.js

@@ -1284,12 +1284,14 @@ async function cmdDoctor() {
   // warning, not a failure: it costs the run console and `lanes shell`, nothing
   // else.
   try {
-    const { available } = await get("/api/run/tmux");
+    const { available, upgrade } = await get("/api/run/tmux");
     console.log(
-      available
-        ? `${c.green("✔")}  tmux  available to the server`
-        : `${c.yellow("!")}  tmux  not on the server's PATH — Start Run and \`agenthub workspace shell\` will fail. ` +
+      !available
+        ? `${c.yellow("!")}  tmux  not on the server's PATH — Start Run and \`agenthub workspace shell\` will fail. ` +
             `Install it (sudo apt install tmux / brew install tmux), then restart the server`
+        : upgrade
+          ? `${c.yellow("!")}  tmux  ${upgrade}`
+          : `${c.green("✔")}  tmux  available to the server`
     );
   } catch {
     console.log(`${c.dim("·")}  tmux  not reported by this server`);
@@ -4232,7 +4234,7 @@ async function cmdCodexAccounts(sub, name, flags) {
   }
   pool.resetQuota();
   table(
-    ["codex account", "kind", "live", "$ 5h", "$ 7d", "quota", "state"],
+    ["codex account", "kind", "live", "$ 5h", "$ 7d", "tok 5h", "tok 7d", "quota", "state"],
     pool
       .poolStatus()
       .map((a) => [
@@ -4241,6 +4243,8 @@ async function cmdCodexAccounts(sub, name, flags) {
         a.livePanes,
         a.spend5h.toFixed(2),
         a.spend7d.toFixed(2),
+        a.tokens5h,
+        a.tokens7d,
         a.quota
           ? a.quota.windows.map((w) => `${w.label} ${Math.round(w.usedPercent)}%`).join(" ")
           : "–",
@@ -4281,7 +4285,7 @@ async function cmdAccounts(sub, positional, flags = {}) {
     await pool.refreshQuotas({ force: true });
     const pct = (w) => (w?.utilization != null ? `${Math.round(w.utilization)}%` : "–");
     table(
-      ["account", "live", "$ 5h", "$ 7d", "quota 5h", "quota wk", "state"],
+      ["account", "live", "$ 5h", "$ 7d", "tok 5h", "tok 7d", "quota 5h", "quota wk", "state"],
       pool
         .poolStatus()
         .map((a) => [
@@ -4289,6 +4293,8 @@ async function cmdAccounts(sub, positional, flags = {}) {
           a.livePanes,
           a.spend5h.toFixed(2),
           a.spend7d.toFixed(2),
+          a.tokens5h,
+          a.tokens7d,
           pct(a.quota?.fiveHour),
           pct(a.quota?.sevenDay),
           a.expired

client/README.md

@@ -52,7 +52,7 @@ The client is a single-page application (SPA) built with modern web technologies
 - **React 18.3** - Component-based UI with hooks and concurrent features
 - **TypeScript 5.7** - Full type safety across components, utilities, and API contracts
 - **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 workspace terminal's font is the same kind of per-browser preference: `agenthub.terminal.font` = `jetbrains|maple|system` (`lib/terminalFont.ts`, default `jetbrains`), picked in Settings → Appearance and read when a terminal opens
+- **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 workspace terminal's font is the same kind of preference: `agenthub.terminal.font` = `jetbrains|maple|system` (`lib/terminalFont.ts`, default `jetbrains`) and `agenthub.terminal.fontSize` = 11|12|13|14|15|16|18|20 px (`lib/fontSize.ts`, default 13), picked in Settings → Appearance; a change fires `agenthub-font-size` on `window`, so an open terminal re-fits at once. Settings → Appearance → **Text size** (`#text-size`) sets `agenthub.ui.fontSize` = 14|16|17|18 (Small/Default/Large/Larger), the ROOT font size in px (`lib/fontSize.ts`; the index.html script applies it before first paint too); Tailwind's sizes are rem and `index.css` re-states every `text-[Npx]` class in rem, so all text scales with it. All of these keys are synced to the account like the theme (`PREF_KEYS` in `lib/userPrefs.ts` and `server/routes/me.js`)
 
   **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.
 

client/index.html

@@ -2,7 +2,8 @@
 <html lang="en" class="dark">
   <head>
     <!-- Apply the saved appearance before first paint (same keys as
-         src/hooks/useTheme.ts, which re-applies and validates on mount). -->
+         src/hooks/useTheme.ts, which re-applies and validates on mount, and
+         src/lib/fontSize.ts). -->
     <script>
       try {
         var m = localStorage.getItem("theme");
@@ -17,6 +18,9 @@
         r.classList.toggle("dark", d);
         r.setAttribute("data-mode", d ? "dark" : "light");
         if (t && t !== "default") r.setAttribute("data-theme", t);
+        // Text size (src/lib/fontSize.ts, UI_FONT_SIZES): the root font size.
+        var f = Number(localStorage.getItem("agenthub.ui.fontSize"));
+        if (f === 14 || f === 17 || f === 18) r.style.fontSize = f + "px";
       } catch (e) {}
     </script>
     <meta charset="UTF-8" />

client/package-lock.json

@@ -1204,9 +1204,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1362,9 +1359,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1379,9 +1373,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1396,9 +1387,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1413,9 +1401,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1430,9 +1415,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1447,9 +1429,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1464,9 +1443,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1481,9 +1457,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1498,9 +1471,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1515,9 +1485,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1532,9 +1499,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1549,9 +1513,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1566,9 +1527,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [

client/src/App.tsx

@@ -64,6 +64,7 @@ import { GlobalTooltip } from "./components/Tooltip";
 import { Toaster } from "./components/Toaster";
 import { ConfirmHost } from "./components/ConfirmHost";
 import { RouteErrorBoundary, reloadOnce } from "./components/RouteErrorBoundary";
+import { usePermissions } from "./components/AuthGate";
 import { NotFound } from "./pages/NotFound";
 import { useWebSocket } from "./hooks/useWebSocket";
 import { useNotifications } from "./hooks/useNotifications";
@@ -87,7 +88,9 @@ const SessionDetail = lazy(() =>
 const SnapshotView = lazy(() =>
   import("./pages/SnapshotView").then((m) => ({ default: m.SnapshotView }))
 );
+const FilesPage = lazy(() => import("./pages/FilesPage").then((m) => ({ default: m.FilesPage })));
 const Users = lazy(() => import("./pages/Users").then((m) => ({ default: m.Users })));
+const Artifacts = lazy(() => import("./pages/Artifacts").then((m) => ({ default: m.Artifacts })));
 
 function PageFallback() {
   const { t } = useTranslation();
@@ -107,6 +110,11 @@ function Page({ children }: { children: ReactNode }) {
   );
 }
 
+/** A page only a shared server needs (the File Explorer): local mode goes home. */
+function ServerOnly({ children }: { children: ReactNode }) {
+  return usePermissions().local ? <Navigate to="/" replace /> : <>{children}</>;
+}
+
 /** Keyed by the id so moving to another session starts from fresh state. */
 function SessionDetailRoute() {
   const { id } = useParams();
@@ -210,6 +218,24 @@ export default function App() {
                 </Page>
               }
             />
+            <Route
+              path="artifacts"
+              element={
+                <Page>
+                  <Artifacts />
+                </Page>
+              }
+            />
+            <Route
+              path="files"
+              element={
+                <ServerOnly>
+                  <Page>
+                    <FilesPage />
+                  </Page>
+                </ServerOnly>
+              }
+            />
             <Route
               path="users"
               element={

client/src/components/AuthGate.tsx

@@ -6,7 +6,8 @@
  * 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`;
+ * previous user's data. `useAuth()` gives the sidebar the user, `logout`, and
+ * `updateUser` (Settings → Account's saved display name shows at once);
  * `usePermissions()` says what that user's role may do, so pages hide the rest.
  * Once an account is known (local mode is one), its own UI preferences are
  * loaded into this browser (`lib/userPrefs.ts`).
@@ -16,6 +17,7 @@
 
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useLayoutEffect,
@@ -30,9 +32,17 @@ import { applySystemTheme } from "../hooks/useTheme";
 import { api, AUTH_REQUIRED_EVENT, type AuthState, type AuthUser } from "../lib/api";
 import { hydrate } from "../lib/userPrefs";
 
-type AuthValue = { state: AuthState; logout: () => Promise<void> };
+type AuthValue = {
+  state: AuthState;
+  logout: () => Promise<void>;
+  updateUser: (patch: Partial<AuthUser>) => void;
+};
 
-const AuthContext = createContext<AuthValue>({ state: { mode: "local" }, logout: async () => {} });
+const AuthContext = createContext<AuthValue>({
+  state: { mode: "local" },
+  logout: async () => {},
+  updateUser: () => {},
+});
 
 /** The current login; `{mode: "local"}` outside server mode (and in tests). */
 export const useAuth = () => useContext(AuthContext);
@@ -53,6 +63,10 @@ export function usePermissions() {
   const isAdmin = local || user?.role === "admin";
   return {
     isAdmin,
+    // Local mode: one person on their own machine — what only serves a
+    // shared server (File Explorer, uploads, AgentHub's own git logins) is
+    // hidden; their desktop and their own git config already do it.
+    local,
     seesAll: local || (!!user && user.role !== "developer"),
     // A developer only ever sees their own rows, so everything shown is theirs.
     canEditLane: (lane?: { owner_id?: number | null } | null) =>
@@ -134,6 +148,15 @@ export function AuthGate({ children }: { children: ReactNode }) {
     if (account) void hydrate();
   }, [account]);
 
+  // Stable, so a page may list it as an effect dependency.
+  const updateUser = useCallback(
+    (patch: Partial<AuthUser>) =>
+      setState((s) =>
+        s && s.mode === "server" && s.user ? { ...s, user: { ...s.user, ...patch } } : s
+      ),
+    []
+  );
+
   if (!state) return null;
   if (state.mode === "server" && !state.user) {
     return <LoginPage onLoggedIn={(user) => setState({ mode: "server", user })} />;
@@ -142,7 +165,9 @@ export function AuthGate({ children }: { children: ReactNode }) {
     await api.auth.logout().catch(() => {});
     setState({ mode: "server", user: null });
   };
-  return <AuthContext.Provider value={{ state, logout }}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={{ state, logout, updateUser }}>{children}</AuthContext.Provider>
+  );
 }
 
 function LoginPage({ onLoggedIn }: { onLoggedIn: (user: AuthUser) => void }) {

client/src/components/PathPickButton.tsx

@@ -12,7 +12,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useState, type Ref } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FolderOpen } from "lucide-react";
 import { api } from "../lib/api";
@@ -23,15 +23,12 @@ export function PathPickButton({
   start,
   onPick,
   showLabel = false,
-  buttonRef,
 }: {
   kind?: "dir" | "file";
   /** The field's current value — the picker opens there. */
   start?: string;
   onPick: (path: string) => void;
   showLabel?: boolean;
-  /** Lets a field beside it open the same picker (a click on an empty path). */
-  buttonRef?: Ref<HTMLButtonElement>;
 }) {
   const { t } = useTranslation(["lanes"]);
   const [busy, setBusy] = useState(false);
@@ -55,7 +52,6 @@ export function PathPickButton({
   return (
     <>
       <button
-        ref={buttonRef}
         type="button"
         onClick={pick}
         disabled={busy}

client/src/components/Sagi/PetChat.tsx

@@ -0,0 +1,541 @@
+/**
+ * @file PetChat.tsx
+ * @description The pet's chat window. A question its Ask box cannot answer
+ * locally opens here instead of leaving the page: the first message starts a
+ * session of the user's DEFAULT AI tool (`agenthub.defaultTool`, Claude or
+ * Codex — the two with a readable transcript) in the "Sagi" workspace, in its
+ * first free tab (`startInFreeTabDetailed`), and the conversation is shown as
+ * chat bubbles read from the session's transcript. Follow-ups are typed into
+ * that session's pane through a terminal attached OFF-SCREEN (`TerminalView`
+ * in a fixed box left of the viewport — `submitToRun` needs a mounted,
+ * attached pane, exactly like the workspace's own Chat view), so nothing new
+ * reaches the server. A menu the CLI asks with (a permission or trust prompt)
+ * is read off that pane and answered with `PaneMenuCard`. The chat is kept in
+ * `localStorage` (`agenthub.pet.chat`) while its pane lives; **New chat**
+ * forgets it (the session stays in the workspace), **Open in workspace**
+ * opens its pane there. Opening never resumes an ended session: once the pane
+ * is gone, the next message starts a new one.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState, type FormEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowLeft, ArrowUp, ExternalLink, Loader2, SquarePen, Wrench, X } from "lucide-react";
+import { api } from "../../lib/api";
+import type { TranscriptMessage } from "../../lib/types";
+import { readDefaultMode, readDefaultTool } from "../../lib/sessionDefaults";
+import {
+  answerRunMenu,
+  chooseRunOption,
+  interruptRun,
+  readRunMenu,
+  submitToRun,
+  type PaneMenu,
+} from "../../lib/panePaste";
+import { isSubmitEnter } from "../../lib/keys";
+import { startInFreeTabDetailed } from "../lanes/startSession";
+import { TerminalView } from "../run/TerminalView";
+import { PaneMenuCard } from "../run/PaneChat";
+import { MarkdownContent } from "../conversation/MarkdownContent";
+
+/** Tools whose session the chat can read back (a transcript AgentHub parses). */
+export const PET_CHAT_TOOLS = new Set(["claude", "codex"]);
+const CHAT_KEY = "agenthub.pet.chat";
+const POLL_MS = 1500;
+const MENU_POLL_MS = 700;
+// A follow-up waits this long for the off-screen pane to attach.
+const SEND_TRIES = 20;
+const SEND_RETRY_MS = 250;
+
+/** The session the chat is talking to. */
+export interface PetChatRef {
+  laneId: number;
+  runId: string;
+  tool: string;
+}
+
+export function readPetChat(): PetChatRef | null {
+  try {
+    const v = JSON.parse(localStorage.getItem(CHAT_KEY) ?? "null") as Partial<PetChatRef> | null;
+    if (
+      v &&
+      typeof v.laneId === "number" &&
+      typeof v.runId === "string" &&
+      typeof v.tool === "string"
+    )
+      return { laneId: v.laneId, runId: v.runId, tool: v.tool };
+  } catch {
+    /* unreadable: no chat */
+  }
+  return null;
+}
+
+function writePetChat(ref: PetChatRef | null) {
+  try {
+    if (ref) localStorage.setItem(CHAT_KEY, JSON.stringify(ref));
+    else localStorage.removeItem(CHAT_KEY);
+  } catch {
+    /* best-effort */
+  }
+}
+
+/** The tool a new chat starts: the user's default, when the chat can show it. */
+export function petChatTool(): string | null {
+  const tool = readDefaultTool() ?? "claude";
+  return PET_CHAT_TOOLS.has(tool) ? tool : null;
+}
+
+type Line =
+  | { key: string; role: "user" | "assistant"; text: string }
+  | { key: string; role: "tools"; names: string[] };
+
+/** A human line's text: Claude Code's own injected lines (`<command-…>`,
+ *  `<system-reminder>`…) are not something the user said. */
+const humanText = (m: TranscriptMessage) =>
+  m.content
+    .filter((c) => c.type === "text" && c.text)
+    .map((c) => c.text!.trim())
+    .filter((t) => t && !t.startsWith("<"))
+    .join("\n\n");
+
+/** The transcript as chat lines: the user's words, the assistant's prose, and
+ *  each run of tool calls between them folded into one chip. */
+export function chatLines(messages: TranscriptMessage[]): Line[] {
+  const out: Line[] = [];
+  messages.forEach((m, i) => {
+    const sender = m.sender ?? m.type;
+    if (sender === "user") {
+      const text = humanText(m);
+      if (text) out.push({ key: `u${i}`, role: "user", text });
+      return;
+    }
+    if (m.type !== "assistant") return;
+    m.content.forEach((c, j) => {
+      if (c.type === "text" && c.text?.trim()) {
+        out.push({ key: `a${i}-${j}`, role: "assistant", text: c.text.trim() });
+      } else if (c.type === "tool_use" && c.name) {
+        const last = out[out.length - 1];
+        if (last?.role === "tools") last.names.push(c.name);
+        else out.push({ key: `t${i}-${j}`, role: "tools", names: [c.name] });
+      }
+    });
+  });
+  return out;
+}
+
+/** Still working: the last line is the user's, or an assistant turn not ended. */
+function isBusy(messages: TranscriptMessage[]): boolean {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const m = messages[i]!;
+    const sender = m.sender ?? m.type;
+    if (m.type === "assistant") return m.stop_reason !== undefined && m.stop_reason !== "end_turn";
+    if (sender === "user" && humanText(m)) return true;
+  }
+  return false;
+}
+
+/** "Read ×2 · Bash" */
+function toolSummary(names: string[]): string {
+  const counts = new Map<string, number>();
+  names.forEach((n) => counts.set(n, (counts.get(n) ?? 0) + 1));
+  return [...counts].map(([n, c]) => (c > 1 ? `${n} ×${c}` : n)).join(" · ");
+}
+
+interface PetChatProps {
+  /** The pet's shown name, for the header and greeting. */
+  name: string;
+  /** A question to send as soon as the chat opens (the Ask box's handoff). */
+  initialPrompt?: string | null;
+  /** Called once the initial prompt has been taken, so a re-render never sends it twice. */
+  onPromptTaken?: () => void;
+  onBack: () => void;
+  onClose: () => void;
+  /** Opens the chat's pane in its workspace. */
+  onOpenWorkspace: (laneId: number, runId: string) => void;
+  /** The thinking mood while a reply is being written. */
+  onBusy?: (busy: boolean) => void;
+}
+
+export function PetChat({
+  name,
+  initialPrompt,
+  onPromptTaken,
+  onBack,
+  onClose,
+  onOpenWorkspace,
+  onBusy,
+}: PetChatProps) {
+  const { t } = useTranslation("settings");
+  const [chat, setChat] = useState<PetChatRef | null>(readPetChat);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<TranscriptMessage[]>([]);
+  // Sent but not in the transcript yet.
+  const [pending, setPending] = useState<string | null>(null);
+  const [starting, setStarting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [draft, setDraft] = useState("");
+  const [menu, setMenu] = useState<PaneMenu | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const remember = (ref: PetChatRef | null) => {
+    writePetChat(ref);
+    setChat(ref);
+    setSessionId(null);
+    setMessages([]);
+    setMenu(null);
+  };
+
+  // A remembered chat whose pane is gone is over: forget it, the next message starts anew.
+  useEffect(() => {
+    if (!chat) return;
+    let live = true;
+    const check = () =>
+      api.run
+        .get(chat.runId)
+        .then((h) => {
+          if (!live) return;
+          if (h.status !== "running") remember(null);
+          else if (h.sessionId) setSessionId(h.sessionId);
+        })
+        .catch(() => live && remember(null));
+    void check();
+    // Codex learns its session only after a while; Claude's is known at start.
+    const timer = window.setInterval(() => {
+      if (!sessionId) void check();
+    }, POLL_MS);
+    return () => {
+      live = false;
+      window.clearInterval(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chat?.runId, sessionId]);
+
+  // The conversation, polled while the window is open.
+  useEffect(() => {
+    if (!sessionId) return;
+    let live = true;
+    const load = () =>
+      api.sessions
+        .transcript(sessionId, { limit: 60 })
+        .then((r) => {
+          if (!live) return;
+          setMessages((prev) =>
+            prev.length === r.messages.length &&
+            JSON.stringify(prev[prev.length - 1]) ===
+              JSON.stringify(r.messages[r.messages.length - 1])
+              ? prev
+              : r.messages
+          );
+        })
+        .catch(() => undefined); // not started yet: the next poll asks again
+    void load();
+    const timer = window.setInterval(load, POLL_MS);
+    return () => {
+      live = false;
+      window.clearInterval(timer);
+    };
+  }, [sessionId]);
+
+  // A menu the CLI shows in the pane (permission, trust, a question).
+  useEffect(() => {
+    if (!chat) return;
+    const read = () =>
+      setMenu((prev) => {
+        const next = readRunMenu(chat.runId);
+        return JSON.stringify(next) === JSON.stringify(prev) ? prev : next;
+      });
+    const timer = window.setInterval(read, MENU_POLL_MS);
+    return () => window.clearInterval(timer);
+  }, [chat]);
+
+  const lines = chatLines(messages);
+  // The pending line shows until the transcript has it.
+  useEffect(() => {
+    if (pending && lines.some((l) => l.role === "user" && l.text === pending.trim()))
+      setPending(null);
+  }, [lines, pending]);
+  const busy = starting || !!pending || isBusy(messages);
+  useEffect(() => onBusy?.(busy), [busy, onBusy]);
+  useEffect(() => () => onBusy?.(false), [onBusy]);
+
+  // Keep the newest in sight.
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [lines.length, pending, busy, menu]);
+
+  const send = useCallback(
+    async (text: string) => {
+      const prompt = text.trim();
+      if (!prompt || starting) return;
+      setError(null);
+      setPending(prompt);
+      if (chat) {
+        // Typed into the attached pane; it may still be attaching.
+        for (let i = 0; i < SEND_TRIES; i++) {
+          if (submitToRun(chat.runId, prompt)) return;
+          await new Promise((r) => setTimeout(r, SEND_RETRY_MS));
+        }
+        setPending(null);
+        setDraft(prompt);
+        setError(t("sagi.chat.notSent"));
+        return;
+      }
+      const tool = petChatTool() ?? "claude";
+      setStarting(true);
+      try {
+        const { lane } = await api.lanes.ensure({ title: "Sagi" });
+        const r = await startInFreeTabDetailed(lane.id, {
+          prompt,
+          ...(tool !== lane.tool ? { tool } : {}),
+          ...(tool === "claude" ? { permissionMode: readDefaultMode() } : {}),
+        });
+        remember({ laneId: r.laneId, runId: r.runId, tool });
+      } catch (err) {
+        setPending(null);
+        setDraft(prompt);
+        setError(
+          t("sagi.startFailed", { error: err instanceof Error ? err.message : String(err) })
+        );
+      } finally {
+        setStarting(false);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [chat, starting, t]
+  );
+
+  // The Ask box's question, sent once.
+  const taken = useRef(false);
+  useEffect(() => {
+    if (!initialPrompt || taken.current) return;
+    taken.current = true;
+    onPromptTaken?.();
+    void send(initialPrompt);
+  }, [initialPrompt, onPromptTaken, send]);
+
+  const submit = (e?: FormEvent) => {
+    e?.preventDefault();
+    if (!draft.trim()) return;
+    const text = draft;
+    setDraft("");
+    void send(text);
+  };
+
+  const toolLabel = chat?.tool ?? petChatTool() ?? "claude";
+  const empty = lines.length === 0 && !pending;
+
+  return (
+    <div
+      className="pet-chat flex h-[30rem] max-h-[calc(100vh-6rem)] w-80 flex-col overflow-hidden rounded-3xl border border-border-light shadow-2xl animate-slide-up"
+      role="dialog"
+      aria-label={t("sagi.chat.label", { name })}
+    >
+      {/* header */}
+      <div className="pet-chat-head flex items-center gap-1 px-2 py-2">
+        <IconButton label={t("sagi.chat.back")} onClick={onBack}>
+          <ArrowLeft size={16} />
+        </IconButton>
+        <div className="min-w-0 flex-1 px-1">
+          <div className="truncate text-sm font-semibold text-fg-primary">{name}</div>
+          <div className="flex items-center gap-1 text-[10px] uppercase tracking-wider text-fg-muted">
+            <span
+              className={`inline-block h-1.5 w-1.5 rounded-full ${
+                busy
+                  ? "animate-pulse bg-status-warning"
+                  : chat
+                    ? "bg-status-success"
+                    : "bg-fg-muted"
+              }`}
+              aria-hidden
+            />
+            {busy ? t("sagi.chat.typing") : toolLabel}
+          </div>
+        </div>
+        {chat && (
+          <IconButton
+            label={t("sagi.chat.openWorkspace")}
+            onClick={() => onOpenWorkspace(chat.laneId, chat.runId)}
+          >
+            <ExternalLink size={15} />
+          </IconButton>
+        )}
+        <IconButton
+          label={t("sagi.chat.new")}
+          onClick={() => remember(null)}
+          disabled={!chat || starting}
+        >
+          <SquarePen size={15} />
+        </IconButton>
+        <IconButton label={t("sagi.chat.close", { name })} onClick={onClose}>
+          <X size={16} />
+        </IconButton>
+      </div>
+
+      {/* conversation */}
+      <div ref={listRef} className="flex-1 space-y-2 overflow-y-auto px-3 py-3">
+        {empty && (
+          <div className="flex h-full flex-col items-center justify-center gap-2 px-4 text-center">
+            <span className="text-3xl" aria-hidden>
+              🐾
+            </span>
+            <p className="text-sm font-medium text-fg-primary">
+              {t("sagi.chat.emptyTitle", { name })}
+            </p>
+            <p className="text-xs text-fg-muted">{t("sagi.chat.emptyHint", { tool: toolLabel })}</p>
+          </div>
+        )}
+        {lines.map((l) =>
+          l.role === "tools" ? (
+            <div key={l.key} className="flex justify-start">
+              <span className="pet-chat-tools inline-flex max-w-[85%] items-center gap-1 truncate rounded-full px-2 py-0.5 text-[10px] text-fg-muted">
+                <Wrench size={10} className="shrink-0" aria-hidden />
+                <span className="truncate">{toolSummary(l.names)}</span>
+              </span>
+            </div>
+          ) : l.role === "user" ? (
+            <div key={l.key} className="flex justify-end">
+              <div className="max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-accent-solid px-3 py-2 text-sm text-white shadow-sm">
+                {l.text}
+              </div>
+            </div>
+          ) : (
+            <div key={l.key} className="flex justify-start">
+              <div className="pet-chat-reply max-w-[90%] break-words rounded-2xl rounded-bl-md px-3 py-2 text-sm text-fg-primary shadow-sm">
+                <MarkdownContent text={l.text} dense prose />
+              </div>
+            </div>
+          )
+        )}
+        {pending && (
+          <div className="flex justify-end">
+            <div className="max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-accent-solid px-3 py-2 text-sm text-white opacity-70 shadow-sm">
+              {pending}
+            </div>
+          </div>
+        )}
+        {busy && !menu && (
+          <div className="flex justify-start" aria-label={t("sagi.chat.typing")}>
+            <div className="pet-chat-reply flex gap-1 rounded-2xl rounded-bl-md px-3 py-3 shadow-sm">
+              <span className="pet-chat-dot" />
+              <span className="pet-chat-dot" />
+              <span className="pet-chat-dot" />
+            </div>
+          </div>
+        )}
+        {starting && (
+          <p className="flex items-center justify-center gap-1.5 text-[11px] text-fg-muted">
+            <Loader2 size={12} className="animate-spin" aria-hidden />
+            {t("sagi.chat.starting", { tool: toolLabel })}
+          </p>
+        )}
+        {chat && !sessionId && !starting && (
+          <p className="text-center text-[11px] text-fg-muted">{t("sagi.chat.notStarted")}</p>
+        )}
+      </div>
+
+      {error && (
+        <p className="mx-3 mb-1 rounded-lg bg-status-danger/10 px-2 py-1 text-[11px] text-status-danger">
+          {error}
+        </p>
+      )}
+
+      {/* prompt, or the question the CLI asks */}
+      <div className="pet-chat-foot px-2.5 py-2.5">
+        {menu && chat ? (
+          <div className="max-h-56 overflow-y-auto">
+            <PaneMenuCard
+              menu={menu}
+              onChoose={(i) => {
+                if (chooseRunOption(chat.runId, menu, i)) setMenu(null);
+                else setError(t("sagi.chat.notSent"));
+              }}
+              onAnswer={(text) => {
+                if (answerRunMenu(chat.runId, menu, text)) setMenu(null);
+                else setError(t("sagi.chat.notSent"));
+              }}
+              onCancel={() => {
+                if (interruptRun(chat.runId)) setMenu(null);
+                else setError(t("sagi.chat.notSent"));
+              }}
+            />
+          </div>
+        ) : (
+          <form onSubmit={submit} className="flex items-end gap-1.5">
+            <textarea
+              rows={1}
+              autoFocus
+              className="max-h-28 min-h-[2.25rem] flex-1 resize-none rounded-2xl border border-border bg-surface-1 px-3.5 py-2 text-sm text-fg-primary placeholder-fg-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/30"
+              placeholder={t("sagi.chat.placeholder", { name })}
+              aria-label={t("sagi.chat.placeholder", { name })}
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (isSubmitEnter(e) && !e.shiftKey) {
+                  e.preventDefault();
+                  submit();
+                } else if (e.key === "Escape") {
+                  // Esc leaves the chat for the panel, not the whole mascot.
+                  e.stopPropagation();
+                  e.nativeEvent.stopImmediatePropagation();
+                  onBack();
+                }
+              }}
+            />
+            <button
+              type="submit"
+              disabled={!draft.trim() || starting}
+              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent-solid text-white shadow-sm transition-opacity hover:opacity-90 disabled:opacity-40"
+              aria-label={t("sagi.panel.send")}
+            >
+              <ArrowUp size={16} />
+            </button>
+          </form>
+        )}
+      </div>
+
+      {/* The chat's pane, attached off-screen: the only way a follow-up or a
+          menu answer reaches it. A real size, so tmux does not shrink the pane. */}
+      {chat && (
+        <div className="pet-chat-term" aria-hidden>
+          <TerminalView
+            runId={chat.runId}
+            wsBaseUrl={window.location.origin.replace(/^http/, "ws")}
+            autoFocus={false}
+            // The pane ended: the conversation stays on screen, the next
+            // message starts a new session.
+            onExit={() => {
+              writePetChat(null);
+              setChat(null);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function IconButton({
+  label,
+  onClick,
+  disabled,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className="rounded-full p-1.5 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      title={label}
+    >
+      {children}
+    </button>
+  );
+}

client/src/components/Sagi/PetSprite.tsx

@@ -8,7 +8,9 @@
  * timings; a moment (waving, jumping, failed, review) plays three times and
  * settles into idle, a condition loops. An `action` (dragged left/right,
  * hovered) plays the run-left/run-right or waving row over the mood's, like
- * Codex's own pet, and a v2 pet at idle holds the gaze pose `gaze` names. An
+ * Codex's own pet; a `moment` (a new session waves, a finish jumps, an error
+ * fails, a wait waits, a new subagent reviews — `useSagiBrain`) plays its row
+ * over the mood's, under the action; a v2 pet at idle holds the gaze pose `gaze` names. An
  * uploaded image is shown still and bobs with the same `data-mood` CSS as
  * Sagi. Reduced motion holds the row's first frame. A sprite that fails to
  * load (deleted from another browser) calls `onBroken`, so the mascot falls
@@ -18,7 +20,7 @@
 
 import { useEffect, useState } from "react";
 import { api } from "../../lib/api";
-import type { Mood } from "./brain";
+import type { Mood, PetMoment } from "./brain";
 
 const CELL = { w: 192, h: 208 };
 const COLS = 8;
@@ -58,12 +60,18 @@ const ROW: Record<Mood, number> = {
 /** What the user is doing to the pet, which outranks its mood. */
 export type PetAction = "run-left" | "run-right" | "wave";
 const ACTION_ROW: Record<PetAction, number> = { "run-right": 1, "run-left": 2, wave: 3 };
+/** A moment's row: wave, jump, failed, waiting, review. It outranks the mood,
+ *  and the user's own action outranks it. */
+const MOMENT_ROW: Record<PetMoment, number> = { wave: 3, jump: 4, fail: 5, wait: 6, review: 8 };
+/** Loops of a row before the sprite rests on its first frame. */
+const SPRITE_LOOPS = 4;
 
 export function PetSprite({
   id,
   kind,
   mood,
   action,
+  moment,
   gaze,
   size,
   reducedMotion,
@@ -73,6 +81,7 @@ export function PetSprite({
   kind: "codex" | "image";
   mood: Mood;
   action?: PetAction | null;
+  moment?: PetMoment | null;
   /** Gaze pose 0–15 (0 = up, clockwise), or none. Only a v2 sheet has them. */
   gaze?: number | null;
   size: number;
@@ -80,8 +89,8 @@ export function PetSprite({
   onBroken: () => void;
 }) {
   const url = api.pets.spriteUrl(id);
-  const row = action ? ACTION_ROW[action] : (ROW[mood] ?? 0);
-  const sleeping = !action && mood === "sleeping";
+  const row = action ? ACTION_ROW[action] : moment ? MOMENT_ROW[moment] : (ROW[mood] ?? 0);
+  const sleeping = !action && !moment && mood === "sleeping";
   // The cell on show, tagged with the row it was played for: a cell left over
   // from the previous row (say column 7 of a run) is never drawn on the next.
   const [cell, setCell] = useState({ of: row, row, col: 0 });
@@ -95,13 +104,17 @@ export function PetSprite({
     const own = play(row, sleeping ? SLEEP_SLOWDOWN : 1);
     let list = MOMENTS.has(row) ? [...own, ...own, ...own] : own;
     let i = 0;
+    let loops = 0;
     let timer = 0;
-    // `i` always indexes `list`: it wraps at its end.
+    // `i` always indexes `list`: it wraps at its end. A few loops, then the
+    // first frame rests — a sprite that never stops re-paints the page several
+    // times a second for as long as it is open; a new mood or action plays again.
     const tick = () => {
       timer = window.setTimeout(() => {
         if (++i === list.length) {
           i = 0;
           if (MOMENTS.has(row)) list = play(0);
+          if (++loops >= SPRITE_LOOPS) return setCell(list[0]!);
         }
         setCell(list[i]!);
         tick();
@@ -132,6 +145,7 @@ export function PetSprite({
         src={url}
         alt=""
         data-mood={mood}
+        data-moment={moment ?? undefined}
         className="sagi-pet-image"
         width={size}
         height={size}
@@ -141,7 +155,8 @@ export function PetSprite({
       />
     );
   }
-  const pose = gaze != null && rows > GAZE_ROW && !action && mood === "idle" ? gaze : null;
+  const pose =
+    gaze != null && rows > GAZE_ROW && !action && !moment && mood === "idle" ? gaze : null;
   const shown =
     pose != null
       ? { row: GAZE_ROW + Math.floor(pose / COLS), col: pose % COLS }

client/src/components/Sagi/Sagi.tsx

@@ -88,8 +88,19 @@ import { useSagiBrain } from "./useSagiBrain";
 import { useSagiPosition } from "./useSagiPosition";
 import { useSagiEnabled } from "./SagiMount";
 import { matchIntent } from "./intents";
-import { sagiPrefs } from "./prefs";
+import { petName, sagiPrefs } from "./prefs";
+import type { SagiSubject } from "./brain";
 import { api } from "../../lib/api";
+import { readDefaultTool } from "../../lib/sessionDefaults";
+import { startInFreeTabDetailed } from "../lanes/startSession";
+import { workspaceHref } from "../SessionRowMenu";
+import { PetChat, petChatTool } from "./PetChat";
+
+// Stroking: this many left/right turns of the pointer over the pet, within
+// STROKE_MS and with no button held, is a pat; then a pause before the next.
+const STROKE_TURNS = 4;
+const STROKE_MS = 1200;
+const STROKE_COOLDOWN_MS = 1500;
 import "./sagi.css";
 
 const FLYOUT_GAP = 10; // px between avatar and flyout
@@ -138,15 +149,21 @@ export function usePrefersReducedMotion(): boolean {
  * changes via ResizeObserver) so a tall panel near a screen edge slides fully
  * into view instead of being cropped.
  */
-/** `front`: above the mascot itself — the pet menu, which may overlap it. */
+/**
+ * `front`: above the mascot itself — the pet menu, which may overlap it.
+ * `beside`: at the mascot's side instead of above it — the chat window, on the
+ * screen side away from the edge it docks to, its bottom level with the pet's.
+ */
 function SagiFlyout({
   anchor,
   children,
   front = false,
+  beside = false,
 }: {
   anchor: Anchor;
   children: ReactNode;
   front?: boolean;
+  beside?: boolean;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const [style, setStyle] = useState<CSSProperties>({ visibility: "hidden" });
@@ -159,6 +176,18 @@ function SagiFlyout({
     const vw = window.innerWidth;
     const vh = window.innerHeight;
 
+    if (beside) {
+      let left =
+        anchor.side === "left"
+          ? anchor.left + anchor.size + FLYOUT_GAP
+          : anchor.left - w - FLYOUT_GAP;
+      left = Math.min(vw - w - VIEWPORT_MARGIN, Math.max(VIEWPORT_MARGIN, left));
+      let top = anchor.top + anchor.size - h;
+      top = Math.min(vh - h - VIEWPORT_MARGIN, Math.max(VIEWPORT_MARGIN, top));
+      setStyle({ left, top, visibility: "visible" });
+      return;
+    }
+
     // Horizontal: hug the avatar's docked edge, then clamp on-screen.
     let left = anchor.side === "left" ? anchor.left : anchor.left + anchor.size - w;
     left = Math.min(vw - w - VIEWPORT_MARGIN, Math.max(VIEWPORT_MARGIN, left));
@@ -171,7 +200,7 @@ function SagiFlyout({
     top = Math.min(vh - h - VIEWPORT_MARGIN, Math.max(VIEWPORT_MARGIN, top));
 
     setStyle({ left, top, visibility: "visible" });
-  }, [anchor.left, anchor.top, anchor.size, anchor.side, anchor.openUp]);
+  }, [anchor.left, anchor.top, anchor.size, anchor.side, anchor.openUp, beside]);
 
   useLayoutEffect(() => {
     place();
@@ -209,8 +238,13 @@ export function Sagi() {
 function SagiBody() {
   const { t } = useTranslation("settings");
   const [pet, setPet] = useState(() => sagiPrefs.getPet());
+  // The name it goes by: the user's nickname, the pet's own, else Sagi.
+  const [name, setName] = useState(() => petName(sagiPrefs.getPet()));
   const [size, setSize] = useState(() => sagiPrefs.getSize());
   const [open, setOpen] = useState(false);
+  // The chat window (PetChat.tsx), and the Ask question it should send.
+  const [chatOpen, setChatOpen] = useState(false);
+  const [chatPrompt, setChatPrompt] = useState<string | null>(null);
   // The right-click pet menu (`PetMenu.tsx`).
   const [menu, setMenu] = useState(false);
   const [hover, setHover] = useState(false);
@@ -226,11 +260,32 @@ function SagiBody() {
     () =>
       sagiPrefs.subscribe(() => {
         setPet(sagiPrefs.getPet());
+        setName(petName(sagiPrefs.getPet()));
         setSize(sagiPrefs.getSize());
       }),
     []
   );
 
+  // A pet worn before names rode along with the choice: look its name up once.
+  const petId = pet.id;
+  const unnamed = "kind" in pet && !pet.name;
+  useEffect(() => {
+    if (!unnamed) return;
+    let live = true;
+    api.pets
+      .list()
+      .then((list) => {
+        const found = list.pets.find((p) => p.id === petId);
+        const cur = sagiPrefs.getPet();
+        if (live && found && cur.id === petId && "kind" in cur)
+          sagiPrefs.setPet({ ...cur, name: found.displayName });
+      })
+      .catch(() => undefined);
+    return () => {
+      live = false;
+    };
+  }, [petId, unnamed]);
+
   // ⌘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(() => {
@@ -241,6 +296,7 @@ function SagiBody() {
         setOpen((v) => !v);
       } else if (e.key === "Escape") {
         setOpen(false);
+        setChatOpen(false);
       }
     };
     window.addEventListener("keydown", onKey);
@@ -281,27 +337,53 @@ function SagiBody() {
     [navigate]
   );
 
+  // A session a bubble or the panel names: its live pane when a dashboard run
+  // holds it, else its workspace's replay, else its analysis page. Opening
+  // never resumes anything.
+  const openSession = useCallback(
+    (s: SagiSubject) => {
+      const go = (runs?: Parameters<typeof workspaceHref>[1]) => {
+        navigate(workspaceHref(s, runs) ?? `/sessions/${encodeURIComponent(s.id)}`);
+        brain.dismissBubble();
+        setOpen(false);
+        setChatOpen(false);
+      };
+      api.run
+        .list()
+        .then((r) => go(r.items))
+        .catch(() => go());
+    },
+    [brain, navigate]
+  );
+
   const onAsk = useCallback(
     (query: string): string | null => {
-      const result = matchIntent(query, brain.status);
-      if (result.kind === "answer") return result.text;
-      // Handoff: ensure the "Sagi" lane exists for this dashboard, spawn a
-      // fresh claude session in it carrying the user's prompt as its first
-      // message, then open that workspace's session view on the new pane.
-      // Fire-and-forget — the panel already clears its composer on null and
-      // closes; errors surface as an answer instead of silently swallowing.
+      const result = matchIntent(query, brain.status, { name, attention: brain.attention });
+      if (result.kind === "answer") {
+        if (result.moment) brain.playMoment(result.moment);
+        return result.text;
+      }
+      // Handoff: a question the pet cannot answer goes to the chat window,
+      // which starts a session of the default AI tool and shows it as chat.
+      if (petChatTool()) {
+        setChatPrompt(result.prompt);
+        setOpen(false);
+        setChatOpen(true);
+        return null;
+      }
+      // A default tool the chat cannot read back (not Claude/Codex): start it
+      // in the "Sagi" workspace and open its pane there, as before.
       const prompt = result.prompt;
       brain.setThinking(true);
       (async () => {
         try {
           const { lane } = await api.lanes.ensure({ title: "Sagi" });
-          const run = await api.run.start({
-            laneId: lane.id,
-            cwd: lane.cwd,
-            initialPrompt: prompt,
-            permissionMode: "acceptEdits",
+          const tool = readDefaultTool();
+          const r = await startInFreeTabDetailed(lane.id, {
+            prompt,
+            ...(tool && tool !== lane.tool ? { tool } : {}),
           });
-          navigate(`/workspace?lane=${lane.id}&run=${encodeURIComponent(run.id)}`);
+          navigate(`/workspace?lane=${r.laneId}&run=${encodeURIComponent(r.runId)}`);
           setOpen(false);
         } catch (err) {
           const msg = err instanceof Error ? err.message : String(err);
@@ -312,9 +394,32 @@ function SagiBody() {
       })();
       return null;
     },
-    [brain, navigate, t]
+    [brain, navigate, t, name]
   );
 
+  // Stroke the pet (move the pointer back and forth over it) to pat it.
+  const stroke = useRef({ dir: 0, x: 0, turns: [] as number[], until: 0 });
+  const onStroke = (e: React.PointerEvent) => {
+    if (e.buttons !== 0 || e.pointerType === "touch") return;
+    const s = stroke.current;
+    const now = performance.now();
+    const dx = e.clientX - s.x;
+    s.x = e.clientX;
+    if (Math.abs(dx) < 2 || now < s.until) return;
+    const dir = Math.sign(dx);
+    if (s.dir && dir !== s.dir) {
+      s.turns = [...s.turns.filter((t0) => now - t0 < STROKE_MS), now];
+      if (s.turns.length >= STROKE_TURNS) {
+        s.turns = [];
+        s.until = now + STROKE_COOLDOWN_MS;
+        brain.pat();
+      }
+    }
+    s.dir = dir;
+  };
+
+  const onBusy = useCallback((b: boolean) => brain.setThinking(b), [brain.setThinking]);
+
   const anchor: Anchor = {
     left: place.left,
     top: place.top,
@@ -331,6 +436,13 @@ function SagiBody() {
       {!place.dragging && open && (
         <SagiFlyout anchor={anchor}>
           <SagiPanel
+            name={name}
+            ownName={"kind" in pet ? pet.name || "Sagi" : "Sagi"}
+            nickname={sagiPrefs.getNickname(pet.id)}
+            onRename={(next) => sagiPrefs.setNickname(pet.id, next)}
+            onPat={brain.pat}
+            attention={brain.attention}
+            onOpenSession={openSession}
             status={brain.status}
             muted={brain.muted}
             onToggleMute={brain.toggleMute}
@@ -342,6 +454,29 @@ function SagiBody() {
         </SagiFlyout>
       )}
 
+      {/* Beside the pet, riding along with it mid-drag too (SagiFlyout follows
+          it 1:1), and kept mounted: unmounting would detach its terminal and
+          lose a half-typed message. */}
+      {chatOpen && (
+        <SagiFlyout anchor={anchor} beside>
+          <PetChat
+            name={name}
+            initialPrompt={chatPrompt}
+            onPromptTaken={() => setChatPrompt(null)}
+            onBack={() => {
+              setChatOpen(false);
+              setOpen(true);
+            }}
+            onClose={() => setChatOpen(false)}
+            onOpenWorkspace={(laneId, runId) => {
+              navigate(`/workspace?lane=${laneId}&run=${encodeURIComponent(runId)}`);
+              setChatOpen(false);
+            }}
+            onBusy={onBusy}
+          />
+        </SagiFlyout>
+      )}
+
       {!place.dragging && menu && (
         <SagiFlyout anchor={anchor} front>
           <PetMenu
@@ -356,9 +491,13 @@ function SagiBody() {
         </SagiFlyout>
       )}
 
-      {!open && !menu && brain.bubble && (
+      {!open && !menu && !chatOpen && brain.bubble && (
         <SagiFlyout anchor={anchor}>
-          <SpeechBubble text={brain.bubble} onDismiss={brain.dismissBubble} />
+          <SpeechBubble
+            bubble={brain.bubble}
+            onDismiss={brain.dismissBubble}
+            onOpen={openSession}
+          />
         </SagiFlyout>
       )}
 
@@ -370,34 +509,47 @@ function SagiBody() {
         onPointerEnter={() => setHover(true)}
         onPointerLeave={() => setHover(false)}
         onPointerDown={place.onPointerDown}
-        onPointerMove={place.onPointerMove}
+        onPointerMove={(e) => {
+          place.onPointerMove(e);
+          onStroke(e);
+        }}
         onPointerUp={place.onPointerUp}
         onKeyDown={place.onKeyDown}
         onClick={() => {
           // A drag just ended - swallow the synthetic click so the panel
           // doesn't toggle when the user only repositioned the avatar.
           if (place.consumeDrag()) return;
-          setOpen((v) => !v);
+          if (chatOpen) setChatOpen(false);
+          else setOpen((v) => !v);
         }}
         // Right-click: the pet menu (hide, size, choose, upload, import).
         onContextMenu={(e) => {
           e.preventDefault();
           setOpen(false);
+          setChatOpen(false);
           setMenu(true);
         }}
-        aria-label={open ? t("sagi.closeAvatar") : t("sagi.open")}
-        aria-expanded={open}
-        title={t("sagi.avatarTitle")}
+        aria-label={open || chatOpen ? t("sagi.closeAvatar", { name }) : t("sagi.open", { name })}
+        aria-expanded={open || chatOpen}
+        title={t("sagi.avatarTitle", { name })}
       >
         {pet.id === "sagi" || !("kind" in pet) ? (
-          <SagiAvatar mood={brain.mood} reducedMotion={reducedMotion} size={size} />
+          <SagiAvatar
+            mood={brain.mood}
+            moment={reducedMotion ? null : brain.moment?.kind}
+            reducedMotion={reducedMotion}
+            size={size}
+          />
         ) : (
           <PetSprite
             id={pet.id}
             kind={pet.kind}
             mood={brain.mood}
             // Dragged → runs that way; hovered → waves (Codex's pet does both).
-            action={place.moving ? `run-${place.moving}` : hover ? "wave" : null}
+            // A moment (a pat's hop) outranks the hover wave, or stroking the
+            // pet would only ever show it waving.
+            action={place.moving ? `run-${place.moving}` : hover && !brain.moment ? "wave" : null}
+            moment={brain.moment?.kind}
             gaze={gaze}
             size={size}
             reducedMotion={reducedMotion}
@@ -405,10 +557,28 @@ function SagiBody() {
             onBroken={() => sagiPrefs.setPet({ id: "sagi" })}
           />
         )}
-        {brain.status.errorCount > 0 && (
+        {brain.reaction && (
+          <span key={brain.reaction.key} className="sagi-reaction" aria-live="polite">
+            <span className="sagi-hearts" aria-hidden>
+              <span>💜</span>
+              <span>💗</span>
+              <span>💜</span>
+            </span>
+            <span className="sagi-reaction-text" data-side={place.side}>
+              {brain.reaction.text}
+            </span>
+          </span>
+        )}
+        {brain.status.errorCount > 0 ? (
           <span className="sagi-error-dot" aria-hidden>
             {brain.status.errorCount > 9 ? "9+" : brain.status.errorCount}
           </span>
+        ) : (
+          brain.status.waitingCount > 0 && (
+            <span className="sagi-error-dot" data-kind="waiting" aria-hidden>
+              {brain.status.waitingCount > 9 ? "9+" : brain.status.waitingCount}
+            </span>
+          )
         )}
       </button>
     </>

client/src/components/Sagi/SagiAvatar.tsx

@@ -37,12 +37,14 @@
  * ============================================================================= */
 
 import { memo, useEffect, useRef } from "react";
-import type { Mood } from "./brain";
+import type { Mood, PetMoment } from "./brain";
 
 interface SagiAvatarProps {
   mood: Mood;
   reducedMotion: boolean;
   size?: number;
+  /** A one-shot reaction (hop, wiggle, flinch…) played over the mood. */
+  moment?: PetMoment | null;
 }
 
 const MAX_PUPIL_SHIFT = 36; // px in the 1280-unit path coordinate space
@@ -88,6 +90,7 @@ export const SagiAvatar = memo(function SagiAvatar({
   mood,
   reducedMotion,
   size = 68,
+  moment = null,
 }: SagiAvatarProps) {
   const rootRef = useRef<SVGSVGElement | null>(null);
   const rafRef = useRef<number>();
@@ -148,6 +151,7 @@ export const SagiAvatar = memo(function SagiAvatar({
       ref={rootRef}
       className="sagi-avatar"
       data-mood={mood}
+      data-moment={moment ?? undefined}
       data-reduced={reducedMotion ? "1" : "0"}
       width={size}
       height={size}

client/src/components/Sagi/SagiPanel.tsx

@@ -50,9 +50,6 @@
 
 import { useState, type FormEvent, type ReactNode } from "react";
 import {
-  Play,
-  Activity,
-  LayoutList,
   Bell,
   BellOff,
   Trash2,
@@ -61,12 +58,29 @@ import {
   AlertTriangle,
   Hourglass,
   Radio,
+  Heart,
+  ChevronRight,
   type LucideIcon,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import type { SagiStatus } from "./brain";
+import { subjectLabel, type AttentionItem, type SagiStatus, type SagiSubject } from "./brain";
+import { PET_NAME_MAX } from "./prefs";
+
+/** How many sessions the "Needs you" list shows before pointing at Sessions. */
+const ATTENTION_SHOWN = 4;
 
 interface SagiPanelProps {
+  /** The name the pet goes by now. */
+  name: string;
+  /** The pet's own name, which an empty nickname falls back to. */
+  ownName: string;
+  /** The user's nickname for the pet, "" when none. */
+  nickname: string;
+  onRename: (name: string) => void;
+  onPat: () => void;
+  /** Errored, then waiting sessions, named. */
+  attention: ReadonlyArray<AttentionItem>;
+  onOpenSession: (s: SagiSubject) => void;
   status: SagiStatus;
   muted: boolean;
   onToggleMute: () => void;
@@ -78,6 +92,13 @@ interface SagiPanelProps {
 }
 
 export function SagiPanel({
+  name,
+  ownName,
+  nickname,
+  onRename,
+  onPat,
+  attention,
+  onOpenSession,
   status,
   muted,
   onToggleMute,
@@ -89,6 +110,13 @@ export function SagiPanel({
   const { t } = useTranslation("settings");
   const [query, setQuery] = useState("");
   const [answer, setAnswer] = useState<string | null>(null);
+  // The name being typed, or null while not renaming.
+  const [renaming, setRenaming] = useState<string | null>(null);
+  const saveName = () => {
+    if (renaming === null) return;
+    onRename(renaming);
+    setRenaming(null);
+  };
 
   const submit = (e: FormEvent) => {
     e.preventDefault();
@@ -101,7 +129,7 @@ export function SagiPanel({
     <div
       className="w-72 overflow-hidden rounded-2xl border border-border-light bg-surface-2/95 shadow-2xl backdrop-blur-md animate-slide-up"
       role="dialog"
-      aria-label={t("sagi.panel.label")}
+      aria-label={t("sagi.panel.label", { name })}
     >
       {/* header */}
       <div className="flex items-center justify-between gap-2 border-b border-border/70 bg-gradient-to-r from-accent/10 to-transparent px-3.5 py-2.5">
@@ -109,7 +137,40 @@ export function SagiPanel({
           <span className="text-base leading-none" aria-hidden>
             🐾
           </span>
-          <span className="text-sm font-semibold text-fg-primary">Sagi</span>
+          {renaming === null ? (
+            <button
+              type="button"
+              className="min-w-0 truncate rounded px-0.5 text-sm font-semibold text-fg-primary hover:bg-surface-4"
+              onClick={() => setRenaming(nickname)}
+              aria-label={t("sagi.panel.rename", { name })}
+              title={t("sagi.panel.rename", { name })}
+            >
+              {name}
+            </button>
+          ) : (
+            <input
+              autoFocus
+              className="w-28 rounded border border-accent bg-surface-1 px-1 py-0.5 text-sm text-fg-primary focus:outline-none"
+              value={renaming}
+              maxLength={PET_NAME_MAX}
+              placeholder={ownName}
+              aria-label={t("sagi.panel.renameLabel")}
+              title={t("sagi.panel.renameHint")}
+              onChange={(e) => setRenaming(e.target.value)}
+              onBlur={saveName}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  saveName();
+                } else if (e.key === "Escape") {
+                  // Esc cancels the rename only, not the whole panel.
+                  e.stopPropagation();
+                  e.nativeEvent.stopImmediatePropagation();
+                  setRenaming(null);
+                }
+              }}
+            />
+          )}
           <span
             className={`ml-0.5 inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${
               status.connected
@@ -126,13 +187,23 @@ export function SagiPanel({
             {status.connected ? t("sagi.panel.live") : t("sagi.panel.offline")}
           </span>
         </div>
-        <button
-          className="rounded-md p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-secondary"
-          onClick={onClose}
-          aria-label={t("sagi.panel.close")}
-        >
-          <X size={15} />
-        </button>
+        <div className="flex shrink-0 items-center">
+          <button
+            className="rounded-md p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-status-danger"
+            onClick={onPat}
+            aria-label={t("sagi.panel.pat", { name })}
+            title={t("sagi.panel.pat", { name })}
+          >
+            <Heart size={15} />
+          </button>
+          <button
+            className="rounded-md p-1 text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-secondary"
+            onClick={onClose}
+            aria-label={t("sagi.panel.close", { name })}
+          >
+            <X size={15} />
+          </button>
+        </div>
       </div>
 
       <div className="p-3">
@@ -158,29 +229,55 @@ export function SagiPanel({
           />
         </div>
 
+        {/* the sessions that need the user, by name */}
+        {attention.length > 0 && (
+          <div className="mb-3">
+            <div className="mb-1 text-[10px] font-medium uppercase tracking-wider text-fg-muted">
+              {t("sagi.panel.attention")}
+            </div>
+            <ul className="space-y-1">
+              {attention.slice(0, ATTENTION_SHOWN).map((item) => (
+                <li key={item.id}>
+                  <button
+                    className="group flex w-full items-center gap-2 rounded-lg bg-surface-1 px-2 py-1.5 text-left text-xs transition-colors hover:bg-surface-4"
+                    onClick={() => onOpenSession(item)}
+                    title={item.cwd ?? item.id}
+                  >
+                    {item.kind === "error" ? (
+                      <AlertTriangle
+                        size={13}
+                        className="shrink-0 text-status-danger"
+                        aria-hidden
+                      />
+                    ) : (
+                      <Hourglass size={13} className="shrink-0 text-status-warning" aria-hidden />
+                    )}
+                    <span className="min-w-0 flex-1 truncate text-fg-secondary group-hover:text-fg-primary">
+                      {subjectLabel(item)}
+                    </span>
+                    <span className="shrink-0 text-[10px] text-fg-muted">
+                      {item.kind === "error"
+                        ? t("sagi.panel.attentionError")
+                        : t("sagi.panel.attentionWaiting")}
+                    </span>
+                    <ChevronRight size={12} className="shrink-0 text-fg-muted" aria-hidden />
+                  </button>
+                </li>
+              ))}
+            </ul>
+            {attention.length > ATTENTION_SHOWN && (
+              <button
+                className="mt-1 text-[11px] text-accent hover:underline"
+                onClick={() => onNavigate("/sessions")}
+              >
+                {t("sagi.panel.attentionMore", { count: attention.length - ATTENTION_SHOWN })}
+              </button>
+            )}
+          </div>
+        )}
+
         {/* quick actions */}
         <div className="mb-3 grid grid-cols-2 gap-1.5">
-          <ActionButton
-            icon={Play}
-            label={t("sagi.panel.runClaude")}
-            onClick={() => onNavigate("/workspace")}
-          />
-          <ActionButton
-            icon={Activity}
-            label={t("sagi.panel.activity")}
-            onClick={() => onNavigate("/activity")}
-          />
-          <ActionButton
-            icon={LayoutList}
-            label={t("sagi.panel.sessions")}
-            onClick={() => onNavigate("/sessions")}
-          />
-          <ActionButton
-            icon={AlertTriangle}
-            label={t("sagi.panel.errored")}
-            disabled={status.errorCount === 0}
-            onClick={() => onNavigate("/sessions")}
-          />
           <ActionButton
             icon={muted ? BellOff : Bell}
             label={muted ? t("sagi.panel.unmute") : t("sagi.panel.mute")}
@@ -198,10 +295,10 @@ export function SagiPanel({
         <form onSubmit={submit} className="flex items-center gap-1.5">
           <input
             className="flex-1 rounded-lg border border-border bg-surface-1 px-2.5 py-1.5 text-xs text-fg-secondary placeholder-fg-muted transition-colors focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/30"
-            placeholder={t("sagi.panel.askPlaceholder")}
+            placeholder={t("sagi.panel.askPlaceholder", { name })}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            aria-label={t("sagi.panel.ask")}
+            aria-label={t("sagi.panel.ask", { name })}
           />
           <button
             type="submit"
@@ -284,7 +381,7 @@ function ActionButton({
 }) {
   return (
     <button
-      className="flex items-center gap-1.5 rounded-lg bg-surface-1 px-2 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+      className="flex w-full items-center gap-1.5 rounded-lg bg-surface-1 px-2 py-1.5 text-xs text-fg-secondary transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
       onClick={onClick}
       disabled={disabled}
     >

client/src/components/Sagi/SpeechBubble.tsx

@@ -1,14 +1,14 @@
 /**
  * @file SpeechBubble.tsx
  * @description Transient speech bubble rendered above the Sagi mascot.
- * Pure presentation — visibility timing and quip selection live in
- * {@link useSagiBrain}; this component only paints the bubble and handles
- * user dismissal.
+ * Pure presentation — visibility timing, coalescing and quip selection live in
+ * {@link useSagiBrain}; this component paints the line, the session(s) it is
+ * about, an Open button when it is about exactly one, and handles dismissal.
  *
  * ## Accessibility
  * Uses `role="status"` with `aria-live="polite"` so screen readers announce
- * new quips without interrupting current speech. Click anywhere on the bubble
- * to dismiss early.
+ * new quips without interrupting current speech. Click the bubble to dismiss
+ * it early; its Open button opens the session instead.
  *
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -52,30 +52,52 @@
  * ----------------------------------------------------------------------------- */
 
 import { useTranslation } from "react-i18next";
+import type { SagiBubble } from "./useSagiBrain";
+import type { SagiSubject } from "./brain";
 
 /** Props for {@link SpeechBubble}. */
 interface SpeechBubbleProps {
-  /** Quip text to display inside the bubble. */
-  text: string;
+  bubble: SagiBubble;
   /** Called when the user clicks to dismiss. */
   onDismiss: () => void;
+  /** Opens the session the bubble is about. */
+  onOpen?: (subject: SagiSubject) => void;
 }
 
 /**
  * Animated speech bubble above Sagi.
  * @param props See {@link SpeechBubbleProps}.
  */
-export function SpeechBubble({ text, onDismiss }: SpeechBubbleProps) {
+export function SpeechBubble({ bubble, onDismiss, onOpen }: SpeechBubbleProps) {
   const { t } = useTranslation("settings");
+  const { text, detail, subject, tone } = bubble;
   return (
     <div
       className="sagi-bubble sagi-bubble-enter"
+      data-tone={tone}
       role="status"
       aria-live="polite"
       onClick={onDismiss}
       title={t("sagi.bubbleDismiss")}
     >
-      {text}
+      <div>{text}</div>
+      {(detail || (subject && onOpen)) && (
+        <div className="sagi-bubble-detail">
+          {detail && <span className="sagi-bubble-subject">{detail}</span>}
+          {subject && onOpen && (
+            <button
+              type="button"
+              className="sagi-bubble-open"
+              onClick={(e) => {
+                e.stopPropagation();
+                onOpen(subject);
+              }}
+            >
+              {t("sagi.bubbleOpen")}
+            </button>
+          )}
+        </div>
+      )}
     </div>
   );
 }

client/src/components/Sagi/__tests__/PetChat.test.ts

@@ -0,0 +1,46 @@
+/**
+ * @file PetChat.test.ts
+ * @description Unit tests for the pet chat's transcript-to-bubbles folding (`chatLines`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect } from "vitest";
+import { chatLines } from "../PetChat";
+import type { TranscriptMessage } from "../../../lib/types";
+
+const msg = (m: Partial<TranscriptMessage>): TranscriptMessage =>
+  ({ type: "user", timestamp: null, content: [], ...m }) as TranscriptMessage;
+
+describe("chatLines", () => {
+  it("keeps the user's words and the assistant's prose, folding tool calls into one chip", () => {
+    const lines = chatLines([
+      msg({ type: "user", sender: "user", content: [{ type: "text", text: "hi" }] }),
+      msg({
+        type: "assistant",
+        content: [
+          { type: "thinking", text: "hmm" },
+          { type: "tool_use", name: "Read" },
+        ],
+      }),
+      msg({ type: "user", sender: "tool", content: [{ type: "tool_result", output: "x" }] }),
+      msg({
+        type: "assistant",
+        content: [
+          { type: "tool_use", name: "Read" },
+          { type: "text", text: "hello!" },
+        ],
+      }),
+    ]);
+    expect(lines.map((l) => (l.role === "tools" ? l.names : l.text))).toEqual([
+      "hi",
+      ["Read", "Read"],
+      "hello!",
+    ]);
+  });
+
+  it("drops Claude Code's own injected lines", () => {
+    const lines = chatLines([
+      msg({ sender: "user", content: [{ type: "text", text: "<command-name>/clear</command-name>" }] }),
+    ]);
+    expect(lines).toEqual([]);
+  });
+});

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

@@ -261,7 +261,7 @@ describe("PetMenu", () => {
     renderMenu();
     fireEvent.click(screen.getByTestId("pet-choose"));
     fireEvent.click(await screen.findByTestId("pet-featured-goku"));
-    await waitFor(() => expect(sagiPrefs.getPet()).toEqual({ id: "cp-goku", kind: "codex" }));
+    await waitFor(() => expect(sagiPrefs.getPet()).toEqual({ id: "cp-goku", kind: "codex", name: "Goku" }));
     expect(api.pets.installFeatured).toHaveBeenCalledWith("goku");
   });
 
@@ -284,7 +284,7 @@ describe("PetMenu", () => {
     });
     fireEvent.change(screen.getByTestId("pet-image-input"), { target: { files: [file] } });
     await waitFor(() =>
-      expect(sagiPrefs.getPet()).toEqual({ id: "p-bbbbbbbbbbbb", kind: "image" })
+      expect(sagiPrefs.getPet()).toEqual({ id: "p-bbbbbbbbbbbb", kind: "image", name: "Dog" })
     );
     expect(api.pets.upload).toHaveBeenCalledWith(file);
   });
@@ -313,11 +313,11 @@ describe("PetSettings", () => {
   it("downloads a featured pet on its first pick, wears an own one, deletes it back to Sagi", async () => {
     render(<PetSettings />);
     fireEvent.click(await screen.findByTestId("pet-card-featured-goku"));
-    await waitFor(() => expect(sagiPrefs.getPet()).toEqual({ id: "cp-goku", kind: "codex" }));
+    await waitFor(() => expect(sagiPrefs.getPet()).toEqual({ id: "cp-goku", kind: "codex", name: "Goku" }));
     expect(api.pets.installFeatured).toHaveBeenCalledWith("goku");
 
     fireEvent.click(screen.getByTestId("pet-card-own-p-aaaaaaaaaaaa"));
-    expect(sagiPrefs.getPet()).toEqual({ id: "p-aaaaaaaaaaaa", kind: "image" });
+    expect(sagiPrefs.getPet()).toEqual({ id: "p-aaaaaaaaaaaa", kind: "image", name: "My cat" });
     fireEvent.click(screen.getByTestId("pet-card-own-p-aaaaaaaaaaaa-delete"));
     answerConfirm(true);
     await waitFor(() => expect(sagiPrefs.getPet()).toEqual({ id: "sagi" }));
@@ -329,7 +329,7 @@ describe("PetSettings", () => {
     const file = new File([new Uint8Array([0x89, 0x50])], "Dog.png", { type: "image/png" });
     fireEvent.change(screen.getByTestId("pet-settings-image-input"), { target: { files: [file] } });
     await waitFor(() =>
-      expect(sagiPrefs.getPet()).toEqual({ id: "p-bbbbbbbbbbbb", kind: "image" })
+      expect(sagiPrefs.getPet()).toEqual({ id: "p-bbbbbbbbbbbb", kind: "image", name: "Dog" })
     );
   });
 

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

@@ -88,6 +88,93 @@ describe("Sagi widget", () => {
     expect(within(btn).getByText("1")).toBeInTheDocument();
   });
 
+  it("names the errored session in its bubble and in the panel", () => {
+    renderSagi();
+    act(() => {
+      eventBus.publish({
+        type: "session_updated",
+        data: { id: "a", status: "error", name: "Fix login", cwd: "/w/app", lane_id: 3 } as Session,
+        timestamp: "t",
+      });
+    });
+    const bubble = screen.getByRole("status");
+    expect(within(bubble).getByText("Fix login")).toBeInTheDocument();
+    expect(within(bubble).getByRole("button", { name: "Open" })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
+    const panel = screen.getByRole("dialog", { name: /sagi companion/i });
+    expect(within(panel).getByText("Needs you")).toBeInTheDocument();
+    expect(within(panel).getByRole("button", { name: /Fix login/ })).toBeInTheDocument();
+  });
+
+  it("stays quiet about a cleared error when that session updates again", () => {
+    renderSagi();
+    act(() => {
+      eventBus.publish(sessionMsg("a", "error"));
+    });
+    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
+    fireEvent.click(screen.getByRole("button", { name: "Clear alerts" }));
+    act(() => {
+      eventBus.publish(sessionMsg("a", "error"));
+    });
+    const btn = screen.getByRole("button", { name: /close sagi/i, expanded: true });
+    expect(within(btn).queryByText("1")).not.toBeInTheDocument();
+    expect(JSON.parse(localStorage.getItem("agenthub.pet.dismissedErrors")!)).toEqual(["a"]);
+  });
+
+  it("renames the pet from the panel header", () => {
+    renderSagi();
+    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
+    fireEvent.click(screen.getByRole("button", { name: /rename sagi/i }));
+    const input = screen.getByLabelText("Pet name");
+    fireEvent.change(input, { target: { value: "Mochi" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.getByRole("dialog", { name: /mochi companion/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/ask mochi/i)).toBeInTheDocument();
+  });
+
+  it("hands a question it cannot answer to the chat window", () => {
+    localStorage.setItem("agenthub.defaultTool", "claude");
+    renderSagi();
+    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
+    const input = screen.getByLabelText(/ask sagi/i);
+    fireEvent.change(input, { target: { value: "write me a haiku" } });
+    fireEvent.submit(input.closest("form")!);
+    const chat = screen.getByRole("dialog", { name: /chat with sagi/i });
+    expect(within(chat).getByText("write me a haiku")).toBeInTheDocument();
+    expect(screen.queryByRole("dialog", { name: /sagi companion/i })).not.toBeInTheDocument();
+  });
+
+  it("has no Chat button — Ask opens the chat — and Back returns to the panel", () => {
+    localStorage.setItem("agenthub.defaultTool", "claude");
+    renderSagi();
+    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
+    expect(screen.queryByRole("button", { name: /chat with sagi/i })).not.toBeInTheDocument();
+    const input = screen.getByLabelText(/ask sagi/i);
+    fireEvent.change(input, { target: { value: "write me a haiku" } });
+    fireEvent.submit(input.closest("form")!);
+    expect(screen.getByRole("dialog", { name: /chat with sagi/i })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Back" }));
+    expect(screen.getByRole("dialog", { name: /sagi companion/i })).toBeInTheDocument();
+  });
+
+  it("a pat shows its reaction on the pet even while the panel is open", () => {
+    renderSagi();
+    fireEvent.click(screen.getByRole("button", { name: /open sagi companion/i }));
+    fireEvent.click(screen.getByRole("button", { name: /pat sagi/i }));
+    const pet = screen.getByRole("button", { name: /close sagi/i, expanded: true });
+    expect(pet.querySelector(".sagi-reaction-text")?.textContent).toBeTruthy();
+  });
+
+  it("stroking the pet back and forth pats it", () => {
+    renderSagi();
+    const pet = screen.getByRole("button", { name: /open sagi companion/i });
+    const xs = [100, 130, 100, 130, 100, 130, 100];
+    act(() => {
+      for (const x of xs) fireEvent.pointerMove(pet, { clientX: x, clientY: 50, buttons: 0 });
+    });
+    expect(pet.querySelector(".sagi-reaction-text")).not.toBeNull();
+  });
+
   it("reflects the live count in the panel status", () => {
     renderSagi();
     act(() => {

client/src/components/Sagi/__tests__/brain.test.ts

@@ -225,6 +225,43 @@ describe("clearErrors", () => {
     expect(statusOf(s).liveCount).toBe(1);
     expect(s.worriedUntil).toBe(0);
   });
+
+  it("keeps a cleared session quiet while it stays errored", () => {
+    let s = initialSagiState(T0);
+    ({ state: s } = reduceSagi(s, sessionMsg("b", "error"), T0));
+    s = clearErrors(s);
+    const again = reduceSagi(s, sessionMsg("b", "error", T0 + 1), T0 + 1);
+    expect(again.pulse).toBeNull();
+    expect(statusOf(again.state).errorCount).toBe(0);
+    expect(again.state.worriedUntil).toBe(0);
+    const ev = reduceSagi(
+      again.state,
+      { type: "new_event", data: { session_id: "b", event_type: "toolError" }, timestamp: "" } as WSMessage,
+      T0 + 2
+    );
+    expect(ev.pulse).toBeNull();
+    expect(seedSessions(s, [{ id: "b", status: "error" }], T0).sessions.b).toBeUndefined();
+  });
+
+  it("alerts again once a cleared session recovers and fails anew", () => {
+    let s = initialSagiState(T0);
+    ({ state: s } = reduceSagi(s, sessionMsg("b", "error"), T0));
+    s = clearErrors(s);
+    ({ state: s } = reduceSagi(s, sessionMsg("b", "active"), T0));
+    expect(s.dismissed).not.toHaveProperty("b");
+    const r = reduceSagi(s, sessionMsg("b", "error"), T0);
+    expect(r.pulse).toBe("error");
+  });
+});
+
+describe("error alerts fire on the transition only", () => {
+  it("does not re-alert on each update of a still-errored session", () => {
+    let s = initialSagiState(T0);
+    ({ state: s } = reduceSagi(s, sessionMsg("a", "error"), T0));
+    const r = reduceSagi(s, sessionMsg("a", "error"), T0 + 10_000);
+    expect(r.pulse).toBeNull();
+    expect(statusOf(r.state).errorCount).toBe(1);
+  });
 });
 
 // Reference the imported constant so it is exercised and tsc-clean.

client/src/components/Sagi/__tests__/intents.test.ts

@@ -75,4 +75,27 @@ describe("matchIntent", () => {
     const r = matchIntent("Refactor my auth module", status());
     expect(r).toEqual({ kind: "handoff", prompt: "Refactor my auth module" });
   });
+
+  it("understands Vietnamese keywords", () => {
+    const r = matchIntent("có lỗi nào không?", status({ errorCount: 2 }));
+    if (r.kind === "answer") expect(r.text).toContain("2 sessions errored");
+    expect(matchIntent("đang chạy gì vậy", status({ liveCount: 1 })).kind).toBe("answer");
+    expect(matchIntent("tình hình sao rồi", status()).kind).toBe("answer");
+  });
+
+  it("names the sessions it reports when it knows them", () => {
+    const r = matchIntent("any errors?", status({ errorCount: 1 }), {
+      attention: [{ id: "a", kind: "error", name: "Fix login", cwd: null, lane_id: null }],
+    });
+    if (r.kind === "answer") expect(r.text).toContain("errored: Fix login");
+  });
+
+  it("introduces itself by the pet's name and reacts to a pat", () => {
+    const who = matchIntent("who are you", status(), { name: "Mochi" });
+    expect(who).toMatchObject({ kind: "answer", moment: "wave" });
+    if (who.kind === "answer") expect(who.text).toContain("Mochi");
+    expect(matchIntent("pat", status())).toMatchObject({ kind: "answer", moment: "jump" });
+    // "pat" inside another word is not a pat.
+    expect(matchIntent("update the path", status()).kind).toBe("handoff");
+  });
 });

client/src/components/Sagi/brain.ts

@@ -137,14 +137,7 @@ import type { WSMessage, Session, Agent, RunStatusPayload, DashboardEvent } from
 
 /** All moods Sagi can express, highest priority first (see `deriveMood`). */
 export type Mood =
-  | "disconnected"
-  | "worried"
-  | "stuck"
-  | "happy"
-  | "thinking"
-  | "watching"
-  | "sleeping"
-  | "idle";
+  "disconnected" | "worried" | "stuck" | "happy" | "thinking" | "watching" | "sleeping" | "idle";
 
 /**
  * A one-shot signal describing what just happened, emitted by `reduceSagi`.
@@ -152,13 +145,21 @@ export type Mood =
  * was irrelevant or non-notable.
  */
 export type SagiPulse =
-  | "session_done"
-  | "session_start"
-  | "subagent_spawn"
-  | "waiting"
-  | "error"
-  | "run_done"
-  | null;
+  "session_done" | "session_start" | "subagent_spawn" | "waiting" | "error" | "run_done" | null;
+
+/** A short animation the pet plays on an event or a pat, over its mood. */
+export type PetMoment = "wave" | "jump" | "fail" | "wait" | "review";
+
+/** Which moment each pulse plays: greet a new session, hop at a finish,
+ *  inspect a new subagent, tap a foot while you are awaited, flinch at an error. */
+export const MOMENT_OF_PULSE: Record<NonNullable<SagiPulse>, PetMoment> = {
+  session_start: "wave",
+  session_done: "jump",
+  run_done: "jump",
+  subagent_spawn: "review",
+  waiting: "wait",
+  error: "fail",
+};
 
 export interface SagiStatus {
   /** Active + waiting sessions (everything not finished/errored). */
@@ -182,6 +183,47 @@ export interface SagiState {
   worriedUntil: number;
   /** True while an Ask request is in flight (panel). */
   thinking: boolean;
+  /** Errored sessions the user cleared ("clear alerts"). Their further
+   *  updates, agent errors and failure events stay silent until the session
+   *  goes active again or ends — otherwise every update of a still-errored
+   *  session re-raised the alert the user had just dismissed. */
+  dismissed: Record<string, true>;
+  /** Name and owning workspace of each tracked session, so a bubble or the
+   *  panel can say WHICH session it means and open it. */
+  info: Record<string, SessionInfo>;
+}
+
+/** What Sagi knows about a session beyond its status. */
+export interface SessionInfo {
+  name: string | null;
+  cwd: string | null;
+  lane_id: number | null;
+}
+
+/** The session a pulse is about, when it is about one. */
+export interface SagiSubject extends SessionInfo {
+  id: string;
+}
+
+/** A session that needs the user: errored, or waiting on their input. */
+export interface AttentionItem extends SagiSubject {
+  kind: "error" | "waiting";
+}
+
+const infoOf = (s: {
+  name?: string | null;
+  cwd?: string | null;
+  lane_id?: number | null;
+}): SessionInfo => ({ name: s.name ?? null, cwd: s.cwd ?? null, lane_id: s.lane_id ?? null });
+
+/** A session's label for a bubble: its name, else its folder, else a short id. */
+export function subjectLabel(s: SagiSubject): string {
+  if (s.name && s.name.trim()) return s.name.trim();
+  const base = s.cwd
+    ?.replace(/[\\/]+$/, "")
+    .split(/[\\/]/)
+    .pop();
+  return base || s.id.slice(0, 8);
 }
 
 // Tunable timing constants (ms).
@@ -211,6 +253,8 @@ export function initialSagiState(now: number): SagiState {
     happyUntil: 0,
     worriedUntil: 0,
     thinking: false,
+    dismissed: {},
+    info: {},
   };
 }
 
@@ -256,16 +300,28 @@ export function reduceSagi(
   state: SagiState,
   msg: WSMessage,
   now: number
-): { state: SagiState; pulse: SagiPulse } {
+): { state: SagiState; pulse: SagiPulse; subject?: SagiSubject } {
+  // The tracked session an agent/event message belongs to, when known.
+  const known = (id: string | undefined): SagiSubject | undefined =>
+    id ? { id, ...(state.info[id] ?? { name: null, cwd: null, lane_id: null }) } : undefined;
   switch (msg.type) {
     case "session_created":
     case "session_updated": {
       const s = msg.data as Session;
       if (!s || !s.id) return { state, pulse: null };
       const sessions = { ...state.sessions };
+      const info = { ...state.info, [s.id]: infoOf(s) };
+      const subject: SagiSubject = { id: s.id, ...info[s.id]! };
+      let dismissed = state.dismissed;
       let pulse: SagiPulse = null;
       let happyUntil = state.happyUntil;
       let worriedUntil = state.worriedUntil;
+      // Anything but a (still) errored status ends a dismissal: a later error
+      // of that session is a new one and must alert again.
+      if (s.status !== "error" && s.id in dismissed) {
+        dismissed = { ...dismissed };
+        delete dismissed[s.id];
+      }
 
       if (s.status === "active") {
         // "waiting" = active session blocked on user input (permission prompt
@@ -280,12 +336,20 @@ export function reduceSagi(
           if (prev === undefined) pulse = "session_start";
         }
       } else if (s.status === "error") {
+        if (s.id in dismissed) {
+          return { state: { ...state, lastActivityAt: now }, pulse: null };
+        }
+        // Alert on the transition INTO error only; a session that stays
+        // errored keeps getting updates and must not re-alert on each one.
+        if (sessions[s.id] !== "error") {
+          worriedUntil = now + WORRIED_MS;
+          pulse = "error";
+        }
         sessions[s.id] = "error";
-        worriedUntil = now + WORRIED_MS;
-        pulse = "error";
       } else if (s.status === "completed" || s.status === "abandoned") {
         const wasTracked = s.id in sessions;
         delete sessions[s.id];
+        delete info[s.id];
         if (s.status === "completed") {
           happyUntil = now + HAPPY_MS;
           if (wasTracked) pulse = "session_done";
@@ -293,31 +357,46 @@ export function reduceSagi(
       }
 
       return {
-        state: { ...state, sessions, happyUntil, worriedUntil, lastActivityAt: now },
+        state: {
+          ...state,
+          sessions,
+          dismissed,
+          info,
+          happyUntil,
+          worriedUntil,
+          lastActivityAt: now,
+        },
         pulse,
+        subject,
       };
     }
 
     case "agent_created": {
       const a = msg.data as Agent;
-      if (a && a.status === "error") {
+      if (a && a.status === "error" && !(a.session_id in state.dismissed)) {
         return {
           state: { ...state, worriedUntil: now + WORRIED_MS, lastActivityAt: now },
           pulse: "error",
+          subject: known(a.session_id),
         };
       }
       // A freshly spawned subagent is worth announcing; the main agent landing
       // is already covered by session_start.
       const pulse: SagiPulse = a && a.type === "subagent" ? "subagent_spawn" : null;
-      return { state: { ...state, lastActivityAt: now }, pulse };
+      return {
+        state: { ...state, lastActivityAt: now },
+        pulse,
+        subject: pulse ? known(a.session_id) : undefined,
+      };
     }
 
     case "agent_updated": {
       const a = msg.data as Agent;
-      if (a && a.status === "error") {
+      if (a && a.status === "error" && !(a.session_id in state.dismissed)) {
         return {
           state: { ...state, worriedUntil: now + WORRIED_MS, lastActivityAt: now },
           pulse: "error",
+          subject: known(a.session_id),
         };
       }
       return { state: { ...state, lastActivityAt: now }, pulse: null };
@@ -325,7 +404,8 @@ export function reduceSagi(
 
     case "new_event": {
       const e = msg.data as DashboardEvent;
-      const isFailure = !!e && FAILURE_EVENT_TYPES.has(e.event_type);
+      const isFailure =
+        !!e && FAILURE_EVENT_TYPES.has(e.event_type) && !(e.session_id in state.dismissed);
       return {
         state: {
           ...state,
@@ -333,6 +413,7 @@ export function reduceSagi(
           worriedUntil: isFailure ? now + WORRIED_MS : state.worriedUntil,
         },
         pulse: isFailure ? "error" : null,
+        subject: isFailure ? known(e.session_id) : undefined,
       };
     }
 
@@ -361,24 +442,60 @@ export function reduceSagi(
  */
 export function seedSessions(
   state: SagiState,
-  rows: ReadonlyArray<{ id: string; status: string; awaiting_input_since?: string | null }>,
+  rows: ReadonlyArray<{
+    id: string;
+    status: string;
+    awaiting_input_since?: string | null;
+    name?: string | null;
+    cwd?: string | null;
+    lane_id?: number | null;
+  }>,
   now: number
 ): SagiState {
   const sessions = { ...state.sessions };
+  const info = { ...state.info };
   for (const r of rows) {
     if (!r || !r.id) continue;
-    if (r.status === "error") sessions[r.id] = "error";
-    else if (r.status === "active") sessions[r.id] = r.awaiting_input_since ? "waiting" : "active";
-    // completed / abandoned: leave untracked.
+    if (r.status === "error") {
+      if (r.id in state.dismissed) continue;
+      sessions[r.id] = "error";
+    } else if (r.status === "active") {
+      sessions[r.id] = r.awaiting_input_since ? "waiting" : "active";
+    } else continue; // completed / abandoned: leave untracked.
+    info[r.id] = infoOf(r);
   }
-  return { ...state, sessions, lastActivityAt: now };
+  return { ...state, sessions, info, lastActivityAt: now };
 }
 
-/** Drop all errored sessions from tracking (used by "clear alerts"). */
+/** Errored sessions first, then the ones waiting on the user — the panel's list. */
+export function attentionOf(state: SagiState): AttentionItem[] {
+  const out: AttentionItem[] = [];
+  for (const kind of ["error", "waiting"] as const) {
+    for (const [id, s] of Object.entries(state.sessions)) {
+      if (s !== kind) continue;
+      out.push({
+        id,
+        kind,
+        ...(state.info[id] ?? { name: null, cwd: null, lane_id: null }),
+      });
+    }
+  }
+  return out;
+}
+
+/** Drop all errored sessions from tracking (used by "clear alerts") and
+ *  remember them as dismissed, so their next update does not bring the alert
+ *  straight back. */
 export function clearErrors(state: SagiState): SagiState {
   const sessions: SagiState["sessions"] = {};
+  const dismissed = { ...state.dismissed };
+  const info = { ...state.info };
   for (const [id, s] of Object.entries(state.sessions)) {
     if (s !== "error") sessions[id] = s;
+    else {
+      dismissed[id] = true;
+      delete info[id];
+    }
   }
-  return { ...state, sessions, worriedUntil: 0 };
+  return { ...state, sessions, dismissed, info, worriedUntil: 0 };
 }

client/src/components/Sagi/intents.ts

@@ -3,7 +3,9 @@
  * @description Sagi's local "Ask" brain. Matches a free-text question against a
  *   small set of intents answerable from cached dashboard status. Anything it
  *   can't answer becomes a handoff to the Run page (spawn a real `claude`).
- *   Pure function - no network, no DOM - so it's fully unit-testable.
+ *   Understands English and Vietnamese keywords, names the sessions it reports
+ *   when it knows them, and answers in the UI language (`settings:sagi.intent`).
+ *   No network, no DOM - so it's fully unit-testable.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -28,6 +30,8 @@
  *
  * ## Public surface
  * - `AskResult` — exported API; see TSDoc on the symbol for behavior.
+ * - `AskContext` — exported API; see TSDoc on the symbol for behavior.
+ * - `statusSummary` — exported API; see TSDoc on the symbol for behavior.
  * - `matchIntent` — exported API; see TSDoc on the symbol for behavior.
  *
  * ## Testing pointers
@@ -54,70 +58,157 @@
  *
  * ----------------------------------------------------------------------------- */
 
-import type { SagiStatus } from "./brain";
+import i18n from "../../i18n";
+import { subjectLabel, type AttentionItem, type PetMoment, type SagiStatus } from "./brain";
+import { pickLine } from "./quips";
 
-export type AskResult = { kind: "answer"; text: string } | { kind: "handoff"; prompt: string };
+export type AskResult =
+  { kind: "answer"; text: string; moment?: PetMoment } | { kind: "handoff"; prompt: string };
 
-const plural = (n: number) => (n === 1 ? "" : "s");
+/** What the answer may mention beyond the counts. */
+export interface AskContext {
+  /** The pet's shown name. */
+  name?: string;
+  /** Errored and waiting sessions, named (`attentionOf`). */
+  attention?: ReadonlyArray<AttentionItem>;
+}
 
-export function matchIntent(query: string, status: SagiStatus): AskResult {
-  const q = query.trim().toLowerCase();
-  if (!q) {
-    return {
-      kind: "answer",
-      text: "ask me about your sessions - what's running, any errors, or a quick status.",
-    };
-  }
+const t = (key: string, vars?: Record<string, unknown>) =>
+  i18n.t(`settings:sagi.intent.${key}`, vars ?? {});
+
+/** ": a, b, c" for up to three named sessions of a kind, "" when none known. */
+function listOf(items: ReadonlyArray<AttentionItem> | undefined, kind: AttentionItem["kind"]) {
+  const names = (items ?? []).filter((i) => i.kind === kind).map(subjectLabel);
+  if (names.length === 0) return "";
+  const shown = names.slice(0, 3).join(", ");
+  return `: ${names.length > 3 ? `${shown}…` : shown}`;
+}
+
+/** "2 sessions live, 1 waiting on you" — the one-line status a greeting carries. */
+export function statusSummary(status: SagiStatus): string {
+  const parts = [i18n.t("settings:sagi.greet.summary", { count: status.liveCount })];
+  if (status.waitingCount > 0)
+    parts.push(i18n.t("settings:sagi.greet.summaryWaiting", { count: status.waitingCount }));
+  if (status.errorCount > 0)
+    parts.push(i18n.t("settings:sagi.greet.summaryErrors", { count: status.errorCount }));
+  return parts.join(", ");
+}
+
+export function matchIntent(query: string, status: SagiStatus, ctx: AskContext = {}): AskResult {
+  const q = query.trim().toLowerCase().normalize("NFC");
+  const name = ctx.name || "Sagi";
+  if (!q) return { kind: "answer", text: t("empty") };
 
   const has = (...words: string[]) => words.some((w) => q.includes(w));
+  // Whole-word match, for short words that hide inside longer ones ("hi" in "this").
+  const word = (...words: string[]) =>
+    words.some((w) => new RegExp(`(^|[^\\p{L}])${w}($|[^\\p{L}])`, "u").test(q));
 
-  if (has("help", "what can you", "what do you do")) {
-    return {
-      kind: "answer",
-      text: 'I watch your sessions. Try "what\'s running", "any errors", or "status". Anything else, I\'ll hand to Claude.',
-    };
+  if (has("help", "what can you", "what do you do", "trợ giúp", "làm được gì", "hướng dẫn")) {
+    return { kind: "answer", text: t("help", { name }) };
+  }
+
+  if (has("who are you", "your name", "bạn là ai", "tên gì", "tên bạn", "là ai")) {
+    return { kind: "answer", text: t("whoami", { name }), moment: "wave" };
+  }
+
+  if (has("thank", "thx", "cảm ơn", "cám ơn") || word("ty", "tks")) {
+    return { kind: "answer", text: pickLine("intent.thanks"), moment: "jump" };
+  }
+
+  if (
+    has("good boy", "good girl", "cute", "ngoan", "dễ thương", "xoa đầu", "vuốt ve", "giỏi quá") ||
+    word("pat")
+  ) {
+    return { kind: "answer", text: pickLine("pat"), moment: "jump" };
   }
 
   // Errors first: "any failed runs" should report errors, not live count.
-  if (has("error", "broke", "broken", "fail", "wrong", "crash")) {
+  if (
+    has("error", "broke", "broken", "fail", "wrong", "crash", "lỗi", "hỏng", "thất bại", "sự cố")
+  ) {
     return {
       kind: "answer",
       text:
         status.errorCount > 0
-          ? `${status.errorCount} session${plural(status.errorCount)} errored - open the panel to jump to them.`
-          : "no errors - all clean 🐾",
+          ? t("errors", { count: status.errorCount, list: listOf(ctx.attention, "error") })
+          : t("errorsNone"),
     };
   }
 
-  if (has("waiting", "stuck", "blocked", "input", "my turn", "paused")) {
+  if (
+    has(
+      "waiting",
+      "stuck",
+      "blocked",
+      "input",
+      "my turn",
+      "paused",
+      "chờ",
+      "đợi",
+      "kẹt",
+      "tới lượt",
+      "đến lượt"
+    )
+  ) {
     return {
       kind: "answer",
       text:
         status.waitingCount > 0
-          ? `${status.waitingCount} session${plural(status.waitingCount)} waiting on you 👀`
-          : "nothing's waiting on you right now 🐾",
+          ? t("waiting", { count: status.waitingCount, list: listOf(ctx.attention, "waiting") })
+          : t("waitingNone"),
     };
   }
 
-  if (has("running", "active", "live", "going on", "happening", "in progress")) {
-    const tail = status.waitingCount > 0 ? ` (${status.waitingCount} waiting on you 👀)` : "";
+  if (
+    has(
+      "running",
+      "active",
+      "live",
+      "going on",
+      "happening",
+      "in progress",
+      "đang chạy",
+      "đang làm",
+      "hoạt động"
+    )
+  ) {
+    const tail = status.waitingCount > 0 ? t("liveTail", { count: status.waitingCount }) : "";
     return {
       kind: "answer",
-      text:
-        status.liveCount > 0
-          ? `${status.liveCount} session${plural(status.liveCount)} live right now 🐾${tail}`
-          : "nothing's running right now - all quiet.",
+      text: status.liveCount > 0 ? t("live", { count: status.liveCount, tail }) : t("liveNone"),
     };
   }
 
-  if (has("status", "summary", "overview", "how are things", "how's it", "how is it")) {
+  if (
+    has(
+      "status",
+      "summary",
+      "overview",
+      "how are things",
+      "how's it",
+      "how is it",
+      "tình hình",
+      "trạng thái",
+      "tổng quan",
+      "thế nào",
+      "sao rồi"
+    )
+  ) {
     return {
       kind: "answer",
-      text: `${status.liveCount} live · ${status.waitingCount} waiting · ${status.errorCount} errored · ${
-        status.connected ? "connected" : "offline"
-      }.`,
+      text: t("status", {
+        live: status.liveCount,
+        waiting: status.waitingCount,
+        errors: status.errorCount,
+        conn: t(status.connected ? "connected" : "offline"),
+      }),
     };
   }
 
+  if (word("hi", "hello", "hey", "yo", "chào", "xin chào", "alo")) {
+    return { kind: "answer", text: t("hello", { summary: statusSummary(status) }), moment: "wave" };
+  }
+
   return { kind: "handoff", prompt: query.trim() };
 }

client/src/components/Sagi/prefs.ts

@@ -56,12 +56,19 @@ const MUTED_KEY = "agent-dashboard-sagi-muted";
 const POS_KEY = "agent-dashboard-sagi-pos";
 const PET_KEY = "agenthub.pet";
 const SIZE_KEY = "agenthub.pet.size";
+const DISMISSED_KEY = "agenthub.pet.dismissedErrors";
+/** Per-pet nicknames the user typed, `{ [petId]: name }`. */
+const NAMES_KEY = "agenthub.pet.names";
+export const PET_NAME_MAX = 40;
+/** Most recent dismissed error sessions kept across reloads. */
+const DISMISSED_MAX = 200;
 /** Sagi's own size, and the slider's range. */
 export const PET_SIZE = { default: 68, min: 48, max: 250 };
 
 /** The pet the mascot wears: Sagi itself, or a custom one (`/api/pets`).
- *  The kind rides along so the mascot renders without a fetch. */
-export type PetChoice = { id: "sagi" } | { id: string; kind: "codex" | "image" };
+ *  The kind (and its display name) ride along so the mascot renders, and
+ *  introduces itself, without a fetch. */
+export type PetChoice = { id: "sagi" } | { id: string; kind: "codex" | "image"; name?: string };
 const SAGI: PetChoice = { id: "sagi" };
 
 function readPet(): PetChoice {
@@ -69,6 +76,7 @@ function readPet(): PetChoice {
     const p = JSON.parse(localStorage.getItem(PET_KEY) ?? "null") as Partial<{
       id: string;
       kind: string;
+      name: string;
     }> | null;
     if (
       p &&
@@ -76,13 +84,34 @@ function readPet(): PetChoice {
       p.id !== "sagi" &&
       (p.kind === "codex" || p.kind === "image")
     )
-      return { id: p.id, kind: p.kind };
+      return typeof p.name === "string" && p.name
+        ? { id: p.id, kind: p.kind, name: p.name.slice(0, PET_NAME_MAX) }
+        : { id: p.id, kind: p.kind };
   } catch {
     /* unreadable: Sagi */
   }
   return SAGI;
 }
 
+function readNames(): Record<string, string> {
+  try {
+    const raw = JSON.parse(localStorage.getItem(NAMES_KEY) ?? "{}") as unknown;
+    if (!raw || typeof raw !== "object" || Array.isArray(raw)) return {};
+    const out: Record<string, string> = {};
+    for (const [id, v] of Object.entries(raw)) if (typeof v === "string" && v) out[id] = v;
+    return out;
+  } catch {
+    return {};
+  }
+}
+
+/** The name the pet goes by: the user's nickname, else the pet's own, else Sagi. */
+export function petName(pet: PetChoice): string {
+  const nick = readNames()[pet.id];
+  if (nick) return nick;
+  return ("name" in pet && pet.name) || "Sagi";
+}
+
 function readSize(): number {
   const n = Number(localStorage.getItem(SIZE_KEY));
   return Number.isFinite(n) && n > 0
@@ -181,6 +210,37 @@ export const sagiPrefs = {
       SIZE_KEY,
       String(Math.round(Math.min(PET_SIZE.max, Math.max(PET_SIZE.min, px))))
     ),
+  /** Name a pet; an empty name gives it back its own. */
+  setNickname: (id: string, name: string) => {
+    const names = readNames();
+    const clean = name.replace(/\s+/g, " ").trim().slice(0, PET_NAME_MAX);
+    if (clean) names[id] = clean;
+    else delete names[id];
+    writeAndNotify(NAMES_KEY, JSON.stringify(names));
+  },
+  /** The user's nickname for a pet, "" when none. */
+  getNickname: (id: string) => readNames()[id] ?? "",
+  /** Errored session ids the user cleared, so a reload keeps them quiet. */
+  getDismissed: (): Record<string, true> => {
+    try {
+      const ids = JSON.parse(localStorage.getItem(DISMISSED_KEY) || "[]");
+      const out: Record<string, true> = {};
+      if (Array.isArray(ids)) for (const id of ids) if (typeof id === "string") out[id] = true;
+      return out;
+    } catch {
+      return {};
+    }
+  },
+  setDismissed: (dismissed: Record<string, true>) => {
+    try {
+      localStorage.setItem(
+        DISMISSED_KEY,
+        JSON.stringify(Object.keys(dismissed).slice(-DISMISSED_MAX))
+      );
+    } catch {
+      // Best-effort, like every pref here; no prefs event — widget-local state.
+    }
+  },
   /** Subscribe to any pref change; returns an unsubscribe fn. */
   subscribe(handler: () => void): () => void {
     const listener = () => handler();

client/src/components/Sagi/quips.ts

@@ -1,8 +1,8 @@
 /**
  * @file quips.ts
- * @description Sagi's personality: pools of short phrases keyed by pulse/mood,
- *   plus a deterministic-by-injection picker. Pure data + a pure function so it
- *   can be unit-tested without randomness leaking in.
+ * @description Sagi's personality: pools of short phrases keyed by pulse/mood
+ *   (and greetings, pat reactions), read from the `settings:sagi.*` i18n arrays
+ *   so they follow the UI language, plus a deterministic-by-injection picker.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -24,10 +24,13 @@
  *
  * ## Internal dependencies
  * - `./brain`
+ * - `../../i18n`
  *
  * ## Public surface
  * - `QuipKey` — exported API; see TSDoc on the symbol for behavior.
  * - `pickQuip` — exported API; see TSDoc on the symbol for behavior.
+ * - `pickLine` — exported API; see TSDoc on the symbol for behavior.
+ * - `greetingKey` — exported API; see TSDoc on the symbol for behavior.
  * - `ALL_QUIP_KEYS` — exported API; see TSDoc on the symbol for behavior.
  *
  * ## Testing pointers
@@ -59,76 +62,60 @@
  *
  * ----------------------------------------------------------------------------- */
 
+import i18n from "../../i18n";
 import type { Mood, SagiPulse } from "./brain";
 
 export type QuipKey = NonNullable<SagiPulse> | Mood;
 
-const QUIPS: Record<QuipKey, string[]> = {
+export const ALL_QUIP_KEYS: QuipKey[] = [
   // Pulses (event-driven, transient bubbles)
-  session_done: [
-    "a session just wrapped up! 🐾",
-    "a session finished - nice work! ✨",
-    "that session's all done 😺",
-    "clean finish on that one 💜",
-  ],
-  session_start: [
-    "a new session started! 👀",
-    "a fresh session just landed 🐾",
-    "ooh, a new session to watch 😻",
-    "something new is cooking 🍲",
-  ],
-  subagent_spawn: [
-    "a subagent just spawned! 🐾",
-    "a little helper joined in 🤝",
-    "a subagent's on the job 🚀",
-    "reinforcements - new subagent! 😺",
-  ],
-  waiting: [
-    "a session needs your input 👀",
-    "a session is waiting on you ⏳",
-    "a session paused for your reply 💬",
-    "your turn - a session's waiting 🐾",
-  ],
-  error: [
-    "uh oh, a session hit an error 😿",
-    "something broke - wanna peek? 🙀",
-    "a hook tripped on something ⚠️",
-    "hiss… an error popped up 💢",
-  ],
-  run_done: [
-    "your run just finished! 🐾",
-    "the run's all wrapped up ✨",
-    "run complete - that's a wrap 😸",
-    "all done with that run 💜",
-  ],
-  // Moods (steady-state flavor, used by the panel / idle bubbles)
-  disconnected: [
-    "lost the connection… 😴",
-    "can't reach the server 📡",
-    "no signal - taking a nap 💤",
-  ],
-  worried: ["that didn't look right 😟", "keeping an eye out 👀", "hmm, something's off 🫣"],
-  stuck: [
-    "a session's been quiet a while… 🤔",
-    "is something stuck? ⏳",
-    "still chewing on it… 😾",
-  ],
-  happy: ["great run! 😻", "love a tidy finish ✨", "purrfect 💜"],
-  thinking: ["hmm, let me look… 🤔", "sniffing around… 🐾", "one sec, checking 🔍"],
-  watching: ["on the prowl 👀", "watching your sessions 😼", "eyes peeled 🐾"],
-  sleeping: ["zzz… 💤", "wake me if something happens 😴", "curled up, all calm 🐈"],
-  idle: ["all quiet 😺", "ready when you are 🐾", "just vibing ✨"],
-};
+  "session_done",
+  "session_start",
+  "subagent_spawn",
+  "waiting",
+  "error",
+  "run_done",
+  // Moods (steady-state flavor)
+  "disconnected",
+  "worried",
+  "stuck",
+  "happy",
+  "thinking",
+  "watching",
+  "sleeping",
+  "idle",
+];
+const KNOWN = new Set<string>(ALL_QUIP_KEYS);
 
 /**
- * Pick a quip for a key. `rand` is injectable for deterministic tests; defaults
- * to Math.random. Returns "" only for an unknown key (never throws).
+ * Pick one line from an i18n string array under `settings:sagi.<path>`.
+ * `rand` is injectable for deterministic tests. Returns "" for a missing or
+ * empty pool (never throws).
  */
-export function pickQuip(key: QuipKey, rand: () => number = Math.random): string {
-  const pool = QUIPS[key];
-  if (!pool || pool.length === 0) return "";
+export function pickLine(
+  path: string,
+  rand: () => number = Math.random,
+  vars?: Record<string, unknown>
+): string {
+  const pool = i18n.t(`settings:sagi.${path}`, { returnObjects: true, ...vars }) as unknown;
+  if (!Array.isArray(pool) || pool.length === 0) return "";
   const i = Math.min(pool.length - 1, Math.max(0, Math.floor(rand() * pool.length)));
-  return pool[i] ?? "";
+  const line = pool[i];
+  return typeof line === "string" ? line : "";
 }
 
-export const ALL_QUIP_KEYS = Object.keys(QUIPS) as QuipKey[];
+/**
+ * Pick a quip for a key, in the UI language. Returns "" only for an unknown
+ * key (never throws).
+ */
+export function pickQuip(key: QuipKey, rand: () => number = Math.random): string {
+  return KNOWN.has(key) ? pickLine(`quips.${key}`, rand) : "";
+}
+
+/** Which greeting pool fits the hour: morning 5–11, afternoon 12–17, evening 18–22, else night. */
+export function greetingKey(hour: number): "morning" | "afternoon" | "evening" | "night" {
+  if (hour >= 5 && hour < 12) return "morning";
+  if (hour >= 12 && hour < 18) return "afternoon";
+  if (hour >= 18 && hour < 23) return "evening";
+  return "night";
+}

client/src/components/Sagi/sagi.css

@@ -1,8 +1,12 @@
 /**
  * sagi.css - animations + mood expressions for the Sagi companion.
  * Colors mirror the app's theme tokens (accent #6366f1/#818cf8, surface scale)
- * with warm pink accents (ears, cheeks, nose) for cuteness. All continuous
- * motion is disabled under [data-reduced="1"] and prefers-reduced-motion.
+ * with warm pink accents (ears, cheeks, nose) for cuteness. No mood animates
+ * forever: each plays a few cycles when the mood begins and then rests — an
+ * infinite animation makes the browser draw a new frame 60 times a second for
+ * as long as the page is open (the drop-shadow filter re-rendered each time),
+ * which made the whole desktop stutter. All motion is disabled under
+ * [data-reduced="1"] and prefers-reduced-motion.
  * Transform origins are the delicate part - see the comments on .sagi-avatar
  * and .sagi-eye-blink for which reference box each one resolves against.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -206,20 +210,20 @@
 
 /* idle: gentle breathing + occasional blink */
 .sagi-avatar[data-mood="idle"] {
-  animation: sagi-breathe 4s ease-in-out infinite;
+  animation: sagi-breathe 4s ease-in-out 0s 3;
 }
 /* Blink lives on the inner group so it never overrides the outer group's
    eye-tracking translate (which would freeze the eyes - see the CSS-blink
    note in SagiAvatar.tsx). */
 .sagi-avatar[data-mood="idle"] .sagi-eye-blink {
-  animation: sagi-blink 5s ease-in-out infinite;
+  animation: sagi-blink 5s ease-in-out 0s 3;
 }
 /* happy: whole-mascot bob + twinkling sparkle */
 .sagi-avatar[data-mood="happy"] {
   animation: sagi-bob 0.5s ease-in-out 0s 4;
 }
 .sagi-avatar[data-mood="happy"] .sagi-sparkle {
-  animation: sagi-sparkle-twinkle 0.9s ease-in-out infinite;
+  animation: sagi-sparkle-twinkle 0.9s ease-in-out 0s 4;
   transform-origin: 797px 274px; /* sparkle centre, mascot 1050,380 */
 }
 /* worried: alarmed shake */
@@ -228,19 +232,97 @@
 }
 /* stuck: slow, drooping breathe (fatigued) */
 .sagi-avatar[data-mood="stuck"] {
-  animation: sagi-droop 2.4s ease-in-out infinite;
+  animation: sagi-droop 2.4s ease-in-out 0s 3;
 }
 /* thinking: rocking head tilt */
 .sagi-avatar[data-mood="thinking"] {
-  animation: sagi-rock 1.8s ease-in-out infinite;
+  animation: sagi-rock 1.8s ease-in-out 0s 4;
 }
 /* watching: attentive sway while a session is live */
 .sagi-avatar[data-mood="watching"] {
-  animation: sagi-sway 3.2s ease-in-out infinite;
+  animation: sagi-sway 3.2s ease-in-out 0s 3;
 }
 /* sleeping: slow breathe, droop */
 .sagi-avatar[data-mood="sleeping"] {
-  animation: sagi-breathe 5s ease-in-out infinite;
+  animation: sagi-breathe 5s ease-in-out 0s 3;
+}
+
+/* ── moments: one-shot reactions to an event or a pat (useSagiBrain), played
+   over the mood for ~2.4 s. Declared after the moods so they win the cascade.
+   Shared by Sagi's own art and an uploaded still image. ── */
+.sagi-avatar[data-moment="jump"],
+.sagi-pet-image[data-moment="jump"] {
+  animation: sagi-hop 0.6s cubic-bezier(0.3, 0, 0.4, 1) 0s 3;
+}
+.sagi-avatar[data-moment="wave"],
+.sagi-pet-image[data-moment="wave"] {
+  animation: sagi-wiggle 0.5s ease-in-out 0s 4;
+}
+.sagi-avatar[data-moment="fail"],
+.sagi-pet-image[data-moment="fail"] {
+  animation: sagi-shake 0.35s ease-in-out 0s 5;
+}
+.sagi-avatar[data-moment="wait"],
+.sagi-pet-image[data-moment="wait"] {
+  animation: sagi-tap 0.4s ease-in-out 0s 5;
+}
+.sagi-avatar[data-moment="review"],
+.sagi-pet-image[data-moment="review"] {
+  animation: sagi-peek 2.2s ease-in-out 0s 1;
+}
+.sagi-avatar[data-moment="jump"] .sagi-sparkle {
+  animation: sagi-sparkle-twinkle 0.9s ease-in-out 0s 4;
+  transform-origin: 797px 274px;
+}
+@keyframes sagi-hop {
+  0%,
+  100% {
+    transform: translateY(0) scale(1, 1);
+  }
+  15% {
+    transform: translateY(0) scale(1.08, 0.92);
+  }
+  45% {
+    transform: translateY(-14%) scale(0.96, 1.05);
+  }
+  75% {
+    transform: translateY(0) scale(1.04, 0.96);
+  }
+}
+@keyframes sagi-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-9deg);
+  }
+  75% {
+    transform: rotate(9deg);
+  }
+}
+@keyframes sagi-tap {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4%);
+  }
+}
+@keyframes sagi-peek {
+  0%,
+  100% {
+    transform: rotate(0deg) translateX(0);
+  }
+  25%,
+  40% {
+    transform: rotate(-7deg) translateX(-4%);
+  }
+  60%,
+  75% {
+    transform: rotate(7deg) translateX(4%);
+  }
 }
 
 /* ── reduced motion: kill all continuous animation ── */
@@ -339,7 +421,15 @@
   align-items: center;
   justify-content: center;
   border: 2px solid #0c0c14;
-  animation: sagi-error-pulse 1.2s ease-in-out infinite;
+  animation: sagi-error-pulse 1.2s ease-in-out 0s 5;
+}
+/* Sessions waiting on the user, when none errored: the same dot, amber. */
+.sagi-error-dot[data-kind="waiting"] {
+  background: #f59e0b;
+  animation: none;
+}
+.sagi-pet-image {
+  transform-origin: 50% 92%;
 }
 .sagi-bubble {
   max-width: 16rem;
@@ -356,6 +446,41 @@
 .sagi-bubble-enter {
   animation: sagi-bubble-in 0.22s ease-out;
 }
+.sagi-bubble[data-tone="error"] {
+  border-color: rgba(239, 68, 68, 0.6);
+}
+.sagi-bubble[data-tone="waiting"] {
+  border-color: rgba(245, 158, 11, 0.6);
+}
+/* The session(s) a bubble is about, and the button that opens it. */
+.sagi-bubble-detail {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: #a8a8c0;
+}
+.sagi-bubble-subject {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sagi-bubble-open {
+  flex-shrink: 0;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  background: rgba(139, 92, 246, 0.2);
+  color: #c4b5fd;
+  font-weight: 500;
+  transition: background 0.15s;
+}
+.sagi-bubble-open:hover {
+  background: rgba(139, 92, 246, 0.35);
+}
 @keyframes sagi-bubble-in {
   from {
     opacity: 0;
@@ -375,7 +500,7 @@
 /* An uploaded still image has no frames of its own: it bobs, faster while an
    agent works and slower asleep. A Codex spritesheet animates by its frames. */
 .sagi-pet-image {
-  animation: sagi-pet-bob 2.6s ease-in-out infinite;
+  animation: sagi-pet-bob 2.6s ease-in-out 0s 3;
   -webkit-user-drag: none;
 }
 .sagi-pet-image[data-mood="thinking"] {
@@ -403,3 +528,165 @@
 .sagi-flyout[data-front="1"] {
   z-index: 42;
 }
+
+/* ════════ the pet's chat window (PetChat.tsx) ════════ */
+
+/* The reference's soft gradient, in the theme's own accent rather than a fixed
+   colour: a tint of the accent at the top fading into the surface, so it
+   reads in every light and dark theme. Replies sit on the plain surface like
+   the reference's white bubbles; the user's own are accent-solid (white text
+   is only ever on accent-solid). */
+.pet-chat {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, rgb(var(--accent)) 22%, rgb(var(--surface-1))) 0%,
+    color-mix(in srgb, rgb(var(--accent)) 9%, rgb(var(--surface-1))) 45%,
+    rgb(var(--surface-1)) 100%
+  );
+}
+.pet-chat-head {
+  border-bottom: 1px solid color-mix(in srgb, rgb(var(--accent)) 18%, transparent);
+}
+.pet-chat-reply {
+  background: rgb(var(--surface-0));
+  border: 1px solid color-mix(in srgb, rgb(var(--accent)) 12%, transparent);
+}
+.pet-chat-tools {
+  background: color-mix(in srgb, rgb(var(--surface-0)) 70%, transparent);
+  border: 1px dashed color-mix(in srgb, rgb(var(--accent)) 25%, transparent);
+}
+.pet-chat-foot {
+  background: rgb(var(--surface-0));
+  border-top: 1px solid rgb(var(--border) / 0.6);
+}
+/* Three bouncing dots while a reply is written. */
+.pet-chat-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  background: rgb(var(--accent));
+  opacity: 0.5;
+  animation: pet-chat-dot 1.2s ease-in-out infinite;
+}
+.pet-chat-dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.pet-chat-dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes pet-chat-dot {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.35;
+  }
+  30% {
+    transform: translateY(-4px);
+    opacity: 0.9;
+  }
+}
+/* The chat's terminal, attached but off-screen. It keeps a real size (so tmux
+   does not shrink the pane to fit it) and a non-zero box (so the paste
+   registry counts it as on screen). */
+.pet-chat-term {
+  position: fixed;
+  left: -10000px;
+  top: 0;
+  width: 760px;
+  height: 460px;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pet-chat-dot {
+    animation: none;
+  }
+}
+
+/* ════════ a pat's reaction, drawn on the pet itself ════════ */
+
+/* Hearts float up from the pet and its line shows beside it, inside the
+   avatar button — so a pat reads even while the panel or the chat is open
+   (the speech bubble hides then). */
+.sagi-reaction {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.sagi-hearts {
+  position: absolute;
+  left: 50%;
+  top: 10%;
+  display: flex;
+  gap: 2px;
+  transform: translateX(-50%);
+  font-size: 14px;
+  line-height: 1;
+}
+.sagi-hearts > span {
+  animation: sagi-heart-up 1.6s ease-out forwards;
+  opacity: 0;
+}
+.sagi-hearts > span:nth-child(2) {
+  animation-delay: 0.15s;
+  font-size: 18px;
+}
+.sagi-hearts > span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+@keyframes sagi-heart-up {
+  0% {
+    opacity: 0;
+    transform: translateY(6px) scale(0.6);
+  }
+  20% {
+    opacity: 1;
+    transform: translateY(-4px) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-34px) scale(0.9);
+  }
+}
+/* The line sits on the side away from the screen edge the pet docks to. */
+.sagi-reaction-text {
+  position: absolute;
+  top: 30%;
+  white-space: nowrap;
+  padding: 0.2rem 0.55rem;
+  border-radius: 9999px;
+  background: rgb(var(--surface-0));
+  border: 1px solid color-mix(in srgb, rgb(var(--accent)) 35%, transparent);
+  color: rgb(var(--fg-primary));
+  font-size: 0.75rem;
+  line-height: 1.1rem;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+  animation: sagi-reaction-in 2.4s ease-out forwards;
+}
+.sagi-reaction-text[data-side="right"] {
+  right: calc(100% + 6px);
+}
+.sagi-reaction-text[data-side="left"] {
+  left: calc(100% + 6px);
+}
+@keyframes sagi-reaction-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  10%,
+  80% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sagi-hearts > span,
+  .sagi-reaction-text {
+    animation: none;
+    opacity: 1;
+  }
+}

client/src/components/Sagi/usePets.ts

@@ -47,7 +47,7 @@ export function usePets() {
     }
   };
 
-  const wear = (p: PetView) => sagiPrefs.setPet({ id: p.id, kind: p.kind });
+  const wear = (p: PetView) => sagiPrefs.setPet({ id: p.id, kind: p.kind, name: p.displayName });
   const install = (featuredId: string) =>
     run(featuredId, async () => {
       wear((await api.pets.installFeatured(featuredId)).pet);

client/src/components/Sagi/useSagiBrain.ts

@@ -2,8 +2,12 @@
  * @file useSagiBrain.ts
  * @description React hook that wires the pure Sagi brain to the live event bus
  *   and to real timers. It is the only unit that subscribes to `eventBus`. It
- *   exposes the derived mood, a status summary, the current speech bubble, and
- *   imperative controls (mute, clear alerts, set thinking) for the UI shell.
+ *   exposes the derived mood, a status summary, the sessions that need the user,
+ *   the current speech bubble (naming the session it is about, and coalescing a
+ *   burst of the same event into one count), the pet's one-shot animation
+ *   "moment", and imperative controls (mute, clear alerts, pat, set thinking)
+ *   for the UI shell. It also greets once per browser session and makes an
+ *   idle pet fidget now and then.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -62,127 +66,303 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { eventBus } from "../../lib/eventBus";
 import { api } from "../../lib/api";
+import i18n from "../../i18n";
 import type { WSMessage } from "../../lib/types";
 import {
   initialSagiState,
   reduceSagi,
   deriveMood,
   statusOf,
+  attentionOf,
   clearErrors,
   seedSessions,
+  subjectLabel,
+  MOMENT_OF_PULSE,
+  type AttentionItem,
   type Mood,
+  type PetMoment,
+  type SagiPulse,
   type SagiState,
   type SagiStatus,
+  type SagiSubject,
 } from "./brain";
-import { pickQuip } from "./quips";
+import { greetingKey, pickLine, pickQuip } from "./quips";
+import { statusSummary } from "./intents";
 import { sagiPrefs } from "./prefs";
 
+/** `next` differs from `prev` only by a lastActivityAt less than a second
+ *  newer — nothing the mascot shows, at the moods' 1 s resolution. */
+function onlyActivityMoved(prev: SagiState, next: SagiState): boolean {
+  if (next === prev) return true;
+  if (next.lastActivityAt - prev.lastActivityAt >= 1000) return false;
+  for (const k of Object.keys(next) as (keyof SagiState)[]) {
+    if (k !== "lastActivityAt" && next[k] !== prev[k]) return false;
+  }
+  return true;
+}
+
 const BUBBLE_MS = 4500;
+// A bubble that names a session stays long enough to click it.
+const SUBJECT_BUBBLE_MS = 7000;
 // Minimum gap between non-error bubbles, so a burst of activity doesn't spam.
 const BUBBLE_THROTTLE_MS = 3000;
+// The same pulse again within this window joins the bubble on show as a count.
+const COALESCE_MS = 8000;
+// How long a moment (wave, hop, flinch…) plays over the mood.
+const MOMENT_MS = 2400;
+// An idle pet fidgets (waves or looks around) once in a while.
+const FIDGET_MIN_MS = 45_000;
+const FIDGET_SPAN_MS = 60_000;
+// Greet once per browser session, shortly after the snapshot lands.
+const GREETED_KEY = "agenthub.pet.greeted";
+const GREET_DELAY_MS = 1200;
+
+/** What the speech bubble shows. */
+export interface SagiBubble {
+  text: string;
+  /** Which session(s) it is about, shown under the text. */
+  detail?: string;
+  /** The one session it is about, which a click opens. */
+  subject?: SagiSubject;
+  /** Errors and waits are drawn with an accent. */
+  tone?: "error" | "waiting";
+}
 
 export interface SagiBrain {
   mood: Mood;
   status: SagiStatus;
-  bubble: string | null;
+  /** Errored, then waiting sessions, named. */
+  attention: AttentionItem[];
+  bubble: SagiBubble | null;
   dismissBubble: () => void;
   /** Imperative bubble setter for one-off messages from the shell (e.g. spawn
    *  errors). Bypasses the throttle because the caller decided this message
    *  must be seen right now. Auto-clears after the standard bubble TTL. */
   setBubble: (text: string) => void;
+  /** The one-shot animation playing now, if any; `key` changes per moment so a
+   *  repeat of the same one restarts it. */
+  moment: { kind: PetMoment; key: number } | null;
+  /** Play a moment by hand (an answer, a pat). */
+  playMoment: (kind: PetMoment) => void;
+  /** Pat the pet: a hop, hearts and a happy line right on the pet — shown
+   *  even while the panel or chat is open, and while muted (it was asked). */
+  pat: () => void;
+  /** The pet's answer to a pat, drawn on the pet itself; `key` restarts it. */
+  reaction: { text: string; key: number } | null;
   muted: boolean;
   toggleMute: () => void;
   clearAlerts: () => void;
   setThinking: (v: boolean) => void;
 }
 
+type Burst = { pulse: NonNullable<SagiPulse>; count: number; subjects: SagiSubject[]; at: number };
+
+function burstBubble(b: Burst): SagiBubble {
+  const tone = b.pulse === "error" ? "error" : b.pulse === "waiting" ? "waiting" : undefined;
+  const one = b.subjects.length === 1 ? b.subjects[0] : undefined;
+  const labels = b.subjects.map(subjectLabel);
+  const detail =
+    labels.length > 2
+      ? i18n.t("settings:sagi.bubbleMore", {
+          list: labels.slice(0, 2).join(", "),
+          count: labels.length - 2,
+        })
+      : labels.join(", ") || undefined;
+  const text =
+    b.count > 1 ? i18n.t(`settings:sagi.notify.${b.pulse}`, { count: b.count }) : pickQuip(b.pulse);
+  return { text, detail, subject: one, tone };
+}
+
 export function useSagiBrain(): SagiBrain {
   const now0 = Date.now();
   // Start optimistically connected (idle, open eyes) so the cursor-tracking
   // eyes are live from the first frame instead of after the WebSocket finishes
   // its initial handshake. onConnection below corrects this if it's truly down.
-  const [state, setState] = useState<SagiState>(() => ({
+  const [state, setStateRaw] = useState<SagiState>(() => ({
     ...initialSagiState(now0),
     connected: true,
+    dismissed: sagiPrefs.getDismissed(),
   }));
+  // The reducer runs OUTSIDE React's updater (which StrictMode calls twice),
+  // so a pulse notifies exactly once; this ref is the state it folds into.
+  const stateRef = useRef(state);
+  const update = useCallback((fn: (prev: SagiState) => SagiState) => {
+    const next = fn(stateRef.current);
+    if (next === stateRef.current) return;
+    stateRef.current = next;
+    setStateRaw(next);
+  }, []);
+
   const [tick, setTick] = useState(now0);
-  const [bubble, setBubbleState] = useState<string | null>(null);
+  const [bubble, setBubbleState] = useState<SagiBubble | null>(null);
+  const [moment, setMoment] = useState<SagiBrain["moment"]>(null);
+  const [reaction, setReaction] = useState<SagiBrain["reaction"]>(null);
+  const reactionTimer = useRef<ReturnType<typeof setTimeout>>();
   const [muted, setMuted] = useState<boolean>(() => sagiPrefs.getMuted());
 
   const bubbleTimer = useRef<ReturnType<typeof setTimeout>>();
+  const momentTimer = useRef<ReturnType<typeof setTimeout>>();
   const lastBubbleAt = useRef(0);
+  const burst = useRef<Burst | null>(null);
+  const momentKey = useRef(0);
   const mutedRef = useRef(muted);
   mutedRef.current = muted;
 
+  // Keep cleared alerts cleared across reloads.
+  useEffect(() => sagiPrefs.setDismissed(state.dismissed), [state.dismissed]);
+
   // Keep mute in sync with the Settings page / other tabs.
   useEffect(() => sagiPrefs.subscribe(() => setMuted(sagiPrefs.getMuted())), []);
 
-  const showBubble = useCallback((text: string, force: boolean) => {
-    if (!text) return;
-    if (mutedRef.current) return;
-    const t = Date.now();
-    if (!force && t - lastBubbleAt.current < BUBBLE_THROTTLE_MS) return;
-    lastBubbleAt.current = t;
+  const putBubble = useCallback((b: SagiBubble, ms = BUBBLE_MS) => {
     clearTimeout(bubbleTimer.current);
-    setBubbleState(text);
-    bubbleTimer.current = setTimeout(() => setBubbleState(null), BUBBLE_MS);
+    setBubbleState(b);
+    bubbleTimer.current = setTimeout(() => {
+      setBubbleState(null);
+      burst.current = null;
+    }, ms);
   }, []);
 
+  const playMoment = useCallback((kind: PetMoment) => {
+    clearTimeout(momentTimer.current);
+    setMoment({ kind, key: ++momentKey.current });
+    momentTimer.current = setTimeout(() => setMoment(null), MOMENT_MS);
+  }, []);
+
+  const notify = useCallback(
+    (pulse: NonNullable<SagiPulse>, subject?: SagiSubject) => {
+      playMoment(MOMENT_OF_PULSE[pulse]);
+      if (mutedRef.current) return;
+      const t = Date.now();
+      const b = burst.current;
+      // The same kind of news again, while its bubble is still up: count it in.
+      if (b && b.pulse === pulse && t - b.at < COALESCE_MS) {
+        b.count++;
+        b.at = t;
+        if (subject && !b.subjects.some((s) => s.id === subject.id)) b.subjects.push(subject);
+        putBubble(burstBubble(b), SUBJECT_BUBBLE_MS);
+        return;
+      }
+      const force = pulse === "error" || pulse === "waiting";
+      if (!force && t - lastBubbleAt.current < BUBBLE_THROTTLE_MS) return;
+      lastBubbleAt.current = t;
+      const next: Burst = { pulse, count: 1, subjects: subject ? [subject] : [], at: t };
+      burst.current = next;
+      putBubble(burstBubble(next), subject ? SUBJECT_BUBBLE_MS : BUBBLE_MS);
+    },
+    [playMoment, putBubble]
+  );
+
   // Seed from the REST snapshot on mount so counts are accurate immediately -
   // the brain otherwise only learns about sessions from WS deltas that arrive
   // after it mounts, showing "0 live" on a fresh load even when sessions exist.
   // Pull a generous page of non-finished sessions; live WS deltas refine it.
+  // Then say hello, once per browser session.
   useEffect(() => {
     let cancelled = false;
+    let greetTimer: ReturnType<typeof setTimeout> | undefined;
+    const greet = () => {
+      try {
+        if (sessionStorage.getItem(GREETED_KEY)) return;
+        sessionStorage.setItem(GREETED_KEY, "1");
+      } catch {
+        return; // No storage: rather silent than a hello on every page.
+      }
+      greetTimer = setTimeout(() => {
+        if (cancelled || mutedRef.current) return;
+        const hello = pickLine(`greet.${greetingKey(new Date().getHours())}`);
+        if (!hello) return;
+        lastBubbleAt.current = Date.now();
+        putBubble({ text: hello, detail: statusSummary(statusOf(stateRef.current)) });
+        playMoment("wave");
+      }, GREET_DELAY_MS);
+    };
     api.sessions
       .list({ status: "active", limit: 100 })
       .then((res) => {
         if (cancelled) return;
-        setState((prev) => seedSessions(prev, res.sessions, Date.now()));
+        update((prev) => seedSessions(prev, res.sessions, Date.now()));
       })
-      .catch(() => undefined);
+      .catch(() => undefined)
+      .finally(greet);
     return () => {
       cancelled = true;
+      clearTimeout(greetTimer);
     };
-  }, []);
+  }, [update, putBubble, playMoment]);
 
   // Subscribe to the live stream and connection status.
   useEffect(() => {
     const unsubMsg = eventBus.subscribe((msg: WSMessage) => {
-      const t = Date.now();
-      setState((prev) => {
-        const { state: next, pulse } = reduceSagi(prev, msg, t);
-        if (pulse) showBubble(pickQuip(pulse), pulse === "error");
-        return next;
-      });
+      const prev = stateRef.current;
+      const { state: next, pulse, subject } = reduceSagi(prev, msg, Date.now());
+      // Most frames only move lastActivityAt, which the moods read at a 1 s
+      // resolution: keep the old state then, so a hook burst (several frames a
+      // second) does not re-render the mascot on every frame.
+      if (!onlyActivityMoved(prev, next)) update(() => next);
+      if (pulse) notify(pulse, subject);
     });
     const unsubConn = eventBus.onConnection((connected) => {
-      setState((prev) => ({ ...prev, connected }));
+      update((prev) => (prev.connected === connected ? prev : { ...prev, connected }));
     });
     return () => {
       unsubMsg();
       unsubConn();
     };
-  }, [showBubble]);
+  }, [update, notify]);
 
   // Advance the clock so timed moods (stuck/sleeping, and exit from
   // happy/worried) re-evaluate without needing a new event.
   useEffect(() => {
     // Hidden tab: no re-render; the first visible tick catches the mood up.
+    // Only a tick that changes the mood re-renders: an idle mascot is not
+    // drawn again every second for nothing.
     const id = setInterval(() => {
-      if (document.visibilityState === "visible") setTick(Date.now());
+      if (document.visibilityState !== "visible") return;
+      const now = Date.now();
+      if (deriveMood(stateRef.current, now) !== moodRef.current) setTick(now);
     }, 1000);
     return () => clearInterval(id);
   }, []);
 
-  useEffect(() => () => clearTimeout(bubbleTimer.current), []);
+  useEffect(
+    () => () => {
+      clearTimeout(bubbleTimer.current);
+      clearTimeout(momentTimer.current);
+      clearTimeout(reactionTimer.current);
+    },
+    []
+  );
 
-  const mood = useMemo(() => deriveMood(state, tick), [state, tick]);
+  // Judged at render time: `tick` only moves when the mood would change, so
+  // it may be old when a frame re-renders.
+  const mood = useMemo(() => deriveMood(state, Math.max(tick, Date.now())), [state, tick]);
   const status = useMemo(() => statusOf(state), [state]);
+  const attention = useMemo(() => attentionOf(state), [state]);
+
+  // An idle pet is not a statue: every minute or so it waves or looks around.
+  const moodRef = useRef(mood);
+  moodRef.current = mood;
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    const schedule = () => {
+      timer = setTimeout(
+        () => {
+          if (moodRef.current === "idle" && document.visibilityState === "visible")
+            playMoment(Math.random() < 0.5 ? "wave" : "review");
+          schedule();
+        },
+        FIDGET_MIN_MS + Math.random() * FIDGET_SPAN_MS
+      );
+    };
+    schedule();
+    return () => clearTimeout(timer);
+  }, [playMoment]);
 
   const dismissBubble = useCallback(() => {
     clearTimeout(bubbleTimer.current);
     setBubbleState(null);
+    burst.current = null;
   }, []);
 
   const toggleMute = useCallback(() => {
@@ -192,29 +372,47 @@ export function useSagiBrain(): SagiBrain {
     if (next) dismissBubble();
   }, [dismissBubble]);
 
-  const clearAlerts = useCallback(() => setState((prev) => clearErrors(prev)), []);
+  const clearAlerts = useCallback(() => {
+    update((prev) => clearErrors(prev));
+    if (burst.current?.pulse === "error") dismissBubble();
+  }, [update, dismissBubble]);
 
   const setThinking = useCallback(
-    (v: boolean) => setState((prev) => (prev.thinking === v ? prev : { ...prev, thinking: v })),
-    []
+    (v: boolean) => update((prev) => (prev.thinking === v ? prev : { ...prev, thinking: v })),
+    [update]
   );
 
   // One-shot bubble: clears itself after BUBBLE_MS. Used by the shell for
   // imperative messages (e.g. spawn errors) that must appear now and fade,
   // bypassing the throttled mood-driven showBubble path.
-  const setBubble = useCallback((text: string) => {
-    if (!text) return;
-    clearTimeout(bubbleTimer.current);
-    setBubbleState(text);
-    bubbleTimer.current = setTimeout(() => setBubbleState(null), BUBBLE_MS);
-  }, []);
+  const setBubble = useCallback(
+    (text: string) => {
+      if (!text) return;
+      burst.current = null;
+      putBubble({ text });
+    },
+    [putBubble]
+  );
+
+  const pat = useCallback(() => {
+    playMoment("jump");
+    update((prev) => ({ ...prev, happyUntil: Date.now() + MOMENT_MS }));
+    clearTimeout(reactionTimer.current);
+    setReaction({ text: pickLine("pat"), key: ++momentKey.current });
+    reactionTimer.current = setTimeout(() => setReaction(null), MOMENT_MS);
+  }, [playMoment, update]);
 
   return {
     mood,
     status,
+    attention,
     bubble,
     dismissBubble,
     setBubble,
+    moment,
+    playMoment,
+    pat,
+    reaction,
     muted,
     toggleMute,
     clearAlerts,

client/src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 /**
  * @file Sidebar.tsx
- * @description The app's left sidebar: the brand, the navigation links and the workspace list, with Settings (on a workspace, that workspace's Settings tab — `lib/settingsLink.ts`) and the collapse/expand button pinned to its foot. It also owns the connection details modal (opened from the status bar), which carries the version and the update check — the sidebar itself has no footer, language or theme controls (those live in Settings → General / Appearance). The collapsed state is kept in localStorage; with none stored it starts collapsed below Tailwind's `lg`. Below `md` the Layout turns it into an off-canvas drawer (`drawer` prop): a modal dialog with the shared `useDialog` focus contract.
+ * @description The app's left sidebar: the brand, the navigation links and the workspace list, with Settings (on a workspace, that workspace's Settings tab — `lib/settingsLink.ts`) and the collapse/expand button pinned to its foot — in server mode with the signed-in account above them (its avatar, name and role, linking to Settings → Account, and Log out). It also owns the connection details modal (opened from the status bar), which carries the version and the update check — the sidebar itself has no footer, language or theme controls (those live in Settings → General / Appearance). The collapsed state is kept in localStorage; with none stored it starts collapsed below Tailwind's `lg`. Below `md` the Layout turns it into an off-canvas drawer (`drawer` prop): a modal dialog with the shared `useDialog` focus contract.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -56,6 +56,8 @@ import { useDialog } from "../hooks/useDialog";
 import {
   LayoutDashboard,
   FolderOpen,
+  HardDrive,
+  Gem,
   BarChart3,
   Settings,
   Wifi,
@@ -77,6 +79,7 @@ import type { LucideIcon } from "lucide-react";
 import { api } from "../lib/api";
 import { BRAND_LOGO, BRAND_MARK } from "../lib/brand";
 import { useAuth, usePermissions } from "./AuthGate";
+import { UserAvatar } from "./users/UserAvatar";
 import { eventBus } from "../lib/eventBus";
 import { WorkspaceTree } from "./WorkspaceTree";
 import type { UpdateStatusPayload, WSMessage } from "../lib/types";
@@ -88,6 +91,10 @@ function isUpdatePayload(x: unknown): x is UpdateStatusPayload {
 const NAV_KEYS = [
   { to: "/", icon: LayoutDashboard, key: "nav:dashboard" },
   { to: "/sessions", icon: FolderOpen, key: "nav:sessions" },
+  // The file manager (FilesPage): browse, upload and download workspace files.
+  { to: "/files", icon: HardDrive, key: "nav:files" },
+  // What agents produced, and (server mode) the Hub others shared (Artifacts.tsx).
+  { to: "/artifacts", icon: Gem, key: "nav:artifacts" },
 ] as const;
 
 const STORAGE_KEY = "sidebar-collapsed";
@@ -194,7 +201,8 @@ export function Sidebar({
     location.pathname.startsWith("/settings") ||
     new URLSearchParams(location.search).has("settings");
   // Checking for (and applying) an update acts on the host: an admin's.
-  const canUpdate = usePermissions().isAdmin;
+  const perms = usePermissions();
+  const canUpdate = perms.isAdmin;
   const asideRef = useRef<HTMLElement>(null);
   const drawerOpen = Boolean(drawer?.open);
   useDialog(drawerOpen, asideRef, drawer?.onClose);
@@ -469,7 +477,8 @@ export function Sidebar({
       <div className="flex-1 min-h-0 relative flex">
         <nav ref={navRef} className="flex-1 overflow-y-auto overflow-x-hidden px-2 py-2 space-y-px">
           {[
-            ...NAV_KEYS,
+            // The file manager serves a shared server; locally it is the desktop's.
+            ...NAV_KEYS.filter((n) => !(perms.local && n.to === "/files")),
             // Server mode: the Users page, for an admin or analyst.
             ...(auth.state.mode === "server" &&
             auth.state.user &&
@@ -532,6 +541,59 @@ export function Sidebar({
         )}
       </div>
 
+      {/* Server mode: who is signed in — avatar, name and role, opening
+          Settings → Account — and Log out. On the rail they stack. */}
+      {auth.state.mode === "server" &&
+        auth.state.user &&
+        (() => {
+          const user = auth.state.user;
+          const name = user.displayName || user.username;
+          const role = t(`users:roles.${user.role}`);
+          const signedIn = t("common:auth.signedInAs", { name, role });
+          return (
+            <div
+              data-testid="sidebar-account"
+              className={`flex flex-shrink-0 gap-1 border-t border-border px-2 py-2 ${
+                collapsed ? "flex-col items-center" : "items-center"
+              }`}
+            >
+              <NavLink
+                to={settingsHref("account", location)}
+                title={signedIn}
+                aria-label={signedIn}
+                className={`flex min-w-0 items-center gap-2 rounded-md transition-colors hover:bg-surface-3 ${
+                  collapsed ? "justify-center p-1" : "flex-1 px-1.5 py-1"
+                }`}
+              >
+                <UserAvatar
+                  name={name}
+                  avatarAt={user.avatarAt}
+                  className={collapsed ? "h-7 w-7 text-[11px]" : "h-8 w-8 text-xs"}
+                />
+                {!collapsed && (
+                  <span className="min-w-0 leading-tight">
+                    <span className="block truncate text-sm font-medium text-fg-primary">
+                      {name}
+                    </span>
+                    <span className="block truncate text-[11px] text-fg-muted">{role}</span>
+                  </span>
+                )}
+              </NavLink>
+              <button
+                type="button"
+                onClick={() => void auth.logout()}
+                title={`${signedIn} — ${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 ? "w-full py-2" : "h-8 w-8 flex-shrink-0"
+                }`}
+              >
+                <LogOut className="h-4 w-4" />
+              </button>
+            </div>
+          );
+        })()}
+
       {/* Settings and the collapse toggle stick to the foot, out of the
           scrolling nav. On the rail they stack. */}
       <div
@@ -547,22 +609,6 @@ 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/UpdateNotifier.tsx

@@ -16,9 +16,13 @@
  * — and the poll waits for the old server to actually go DOWN first, because it
  * keeps answering while the chain installs. New skills/slash commands still
  * need `/reload-plugins` in an already-open Claude Code session; nothing a
- * background process can do for it. Escape, the backdrop and "Not now" close it
- * for this page load only (never while applying); "Skip this version" is the
- * one persistent, per-version dismiss.
+ * background process can do for it. Escape, the backdrop and × close it for
+ * this page load only (never while applying); "Skip this version" is the one
+ * persistent, per-version dismiss. After a failed update, "Auto fix" hands the
+ * error to an AI agent: it opens (or adopts) a workspace on the install folder
+ * and starts a Claude Code session there with the error as its prompt — the
+ * agent fixes whatever blocked the update (a dirty lockfile, a failed build…)
+ * and runs the update command; the dashboard itself still decides nothing.
  *
  * ## State sources
  * - Initial fetch via `api.updates.status()` on mount.
@@ -81,7 +85,18 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Download, X, Copy, Check, RefreshCw, Zap, ExternalLink } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import {
+  Download,
+  X,
+  Copy,
+  Check,
+  RefreshCw,
+  Zap,
+  ExternalLink,
+  SkipForward,
+  Wrench,
+} from "lucide-react";
 import { api } from "../lib/api";
 import { eventBus } from "../lib/eventBus";
 import { copyText } from "../lib/clipboard";
@@ -89,6 +104,7 @@ import { toast } from "../lib/toast";
 import { useDialog } from "../hooks/useDialog";
 import type { UpdateStatusPayload, WSMessage } from "../lib/types";
 import { usePermissions } from "./AuthGate";
+import { startInFreeTab } from "./lanes/startSession";
 
 /** `localStorage` key storing the dismissed release tag (or upstream SHA). */
 const DISMISS_KEY = "agent-monitor-update-dismissed-sha";
@@ -107,6 +123,32 @@ function isAutoApplicable(situation: UpdateStatusPayload["situation"]): boolean
   );
 }
 
+/** The prompt the Auto fix session starts with: what failed, where, and the
+ *  limits that keep the agent from taking down the dashboard it runs under. */
+function autoFixPrompt(status: UpdateStatusPayload, error: string): string {
+  const target = status.latest_release || status.remote_ref || "the newest version";
+  const plugin = status.situation === "plugin_managed";
+  return [
+    `The AgentHub dashboard's self-update to ${target} failed${status.local_version ? ` (running ${status.local_version})` : ""}.`,
+    plugin
+      ? "AgentHub is installed as a Claude Code plugin (the `agenthub` plugin from the `agenthub` marketplace)."
+      : `The install is the git checkout at ${status.repo_root}.`,
+    "",
+    "Error:",
+    "```",
+    error,
+    "```",
+    ...(status.manual_command ? ["", "Update command:", "```", status.manual_command, "```"] : []),
+    "",
+    "Find the cause, fix it, then finish the update" +
+      (plugin
+        ? " (`claude plugin marketplace update agenthub` then `claude plugin update agenthub@agenthub`)."
+        : " by running the update command."),
+    "Rules: never lose the user's work — before discarding any local change, save it (e.g. `git diff > ~/agenthub-update-backup.patch`) and say where; do not stop or restart the AgentHub server, and never kill tmux sessions or the tmux server (this session runs inside one).",
+    "When done, tell me what you changed; I will restart the dashboard from its update prompt.",
+  ].join("\n");
+}
+
 /** Narrow unknown WebSocket payloads to {@link UpdateStatusPayload}. */
 function isUpdatePayload(x: unknown): x is UpdateStatusPayload {
   return typeof x === "object" && x !== null && "git_repo" in x && "update_available" in x;
@@ -130,7 +172,7 @@ export function UpdateNotifier() {
   const { t } = useTranslation("updates");
   const [status, setStatus] = useState<UpdateStatusPayload | null>(null);
   const [dismissedSha, setDismissedSha] = useState<string | null>(loadDismissedSha);
-  // Closed for THIS page load only (Escape, backdrop, ×, "Not now") — the
+  // Closed for THIS page load only (Escape, backdrop, ×) — the
   // persistent per-version dismiss is the explicit "Skip this version".
   const [closedKey, setClosedKey] = useState<string | null>(null);
   const panelRef = useRef<HTMLDivElement>(null);
@@ -139,6 +181,8 @@ export function UpdateNotifier() {
   const [checking, setChecking] = useState(false);
   const [applying, setApplying] = useState(false);
   const [restarting, setRestarting] = useState(false);
+  const [fixing, setFixing] = useState(false);
+  const navigate = useNavigate();
 
   const syncFromPayload = useCallback((s: UpdateStatusPayload) => {
     setStatus(s);
@@ -200,7 +244,7 @@ export function UpdateNotifier() {
     dismissedSha !== dismissKey &&
     closedKey !== dismissKey
   );
-  const busy = applying || restarting;
+  const busy = applying || restarting || fixing;
 
   const closeForNow = useCallback(() => {
     if (busy || !dismissKey) return;
@@ -317,6 +361,29 @@ export function UpdateNotifier() {
     }
   };
 
+  // Hand the failure to an AI agent: a workspace on the install folder (the
+  // home for a plugin install — never a lane inside the plugin cache) and a
+  // Claude Code session there with the error as its first prompt.
+  const autoFix = async () => {
+    if (busy || !status || !error) return;
+    setFixing(true);
+    try {
+      const plugin = status.situation === "plugin_managed";
+      const { lane } = await api.lanes.ensure({
+        ...(plugin || !status.repo_root ? {} : { cwd: status.repo_root, exact: true }),
+        title: t("autoFixWorkspace"),
+        tool: "claude",
+      });
+      const runId = await startInFreeTab(lane.id, { prompt: autoFixPrompt(status, error) });
+      if (dismissKey) setClosedKey(dismissKey);
+      navigate(`/workspace?lane=${lane.id}&run=${encodeURIComponent(runId)}`);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("autoFixError"));
+    } finally {
+      setFixing(false);
+    }
+  };
+
   if (!show || !status) return null;
 
   const refLabel = status.remote_ref || "origin";
@@ -493,16 +560,9 @@ export function UpdateNotifier() {
             title={t("skipVersionHint")}
             className="btn-ghost disabled:opacity-60 disabled:cursor-not-allowed"
           >
+            <SkipForward className="w-3.5 h-3.5" aria-hidden />
             {t("skipVersion")}
           </button>
-          <button
-            type="button"
-            onClick={closeForNow}
-            disabled={busy}
-            className="btn-ghost disabled:opacity-60 disabled:cursor-not-allowed"
-          >
-            {t("later")}
-          </button>
           {status.manual_command ? (
             <button
               type="button"
@@ -514,11 +574,28 @@ export function UpdateNotifier() {
               {copied ? t("copied") : t("copy")}
             </button>
           ) : null}
+          {/* Only after a failed update: an AI agent takes the error from here. */}
+          {error ? (
+            <button
+              type="button"
+              onClick={autoFix}
+              disabled={busy}
+              title={t("autoFixHint")}
+              className="btn-ghost disabled:opacity-60 disabled:cursor-not-allowed"
+            >
+              {fixing ? (
+                <RefreshCw className="w-3.5 h-3.5 animate-spin" aria-hidden />
+              ) : (
+                <Wrench className="w-3.5 h-3.5" aria-hidden />
+              )}
+              {t("autoFix")}
+            </button>
+          ) : null}
           {isAutoApplicable(status.situation) ? (
             <button
               type="button"
               onClick={applyNow}
-              disabled={applying || restarting}
+              disabled={busy}
               className="btn-primary disabled:opacity-70"
             >
               {applying || restarting ? (

client/src/components/WorkspaceTree.tsx

@@ -10,7 +10,8 @@
  * 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`). Server mode, admin or
- * analyst: EVERY workspace, grouped under its owner (`owner_name`; yours
+ * analyst: EVERY workspace, grouped under its owner (their avatar —
+ * `owner_avatar_at`, `UserAvatar` — and `owner_display_name`, else `owner_name`; yours
  * first, no owner last, groups foldable — `collapsedOwners`); one this user
  * may not change (`canEditLane`) is read only — no menu, no new session, and a
  * session opens its analysis page (`/sessions/<id>`), never a pane.
@@ -48,6 +49,7 @@ 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 { UserAvatar } from "./users/UserAvatar";
 
 // The sidebar is in the entry chunk; its two modals (and the run form the add
 // modal pulls in) load when first opened.
@@ -60,6 +62,9 @@ const DestructiveLaneModal = lazy(() =>
 
 /** 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). */
+/** An owner as the tree shows it: their display name, else their username. */
+const ownerShown = (l: Lane): string => l.owner_display_name || l.owner_name || "";
+
 export function selectedFrom(pathname: string, search: string) {
   if (!pathname.startsWith("/workspace")) return { lane: null, run: null, session: null };
   const p = new URLSearchParams(search);
@@ -150,7 +155,7 @@ export function WorkspaceTree() {
     // Stable: each owner's workspaces keep the stored order inside the group.
     const rank = (l: Lane) => (l.owner_id == null ? 2 : l.owner_id === meId ? 0 : 1);
     return [...list].sort(
-      (a, b) => rank(a) - rank(b) || (a.owner_name ?? "").localeCompare(b.owner_name ?? "")
+      (a, b) => rank(a) - rank(b) || ownerShown(a).localeCompare(ownerShown(b))
     );
   }, [lanes, order, toolFilter, grouped, meId]);
   const q = query.trim().toLowerCase();
@@ -338,8 +343,8 @@ export function WorkspaceTree() {
             lane.owner_id == null
               ? t("tree.noOwner")
               : lane.owner_id === meId
-                ? t("tree.ownerYou", { name: lane.owner_name ?? `#${lane.owner_id}` })
-                : (lane.owner_name ?? `#${lane.owner_id}`);
+                ? t("tree.ownerYou", { name: ownerShown(lane) || `#${lane.owner_id}` })
+                : ownerShown(lane) || `#${lane.owner_id}`;
           const groupStart = grouped && (i === 0 || ownerKey(sorted[i - 1] ?? lane) !== owner);
           const groupShown = sorted.some((l) => ownerKey(l) === owner && visible(l));
           return (
@@ -362,12 +367,14 @@ export function WorkspaceTree() {
                   ) : (
                     <ChevronDown className="h-3 w-3 shrink-0" />
                   )}
-                  <span
-                    aria-hidden
-                    className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-surface-4 text-[9px] font-semibold uppercase text-fg-secondary"
-                  >
-                    {lane.owner_name?.[0] ?? "?"}
-                  </span>
+                  <UserAvatar
+                    name={ownerShown(lane) || "?"}
+                    userId={lane.owner_id ?? undefined}
+                    avatarAt={lane.owner_avatar_at}
+                    letters={1}
+                    className="h-4 w-4 text-[9px]"
+                    initialsClassName="bg-surface-4 text-fg-secondary"
+                  />
                   <span className="truncate">{ownerLabel}</span>
                   <span className="ml-auto shrink-0 tabular-nums">
                     {sorted.filter((l) => ownerKey(l) === owner).length}

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

@@ -3,7 +3,7 @@
  * @description Unit tests for the Browse button beside path fields: a chosen
  * path fills the field, a Cancel changes nothing, and a folder or a file falls
  * back to the in-app browser on ANY native-picker failure (a LAN browser's
- * EREMOTE included).
+ * EREMOTE included), where a double-click on a file picks it.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -15,7 +15,7 @@ import { toast } from "../../lib/toast";
 import { PathPickButton } from "../PathPickButton";
 
 vi.mock("../../lib/api", () => ({
-  api: { lanes: { pickPath: vi.fn(), browse: vi.fn() } },
+  api: { lanes: { pickPath: vi.fn(), browse: vi.fn(), list: vi.fn(() => new Promise(() => {})) } },
 }));
 vi.mock("../../lib/toast", () => ({
   toast: { info: vi.fn(), error: vi.fn(), success: vi.fn() },
@@ -55,7 +55,7 @@ describe("PathPickButton", () => {
     expect(toast.error).not.toHaveBeenCalled();
   });
 
-  it("opens the in-app browser for a file too, and a click on a file picks it", async () => {
+  it("opens the in-app browser for a file too, and a double-click on a file picks it", async () => {
     const onPick = vi.fn();
     vi.mocked(api.lanes.pickPath).mockRejectedValue(fail("EREMOTE"));
     vi.mocked(api.lanes.browse).mockResolvedValue({
@@ -68,9 +68,9 @@ describe("PathPickButton", () => {
     render(<PathPickButton kind="file" start="~/.ssh" onPick={onPick} />);
     await userEvent.click(screen.getByRole("button"));
     const dialog = await screen.findByRole("dialog", { name: "Browse for a file" });
-    expect(api.lanes.browse).toHaveBeenCalledWith("~/.ssh", true);
+    expect(api.lanes.browse).toHaveBeenCalledWith("~/.ssh", true, false, false);
     expect(within(dialog).queryByText("Select this folder")).toBeNull();
-    await userEvent.click(await within(dialog).findByText("id_ed25519"));
+    await userEvent.dblClick(await within(dialog).findByText("id_ed25519"));
     expect(onPick).toHaveBeenCalledWith("/home/u/.ssh/id_ed25519");
     expect(screen.queryByRole("dialog")).toBeNull();
     expect(toast.info).not.toHaveBeenCalled();

client/src/components/__tests__/Sidebar.account.test.tsx

@@ -0,0 +1,73 @@
+/**
+ * @file Sidebar.account.test.tsx
+ * @description The sidebar's account row (server mode): the signed-in user's
+ * avatar — or initials without one — name and role, linking to Settings →
+ * Account, beside Sign out; local mode shows no row.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+
+const auth = vi.hoisted(() => ({
+  state: { mode: "local" } as Record<string, unknown>,
+  logout: vi.fn(),
+  updateUser: vi.fn(),
+}));
+vi.mock("../AuthGate", () => ({
+  useAuth: () => auth,
+  usePermissions: () => ({
+    isAdmin: auth.state.mode !== "server",
+    local: auth.state.mode !== "server",
+    seesAll: true,
+    canEditLane: () => true,
+  }),
+}));
+
+import { Sidebar } from "../Sidebar";
+
+const renderSidebar = (collapsed = false) =>
+  render(
+    <MemoryRouter>
+      <Sidebar
+        wsConnected
+        collapsed={collapsed}
+        onToggle={() => {}}
+        connectionOpen={false}
+        onConnectionOpenChange={() => {}}
+      />
+    </MemoryRouter>
+  );
+
+describe("Sidebar account row", () => {
+  it("shows the avatar, name and role, linking to Settings → Account", () => {
+    auth.state = {
+      mode: "server",
+      user: { id: 2, username: "mia", role: "developer", displayName: "Mia Tran", avatarAt: "t1" },
+    };
+    renderSidebar();
+    const row = screen.getByTestId("sidebar-account");
+    expect(row.textContent).toContain("Mia Tran");
+    expect(row.textContent).toContain("Developer");
+    expect(within(row).getByTestId("user-avatar-img").getAttribute("src")).toBe(
+      "/api/me/avatar?v=t1"
+    );
+    expect(within(row).getAllByRole("link")[0]?.getAttribute("href")).toBe("/settings/account");
+    expect(within(row).getByRole("button", { name: "Sign out" })).toBeTruthy();
+  });
+
+  it("falls back to initials, and keeps only the avatar on the rail", () => {
+    auth.state = { mode: "server", user: { id: 3, username: "leo", role: "admin" } };
+    renderSidebar(true);
+    const row = screen.getByTestId("sidebar-account");
+    expect(within(row).getByTestId("user-avatar-initials").textContent).toBe("le");
+    expect(row.textContent).not.toContain("Admin");
+  });
+
+  it("has no account row in local mode", () => {
+    auth.state = { mode: "local" };
+    renderSidebar();
+    expect(screen.queryByTestId("sidebar-account")).toBeNull();
+  });
+});

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

@@ -95,6 +95,8 @@ describe("Sidebar", () => {
     expect(hrefs).toContain("/sessions");
     expect(hrefs).toContain("/settings");
     expect(hrefs).not.toContain("/activity");
+    // The file manager serves a shared server; a local dashboard has none.
+    expect(hrefs).not.toContain("/files");
   });
 
   describe("update status line, in the connection details modal", () => {

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

@@ -19,6 +19,18 @@ import type { UpdateStatusPayload } from "../../lib/types";
 const statusMock = vi.fn();
 const checkMock = vi.fn();
 const applyMock = vi.fn();
+const ensureMock = vi.fn();
+const startMock = vi.fn();
+const navigateMock = vi.fn();
+
+vi.mock("react-router-dom", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  useNavigate: () => navigateMock,
+}));
+
+vi.mock("../lanes/startSession", () => ({
+  startInFreeTab: (...args: unknown[]) => startMock(...args),
+}));
 
 vi.mock("../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();
@@ -30,6 +42,7 @@ vi.mock("../../lib/api", async (importOriginal) => {
         check: (...args: unknown[]) => checkMock(...args),
         apply: (...args: unknown[]) => applyMock(...args),
       },
+      lanes: { ensure: (...args: unknown[]) => ensureMock(...args) },
     },
   };
 });
@@ -56,6 +69,9 @@ beforeEach(() => {
   statusMock.mockReset().mockResolvedValue(BASE_STATUS);
   checkMock.mockReset().mockResolvedValue(BASE_STATUS);
   applyMock.mockReset();
+  ensureMock.mockReset().mockResolvedValue({ lane: { id: 7 }, created: true });
+  startMock.mockReset().mockResolvedValue("agenthub-lane-7-1");
+  navigateMock.mockReset();
   try {
     localStorage.clear();
   } catch {
@@ -274,7 +290,7 @@ describe("UpdateNotifier — closing vs skipping", () => {
 
   it("Check for updates re-opens a modal closed with Later", async () => {
     render(<UpdateNotifier />);
-    await userEvent.click(await screen.findByText(i18n.t("updates:later")));
+    await userEvent.click(await screen.findByRole("button", { name: i18n.t("updates:later") }));
     await waitFor(() =>
       expect(screen.queryByText(i18n.t("updates:title"))).not.toBeInTheDocument()
     );
@@ -290,3 +306,26 @@ describe("UpdateNotifier — closing vs skipping", () => {
     expect(screen.getByText(i18n.t("updates:title"))).toBeInTheDocument();
   });
 });
+
+describe("UpdateNotifier — Auto fix", () => {
+  it("offers no Not now button, and Auto fix only once an update failed", async () => {
+    applyMock.mockRejectedValue(new Error("Command failed: git merge --ff-only v2.8.0"));
+    render(<UpdateNotifier />);
+    await screen.findByText(i18n.t("updates:updateNow"));
+    expect(screen.queryByText(i18n.t("updates:later"))).not.toBeInTheDocument();
+    expect(screen.queryByText(i18n.t("updates:autoFix"))).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByText(i18n.t("updates:updateNow")));
+    await userEvent.click(await screen.findByText(i18n.t("updates:autoFix")));
+
+    await waitFor(() => expect(navigateMock).toHaveBeenCalled());
+    expect(ensureMock).toHaveBeenCalledWith(
+      expect.objectContaining({ cwd: "/repo", exact: true, tool: "claude" })
+    );
+    const [laneId, body] = startMock.mock.calls[0] ?? [];
+    expect(laneId).toBe(7);
+    expect(body.prompt).toContain("git merge --ff-only v2.8.0");
+    expect(body.prompt).toContain(BASE_STATUS.manual_command);
+    expect(navigateMock).toHaveBeenCalledWith("/workspace?lane=7&run=agenthub-lane-7-1");
+  });
+});

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

@@ -1,7 +1,8 @@
 /**
  * @file WorkspaceTree.owners.test.tsx
  * @description Server mode, the sidebar workspace list for an analyst: every
- * user's workspaces, grouped under their owner (yours first, no owner last),
+ * user's workspaces, grouped under their owner (with their avatar, else an
+ * initial; yours first, no owner last),
  * groups folding and remembered; another user's workspace is read only — no
  * menu, no new session, and a session opens its analysis page, never a pane.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -30,7 +31,11 @@ const lane = (id: number, owner: number | null, name: string | null, title: stri
   }) as unknown as Lane;
 
 const lanes = [
-  lane(1, 3, "bob", "Bob app"),
+  {
+    ...lane(1, 3, "bob", "Bob app"),
+    owner_display_name: "Bob Nguyen",
+    owner_avatar_at: "t1",
+  } as Lane,
   lane(2, null, null, "Old"),
   lane(3, ME.id, "ana", "Mine"),
   lane(4, 1, "admin", "Admin site"),
@@ -61,6 +66,11 @@ vi.mock("../../lib/api", async (importOriginal) => {
         })),
       },
       run: { list: vi.fn(async () => ({ items: [] })) },
+      users: {
+        avatarUrl: (id: number, at?: string | null) =>
+          at ? `/api/users/${id}/avatar?v=${at}` : null,
+      },
+      me: { avatarUrl: () => null },
       aiTools: { list: vi.fn(async () => ({ tools: [], default: "claude" })), iconUrl: () => "" },
     },
   };
@@ -113,6 +123,23 @@ describe("WorkspaceTree for an analyst", () => {
     expect(screen.getByTestId("workspace-owner-2")).toHaveTextContent("ana (you)");
   });
 
+  it("names an owner by their display name when they set one", async () => {
+    renderTree();
+    await screen.findByTestId("workspace-row-1");
+    expect(screen.getByTestId("workspace-owner-3")).toHaveTextContent("Bob Nguyen");
+    expect(screen.getByTestId("workspace-owner-3")).not.toHaveTextContent("bob");
+    // Bob set a picture: shown beside the name; Ana did not: her initial.
+    expect(
+      within(screen.getByTestId("workspace-owner-3"))
+        .getByTestId("user-avatar-img")
+        .getAttribute("src")
+    ).toBe("/api/users/3/avatar?v=t1");
+    expect(
+      within(screen.getByTestId("workspace-owner-2")).getByTestId("user-avatar-initials")
+    ).toHaveTextContent("a");
+    expect(screen.getByTestId("workspace-owner-1")).toHaveTextContent("admin");
+  });
+
   it("folds a group and remembers it", async () => {
     const user = userEvent.setup();
     renderTree();

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

@@ -154,7 +154,12 @@ describe("WorkspaceTree", () => {
     expect(within(list).getByText("Live one")).toBeInTheDocument();
     // Its OWN sessions only — never the rest of its folder.
     expect(api.sessions.list).toHaveBeenCalledTimes(1);
-    expect(api.sessions.list).toHaveBeenCalledWith({ lane: 1, archived: false, limit: 6 });
+    expect(api.sessions.list).toHaveBeenCalledWith({
+      lane: 1,
+      archived: false,
+      pinnedFirst: true,
+      limit: 6,
+    });
     expect(JSON.parse(localStorage.getItem("agenthub.sidebar.projects")!).expanded).toEqual({
       "1": true,
     });
@@ -175,11 +180,21 @@ describe("WorkspaceTree", () => {
     expect(within(list).getAllByTestId(/^workspace-session-s-\d+$/)).toHaveLength(6);
     expect(screen.getByTestId("workspace-sessions-more-1")).toHaveTextContent("See all (3 more)");
     await user.click(screen.getByTestId("workspace-sessions-more-1"));
-    expect(api.sessions.list).toHaveBeenLastCalledWith({ lane: 1, archived: false, limit: 9 });
+    expect(api.sessions.list).toHaveBeenLastCalledWith({
+      lane: 1,
+      archived: false,
+      pinnedFirst: true,
+      limit: 9,
+    });
     await screen.findByText("Session 8");
     expect(screen.queryByTestId("workspace-sessions-more-1")).toBeNull();
     await user.click(screen.getByTestId("workspace-sessions-less-1"));
-    expect(api.sessions.list).toHaveBeenLastCalledWith({ lane: 1, archived: false, limit: 6 });
+    expect(api.sessions.list).toHaveBeenLastCalledWith({
+      lane: 1,
+      archived: false,
+      pinnedFirst: true,
+      limit: 6,
+    });
     expect(await screen.findByTestId("workspace-sessions-more-1")).toBeInTheDocument();
     expect(screen.queryByTestId("workspace-sessions-less-1")).toBeNull();
   });
@@ -197,6 +212,38 @@ describe("WorkspaceTree", () => {
     expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { archived: true });
   });
 
+  it("pins a session above the live ones, and unpins it from its row or menu", async () => {
+    vi.mocked(api.sessions.list).mockImplementation(async () => ({
+      sessions: [
+        session("s-live", "Live one"),
+        { ...session("s-old", "Old one"), pinned_at: "2026-10-01T00:00:00Z" } as Session,
+      ],
+      total: 2,
+      limit: 20,
+      offset: 0,
+    }));
+    const user = userEvent.setup();
+    renderTree();
+    await user.click(await screen.findByTestId("workspace-toggle-1"));
+    const list = await screen.findByTestId("workspace-sessions-1");
+    await screen.findByTestId("workspace-session-pinned-s-old");
+    expect(
+      within(list)
+        .getAllByTestId(/^workspace-session-s-/)
+        .map((el) => el.dataset.testid)
+    ).toEqual(["workspace-session-s-old", "workspace-session-s-live"]);
+    await user.click(screen.getByTestId("workspace-session-pin-s-old"));
+    expect(api.sessions.patch).toHaveBeenCalledWith("s-old", { pinned: false });
+    await user.click(screen.getByTestId("workspace-session-pin-s-live"));
+    expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { pinned: true });
+    await user.pointer({
+      keys: "[MouseRight]",
+      target: screen.getByTestId("workspace-session-s-old"),
+    });
+    await user.click(within(screen.getByTestId("session-menu-s-old")).getByText("Unpin"));
+    expect(api.sessions.patch).toHaveBeenLastCalledWith("s-old", { pinned: false });
+  });
+
   it("right-click on a session opens its menu: split, rename, archive, close its tab", async () => {
     const user = userEvent.setup();
     renderTree();
@@ -207,7 +254,7 @@ describe("WorkspaceTree", () => {
     let menu = screen.getByTestId("session-menu-s-old");
     // Ended: no pane to split or close.
     expect(within(menu).queryByText("Open in split")).toBeNull();
-    expect(within(menu).queryByText("Close tab (stops its session)")).toBeNull();
+    expect(within(menu).queryByText("Close tab (stops and archives its session)")).toBeNull();
     await user.click(within(menu).getByText("Rename"));
     expect(screen.queryByTestId("session-menu-s-old")).toBeNull();
     expect(screen.getByTestId("workspace-session-rename-s-old")).toBeInTheDocument();
@@ -224,11 +271,17 @@ describe("WorkspaceTree", () => {
     await user.click(within(screen.getByTestId("session-menu-s-live")).getByText("Archive"));
     expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { archived: true });
 
+    await right(screen.getByTestId("workspace-session-s-live"));
+    await user.click(screen.getByTestId("session-menu-sleep"));
+    expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1-2", { archive: false });
+
     await right(screen.getByTestId("workspace-session-s-live"));
     await user.click(
-      within(screen.getByTestId("session-menu-s-live")).getByText("Close tab (stops its session)")
+      within(screen.getByTestId("session-menu-s-live")).getByText(
+        "Close tab (stops and archives its session)"
+      )
     );
-    expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1-2");
+    expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1-2", { archive: true });
   });
 
   it("archiving a worktree session removes its worktree first, after asking", async () => {

client/src/components/artifacts/ArtifactAddPanels.tsx

@@ -0,0 +1,928 @@
+/**
+ * @file ArtifactAddPanels.tsx
+ * @description The Artifacts page's Add dialogs for a skill, a plugin and an
+ * uploaded file (server/lib/artifacts.js):
+ * - `SkillAddPanel` — three ways to make a skill: **Upload** (one Markdown
+ *   file that becomes SKILL.md, several files, a whole folder — picked or
+ *   dropped — or a .zip/.skill; an upload holding several skills makes one
+ *   artifact each), **Write** (name, description, instructions) and
+ *   **Existing** (a folder in the user's ~/.claude/skills or a workspace's
+ *   .claude/skills). The user names the skill; the name is previewed as the
+ *   folder and `/command` it installs as (`skillSlug`, the server's rule).
+ * - `PluginAddPanel` — paste a marketplace link (a git https link, a forge
+ *   web link, `owner/repo` or a marketplace.json link), read its plugin list
+ *   and tick the ones to add; or type `name@marketplace` by hand, which is
+ *   also where a link the server cannot read (ssh, a private repo) ends up.
+ * - `FileUploadPanel` — one file from the user's computer (≤ 25 MB).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useRef, useState, type DragEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { FileText, FolderOpen, Package, Sparkles, Upload, X } from "lucide-react";
+import { api, type MarketplaceInfo } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { toast } from "../../lib/toast";
+
+const field = "w-full rounded border border-border bg-surface-1 px-2 py-1 text-sm text-fg-primary";
+const label = "block text-[11px] font-medium text-fg-secondary";
+const hint = "text-[11px] text-fg-muted";
+
+/** The server's skill folder rule (server/lib/artifacts.js `skillSlug`). */
+export function skillSlug(text: string): string {
+  return text
+    .normalize("NFD")
+    .replace(/[̀-ͯ]/g, "")
+    .replace(/đ/g, "d")
+    .replace(/Đ/g, "D")
+    .replace(/[^A-Za-z0-9._-]+/g, "-")
+    .replace(/^[-._]+|-+$/g, "")
+    .slice(0, 100);
+}
+
+/** `field:` of a Markdown file's frontmatter, or "". */
+export function frontmatterField(text: string, name: string): string {
+  const fm = /^?---\r?\n([\s\S]*?)\r?\n---/.exec(text);
+  if (!fm) return "";
+  const m = new RegExp(`^${name}:\\s*(.*)$`, "m").exec(fm[1] ?? "");
+  return (m?.[1] ?? "").trim().replace(/^(["'])(.*)\1$/, "$2");
+}
+
+type Picked = { file: File; path: string };
+
+/** A small file's text ("" on failure), only to prefill the name/description. */
+function readText(file: File): Promise<string> {
+  if (file.size > 1024 * 1024) return Promise.resolve("");
+  return new Promise((ok) => {
+    const r = new FileReader();
+    r.onload = () => ok(typeof r.result === "string" ? r.result : "");
+    r.onerror = () => ok("");
+    r.readAsText(file);
+  });
+}
+
+const JUNK = /(^|\/)(__MACOSX|\.DS_Store|Thumbs\.db|desktop\.ini|\.git|node_modules)(\/|$)/;
+const isSkillMd = (p: string) => /(^|\/)skill\.md$/i.test(p);
+const isArchive = (p: string) => /\.(zip|skill)$/i.test(p);
+const isText = (p: string) => /\.(md|markdown|txt)$/i.test(p);
+
+/** Every file under what was dropped, folders walked (webkitGetAsEntry). */
+async function droppedFiles(e: DragEvent): Promise<Picked[]> {
+  const items = Array.from(e.dataTransfer.items || []);
+  const entries = items
+    .map((i) => (i.webkitGetAsEntry ? i.webkitGetAsEntry() : null))
+    .filter((x): x is FileSystemEntry => !!x);
+  if (!entries.length) {
+    return Array.from(e.dataTransfer.files).map((file) => ({ file, path: file.name }));
+  }
+  const out: Picked[] = [];
+  const walk = async (entry: FileSystemEntry, prefix: string): Promise<void> => {
+    if (entry.isFile) {
+      const file = await new Promise<File>((ok, fail) =>
+        (entry as FileSystemFileEntry).file(ok, fail)
+      );
+      out.push({ file, path: prefix + entry.name });
+      return;
+    }
+    const reader = (entry as FileSystemDirectoryEntry).createReader();
+    // readEntries answers in batches until an empty one.
+    for (;;) {
+      const batch = await new Promise<FileSystemEntry[]>((ok, fail) =>
+        reader.readEntries(ok, fail)
+      );
+      if (!batch.length) break;
+      for (const child of batch) await walk(child, `${prefix}${entry.name}/`);
+    }
+  };
+  for (const entry of entries) await walk(entry, "");
+  return out;
+}
+
+/** What an upload will make, guessed the way the server decides it. */
+function describeUpload(files: Picked[]): {
+  kind: "none" | "single-md" | "archive" | "one" | "many" | "no-skill-md";
+  count: number;
+  folder: string;
+} {
+  const real = files.filter((f) => !JUNK.test(f.path));
+  if (!real.length) return { kind: "none", count: 0, folder: "" };
+  if (real.length === 1 && isArchive(real[0]!.path))
+    return { kind: "archive", count: 0, folder: "" };
+  const roots = [
+    ...new Set(
+      real.filter((f) => isSkillMd(f.path)).map((f) => f.path.split("/").slice(0, -1).join("/"))
+    ),
+  ].sort((a, b) => a.length - b.length);
+  const under = (dir: string, p: string) => dir === "" || p === dir || p.startsWith(`${dir}/`);
+  const top = roots.filter((r, i) => !roots.slice(0, i).some((o) => under(o, r)));
+  if (!top.length) {
+    return real.length === 1 && isText(real[0]!.path)
+      ? { kind: "single-md", count: 1, folder: "" }
+      : { kind: "no-skill-md", count: 0, folder: "" };
+  }
+  if (top.length === 1) return { kind: "one", count: 1, folder: top[0]!.split("/").pop() ?? "" };
+  return { kind: "many", count: top.length, folder: "" };
+}
+
+function Tabs<T extends string>({
+  value,
+  options,
+  onChange,
+}: {
+  value: T;
+  options: { id: T; label: string }[];
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div role="tablist" className="flex rounded border border-border bg-surface-2 p-0.5">
+      {options.map((o) => (
+        <button
+          key={o.id}
+          type="button"
+          role="tab"
+          aria-selected={value === o.id}
+          onClick={() => onChange(o.id)}
+          className={`flex-1 rounded px-2 py-1 text-xs ${
+            value === o.id
+              ? "bg-accent-solid text-white"
+              : "text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
+          }`}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** The name field with the folder/command it becomes. */
+function SkillNameField({
+  value,
+  onChange,
+  disabled,
+  required,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  disabled?: boolean;
+  required?: boolean;
+}) {
+  const { t } = useTranslation("artifacts");
+  const slug = skillSlug(value);
+  return (
+    <div className="space-y-0.5">
+      <label className={label}>
+        {t("skill.name")}
+        {required ? " *" : ""}
+        <input
+          className={`${field} mt-0.5`}
+          value={value}
+          disabled={disabled}
+          placeholder="release-notes"
+          onChange={(e) => onChange(e.target.value)}
+        />
+      </label>
+      {value.trim() && (
+        <p className={hint} data-testid="skill-slug">
+          {slug ? t("skill.slugHint", { slug }) : t("skill.slugBad")}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ── Skill ─────────────────────────────────────────────────────────────────
+
+export function SkillAddPanel({
+  lanes,
+  onAdded,
+  onClose,
+}: {
+  lanes: Lane[];
+  onAdded: () => void;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation("artifacts");
+  const [mode, setMode] = useState<"upload" | "write" | "existing">("upload");
+  const [busy, setBusy] = useState(false);
+  const [name, setName] = useState("");
+  const [nameTouched, setNameTouched] = useState(false);
+  const [description, setDescription] = useState("");
+  const [descTouched, setDescTouched] = useState(false);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [files, setFiles] = useState<Picked[]>([]);
+  const [dragging, setDragging] = useState(false);
+  const [laneId, setLaneId] = useState<number | null>(null);
+  const [skills, setSkills] = useState<{ name: string; from: "user" | "workspace" }[] | null>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const folderInput = useRef<HTMLInputElement>(null);
+
+  // `webkitdirectory` is not in React's typings.
+  useEffect(() => {
+    folderInput.current?.setAttribute("webkitdirectory", "");
+  }, [mode]);
+
+  useEffect(() => {
+    if (mode !== "existing") return;
+    api.artifacts
+      .skills(laneId ?? undefined)
+      .then((r) => setSkills(r.items))
+      .catch(() => setSkills([]));
+  }, [mode, laneId]);
+
+  const shape = useMemo(() => describeUpload(files), [files]);
+
+  // Fill the name and description from what was picked, unless typed.
+  useEffect(() => {
+    if (!files.length) return;
+    const md =
+      files.find((f) => isSkillMd(f.path) && !JUNK.test(f.path)) ??
+      (shape.kind === "single-md" ? files.find((f) => !JUNK.test(f.path)) : undefined);
+    const stem = (p: string) => (p.split("/").pop() ?? "").replace(/\.[^.]+$/, "");
+    let live = true;
+    void (async () => {
+      const text = md ? await readText(md.file) : "";
+      if (!live) return;
+      const fmName = frontmatterField(text, "name");
+      const fmDesc = frontmatterField(text, "description");
+      if (!nameTouched) {
+        const guess =
+          shape.kind === "single-md"
+            ? fmName || stem(md?.path ?? "")
+            : shape.kind === "one"
+              ? fmName || shape.folder
+              : shape.kind === "archive"
+                ? stem(files[0]!.path)
+                : "";
+        setName(guess);
+      }
+      if (!descTouched && fmDesc) setDescription(fmDesc);
+    })();
+    return () => {
+      live = false;
+    };
+    // Refill only when the pick changes, never on a typed name.
+  }, [files, shape]);
+
+  const pick = (list: FileList | null) => {
+    if (!list?.length) return;
+    setFiles(
+      Array.from(list).map((file) => ({
+        file,
+        path: (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name,
+      }))
+    );
+  };
+
+  const run = async (fn: () => Promise<number>) => {
+    setBusy(true);
+    try {
+      const n = await fn();
+      toast.success(n > 1 ? t("skill.addedMany", { count: n }) : t("added"));
+      onAdded();
+      onClose();
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const many = shape.kind === "many";
+  const total = files.reduce((n, f) => n + f.file.size, 0);
+  const meta = (
+    <>
+      <label className={label}>
+        {t("skill.description")}
+        <textarea
+          className={`${field} mt-0.5`}
+          rows={2}
+          value={description}
+          disabled={many}
+          placeholder={t("skill.descriptionHint")}
+          onChange={(e) => {
+            setDescTouched(true);
+            setDescription(e.target.value);
+          }}
+        />
+      </label>
+      <label className={label}>
+        {t("form.title")}
+        <input
+          className={`${field} mt-0.5`}
+          value={title}
+          disabled={many}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+      </label>
+    </>
+  );
+
+  return (
+    <div className="space-y-3">
+      <Tabs
+        value={mode}
+        onChange={setMode}
+        options={[
+          { id: "upload", label: t("skill.tab.upload") },
+          { id: "write", label: t("skill.tab.write") },
+          { id: "existing", label: t("skill.tab.existing") },
+        ]}
+      />
+
+      {mode === "upload" && (
+        <form
+          className="space-y-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void run(async () => {
+              const r = await api.artifacts.uploadSkills(files, {
+                name: many ? undefined : name.trim(),
+                description: many ? undefined : description.trim(),
+                title: many ? undefined : title.trim(),
+              });
+              return r.items.length;
+            });
+          }}
+        >
+          <div
+            data-testid="skill-drop"
+            onDragOver={(e) => {
+              e.preventDefault();
+              setDragging(true);
+            }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={(e) => {
+              e.preventDefault();
+              setDragging(false);
+              void droppedFiles(e).then((list) => list.length && setFiles(list));
+            }}
+            className={`rounded-lg border border-dashed p-4 text-center ${
+              dragging ? "border-accent bg-accent/10" : "border-border"
+            }`}
+          >
+            <Upload className="mx-auto mb-1 h-5 w-5 text-fg-muted" />
+            <p className="text-xs text-fg-secondary">{t("skill.dropHint")}</p>
+            <div className="mt-2 flex flex-wrap justify-center gap-2">
+              <button
+                type="button"
+                className="btn-ghost text-xs"
+                onClick={() => fileInput.current?.click()}
+              >
+                <FileText className="h-3.5 w-3.5" /> {t("skill.pickFiles")}
+              </button>
+              <button
+                type="button"
+                className="btn-ghost text-xs"
+                onClick={() => folderInput.current?.click()}
+              >
+                <FolderOpen className="h-3.5 w-3.5" /> {t("skill.pickFolder")}
+              </button>
+            </div>
+            <input
+              ref={fileInput}
+              type="file"
+              multiple
+              hidden
+              data-testid="skill-files"
+              onChange={(e) => {
+                pick(e.target.files);
+                e.target.value = "";
+              }}
+            />
+            <input
+              ref={folderInput}
+              type="file"
+              multiple
+              hidden
+              data-testid="skill-folder"
+              onChange={(e) => {
+                pick(e.target.files);
+                e.target.value = "";
+              }}
+            />
+          </div>
+
+          {files.length > 0 && (
+            <div className="rounded border border-border bg-surface-2 p-2">
+              <div className="mb-1 flex items-center gap-2">
+                <p className="flex-1 text-xs text-fg-primary" data-testid="skill-shape">
+                  {t(`skill.shape.${shape.kind}`, { count: shape.count })}
+                </p>
+                <span className={hint}>
+                  {t("files", { count: files.length })} · {Math.ceil(total / 1024)} KB
+                </span>
+                <button
+                  type="button"
+                  aria-label={t("skill.clear")}
+                  className="text-fg-muted hover:text-fg-primary"
+                  onClick={() => {
+                    setFiles([]);
+                    setNameTouched(false);
+                    setDescTouched(false);
+                  }}
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </div>
+              <ul className="max-h-28 overflow-auto font-mono text-[11px] text-fg-secondary">
+                {files.slice(0, 200).map((f) => (
+                  <li
+                    key={f.path}
+                    className={`truncate ${JUNK.test(f.path) ? "line-through opacity-50" : ""}`}
+                  >
+                    {f.path}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {many ? (
+            <p className={hint}>{t("skill.manyHint")}</p>
+          ) : (
+            <SkillNameField
+              value={name}
+              onChange={(v) => {
+                setNameTouched(true);
+                setName(v);
+              }}
+              required={shape.kind === "single-md"}
+            />
+          )}
+          {meta}
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              className="btn-primary text-sm"
+              disabled={
+                busy ||
+                !files.length ||
+                shape.kind === "no-skill-md" ||
+                (shape.kind === "single-md" && !skillSlug(name))
+              }
+            >
+              {busy ? t("skill.uploading") : t("form.save")}
+            </button>
+          </div>
+        </form>
+      )}
+
+      {mode === "write" && (
+        <form
+          className="space-y-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            void run(async () => {
+              await api.artifacts.writeSkill({
+                name: name.trim(),
+                description: description.trim(),
+                content,
+                title: title.trim() || undefined,
+              });
+              return 1;
+            });
+          }}
+        >
+          <SkillNameField value={name} onChange={setName} required />
+          <label className={label}>
+            {t("skill.description")} *
+            <textarea
+              className={`${field} mt-0.5`}
+              rows={2}
+              value={description}
+              placeholder={t("skill.descriptionHint")}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </label>
+          <label className={label}>
+            {t("skill.content")} *
+            <textarea
+              className={`${field} mt-0.5 font-mono text-xs`}
+              rows={10}
+              value={content}
+              placeholder={t("skill.contentHint")}
+              onChange={(e) => setContent(e.target.value)}
+            />
+          </label>
+          <label className={label}>
+            {t("form.title")}
+            <input
+              className={`${field} mt-0.5`}
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </label>
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              className="btn-primary text-sm"
+              disabled={
+                busy ||
+                !skillSlug(name) ||
+                !content.trim() ||
+                (!description.trim() && !frontmatterField(content, "description"))
+              }
+            >
+              {t("form.save")}
+            </button>
+          </div>
+        </form>
+      )}
+
+      {mode === "existing" && (
+        <div className="space-y-2">
+          <select
+            className={field}
+            aria-label={t("form.workspace")}
+            value={laneId ?? ""}
+            onChange={(e) => setLaneId(e.target.value ? Number(e.target.value) : null)}
+          >
+            <option value="">{t("form.pickWorkspace")}</option>
+            {lanes.map((l) => (
+              <option key={l.id} value={l.id}>
+                {l.title || l.cwd}
+              </option>
+            ))}
+          </select>
+          {skills && skills.length === 0 && <p className={hint}>{t("form.noSkills")}</p>}
+          {skills && skills.length > 0 && (
+            <ul className="max-h-72 space-y-0.5 overflow-auto">
+              {skills.map((s) => (
+                <li key={`${s.from}:${s.name}`} className="flex items-center gap-2 text-xs">
+                  <Sparkles className="h-3 w-3 shrink-0 text-fg-muted" />
+                  <span className="min-w-0 flex-1 truncate text-fg-secondary">{s.name}</span>
+                  <span className="text-fg-muted">
+                    {t(s.from === "user" ? "form.fromUser" : "form.fromWorkspace")}
+                  </span>
+                  <button
+                    type="button"
+                    className="btn-ghost text-xs"
+                    disabled={busy}
+                    onClick={() =>
+                      void run(async () => {
+                        await api.artifacts.addSkill({
+                          name: s.name,
+                          ...(s.from === "workspace" && laneId ? { laneId } : {}),
+                          title: title || undefined,
+                          description: description || undefined,
+                        });
+                        return 1;
+                      })
+                    }
+                  >
+                    {t("form.save")}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+          <input
+            className={field}
+            placeholder={t("form.title")}
+            aria-label={t("form.title")}
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+          <textarea
+            className={field}
+            rows={2}
+            placeholder={t("form.description")}
+            aria-label={t("form.description")}
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── Plugin ────────────────────────────────────────────────────────────────
+
+const MANUAL_CODES = new Set(["ENEEDLOGIN", "ESSHMARKET", "ENOTMARKET", "EMARKETFETCH"]);
+
+export function PluginAddPanel({ onAdded, onClose }: { onAdded: () => void; onClose: () => void }) {
+  const { t } = useTranslation("artifacts");
+  const [link, setLink] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [info, setInfo] = useState<MarketplaceInfo | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [have, setHave] = useState<Set<string>>(new Set());
+  const [manual, setManual] = useState(false);
+  const [key, setKey] = useState("");
+  const [market, setMarket] = useState("");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+
+  useEffect(() => {
+    api.artifacts
+      .list({ scope: "mine", kind: "plugin" })
+      .then((r) => setHave(new Set(r.items.map((i) => i.source ?? ""))))
+      .catch(() => setHave(new Set()));
+  }, []);
+
+  const read = async () => {
+    setBusy(true);
+    setError(null);
+    setInfo(null);
+    try {
+      const r = await api.artifacts.inspectMarket(link.trim());
+      setInfo(r);
+      setPicked(
+        new Set(
+          r.plugins
+            .filter((p) => !have.has(p.key))
+            .slice(0, 1)
+            .map((p) => p.key)
+        )
+      );
+      setMarket(r.market);
+    } catch (err) {
+      const e = err as Error & { code?: string };
+      setError(e.message);
+      if (MANUAL_CODES.has(e.code ?? "")) {
+        setManual(true);
+        setMarket(link.trim());
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const addPicked = async () => {
+    if (!info) return;
+    setBusy(true);
+    let n = 0;
+    try {
+      for (const p of info.plugins.filter((x) => picked.has(x.key))) {
+        await api.artifacts.addPlugin({
+          key: p.key,
+          market: info.market,
+          title: p.name,
+          description: p.description,
+        });
+        n++;
+      }
+      toast.success(t("plugin.addedMany", { count: n }));
+      onAdded();
+      onClose();
+    } catch (err) {
+      toast.error(err);
+      if (n) onAdded();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const toggle = (k: string) =>
+    setPicked((s) => {
+      const next = new Set(s);
+      if (next.has(k)) next.delete(k);
+      else next.add(k);
+      return next;
+    });
+
+  return (
+    <div className="space-y-3">
+      <form
+        className="space-y-1"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (link.trim()) void read();
+        }}
+      >
+        <label className={label}>
+          {t("plugin.link")}
+          <div className="mt-0.5 flex gap-2">
+            <input
+              className={field}
+              value={link}
+              autoFocus
+              placeholder="https://git.example.com/org/claude-skills.git"
+              onChange={(e) => setLink(e.target.value)}
+            />
+            <button
+              type="submit"
+              className="btn-primary shrink-0 text-sm"
+              disabled={busy || !link.trim()}
+            >
+              {busy && !info ? t("plugin.reading") : t("plugin.read")}
+            </button>
+          </div>
+        </label>
+        <p className={hint}>{t("plugin.linkHint")}</p>
+      </form>
+
+      {error && (
+        <p
+          role="alert"
+          className="rounded border border-status-danger/40 px-2 py-1 text-xs text-status-danger"
+        >
+          {error}
+        </p>
+      )}
+
+      {info && (
+        <div className="space-y-2" data-testid="market-plugins">
+          <div>
+            <p className="text-sm font-medium text-fg-primary">
+              <Package className="mr-1 inline h-4 w-4 text-fg-muted" />
+              {info.name}
+            </p>
+            {info.description && <p className={hint}>{info.description}</p>}
+          </div>
+          {info.plugins.length === 0 ? (
+            <p className={hint}>{t("plugin.none")}</p>
+          ) : (
+            <>
+              <label className="flex items-center gap-2 text-xs text-fg-secondary">
+                <input
+                  type="checkbox"
+                  checked={picked.size === info.plugins.length}
+                  onChange={(e) =>
+                    setPicked(new Set(e.target.checked ? info.plugins.map((p) => p.key) : []))
+                  }
+                />
+                {t("plugin.all")}
+              </label>
+              <ul className="max-h-64 space-y-1 overflow-auto">
+                {info.plugins.map((p) => (
+                  <li key={p.key}>
+                    <label className="flex cursor-pointer items-start gap-2 rounded px-1 py-1 hover:bg-surface-2">
+                      <input
+                        type="checkbox"
+                        className="mt-0.5"
+                        checked={picked.has(p.key)}
+                        onChange={() => toggle(p.key)}
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span className="text-xs font-medium text-fg-primary">{p.name}</span>
+                        <span className="ml-1.5 font-mono text-[10px] text-fg-muted">{p.key}</span>
+                        {p.version && (
+                          <span className="ml-1.5 text-[10px] text-fg-muted">v{p.version}</span>
+                        )}
+                        {have.has(p.key) && (
+                          <span className="ml-1.5 rounded bg-surface-3 px-1 text-[10px] text-fg-secondary">
+                            {t("plugin.have")}
+                          </span>
+                        )}
+                        {p.description && (
+                          <span className="block text-[11px] text-fg-muted">{p.description}</span>
+                        )}
+                      </span>
+                    </label>
+                  </li>
+                ))}
+              </ul>
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  className="btn-primary text-sm"
+                  disabled={busy || picked.size === 0}
+                  onClick={() => void addPicked()}
+                >
+                  {t("plugin.addPicked", { count: picked.size })}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      <div className="border-t border-border-light pt-2">
+        <button
+          type="button"
+          className="text-xs text-accent hover:underline"
+          aria-expanded={manual}
+          onClick={() => setManual((v) => !v)}
+        >
+          {t("plugin.manual")}
+        </button>
+        {manual && (
+          <form
+            className="mt-2 space-y-2"
+            onSubmit={async (e) => {
+              e.preventDefault();
+              setBusy(true);
+              try {
+                await api.artifacts.addPlugin({
+                  key: key.trim(),
+                  market: market.trim(),
+                  title,
+                  description,
+                });
+                toast.success(t("added"));
+                onAdded();
+                onClose();
+              } catch (err) {
+                toast.error(err);
+              } finally {
+                setBusy(false);
+              }
+            }}
+          >
+            <input
+              className={field}
+              placeholder="my-plugin@my-marketplace"
+              aria-label={t("form.pluginKey")}
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+            />
+            <input
+              className={field}
+              placeholder="owner/repo · https://… · git@host:org/repo.git"
+              aria-label={t("form.market")}
+              value={market}
+              onChange={(e) => setMarket(e.target.value)}
+            />
+            <input
+              className={field}
+              placeholder={t("form.title")}
+              aria-label={t("form.title")}
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+            <textarea
+              className={field}
+              rows={2}
+              placeholder={t("form.description")}
+              aria-label={t("form.description")}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+            <div className="flex justify-end">
+              <button
+                type="submit"
+                className="btn-primary text-sm"
+                disabled={busy || !key.trim() || !market.trim()}
+              >
+                {t("form.save")}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── File upload ───────────────────────────────────────────────────────────
+
+export function FileUploadPanel({ onAdded }: { onAdded: () => void }) {
+  const { t } = useTranslation("artifacts");
+  const [file, setFile] = useState<File | null>(null);
+  const [title, setTitle] = useState("");
+  const [busy, setBusy] = useState(false);
+  const tooBig = !!file && file.size > 25 * 1024 * 1024;
+  return (
+    <form
+      className="space-y-2"
+      onSubmit={async (e) => {
+        e.preventDefault();
+        if (!file) return;
+        setBusy(true);
+        try {
+          await api.artifacts.uploadFile(file, { title: title.trim() || undefined });
+          toast.success(t("added"));
+          setFile(null);
+          setTitle("");
+          onAdded();
+        } catch (err) {
+          toast.error(err);
+        } finally {
+          setBusy(false);
+        }
+      }}
+    >
+      <label className={label}>
+        {t("file.fromComputer")}
+        <input
+          type="file"
+          data-testid="file-upload"
+          className="mt-0.5 block w-full text-xs text-fg-secondary"
+          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
+        />
+      </label>
+      {tooBig && <p className="text-xs text-status-danger">{t("file.tooBig")}</p>}
+      <div className="flex gap-2">
+        <input
+          className={field}
+          placeholder={t("form.title")}
+          aria-label={t("form.title")}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+        <button
+          type="submit"
+          className="btn-primary shrink-0 text-sm"
+          disabled={busy || !file || tooBig}
+        >
+          <Upload className="h-3.5 w-3.5" /> {t("file.upload")}
+        </button>
+      </div>
+    </form>
+  );
+}

client/src/components/conversation/ConversationView.tsx

@@ -61,13 +61,15 @@
  *
  * ----------------------------------------------------------------------------- */
 
-import { useEffect, useState, useCallback, useRef } from "react";
+import { memo, useEffect, useState, useCallback, useMemo, useRef } from "react";
 import { Loader2, ArrowDown, MessagesSquare, RefreshCw } from "lucide-react";
 import { api } from "../../lib/api";
 import { eventBus } from "../../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../../lib/remoteDataEvents";
 import { MessageList, promptTokens } from "./MessageList";
 import { useSpin } from "../../hooks/useSpin";
+import { useOnScreen, isShown } from "../../hooks/useOnScreen";
+import { throttle } from "../../lib/throttle";
 import { useTranslation } from "react-i18next";
 import type { TranscriptMessage, TranscriptInfo, WSMessage } from "../../lib/types";
 
@@ -80,6 +82,10 @@ const POLL_INTERVAL_MS = 3000;
 // Rescan the transcripts list periodically so new subagents that spawn
 // mid-session appear in the dropdown without a page reload.
 const TRANSCRIPTS_REFRESH_MS = 15000;
+// A hook burst (Pre + Post per tool call, several sessions) refetches the tail
+// at most this often: the first event still fetches at once, the last is never
+// lost, and a long transcript is not re-read for every single frame.
+const EVENT_FETCH_MS = 1500;
 
 interface ConversationViewProps {
   sessionId: string;
@@ -106,7 +112,7 @@ interface ConversationViewProps {
   onNotStarted?: (notStarted: boolean) => void;
 }
 
-export function ConversationView({
+function ConversationViewPane({
   sessionId,
   initialTranscriptId,
   fill = false,
@@ -161,6 +167,10 @@ export function ConversationView({
   // Bumped whenever the session or the selected transcript changes: a tail
   // fetch started for the previous transcript must not append to the new one.
   const genRef = useRef(0);
+  // A pane of another workspace or tab stays mounted but hidden: it neither
+  // polls nor follows events, and catches up once when it is shown again.
+  const onShowRef = useRef<() => void>(() => {});
+  const onScreen = useOnScreen(scrollContainerRef, () => onShowRef.current());
   // Refresh-button spinner state - separate from initial `loading` so the
   // existing skeleton doesn't blink during a manual refresh.
 
@@ -179,7 +189,7 @@ export function ConversationView({
     }
     loadTranscripts();
     const interval = window.setInterval(() => {
-      if (document.visibilityState === "visible") loadTranscripts();
+      if (isShown(onScreen)) loadTranscripts();
     }, TRANSCRIPTS_REFRESH_MS);
     return () => {
       cancelled = true;
@@ -299,24 +309,33 @@ export function ConversationView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sessionId, selectedTranscript]);
 
-  // WebSocket subscription: refetch on every new_event for this session.
+  // WebSocket subscription: refetch on new_event for this session, throttled.
   // Hook coverage isn't complete (a user-typed message fires no hook), so we
   // also poll below to catch what WS misses.
+  const fetchSoon = useMemo(
+    () => throttle(() => void fetchNewMessages(), EVENT_FETCH_MS),
+    [fetchNewMessages]
+  );
+  useEffect(() => () => fetchSoon.cancel(), [fetchSoon]);
   useEffect(() => {
     const unsubscribe = eventBus.subscribe((msg: WSMessage) => {
-      // Hidden tab: the visibility handler below catches up once on show.
-      if (document.visibilityState !== "visible") return;
+      // Hidden tab or hidden pane: catching up once on show is enough.
+      if (!isShown(onScreen)) return;
       if (isRemoteDataRefreshMessage(msg)) {
-        fetchNewMessages();
+        fetchSoon();
         return;
       }
       if (msg.type !== "new_event") return;
       const data = msg.data as { session_id?: string };
       if (data.session_id !== sessionId) return;
-      fetchNewMessages();
+      fetchSoon();
     });
     return unsubscribe;
-  }, [sessionId, fetchNewMessages]);
+  }, [sessionId, fetchSoon, onScreen]);
+
+  onShowRef.current = () => {
+    if (document.visibilityState === "visible") void fetchNewMessages();
+  };
 
   // Resync on WebSocket reconnect: events that landed during a transient
   // disconnect are gone from the bus, but the JSONL still has them, so a
@@ -337,7 +356,7 @@ export function ConversationView({
     function start() {
       if (interval !== null) return;
       interval = window.setInterval(() => {
-        if (document.visibilityState === "visible") fetchNewMessages();
+        if (isShown(onScreen)) fetchNewMessages();
       }, POLL_INTERVAL_MS);
     }
     function stop() {
@@ -363,7 +382,7 @@ export function ConversationView({
       stop();
       document.removeEventListener("visibilitychange", onVisibility);
     };
-  }, [fetchNewMessages]);
+  }, [fetchNewMessages, onScreen]);
 
   // Manual refresh - surfaces a control in the toolbar so users can force
   // a sync without reloading the page.
@@ -627,3 +646,7 @@ export function ConversationView({
     </div>
   );
 }
+
+/** Memoized: a chat's prompt box lives in its parent (PaneChat), and every
+ *  keystroke there re-rendered the whole conversation. */
+export const ConversationView = memo(ConversationViewPane);

client/src/components/conversation/MarkdownContent.tsx

@@ -4,9 +4,11 @@
  * subset of CommonMark + GFM that actually appears in Claude Code transcripts:
  * fenced code blocks, ATX headings, ordered/unordered lists, task lists, blockquotes,
  * horizontal rules, simple tables, inline code, bold, italic, strikethrough, links,
- * and auto-linked URLs. An absolute file path (bare or in inline code) opens
- * through `OpenFileContext` when the page provides one; `linkify` does the
- * same links for plain text. To make a reply easy to scan, bold is coloured
+ * and auto-linked URLs. A file path — absolute, or relative with a folder and
+ * an extension (`server/lib/x.js`), with or without a `:line` suffix, bare, in
+ * inline code or as a markdown link's target — opens through `OpenFileContext`
+ * when the page provides one (the page resolves a relative one against its own
+ * folder); `linkify` does the same links for plain text. To make a reply easy to scan, bold is coloured
  * (accent), standalone numbers (87%, 3.5s, v2.7.1, dates) are tinted and
  * tabular, and a flag label ("Lưu ý:", "Warning:", "Lỗi:") takes the colour
  * of how serious it is.
@@ -82,7 +84,12 @@ const HR_RE = /^\s*(-{3,}|\*{3,}|_{3,})\s*$/;
 const UL_RE = /^(\s*)([-*+])\s+(.*)$/;
 const OL_RE = /^(\s*)(\d+)\.\s+(.*)$/;
 const QUOTE_RE = /^\s*>\s?(.*)$/;
-const TABLE_DIVIDER_RE = /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/;
+const TABLE_DIVIDER_RE = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)+\|?\s*$/;
+
+/** A GFM table starts at a line holding a pipe that is followed by a divider. */
+function isTableStart(lines: string[], i: number): boolean {
+  return lines[i]!.includes("|") && i + 1 < lines.length && TABLE_DIVIDER_RE.test(lines[i + 1]!);
+}
 
 function splitTableRow(line: string): string[] {
   // Trim leading/trailing pipes, then split, respecting escaped pipes.
@@ -169,7 +176,7 @@ function parseBlocks(src: string): Block[] {
     }
 
     // Table: header line followed by an alignment divider
-    if (line.includes("|") && i + 1 < lines.length && TABLE_DIVIDER_RE.test(lines[i + 1]!)) {
+    if (isTableStart(lines, i)) {
       const header = splitTableRow(line);
       const aligns = parseAlignments(lines[i + 1]!);
       i += 2;
@@ -225,7 +232,8 @@ function parseBlocks(src: string): Block[] {
       continue;
     }
 
-    // Paragraph: collect until a blank line or the start of another block
+    // Paragraph: collect until a blank line or the start of another block —
+    // a table included, which (as in GFM) may follow prose with no blank line.
     const paraLines: string[] = [line];
     i++;
     while (i < lines.length) {
@@ -237,7 +245,8 @@ function parseBlocks(src: string): Block[] {
         HR_RE.test(nl) ||
         UL_RE.test(nl) ||
         OL_RE.test(nl) ||
-        QUOTE_RE.test(nl)
+        QUOTE_RE.test(nl) ||
+        isTableStart(lines, i)
       ) {
         break;
       }
@@ -256,7 +265,19 @@ const LINK_CLASS =
   "text-violet-700 dark:text-violet-300 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70 break-all";
 const URL_RE = /^https?:\/\/[^\s<>()]+[^\s<>().,!?;:'"]/;
 // Two segments at least, so "/" or "/s" stays text; a trailing full stop is prose.
-const PATH_RE = /^(?:\/[^\s/<>()'"`,;:]*[^\s/<>()'"`,;:.!?]){2,}/;
+// A `:12` or `:12:5` line suffix belongs to the link (Claude writes `path:line`).
+const PATH_RE = /^(?:\/[^\s/<>()'"`,;:]*[^\s/<>()'"`,;:.!?]){2,}(?::\d+(?::\d+)?)?/;
+// A relative path needs a folder AND an extension starting with a letter
+// (`docs/API.md`, `./a/b.ts:9`), so "and/or" and "3/4.5" stay text; a first segment with an inner dot is a host
+// (`github.com/x.js`), not a folder — a leading one (`.claude/…`) is a folder.
+const REL_PATH_RE =
+  /^(?:\.{1,2}\/)*(?:\.?[\w@-][\w@-]*\/)(?:[\w.@-]+\/)*[\w.@-]*[\w@-]\.[A-Za-z][A-Za-z0-9]{0,9}(?::\d+(?::\d+)?)?(?![\p{L}\p{N}_/])/u;
+/** A path at the start of `text`, absolute or relative, or null. */
+const matchPath = (text: string) => PATH_RE.exec(text)?.[0] ?? REL_PATH_RE.exec(text)?.[0] ?? null;
+/** `a/b.ts:12:5` → `a/b.ts`: what is opened. */
+export const stripLine = (p: string) => p.replace(/(?::\d+){1,2}$/, "");
+// A markdown link target that is a page, not a file.
+const SCHEME_RE = /^[a-z][a-z0-9+.-]*:/i;
 // A link starts a word: "and/or" or "a/b/c" stays text.
 const atWordStart = (text: string, i: number) => i === 0 || /[\s([{"'`]/.test(text[i - 1]!);
 // A number worth spotting: 42, 1,234.5, 87%, $1.20, 3.5s, 12MB, v2.7.1, 2026-10-12, 12:30,
@@ -284,6 +305,20 @@ function UrlLink({ url }: { url: string }) {
   );
 }
 
+/** A markdown link's file target as a path: `%20` decoded, `#L12` → `:12`. */
+function decodeHref(href: string): string {
+  let p = href
+    .replace(/^file:\/\//i, "")
+    .replace(/#L(\d+)(?:-L?\d+)?$/, ":$1")
+    .replace(/#.*$/, "");
+  try {
+    p = decodeURIComponent(p);
+  } catch {
+    /* a stray % stays as written */
+  }
+  return p;
+}
+
 /** A path as a button that opens it, or as it was when nothing can. */
 function PathLink({ path, children }: { path: string; children: React.ReactNode }) {
   const open = React.useContext(OpenFileContext);
@@ -292,7 +327,7 @@ function PathLink({ path, children }: { path: string; children: React.ReactNode
     <button
       type="button"
       title={path}
-      onClick={() => open(path)}
+      onClick={() => open(stripLine(path))}
       className={`${LINK_CLASS} text-left`}
     >
       {children}
@@ -307,7 +342,7 @@ export function linkify(text: string): React.ReactNode[] {
   for (let i = 0; i < text.length;) {
     const rest = text.slice(i);
     const url = atWordStart(text, i) && URL_RE.exec(rest)?.[0];
-    const path = !url && atWordStart(text, i) && PATH_RE.exec(rest)?.[0];
+    const path = !url && atWordStart(text, i) && matchPath(rest);
     const hit = url || path;
     if (!hit) {
       buf += text[i++];
@@ -358,13 +393,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
           {codeM[1]}
         </code>
       );
-      push(
-        PATH_RE.exec(codeM[1]!)?.[0] === codeM[1] ? (
-          <PathLink path={codeM[1]!}>{code}</PathLink>
-        ) : (
-          code
-        )
-      );
+      push(matchPath(codeM[1]!) === codeM[1] ? <PathLink path={codeM[1]!}>{code}</PathLink> : code);
       i += codeM[0].length;
       continue;
     }
@@ -408,9 +437,21 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     // Markdown link
     const linkM = rest.match(/^\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/);
     if (linkM) {
+      const href = linkM[2]!;
+      // `[x.ts](src/x.ts#L12)` names a file: open it like a bare path.
+      if (
+        /^file:\/\//i.test(href) ||
+        (!SCHEME_RE.test(href) && !href.startsWith("#") && !href.startsWith("//"))
+      ) {
+        push(
+          <PathLink path={decodeHref(href)}>{renderInline(linkM[1]!, `${baseKey}-l${n}`)}</PathLink>
+        );
+        i += linkM[0].length;
+        continue;
+      }
       push(
         <a
-          href={linkM[2]!}
+          href={href}
           target="_blank"
           rel="noopener noreferrer"
           className="text-violet-700 dark:text-violet-300 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70"
@@ -431,10 +472,10 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     }
 
     // An absolute path at a word start
-    const pathM = atWordStart(text, i) ? PATH_RE.exec(rest) : null;
+    const pathM = atWordStart(text, i) ? matchPath(rest) : null;
     if (pathM) {
-      push(<PathLink path={pathM[0]}>{pathM[0]}</PathLink>);
-      i += pathM[0].length;
+      push(<PathLink path={pathM}>{pathM}</PathLink>);
+      i += pathM.length;
       continue;
     }
 

client/src/components/conversation/MessageList.tsx

@@ -179,6 +179,17 @@ function buildToolResultMap(messages: TranscriptMessage[]): Map<string, Transcri
   return map;
 }
 
+type ResultMap = ReturnType<typeof buildToolResultMap>;
+
+/** The map is rebuilt on every tail append, but a block's own result keeps its
+ *  identity (old messages are kept, not copied): comparing just those lets a
+ *  memoized row skip the re-render when nothing it shows changed. */
+const sameResults = (blocks: TranscriptContent[], a: ResultMap, b: ResultMap) =>
+  a === b || blocks.every((bl) => !bl.id || a.get(bl.id) === b.get(bl.id));
+
+const sameBlocks = (a: TranscriptContent[], b: TranscriptContent[]) =>
+  a === b || (a.length === b.length && a.every((bl, i) => bl === b[i]));
+
 /** The whole prompt a message was answered from: `input_tokens` is only its
  *  uncached tail (a few tokens once the cache is warm), the rest is cache. */
 export function promptTokens(u: NonNullable<TranscriptMessage["usage"]>): number {
@@ -544,7 +555,7 @@ export function chatItems(messages: TranscriptMessage[], keys: string[]): Item[]
 
 /** Claude Desktop's end-of-turn card: the files the turn changed, each with
  *  the lines added and removed. A call still running or failed is left out. */
-function EditedFiles({
+function EditedFilesCard({
   blocks,
   toolResultMap,
   onOpenFile,
@@ -614,8 +625,15 @@ function EditedFiles({
     </div>
   );
 }
+const EditedFiles = memo(
+  EditedFilesCard,
+  (p, n) =>
+    p.onOpenFile === n.onOpenFile &&
+    sameBlocks(p.blocks, n.blocks) &&
+    sameResults(n.blocks, p.toolResultMap, n.toolResultMap)
+);
 
-export function MessageList({
+function MessageListView({
   messages,
   loading,
   onOpenFile,
@@ -870,8 +888,16 @@ function RunningStep({
   const { t } = useTranslation("sessions");
   const [now, setNow] = useState(() => Date.now());
   const [showAll, setShowAll] = useState(false);
+  const boxRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    const timer = window.setInterval(() => setNow(Date.now()), 1000);
+    // A hidden tab or a hidden pane (another workspace, kept mounted) shows
+    // no clock: skip the re-render until it is on screen again.
+    const timer = window.setInterval(() => {
+      const el = boxRef.current;
+      if (document.visibilityState !== "visible" || (el && el.getClientRects().length === 0))
+        return;
+      setNow(Date.now());
+    }, 1000);
     return () => window.clearInterval(timer);
   }, []);
   const counted = useCountUp(tokens);
@@ -893,7 +919,7 @@ function RunningStep({
   ].filter(Boolean);
   const amber = waiting || quiet;
   return (
-    <div data-testid="chat-running-step" className="space-y-1 text-sm text-fg-muted">
+    <div ref={boxRef} data-testid="chat-running-step" className="space-y-1 text-sm text-fg-muted">
       <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
         {waiting ? (
           <Hand className="h-3.5 w-3.5 flex-shrink-0 text-status-warning" />
@@ -951,9 +977,16 @@ function RunningStep({
 }
 
 /** Under a turn that ended: how long it took and the output it made. */
+/** An option's label carries the model's " (Recommended)" marker into the
+ *  answer the CLI records; the user's pick reads without it (every picked
+ *  label of a multi-select answer too). */
+function stripRecommended(answer: string | undefined): string | undefined {
+  return answer?.replace(/\s*\(recommended\)/gi, "").trim();
+}
+
 /** An AskUserQuestion: each question with the answer the user picked or
- *  typed (the result's `answers`), "declined" when they refused it, no answer
- *  yet while the CLI still asks. */
+ *  typed (the result's `answers`, minus the " (Recommended)" marker),
+ *  "declined" when they refused it, no answer yet while the CLI still asks. */
 function AskCard({
   block,
   result,
@@ -972,7 +1005,7 @@ function AskCard({
       className="space-y-2 rounded-xl border border-border px-3 py-2 text-sm"
     >
       {questions.map((q, i) => {
-        const answer = result?.answers?.[q];
+        const answer = stripRecommended(result?.answers?.[q]);
         return (
           <div key={i}>
             <div className="flex items-start gap-1.5 text-fg-secondary">
@@ -1362,7 +1395,7 @@ function WorkStep({
 
 /** What the assistant did between two replies as one line, opening onto
  *  one framed list of its steps. */
-const WorkGroup = memo(function WorkGroup({
+function WorkGroupLine({
   blocks,
   toolResultMap,
 }: {
@@ -1384,11 +1417,16 @@ const WorkGroup = memo(function WorkGroup({
       </Disclosure>
     </div>
   );
-});
+}
+const WorkGroup = memo(
+  WorkGroupLine,
+  (p, n) =>
+    sameBlocks(p.blocks, n.blocks) && sameResults(n.blocks, p.toolResultMap, n.toolResultMap)
+);
 
 /** One user/assistant row. Memoized: a live tail append re-renders only the
  *  new rows; its thinking-block expansion is its own state, kept by key. */
-const MessageRow = memo(function MessageRow({
+function MessageRowView({
   msg,
   toolResultMap,
 }: {
@@ -1507,4 +1545,11 @@ const MessageRow = memo(function MessageRow({
       </div>
     </div>
   );
-});
+}
+const MessageRow = memo(
+  MessageRowView,
+  (p, n) => p.msg === n.msg && sameResults(n.msg.content, p.toolResultMap, n.toolResultMap)
+);
+
+/** Memoized: its owner re-renders on scroll state and its parent's typing. */
+export const MessageList = memo(MessageListView);

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

@@ -0,0 +1,96 @@
+/**
+ * @file ConversationView.hidden.test.tsx
+ * @description A chat kept mounted in a hidden pane (another workspace or
+ * tab, `display:none`) does not follow the live stream: a new_event for its
+ * session fetches nothing while its box is off screen, and showing it again
+ * catches the tail up once. On screen, a burst of events is throttled to one
+ * fetch at once plus one after the burst.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { act, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ConversationView } from "../ConversationView";
+import { api } from "../../../lib/api";
+import { eventBus } from "../../../lib/eventBus";
+
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      sessions: {
+        transcripts: vi.fn(async () => ({ transcripts: [] })),
+        transcript: vi.fn(async () => ({
+          messages: [
+            {
+              type: "user",
+              content: [{ type: "text", text: "hello" }],
+              timestamp: "2026-10-09T00:00:00Z",
+            },
+          ],
+          total: 1,
+          has_more: false,
+          first_line: 1,
+          last_line: 1,
+        })),
+      },
+    },
+  };
+});
+
+let intersect: ((visible: boolean) => void) | null = null;
+const original = globalThis.IntersectionObserver;
+beforeEach(() => {
+  intersect = null;
+  // @ts-expect-error test stub
+  globalThis.IntersectionObserver = class {
+    constructor(cb: (e: { isIntersecting: boolean }[]) => void) {
+      intersect = (visible) => cb([{ isIntersecting: visible }]);
+    }
+    observe() {}
+    disconnect() {}
+  };
+});
+afterEach(() => {
+  globalThis.IntersectionObserver = original;
+  vi.useRealTimers();
+  vi.clearAllMocks();
+});
+
+const event = () =>
+  act(() => eventBus.publish({ type: "new_event", data: { session_id: "s1" } } as never));
+const calls = () => vi.mocked(api.sessions.transcript).mock.calls.length;
+
+describe("ConversationView in a hidden pane", () => {
+  it("fetches nothing while hidden and catches up once when shown", async () => {
+    render(<ConversationView sessionId="s1" fill live />);
+    await screen.findByText("hello");
+    const before = calls();
+
+    act(() => intersect?.(false));
+    event();
+    event();
+    expect(calls()).toBe(before);
+
+    act(() => intersect?.(true));
+    await act(async () => {});
+    expect(calls()).toBe(before + 1);
+  });
+
+  it("throttles a burst of events on screen", async () => {
+    render(<ConversationView sessionId="s1" fill live />);
+    await screen.findByText("hello");
+    vi.useFakeTimers();
+    const before = calls();
+    event();
+    event();
+    event();
+    // The first fetches at once; the rest wait for the throttle window.
+    expect(calls()).toBe(before + 1);
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(1600);
+    });
+    expect(calls()).toBe(before + 2);
+  });
+});

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

@@ -7,8 +7,52 @@
  */
 
 import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { MarkdownContent } from "../MarkdownContent";
+import { vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MarkdownContent, OpenFileContext } from "../MarkdownContent";
+import { resolveIn } from "../../../lib/resolvePath";
+
+function withOpen(text: string) {
+  const open = vi.fn();
+  render(
+    <OpenFileContext.Provider value={open}>
+      <MarkdownContent text={text} />
+    </OpenFileContext.Provider>
+  );
+  return open;
+}
+
+describe("file links", () => {
+  it("opens a relative path with its line suffix stripped", () => {
+    const open = withOpen("See server/lib/x.js:42 for it.");
+    fireEvent.click(screen.getByRole("button", { name: "server/lib/x.js:42" }));
+    expect(open).toHaveBeenCalledWith("server/lib/x.js");
+  });
+
+  it("opens an absolute path with a line suffix and one in inline code", () => {
+    const open = withOpen("At /a/b/c.ts:9 and `docs/API.md`.");
+    fireEvent.click(screen.getByRole("button", { name: "/a/b/c.ts:9" }));
+    fireEvent.click(screen.getByRole("button", { name: "docs/API.md" }));
+    expect(open.mock.calls).toEqual([["/a/b/c.ts"], ["docs/API.md"]]);
+  });
+
+  it("opens a markdown link to a file instead of navigating", () => {
+    const open = withOpen("[the panel](client/src/A%20B.tsx#L12) and [web](https://x.dev)");
+    fireEvent.click(screen.getByRole("button", { name: "the panel" }));
+    expect(open).toHaveBeenCalledWith("client/src/A B.tsx");
+    expect(screen.getByRole("link", { name: "web" })).toHaveAttribute("href", "https://x.dev");
+  });
+
+  it("leaves prose with slashes as text", () => {
+    withOpen("and/or, 3/4.5, github.com/x.js, TCP/IP.");
+    expect(screen.queryAllByRole("button")).toHaveLength(0);
+  });
+
+  it("resolves a relative path against the pane's folder", () => {
+    expect(resolveIn("/w/repo/", "./server/../docs/API.md")).toBe("/w/repo/docs/API.md");
+    expect(resolveIn("/w/repo", "/etc/x.conf")).toBe("/etc/x.conf");
+  });
+});
 
 describe("<MarkdownContent />", () => {
   it("renders fenced code blocks with the language label", () => {
@@ -109,4 +153,18 @@ describe("<MarkdownContent />", () => {
     expect(container.firstChild).not.toBeNull();
     expect(container.querySelectorAll("p, ul, ol, blockquote, pre, hr").length).toBe(0);
   });
+
+  it("renders a table that follows prose with no blank line (issue #83)", () => {
+    const text = 'Cách kiểm tra:\n| Token xoá | Số chỗ |\n|---|---|\n| `width="N"` | 29 |';
+    const { container } = render(<MarkdownContent text={text} />);
+    expect(container.querySelector("p")?.textContent).toBe("Cách kiểm tra:");
+    expect(container.querySelectorAll("th").length).toBe(2);
+    expect(container.querySelectorAll("tbody tr").length).toBe(1);
+    expect(container.textContent).not.toContain("|---|");
+  });
+
+  it("accepts a GFM divider with single dashes", () => {
+    const { container } = render(<MarkdownContent text={"| a | b |\n|-|:-:|\n| 1 | 2 |"} />);
+    expect(container.querySelectorAll("th").length).toBe(2);
+  });
 });

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

@@ -2,7 +2,7 @@
  * @file MessageList.ask.test.tsx
  * @description An AskUserQuestion call is not folded into the collapsed work
  * line: the chat shows it as its own card — each question with the answer the
- * user picked or typed, "declined" when they refused it, nothing yet while the
+ * user picked or typed (without the option's " (Recommended)" marker), "declined" when they refused it, nothing yet while the
  * CLI still waits.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -67,6 +67,25 @@ describe("an AskUserQuestion card", () => {
     expect(within(screen.getByTestId("chat-tools")).queryByText(/Commit\?/)).toBeNull();
   });
 
+  it("drops the (Recommended) marker from a picked answer", () => {
+    render(
+      <MessageList
+        loading={false}
+        messages={[
+          user("go"),
+          ask("q1", ["Commit?", "Tools?"]),
+          result("q1", {
+            answers: { "Commit?": "Yes (Recommended)", "Tools?": "Lint (Recommended), Test" },
+          }),
+        ]}
+      />
+    );
+    const card = screen.getByTestId("chat-ask");
+    expect(within(card).getByText("Yes")).toBeTruthy();
+    expect(within(card).getByText("Lint, Test")).toBeTruthy();
+    expect(within(card).queryByText(/Recommended/)).toBeNull();
+  });
+
   it("says declined when refused, and shows no answer while still asked", () => {
     const { rerender } = render(
       <MessageList loading={false} messages={[user("go"), ask("q1", ["Commit?"])]} />

client/src/components/lanes/AddLaneModal.tsx

@@ -1,13 +1,17 @@
 /**
  * @file AddLaneModal.tsx
- * @description The "+ Add lane" flow, in one of two modes chosen with a
+ * @description The "+ Add lane" flow, in one of three modes chosen with a
  * 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
- * manually-typed branch name. The user also picks which CLI drives the lane
- * (Claude Code or Codex) — this choice is immutable after creation. Either
+ * manually-typed branch name; "Clone" runs `POST /api/lanes/clone` (an
+ * https/ssh URL cloned into a folder of the user's, with their OWN SSH key or
+ * HTTPS login — a 409 `ECREDENTIALS` opens a login row, `ESSHAUTH` points to
+ * Settings → Git). There is no AI tool picker: the lane is created with the
+ * default AI tool (Settings → AI Tools), and each new session picks its own
+ * AI on the workspace home. Either
  * mode's path field can be filled by typing, by the CwdAutocomplete
  * suggestions, or by Browse (`PathPickButton`: the OS's own folder picker
  * opened by the server, the in-app `FolderBrowseModal` where it cannot be) —
@@ -21,7 +25,7 @@
 
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ChevronDown, X } from "lucide-react";
+import { X } from "lucide-react";
 import { useDialog } from "../../hooks/useDialog";
 import { CwdAutocomplete } from "../run/RunSetup";
 import { PathPickButton } from "../PathPickButton";
@@ -29,7 +33,6 @@ import { api } from "../../lib/api";
 import type { CwdSuggestion } from "../../lib/api";
 import type { Lane, LaneWorktree } from "../../lib/types";
 import { useAiTools } from "../../hooks/useAiTools";
-import { AiToolIcon } from "../AiToolIcon";
 import { readDefaultTool } from "../../lib/sessionDefaults";
 
 /** Polls the lane until the background `git worktree add` finishes (status
@@ -48,6 +51,17 @@ async function waitForProvisioned(
   }
 }
 
+/** The folder `git clone <url>` would make: the last path segment, no `.git`. */
+export function cloneDirName(url: string): string {
+  return (
+    url
+      .trim()
+      .replace(/[/:]+$/, "")
+      .split(/[/:]/)
+      .pop() || ""
+  ).replace(/\.git$/i, "");
+}
+
 /** One segment of a two-way inline choice, styled to match RunSetup's `Seg`. */
 function Seg({
   active,
@@ -97,7 +111,18 @@ export function AddLaneModal({
   cwdSuggestions: CwdSuggestion[];
 }) {
   const { t } = useTranslation(["lanes"]);
-  const [mode, setMode] = useState<"repo" | "worktree">("repo");
+  const [mode, setMode] = useState<"repo" | "worktree" | "clone">("repo");
+  // Clone mode: the URL, the folder name (blank = the URL's), and — once the
+  // server asked for one — a login for the URL's https host.
+  const [cloneUrl, setCloneUrl] = useState("");
+  const [cloneName, setCloneName] = useState("");
+  const [login, setLogin] = useState<{
+    host: string;
+    username: string;
+    token: string;
+    remember: boolean;
+  } | null>(null);
+  const [sshRefused, setSshRefused] = useState(false);
   const [sourceRepo, setSourceRepo] = useState("");
   const [title, setTitle] = useState("");
   const [branch, setBranch] = useState("");
@@ -110,27 +135,18 @@ export function AddLaneModal({
   const [branchMode, setBranchMode] = useState<"new" | "existing">("new");
   const [base, setBase] = useState("");
   const [branchesError, setBranchesError] = useState<string | null>(null);
-  // null = the default AI tool (Settings → AI Tools), resolved at submit time.
-  const [pickedTool, setPickedTool] = useState<string | null>(null);
+  // No picker: a workspace's tool is only its DEFAULT — each new session
+  // picks its own AI on the workspace home. This is the default AI tool
+  // (Settings → AI Tools), the account's own pick first while it is
+  // installed and on.
   const aiTools = useAiTools();
-  // The account's own pick (first-run setup), while it is installed and on.
   const ownTool = readDefaultTool();
-  const defaultTool =
+  const tool =
     (ownTool && aiTools.tools.some((x) => x.id === ownTool && x.installed && x.enabled)
       ? ownTool
       : null) ??
     aiTools.defaultId ??
     "claude";
-  const tool = pickedTool ?? defaultTool;
-  // Installed + enabled, the default first.
-  const toolChoices = aiTools.tools
-    .filter((x) => x.installed && x.enabled)
-    .sort((a, b) => Number(b.id === defaultTool) - Number(a.id === defaultTool));
-  const [toolListOpen, setToolListOpen] = useState(false);
-  const pickTool = (id: string) => {
-    setPickedTool(id === defaultTool ? null : id);
-    setToolListOpen(false);
-  };
   const noTools = aiTools.loaded && aiTools.defaultId === null;
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -141,6 +157,10 @@ export function AddLaneModal({
 
   const reset = () => {
     setMode("repo");
+    setCloneUrl("");
+    setCloneName("");
+    setLogin(null);
+    setSshRefused(false);
     setSourceRepo("");
     setTitle("");
     setBranch("");
@@ -148,7 +168,6 @@ export function AddLaneModal({
     setWorktrees([]);
     setBranchMode("new");
     setBase("");
-    setPickedTool(null);
     setBranchesError(null);
     setError(null);
     setBusy(false);
@@ -213,6 +232,52 @@ export function AddLaneModal({
     setBusy(true);
     setError(null);
 
+    if (mode === "clone") {
+      const url = cloneUrl.trim();
+      if (!url) return;
+      setSshRefused(false);
+      try {
+        const result = await api.lanes.clone({
+          url,
+          parent: repo,
+          name: cloneName.trim() || undefined,
+          title: name || undefined,
+          tool,
+          ...(login?.username.trim() && login.token
+            ? {
+                credentials: {
+                  username: login.username.trim(),
+                  password: login.token,
+                  remember: login.remember,
+                },
+              }
+            : {}),
+        });
+        onAdded(result.lane);
+        reset();
+        onClose();
+      } catch (err) {
+        const e = err as { code?: string; auth?: { host?: string }; message?: string };
+        const host = e.auth?.host || url;
+        if (e.code === "ECREDENTIALS") {
+          setError(t(login?.token ? "clone.loginRejected" : "clone.loginNeeded", { host }));
+          setLogin((l) => ({
+            host,
+            username: l?.username ?? "",
+            token: "",
+            remember: l?.remember ?? true,
+          }));
+        } else if (e.code === "ESSHAUTH") {
+          setSshRefused(true);
+          setError(t("clone.sshRefused", { host }));
+        } else {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+        setBusy(false);
+      }
+      return;
+    }
+
     if (mode === "repo") {
       try {
         const result = await api.lanes.ensure({
@@ -328,7 +393,6 @@ export function AddLaneModal({
   const titleId = useId();
   const panelRef = useRef<HTMLDivElement>(null);
   const cancelRef = useRef<HTMLButtonElement>(null);
-  const browseRef = useRef<HTMLButtonElement>(null);
   useDialog(open, panelRef, handleCancel, cancelRef);
 
   // A summary on screen means the lane already exists and a step failed, so
@@ -338,6 +402,8 @@ export function AddLaneModal({
   const disabled =
     !done &&
     (!sourceRepo.trim() ||
+      (mode === "clone" &&
+        (!cloneUrl.trim() || (!!login && (!login.username.trim() || !login.token)))) ||
       (mode === "worktree" &&
         (!title.trim() || !branches?.length || (branchMode === "existing" && !branch.trim()))));
 
@@ -394,81 +460,58 @@ export function AddLaneModal({
               title={t("mode.worktreeHint")}
               onClick={() => setMode("worktree")}
             />
+            <Seg
+              active={mode === "clone"}
+              label={t("mode.clone")}
+              title={t("mode.cloneHint")}
+              onClick={() => setMode("clone")}
+            />
           </div>
 
-          <div>
-            <label className="mb-1 block text-xs text-fg-secondary">{t("addLaneToolHint")}</label>
-            {noTools ? (
-              <p className="rounded-md border border-status-warning/40 bg-status-warning/10 px-2 py-1.5 text-xs text-status-warning">
-                {t("addLaneNoTools")}{" "}
-                <a href="/settings/agents" className="underline">
-                  {t("addLaneNoToolsLink")}
-                </a>
-              </p>
-            ) : (
-              <div>
-                <button
-                  type="button"
-                  aria-expanded={toolListOpen}
-                  disabled={toolChoices.length < 2}
-                  onClick={() => setToolListOpen((o) => !o)}
-                  className="flex w-full items-center gap-2 rounded-md border border-border bg-surface-2 px-2.5 py-1.5 text-left text-sm text-fg-primary hover:bg-surface-3 disabled:cursor-default disabled:hover:bg-surface-2"
-                >
-                  <AiToolIcon tool={{ id: tool, label: aiTools.label(tool) }} className="h-5 w-5" />
-                  <span className="min-w-0 flex-1 truncate">{aiTools.label(tool)}</span>
-                  {tool === defaultTool && (
-                    <span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-medium text-accent">
-                      {t("addLaneToolDefaultBadge")}
-                    </span>
-                  )}
-                  {toolChoices.length > 1 && (
-                    <ChevronDown
-                      aria-hidden
-                      className={`h-4 w-4 text-fg-muted transition-transform ${toolListOpen ? "rotate-180" : ""}`}
-                    />
-                  )}
-                </button>
-                {toolListOpen && (
-                  <div
-                    role="group"
-                    aria-label={t("addLaneToolHint")}
-                    className="mt-1.5 grid grid-cols-2 gap-1.5 sm:grid-cols-3"
-                  >
-                    {toolChoices.map((x) => (
-                      <button
-                        key={x.id}
-                        type="button"
-                        aria-pressed={x.id === tool}
-                        onClick={() => pickTool(x.id)}
-                        className={`flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors ${
-                          x.id === tool
-                            ? "border-accent bg-accent/10 text-accent"
-                            : "border-border bg-surface-2 text-fg-secondary hover:bg-surface-3 hover:text-fg-primary"
-                        }`}
-                      >
-                        <AiToolIcon tool={x} className="h-5 w-5" />
-                        <span className="min-w-0 flex-1 truncate">{x.label}</span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
+          {mode === "clone" && (
+            <div>
+              <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-url">
+                {t("clone.urlLabel")}
+              </label>
+              <input
+                id="add-lane-url"
+                value={cloneUrl}
+                onChange={(e) => {
+                  setCloneUrl(e.target.value);
+                  // A login belongs to the host it was asked for.
+                  setLogin(null);
+                  setSshRefused(false);
+                }}
+                placeholder="https://github.com/owner/repo.git"
+                spellCheck={false}
+                autoComplete="off"
+                className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+              />
+              <p className="mt-1 text-[10px] text-fg-muted">{t("clone.urlHint")}</p>
+            </div>
+          )}
+
+          {noTools && (
+            <p className="rounded-md border border-status-warning/40 bg-status-warning/10 px-2 py-1.5 text-xs text-status-warning">
+              {t("addLaneNoTools")}{" "}
+              <a href="/settings/agents" className="underline">
+                {t("addLaneNoToolsLink")}
+              </a>
+            </p>
+          )}
 
           <div>
             <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-repo">
-              {mode === "repo" ? t("addLaneRepoLabelAdopt") : t("addLaneRepoLabel")}
+              {mode === "repo"
+                ? t("addLaneRepoLabelAdopt")
+                : mode === "clone"
+                  ? t("clone.parentLabel")
+                  : t("addLaneRepoLabel")}
             </label>
             <div className="flex gap-1.5" data-tour="add-lane-folder">
-              {/* A click into the path opens the picker, as Browse does (the
-                OS's own where it can be); typing still works from the keyboard. */}
-              <div
-                className="min-w-0 flex-1"
-                onClick={(e) => {
-                  if ((e.target as HTMLElement).tagName === "INPUT") browseRef.current?.click();
-                }}
-              >
+              {/* A click into the path only focuses it — the picker opens from
+                Browse alone (#77). */}
+              <div className="min-w-0 flex-1">
                 <CwdAutocomplete
                   inputId="add-lane-repo"
                   value={sourceRepo}
@@ -476,18 +519,70 @@ export function AddLaneModal({
                   suggestions={cwdSuggestions}
                 />
               </div>
-              <PathPickButton
-                start={sourceRepo}
-                onPick={setSourceRepo}
-                showLabel
-                buttonRef={browseRef}
-              />
+              <PathPickButton start={sourceRepo} onPick={setSourceRepo} showLabel />
             </div>
             <p className="mt-1 text-[10px] text-fg-muted">
-              {mode === "repo" ? t("addLaneRepoHintAdopt") : t("addLaneRepoHint")}
+              {mode === "clone"
+                ? t("clone.parentHint", {
+                    path: `${sourceRepo.trim().replace(/[\\/]+$/, "") || "…"}/${
+                      cloneName.trim() || cloneDirName(cloneUrl) || "…"
+                    }`,
+                  })
+                : mode === "repo"
+                  ? t("addLaneRepoHintAdopt")
+                  : t("addLaneRepoHint")}
             </p>
           </div>
 
+          {mode === "clone" && (
+            <div>
+              <label className="mb-1 block text-xs text-fg-secondary" htmlFor="add-lane-clone-name">
+                {t("clone.nameLabel")}
+              </label>
+              <input
+                id="add-lane-clone-name"
+                value={cloneName}
+                onChange={(e) => setCloneName(e.target.value)}
+                placeholder={cloneDirName(cloneUrl)}
+                spellCheck={false}
+                className="w-full rounded-md border border-border-light bg-surface-0 px-3 py-1.5 font-mono text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+              />
+            </div>
+          )}
+
+          {mode === "clone" && login && (
+            <div
+              data-testid="add-lane-clone-login"
+              className="grid gap-2 rounded-md border border-border-light bg-surface-0 p-2 sm:grid-cols-2"
+            >
+              <input
+                aria-label={t("clone.username")}
+                placeholder={t("clone.username")}
+                autoComplete="off"
+                value={login.username}
+                onChange={(e) => setLogin({ ...login, username: e.target.value })}
+                className="rounded-md border border-border-light bg-surface-1 px-2 py-1 text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+              />
+              <input
+                type="password"
+                aria-label={t("clone.token")}
+                placeholder={t("clone.token")}
+                autoComplete="new-password"
+                value={login.token}
+                onChange={(e) => setLogin({ ...login, token: e.target.value })}
+                className="rounded-md border border-border-light bg-surface-1 px-2 py-1 text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+              />
+              <label className="flex items-center gap-1.5 text-[11px] text-fg-secondary sm:col-span-2">
+                <input
+                  type="checkbox"
+                  checked={login.remember}
+                  onChange={(e) => setLogin({ ...login, remember: e.target.checked })}
+                />
+                {t("clone.remember")}
+              </label>
+            </div>
+          )}
+
           {/* What this repo already has checked out. Without it the form asked
             for a branch in the dark: the one fact that decides whether a
             branch can be used at all is which worktree is holding it. */}
@@ -701,6 +796,14 @@ export function AddLaneModal({
           {error && (
             <p role="alert" className="text-xs text-status-danger">
               {error}
+              {sshRefused && (
+                <>
+                  {" "}
+                  <a href="/settings/git#git-identity" className="underline">
+                    {t("clone.sshSettings")}
+                  </a>
+                </>
+              )}
             </p>
           )}
         </div>
@@ -721,7 +824,11 @@ export function AddLaneModal({
             data-tour="add-lane-create"
             className="btn-primary text-xs disabled:opacity-50"
           >
-            {done ? t("addLaneSetupClose") : t("add")}
+            {done
+              ? t("addLaneSetupClose")
+              : busy && mode === "clone"
+                ? t("clone.cloning")
+                : t("add")}
           </button>
         </div>
       </div>

client/src/components/lanes/CloneSourcesForm.tsx

@@ -0,0 +1,188 @@
+/**
+ * @file CloneSourcesForm — a workspace's "Or clone repositories" box, under
+ * its Folders card: one URL per line, each cloned BESIDE the workspace folder
+ * (`POST /api/lanes/:id/sources/clone`, the server picks the folder) and
+ * added as an extra folder, one after another. A host that wants a login
+ * (409 `ECREDENTIALS`) opens one login row; Retry re-runs only the failed
+ * URLs with it, like Add workspace → Clone.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Check, Loader2, X } from "lucide-react";
+import { api, type LaneSourcesView } from "../../lib/api";
+
+type Row = { url: string; state: "wait" | "busy" | "done" | "failed"; note?: string };
+type Login = { host: string; username: string; token: string; remember: boolean };
+
+export function CloneSourcesForm({
+  laneId,
+  parent,
+  onAdded,
+}: {
+  laneId: number;
+  /** Where the clones land: the workspace folder's parent, shown only. */
+  parent: string;
+  onAdded: (view: LaneSourcesView) => void;
+}) {
+  const { t } = useTranslation("lanes");
+  const [text, setText] = useState("");
+  const [rows, setRows] = useState<Row[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [login, setLogin] = useState<Login | null>(null);
+
+  const urls = (s: string) => [
+    ...new Set(
+      s
+        .split("\n")
+        .map((l) => l.trim())
+        .filter(Boolean)
+    ),
+  ];
+
+  const cloneAll = async (list: string[]) => {
+    if (busy || !list.length) return;
+    setBusy(true);
+    const next: Row[] = list.map((url) => ({ url, state: "wait" }));
+    const show = () => setRows([...next]);
+    show();
+    let asked: Login | null = null;
+    for (const row of next) {
+      row.state = "busy";
+      show();
+      try {
+        const view = await api.lanes.cloneFolder(laneId, {
+          url: row.url,
+          ...(login?.username.trim() && login.token
+            ? {
+                credentials: {
+                  username: login.username.trim(),
+                  password: login.token,
+                  remember: login.remember,
+                },
+              }
+            : {}),
+        });
+        row.state = "done";
+        onAdded(view);
+      } catch (err) {
+        const e = err as { code?: string; auth?: { host?: string }; message?: string };
+        const host = e.auth?.host || row.url;
+        row.state = "failed";
+        if (e.code === "ECREDENTIALS") {
+          row.note = t(login?.token ? "clone.loginRejected" : "clone.loginNeeded", { host });
+          asked ??= {
+            host,
+            username: login?.username ?? "",
+            token: "",
+            remember: login?.remember ?? true,
+          };
+        } else if (e.code === "ESSHAUTH") {
+          row.note = t("clone.sshRefused", { host });
+        } else {
+          row.note = e.message || String(err);
+        }
+      }
+      show();
+    }
+    if (asked) setLogin(asked);
+    // What is left to do stays in the box; what was added leaves it.
+    setText(
+      next
+        .filter((r) => r.state !== "done")
+        .map((r) => r.url)
+        .join("\n")
+    );
+    setBusy(false);
+  };
+
+  const failed = rows.filter((r) => r.state === "failed").map((r) => r.url);
+
+  return (
+    <div className="space-y-2 border-t border-border-light pt-2" data-testid="workspace-clone">
+      <p className="text-[10px] uppercase tracking-wide text-fg-muted">{t("home.cloneFolders")}</p>
+      <textarea
+        data-testid="workspace-clone-input"
+        aria-label={t("home.cloneFolders")}
+        placeholder={t("home.clonePlaceholder")}
+        rows={3}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        className="w-full rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
+      />
+      <p className="text-[11px] text-fg-muted">{t("home.cloneHint", { path: parent })}</p>
+      {login && (
+        <div className="space-y-1.5 rounded border border-border-light p-2">
+          <div className="flex gap-2">
+            <input
+              aria-label={t("clone.username")}
+              placeholder={t("clone.username")}
+              value={login.username}
+              onChange={(e) => setLogin({ ...login, username: e.target.value })}
+              className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 text-[11px] text-fg-primary"
+            />
+            <input
+              type="password"
+              aria-label={t("clone.token")}
+              placeholder={t("clone.token")}
+              value={login.token}
+              onChange={(e) => setLogin({ ...login, token: e.target.value })}
+              className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 text-[11px] text-fg-primary"
+            />
+          </div>
+          <label className="flex items-center gap-1.5 text-[11px] text-fg-secondary">
+            <input
+              type="checkbox"
+              checked={login.remember}
+              onChange={(e) => setLogin({ ...login, remember: e.target.checked })}
+            />
+            {t("clone.remember")}
+          </label>
+        </div>
+      )}
+      <div className="flex justify-end gap-2">
+        {failed.length > 0 && !busy && (
+          <button type="button" onClick={() => void cloneAll(failed)} className="btn-ghost text-xs">
+            {t("home.cloneRetry")}
+          </button>
+        )}
+        <button
+          type="button"
+          data-testid="workspace-clone-run"
+          disabled={busy || !urls(text).length}
+          onClick={() => void cloneAll(urls(text))}
+          className="btn-ghost text-xs"
+        >
+          {busy ? t("clone.cloning") : t("home.cloneRun")}
+        </button>
+      </div>
+      {rows.length > 0 && (
+        <ul className="space-y-1" data-testid="workspace-clone-rows">
+          {rows.map((r) => (
+            <li key={r.url} className="text-[11px]">
+              <span className="flex items-center gap-1.5">
+                {r.state === "busy" ? (
+                  <Loader2 className="h-3 w-3 shrink-0 animate-spin text-fg-muted" />
+                ) : r.state === "done" ? (
+                  <Check
+                    className="h-3 w-3 shrink-0 text-status-success"
+                    aria-label={t("home.cloneDone")}
+                  />
+                ) : r.state === "failed" ? (
+                  <X className="h-3 w-3 shrink-0 text-status-danger" />
+                ) : (
+                  <span className="h-3 w-3 shrink-0" />
+                )}
+                <span className="min-w-0 truncate font-mono text-fg-secondary" title={r.url}>
+                  {r.url}
+                </span>
+              </span>
+              {r.note && <span className="ml-[18px] block text-status-danger">{r.note}</span>}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

client/src/components/lanes/FolderBrowseModal.tsx

@@ -1,20 +1,102 @@
 /**
  * @file A server-backed folder (or file) browser for the path inputs' Browse
- * button. Browsers refuse to expose an absolute filesystem path from a native
- * picker, so path selection here is done by browsing `GET /api/lanes/browse`
- * (immediate subdirectories of a path, plus its files for `kind="file"`)
- * instead — breadcrumb-free, just an up-one-level button and a
- * click-to-descend list; in file mode a click on a file picks it.
+ * button, laid out like the OS's own picker. Browsers refuse to expose an
+ * absolute filesystem path from a native picker, so path selection here is
+ * done by browsing `GET /api/lanes/browse` instead: back/forward/up, a
+ * clickable breadcrumb that turns into a path field (Ctrl+L), a Places column
+ * (Home, the user's workspaces, recent picks), a filter, Name/Modified columns,
+ * hidden entries on demand and New folder (`POST /api/lanes/browse/mkdir`).
+ * A click selects, a double-click or Enter opens a folder (picks a file),
+ * Backspace goes up and typing jumps to a name.
+ * An admin with a Linux account of their own (S3; the listing carries
+ * `hostHome`) opens in THEIR home; the "Server folder" tick switches the
+ * browser to the host account's home, where a workspace runs as the shared
+ * host account. It is never remembered: every open starts at the admin's own.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { FolderOpen, FolderGit2, ArrowUp, File } from "lucide-react";
+import {
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Clock,
+  Eye,
+  File,
+  FolderGit2,
+  FolderOpen,
+  FolderPlus,
+  Home,
+  Pencil,
+  Server,
+  Star,
+} from "lucide-react";
 import { api } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
+import { isSubmitEnter } from "../../lib/keys";
 import { useDialog } from "../../hooks/useDialog";
+import { useWorkLanes } from "../../hooks/useLanes";
 
-export function FolderBrowseModal({
+type Listing = Awaited<ReturnType<typeof api.lanes.browse>>;
+type Entry = Listing["entries"][number];
+
+const RECENT_KEY = "agenthub.browse.recent";
+const HIDDEN_KEY = "agenthub.browse.hidden";
+const RECENT_MAX = 8;
+
+function readStored<T>(key: string, fallback: T): T {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw ? (JSON.parse(raw) as T) : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function writeStored(key: string, value: unknown) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+    // A private window or blocked storage: the preference just isn't kept.
+  }
+}
+
+/** `[label, path]` for each level of `p`, root first. */
+function crumbs(p: string): [string, string][] {
+  const win = /^[A-Za-z]:\\/.test(p);
+  const sep = win ? "\\" : "/";
+  const parts = p.split(sep).filter(Boolean);
+  const out: [string, string][] = win ? [] : [["/", "/"]];
+  let acc = "";
+  for (const part of parts) {
+    acc = win ? (acc ? `${acc}\\${part}` : `${part}\\`) : `${acc}/${part}`;
+    out.push([part, acc]);
+  }
+  return out;
+}
+
+const baseName = (p: string) => p.split(/[\\/]/).filter(Boolean).pop() || p;
+
+type Props = {
+  open: boolean;
+  /** `file` lists files too, and picking one is the only way to select. */
+  kind?: "dir" | "file";
+  /** Path to start browsing from; omitted defaults server-side to the home dir. */
+  initialPath?: string;
+  onSelect: (path: string) => void;
+  onClose: () => void;
+};
+
+/**
+ * Mounted only while open, so a closed picker (one behind every Browse
+ * button) asks the server for nothing, and each opening starts fresh.
+ */
+export function FolderBrowseModal(props: Props) {
+  return props.open ? <BrowseDialog {...props} /> : null;
+}
+
+function BrowseDialog({
   open,
   kind = "dir",
   initialPath,
@@ -30,20 +112,67 @@ export function FolderBrowseModal({
   onClose: () => void;
 }) {
   const { t } = useTranslation(["lanes"]);
-  const [listing, setListing] = useState<Awaited<ReturnType<typeof api.lanes.browse>> | null>(null);
+  const { lanes } = useWorkLanes();
+  const [listing, setListing] = useState<Listing | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [history, setHistory] = useState<{ stack: string[]; at: number }>({ stack: [], at: -1 });
+  const [selected, setSelected] = useState<string | null>(null);
+  const [filter, setFilter] = useState("");
+  const [editing, setEditing] = useState(false);
+  const [pathText, setPathText] = useState("");
+  const [sort, setSort] = useState<{ key: "name" | "mtime"; dir: 1 | -1 }>({
+    key: "name",
+    dir: 1,
+  });
+  const [showHidden, setShowHidden] = useState(() => readStored(HIDDEN_KEY, false));
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [recent, setRecent] = useState<string[]>(() => readStored(RECENT_KEY, []));
+  // The highest folder this user may open (a member's own folder answers no
+  // parent) — breadcrumbs above it are not links.
+  const [floor, setFloor] = useState<string | null>(null);
+  const [home, setHome] = useState<string | null>(null);
+  // An admin's "Server folder" tick (S3): browse the host account's home.
+  const [hostHome, setHostHome] = useState<string | null>(null);
+  const [onHost, setOnHost] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
+  const crumbRef = useRef<HTMLDivElement>(null);
+  const typeAhead = useRef({ text: "", at: 0 });
 
-  const load = async (path?: string) => {
+  const load = async (
+    target?: string,
+    { push = true, hidden = showHidden, select = null as string | null, host = onHost } = {}
+  ) => {
     setError(null);
     try {
-      setListing(await (kind === "file" ? api.lanes.browse(path, true) : api.lanes.browse(path)));
+      const next = await api.lanes.browse(target, kind === "file", hidden, host);
+      setListing(next);
+      setSelected(select);
+      setFilter("");
+      setEditing(false);
+      if (next.home) setHome(next.home);
+      setHostHome(next.hostHome ?? null);
+      if (next.parent === null && crumbs(next.path).length > 1) setFloor(next.path);
+      if (push) {
+        setHistory((h) => {
+          if (h.stack[h.at] === next.path) return h;
+          const stack = [...h.stack.slice(0, h.at + 1), next.path];
+          return { stack, at: stack.length - 1 };
+        });
+      }
+      return true;
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
+      return false;
     }
   };
 
   useEffect(() => {
-    if (open) void load(initialPath);
+    if (!open) return;
+    setHistory({ stack: [], at: -1 });
+    setCreating(false);
+    setOnHost(false);
+    void load(initialPath, { host: false });
     // Only re-run when the modal actually opens - not on every initialPath
     // keystroke in the field behind it.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,8 +183,171 @@ export function FolderBrowseModal({
   const panel = useRef<HTMLDivElement>(null);
   useDialog(open, panel, onClose);
 
+  const entries = useMemo(() => {
+    const needle = filter.trim().toLowerCase();
+    const list = (listing?.entries ?? []).filter(
+      (e) => !needle || e.name.toLowerCase().includes(needle)
+    );
+    const by = (a: Entry, b: Entry) =>
+      sort.key === "mtime"
+        ? ((a.mtime ?? 0) - (b.mtime ?? 0)) * sort.dir
+        : a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" }) *
+          sort.dir;
+    // Folders first, as every file picker lists them.
+    return [...list].sort((a, b) => Number(!!a.file) - Number(!!b.file) || by(a, b));
+  }, [listing, filter, sort]);
+
+  const places = useMemo(() => {
+    const seen = new Set<string>();
+    return lanes
+      .filter((l) => l.cwd && !seen.has(l.cwd) && seen.add(l.cwd))
+      .map((l) => ({ label: l.title || baseName(l.cwd), path: l.cwd }));
+  }, [lanes]);
+
+  // A deep path keeps its LAST levels in view, like a native path bar.
+  useEffect(() => {
+    const el = crumbRef.current;
+    if (el) el.scrollLeft = el.scrollWidth;
+  }, [listing?.path, editing]);
+
+  useEffect(() => {
+    if (!selected) return;
+    const el = Array.from(listRef.current?.querySelectorAll<HTMLElement>("[data-path]") ?? []).find(
+      (x) => x.dataset.path === selected
+    );
+    el?.scrollIntoView?.({ block: "nearest" });
+  }, [selected]);
+
   if (!open) return null;
 
+  const finish = (picked: string) => {
+    const folder = kind === "file" ? (listing?.path ?? picked) : picked;
+    const next = [folder, ...recent.filter((r) => r !== folder)].slice(0, RECENT_MAX);
+    setRecent(next);
+    writeStored(RECENT_KEY, next);
+    onSelect(picked);
+    onClose();
+  };
+
+  const activate = (entry: Entry) => {
+    if (entry.file) finish(entry.path);
+    else void load(entry.path);
+  };
+
+  const go = (delta: -1 | 1) => {
+    const at = history.at + delta;
+    const target = history.stack[at];
+    if (target === undefined) return;
+    void load(target, { push: false }).then((ok) => {
+      if (ok) setHistory((h) => ({ ...h, at }));
+    });
+  };
+
+  const goUp = () => {
+    if (!listing?.parent) return;
+    const from = listing.path;
+    void load(listing.parent, { select: from });
+  };
+
+  const selectedEntry = entries.find((e) => e.path === selected) ?? null;
+  const target =
+    kind === "file"
+      ? selectedEntry?.file
+        ? selectedEntry.path
+        : null
+      : selectedEntry && !selectedEntry.file
+        ? selectedEntry.path
+        : (listing?.path ?? null);
+
+  const onListKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    const idx = entries.findIndex((x) => x.path === selected);
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (e.altKey && e.key === "ArrowUp") return goUp();
+      const next =
+        e.key === "ArrowDown" ? Math.min(entries.length - 1, idx + 1) : Math.max(0, idx - 1);
+      if (entries[next]) setSelected(entries[next].path);
+      return;
+    }
+    if (e.key === "Home" || e.key === "End") {
+      e.preventDefault();
+      const pick = e.key === "Home" ? entries[0] : entries[entries.length - 1];
+      if (pick) setSelected(pick.path);
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (selectedEntry) activate(selectedEntry);
+      else if (kind === "dir" && target) finish(target);
+      return;
+    }
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      goUp();
+      return;
+    }
+    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      // Typing jumps to the first name that starts with what was typed.
+      const now = Date.now();
+      const ta = typeAhead.current;
+      ta.text = now - ta.at > 800 ? e.key.toLowerCase() : ta.text + e.key.toLowerCase();
+      ta.at = now;
+      const hit = entries.find((x) => x.name.toLowerCase().startsWith(ta.text));
+      if (hit) setSelected(hit.path);
+    }
+  };
+
+  const onPanelKey = (e: KeyboardEvent<HTMLDivElement>) => {
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "l") {
+      e.preventDefault();
+      setPathText(listing?.path ?? "");
+      setEditing(true);
+    } else if (e.altKey && e.key === "ArrowLeft") {
+      e.preventDefault();
+      go(-1);
+    } else if (e.altKey && e.key === "ArrowRight") {
+      e.preventDefault();
+      go(1);
+    }
+  };
+
+  const createFolder = async () => {
+    const name = newName.trim();
+    if (!name || !listing) return;
+    setError(null);
+    try {
+      const made = await api.lanes.mkdir(listing.path, name);
+      setCreating(false);
+      setNewName("");
+      await load(listing.path, { push: false, select: made.path });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  // Switch between the admin's own home and the host account's, and open it.
+  const toggleHost = () => {
+    const next = !onHost;
+    setOnHost(next);
+    void load(undefined, { host: next });
+  };
+
+  const toggleHidden = () => {
+    const next = !showHidden;
+    setShowHidden(next);
+    writeStored(HIDDEN_KEY, next);
+    if (listing) void load(listing.path, { push: false, hidden: next, select: selected });
+  };
+
+  const iconBtn =
+    "flex h-7 w-7 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-2 disabled:opacity-40 disabled:hover:bg-transparent";
+  const placeBtn = (active: boolean) =>
+    `flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs ${
+      active ? "bg-surface-2 text-fg-primary" : "text-fg-secondary hover:bg-surface-2"
+    }`;
+  const path = listing?.path ?? "";
+  const floorDepth = floor ? crumbs(floor).length : 0;
+
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
@@ -64,82 +356,362 @@ export function FolderBrowseModal({
     >
       <div
         ref={panel}
-        className="relative flex max-h-[70vh] w-full max-w-md flex-col rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
+        className="relative flex h-[min(80vh,640px)] w-full max-w-3xl flex-col rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
         onClick={(e) => e.stopPropagation()}
+        onKeyDown={onPanelKey}
         role="dialog"
         aria-modal="true"
         aria-label={kind === "file" ? t("browse.fileTitle") : t("browse.title")}
         data-tour="folder-browse"
       >
-        <div className="border-b border-border p-3">
-          <div className="truncate font-mono text-xs text-fg-secondary" title={listing?.path}>
-            {listing?.path || "…"}
+        {/* Toolbar: history, up, and the breadcrumb / path field. */}
+        <div className="flex items-center gap-1 border-b border-border p-2">
+          <button
+            type="button"
+            className={iconBtn}
+            onClick={() => go(-1)}
+            disabled={history.at <= 0}
+            title={t("browse.back")}
+            aria-label={t("browse.back")}
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            className={iconBtn}
+            onClick={() => go(1)}
+            disabled={history.at >= history.stack.length - 1}
+            title={t("browse.forward")}
+            aria-label={t("browse.forward")}
+          >
+            <ArrowRight className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            className={iconBtn}
+            onClick={goUp}
+            disabled={!listing?.parent}
+            title={t("browse.up")}
+            aria-label={t("browse.up")}
+          >
+            <ArrowUp className="h-4 w-4" />
+          </button>
+          {editing ? (
+            <input
+              autoFocus
+              value={pathText}
+              onChange={(e) => setPathText(e.target.value)}
+              onKeyDown={(e) => {
+                if (isSubmitEnter(e)) {
+                  e.preventDefault();
+                  if (pathText.trim()) void load(pathText.trim());
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setEditing(false);
+                }
+              }}
+              onBlur={() => setEditing(false)}
+              aria-label={t("browse.editPath")}
+              spellCheck={false}
+              className="input min-w-0 flex-1 font-mono text-xs"
+            />
+          ) : (
+            <div
+              ref={crumbRef}
+              className="flex min-w-0 flex-1 items-center overflow-x-auto rounded-md border border-border-light px-1 py-0.5"
+              onDoubleClick={() => {
+                setPathText(path);
+                setEditing(true);
+              }}
+            >
+              {crumbs(path).map(([label, p], i, all) => {
+                const last = i === all.length - 1;
+                const locked = i + 1 < floorDepth;
+                return (
+                  <span key={p} className="flex shrink-0 items-center">
+                    {i > 0 && all[i - 1]?.[0] !== "/" && (
+                      <span className="px-0.5 text-fg-muted">›</span>
+                    )}
+                    <button
+                      type="button"
+                      disabled={last || locked}
+                      onClick={() => void load(p, { select: all[i + 1]?.[1] ?? null })}
+                      className={`rounded px-1 py-0.5 font-mono text-xs ${
+                        last
+                          ? "font-medium text-fg-primary"
+                          : locked
+                            ? "text-fg-muted"
+                            : "text-fg-secondary hover:bg-surface-2"
+                      }`}
+                    >
+                      {label}
+                    </button>
+                  </span>
+                );
+              })}
+            </div>
+          )}
+          <button
+            type="button"
+            className={iconBtn}
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => {
+              setPathText(path);
+              setEditing((v) => !v);
+            }}
+            title={t("browse.editPath")}
+            aria-label={t("browse.editPath")}
+          >
+            <Pencil className="h-3.5 w-3.5" />
+          </button>
+        </div>
+
+        <div className="flex min-h-0 flex-1">
+          {/* Places */}
+          <nav
+            className="hidden w-44 shrink-0 overflow-y-auto border-r border-border p-2 sm:block"
+            aria-label={t("browse.places")}
+          >
+            {home && (
+              <button
+                type="button"
+                className={placeBtn(path === home)}
+                onClick={() => void load(home)}
+                title={home}
+              >
+                <Home className="h-3.5 w-3.5 shrink-0" />
+                <span className="truncate">{t("browse.home")}</span>
+              </button>
+            )}
+            {places.length > 0 && (
+              <>
+                <div className="mt-3 flex items-center gap-1 px-2 pb-1 text-[10px] font-medium uppercase tracking-wide text-fg-muted">
+                  <Star className="h-3 w-3" />
+                  {t("browse.workspaces")}
+                </div>
+                {places.map((pl) => (
+                  <button
+                    key={pl.path}
+                    type="button"
+                    className={placeBtn(path === pl.path)}
+                    onClick={() => void load(pl.path)}
+                    title={pl.path}
+                  >
+                    <FolderGit2 className="h-3.5 w-3.5 shrink-0 text-accent" />
+                    <span className="truncate">{pl.label}</span>
+                  </button>
+                ))}
+              </>
+            )}
+            {recent.length > 0 && (
+              <>
+                <div className="mt-3 flex items-center gap-1 px-2 pb-1 text-[10px] font-medium uppercase tracking-wide text-fg-muted">
+                  <Clock className="h-3 w-3" />
+                  {t("browse.recent")}
+                </div>
+                {recent.map((r) => (
+                  <button
+                    key={r}
+                    type="button"
+                    className={placeBtn(path === r)}
+                    onClick={() => void load(r)}
+                    title={r}
+                  >
+                    <FolderOpen className="h-3.5 w-3.5 shrink-0" />
+                    <span className="truncate">{baseName(r)}</span>
+                  </button>
+                ))}
+              </>
+            )}
+          </nav>
+
+          {/* Listing */}
+          <div className="flex min-w-0 flex-1 flex-col">
+            <div className="flex items-center gap-2 border-b border-border p-2">
+              <input
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    if (entries[0]) setSelected(entries[0].path);
+                    listRef.current?.focus();
+                  } else if (isSubmitEnter(e) && entries.length === 1 && entries[0]) {
+                    e.preventDefault();
+                    activate(entries[0]);
+                  }
+                }}
+                placeholder={t("browse.filter")}
+                aria-label={t("browse.filter")}
+                className="input min-w-0 flex-1 text-xs"
+              />
+            </div>
+            <div className="flex items-center border-b border-border px-3 py-1 text-[10px] font-medium uppercase tracking-wide text-fg-muted">
+              {(["name", "mtime"] as const).map((key) => (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() =>
+                    setSort((s) => ({ key, dir: s.key === key ? (s.dir === 1 ? -1 : 1) : 1 }))
+                  }
+                  className={`${key === "name" ? "flex-1 text-left" : "hidden w-32 text-right sm:block"} hover:text-fg-secondary`}
+                >
+                  {key === "name" ? t("browse.name") : t("browse.modified")}
+                  {sort.key === key && (sort.dir === 1 ? " ↑" : " ↓")}
+                </button>
+              ))}
+            </div>
+            <div
+              ref={listRef}
+              tabIndex={0}
+              role="listbox"
+              aria-label={path}
+              onKeyDown={onListKey}
+              className="min-h-0 flex-1 overflow-y-auto p-1 outline-none"
+            >
+              {error && (
+                <p role="alert" className="p-2 text-xs text-status-danger">
+                  {error}
+                </p>
+              )}
+              {creating && (
+                <div className="flex items-center gap-2 px-2 py-1">
+                  <FolderPlus className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
+                  <input
+                    autoFocus
+                    value={newName}
+                    onChange={(e) => setNewName(e.target.value)}
+                    onKeyDown={(e) => {
+                      e.stopPropagation();
+                      if (isSubmitEnter(e)) {
+                        e.preventDefault();
+                        void createFolder();
+                      } else if (e.key === "Escape") {
+                        e.preventDefault();
+                        setCreating(false);
+                      }
+                    }}
+                    placeholder={t("browse.newFolderName")}
+                    aria-label={t("browse.newFolderName")}
+                    className="input min-w-0 flex-1 text-xs"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => void createFolder()}
+                    disabled={!newName.trim()}
+                    className="btn-primary text-xs disabled:opacity-50"
+                  >
+                    {t("browse.create")}
+                  </button>
+                </div>
+              )}
+              {entries.map((entry) => {
+                const isSel = entry.path === selected;
+                return (
+                  <div
+                    key={entry.path}
+                    data-path={entry.path}
+                    role="option"
+                    aria-selected={isSel}
+                    onClick={() => setSelected(entry.path)}
+                    onDoubleClick={() => activate(entry)}
+                    className={`flex cursor-default select-none items-center gap-2 rounded px-2 py-1.5 text-xs ${
+                      isSel ? "bg-accent-solid text-white" : "text-fg-primary hover:bg-surface-2"
+                    }`}
+                  >
+                    {entry.file ? (
+                      <File className={`h-3.5 w-3.5 shrink-0 ${isSel ? "" : "text-fg-muted"}`} />
+                    ) : entry.isGitRepo ? (
+                      <FolderGit2
+                        className={`h-3.5 w-3.5 shrink-0 ${isSel ? "" : "text-accent"}`}
+                      />
+                    ) : (
+                      <FolderOpen
+                        className={`h-3.5 w-3.5 shrink-0 ${isSel ? "" : "text-fg-muted"}`}
+                      />
+                    )}
+                    <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+                    <span
+                      className={`hidden w-32 shrink-0 text-right tabular-nums sm:block ${isSel ? "" : "text-fg-muted"}`}
+                    >
+                      {entry.mtime ? formatDateTime(new Date(entry.mtime).toISOString()) : ""}
+                    </span>
+                  </div>
+                );
+              })}
+              {listing && entries.length === 0 && (
+                <p className="p-2 text-xs text-fg-muted">
+                  {filter.trim() ? t("browse.noMatch") : t("browse.empty")}
+                </p>
+              )}
+            </div>
           </div>
         </div>
 
-        <div className="flex-1 overflow-y-auto p-1">
-          {error && (
-            <p role="alert" className="p-2 text-xs text-status-danger">
-              {error}
-            </p>
-          )}
-          {listing?.parent && (
-            <button
-              type="button"
-              onClick={() => load(listing.parent!)}
-              className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-fg-secondary hover:bg-surface-2"
-            >
-              <ArrowUp className="h-3.5 w-3.5" />
-              ..
-            </button>
-          )}
-          {listing?.entries.map((entry) => (
-            <button
-              key={entry.path}
-              type="button"
-              onClick={() => {
-                if (!entry.file) return void load(entry.path);
-                onSelect(entry.path);
-                onClose();
-              }}
-              className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-fg-primary hover:bg-surface-2"
-            >
-              {entry.file ? (
-                <File className="h-3.5 w-3.5 text-fg-muted" />
-              ) : entry.isGitRepo ? (
-                <FolderGit2 className="h-3.5 w-3.5 text-accent" />
-              ) : (
-                <FolderOpen className="h-3.5 w-3.5 text-fg-muted" />
-              )}
-              <span className="truncate">{entry.name}</span>
-            </button>
-          ))}
-          {listing && listing.entries.length === 0 && !listing.parent && (
-            <p className="p-2 text-xs text-fg-muted">{t("browse.empty")}</p>
-          )}
-        </div>
-
-        <div className="flex items-center justify-end gap-2 border-t border-border p-3">
-          <button
-            type="button"
-            onClick={onClose}
-            className="btn-ghost border border-border text-xs"
+        {/* Footer: what will be picked, and the actions. */}
+        <div className="border-t border-border p-2">
+          <div
+            // rtl so a long path loses its START to the ellipsis, not the folder.
+            className="truncate px-1 pb-2 text-left font-mono text-xs text-fg-secondary [direction:rtl]"
+            title={target ?? undefined}
           >
-            {t("destructive.cancel")}
-          </button>
-          {kind === "dir" && (
+            <bdi>{target ?? "…"}</bdi>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
             <button
               type="button"
-              disabled={!listing}
               onClick={() => {
-                if (listing) onSelect(listing.path);
-                onClose();
+                setNewName("");
+                setCreating(true);
               }}
-              className="btn-primary text-xs disabled:opacity-50"
+              disabled={!listing}
+              className="btn-ghost flex items-center gap-1 border border-border text-xs disabled:opacity-50"
             >
-              {t("browse.select")}
+              <FolderPlus className="h-3.5 w-3.5" />
+              {t("browse.newFolder")}
             </button>
-          )}
+            <label className="flex cursor-pointer items-center gap-1 text-xs text-fg-secondary">
+              <input type="checkbox" checked={showHidden} onChange={toggleHidden} />
+              <Eye className="h-3.5 w-3.5" />
+              {t("browse.showHidden")}
+            </label>
+            {hostHome && (
+              <label
+                className="flex cursor-pointer items-center gap-1 text-xs text-fg-secondary"
+                title={t("browse.hostFolderHint", { path: hostHome })}
+              >
+                <input
+                  type="checkbox"
+                  checked={onHost}
+                  onChange={toggleHost}
+                  data-testid="browse-host-folder"
+                />
+                <Server className="h-3.5 w-3.5" />
+                {t("browse.hostFolder")}
+              </label>
+            )}
+            <span className="hidden flex-1 truncate text-[10px] text-fg-muted md:block">
+              {t("browse.hint")}
+            </span>
+            <div className="ml-auto flex items-center gap-2">
+              <button
+                type="button"
+                onClick={onClose}
+                className="btn-ghost border border-border text-xs"
+              >
+                {t("destructive.cancel")}
+              </button>
+              <button
+                type="button"
+                disabled={!target}
+                onClick={() => target && finish(target)}
+                className="btn-primary text-xs disabled:opacity-50"
+              >
+                {kind === "file" ? t("browse.selectFile") : t("browse.select")}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

client/src/components/lanes/LaneChangesPanel.tsx

@@ -87,6 +87,7 @@ import {
   ChevronsDownUp,
   ChevronsUpDown,
   Check,
+  Download,
   Code2,
   Columns2,
   Eye,
@@ -103,6 +104,7 @@ import {
   UnfoldVertical,
 } from "lucide-react";
 import { api, gitTarget } from "../../lib/api";
+import { usePermissions } from "../AuthGate";
 import { pasteToLane } from "../../lib/panePaste";
 import { confirmDialog, confirmDiscard as askDiscard } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
@@ -121,6 +123,7 @@ import {
   type LaneDiffChange,
 } from "./LaneDiffView";
 import { LaneConflictView } from "./LaneConflictView";
+import { FileExplorer } from "./FileExplorer";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
 import { LaneGitHeader, useLaneGitFacts } from "./LaneGitHeader";
@@ -807,8 +810,12 @@ export function LaneChangesPanel({
   wide = full,
   onDirtyChange,
   openRequest = null,
+  filesChanged = 0,
 }: {
   laneId: number;
+  /** Bumped when files changed outside this panel (the header's File
+   *  Explorer): the tree is read again, its open folders kept open. */
+  filesChanged?: number;
   /** Open this file (relative to the panel's folder); a new `nonce` asks again. */
   openRequest?: { path: string; nonce: number } | null;
   /** The whole-file editor holds unsaved text (true) or not (false). */
@@ -852,6 +859,9 @@ export function LaneChangesPanel({
   // history and the tree too, not just the diff `load` re-reads.
   const [reread, setReread] = useState(0);
   const [range, setRange] = useState<LaneChangeRange>("work");
+  // Local mode: the files are already on this machine — no upload, download
+  // or File Explorer (the desktop's file manager does all three).
+  const { local } = usePermissions();
   const [mode, setMode] = useState<Mode>("overview");
   const [openFile, setOpenFile] = useState<string | null>(null);
   // An image opens as a picture, never as text or a binary diff.
@@ -867,6 +877,16 @@ export function LaneChangesPanel({
   const [mdPreview, setMdPreview] = useState(false);
   useEffect(() => setMdPreview(false), [openFile]);
   const [data, setData] = useState<LaneChanges | null>(null);
+  // A folder that is not a repo (an empty new workspace, a parent of clones)
+  // has no changes, review or history — only its files, which Files reads
+  // from the disk. Open there instead of on a page that only says "no git".
+  // Both reads must say so: the facts alone also read "unavailable" on a
+  // network error or an older server.
+  const notRepo = git?.available === false && data?.available === false;
+  useEffect(() => {
+    if (notRepo && (mode === "overview" || mode === "review" || mode === "history"))
+      setMode(full ? "overview" : "browse");
+  }, [notRepo, mode, full]);
   const [commits, setCommits] = useState<LaneCommit[] | null>(null);
   // A folder's children, keyed by its path ("" is the root) — fetched once,
   // on first expand, and kept so re-collapsing doesn't re-fetch.
@@ -939,6 +959,13 @@ export function LaneChangesPanel({
   const [message, setMessage] = useState("");
   // The commit row amends the last commit instead of making a new one.
   const [amend, setAmend] = useState(false);
+  // The last commit is already on its upstream: the server refuses to amend
+  // it (EPUSHED), so the box is not offered — asking first and failing after
+  // the confirm only costs the user a click.
+  const headPushed = !!git?.available && !!git.upstream && git.ahead === 0 && !!git.head;
+  useEffect(() => {
+    if (headPushed) setAmend(false);
+  }, [headPushed]);
   // The files the commit takes (JetBrains' checkboxes). A path listed for the
   // first time arrives with its default; `seenPaths` is the last full list,
   // so a poll never re-ticks a file the user unticked.
@@ -1068,19 +1095,32 @@ export function LaneChangesPanel({
   }, [mode, laneId, query, reread, full, treeRootLoaded]);
 
   // A folder's children are fetched lazily, the first time it is expanded.
+  const readDir = (path: string) =>
+    api.lanes
+      .gitTree(target, path)
+      .then(forLane(laneId, (r) => setTreeChildren((prev) => ({ ...prev, [path]: r.entries }))))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
   const toggleDir = (path: string) => {
+    const opening = !expandedDirs.has(path);
     setExpandedDirs((prev) => {
       const next = new Set(prev);
       if (!next.delete(path)) next.add(path);
       return next;
     });
-    if (path in treeChildren) return;
-    void api.lanes
-      .gitTree(target, path)
-      .then(forLane(laneId, (r) => setTreeChildren((prev) => ({ ...prev, [path]: r.entries }))))
-      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+    // Every OPEN reads the folder again (the cached level shows meanwhile):
+    // files land in it from outside the panel — an agent, the terminal, the
+    // File Explorer — and a level cached while it was empty stayed empty.
+    if (opening) void readDir(path);
   };
 
+  // Files changed outside the panel: read the root and every open folder again.
+  useEffect(() => {
+    if (!filesChanged) return;
+    void readDir("");
+    for (const p of expandedDirs) void readDir(p);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filesChanged]);
+
   const [treeBusy, setTreeBusy] = useState(false);
 
   // "Expand all" is ONE read of the whole tree: a request per folder meant a
@@ -1614,8 +1654,32 @@ export function LaneChangesPanel({
               <MenuItem onSelect={pick(treeCtx.close, () => showHistory(treeCtx.menu!.item.path))}>
                 {t("changes.showHistory")}
               </MenuItem>
+              {!local && (
+                <MenuItem
+                  testId="lane-changes-menu-download"
+                  onSelect={pick(treeCtx.close, () => download(treeCtx.menu!.item.path))}
+                >
+                  {t("changes.download")}
+                </MenuItem>
+              )}
             </>
           )}
+          {!local && treeCtx.menu.item.dir && (
+            <MenuItem
+              testId="lane-changes-menu-upload"
+              onSelect={pick(treeCtx.close, () => pickUpload(treeCtx.menu!.item.path))}
+            >
+              {t("changes.uploadHere")}
+            </MenuItem>
+          )}
+          {!local && treeCtx.menu.item.dir && (
+            <MenuItem
+              testId="lane-changes-menu-explorer"
+              onSelect={pick(treeCtx.close, () => setExplorer({ path: treeCtx.menu!.item.path }))}
+            >
+              {t("changes.openInExplorer")}
+            </MenuItem>
+          )}
           <MenuItem onSelect={pick(treeCtx.close, () => copy(treeCtx.menu!.item.path))}>
             {t("changes.copyPath")}
           </MenuItem>
@@ -1861,6 +1925,61 @@ export function LaneChangesPanel({
   };
   const [rereading, runReread] = useSpin(rereadAll);
 
+  // Files tab transfers (issue #78): a download is a plain attachment link; an
+  // upload only creates, into the folder it was asked for ("" = the root).
+  const uploadInput = useRef<HTMLInputElement>(null);
+  const uploadDir = useRef("");
+  const [, setUploading] = useState(false);
+  // The File Explorer (the toolbar button where Upload was); the tree is
+  // re-read when it closes after changing anything.
+  const [explorer, setExplorer] = useState<{ path: string } | null>(null);
+  const explorerChanged = useRef(false);
+  const download = (path: string) => {
+    const a = document.createElement("a");
+    a.href = api.lanes.gitDownloadUrl(target, path);
+    a.download = path.split("/").pop() || path;
+    a.click();
+  };
+  const pickUpload = (dir: string) => {
+    uploadDir.current = dir;
+    uploadInput.current?.click();
+  };
+  const upload = async (files: File[]) => {
+    if (!files.length) return;
+    const lane = laneId;
+    const dir = uploadDir.current;
+    setUploading(true);
+    let saved = 0;
+    try {
+      for (const f of files) {
+        try {
+          await api.lanes.gitUpload(target, dir, f);
+          saved++;
+        } catch (err) {
+          toast.error(
+            t("changes.uploadFailed", {
+              name: f.name,
+              message: err instanceof Error ? err.message : String(err),
+            })
+          );
+        }
+      }
+    } finally {
+      if (laneNow.current === lane) {
+        setUploading(false);
+        if (saved) {
+          toast.success(t("changes.uploaded", { count: saved, dir: dir || "/" }));
+          // Re-read the level it landed in, and open it.
+          void api.lanes
+            .gitTree(target, dir)
+            .then(forLane(lane, (r) => setTreeChildren((prev) => ({ ...prev, [dir]: r.entries }))))
+            .catch(() => undefined);
+          if (dir) setExpandedDirs((prev) => new Set(prev).add(dir));
+        }
+      }
+    }
+  };
+
   const toggleCollapsed = (path: string) =>
     setCollapsed((prev) => {
       const next = new Set(prev);
@@ -2047,6 +2166,36 @@ export function LaneChangesPanel({
           aria-label={t("changes.quickOpen")}
           className="w-full rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
         />
+        {/* The File Explorer's button lives in the panel header now (beside
+            Full screen); this instance serves the tree's "Open in File
+            Explorer". */}
+        <FileExplorer
+          open={!!explorer}
+          laneId={laneId}
+          session={session}
+          source={source}
+          initialPath={explorer?.path ?? ""}
+          onChanged={() => (explorerChanged.current = true)}
+          onClose={() => {
+            setExplorer(null);
+            if (explorerChanged.current) {
+              explorerChanged.current = false;
+              void rereadAll();
+            }
+          }}
+        />
+        <input
+          ref={uploadInput}
+          type="file"
+          multiple
+          hidden
+          data-testid="lane-changes-upload-input"
+          onChange={(e) => {
+            const files = [...(e.target.files ?? [])];
+            e.target.value = "";
+            void upload(files);
+          }}
+        />
         {!hits && (
           <IconButton
             label={
@@ -2148,14 +2297,16 @@ export function LaneChangesPanel({
                 <ChevronLeft className="h-3 w-3" />
                 {t("changes.back")}
               </button>
-            ) : (
+            ) : notRepo && full ? null : (
               <div className="flex min-w-0 items-center rounded border border-border bg-surface-2 p-0.5">
                 {/* Files is the whole repo's tree; at full width it is the
                   sidebar already, so no button. */}
-                {(full
-                  ? (["overview", "review", "history"] as const)
-                  : (["overview", "browse", "review", "history"] as const)
-                ).map((m) => (
+                {(notRepo
+                  ? (["browse"] as const)
+                  : full
+                    ? (["overview", "review", "history"] as const)
+                    : (["overview", "browse", "review", "history"] as const)
+                ).map((m: Mode) => (
                   <button
                     key={m}
                     type="button"
@@ -2510,7 +2661,9 @@ export function LaneChangesPanel({
             browsePane
           ) : !data ? (
             <p className="text-[11px] text-fg-muted">{t("changes.loading")}</p>
-          ) : !data.available ? (
+          ) : !data.available && mode !== "file" ? (
+            // A file still opens from Files: its whole-file read is the disk's,
+            // not git's.
             <p className="text-[11px] text-fg-muted">
               {t(source ? "changes.unavailableFolder" : "changes.unavailable")}
             </p>
@@ -2566,13 +2719,16 @@ export function LaneChangesPanel({
                   </div>
                   <div className="flex flex-wrap items-center gap-1.5">
                     <label
-                      title={t("changes.amendHint")}
-                      className="flex shrink-0 cursor-pointer items-center gap-1 text-[11px] text-fg-secondary"
+                      title={headPushed ? t("changes.amendPushed") : t("changes.amendHint")}
+                      className={`flex shrink-0 items-center gap-1 text-[11px] text-fg-secondary ${
+                        headPushed ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                      }`}
                     >
                       <input
                         type="checkbox"
                         data-testid="lane-changes-amend"
                         checked={amend}
+                        disabled={headPushed}
                         onChange={(e) => setAmend(e.target.checked)}
                       />
                       {t("changes.amend")}
@@ -2758,6 +2914,18 @@ export function LaneChangesPanel({
                       {mdPreview ? t("changes.raw") : t("changes.preview")}
                     </button>
                   )}
+                  {!local && range !== "commit" && openFile && (
+                    <button
+                      type="button"
+                      data-testid="lane-file-download"
+                      onClick={() => download(openFile)}
+                      title={t("changes.download")}
+                      className="flex shrink-0 items-center gap-1 self-center rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary"
+                    >
+                      <Download className="h-3 w-3" />
+                      {t("changes.download")}
+                    </button>
+                  )}
                   {/* Only the working file is editable: a commit is history. */}
                   {/* A working file opens in the editor; the read-only diff
                       (Whole file off) keeps an Edit button back into it. */}
@@ -2838,7 +3006,9 @@ export function LaneChangesPanel({
                         collapse={!whole}
                         revertLabel={t("changes.revertBlock")}
                         value={draft}
-                        original={baseText ?? draft}
+                        // Outside a repo there is no HEAD: the edits are
+                        // shown against the text as it was opened.
+                        original={(notRepo ? text?.lines.join("\n") : baseText) ?? draft}
                         lang={langFor(openFile ?? "")}
                         label={t("changes.editorLabel", { path: openFile })}
                         onChange={setDraft}

client/src/components/lanes/LaneGitBar.tsx

@@ -242,13 +242,27 @@ export function LaneGitBar({
       void run(action, body);
     }
   };
-  const push = () =>
-    confirmRun(
+  const push = async () => {
+    let ahead = git.ahead ?? 0;
+    if (git.upstream && ahead === 0) {
+      // The facts can be up to 30 s old (an agent may have just committed):
+      // ask git again before saying there is nothing to push — and never
+      // ask to confirm pushing zero commits.
+      const read = await api.lanes.git(gitTarget(laneId, session, source)).catch(() => null);
+      const fresh = read?.available ? read : null;
+      ahead = fresh?.ahead ?? 0;
+      if (fresh?.upstream && ahead === 0) {
+        toast.info(t("gitBar.nothingToPush", { upstream: fresh.upstream }));
+        onChanged();
+        return;
+      }
+    }
+    return confirmRun(
       git.upstream
         ? {
             title: t("gitBar.push"),
             message: t("gitBar.pushConfirm", {
-              count: git.ahead ?? 0,
+              count: ahead,
               branch: git.branch,
               upstream: git.upstream,
             }),
@@ -259,6 +273,7 @@ export function LaneGitBar({
           },
       "push"
     );
+  };
   const publish = () =>
     confirmRun(
       {

client/src/components/lanes/SessionMenu.tsx

@@ -4,20 +4,21 @@
  * the sidebar's **New session** row). Every item is something the row already
  * does: open it the way its click does (a live pane attaches, an ended session
  * opens its conversation — never a resume), open a live one in a split,
- * rename / archive / unarchive when the list offers them, copy its id, open
- * its analysis page, and close its live tab (`DELETE /api/run/:id`, what the
- * tab's X does — after the same confirm for an AI tab, which may be mid-turn).
+ * rename / pin / unpin / archive / unarchive when the list offers them, copy its id, open
+ * its analysis page, and end its live tab as the tab's buttons do (`endRuns`,
+ * after the same confirm for an AI tab, which may be mid-turn): **Sleep** stops
+ * it and keeps the session listed to resume later, **Close tab** stops it and
+ * archives the session.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { api, type RunHandle } from "../../lib/api";
+import type { RunHandle } from "../../lib/api";
 import type { Session } from "../../lib/types";
 import { ContextMenu, MenuItem, MenuSeparator, type MenuPoint } from "../ContextMenu";
-import { confirmDialog } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
-import { toast } from "../../lib/toast";
+import { canSleep, endRuns } from "../../lib/stopSession";
 
 export function SessionMenu({
   laneId,
@@ -29,6 +30,7 @@ export function SessionMenu({
   onRename,
   onArchive,
   onUnarchive,
+  onPin,
 }: MenuPoint & {
   laneId: number;
   session: Session | null;
@@ -38,6 +40,8 @@ export function SessionMenu({
   onRename?: () => void;
   onArchive?: () => void;
   onUnarchive?: () => void;
+  /** Pin or unpin (by `session.pinned_at`), where the list offers it. */
+  onPin?: () => void;
 }) {
   const { t } = useTranslation("lanes");
   const navigate = useNavigate();
@@ -47,24 +51,12 @@ export function SessionMenu({
     onClose();
     fn();
   };
-  const closeTab = async () => {
+  // Stop archives the session; Sleep keeps it listed to resume later
+  // (`endRuns` asks first for an AI pane, which may be mid-turn).
+  const endTab = (sleep: boolean) => {
     if (!run) return;
     onClose();
-    if (
-      run.tool !== "shell" &&
-      !(await confirmDialog({
-        title: t("tabs.stopTitle", { name: session?.name || t("tree.newSession") }),
-        message: t("tabs.stopBody"),
-        confirmLabel: t("tabs.stopConfirm"),
-        destructive: true,
-      }))
-    )
-      return;
-    try {
-      await api.run.kill(run.id);
-    } catch (err) {
-      toast.error(err);
-    }
+    void endRuns([run], { sleep, name: session?.name || t("tree.newSession"), t });
   };
 
   return (
@@ -84,6 +76,11 @@ export function SessionMenu({
         </MenuItem>
       )}
       {onRename && <MenuItem onSelect={pick(onRename)}>{t("menu.rename")}</MenuItem>}
+      {onPin && session && (
+        <MenuItem onSelect={pick(onPin)}>
+          {t(session.pinned_at ? "sessionMenu.unpin" : "sessionMenu.pin")}
+        </MenuItem>
+      )}
       {session && (
         <>
           <MenuItem onSelect={pick(() => navigate(`/sessions/${session.id}`))}>
@@ -97,8 +94,13 @@ export function SessionMenu({
       {(run || onArchive || onUnarchive) && <MenuSeparator />}
       {onUnarchive && <MenuItem onSelect={pick(onUnarchive)}>{t("tree.unarchive")}</MenuItem>}
       {onArchive && <MenuItem onSelect={pick(onArchive)}>{t("sessionMenu.archive")}</MenuItem>}
+      {canSleep(run) && (
+        <MenuItem testId="session-menu-sleep" onSelect={() => endTab(true)}>
+          {t("tabs.sleep")}
+        </MenuItem>
+      )}
       {run && (
-        <MenuItem danger onSelect={() => void closeTab()}>
+        <MenuItem danger onSelect={() => endTab(false)}>
           {t("tabs.close")}
         </MenuItem>
       )}

client/src/components/lanes/WorkspaceContext.tsx

@@ -4,7 +4,8 @@
  * /api/lanes/:id/sources…`, see server/lib/lane-sources.js). Shown as the
  * workspace home's right column and, `compact`, folded at the bottom of the
  * session view's Changes panel. Folder suggestions are the repo's untracked
- * worktrees from `GET /api/projects`, filtered by Settings → Worktrees.
+ * worktrees from `GET /api/projects`, filtered by Settings → Worktrees; the
+ * same form clones related repos beside the workspace (`CloneSourcesForm`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -21,6 +22,7 @@ import { useProjectTreePrefs } from "../../lib/projectTreePrefs";
 import { MarkdownPreview } from "../MarkdownPreview";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { PathPickButton } from "../PathPickButton";
+import { CloneSourcesForm } from "./CloneSourcesForm";
 
 function fmtBytes(n: number | null): string {
   if (!n) return "";
@@ -436,6 +438,16 @@ function ContextBody({
               )}
             </form>
           )}
+          {folderOpen && (
+            <CloneSourcesForm
+              laneId={lane.id}
+              parent={lane.cwd.replace(/\/+$/, "").replace(/\/[^/]*$/, "") || "/"}
+              onAdded={(next) => {
+                setView(next);
+                onSourcesChange?.(next);
+              }}
+            />
+          )}
         </section>
       </aside>
 

client/src/components/lanes/WorkspaceSessionList.tsx

@@ -1,12 +1,13 @@
 /**
  * @file WorkspaceSessionList — the sessions under an expanded workspace in the
  * sidebar: the ones the workspace OWNS and has not archived
- * (`GET /api/sessions?lane=<id>&archived=0`, newest first, the ones with a live
- * pane above the ended ones) — never the other
+ * (`GET /api/sessions?lane=<id>&archived=0&pinned_first=1`, newest first —
+ * pinned ones on top in pin order, then the ones with a live pane, then the
+ * ended ones; a pin is `PATCH {pinned}`, issue #80) — never the other
  * sessions that ran in its folder. A row's dot
  * shows its state (`sessionDot`: live pane, needs you, error) and its right
  * edge the AI tool the session ran on (`sessions.tool`); double-click
- * renames it and its hover button archives it (`PATCH {name}` / `{archived}`,
+ * renames it, its hover buttons pin/unpin and archive it (`PATCH {name}` / `{archived}`,
  * which deletes nothing); a right-click opens the same actions and more
  * (`SessionMenu`). A session with a LIVE pane (a `GET /api/run` handle
  * carrying its session id) opens that tmux pane on the Workspace page
@@ -33,7 +34,7 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { confirmDialog } from "../../lib/confirm";
 import { isSubmitEnter } from "../../lib/keys";
-import { Archive, GitBranch, SquareTerminal } from "lucide-react";
+import { Archive, GitBranch, Pin, PinOff, SquareTerminal } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import { api, type RunHandle } from "../../lib/api";
@@ -278,17 +279,21 @@ export function WorkspaceSessionList({
     3000
   );
   const refreshKey = `${hookKey}:${version}`;
-  const own = useSessionPage({ lane: lane.id, archived: false, limit }, refreshKey);
+  const own = useSessionPage(
+    { lane: lane.id, archived: false, pinnedFirst: true, limit },
+    refreshKey
+  );
   const sessions = own?.sessions ?? (own === null ? null : []);
   const more = own ? Math.max(0, own.total - own.sessions.length) : 0;
 
   const q = query.trim().toLowerCase();
   const runFor = (s: Session) => liveRunFor(lane, liveRuns, s.id);
-  // Live sessions first, ended ones under them — each group stays newest
-  // first (the sort is stable over the server's order).
+  // Pinned sessions first, then live ones, then ended ones — each group in
+  // the server's order (pin order, else newest first; the sort is stable).
+  const rank = (s: Session) => (s.pinned_at ? 0 : runFor(s) ? 1 : 2);
   const shown = (sessions ?? [])
     .filter((s) => !q || (s.name ?? "").toLowerCase().includes(q) || s.id.startsWith(q))
-    .sort((a, b) => Number(!!runFor(b)) - Number(!!runFor(a)));
+    .sort((a, b) => rank(a) - rank(b));
   // A live tab whose session has no row yet: shown as a New session at the
   // top, like Claude Desktop, until its first hook brings the real row. Not
   // during a search — it has no name to match.
@@ -336,7 +341,10 @@ export function WorkspaceSessionList({
     if (count !== null) onMatches?.(count);
   }, [count, onMatches]);
 
-  const patch = async (s: Session, body: { name?: string; archived?: boolean }) => {
+  const patch = async (
+    s: Session,
+    body: { name?: string; archived?: boolean; pinned?: boolean }
+  ) => {
     setError(null);
     try {
       await api.sessions.patch(s.id, body);
@@ -533,6 +541,13 @@ export function WorkspaceSessionList({
                 />
                 <span className="sr-only">{t(`tree.state.${sessionDotLabel(s, !!run)}`)}</span>
                 <span className="truncate">{s.name || s.id.slice(0, 8)}</span>
+                {s.pinned_at && (
+                  <Pin
+                    data-testid={`workspace-session-pinned-${s.id}`}
+                    aria-label={t("tree.pinned")}
+                    className="h-3 w-3 shrink-0 text-fg-muted"
+                  />
+                )}
                 {sessionWorktreeName(lane, s) && (
                   <GitBranch
                     data-testid={`workspace-session-worktree-${s.id}`}
@@ -540,7 +555,9 @@ export function WorkspaceSessionList({
                     className="h-3 w-3 shrink-0 text-fg-muted"
                   />
                 )}
-                <span className="ml-auto shrink-0 text-[11px] tabular-nums text-fg-muted">
+                <span
+                  className={`ml-auto shrink-0 text-[11px] tabular-nums text-fg-muted ${readOnly ? "" : "group-hover:invisible"}`}
+                >
                   {timeAgo(s.last_activity ?? s.started_at, true)}
                 </span>
                 <AiToolIcon
@@ -548,6 +565,22 @@ export function WorkspaceSessionList({
                   className={`h-3.5 w-3.5 shrink-0 !p-0 opacity-60 ${readOnly ? "" : "group-hover:invisible"}`}
                 />
               </button>
+              {!readOnly && (
+                <button
+                  type="button"
+                  data-testid={`workspace-session-pin-${s.id}`}
+                  onClick={() => void patch(s, { pinned: !s.pinned_at })}
+                  title={t(s.pinned_at ? "tree.unpinSession" : "tree.pinSession")}
+                  aria-label={t(s.pinned_at ? "tree.unpinSession" : "tree.pinSession")}
+                  className="absolute right-6 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"
+                >
+                  {s.pinned_at ? (
+                    <PinOff className="h-3.5 w-3.5" />
+                  ) : (
+                    <Pin className="h-3.5 w-3.5" />
+                  )}
+                </button>
+              )}
               {!readOnly && (
                 <button
                   type="button"
@@ -608,6 +641,9 @@ export function WorkspaceSessionList({
           onClose={sessionCtx.close}
           onRename={() => startRename(sessionCtx.menu!.item)}
           onArchive={() => void archive(sessionCtx.menu!.item)}
+          onPin={() =>
+            void patch(sessionCtx.menu!.item, { pinned: !sessionCtx.menu!.item.pinned_at })
+          }
         />
       )}
     </>

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

@@ -25,8 +25,11 @@ vi.mock("../../../lib/api", () => ({
       pipelines: vi.fn(),
       worktree: vi.fn(),
       ensure: vi.fn(),
+      clone: vi.fn(),
       browse: vi.fn(),
       pickPath: vi.fn(),
+      // The folder browser's Places list the user's workspaces.
+      list: vi.fn(() => Promise.resolve({ lanes: [], counts: {} })),
       get: vi.fn(),
       profileInit: vi.fn(),
       mcpSync: vi.fn(),
@@ -154,6 +157,7 @@ beforeEach(() => {
   vi.mocked(api.lanes.branches).mockReset();
   vi.mocked(api.lanes.worktree).mockReset();
   vi.mocked(api.lanes.ensure).mockReset();
+  vi.mocked(api.lanes.clone).mockReset();
   vi.mocked(api.lanes.browse).mockReset();
   vi.mocked(api.lanes.pickPath).mockReset();
   // Provisioning finishes instantly by default - tests that care about the
@@ -582,17 +586,15 @@ describe("AddLaneModal — folder browse", () => {
     expect(api.lanes.browse).not.toHaveBeenCalled();
   });
 
-  it("opens the picker on every click into the path field", async () => {
-    vi.mocked(api.lanes.pickPath).mockResolvedValue({ path: "/Users/tester/app" });
+  it("a click into the path field only focuses it — no picker opens (#77)", async () => {
     renderModal();
     const user = userEvent.setup();
     const field = document.getElementById("add-lane-repo")!;
 
     await user.click(field);
-    await waitFor(() => expect(field).toHaveValue("/Users/tester/app"));
-    await user.click(field);
-    await waitFor(() => expect(api.lanes.pickPath).toHaveBeenCalledTimes(2));
-    expect(api.lanes.pickPath).toHaveBeenLastCalledWith("dir", "/Users/tester/app");
+    expect(field).toHaveFocus();
+    expect(api.lanes.pickPath).not.toHaveBeenCalled();
+    expect(api.lanes.browse).not.toHaveBeenCalled();
   });
 
   it("falls back to the in-app browser when no native picker is available", async () => {
@@ -614,7 +616,7 @@ describe("AddLaneModal — folder browse", () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  it("opens the browser, lists subdirectories, and selecting one fills the path field", async () => {
+  it("opens the browser, lists subdirectories, and a double-click opens one", async () => {
     noNativePicker();
     vi.mocked(api.lanes.browse).mockResolvedValue({
       path: "/Users/tester",
@@ -627,8 +629,8 @@ describe("AddLaneModal — folder browse", () => {
     await user.click(screen.getByTitle("Browse for a folder"));
     expect(await screen.findByText("projects")).toBeInTheDocument();
 
-    await user.click(screen.getByText("projects"));
-    expect(api.lanes.browse).toHaveBeenCalledWith("/Users/tester/projects");
+    await user.dblClick(screen.getByText("projects"));
+    expect(api.lanes.browse).toHaveBeenCalledWith("/Users/tester/projects", false, false, false);
   });
 
   it("Escape closes only the folder browser, not the whole modal", async () => {
@@ -668,46 +670,18 @@ describe("AddLaneModal — create/update readme", () => {
 describe("AddLaneModal — no proxy here", () => {
   it("asks for no AI Proxy: a new session picks its own", async () => {
     renderModal({});
-    await screen.findByRole("button", { name: /Claude Code.*Default/ });
+    await waitFor(() => expect(api.aiTools.list).toHaveBeenCalled());
     expect(screen.queryByRole("radio", { name: "AI Proxy" })).toBeNull();
     expect(api.aiProxies.list).not.toHaveBeenCalled();
   });
 });
 
 describe("AddLaneModal — tool selection", () => {
-  it("sends the picked tool when adopting a repo", async () => {
-    vi.mocked(api.lanes.ensure).mockResolvedValue({
-      lane: laneFixture({ id: 23, kind: "adopted", status: "idle" }),
-      created: true,
-    });
-    const onAdded = vi.fn();
-    const onClose = vi.fn();
-    renderModal({ onAdded, onClose });
-    const user = userEvent.setup();
-
-    await user.click(screen.getByRole("button", { name: "Repo" }));
-    const dirField = screen.getByLabelText("Directory");
-    await focusField(user, dirField);
-    await user.type(dirField, "/tmp/demo");
-    // One button showing the default; it opens every installed + enabled tool.
-    const picker = await screen.findByRole("button", { name: /Claude Code.*Default/ });
-    expect(picker).toHaveAttribute("aria-expanded", "false");
-    await user.click(picker);
-    const list = screen.getByRole("group", { name: /Which CLI drives this workspace/ });
-    expect(
-      within(list)
-        .getAllByRole("button")
-        .map((b) => b.textContent)
-    ).toEqual(["Claude Code", "Codex", "Gemini"]);
-    await user.click(within(list).getByRole("button", { name: "Codex" }));
-    // The picked tool replaces the default on the button, and the list closes.
-    expect(screen.getByRole("button", { name: "Codex", expanded: false })).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Gemini" })).toBeNull();
-    await user.click(screen.getByRole("button", { name: /add workspace|create/i }));
-
-    await waitFor(() =>
-      expect(api.lanes.ensure).toHaveBeenCalledWith(expect.objectContaining({ tool: "codex" }))
-    );
+  it("offers no tool picker: a new session picks its own AI", async () => {
+    renderModal({});
+    await waitFor(() => expect(api.aiTools.list).toHaveBeenCalled());
+    expect(screen.queryByRole("button", { name: /Claude Code/ })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Codex" })).toBeNull();
   });
 
   it("says so, with a link to Settings, when no tool is installed and enabled", async () => {
@@ -779,3 +753,76 @@ describe("AddLaneModal — working straight on main (no worktree)", () => {
     );
   });
 });
+
+describe("AddLaneModal — Clone", () => {
+  async function fillClone(user: ReturnType<typeof userEvent.setup>, url: string) {
+    renderModal();
+    fireEvent.click(screen.getByRole("button", { name: "Clone" }));
+    const urlField = screen.getByLabelText("Repository URL");
+    await focusField(user, urlField);
+    await user.type(urlField, url);
+    await user.type(screen.getByLabelText("Clone into folder"), "/home/an/code");
+  }
+
+  it("clones into <folder>/<repo name> and reports the new workspace", async () => {
+    const onAdded = vi.fn();
+    vi.mocked(api.lanes.clone).mockResolvedValue({
+      lane: laneFixture({ id: 5 }),
+      created: true,
+      path: "/home/an/code/repo",
+    });
+    const user = userEvent.setup();
+    renderModal({ onAdded });
+    fireEvent.click(screen.getByRole("button", { name: "Clone" }));
+    const urlField = screen.getByLabelText("Repository URL");
+    await focusField(user, urlField);
+    await user.type(urlField, "git@github.com:owner/repo.git");
+    await user.type(screen.getByLabelText("Clone into folder"), "/home/an/code");
+    expect(screen.getByText(/cloned to \/home\/an\/code\/repo/)).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Add workspace" }));
+    await waitFor(() =>
+      expect(api.lanes.clone).toHaveBeenCalledWith(
+        expect.objectContaining({ url: "git@github.com:owner/repo.git", parent: "/home/an/code" })
+      )
+    );
+    expect(vi.mocked(api.lanes.clone).mock.calls[0]?.[0].credentials).toBeUndefined();
+    await waitFor(() => expect(onAdded).toHaveBeenCalled());
+  });
+
+  it("asks for a login on ECREDENTIALS and sends it on the retry", async () => {
+    vi.mocked(api.lanes.clone)
+      .mockRejectedValueOnce(
+        Object.assign(new Error("needs a login"), {
+          code: "ECREDENTIALS",
+          auth: { protocol: "https", host: "git.example.com" },
+        })
+      )
+      .mockResolvedValueOnce({ lane: laneFixture({ id: 6 }), created: true, path: "/x" });
+    const user = userEvent.setup();
+    await fillClone(user, "https://git.example.com/o/r.git");
+    await user.click(screen.getByRole("button", { name: "Add workspace" }));
+    const login = await screen.findByTestId("add-lane-clone-login");
+    expect(screen.getByRole("alert")).toHaveTextContent("git.example.com needs a login");
+    await user.type(within(login).getByLabelText("Username"), "an");
+    await user.type(within(login).getByLabelText("Password or access token"), "tok");
+    await user.click(screen.getByRole("button", { name: "Add workspace" }));
+    await waitFor(() =>
+      expect(vi.mocked(api.lanes.clone).mock.calls[1]?.[0].credentials).toEqual({
+        username: "an",
+        password: "tok",
+        remember: true,
+      })
+    );
+  });
+
+  it("points to Settings → Git when the SSH key is refused", async () => {
+    vi.mocked(api.lanes.clone).mockRejectedValue(
+      Object.assign(new Error("refused"), { code: "ESSHAUTH" })
+    );
+    const user = userEvent.setup();
+    await fillClone(user, "git@github.com:o/r.git");
+    await user.click(screen.getByRole("button", { name: "Add workspace" }));
+    const link = await screen.findByRole("link", { name: "Open Settings → Git" });
+    expect(link).toHaveAttribute("href", "/settings/git#git-identity");
+  });
+});

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

@@ -0,0 +1,61 @@
+/**
+ * @file Tests for CloneSourcesForm: every URL in the box is cloned in turn as
+ * an extra folder, a host that wants a login opens the login row, and Retry
+ * re-runs only the failed URLs with that login.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "../../../i18n";
+
+vi.mock("../../../lib/api", () => ({
+  api: { lanes: { cloneFolder: vi.fn() } },
+}));
+
+import { api, type LaneSourcesView } from "../../../lib/api";
+import { CloneSourcesForm } from "../CloneSourcesForm";
+
+const view = { sources: [] } as unknown as LaneSourcesView & { path: string };
+
+describe("CloneSourcesForm", () => {
+  beforeEach(() => vi.mocked(api.lanes.cloneFolder).mockReset());
+
+  it("clones each URL, asks for a login where needed, and retries only that one", async () => {
+    const user = userEvent.setup();
+    const onAdded = vi.fn();
+    vi.mocked(api.lanes.cloneFolder).mockImplementation(async (_id, body) => {
+      if (body?.url.includes("private") && !body.credentials)
+        throw Object.assign(new Error("login"), {
+          code: "ECREDENTIALS",
+          auth: { protocol: "https", host: "private.test" },
+        });
+      return view;
+    });
+    render(<CloneSourcesForm laneId={3} parent="/w" onAdded={onAdded} />);
+
+    await user.type(
+      screen.getByTestId("workspace-clone-input"),
+      "https://h/a.git\nhttps://private.test/b.git\nhttps://h/a.git"
+    );
+    await user.click(screen.getByTestId("workspace-clone-run"));
+
+    await waitFor(() => expect(api.lanes.cloneFolder).toHaveBeenCalledTimes(2));
+    expect(onAdded).toHaveBeenCalledTimes(1);
+    expect(await screen.findByText(/private\.test needs a login/)).toBeInTheDocument();
+    // Only what is left stays in the box.
+    expect(screen.getByTestId("workspace-clone-input")).toHaveValue("https://private.test/b.git");
+
+    await user.type(screen.getByLabelText("Username"), "dev");
+    await user.type(screen.getByLabelText("Password or access token"), "tok");
+    await user.click(screen.getByRole("button", { name: "Retry the failed ones" }));
+
+    await waitFor(() => expect(onAdded).toHaveBeenCalledTimes(2));
+    expect(api.lanes.cloneFolder).toHaveBeenLastCalledWith(3, {
+      url: "https://private.test/b.git",
+      credentials: { username: "dev", password: "tok", remember: true },
+    });
+    expect(screen.getByTestId("workspace-clone-input")).toHaveValue("");
+  });
+});

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

@@ -0,0 +1,257 @@
+/**
+ * @file Tests for the workspace File Explorer modal: it lists a folder and
+ * opens sub-folders, makes a folder inline, deletes into the Trash without a
+ * confirm, copies in one workspace and pastes into another (`fromLane`),
+ * asks Replace / Keep both / Skip when an upload's name is taken, refuses a
+ * batch over 500 MB before sending anything, and restores from the Trash.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FileExplorer } from "../FileExplorer";
+import { api, type FsListing } from "../../../lib/api";
+import { toast } from "../../../lib/toast";
+
+vi.mock("../../../lib/api", () => ({
+  gitTarget: (lane: number, session?: string | null) => (session ? { lane, session } : lane),
+  isHomePlace: (p: unknown) => typeof p === "object" && p !== null && "home" in p,
+  api: {
+    lanes: {
+      list: vi.fn(),
+      gitDownloadUrl: (t: number, p: string) => `/api/lanes/${t}/git/download?path=${p}`,
+    },
+    files: {
+      homes: vi.fn(),
+      downloadUrl: (t: unknown, p: string) => `/dl/${JSON.stringify(t)}/${p}`,
+      list: vi.fn(),
+      mkdir: vi.fn(),
+      newFile: vi.fn(),
+      rename: vi.fn(),
+      move: vi.fn(),
+      copy: vi.fn(),
+      remove: vi.fn(),
+      trash: vi.fn(),
+      restore: vi.fn(),
+      purge: vi.fn(),
+      upload: vi.fn(),
+      zipUrl: (t: number, ps: string[]) => `/api/lanes/${t}/fs/zip?p=${ps.join("&p=")}`,
+    },
+  },
+}));
+vi.mock("../../../lib/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() },
+}));
+
+const root: FsListing = {
+  path: "",
+  parent: null,
+  truncated: false,
+  entries: [
+    { name: "src", path: "src", type: "dir", size: null, mtime: 0 },
+    { name: "a.txt", path: "a.txt", type: "file", size: 12, mtime: 0 },
+  ],
+};
+const src: FsListing = {
+  path: "src",
+  parent: "",
+  truncated: false,
+  entries: [{ name: "x.js", path: "src/x.js", type: "file", size: 2, mtime: 0 }],
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  vi.mocked(api.lanes.list).mockResolvedValue({
+    lanes: [
+      { id: 1, title: "one", cwd: "/w/one" },
+      { id: 2, title: "two", cwd: "/w/two" },
+    ],
+    counts: {},
+  } as never);
+  vi.mocked(api.files.list).mockImplementation(async (_t, p = "") => (p === "src" ? src : root));
+  vi.mocked(api.files.trash).mockResolvedValue({ items: [] });
+  vi.mocked(api.files.homes).mockResolvedValue({
+    homes: [
+      { id: "me", label: "An", readOnly: false },
+      { id: "bob", label: "Bob", readOnly: true },
+    ],
+  });
+});
+
+const open = () => render(<FileExplorer open laneId={1} onClose={vi.fn()} onChanged={vi.fn()} />);
+const row = (name: string) =>
+  screen.getAllByTestId("fx-row").find((r) => r.textContent?.includes(name))!;
+
+describe("FileExplorer", () => {
+  it("hides dot files until Ctrl+H, like the Linux file manager", async () => {
+    vi.mocked(api.files.list).mockResolvedValue({
+      ...root,
+      entries: [
+        ...root.entries,
+        { name: ".env.example", path: ".env.example", type: "file", size: 1, mtime: 0 },
+      ],
+    });
+    open();
+    await screen.findByText("a.txt");
+    expect(screen.queryByText(".env.example")).toBeNull();
+    fireEvent.keyDown(screen.getByTestId("fx-list"), { key: "h", ctrlKey: true });
+    expect(await screen.findByText(".env.example")).toBeInTheDocument();
+  });
+
+  it("shows a labelled action bar for a selection, and goes Back after opening a folder", async () => {
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    await user.click(row("a.txt"));
+    const bar = screen.getByTestId("fx-actionbar");
+    expect(within(bar).getByRole("button", { name: /Download/ })).toBeInTheDocument();
+    expect(within(bar).getByRole("button", { name: /Move to Trash/ })).toBeInTheDocument();
+    fireEvent.doubleClick(row("src"));
+    await screen.findByText("x.js");
+    await user.click(screen.getByRole("button", { name: "Back" }));
+    await waitFor(() => expect(api.files.list).toHaveBeenLastCalledWith(1, ""));
+  });
+
+  it("lists a folder and opens a sub-folder on double-click", async () => {
+    open();
+    expect(await screen.findByText("a.txt")).toBeInTheDocument();
+    fireEvent.doubleClick(row("src"));
+    expect(await screen.findByText("x.js")).toBeInTheDocument();
+    expect(api.files.list).toHaveBeenLastCalledWith(1, "src");
+  });
+
+  it("makes a folder inline", async () => {
+    vi.mocked(api.files.mkdir).mockResolvedValue({ path: "docs" });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    await user.click(screen.getByRole("button", { name: "New" }));
+    await user.click(screen.getByRole("menuitem", { name: "New folder" }));
+    const name = screen.getByLabelText("Name");
+    await user.clear(name);
+    await user.type(name, "docs{Enter}");
+    await waitFor(() => expect(api.files.mkdir).toHaveBeenCalledWith(1, "docs"));
+  });
+
+  it("deletes into the Trash without asking", async () => {
+    vi.mocked(api.files.remove).mockResolvedValue({ trashed: ["id1"] });
+    open();
+    await screen.findByText("a.txt");
+    fireEvent.click(row("a.txt"));
+    fireEvent.keyDown(screen.getByTestId("fx-list"), { key: "Delete" });
+    await waitFor(() => expect(api.files.remove).toHaveBeenCalledWith(1, ["a.txt"]));
+    expect(screen.queryByRole("alertdialog")).toBeNull();
+  });
+
+  it("copies here and pastes into another workspace", async () => {
+    vi.mocked(api.files.copy).mockResolvedValue({ copied: ["a.txt"] });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    fireEvent.click(row("a.txt"));
+    fireEvent.keyDown(screen.getByTestId("fx-list"), { key: "c", ctrlKey: true });
+    await user.click(await screen.findByRole("button", { name: "two" }));
+    await waitFor(() => expect(api.files.list).toHaveBeenLastCalledWith(2, ""));
+    await user.click(screen.getByRole("button", { name: /Paste 1 item/ }));
+    await waitFor(() =>
+      expect(api.files.copy).toHaveBeenCalledWith(2, ["a.txt"], "", {
+        fromLane: 1,
+        conflict: "fail",
+      })
+    );
+  });
+
+  it("asks about a taken name on upload, and sends the choice", async () => {
+    vi.mocked(api.files.upload)
+      .mockRejectedValueOnce(
+        Object.assign(new Error("taken"), { code: "EEXISTS", names: ["a.txt"] })
+      )
+      .mockResolvedValueOnce({ path: "a (1).txt" });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const file = new File(["hi"], "a.txt");
+    await user.upload(screen.getByTestId("fx-upload-files"), file);
+    const ask = await screen.findByTestId("fx-conflict");
+    await user.click(within(ask).getByRole("button", { name: "Keep both" }));
+    await waitFor(() =>
+      expect(api.files.upload).toHaveBeenLastCalledWith(
+        1,
+        "a.txt",
+        file,
+        "keep",
+        expect.any(Function)
+      )
+    );
+  });
+
+  it("refuses a batch over 500 MB before sending anything", async () => {
+    open();
+    await screen.findByText("a.txt");
+    const big = new File(["x"], "big.bin");
+    Object.defineProperty(big, "size", { value: 600 * 1024 * 1024 });
+    fireEvent.change(screen.getByTestId("fx-upload-files"), { target: { files: [big] } });
+    await waitFor(() => expect(toast.error).toHaveBeenCalled());
+    expect(api.files.upload).not.toHaveBeenCalled();
+  });
+
+  it("restores from the Trash", async () => {
+    vi.mocked(api.files.trash).mockResolvedValue({
+      items: [
+        {
+          id: "abc12345",
+          name: "a.txt",
+          laneId: 1,
+          path: "a.txt",
+          isDir: false,
+          deletedAt: "2026-10-14T00:00:00Z",
+        },
+      ],
+    });
+    vi.mocked(api.files.restore).mockResolvedValue({ path: "a.txt", laneId: null });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    await user.click(screen.getByRole("button", { name: "Trash" }));
+    const trashRow = await screen.findByTestId("fx-trash-row");
+    await user.click(within(trashRow).getByRole("button", { name: /Restore/ }));
+    await waitFor(() => expect(api.files.restore).toHaveBeenCalledWith(1, "abc12345"));
+  });
+
+  it("opens the user's home from the sidebar, and pastes from it into a workspace", async () => {
+    vi.mocked(api.files.copy).mockResolvedValue({ copied: ["a.txt"] });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    await user.click(await screen.findByRole("button", { name: "Home" }));
+    await waitFor(() => expect(api.files.list).toHaveBeenLastCalledWith({ home: "me" }, ""));
+    fireEvent.click(row("a.txt"));
+    fireEvent.keyDown(screen.getByTestId("fx-list"), { key: "c", ctrlKey: true });
+    await user.click(screen.getByRole("button", { name: "one" }));
+    await waitFor(() => expect(api.files.list).toHaveBeenLastCalledWith(1, ""));
+    await user.click(screen.getByRole("button", { name: /Paste 1 item/ }));
+    await waitFor(() =>
+      expect(api.files.copy).toHaveBeenCalledWith(1, ["a.txt"], "", {
+        fromHome: "me",
+        conflict: "fail",
+      })
+    );
+  });
+
+  it("shows another user's home read-only: no New, Upload, Cut, Rename or Delete", async () => {
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    await user.click(await screen.findByRole("button", { name: /Bob/ }));
+    expect(await screen.findByTestId("fx-readonly")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "New" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Upload" })).toBeNull();
+    await user.click(row("a.txt"));
+    const bar = screen.getByTestId("fx-actionbar");
+    expect(within(bar).getByRole("button", { name: /Download/ })).toBeInTheDocument();
+    expect(within(bar).getByRole("button", { name: /Copy/ })).toBeInTheDocument();
+    expect(within(bar).queryByRole("button", { name: /Cut|Rename|Move to Trash/ })).toBeNull();
+    fireEvent.keyDown(screen.getByTestId("fx-list"), { key: "Delete" });
+    expect(api.files.remove).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,206 @@
+/**
+ * @file FolderBrowseModal.test.tsx
+ * @description Unit tests for the in-app folder browser laid out like a
+ * native picker: a click selects and Select picks that folder (else the
+ * current one), a double-click opens, Backspace and the breadcrumb go up,
+ * the filter narrows the list, Places open Home and a workspace, the path
+ * field (Ctrl+L) opens a typed path, New folder makes one and selects it,
+ * Show hidden re-lists with dot entries, and a Select is remembered as Recent.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { api } from "../../../lib/api";
+import { FolderBrowseModal } from "../FolderBrowseModal";
+
+vi.mock("../../../lib/api", () => ({
+  api: { lanes: { browse: vi.fn(), mkdir: vi.fn(), list: vi.fn() } },
+}));
+
+const TREE: Record<string, string[]> = {
+  "/home/u": ["proj", "notes"],
+  "/home/u/proj": ["api", "web"],
+  "/home/u/proj/api": [],
+  "/home/u/proj/web": [],
+  "/home/u/notes": [],
+  "/srv/ws": [],
+};
+
+function listing(p: string, hidden = false) {
+  const names = [...(TREE[p] ?? []), ...(hidden ? [".cfg"] : [])];
+  return {
+    path: p,
+    parent: p === "/home/u" ? null : p.slice(0, p.lastIndexOf("/")) || "/",
+    home: "/home/u",
+    entries: names.map((n, i) => ({
+      name: n,
+      path: `${p}/${n}`,
+      isGitRepo: n === "api",
+      mtime: 1_700_000_000_000 + i,
+    })),
+  };
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.mocked(api.lanes.browse)
+    .mockReset()
+    .mockImplementation(async (p?: string, _f?: boolean, hidden?: boolean) => {
+      const at = p || "/home/u";
+      if (!(at in TREE)) throw new Error("path does not exist");
+      return listing(at, hidden);
+    });
+  vi.mocked(api.lanes.mkdir).mockReset();
+  vi.mocked(api.lanes.list)
+    .mockReset()
+    .mockResolvedValue({
+      lanes: [{ id: 1, title: "Shop API", cwd: "/srv/ws" }],
+      counts: {},
+    } as never);
+});
+
+const open = (onSelect = vi.fn(), initialPath?: string) => {
+  render(
+    <FolderBrowseModal open initialPath={initialPath} onSelect={onSelect} onClose={vi.fn()} />
+  );
+  return screen.findByRole("dialog", { name: "Browse for a folder" });
+};
+
+const option = (dialog: HTMLElement, name: string) =>
+  within(dialog).findByRole("option", { name: new RegExp(name) });
+
+describe("FolderBrowseModal", () => {
+  it("opens an admin in their own home; the Server folder tick opens the host's", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.browse).mockImplementation(async (p, _f, _h, host) => ({
+      ...listing(p || (host ? "/home/u" : "/srv/ws"), false),
+      home: host ? "/home/u" : "/srv/ws",
+      hostHome: "/home/u",
+    }));
+    const dialog = await open();
+    await waitFor(() =>
+      expect(api.lanes.browse).toHaveBeenLastCalledWith(undefined, false, false, false)
+    );
+    const tick = within(dialog).getByTestId("browse-host-folder");
+    expect(tick).not.toBeChecked();
+    await user.click(tick);
+    await waitFor(() =>
+      expect(api.lanes.browse).toHaveBeenLastCalledWith(undefined, false, false, true)
+    );
+    expect(tick).toBeChecked();
+  });
+
+  it("shows no Server folder tick without a host home in the listing", async () => {
+    const dialog = await open();
+    expect((await within(dialog).findAllByRole("option")).length).toBeGreaterThan(0);
+    expect(within(dialog).queryByTestId("browse-host-folder")).toBeNull();
+  });
+
+  it("click selects, double-click opens, Select picks the selection else the folder", async () => {
+    const onSelect = vi.fn();
+    const dialog = await open(onSelect);
+    await userEvent.click(await option(dialog, "proj"));
+    expect(await option(dialog, "proj")).toHaveAttribute("aria-selected", "true");
+    await userEvent.dblClick(await option(dialog, "proj"));
+    await option(dialog, "web");
+    await userEvent.click(within(dialog).getByRole("button", { name: "Select this folder" }));
+    expect(onSelect).toHaveBeenCalledWith("/home/u/proj");
+  });
+
+  it("Enter opens the selected folder and Backspace goes back up to it", async () => {
+    const dialog = await open();
+    const list = within(dialog).getByRole("listbox");
+    await userEvent.click(await option(dialog, "proj"));
+    await userEvent.keyboard("{Enter}");
+    await option(dialog, "api");
+    list.focus();
+    await userEvent.keyboard("{Backspace}");
+    await waitFor(() =>
+      expect(within(dialog).getByRole("option", { name: /proj/ })).toHaveAttribute(
+        "aria-selected",
+        "true"
+      )
+    );
+  });
+
+  it("the breadcrumb, Back and Forward move between folders", async () => {
+    const dialog = await open(vi.fn(), "/home/u/proj/api");
+    await userEvent.click(within(dialog).getByRole("button", { name: "proj" }));
+    await option(dialog, "web");
+    await userEvent.click(within(dialog).getByRole("button", { name: /^Back/ }));
+    await waitFor(() =>
+      expect(api.lanes.browse).toHaveBeenLastCalledWith("/home/u/proj/api", false, false, false)
+    );
+    await userEvent.click(within(dialog).getByRole("button", { name: /^Forward/ }));
+    await waitFor(() =>
+      expect(api.lanes.browse).toHaveBeenLastCalledWith("/home/u/proj", false, false, false)
+    );
+    // Above the user's own folder (it answered no parent) nothing is a link.
+    await userEvent.click(within(dialog).getByRole("button", { name: /^Home$/ }));
+    await option(dialog, "notes");
+    expect(within(dialog).getByRole("button", { name: "home" })).toBeDisabled();
+  });
+
+  it("the filter narrows the list, and Enter on a single match opens it", async () => {
+    const dialog = await open();
+    await option(dialog, "notes");
+    await userEvent.type(within(dialog).getByRole("textbox", { name: "Filter…" }), "pro");
+    expect(within(dialog).queryByRole("option", { name: /notes/ })).toBeNull();
+    await userEvent.keyboard("{Enter}");
+    await option(dialog, "web");
+  });
+
+  it("Places open a workspace and Home; Ctrl+L opens a typed path", async () => {
+    const dialog = await open(vi.fn(), "/home/u/proj");
+    await userEvent.click(await within(dialog).findByRole("button", { name: /Shop API/ }));
+    await waitFor(() =>
+      expect(api.lanes.browse).toHaveBeenLastCalledWith("/srv/ws", false, false, false)
+    );
+    await userEvent.click(within(dialog).getByRole("button", { name: /^Home$/ }));
+    await option(dialog, "notes");
+    await userEvent.keyboard("{Control>}l{/Control}");
+    const field = within(dialog).getByRole("textbox", { name: "Type a path (Ctrl+L)" });
+    await userEvent.clear(field);
+    await userEvent.type(field, "/home/u/proj/web{Enter}");
+    await waitFor(() =>
+      expect(api.lanes.browse).toHaveBeenLastCalledWith("/home/u/proj/web", false, false, false)
+    );
+  });
+
+  it("New folder makes one in the current folder and selects it", async () => {
+    vi.mocked(api.lanes.mkdir).mockImplementation(async (parent, name) => {
+      TREE[parent] = [...(TREE[parent] ?? []), name];
+      return { path: `${parent}/${name}` };
+    });
+    const dialog = await open();
+    await option(dialog, "proj");
+    await userEvent.click(within(dialog).getByRole("button", { name: /New folder/ }));
+    await userEvent.type(
+      within(dialog).getByRole("textbox", { name: "Folder name" }),
+      "fresh{Enter}"
+    );
+    expect(api.lanes.mkdir).toHaveBeenCalledWith("/home/u", "fresh");
+    await waitFor(async () =>
+      expect(await option(dialog, "fresh")).toHaveAttribute("aria-selected", "true")
+    );
+    TREE["/home/u"] = ["proj", "notes"];
+  });
+
+  it("Show hidden re-lists with dot entries, and a pick is kept as Recent", async () => {
+    const onSelect = vi.fn();
+    const dialog = await open(onSelect);
+    await option(dialog, "proj");
+    expect(within(dialog).queryByRole("option", { name: /\.cfg/ })).toBeNull();
+    await userEvent.click(within(dialog).getByRole("checkbox", { name: /Show hidden/ }));
+    await option(dialog, "\\.cfg");
+    await userEvent.dblClick(await option(dialog, "proj"));
+    await option(dialog, "web");
+    await userEvent.click(within(dialog).getByRole("button", { name: "Select this folder" }));
+    expect(onSelect).toHaveBeenCalledWith("/home/u/proj");
+    expect(JSON.parse(localStorage.getItem("agenthub.browse.recent") || "[]")).toEqual([
+      "/home/u/proj",
+    ]);
+  });
+});

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

@@ -15,7 +15,7 @@
  */
 
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor, act, within } from "@testing-library/react";
+import { render, screen, waitFor, act, within, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { LaneChangesPanel, gitChangeFor } from "../LaneChangesPanel";
 import { confirmDialog, confirmDiscard } from "../../../lib/confirm";
@@ -24,6 +24,12 @@ import type { LaneChanges } from "../../../lib/types";
 
 // The themed confirm needs its host (App); answer it here.
 // CodeMirror does not run in jsdom: the editor is a textarea over the same props.
+// Local mode unless a test says otherwise.
+const perms = vi.hoisted(() => ({ local: true }));
+vi.mock("../../AuthGate", async (importOriginal) => {
+  const m = await importOriginal<typeof import("../../AuthGate")>();
+  return { ...m, usePermissions: () => ({ ...m.usePermissions(), local: perms.local }) };
+});
 vi.mock("../DiffEditor", () => ({
   default: (p: {
     value: string;
@@ -75,6 +81,9 @@ vi.mock("../../../lib/api", () => ({
       gitTree: vi.fn(),
       gitTreeAll: vi.fn(),
       gitBlame: vi.fn(),
+      gitDownloadUrl: (id: number, path: string) =>
+        `/api/lanes/${id}/git/download?path=${encodeURIComponent(path)}`,
+      gitUpload: vi.fn(),
     },
   },
 }));
@@ -143,6 +152,7 @@ function discardOf(path: string) {
 }
 
 beforeEach(() => {
+  perms.local = true;
   vi.mocked(api.lanes.git).mockReset().mockResolvedValue({ available: false });
   vi.mocked(api.lanes.changes).mockReset();
   vi.mocked(api.lanes.changes).mockResolvedValue(changes());
@@ -307,16 +317,29 @@ describe("LaneChangesPanel", () => {
     await waitFor(() => expect(api.lanes.changes).toHaveBeenCalledWith(7, { range: "branch" }));
   });
 
-  it("says so, quietly, when the lane's directory is not a git repo", async () => {
+  it("says so, quietly, beside the tree at full width, when the folder is not a repo", async () => {
+    vi.mocked(api.lanes.changes).mockResolvedValue({
+      available: false,
+      range: "work",
+      files: [],
+    });
+    render(<LaneChangesPanel laneId={7} full />);
+    expect(
+      await screen.findByText("This workspace's directory is not a readable git repository.")
+    ).toBeInTheDocument();
+  });
+
+  it("opens on Files, its only tab, when the workspace folder is not a repo", async () => {
     vi.mocked(api.lanes.changes).mockResolvedValue({
       available: false,
       range: "work",
       files: [],
     });
     render(<LaneChangesPanel laneId={7} />);
-    expect(
-      await screen.findByText("This workspace's directory is not a readable git repository.")
-    ).toBeInTheDocument();
+    expect(await screen.findByTestId("lane-changes-browse")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Files" })).toHaveAttribute("aria-pressed", "true");
+    for (const name of ["Changes", "Review", "History"])
+      expect(screen.queryByRole("button", { name })).not.toBeInTheDocument();
   });
 
   it("adds an unversioned file to VCS, for that path alone, and ticks it", async () => {
@@ -545,6 +568,94 @@ describe("LaneChangesPanel", () => {
     expect(screen.queryByTestId("lane-file-edit")).toBeNull();
   });
 
+  it("reads a folder again on every open, so files added since show (not a stale empty level)", async () => {
+    let filled = false;
+    vi.mocked(api.lanes.gitTree).mockImplementation(async (_t, path = "") => ({
+      available: true,
+      path,
+      entries:
+        path === "src"
+          ? filled
+            ? [{ name: "app.ts", path: "src/app.ts", dir: false }]
+            : []
+          : [{ name: "src", path: "src", dir: true }],
+      truncated: false,
+    }));
+    const user = userEvent.setup();
+    const { rerender } = render(<LaneChangesPanel laneId={7} full />);
+    const sidebar = await screen.findByTestId("lane-changes-sidebar");
+    await user.click(await within(sidebar).findByText("src"));
+    await waitFor(() => expect(api.lanes.gitTree).toHaveBeenCalledWith(7, "src"));
+    expect(within(sidebar).queryByText("app.ts")).toBeNull();
+    // Source arrives from outside the panel (the File Explorer, a terminal).
+    filled = true;
+    await user.click(within(sidebar).getByText("src")); // close
+    await user.click(within(sidebar).getByText("src")); // open again → read again
+    expect(await within(sidebar).findByText("app.ts")).toBeInTheDocument();
+    // And the header's File Explorer reports a change: open folders re-read.
+    filled = false;
+    rerender(<LaneChangesPanel laneId={7} full filesChanged={1} />);
+    await waitFor(() => expect(within(sidebar).queryByText("app.ts")).toBeNull());
+  });
+
+  it("uploads files into a folder from the tree menu, and downloads a file (issue #78)", async () => {
+    perms.local = false;
+    vi.mocked(api.lanes.gitTree).mockImplementation(async (_t, path = "") => ({
+      available: true,
+      path,
+      entries:
+        path === "out"
+          ? [{ name: "report.md", path: "out/report.md", dir: false }]
+          : [{ name: "out", path: "out", dir: true }],
+      truncated: false,
+    }));
+    vi.mocked(api.lanes.gitUpload).mockResolvedValue({ path: "out/data.csv" });
+    const user = userEvent.setup();
+    render(<LaneChangesPanel laneId={7} full />);
+    const sidebar = await screen.findByTestId("lane-changes-sidebar");
+    const input = within(sidebar).getByTestId("lane-changes-upload-input") as HTMLInputElement;
+    const picked = vi.spyOn(input, "click").mockImplementation(() => {});
+    await user.pointer({ keys: "[MouseRight]", target: await within(sidebar).findByText("out") });
+    await user.click(screen.getByTestId("lane-changes-menu-upload"));
+    expect(picked).toHaveBeenCalled();
+    const file = new File(["a,b\n"], "data.csv", { type: "text/csv" });
+    fireEvent.change(input, { target: { files: [file] } });
+    await waitFor(() => expect(api.lanes.gitUpload).toHaveBeenCalledWith(7, "out", file));
+    // The folder it landed in is re-read and opened.
+    expect(await within(sidebar).findByText("report.md")).toBeInTheDocument();
+
+    const clicked: string[] = [];
+    const anchor = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(function (
+      this: HTMLAnchorElement
+    ) {
+      clicked.push(this.getAttribute("href") ?? "");
+    });
+    await user.pointer({ keys: "[MouseRight]", target: within(sidebar).getByText("report.md") });
+    await user.click(screen.getByTestId("lane-changes-menu-download"));
+    expect(clicked).toEqual(["/api/lanes/7/git/download?path=out%2Freport.md"]);
+    anchor.mockRestore();
+    picked.mockRestore();
+  });
+
+  it("offers no upload, download or File Explorer in local mode", async () => {
+    vi.mocked(api.lanes.gitTree).mockImplementation(async (_t, path = "") => ({
+      available: true,
+      path,
+      entries:
+        path === "out"
+          ? [{ name: "report.md", path: "out/report.md", dir: false }]
+          : [{ name: "out", path: "out", dir: true }],
+      truncated: false,
+    }));
+    const user = userEvent.setup();
+    render(<LaneChangesPanel laneId={7} full />);
+    const sidebar = await screen.findByTestId("lane-changes-sidebar");
+    await user.pointer({ keys: "[MouseRight]", target: await within(sidebar).findByText("out") });
+    expect(screen.getByTestId("lane-changes-tree-menu")).toBeInTheDocument();
+    expect(screen.queryByTestId("lane-changes-menu-upload")).toBeNull();
+    expect(screen.queryByTestId("lane-changes-menu-explorer")).toBeNull();
+  });
+
   it("at full width shows the tree as a sidebar and opens a file straight in the editor", async () => {
     vi.mocked(api.lanes.gitTree).mockResolvedValue({
       available: true,
@@ -1687,6 +1798,24 @@ describe("LaneChangesPanel", () => {
     expect(screen.getByTestId("lane-file-view")).toBeInTheDocument();
   });
 
+  it("opens a file from Files when the workspace folder is not a repo", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.changes).mockResolvedValue({
+      available: false,
+      range: "work",
+      files: [],
+    });
+    render(<Tabbed laneId={7} />);
+    await screen.findByTestId("lane-changes-browse");
+
+    await user.type(await screen.findByLabelText("Find a file by path…"), "main");
+    await user.click(await screen.findByText("src/main.ts"));
+    expect(await screen.findByTestId("lane-file-view")).toHaveTextContent("const whole = 1;");
+    expect(
+      screen.queryByText("This workspace's directory is not a readable git repository.")
+    ).toBeNull();
+  });
+
   it("keeps the overview rows mounted across re-renders (typing in the commit box)", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);

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

@@ -21,7 +21,7 @@ import type { LaneGitFacts } from "../../../lib/types";
 vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(async () => true) }));
 vi.mock("../../../lib/api", () => ({
   gitTarget: (lane: number, session?: string | null) => (session ? { lane, session } : lane),
-  api: { lanes: { gitAction: vi.fn(), gitBranches: vi.fn() } },
+  api: { lanes: { gitAction: vi.fn(), gitBranches: vi.fn(), git: vi.fn() } },
 }));
 
 function facts(over: Partial<Extract<LaneGitFacts, { available: true }>> = {}): LaneGitFacts {
@@ -164,6 +164,29 @@ describe("LaneGitBar", () => {
     expect(api.lanes.gitAction).not.toHaveBeenCalled();
   });
 
+  it("says there is nothing to push instead of asking to push zero commits", async () => {
+    const user = userEvent.setup();
+    vi.mocked(confirmDialog).mockClear();
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts({ ahead: 0 }));
+    render(<LaneGitBar laneId={3} git={facts({ ahead: 0 })} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /^Push$/ }));
+    await waitFor(() => expect(api.lanes.git).toHaveBeenCalledWith(3));
+    expect(confirmDialog).not.toHaveBeenCalled();
+    expect(api.lanes.gitAction).not.toHaveBeenCalled();
+  });
+
+  it("re-reads stale facts: a commit made since still gets the push confirm", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.git).mockResolvedValueOnce(facts({ ahead: 1 }));
+    render(<LaneGitBar laneId={3} git={facts({ ahead: 0 })} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /^Push$/ }));
+    await waitFor(() =>
+      expect(confirmDialog).toHaveBeenLastCalledWith(
+        expect.objectContaining({ message: expect.stringContaining("Push 1 commit") })
+      )
+    );
+  });
+
   it("calls a first push of a branch with no upstream 'Publish branch'", async () => {
     const user = userEvent.setup();
     render(

client/src/components/run/ChatFilePreview.tsx

@@ -8,8 +8,10 @@
  * `GET /api/lanes/:id/git/file` (or `/git/raw` for an image), a file under
  * `~/.claude` (a memory file, a plugin's skill) through `GET /api/cc-config/file`,
  * an attached image or text file through `GET /api/run/drop/:name`, an image
- * the session read anywhere else through `GET /api/sessions/:id/image`. Anything
- * else (or an image that route refuses) shows its path only. A Windows path's `\` counts as `/` throughout.
+ * the session read anywhere else through `GET /api/sessions/:id/image`, and a
+ * text file it read, wrote or named (a generated report) anywhere else through
+ * `GET /api/sessions/:id/file`.
+ * Anything else (or a file those routes refuse) shows its path only. A Windows path's `\` counts as `/` throughout.
  * `SkillListModal` is the same dialog over the session's skills, each one's
  * SKILL.md found by name (`plugin:name` from the plugin list, else the user's
  * or the project's); a built-in skill has no file and shows by name only.
@@ -106,6 +108,14 @@ function useContent(path: string, scope: PreviewScope): Content {
         // An image it read elsewhere (a screenshot under ~/.cache): served
         // only because this session's own Read named it.
         setContent({ kind: "image", src: api.sessions.readImageUrl(scope.sessionId, path) });
+      } else if (scope.sessionId && /^(?:\/|[A-Za-z]:\/)/.test(file)) {
+        // A text file it read or wrote elsewhere (a report under ~/Documents):
+        // served only because this session's own Read/Write/Edit named it.
+        show(
+          api.sessions
+            .readFile(scope.sessionId, path)
+            .then((f) => ({ kind: "text", text: f.text, truncated: f.truncated }))
+        );
       } else setContent({ kind: "none" });
       return () => {
         live = false;

client/src/components/run/ChatOutline.tsx

@@ -16,7 +16,14 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useState, type ComponentType, type DragEvent, type ReactNode } from "react";
+import {
+  useEffect,
+  useState,
+  type ComponentType,
+  type DragEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { useSettingsHref } from "../../lib/settingsLink";
@@ -35,6 +42,8 @@ import {
   X,
 } from "lucide-react";
 import { api, type SessionOutline } from "../../lib/api";
+import { keepIfSame } from "../../lib/keepIfSame";
+import { isShown } from "../../hooks/useOnScreen";
 import { displayName, extOf } from "./ChatFilePreview";
 import { dragAttachments, dragSkill, type Attachment } from "../../lib/promptAttach";
 
@@ -49,25 +58,30 @@ const EMPTY: SessionOutline = {
   mcp: [],
 };
 
-/** The session's outline, re-read on a visibility-gated poll. */
-export function useSessionOutline(sessionId: string): SessionOutline {
+/** The session's outline, re-read on a visibility-gated poll — skipped too
+ *  while `onScreen` says the pane is hidden (another workspace or tab, kept
+ *  mounted). An unchanged answer keeps the old object: no re-render. */
+export function useSessionOutline(
+  sessionId: string,
+  onScreen?: RefObject<boolean>
+): SessionOutline {
   const [outline, setOutline] = useState<SessionOutline>(EMPTY);
   useEffect(() => {
     let live = true;
     const load = () =>
       api.sessions
         .outline(sessionId)
-        .then((o) => live && setOutline({ ...EMPTY, ...o }))
+        .then((o) => live && setOutline(keepIfSame<SessionOutline>({ ...EMPTY, ...o })))
         .catch(() => {});
     void load();
     const timer = window.setInterval(() => {
-      if (document.visibilityState === "visible") void load();
+      if (onScreen ? isShown(onScreen) : document.visibilityState === "visible") void load();
     }, POLL_MS);
     return () => {
       live = false;
       window.clearInterval(timer);
     };
-  }, [sessionId]);
+  }, [sessionId, onScreen]);
   return outline;
 }
 
@@ -271,7 +285,7 @@ export function ChatOutline({
                   </span>
                 ) : (
                   <span
-                    className={`h-4 w-4 flex-shrink-0 rounded-full border-2 ${task.status === "in_progress" ? "animate-pulse border-accent" : "border-border"}`}
+                    className={`h-4 w-4 flex-shrink-0 rounded-full border-2 ${task.status === "in_progress" ? "animate-pulse-dot border-accent" : "border-border"}`}
                   />
                 )}
                 <span

client/src/components/run/ConsoleTabs.tsx

@@ -8,8 +8,11 @@
  * prompt it started on, else its tool and number; a combo tab shows every
  * pane's icon and name. A tab carries a state dot (waiting for you / error /
  * running — a combo shows the most urgent, with screen-reader text). A tab's
- * X stops every session in it (`DELETE /api/run/:id`) — after a confirm when
- * one is an AI tool, since it may be mid-turn; a shell closes at once. Arrow
+ * X stops every session in it AND archives them (`endRuns`,
+ * `DELETE /api/run/:id?archive=1`); the moon beside it (and the tab menu's
+ * Sleep) stops its AI sessions but keeps them listed, to resume later. Either
+ * asks first when one is an AI tool, since it may be mid-turn; a shell closes
+ * at once. Arrow
  * keys, Home and End move between tabs (one tab stop, APG). Errors are
  * toasts. The `+` menu opens a new tab in the free slot the server picks
  * (`slot: "auto"`) — a plain shell (`POST /api/lanes/:id/start {shell: true}`)
@@ -25,7 +28,10 @@
  * 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
+ * one, up to four panes). A pane drag held over another tab for `SPRING_MS` shows that tab
+ * (spring-loaded, as a file manager's folder), so the pane can be dropped on
+ * any of its panes' edges; near either end of an overflowing bar a drag
+ * scrolls it. A right-click on a tab
  * opens the same actions as a menu (`ContextMenu`). With tabs from every
  * workspace on, `tabs` spans every workspace (each run's `slot` a `paneKey`)
  * and `workspaceOf` names each tab's workspace before its own name. Settings
@@ -45,19 +51,26 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { House, Plus, Settings, Settings2, SquareTerminal, X } from "lucide-react";
+import { House, Moon, Plus, Settings, Settings2, SquareTerminal, X } from "lucide-react";
 import { api } from "../../lib/api";
 import { useSettingsHref } from "../../lib/settingsLink";
 import type { RunHandle } from "../../lib/api";
 import { isSessionAwaitingInput, type Lane, type Session } from "../../lib/types";
 import { toast } from "../../lib/toast";
-import { confirmDialog } from "../../lib/confirm";
+import { canSleep, endRuns } from "../../lib/stopSession";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
 import { useAiTools } from "../../hooks/useAiTools";
 import { AiToolIcon } from "../AiToolIcon";
 import { freeSlot, startInFreeTab } from "../lanes/startSession";
-import { PANE_DRAG_TYPE, RunIcon, startPaneDrag, type GroupsUpdate } from "./PaneGrid";
+import {
+  PANE_DRAG_TYPE,
+  RunIcon,
+  paneDragSlot,
+  setDragChip,
+  startPaneDrag,
+  type GroupsUpdate,
+} from "./PaneGrid";
 import { insertionIndex } from "../../lib/laneOrderStorage";
 import {
   type PaneGroups,
@@ -155,6 +168,11 @@ interface Tab {
 
 const URGENCY: RunState[] = ["awaiting", "error", "running"];
 
+/** How long a pane drag rests on a tab before that tab is shown. */
+export const SPRING_MS = 600;
+/** Within this many px of an overflowing bar's end, a drag scrolls it. */
+const EDGE_SCROLL_PX = 40;
+
 /** The Settings tab's key among the tabs' (a group's key is its slots). */
 const SETTINGS_KEY = "settings";
 
@@ -256,8 +274,59 @@ export function ConsoleTabs({
     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;
   };
+  // A pane drag resting on a tab (its drawn index) shows it after SPRING_MS.
+  const spring = useRef<{ at: number; timer: ReturnType<typeof setTimeout> } | null>(null);
+  const stopSpring = () => {
+    if (spring.current) clearTimeout(spring.current.timer);
+    spring.current = null;
+  };
+  useEffect(() => stopSpring, []);
+  const hoveredIndexAt = (x: number) => {
+    const els = [...(listRef.current?.querySelectorAll<HTMLElement>("[data-tab-index]") ?? [])];
+    return els.findIndex((el) => {
+      const b = el.getBoundingClientRect();
+      return x >= b.left && x <= b.right;
+    });
+  };
+  const springAt = (e: DragEvent) => {
+    const slot = paneDragSlot();
+    const i = hoveredIndexAt(e.clientX);
+    const tab = tabs[i];
+    // Only a pane drag, onto a tab not on screen that does not hold it.
+    const target =
+      slot !== null &&
+      tab &&
+      !settings?.active &&
+      tab.index !== groups.active &&
+      !tab.slots.includes(slot)
+        ? i
+        : null;
+    if ((spring.current?.at ?? null) === target) return;
+    stopSpring();
+    if (target === null || !tab) return;
+    const index = tab.index;
+    spring.current = {
+      at: target,
+      timer: setTimeout(() => {
+        spring.current = null;
+        if (paneDragSlot() === null) return;
+        onGroupsChange((g) =>
+          g.active === index || !g.groups[index] ? g : { ...g, active: index }
+        );
+      }, SPRING_MS),
+    };
+  };
+  // An overflowing bar has no scrollbar: near either end, a drag scrolls it.
+  const edgeScroll = (x: number) => {
+    const list = listRef.current;
+    if (!list || list.scrollWidth <= list.clientWidth) return;
+    const b = list.getBoundingClientRect();
+    if (x < b.left + EDGE_SCROLL_PX) list.scrollLeft -= 16;
+    else if (x > b.right - EDGE_SCROLL_PX) list.scrollLeft += 16;
+  };
   const endDrag = () => {
     dragged.current = [];
+    stopSpring();
     setDropAt(null);
     setJoinAt(null);
   };
@@ -266,6 +335,8 @@ export function ConsoleTabs({
       if (!isBarDrag(e)) return;
       e.preventDefault();
       e.dataTransfer.dropEffect = "move";
+      edgeScroll(e.clientX);
+      springAt(e);
       const join = joinIndexAt(e.clientX);
       const at = join === null ? dropIndexAt(e.clientX) : null;
       setJoinAt((d) => (d === join ? d : join));
@@ -273,6 +344,7 @@ export function ConsoleTabs({
     },
     onDragLeave: (e: DragEvent) => {
       if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+      stopSpring();
       setDropAt(null);
       setJoinAt(null);
     },
@@ -363,30 +435,10 @@ export function ConsoleTabs({
     }
   };
 
-  // An AI session may be mid-turn: stopping a tab holding one asks first. A
-  // shell holds no agent.
-  const close = async (tab: Tab) => {
-    if (
-      tab.runs.some((r) => r.tool !== "shell") &&
-      !(await confirmDialog({
-        title:
-          tab.runs.length > 1
-            ? t("tabs.stopGroupTitle", { count: tab.runs.length })
-            : t("tabs.stopTitle", { name: label(tab.focus) }),
-        message: t("tabs.stopBody"),
-        confirmLabel: t("tabs.stopConfirm"),
-        destructive: true,
-      }))
-    )
-      return;
-    for (const r of tab.runs) {
-      try {
-        await api.run.kill(r.id);
-        onClosed(r.id);
-      } catch (err) {
-        toast.error(err);
-      }
-    }
+  // Stop archives the tab's sessions; Sleep keeps them listed to resume
+  // (`endRuns` asks first for an AI pane, which may be mid-turn).
+  const close = async (tab: Tab, sleep = false) => {
+    for (const id of await endRuns(tab.runs, { sleep, name: label(tab.focus), t })) onClosed(id);
   };
 
   const startRename = (r: RunHandle) => {
@@ -504,10 +556,11 @@ export function ConsoleTabs({
               draggable
               onDragStart={(e) => {
                 dragged.current = tab.slots;
-                if (single) startPaneDrag(e, single.slot ?? 0);
+                if (single) startPaneDrag(e, single.slot ?? 0, label(single));
                 else {
                   e.dataTransfer?.setData(TAB_DRAG_TYPE, String(tab.index));
                   if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+                  setDragChip(e, tabLabel(tab));
                 }
               }}
               onContextMenu={(e) => tabCtx.open(e, tab)}
@@ -568,6 +621,20 @@ export function ConsoleTabs({
                 <span className="truncate">{tabLabel(tab)}</span>
                 {state && <RunDot state={state} />}
               </button>
+              {tab.runs.some(canSleep) && (
+                <button
+                  type="button"
+                  data-testid={`console-tab-sleep-${tab.key}`}
+                  onClick={() => void close(tab, true)}
+                  aria-label={t("tabs.sleep")}
+                  title={t("tabs.sleep")}
+                  className={`shrink-0 rounded p-0.5 hover:bg-surface-4 hover:text-fg-primary ${
+                    active ? "" : "opacity-0 group-hover:opacity-100 focus:opacity-100"
+                  }`}
+                >
+                  <Moon className="h-3.5 w-3.5" />
+                </button>
+              )}
               <button
                 type="button"
                 data-testid={`console-tab-close-${tab.key}`}
@@ -715,6 +782,14 @@ export function ConsoleTabs({
             </>
           )}
           <MenuSeparator />
+          {ctxTab.runs.some(canSleep) && (
+            <MenuItem
+              testId="console-tab-menu-sleep"
+              onSelect={pickTab((tab) => void close(tab, true))}
+            >
+              {t("tabs.sleep")}
+            </MenuItem>
+          )}
           <MenuItem danger onSelect={pickTab((tab) => void close(tab))}>
             {t("tabs.close")}
           </MenuItem>

client/src/components/run/LaneConsolePane.tsx

@@ -20,7 +20,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AlertCircle, Plus } from "lucide-react";
 import { api } from "../../lib/api";
@@ -89,6 +89,13 @@ export function LaneConsolePane({
     : null;
   const chat = useSessionChat(chatSession);
   const chatable = !!handle && !!chatSession && CHAT_TOOLS.has(handle.tool);
+  // Stable, so the memoized terminal is not re-rendered for a new closure.
+  const onRunExitRef = useRef(onRunExit);
+  onRunExitRef.current = onRunExit;
+  const onTerminalExit = useCallback(() => {
+    setHandle(null);
+    onRunExitRef.current?.();
+  }, []);
 
   useEffect(() => {
     onHasActiveRunChange?.(handle !== null);
@@ -210,13 +217,11 @@ export function LaneConsolePane({
             runId={handle.id}
             wsBaseUrl={window.location.origin.replace(/^http/, "ws")}
             autoFocus={autoFocus && !(chatable && chat)}
+            covered={!!(chatable && chat)}
             // The pane died (double Ctrl+C out of `claude`, `exit`, a crash) —
             // the tab bar moves on (another tab, or the home's prompt box)
             // rather than leaving a dead terminal the user has to click out of.
-            onExit={() => {
-              setHandle(null);
-              onRunExit?.();
-            }}
+            onExit={onTerminalExit}
           />
         </div>
       )}

client/src/components/run/PaneChat.tsx

@@ -54,7 +54,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import { memo, useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
 import { useTranslation } from "react-i18next";
 import { ArrowUp, FileText, Square, SquareCheck } from "lucide-react";
 import { isSubmitEnter } from "../../lib/keys";
@@ -65,6 +65,7 @@ import { addAttachments, dragAttachments } from "../../lib/promptAttach";
 import { readChatDraft, writeChatDraft } from "../../lib/chatDraft";
 import { ChatOutline, outlineAttachment, useSessionOutline, type OutlineList } from "./ChatOutline";
 import { FileListModal, FilePreview, SkillListModal, type PreviewScope } from "./ChatFilePreview";
+import { resolveIn } from "../../lib/resolvePath";
 import { Select } from "../Select";
 import { Divider, showTerminal } from "./PaneGrid";
 import {
@@ -76,6 +77,7 @@ import {
   type PaneMenu,
 } from "../../lib/panePaste";
 import { useLiveRefresh } from "../../hooks/useLiveRefresh";
+import { useOnScreen, isShown } from "../../hooks/useOnScreen";
 import { openInChanges } from "../../lib/openInChanges";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
@@ -207,7 +209,7 @@ function PermissionChip({ runId, initial }: { runId: string; initial: Permission
 /** The menu the CLI asks with, as buttons: a pick presses its key in the
  *  pane; its "Type something" row opens a field right there instead —
  *  pressing that row's digit again would type the digit into the CLI's own. */
-function PaneMenuCard({
+export function PaneMenuCard({
   menu,
   onChoose,
   onAnswer,
@@ -306,7 +308,10 @@ function PaneMenuCard({
   );
 }
 
-export function PaneChat({
+/** Memoized: a lane_update re-renders the Workspace's pane tree, and every
+ *  prop here is a primitive or the pane's own run handle — nothing in a
+ *  frame about another lane reaches the chat. */
+export const PaneChat = memo(function PaneChat({
   run,
   sessionId,
   cwd,
@@ -370,7 +375,9 @@ export function PaneChat({
     return () => ro.disconnect();
   }, []);
   const [list, setList] = useState<OutlineList | null>(null);
-  const activity = useSessionOutline(sessionId);
+  // Kept mounted in a hidden workspace or tab: its pollers skip until shown.
+  const onScreen = useOnScreen(rootRef);
+  const activity = useSessionOutline(sessionId, onScreen);
   // Open by default only in a spanning pane, and only once there is an output.
   const outlineOpen = outlineChoice ?? (panelOpen && activity.outputs.length > 0);
   const scope: PreviewScope = { laneId, laneCwd: laneCwd || cwd, cwd, sessionId };
@@ -421,9 +428,12 @@ export function PaneChat({
         return JSON.stringify(next) === JSON.stringify(prev) ? prev : next;
       });
     read();
-    const timer = window.setInterval(read, 700);
+    // Nobody can answer a menu in a hidden tab or pane: no screen scan then.
+    const timer = window.setInterval(() => {
+      if (isShown(onScreen)) read();
+    }, 700);
     return () => window.clearInterval(timer);
-  }, [runId]);
+  }, [runId, onScreen]);
   const asking = waiting || menu !== null;
   // Gone until the pane redraws: no second press on a stale menu.
   const choose = (index: number) => {
@@ -451,10 +461,28 @@ export function PaneChat({
     model: null,
   });
   const onContext = useCallback(
-    (tokens: number, model: string | null) => setContext({ tokens, model }),
+    (tokens: number, model: string | null) =>
+      setContext((prev) =>
+        prev.tokens === tokens && prev.model === model ? prev : { tokens, model }
+      ),
     []
   );
 
+  // Stable, so typing in the prompt box does not re-render the conversation
+  // (ConversationView is memoized).
+  const openTerminal = useCallback(() => showTerminal(runId, sessionId), [runId, sessionId]);
+  const openFile = useCallback(
+    (named: string) => {
+      // A relative path in a reply (`server/lib/x.js`) is relative to this pane's folder.
+      const path = resolveIn(cwd, named);
+      // The workspace's Changes panel when the file is in its folder;
+      // else this view's own preview.
+      if (laneId !== null && openInChanges(laneId, cwd, path)) return;
+      setPreview(path);
+    },
+    [laneId, cwd]
+  );
+
   // Before the session starts the CLI may be asking in the terminal (trust
   // this folder? with "No, exit" preselected): an Enter from here answers it.
   // Asked, not refused: whether the session row appears right after the
@@ -503,15 +531,10 @@ export function PaneChat({
             follow={follow}
             waiting={asking}
             stopped={stops}
-            onOpenTerminal={() => showTerminal(runId, sessionId)}
+            onOpenTerminal={openTerminal}
             onContext={onContext}
             onNotStarted={setNotStarted}
-            onOpenFile={(path) => {
-              // The workspace's Changes panel when the file is in its folder;
-              // else this view's own preview.
-              if (laneId !== null && openInChanges(laneId, cwd, path)) return;
-              setPreview(path);
-            }}
+            onOpenFile={openFile}
           />
           {!outlineOpen && !preview && (
             <button
@@ -678,4 +701,4 @@ export function PaneChat({
       )}
     </div>
   );
-}
+});

client/src/components/run/PaneGrid.tsx

@@ -10,15 +10,26 @@
  * there, on its middle to swap), pick another live session for it, split it
  * right or down, or take the pane OUT of this tab (its session keeps running
  * in a tab of its own — so its icon is not the tab's stop X), or stop its
- * session there (X, `onStop`) without taking it out first. The grid shows
+ * session there (X, `onStop`, which archives it) or put an AI session to
+ * sleep (the moon left of it, `onSleep`: stopped but kept to resume) without
+ * taking it out first. The grid shows
  * one tab's panes; `onChange` applies through `updateActive`, so a session
  * dropped or swapped in from another tab leaves that tab. A header names the pane's session and
  * shows its state dot, as its tab does.
- * Tabs from `ConsoleTabs` drag in the same way (`startPaneDrag`). A
+ * Tabs from `ConsoleTabs` drag in the same way (`startPaneDrag`). While a
+ * drag is on, the pane it carries is dimmed, the browser's ghost is a small
+ * chip with its name (`setDragChip`) instead of a whole header, and the drop
+ * preview names what the drop will do (`dropAction`). The dragged pane's
+ * header stays mounted even once the tab bar has switched tabs under the
+ * drag (`ConsoleTabs` spring-loads a hovered tab) — removing the drag's
+ * source node would lose its `dragend`. A
  * right-click on a header offers the swap, a split with a new terminal and
  * the close as one menu. Dividers resize by pointer or by arrow keys; a drag
  * moves only the line and commits the ratio on release, so the layout is
  * saved and the terminals refit once, not on every pointer move.
+ * `kept` panes (another workspace's live sessions) are hidden children of
+ * the SAME list, keyed by `keyOf`, so a pane moves between shown and kept
+ * without remounting — a workspace switch never re-attaches its terminals.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -31,11 +42,13 @@ import {
   GripVertical,
   MessageSquare,
   Minimize2,
+  Moon,
   Rows2,
   SquareTerminal,
   X,
 } from "lucide-react";
 import type { RunHandle } from "../../lib/api";
+import { canSleep } from "../../lib/stopSession";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import {
   EMPTY_GROUPS,
@@ -66,11 +79,31 @@ export const PANE_DRAG_TYPE = "application/x-agenthub-pane";
 /** The slot being dragged: `dataTransfer` data cannot be read during dragover. */
 let dragSlot: number | null = null;
 
-/** Starts dragging a pane or a tab (`slot`) onto the grid. */
-export function startPaneDrag(e: React.DragEvent, slot: number): void {
+/** The slot a pane drag carries, or null (no pane drag is on). */
+export const paneDragSlot = (): number | null => dragSlot;
+
+/** The drag's ghost: a small chip naming what moves, not a snapshot of a
+ *  whole pane header or tab. Drawn off screen for the browser to copy. */
+export function setDragChip(e: React.DragEvent, label: string): void {
+  const dt = e.dataTransfer;
+  if (!label || typeof dt?.setDragImage !== "function") return;
+  const chip = document.createElement("div");
+  chip.textContent = label;
+  chip.className =
+    "fixed -top-96 left-0 max-w-[16rem] truncate rounded-md border border-accent/60 bg-surface-2 px-2.5 py-1 text-xs font-medium text-fg-primary shadow-lg";
+  document.body.appendChild(chip);
+  dt.setDragImage(chip, 12, 12);
+  // The browser copies it during dragstart; it may go right after.
+  window.setTimeout(() => chip.remove(), 0);
+}
+
+/** Starts dragging a pane or a tab (`slot`) onto the grid; `label` names it
+ *  on the drag's chip. */
+export function startPaneDrag(e: React.DragEvent, slot: number, label?: string): void {
   dragSlot = slot;
   e.dataTransfer?.setData(PANE_DRAG_TYPE, String(slot));
   if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+  if (label) setDragChip(e, label);
 }
 
 /** A run's icon: a shell's terminal glyph, else its AI tool's mark. */
@@ -137,6 +170,14 @@ export function dropPreview(l: PaneLayout, src: number, slot: number, zone: Zone
   return layoutRects(next.root).panes.find((p) => p.slot === src) ?? null;
 }
 
+/** What a drop does, as an i18n key (`lanes` namespace): the center swaps a
+ *  pane already shown, or shows one from another tab in the target's place
+ *  (the target gets a tab of its own); an edge places it on that side. */
+export function dropAction(l: PaneLayout, src: number, zone: Zone): string {
+  if (zone !== "center") return `panes.drop.${zone}`;
+  return leaves(l.root).includes(src) ? "panes.drop.swap" : "panes.drop.replace";
+}
+
 /** A small anchored menu: a trigger button and a list that closes on a pick,
  *  an outside click or Escape. */
 function PaneMenu({
@@ -365,10 +406,19 @@ export function PaneGrid({
   onNewSplit,
   stateOf,
   onStop,
+  onSleep,
+  keyOf = (slot) => slot,
+  kept = [],
 }: {
   layout: PaneLayout;
-  /** Stops the session in `slot` (the header's X). */
+  /** A pane's React key: unique across `mounted` and `kept` (a `paneKey`). */
+  keyOf?: (slot: number) => number;
+  /** Panes kept mounted, always hidden — never in the layout. */
+  kept?: { key: number; node: ReactNode }[];
+  /** Stops (and archives) the session in `slot` (the header's X). */
   onStop?: (slot: number) => void;
+  /** Sleeps the AI session in `slot`: stopped, kept to resume (the moon). */
+  onSleep?: (slot: number) => void;
   /** A live AI run's state for its header dot (none for a shell). */
   stateOf?: (r: RunHandle) => RunState | null;
   /** Every slot to keep mounted; those not in the layout are hidden. */
@@ -389,6 +439,8 @@ export function PaneGrid({
   const { t } = useTranslation("lanes");
   const gridRef = useRef<HTMLDivElement>(null);
   const [drop, setDrop] = useState<{ src: number; slot: number; zone: Zone } | null>(null);
+  // The slot a pane drag carries (a header here, or a tab from the bar).
+  const [dragging, setDragging] = useState<number | null>(null);
   const { panes, dividers } = layoutRects(layout.root);
   const shown = leaves(layout.root);
   const rectOf = new Map(panes.map((p) => [p.slot, p]));
@@ -407,6 +459,7 @@ export function PaneGrid({
     const end = () => {
       dragSlot = null;
       setDrop(null);
+      setDragging(null);
     };
     window.addEventListener("dragend", end);
     window.addEventListener("drop", end);
@@ -470,6 +523,7 @@ export function PaneGrid({
         if (!isPaneDrag(e)) return;
         e.preventDefault();
         if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        if (dragSlot !== dragging) setDragging(dragSlot);
         const z = zoneAt(e);
         const next = z && dragSlot !== null ? { src: dragSlot, ...z } : null;
         setDrop((d) =>
@@ -486,32 +540,52 @@ export function PaneGrid({
         const z = zoneAt(e);
         dragSlot = null;
         setDrop(null);
+        setDragging(null);
         if (!z || !Number.isInteger(src) || src === z.slot) return;
         onChange((l) => applyDrop(l, src, z.slot, z.zone));
       }}
     >
-      {mounted.map((slot) => {
+      {[
+        ...mounted.map((slot) => ({ key: keyOf(slot), slot, node: null as ReactNode })),
+        ...kept.map((k) => ({ key: k.key, slot: null, node: k.node })),
+      ].map(({ key, slot, node }) => {
+        if (slot === null) {
+          // The same element shape as a hidden pane below, so React keeps it.
+          return (
+            <div key={key} data-testid={`pane-kept-${key}`} className="hidden">
+              {false}
+              <div className="flex min-h-0 flex-1 flex-col">{node}</div>
+            </div>
+          );
+        }
         const r = rectOf.get(slot);
         const run = runOf(slot);
         const focused = layout.focus === slot;
+        const moving = dragging === slot;
         return (
           <div
-            key={slot}
+            key={key}
             data-testid={`pane-${slot}`}
             data-focused={r && focused ? "true" : undefined}
             // A menu opened in this pane stays inside it (`menuRoom`).
             data-menu-bounds
-            className={r ? "absolute flex flex-col" : "hidden"}
+            data-dragging={moving ? "true" : undefined}
+            className={r ? `absolute flex flex-col${moving ? " opacity-40" : ""}` : "hidden"}
             style={r ? pct(r) : undefined}
             onPointerDownCapture={() => r && focus(slot)}
             // Tabbing into a pane focuses it as a click does.
             onFocusCapture={() => r && focus(slot)}
           >
-            {multi && r && (
+            {/* The dragged pane's header stays while the drag lasts, even
+                hidden in another tab: it is the drag's source node. */}
+            {((multi && r) || moving) && (
               <div
                 data-testid={`pane-header-${slot}`}
                 draggable
-                onDragStart={(e) => startPaneDrag(e, slot)}
+                onDragStart={(e) => {
+                  startPaneDrag(e, slot, run ? label(run) : t("panes.empty"));
+                  setDragging(slot);
+                }}
                 onContextMenu={(e) => paneCtx.open(e, slot)}
                 title={t("panes.drag")}
                 className={`relative flex h-8 shrink-0 cursor-grab items-center gap-1 border-b border-border bg-surface-1 pl-1.5 pr-1 text-xs ${
@@ -574,6 +648,18 @@ export function PaneGrid({
                   >
                     <Minimize2 className="h-3.5 w-3.5" />
                   </button>
+                  {run && onSleep && canSleep(run) && (
+                    <button
+                      type="button"
+                      data-testid={`pane-sleep-${slot}`}
+                      title={t("panes.sleep")}
+                      aria-label={t("panes.sleep")}
+                      onClick={() => onSleep(slot)}
+                      className="flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:bg-surface-4 hover:text-fg-primary"
+                    >
+                      <Moon className="h-3.5 w-3.5" />
+                    </button>
+                  )}
                   {run && onStop && (
                     <button
                       type="button"
@@ -629,6 +715,11 @@ export function PaneGrid({
           <MenuItem onSelect={pickPane((slot) => onChange((l) => closeInLayout(l, slot)))}>
             {t("panes.closeShort")}
           </MenuItem>
+          {onSleep && canSleep(runOf(paneCtx.menu.item)) && (
+            <MenuItem testId="pane-menu-sleep" onSelect={pickPane(onSleep)}>
+              {t("panes.sleep")}
+            </MenuItem>
+          )}
           {onStop && runOf(paneCtx.menu.item) && (
             <MenuItem testId="pane-menu-stop" onSelect={pickPane(onStop)}>
               {t("panes.stop")}
@@ -646,12 +737,19 @@ export function PaneGrid({
           }
         />
       ))}
-      {preview && (
+      {preview && drop && (
         <div
           data-testid="pane-drop-preview"
-          className="pointer-events-none absolute z-20 rounded-md border-2 border-accent/60 bg-accent/15 transition-all duration-100"
+          className="pointer-events-none absolute z-20 flex items-center justify-center rounded-md border-2 border-accent/60 bg-accent/15 transition-all duration-100"
           style={pct(preview)}
-        />
+        >
+          <span
+            data-testid="pane-drop-label"
+            className="max-w-[90%] truncate rounded-md bg-accent-solid px-2.5 py-1 text-xs font-medium text-white shadow-lg"
+          >
+            {t(dropAction(layout, drop.src, drop.zone))}
+          </span>
+        </div>
       )}
     </div>
   );

client/src/components/run/RunSetup.tsx

@@ -69,6 +69,7 @@ import {
   addAttachments,
   droppedAttachments,
   droppedSkill,
+  droppedText,
   SKILL_MIME,
   rememberUploads,
 } from "../../lib/promptAttach";
@@ -412,7 +413,8 @@ export function PromptEditor({
   // else a `bare` editor's parent, the box every caller draws around it and
   // its toolbar — not only on the textarea: a panel row (`ATTACH_MIME`)
   // becomes an `@path` chip, a skill (`SKILL_MIME`) the prompt's leading
-  // `/command`, a file is uploaded.
+  // `/command`, a file is uploaded, a local `file://` list an `@path` chip
+  // and any other text is inserted.
   const rootRef = useRef<HTMLDivElement | null>(null);
   const dropRef = useRef<(e: DragEvent) => void>(() => {});
   dropRef.current = (e) => {
@@ -425,6 +427,17 @@ export function PromptEditor({
       e.preventDefault();
       onChange(`/${skill} ${value.replace(/^\s+/, "")}`);
     } else if (attachImages(e.dataTransfer?.files)) e.preventDefault();
+    else {
+      // Only text (a file manager's or an editor's `file://` list, a
+      // selection, a link): what the terminal beneath would paste.
+      // On the textarea itself the browser inserts text at the drop point.
+      const dropped = droppedText(e.dataTransfer);
+      if (!dropped || ("text" in dropped && e.target === taRef.current)) return;
+      e.preventDefault();
+      if ("attachments" in dropped)
+        onImagesChange((prev) => addAttachments(prev, dropped.attachments));
+      else insert(dropped.text);
+    }
   };
   useEffect(() => {
     const zone =
@@ -433,7 +446,8 @@ export function PromptEditor({
     if (!zone) return;
     const over = (e: DragEvent) => {
       const types = e.dataTransfer?.types ?? [];
-      if (![ATTACH_MIME, SKILL_MIME, "Files"].some((m) => types.includes(m))) return;
+      const accepts = [ATTACH_MIME, SKILL_MIME, "Files", "text/uri-list", "text/plain"];
+      if (!accepts.some((m) => types.includes(m))) return;
       e.preventDefault();
       e.dataTransfer!.dropEffect = "copy";
     };

client/src/components/run/TerminalView.tsx

@@ -17,7 +17,7 @@
  * Files (images or any other) dropped or pasted on it — Ctrl+V included — are saved on the server
  * (`POST /api/run/drop-file`) and their PATHS pasted into the pane — what a
  * local terminal does on a drop, and how `claude` attaches an image or reads
- * a file. The pane also registers with
+ * a file. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
  * `lib/panePaste.ts`, so a diff-line comment from the Changes panel can be
  * pasted into whichever of the workspace's panes was focused last.
  * Keyboard: the terminal keeps Tab and Shift+Tab (claude cycles its permission
@@ -32,7 +32,8 @@
  * (OSC 52 — tmux's default `set-clipboard external` passes its own
  * copy-mode selections on; a CLI's OSC 52 inside the pane is not) lands in the browser
  * clipboard (`@xterm/addon-clipboard`, write-only: no program in the pane may
- * READ the user's clipboard). While the socket is down a "Reconnecting…"
+ * READ the user's clipboard) — over plain HTTP too, through `writeClipboard`'s
+ * textarea fallback. While the socket is down a "Reconnecting…"
  * overlay says keystrokes are not reaching the pane; resizes reach tmux at
  * most every 150 ms. Several browsers on one pane share ONE size: the server
  * names a driver (see pty-attach.js) and the others FOLLOW — their xterm takes
@@ -41,6 +42,7 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import {
+  memo,
   useEffect,
   useId,
   useMemo,
@@ -59,11 +61,13 @@ import "@xterm/xterm/css/xterm.css";
 import { useTheme } from "../../hooks/useTheme";
 import { terminalThemeFor } from "../../lib/terminalTheme";
 import { api } from "../../lib/api";
-import { notePaneFocus, registerPane } from "../../lib/panePaste";
+import { writeClipboard } from "../../lib/clipboard";
+import { MENU_CURSOR_ROW, notePaneFocus, registerPane } from "../../lib/panePaste";
 import { attachImeInput } from "../../lib/imeInput";
 import { TERMINAL_FONTS, readTerminalFont } from "../../lib/terminalFont";
+import { FONT_SIZE_EVENT, readTerminalFontSize } from "../../lib/fontSize";
 
-type DropState = "hint" | "uploading" | "failed";
+type DropState = "hint" | "paste" | "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";
@@ -85,9 +89,11 @@ const clipboardProvider: IClipboardProvider = {
   // tmux names no selection (`52;;<b64>`), a CLI usually `c`: both are the
   // clipboard. An empty write (a "clear") is ignored.
   writeText: (_selection, text) => {
-    // Silent and best effort: no toast per copy, and on a non-secure origin
-    // (no Clipboard API, no user gesture for a fallback) it simply does nothing.
-    if (text) void navigator.clipboard?.writeText(text).catch(() => undefined);
+    // Silent and best effort: no toast per copy. On a non-secure origin
+    // (`http://<lan-ip>`, no Clipboard API) writeClipboard falls back to the
+    // textarea copy, which the browser allows while the drag that made the
+    // selection still counts as the user's gesture.
+    if (text) void writeClipboard(text);
   },
 };
 
@@ -134,6 +140,10 @@ export function loadXterm(): Promise<Xterm> {
 const RETRY_MIN_MS = 1500;
 const RETRY_MAX_MS = 30_000;
 const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer.types).includes("Files");
+/** A text drag (a Files/Changes row, a skill, selected text): xterm.js has no
+ *  drop handling of its own, so the pane pastes it, as a local terminal does. */
+const hasText = (e: DragEvent) =>
+  !hasFiles(e) && Array.from(e.dataTransfer.types).includes("text/plain");
 
 interface TerminalViewProps {
   runId: string;
@@ -145,9 +155,22 @@ interface TerminalViewProps {
   /** Take the keyboard when it appears (default). Off for a split pane that
    *  is not the focused one, or keys would land in whichever mounted last. */
   autoFocus?: boolean;
+  /** Another layer (the pane's chat) covers it. xterm stops drawing only when
+   *  its IntersectionObserver says off screen, and a covered terminal is not —
+   *  so it is moved out of the viewport with a transform, which keeps its
+   *  layout size (no PTY resize; the chat still reads and answers its menus). */
+  covered?: boolean;
 }
 
-export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: TerminalViewProps) {
+/** Memoized: the Workspace re-renders its pane tree on every lane_update, and
+ *  a terminal only cares about its own props (its owner keeps `onExit` stable). */
+export const TerminalView = memo(function TerminalView({
+  runId,
+  wsBaseUrl,
+  onExit,
+  autoFocus = true,
+  covered = false,
+}: TerminalViewProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   // Read through a ref: an inline `onExit` from the parent changes identity on
   // every render, and as an effect dep it would tear the terminal down and
@@ -200,7 +223,16 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
   const ctrlVRef = useRef(false);
 
   const onDrop = (e: DragEvent) => {
-    if (!hasFiles(e)) return; // dragged text keeps xterm's own handling
+    if (hasText(e)) {
+      e.preventDefault();
+      dragDepth.current = 0;
+      setDrop(null);
+      const text = e.dataTransfer.getData("text/plain");
+      if (text) termRef.current?.paste(text + " ");
+      termRef.current?.focus();
+      return;
+    }
+    if (!hasFiles(e)) return;
     e.preventDefault();
     dragDepth.current = 0;
     void attachFiles(Array.from(e.dataTransfer.files));
@@ -267,7 +299,7 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
       // 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,
+        fontSize: readTerminalFontSize(),
         cursorBlink: true,
         fontFamily: TERMINAL_FONTS[readTerminalFont()],
         // A step heavier than stock, like the rest of the UI (main.tsx loads these weights).
@@ -323,9 +355,20 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
       // `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(() => {
+      // psmux (Windows) never turns tracking on, so xterm never reports the
+      // wheel there; on the server's `{type:"wheel"}` this pane sends the SGR
+      // wheel report itself — psmux scrolls, or hands it to the pane's app.
+      // ponytail: at 1;1, which is all psmux reports to the app anyway.
+      let ownWheel = false;
+      term.attachCustomWheelEventHandler((ev) => {
         const mode = term.modes.mouseTrackingMode;
         const tracked = mode !== "none" && mode !== "x10";
+        if (!tracked && ownWheel) {
+          if (ev.deltaY && wsRef.current?.readyState === WebSocket.OPEN) {
+            wsRef.current.send(`\x1b[<${ev.deltaY < 0 ? 64 : 65};1;1M`);
+          }
+          return false;
+        }
         return tracked || term.buffer.active.type !== "alternate";
       });
 
@@ -374,6 +417,16 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
           }, 0);
           return false;
         }
+        // Ctrl+Z: a terminal sends ^Z (SIGTSTP), which SUSPENDS claude or
+        // codex — the pane drops to its shell and the session looks closed,
+        // with nothing on screen saying `fg` brings it back. In a browser
+        // Ctrl+Z means undo, so it sends Ctrl+_ — undo in Claude Code's prompt
+        // and in bash/readline — and never suspends the program.
+        if (ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey && key === "z") {
+          ev.preventDefault();
+          term.input("\x1f", true);
+          return false;
+        }
         if (ev.key === "Tab" && tabMovesRef.current) return false;
         if (ev.key === "Tab" && ev.shiftKey) ev.preventDefault();
         return true;
@@ -488,6 +541,8 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
                   requestAnimationFrame(scaleToFit);
                 } else if (msg.type === "lead") {
                   takeLead();
+                } else if (msg.type === "wheel") {
+                  ownWheel = true;
                 } else if (msg.type === "exit") {
                   ended = true;
                   term.write(`\r\n${tRef.current("terminal.ended", { code: msg.code })}\r\n`);
@@ -559,6 +614,17 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
         refit();
       };
       document.fonts?.addEventListener("loadingdone", onFontLoaded);
+      // Settings → Appearance changed the terminal's font or size: an open
+      // pane takes it now, re-measured and re-fitted like a font landing.
+      const onFontPref = () => {
+        const size = readTerminalFontSize();
+        const family = TERMINAL_FONTS[readTerminalFont()];
+        if (term.options.fontSize === size && term.options.fontFamily?.trimEnd() === family) return;
+        term.options.fontSize = size;
+        term.options.fontFamily = family;
+        refit();
+      };
+      window.addEventListener(FONT_SIZE_EVENT, onFontPref);
 
       return () => {
         if (retryTimer) clearTimeout(retryTimer);
@@ -566,6 +632,7 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
         searchRef.current = null;
         resizeObserver.disconnect();
         document.fonts?.removeEventListener("loadingdone", onFontLoaded);
+        window.removeEventListener(FONT_SIZE_EVENT, onFontPref);
         term.textarea?.removeEventListener("focus", reassert);
         detachIme();
         resizeDisposable.dispose();
@@ -618,16 +685,27 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
           if (wsRef.current?.readyState === WebSocket.OPEN) wsRef.current.send(data);
         },
         // The rows on screen, dim cells (a TUI's placeholder) left out.
-        () => {
+        // `menuOnly` (the chat's 700 ms menu poll): plain text first, and the
+        // cell-by-cell read only when a row could be a menu's cursor row.
+        (menuOnly = false) => {
           const term = termRef.current;
           if (!term) return null;
           const buf = term.buffer.active;
+          if (menuOnly) {
+            let maybe = false;
+            for (let y = 0; y < term.rows && !maybe; y++)
+              maybe = MENU_CURSOR_ROW.test(
+                buf.getLine(buf.baseY + y)?.translateToString(true) ?? ""
+              );
+            if (!maybe) return null;
+          }
           const rows: string[] = [];
+          const reuse = buf.getNullCell();
           for (let y = 0; y < term.rows; y++) {
             const line = buf.getLine(buf.baseY + y);
             let row = "";
             for (let x = 0; line && x < line.length; x++) {
-              const cell = line.getCell(x);
+              const cell = line.getCell(x, reuse);
               // Width 0: the right half of a wide character.
               if (cell && cell.getWidth() && !cell.isDim()) row += cell.getChars() || " ";
             }
@@ -673,26 +751,31 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
       className="relative h-full w-full pb-1 pl-3 pr-1 pt-1.5"
       style={{ backgroundColor: palette.background }}
       onDragEnter={(e) => {
-        if (!hasFiles(e)) return;
+        if (!hasFiles(e) && !hasText(e)) return;
         e.preventDefault();
         dragDepth.current += 1;
-        setDrop("hint");
+        setDrop(hasFiles(e) ? "hint" : "paste");
       }}
       onDragOver={(e) => {
-        if (!hasFiles(e)) return;
+        if (!hasFiles(e) && !hasText(e)) return;
         e.preventDefault(); // without it the browser refuses the drop
         e.dataTransfer.dropEffect = "copy";
       }}
       onDragLeave={(e) => {
-        if (!hasFiles(e)) return;
+        if (!hasFiles(e) && !hasText(e)) return;
         dragDepth.current = Math.max(0, dragDepth.current - 1);
-        if (dragDepth.current === 0) setDrop((d) => (d === "hint" ? null : d));
+        if (dragDepth.current === 0) setDrop((d) => (d === "hint" || d === "paste" ? null : d));
       }}
       onDrop={onDrop}
       onPasteCapture={onPaste}
       onFocus={() => notePaneFocus(runId)}
     >
-      <div ref={containerRef} className="h-full w-full" data-testid="terminal-view" />
+      <div
+        ref={containerRef}
+        className="h-full w-full"
+        style={covered ? { transform: "translateX(-300vw)" } : undefined}
+        data-testid="terminal-view"
+      />
       <p id={hintId} className="sr-only">
         {t("terminal.keyboardHint")}
       </p>
@@ -793,4 +876,4 @@ export function TerminalView({ runId, wsBaseUrl, onExit, autoFocus = true }: Ter
       )}
     </div>
   );
-}
+});

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

@@ -4,7 +4,7 @@
  * pane's folder through the lane's git file read, a memory file under
  * `~/.claude` through the config pages' read, a dropped text file through the
  * drop route, an image read outside the folder through the session's image
- * route, a Windows path like a POSIX one, anything else by path only; the
+ * route, a text file read or written outside it through the session's file route, a Windows path like a POSIX one, anything else by path only; the
  * list dialog previewing the file picked in it; and the skills dialog finding
  * each skill's SKILL.md by name.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -31,7 +31,14 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         }),
         gitRawUrl: () => "",
       },
-      sessions: { readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}` },
+      sessions: {
+        readImageUrl: (id: string, p: string) => `/img/${id}?path=${p}`,
+        readFile: vi.fn((_id: string, p: string) =>
+          p.endsWith(".md")
+            ? Promise.resolve({ text: "# Audit report", truncated: false })
+            : Promise.reject(new Error("404"))
+        ),
+      },
       ccConfig: {
         skills: vi.fn().mockResolvedValue({
           items: [{ scope: "user", name: "xlsx", file: "/h/.claude/skills/xlsx/SKILL.md" }],
@@ -110,9 +117,16 @@ describe("FilePreview", () => {
     expect(screen.getByText("No preview for this file here")).toBeTruthy();
   });
 
-  it("shows only the path of a file it may not read", () => {
+  it("reads a text file it wrote outside the folder through the session", async () => {
+    const report = "/home/a/Documents/audit/REPORT_ssh_ec2.md";
+    render(<FilePreview path={report} scope={scope} onClose={() => {}} />);
+    expect(await screen.findByText("Audit report")).toBeTruthy();
+    expect(vi.mocked(api.sessions.readFile)).toHaveBeenCalledWith("s1", report);
+  });
+
+  it("shows only the path of a file it may not read", async () => {
     render(<FilePreview path="/etc/hosts" scope={scope} onClose={() => {}} />);
-    expect(screen.getByText("No preview for this file here")).toBeTruthy();
+    expect(await screen.findByText("No preview for this file here")).toBeTruthy();
   });
 });
 

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

@@ -0,0 +1,126 @@
+/**
+ * @file ConsoleTabs.test.tsx
+ * @description The tab bar's spring-loaded tabs: a pane drag resting on
+ * another tab shows it after `SPRING_MS`, so the pane can be dropped on that
+ * tab's panes; moving off before then, or resting on the tab already holding
+ * the pane, shows nothing.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, createEvent, fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import type { RunHandle } from "../../../lib/api";
+import type { Lane } from "../../../lib/types";
+import { pane, split, type PaneGroups } from "../../../lib/paneLayout";
+import { ConsoleTabs, SPRING_MS } from "../ConsoleTabs";
+import { PANE_DRAG_TYPE, paneDragSlot } from "../PaneGrid";
+
+vi.mock("../../../lib/api", () => ({
+  api: {
+    aiTools: {
+      list: vi.fn().mockResolvedValue({ default: "claude", tools: [] }),
+      models: vi.fn().mockResolvedValue({ flag: true, models: [], defaultModel: null }),
+    },
+  },
+}));
+
+const LANE = { id: 1, tool: "claude", cwd: "/w", title: "w" } as unknown as Lane;
+const run = (slot: number): RunHandle => ({
+  id: slot ? `agenthub-lane-1-${slot}` : "agenthub-lane-1",
+  laneId: 1,
+  slot,
+  status: "running",
+  cwd: "/w",
+  model: null,
+  permissionMode: null,
+  effort: null,
+  resumeSessionId: null,
+  sessionId: null,
+  startedAt: null,
+  promptPreview: null,
+  tool: "shell",
+});
+// Tab 0: pane 0 alone (on screen); tab 1: panes 1 and 2.
+const GROUPS: PaneGroups = {
+  groups: [
+    { root: pane(0), focus: 0 },
+    { root: split("row", pane(1), pane(2)), focus: 1 },
+  ],
+  active: 0,
+};
+
+function setup() {
+  let groups = GROUPS;
+  const onGroupsChange = vi.fn((fn: (g: PaneGroups) => PaneGroups) => {
+    groups = fn(groups);
+  });
+  render(
+    <MemoryRouter>
+      <ConsoleTabs
+        lane={LANE}
+        tabs={[run(0), run(1), run(2)]}
+        groups={GROUPS}
+        onGroupsChange={onGroupsChange}
+        onOpen={vi.fn()}
+        onClosed={vi.fn()}
+      />
+    </MemoryRouter>
+  );
+  // jsdom lays nothing out: tab i spans x 100i … 100i+100.
+  for (const el of document.querySelectorAll<HTMLElement>("[data-tab-index]")) {
+    const i = Number(el.dataset.tabIndex);
+    el.getBoundingClientRect = () =>
+      ({
+        left: i * 100,
+        right: i * 100 + 100,
+        width: 100,
+        top: 0,
+        bottom: 40,
+        height: 40,
+      }) as DOMRect;
+  }
+  return { onGroupsChange, groups: () => groups };
+}
+
+const dataTransfer = () => ({
+  types: [PANE_DRAG_TYPE],
+  setData: vi.fn(),
+  getData: () => "",
+  effectAllowed: "",
+  dropEffect: "",
+});
+
+function drag(type: "dragStart" | "dragOver", el: Element, clientX = 0) {
+  const ev = createEvent[type](el, { dataTransfer: dataTransfer() });
+  Object.defineProperty(ev, "clientX", { value: clientX });
+  fireEvent(el, ev);
+}
+
+const tabEl = (key: string) => screen.getByTestId(`console-tab-${key}`).parentElement as Element;
+
+describe("ConsoleTabs spring-loaded tabs", () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => vi.useRealTimers());
+
+  it("a pane drag resting on another tab shows that tab", () => {
+    const { onGroupsChange, groups } = setup();
+    drag("dragStart", tabEl("0"));
+    expect(paneDragSlot()).toBe(0);
+    drag("dragOver", tabEl("1-2"), 150);
+    act(() => void vi.advanceTimersByTime(SPRING_MS - 1));
+    expect(onGroupsChange).not.toHaveBeenCalled();
+    act(() => void vi.advanceTimersByTime(1));
+    expect(groups().active).toBe(1);
+  });
+
+  it("moving off the tab first, or resting on the pane's own tab, shows nothing", () => {
+    const { onGroupsChange } = setup();
+    drag("dragStart", tabEl("0"));
+    drag("dragOver", tabEl("1-2"), 150);
+    act(() => void vi.advanceTimersByTime(SPRING_MS / 2));
+    drag("dragOver", tabEl("0"), 50);
+    act(() => void vi.advanceTimersByTime(SPRING_MS * 2));
+    expect(onGroupsChange).not.toHaveBeenCalled();
+  });
+});

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

@@ -87,6 +87,7 @@ vi.mock("../../../lib/api", async (importOriginal) => {
           skills: [],
           mcp: [],
         }),
+        readFile: r({ text: "", truncated: false }),
       },
       lanes: {
         gitFile: r({
@@ -355,7 +356,9 @@ describe("PaneChat — the activity panel", () => {
     );
     const first = render(pane());
     fireEvent.click(
-      within(await screen.findByTestId("chat-outline")).getByRole("button", { name: "Hide side panel" })
+      within(await screen.findByTestId("chat-outline")).getByRole("button", {
+        name: "Hide side panel",
+      })
     );
     first.unmount();
     render(pane());
@@ -431,6 +434,45 @@ describe("PaneChat — the unsent prompt", () => {
     await waitFor(() => expect(localStorage.getItem("agenthub.chat.draft.s1")).toBeNull());
   });
 
+  // A drag from outside the dashboard (a file manager, VS Code, a selection)
+  // carries only text: the terminal beneath pastes it, so the chat takes it too.
+  const textDrop = (data: Record<string, string>) => {
+    const drop = new Event("drop", { bubbles: true, cancelable: true });
+    Object.defineProperty(drop, "dataTransfer", {
+      value: { types: Object.keys(data), getData: (t: string) => data[t] ?? "", files: [] },
+    });
+    act(() => {
+      screen.getByTestId("pane-chat").dispatchEvent(drop);
+    });
+    return drop;
+  };
+
+  it("attaches the local files of a dropped file:// list", async () => {
+    renderChat();
+    const drop = textDrop({
+      "text/uri-list": "file:///home/u/My%20Docs/spec.md\r\nfile:///home/u/b.ts",
+      "text/plain": "/home/u/My Docs/spec.md",
+    });
+    expect(drop.defaultPrevented).toBe(true);
+    expect(await screen.findByText("spec.md")).toBeInTheDocument();
+    expect(screen.getByText("b.ts")).toBeInTheDocument();
+    fireEvent.change(screen.getByPlaceholderText("Write a message…"), {
+      target: { value: "read" },
+    });
+    fireEvent.click(screen.getByTestId("pane-chat-send"));
+    expect(submitToRun).toHaveBeenCalledWith(
+      "agenthub-lane-1",
+      'read @"/home/u/My Docs/spec.md" @/home/u/b.ts'
+    );
+  });
+
+  it("inserts dropped plain text into the prompt", () => {
+    renderChat();
+    const drop = textDrop({ "text/plain": "src/lib/x.ts" });
+    expect(drop.defaultPrevented).toBe(true);
+    expect(screen.getByPlaceholderText("Write a message…")).toHaveValue("src/lib/x.ts");
+  });
+
   // Issue #73: before the session starts the CLI may be asking in the terminal
   // (trust this folder? — "No, exit" preselected); an Enter sent from here
   // would answer it, so a send asks first.

client/src/components/run/__tests__/PaneGrid.test.ts

@@ -2,12 +2,13 @@
  * @file PaneGrid.test.ts
  * @description The pane drop preview: it draws where the dragged pane will
  * actually land (`dropPreview` over `applyDrop`), not half of the target's
- * current box, and nothing for a drop that changes nothing.
+ * current box, and nothing for a drop that changes nothing; and the label
+ * naming what a drop does (`dropAction`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
 import { describe, expect, it } from "vitest";
-import { dropPreview } from "../PaneGrid";
+import { dropAction, dropPreview } from "../PaneGrid";
 import { pane, split, type PaneLayout } from "../../../lib/paneLayout";
 
 const AB: PaneLayout = { root: split("row", pane(0), pane(1)), focus: 0 };
@@ -34,3 +35,15 @@ describe("dropPreview", () => {
     expect(dropPreview(full, 5, 0, "left")).toBeNull();
   });
 });
+
+describe("dropAction", () => {
+  it("an edge places the pane on that side", () => {
+    expect(dropAction(AB, 0, "left")).toBe("panes.drop.left");
+    expect(dropAction(AB, 2, "bottom")).toBe("panes.drop.bottom");
+  });
+
+  it("the center swaps a shown pane, or shows one from another tab in its place", () => {
+    expect(dropAction(AB, 0, "center")).toBe("panes.drop.swap");
+    expect(dropAction(AB, 2, "center")).toBe("panes.drop.replace");
+  });
+});

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

@@ -231,6 +231,24 @@ describe("TerminalView", () => {
     expect(wheelHandlerMock.mock.calls[0]![0]!(new Event("wheel"))).toBe(false);
   });
 
+  it("sends the wheel itself once the server says its tmux never tracks the mouse", () => {
+    // psmux (Windows) never turns mouse tracking on for its client, so xterm
+    // never reports the wheel and the pane could not be scrolled at all.
+    termState.modes.mouseTrackingMode = "none";
+    termState.buffer.active.type = "alternate";
+    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+    const ws = MockWebSocket.instances[MockWebSocket.instances.length - 1]!;
+    ws.onmessage?.({ data: '{"type":"wheel"}' });
+    const wheel = wheelHandlerMock.mock.calls[wheelHandlerMock.mock.calls.length - 1]![0]!;
+    expect(wheel(new WheelEvent("wheel", { deltaY: -100 }))).toBe(false);
+    expect(wheel(new WheelEvent("wheel", { deltaY: 100 }))).toBe(false);
+    expect(ws.sent).toEqual(["\x1b[<64;1;1M", "\x1b[<65;1;1M"]);
+    // Tracked again (a tmux that does report): xterm sends it, never twice.
+    termState.modes.mouseTrackingMode = "any";
+    expect(wheel(new WheelEvent("wheel", { deltaY: -100 }))).toBe(true);
+    expect(ws.sent).toHaveLength(2);
+  });
+
   it("keeps Shift+Tab in the terminal instead of letting focus escape", () => {
     render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
     const handler = keyHandlerMock.mock.calls[0]![0]! as (e: KeyboardEvent) => boolean;
@@ -512,6 +530,29 @@ describe("TerminalView", () => {
     );
   });
 
+  it("pastes the text of a dragged Files-panel row, uploading nothing", () => {
+    dropFileMock.mockReset();
+    pasteMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
+    const data: Record<string, string> = {
+      "application/x-agenthub-attach": '{"path":"@src/a.ts","name":"a.ts"}',
+      "text/plain": "src/a.ts",
+    };
+    const dataTransfer = {
+      types: Object.keys(data),
+      files: [],
+      getData: (k: string) => data[k] ?? "",
+    };
+    fireEvent.dragEnter(screen.getByTestId("terminal-view"), { dataTransfer });
+    expect(screen.getByTestId("terminal-drop")).toHaveTextContent(
+      "Drop to paste into the terminal"
+    );
+    fireEvent.drop(screen.getByTestId("terminal-view"), { dataTransfer });
+    expect(pasteMock).toHaveBeenCalledWith("src/a.ts ");
+    expect(screen.queryByTestId("terminal-drop")).toBeNull();
+    expect(dropFileMock).not.toHaveBeenCalled();
+  });
+
   it("uploads a pasted image and pastes its path, like a drop", async () => {
     dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-image.png" });
     pasteMock.mockClear();
@@ -565,6 +606,24 @@ describe("TerminalView", () => {
     vi.useRealTimers();
   });
 
+  // ^Z suspended claude: the pane fell to its shell and the session looked
+  // closed. Ctrl+Z is undo in a browser, so it sends Ctrl+_ instead.
+  it("turns Ctrl+Z into undo (Ctrl+_) and never sends ^Z, which would suspend the session", () => {
+    inputMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" />);
+    const handler = keyHandlerMock.mock.calls[0]![0]! as (e: KeyboardEvent) => boolean;
+    const ev = new KeyboardEvent("keydown", { key: "z", ctrlKey: true, cancelable: true });
+    expect(handler(ev)).toBe(false);
+    expect(ev.defaultPrevented).toBe(true);
+    expect(inputMock).toHaveBeenCalledWith("\x1f", true);
+    expect(inputMock).not.toHaveBeenCalledWith("\x1a", expect.anything());
+    // Other chords with Z are left to xterm (Ctrl+Shift+Z, plain z).
+    expect(handler(new KeyboardEvent("keydown", { key: "Z", ctrlKey: true, shiftKey: true }))).toBe(
+      true
+    );
+    expect(handler(new KeyboardEvent("keydown", { key: "z" }))).toBe(true);
+  });
+
   // Safari + macOS's own Vietnamese Telex: the first letter is an insertText,
   // every later key REPLACES the word — the event order captured on a Mac.
   it("forwards Safari Telex's word replacements as backspaces plus the new tail", () => {

client/src/components/settings/AccountSettings.tsx

@@ -0,0 +1,432 @@
+/**
+ * @file AccountSettings.tsx
+ * @description Settings → Account (server mode, any signed-in role): the
+ * account's own information (`GET /api/me/account` — username, role, member
+ * since, workspaces, sessions, active sign-ins, last sign-in), its avatar
+ * (`PUT`/`DELETE /api/me/avatar` — PNG, JPEG, GIF or WebP, at most 1 MB; the
+ * sidebar shows it at once), its display name
+ * and email (`PATCH /api/me/account`), a password change that asks for the
+ * current one (`POST /api/me/password` — this browser stays signed in, every
+ * other sign-in ends) and "Sign out other devices" (`POST
+ * /api/me/sign-out-others`, behind `confirmDialog`). Role and state are an
+ * admin's to change, on the Users page — never here.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { Camera, LogOut, RefreshCw, Trash2 } from "lucide-react";
+import { api, type MyAccount } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
+import { toast } from "../../lib/toast";
+import { confirmDialog } from "../../lib/confirm";
+import { isSubmitEnter } from "../../lib/keys";
+import { useAuth } from "../AuthGate";
+import { ROLE_BADGE } from "../users/UserEditDialog";
+import { UserAvatar } from "../users/UserAvatar";
+import { SettingsSection } from "./SettingsRow";
+
+type ServerAccount = Extract<MyAccount, { mode: "server" }>;
+
+const errText = (t: (k: string, o?: Record<string, unknown>) => string, e: unknown) => {
+  const err = e as Error & { code?: string };
+  return err.code && t(`users:errors.${err.code}`, { defaultValue: "" })
+    ? t(`users:errors.${err.code}`)
+    : err.message;
+};
+
+export function AccountSettings() {
+  const { t } = useTranslation("settings");
+  const [account, setAccount] = useState<ServerAccount | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  const { updateUser } = useAuth();
+  const apply = useCallback(
+    (r: MyAccount) => {
+      if (r.mode !== "server") return;
+      setAccount(r);
+      // The sidebar shows the name and avatar: let them follow a save at once.
+      updateUser({
+        displayName: r.user.displayName,
+        email: r.user.email,
+        avatarAt: r.user.avatarAt ?? null,
+      });
+    },
+    [updateUser]
+  );
+  const load = useCallback(() => {
+    setLoadError(null);
+    api.me
+      .account()
+      .then(apply)
+      .catch((e: Error) => setLoadError(e.message));
+  }, [apply]);
+  useEffect(load, [load]);
+
+  if (loadError) {
+    return (
+      <div role="alert" className="card flex items-center gap-3 p-4 text-sm text-status-danger">
+        <span className="flex-1">{t("account.loadFailed", { message: loadError })}</span>
+        <button type="button" className="btn-ghost text-xs" onClick={load}>
+          <RefreshCw className="h-3.5 w-3.5" /> {t("common:retry")}
+        </button>
+      </div>
+    );
+  }
+  if (!account) {
+    return <div className="card h-40 animate-pulse" data-testid="account-loading" />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <ProfileCard account={account} onSaved={apply} />
+      <ProfileForm account={account} onSaved={apply} />
+      <PasswordForm />
+      <SignOutOthers logins={account.logins} onDone={load} />
+    </div>
+  );
+}
+
+/** The largest avatar the server takes (server/lib/avatars.js). */
+const MAX_AVATAR_BYTES = 1024 * 1024;
+
+function ProfileCard({
+  account,
+  onSaved,
+}: {
+  account: ServerAccount;
+  onSaved: (r: MyAccount) => void;
+}) {
+  const { t } = useTranslation("settings");
+  const { user } = account;
+  const shown = user.displayName || user.username;
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [busy, setBusy] = useState(false);
+
+  const run = async (op: () => Promise<MyAccount>, done: string) => {
+    setBusy(true);
+    try {
+      onSaved(await op());
+      toast.success(done);
+    } catch (e) {
+      toast.error(errText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const pick = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = ""; // the same file can be picked again
+    if (!file) return;
+    if (file.size > MAX_AVATAR_BYTES) {
+      toast.error(t("account.avatar.tooBig"));
+      return;
+    }
+    void run(() => api.me.setAvatar(file), t("account.avatar.saved"));
+  };
+
+  return (
+    <section className="card p-5" data-testid="account-card">
+      <div className="flex items-center gap-4">
+        <div className="flex flex-shrink-0 flex-col items-center gap-1.5">
+          <UserAvatar name={shown} avatarAt={user.avatarAt} className="h-14 w-14 text-lg" />
+          <div className="flex items-center gap-0.5">
+            <button
+              type="button"
+              className="btn-ghost h-6 w-6 justify-center p-0"
+              onClick={() => fileRef.current?.click()}
+              disabled={busy}
+              title={t("account.avatar.change")}
+              aria-label={t("account.avatar.change")}
+              data-testid="account-avatar-change"
+            >
+              <Camera className="h-3.5 w-3.5" />
+            </button>
+            {user.avatarAt && (
+              <button
+                type="button"
+                className="btn-ghost h-6 w-6 justify-center p-0"
+                onClick={() => void run(() => api.me.removeAvatar(), t("account.avatar.removed"))}
+                disabled={busy}
+                title={t("account.avatar.remove")}
+                aria-label={t("account.avatar.remove")}
+                data-testid="account-avatar-remove"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+          <input
+            ref={fileRef}
+            type="file"
+            accept="image/png,image/jpeg,image/gif,image/webp"
+            className="hidden"
+            onChange={pick}
+            data-testid="account-avatar-input"
+          />
+        </div>
+        <div className="min-w-0">
+          <h3 className="truncate text-base font-semibold text-fg-primary">{shown}</h3>
+          <p className="truncate text-xs text-fg-muted">
+            @{user.username}
+            {user.email ? ` · ${user.email}` : ""}
+          </p>
+          <div className="mt-1.5 flex flex-wrap items-center gap-2">
+            <span className={`badge py-0.5 text-[11px] ${ROLE_BADGE[user.role]}`}>
+              {t(`users:roles.${user.role}`)}
+            </span>
+            <span className="text-[11px] text-fg-muted">{t(`users:roleHint.${user.role}`)}</span>
+          </div>
+        </div>
+      </div>
+      <dl className="mt-4 grid grid-cols-2 gap-3 border-t border-border pt-4 text-xs sm:grid-cols-5">
+        <Stat label={t("account.memberSince")}>
+          {user.createdAt ? formatDateTime(user.createdAt) : "—"}
+        </Stat>
+        <Stat label={t("account.workspaces")}>{account.workspaces}</Stat>
+        <Stat label={t("account.sessions")}>{account.sessions}</Stat>
+        <Stat label={t("account.logins")}>{account.logins}</Stat>
+        <Stat label={t("account.lastLogin")}>
+          {account.lastLoginAt ? formatDateTime(account.lastLoginAt) : "—"}
+        </Stat>
+      </dl>
+      <p className="mt-3 text-[11px] text-fg-muted">{t("account.roleNote")}</p>
+    </section>
+  );
+}
+
+function ProfileForm({
+  account,
+  onSaved,
+}: {
+  account: ServerAccount;
+  onSaved: (r: MyAccount) => void;
+}) {
+  const { t } = useTranslation("settings");
+  const [displayName, setDisplayName] = useState(account.user.displayName ?? "");
+  const [email, setEmail] = useState(account.user.email ?? "");
+  const [busy, setBusy] = useState(false);
+  const norm = (v: string) => (v.trim() === "" ? null : v.trim());
+  const body: { displayName?: string | null; email?: string | null } = {};
+  if (norm(displayName) !== (account.user.displayName ?? null))
+    body.displayName = norm(displayName);
+  if (norm(email) !== (account.user.email ?? null)) body.email = norm(email);
+  const changed = Object.keys(body).length > 0;
+
+  const save = async () => {
+    if (!changed || busy) return;
+    setBusy(true);
+    try {
+      onSaved(await api.me.updateAccount(body));
+      toast.success(t("account.profileSaved"));
+    } catch (e) {
+      toast.error(errText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (isSubmitEnter(e)) {
+      e.preventDefault();
+      void save();
+    }
+  };
+
+  return (
+    <SettingsSection
+      id="account-profile"
+      title={t("account.profile")}
+      description={t("account.profileDescription")}
+    >
+      <div className="grid gap-3 sm:grid-cols-2" onKeyDown={onKeyDown}>
+        <Field label={t("users:displayName")}>
+          <input
+            className="input w-full text-sm"
+            value={displayName}
+            maxLength={100}
+            onChange={(e) => setDisplayName(e.target.value)}
+            aria-label={t("users:displayName")}
+          />
+        </Field>
+        <Field label={t("users:email")}>
+          <input
+            type="email"
+            className="input w-full text-sm"
+            value={email}
+            maxLength={254}
+            onChange={(e) => setEmail(e.target.value)}
+            aria-label={t("users:email")}
+          />
+        </Field>
+      </div>
+      <div className="mt-3 flex justify-end">
+        <button
+          type="button"
+          className="btn-primary disabled:opacity-50"
+          disabled={!changed || busy}
+          onClick={() => void save()}
+        >
+          {t("account.save")}
+        </button>
+      </div>
+    </SettingsSection>
+  );
+}
+
+function PasswordForm() {
+  const { t } = useTranslation("settings");
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [again, setAgain] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const mismatch = again.length > 0 && again !== next;
+  const ready = current.length > 0 && next.length > 0 && again === next && !busy;
+
+  const submit = async () => {
+    if (!ready) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.me.changePassword(current, next);
+      setCurrent("");
+      setNext("");
+      setAgain("");
+      toast.success(t("account.passwordChanged"));
+    } catch (e) {
+      setError(errText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (isSubmitEnter(e)) {
+      e.preventDefault();
+      void submit();
+    }
+  };
+
+  return (
+    <SettingsSection
+      id="account-password"
+      title={t("account.password")}
+      description={t("account.passwordDescription")}
+    >
+      <div className="grid gap-3 sm:grid-cols-3" onKeyDown={onKeyDown}>
+        <Field label={t("account.currentPassword")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={current}
+            autoComplete="current-password"
+            onChange={(e) => setCurrent(e.target.value)}
+            aria-label={t("account.currentPassword")}
+          />
+        </Field>
+        <Field label={t("account.newPassword")} hint={t("users:passwordHint")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={next}
+            autoComplete="new-password"
+            onChange={(e) => setNext(e.target.value)}
+            aria-label={t("account.newPassword")}
+          />
+        </Field>
+        <Field label={t("account.confirmPassword")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={again}
+            autoComplete="new-password"
+            onChange={(e) => setAgain(e.target.value)}
+            aria-label={t("account.confirmPassword")}
+          />
+        </Field>
+      </div>
+      {(mismatch || error) && (
+        <p role="alert" className="mt-2 text-xs text-status-danger">
+          {error ?? t("account.mismatch")}
+        </p>
+      )}
+      <div className="mt-3 flex justify-end">
+        <button
+          type="button"
+          className="btn-primary disabled:opacity-50"
+          disabled={!ready}
+          onClick={() => void submit()}
+        >
+          {t("account.changePassword")}
+        </button>
+      </div>
+    </SettingsSection>
+  );
+}
+
+function SignOutOthers({ logins, onDone }: { logins: number; onDone: () => void }) {
+  const { t } = useTranslation("settings");
+  const [busy, setBusy] = useState(false);
+  const run = async () => {
+    const ok = await confirmDialog({
+      title: t("account.signOutOthersConfirm"),
+      message: t("account.signOutOthersBody"),
+      confirmLabel: t("account.signOutOthers"),
+      cancelLabel: t("common:cancel"),
+      destructive: true,
+    });
+    if (!ok) return;
+    setBusy(true);
+    try {
+      const r = await api.me.signOutOthers();
+      toast.success(t("account.signedOut", { count: r.ended }));
+      onDone();
+    } catch (e) {
+      toast.error(errText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <SettingsSection
+      id="account-sessions"
+      title={t("account.sessionsTitle")}
+      description={t("account.sessionsDescription", { n: logins })}
+    >
+      <button
+        type="button"
+        className="btn-ghost text-status-danger disabled:opacity-50"
+        disabled={busy || logins <= 1}
+        onClick={() => void run()}
+      >
+        <LogOut className="h-4 w-4" /> {t("account.signOutOthers")}
+      </button>
+    </SettingsSection>
+  );
+}
+
+function Stat({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-[11px] text-fg-muted">{label}</dt>
+      <dd className="truncate text-sm tabular-nums text-fg-primary">{children}</dd>
+    </div>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="text-xs font-medium text-fg-secondary">{label}</span>
+      <div className="mt-1">{children}</div>
+      {hint && <span className="mt-0.5 block text-[11px] text-fg-muted">{hint}</span>}
+    </label>
+  );
+}

client/src/components/settings/AppearanceSettings.tsx

@@ -1,10 +1,13 @@
 /**
  * @file AppearanceSettings.tsx
- * @description Settings → Appearance (`/settings/appearance`): the per-user
- * Chat UI default (`ChatUiSettings`, `#chat-ui`), whether the session view's
- * tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
- * `#workspace-tabs`), the interface language, the
- * terminal font (`lib/terminalFont.ts`, with a preview line), the
+ * @description Settings → Appearance (`/settings/appearance`), grouped so
+ * one card holds one subject: **Text & fonts** (`#fonts`) — the interface
+ * language (`#language`), the text size (`lib/fontSize.ts`, `#text-size`,
+ * issue #79), the terminal font and its size (`lib/terminalFont.ts`,
+ * `#terminal-font`, with a preview line); **Sessions** (`#sessions-view`) —
+ * the per-user Chat UI default (`ChatUiSettings`, `#chat-ui`) and whether the
+ * session view's tabs hold every workspace's sessions (`lib/workspaceTabs.ts`,
+ * `#workspace-tabs`); then the
  * Dark / Light / System mode switch and one named-theme picker per mode, and the
  * corner pet (`PetSettings`, deep-linked as `#pet`) — the old General and Pet
  * pages redirect here. Theme state is in `hooks/useTheme.ts`, palettes in
@@ -34,6 +37,15 @@ import {
   type TerminalFont,
 } from "../../lib/terminalFont";
 import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
+import {
+  TERMINAL_FONT_SIZES,
+  UI_FONT_SIZES,
+  readTerminalFontSize,
+  readUiFontSize,
+  writeTerminalFontSize,
+  writeUiFontSize,
+  type UiFontSize,
+} from "../../lib/fontSize";
 
 export const THEME_LABELS: Record<string, string> = {
   darcula: "Darcula",
@@ -82,6 +94,8 @@ export function AppearanceSettings() {
   const { t, i18n } = useTranslation("settings");
   const { mode, theme, themeFor, setMode, setThemeFor } = useTheme();
   const [termFont, setTermFont] = useState(readTerminalFont);
+  const [termSize, setTermSize] = useState(readTerminalFontSize);
+  const [uiSize, setUiSize] = useState(readUiFontSize);
   const [allTabs, setAllTabs] = useState(readAllTabs);
   const pickTermFont = (font: TerminalFont) => {
     writeTerminalFont(font);
@@ -103,31 +117,11 @@ export function AppearanceSettings() {
 
   return (
     <div className="space-y-6">
-      <ChatUiSettings />
-
-      <SettingsSection
-        id="workspace-tabs"
-        title={t("workspaceTabs.title")}
-        description={t("workspaceTabs.description")}
-      >
-        <SettingsSwitchRow
-          label={t("workspaceTabs.label")}
-          description={t("workspaceTabs.labelDesc")}
-          checked={allTabs}
-          onChange={(on) => {
-            writeAllTabs(on);
-            setAllTabs(on);
-          }}
-        />
-      </SettingsSection>
-
-      <SettingsSection
-        id="language"
-        title={t("language.title")}
-        description={t("language.description")}
-      >
+      <SettingsSection id="fonts" title={t("fonts.title")} description={t("fonts.description")}>
         <SettingsRow
+          id="language"
           label={t("language.label")}
+          description={t("language.description")}
           control={
             <SettingsSegmented
               ariaLabel={t("language.label")}
@@ -140,16 +134,34 @@ export function AppearanceSettings() {
             />
           }
         />
-      </SettingsSection>
-
-      <SettingsSection
-        id="terminal-font"
-        title={t("terminalFont.title")}
-        description={t("terminalFont.description")}
-      >
         <SettingsRow
-          label={t("terminalFont.label")}
-          description={termFont === "system" ? t("terminalFont.systemNote") : undefined}
+          id="text-size"
+          label={t("textSize.label")}
+          description={t("textSize.description")}
+          control={
+            <SettingsSegmented
+              ariaLabel={t("textSize.label")}
+              value={String(uiSize)}
+              onChange={(v) => {
+                const size = Number(v) as UiFontSize;
+                writeUiFontSize(size);
+                setUiSize(size);
+              }}
+              options={UI_FONT_SIZES.map((size) => ({
+                value: String(size),
+                label: t(`textSize.names.${size}`),
+              }))}
+            />
+          }
+        />
+        <SettingsRow
+          id="terminal-font"
+          label={t("terminalFont.title")}
+          description={
+            termFont === "system"
+              ? `${t("terminalFont.description")} ${t("terminalFont.systemNote")}`
+              : t("terminalFont.description")
+          }
           control={
             // A dropdown: five font names overflow a segmented row.
             <Select<TerminalFont>
@@ -163,17 +175,57 @@ export function AppearanceSettings() {
             />
           }
         />
+        <SettingsRow
+          label={t("terminalFont.sizeLabel")}
+          control={
+            <Select
+              label={t("terminalFont.sizeLabel")}
+              value={String(termSize)}
+              onChange={(v) => {
+                writeTerminalFontSize(Number(v));
+                setTermSize(Number(v));
+              }}
+              options={TERMINAL_FONT_SIZES.map((size) => ({
+                value: String(size),
+                label: `${size}px`,
+              }))}
+            />
+          }
+        />
         <p
           data-testid="terminal-font-preview"
           aria-label={t("terminalFont.preview")}
-          className="mt-2 rounded-md border border-border bg-surface-0 px-3 py-2 text-[13px] text-fg-primary"
+          className="mt-2 rounded-md border border-border bg-surface-0 px-3 py-2 text-fg-primary"
           // No ligatures: xterm draws one glyph per cell, so the terminal has none.
-          style={{ fontFamily: TERMINAL_FONTS[termFont], fontVariantLigatures: "none" }}
+          // In px like xterm's cells: the interface's text size does not scale it.
+          style={{
+            fontFamily: TERMINAL_FONTS[termFont],
+            fontSize: termSize,
+            fontVariantLigatures: "none",
+          }}
         >
           ❯ Tiếng Việt: ấ ế ố ồ ủ ữ — const x = {"{ ok: true }"}; 0O il1|
         </p>
       </SettingsSection>
 
+      <SettingsSection
+        id="sessions-view"
+        title={t("sessionsView.title")}
+        description={t("sessionsView.description")}
+      >
+        <ChatUiSettings />
+        <SettingsSwitchRow
+          id="workspace-tabs"
+          label={t("workspaceTabs.label")}
+          description={t("workspaceTabs.labelDesc")}
+          checked={allTabs}
+          onChange={(on) => {
+            writeAllTabs(on);
+            setAllTabs(on);
+          }}
+        />
+      </SettingsSection>
+
       <section id="theme" className="card p-5 space-y-5 scroll-mt-24">
         <h3 className="text-sm font-semibold text-fg-primary">{t("appearance.theme")}</h3>
         <SettingsRow

client/src/components/settings/ArtifactsHubSettings.tsx

@@ -0,0 +1,45 @@
+/**
+ * @file ArtifactsHubSettings — Settings → AI tools → Artifacts Hub: the
+ * admin's server-wide switch that allows or blocks installing a shared skill
+ * or plugin from the Hub into a user's own account (`GET/PUT
+ * /api/artifacts/settings`). Renders nothing in local mode (there is no Hub)
+ * or for anyone the server does not let manage it (`canManage`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type ArtifactSettings } from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+export function ArtifactsHubSettings() {
+  const { t } = useTranslation("artifacts");
+  const [settings, setSettings] = useState<ArtifactSettings | null>(null);
+
+  useEffect(() => {
+    api.artifacts
+      .settings()
+      .then(setSettings)
+      .catch(() => setSettings(null));
+  }, []);
+
+  if (!settings?.serverMode || !settings.canManage) return null;
+  return (
+    <SettingsSection id="artifacts-hub" title={t("title")}>
+      <SettingsSwitchRow
+        label={t("installsSwitch")}
+        description={t("installsSwitchHint")}
+        checked={settings.installsEnabled}
+        onChange={async (v) => {
+          try {
+            const r = await api.artifacts.setInstallsEnabled(v);
+            setSettings({ ...settings, installsEnabled: r.installsEnabled });
+          } catch (err) {
+            toast.error(err);
+          }
+        }}
+      />
+    </SettingsSection>
+  );
+}

client/src/components/settings/ChatUiSettings.tsx

@@ -1,7 +1,8 @@
 /**
- * @file ChatUiSettings — Settings → Appearance → Chat UI: whether a Claude or
- * Codex session opens as a chat like Claude Desktop (`PaneChat`) instead of
- * its terminal. Saved per user on the server (`lib/chatUi.ts`), so each
+ * @file ChatUiSettings — Settings → Appearance → Sessions, the Chat UI row
+ * (`#chat-ui`): whether a Claude or Codex session opens as a chat like Claude
+ * Desktop (`PaneChat`) instead of its terminal. A row, not a card: it sits in
+ * the Sessions section beside the workspace-tabs switch. Saved per user on the server (`lib/chatUi.ts`), so each
  * account on a shared dashboard keeps its own choice on any browser.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -9,25 +10,22 @@
 import { useTranslation } from "react-i18next";
 import { saveChatUi, useChatUi } from "../../lib/chatUi";
 import { toast } from "../../lib/toast";
-import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+import { SettingsSwitchRow } from "./SettingsRow";
 
 export function ChatUiSettings() {
   const { t } = useTranslation("settings");
   const chatUi = useChatUi();
   return (
-    <SettingsSection id="chat-ui" title={t("chatUi.title")} description={t("chatUi.description")}>
-      <SettingsSwitchRow
-        label={t("chatUi.label")}
-        description={t("chatUi.labelDesc")}
-        checked={chatUi}
-        onChange={(on) =>
-          saveChatUi(on).catch((err: unknown) =>
-            toast.error(
-              t("chatUi.saveFailed", { message: err instanceof Error ? err.message : "" })
-            )
-          )
-        }
-      />
-    </SettingsSection>
+    <SettingsSwitchRow
+      id="chat-ui"
+      label={t("chatUi.label")}
+      description={t("chatUi.labelDesc")}
+      checked={chatUi}
+      onChange={(on) =>
+        saveChatUi(on).catch((err: unknown) =>
+          toast.error(t("chatUi.saveFailed", { message: err instanceof Error ? err.message : "" }))
+        )
+      }
+    />
   );
 }

client/src/components/settings/GitIdentitySettings.tsx

@@ -0,0 +1,657 @@
+/**
+ * @file GitIdentitySettings.tsx
+ * @description Settings → Git → **Your git identity** (`/api/me/git`): the
+ * commit author (name + email in the account's global git config — prefilled
+ * from Settings → Account while unset, since a member's commits fail without
+ * one), the SSH
+ * keys a clone (Add workspace → Clone) and the pushes from that clone use —
+ * an ED25519 and/or an RSA one (AWS CodeCommit takes only RSA) — make one, copy its public half to add to GitHub/GitLab, replace or delete
+ * it, and whether git typed in the account's own terminal uses it too (a
+ * switch over `core.sshCommand` in its `~/.gitconfig`, issue #82), the SSH
+ * login name per host (AWS CodeCommit's SSH key ID, a `url.<…>.insteadOf` in
+ * that same file, so a plain `ssh://git-codecommit…` URL works) — and, for
+ * a user with their own Linux account (S3), their own HTTPS
+ * logins. The host account's HTTPS logins are the shared Git credentials
+ * table above it, so this lists them only for a member. The private key and
+ * every token are write-only: the server never returns them. A host identity
+ * seen by a non-admin is read-only.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Copy, KeyRound, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { api, type GitIdentity } from "../../lib/api";
+import { confirmDialog } from "../../lib/confirm";
+import { copyText } from "../../lib/clipboard";
+import { toast } from "../../lib/toast";
+import { useAuth } from "../AuthGate";
+import { Switch } from "../Switch";
+
+const INPUT =
+  "w-full rounded border border-border-light bg-surface-0 px-2 py-1 text-xs text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none";
+const BTN =
+  "inline-flex items-center gap-1.5 rounded border border-border-light px-2.5 py-1 text-xs text-fg-secondary hover:bg-surface-3 disabled:cursor-not-allowed disabled:opacity-40";
+
+const CODECOMMIT_RE = /^git-codecommit\.([a-z0-9-]+)\.amazonaws\.com$/;
+// The regions AWS CodeCommit runs in.
+const AWS_REGIONS = [
+  "ap-southeast-1",
+  "ap-southeast-2",
+  "ap-southeast-3",
+  "ap-northeast-1",
+  "ap-northeast-2",
+  "ap-northeast-3",
+  "ap-south-1",
+  "ap-east-1",
+  "us-east-1",
+  "us-east-2",
+  "us-west-1",
+  "us-west-2",
+  "ca-central-1",
+  "eu-west-1",
+  "eu-west-2",
+  "eu-west-3",
+  "eu-central-1",
+  "eu-north-1",
+  "eu-south-1",
+  "sa-east-1",
+  "me-south-1",
+  "af-south-1",
+  "il-central-1",
+];
+
+function Step({ n, children }: { n: number; children: ReactNode }) {
+  return (
+    <div className="flex gap-2 text-[11px] text-fg-secondary">
+      <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-surface-3 text-[10px] text-fg-primary">
+        {n}
+      </span>
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+function Code({ children }: { children: ReactNode }) {
+  return (
+    <code className="mt-1 block break-all rounded bg-surface-2 px-1.5 py-1 font-mono text-[10px] text-fg-primary">
+      {children}
+    </code>
+  );
+}
+
+type Key = NonNullable<GitIdentity["sshKeys"]>[number];
+
+/**
+ * One kind of git host and the key it takes: no key → a Generate button;
+ * a key → step 1 (copy its public half) followed by the host's own steps.
+ */
+function KeyCard({
+  title,
+  sub,
+  type,
+  k,
+  id,
+  busy,
+  onGenerate,
+  onRemove,
+  children,
+}: {
+  title: string;
+  sub: string;
+  type: "ed25519" | "rsa";
+  k: Key | undefined;
+  id: GitIdentity;
+  busy: boolean;
+  onGenerate: (type: "ed25519" | "rsa") => Promise<void>;
+  onRemove: (type: "ed25519" | "rsa") => Promise<void>;
+  children: ReactNode;
+}) {
+  const { t } = useTranslation("settings");
+  return (
+    <section aria-label={title} className="space-y-2 rounded border border-border p-2.5">
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <div className="text-xs font-medium text-fg-primary">{title}</div>
+          <div className="text-[10px] text-fg-muted">{sub}</div>
+        </div>
+        {id.writable && (
+          <button
+            type="button"
+            className={BTN}
+            disabled={busy}
+            onClick={() => void onGenerate(type)}
+          >
+            {k ? <RefreshCw className="h-3.5 w-3.5" /> : <Plus className="h-3.5 w-3.5" />}
+            {k ? t("gitIdentity.replace") : t("gitIdentity.generate")}
+          </button>
+        )}
+        {k && id.writable && (
+          <button
+            type="button"
+            className={`${BTN} hover:text-status-danger`}
+            disabled={busy}
+            onClick={() => void onRemove(type)}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+            {t("gitIdentity.remove")}
+          </button>
+        )}
+      </div>
+      {k ? (
+        <>
+          <Step n={1}>
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="flex-1">{t("gitIdentity.stepCopy")}</span>
+              <button type="button" className={BTN} onClick={() => void copyText(k.publicKey)}>
+                <Copy className="h-3.5 w-3.5" />
+                {t("gitIdentity.copy")}
+              </button>
+            </div>
+            <textarea
+              readOnly
+              aria-label={`${t("gitIdentity.publicKey")} ${type === "rsa" ? "RSA" : "ED25519"}`}
+              value={k.publicKey}
+              rows={type === "rsa" ? 3 : 2}
+              onFocus={(e) => e.currentTarget.select()}
+              className={`${INPUT} mt-1 resize-none break-all font-mono text-[10px]`}
+            />
+            <div className="truncate font-mono text-[10px] text-fg-muted">{k.fingerprint}</div>
+          </Step>
+          {children}
+        </>
+      ) : (
+        <p className="text-[11px] text-fg-muted">{t("gitIdentity.noKey")}</p>
+      )}
+    </section>
+  );
+}
+
+export function GitIdentitySettings() {
+  const { t } = useTranslation("settings");
+  const [id, setId] = useState<GitIdentity | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [form, setForm] = useState<{ host: string; username: string; token: string } | null>(null);
+  const auth = useAuth().state;
+  const me = auth.mode === "server" ? auth.user : null;
+  // null = not edited: the field shows the saved value, else the account's.
+  const [author, setAuthor] = useState<{ name: string; email: string } | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setId(await api.gitIdentity.get());
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }, []);
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const run = async (fn: () => Promise<GitIdentity>, done?: string) => {
+    setBusy(true);
+    setError(null);
+    try {
+      setId(await fn());
+      if (done) toast.success(done);
+      return true;
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // ed25519 suits GitHub/GitLab/Gitea; AWS IAM (CodeCommit) accepts only RSA.
+  // An account may hold one of each; an older server answers `ssh` only.
+  const keys = id ? (id.sshKeys ?? (id.ssh ? [id.ssh] : [])) : [];
+  const terminal = id?.sshTerminal ?? id?.ssh?.terminal ?? null;
+  const keyOf = (type: "ed25519" | "rsa") => keys.find((k) => (k.type ?? "ed25519") === type);
+  const generate = async (type: "ed25519" | "rsa") => {
+    const taken = !!keyOf(type);
+    if (
+      taken &&
+      !(await confirmDialog({
+        title: t("gitIdentity.replaceConfirm"),
+        confirmLabel: t("gitIdentity.replace"),
+      }))
+    )
+      return;
+    await run(() => api.gitIdentity.generateKey(taken, type), t("gitIdentity.keyMade"));
+  };
+
+  const removeKey = async (type: "ed25519" | "rsa") => {
+    if (
+      !(await confirmDialog({
+        title: t("gitIdentity.removeKeyConfirm"),
+        confirmLabel: t("gitIdentity.remove"),
+      }))
+    )
+      return;
+    await run(() => api.gitIdentity.removeKey(type));
+  };
+
+  const saveLogin = async () => {
+    if (!form) return;
+    // A bare host is the usual entry; a pasted URL is reduced to its host.
+    let host = form.host.trim();
+    try {
+      if (/^https?:\/\//i.test(host)) host = new URL(host).host;
+    } catch {
+      /* the server answers EBADHOST */
+    }
+    const ok = await run(
+      () =>
+        api.gitIdentity.saveHttps({ host, username: form.username.trim(), password: form.token }),
+      t("gitCreds.saved", { host })
+    );
+    if (ok) setForm(null);
+  };
+
+  // The SSH login name per host (`url.<…>.insteadOf`), so a plain
+  // `ssh://host/…` URL logs in. AWS CodeCommit's (user = the IAM SSH key ID,
+  // one host per region) gets its own form under the RSA key; anything else
+  // is the "other hosts" form.
+  const sshUsers = id?.sshUsers ?? [];
+  const awsRows = sshUsers.flatMap((r) => {
+    const m = CODECOMMIT_RE.exec(r.host);
+    return m ? [{ ...r, region: m[1] ?? "" }] : [];
+  });
+  const otherRows = sshUsers.filter((r) => !CODECOMMIT_RE.test(r.host));
+  const [aws, setAws] = useState({ keyId: "", region: "ap-southeast-1" });
+  const saveAws = async () => {
+    let user = aws.keyId.trim();
+    let host = `git-codecommit.${aws.region}.amazonaws.com`;
+    // A pasted `ssh://APKA…@git-codecommit.<region>…/…` URL fills both.
+    const m = /^ssh:\/\/([^@/]+)@([^/]+)/i.exec(user);
+    if (m?.[1] && m[2]) {
+      user = m[1];
+      host = m[2].toLowerCase();
+    }
+    const ok = await run(
+      () => api.gitIdentity.setSshUser({ host, user }),
+      t("gitIdentity.awsSaved", { region: CODECOMMIT_RE.exec(host)?.[1] ?? host })
+    );
+    if (ok) setAws({ ...aws, keyId: "" });
+  };
+  const [other, setOther] = useState({ host: "", user: "" });
+  const saveOther = async () => {
+    let host = other.host.trim();
+    const m = /^ssh:\/\/(?:[^@/]+@)?([^/]+)/i.exec(host);
+    if (m?.[1]) host = m[1];
+    const ok = await run(
+      () => api.gitIdentity.setSshUser({ host, user: other.user.trim() }),
+      t("gitIdentity.otherSaved", { host })
+    );
+    if (ok) setOther({ host: "", user: "" });
+  };
+
+  const removeLogin = async (host: string) => {
+    if (
+      !(await confirmDialog({
+        title: t("gitIdentity.removeLoginConfirm", { host }),
+        confirmLabel: t("gitIdentity.remove"),
+      }))
+    )
+      return;
+    await run(() => api.gitIdentity.removeHttps(host));
+  };
+
+  if (!id) {
+    return error ? (
+      <p className="text-xs text-status-danger">{error}</p>
+    ) : (
+      <p className="text-xs text-fg-muted">{t("gitCreds.loading")}</p>
+    );
+  }
+  const member = id.account === "member";
+  const authorShown = author ?? {
+    name: id.author.name ?? me?.displayName ?? me?.username ?? "",
+    email: id.author.email ?? me?.email ?? "",
+  };
+  const authorUnset = !id.author.name || !id.author.email;
+  const authorDirty =
+    authorUnset ||
+    authorShown.name.trim() !== (id.author.name ?? "") ||
+    authorShown.email.trim() !== (id.author.email ?? "");
+  const saveAuthor = async () => {
+    const ok = await run(
+      () =>
+        api.gitIdentity.saveAuthor({
+          name: authorShown.name.trim(),
+          email: authorShown.email.trim(),
+        }),
+      t("gitIdentity.authorSaved")
+    );
+    if (ok) setAuthor(null);
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-xs text-fg-muted">
+        {member ? t("gitIdentity.descriptionMember") : t("gitIdentity.descriptionHost")}
+      </p>
+
+      {error && (
+        <p className="rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+
+      <form
+        className="space-y-2 rounded-lg border border-border p-3"
+        onSubmit={(e) => {
+          e.preventDefault();
+          void saveAuthor();
+        }}
+      >
+        <h3 className="text-xs font-semibold text-fg-primary">{t("gitIdentity.authorTitle")}</h3>
+        {authorUnset && (
+          <p className="text-[11px] text-status-warning">{t("gitIdentity.authorUnset")}</p>
+        )}
+        <div className="grid gap-2 sm:grid-cols-2">
+          <input
+            aria-label={t("gitIdentity.authorName")}
+            placeholder={t("gitIdentity.authorName")}
+            value={authorShown.name}
+            disabled={!id.writable}
+            onChange={(e) => setAuthor({ ...authorShown, name: e.target.value })}
+            className={INPUT}
+          />
+          <input
+            type="email"
+            aria-label={t("gitIdentity.authorEmail")}
+            placeholder="name@example.com"
+            value={authorShown.email}
+            disabled={!id.writable}
+            onChange={(e) => setAuthor({ ...authorShown, email: e.target.value })}
+            className={INPUT}
+          />
+        </div>
+        {id.writable && (
+          <button
+            type="submit"
+            disabled={busy || !authorDirty || !authorShown.name.trim() || !authorShown.email.trim()}
+            className="rounded border border-accent/40 bg-accent/15 px-3 py-1 text-xs text-accent hover:bg-accent/25 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {t("gitCreds.save")}
+          </button>
+        )}
+      </form>
+
+      <div className="space-y-3 rounded-lg border border-border p-3">
+        <div className="flex items-center gap-2">
+          <KeyRound className="h-4 w-4 text-fg-muted" aria-hidden />
+          <h3 className="flex-1 text-xs font-semibold text-fg-primary">
+            {t("gitIdentity.sshTitle")}
+          </h3>
+        </div>
+        <p className="text-[11px] text-fg-muted">{t("gitIdentity.sshIntro")}</p>
+
+        <KeyCard
+          title={t("gitIdentity.gitHubTitle")}
+          sub={t("gitIdentity.gitHubSub")}
+          type="ed25519"
+          k={keyOf("ed25519")}
+          id={id}
+          busy={busy}
+          onGenerate={generate}
+          onRemove={removeKey}
+        >
+          <Step n={2}>{t("gitIdentity.gitHubStepAdd")}</Step>
+          <Step n={3}>
+            {t("gitIdentity.gitHubStepClone")}
+            <Code>git clone git@github.com:&lt;org&gt;/&lt;repo&gt;.git</Code>
+          </Step>
+        </KeyCard>
+
+        <KeyCard
+          title={t("gitIdentity.awsTitle")}
+          sub={t("gitIdentity.awsSub")}
+          type="rsa"
+          k={keyOf("rsa")}
+          id={id}
+          busy={busy}
+          onGenerate={generate}
+          onRemove={removeKey}
+        >
+          <Step n={2}>{t("gitIdentity.awsStepUpload")}</Step>
+          <Step n={3}>
+            {t("gitIdentity.awsStepKeyId")}
+            {id.sshUsers === undefined ? null : (
+              <>
+                {awsRows.map((r) => (
+                  <div key={r.host} className="mt-1 flex items-center gap-2">
+                    <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-secondary">
+                      {r.region} · {r.user}
+                    </span>
+                    {id.writable && (
+                      <button
+                        type="button"
+                        className={`${BTN} hover:text-status-danger`}
+                        disabled={busy}
+                        aria-label={`${t("gitIdentity.remove")} ${r.host}`}
+                        onClick={() => void run(() => api.gitIdentity.removeSshUser(r.host))}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </div>
+                ))}
+                {id.writable && (
+                  <form
+                    className="mt-1 grid gap-2 sm:grid-cols-[2fr_1fr_auto]"
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      void saveAws();
+                    }}
+                  >
+                    <input
+                      aria-label={t("gitIdentity.awsKeyId")}
+                      placeholder="APKA…"
+                      autoComplete="off"
+                      value={aws.keyId}
+                      onChange={(e) => setAws({ ...aws, keyId: e.target.value })}
+                      className={`${INPUT} font-mono`}
+                    />
+                    <select
+                      aria-label={t("gitIdentity.awsRegion")}
+                      value={aws.region}
+                      onChange={(e) => setAws({ ...aws, region: e.target.value })}
+                      className="select !py-1 !text-xs"
+                    >
+                      {AWS_REGIONS.map((r) => (
+                        <option key={r} value={r}>
+                          {r}
+                        </option>
+                      ))}
+                    </select>
+                    <button type="submit" className={BTN} disabled={busy || !aws.keyId.trim()}>
+                      {t("gitIdentity.awsSave")}
+                    </button>
+                  </form>
+                )}
+              </>
+            )}
+          </Step>
+          {awsRows.length > 0 && (
+            <div className="rounded border border-status-success/40 bg-status-success/10 p-2 text-[11px] text-fg-primary">
+              {t("gitIdentity.awsReady")}
+              {awsRows.map((r) => (
+                <Code key={r.host}>git clone ssh://{r.host}/v1/repos/&lt;repo&gt;</Code>
+              ))}
+            </div>
+          )}
+        </KeyCard>
+
+        {terminal && (
+          <div className="flex items-start gap-2 rounded border border-border p-2">
+            <div className="min-w-0 flex-1">
+              <div className="text-[11px] text-fg-primary">{t("gitIdentity.terminal")}</div>
+              <div className="text-[10px] text-fg-muted">
+                {terminal === "foreign"
+                  ? t("gitIdentity.terminalForeign")
+                  : t("gitIdentity.terminalHint")}
+              </div>
+            </div>
+            <Switch
+              label={t("gitIdentity.terminal")}
+              checked={terminal === "on"}
+              disabled={busy || !id.writable || terminal === "foreign"}
+              onChange={(on) => void run(() => api.gitIdentity.setTerminalSsh(on))}
+            />
+          </div>
+        )}
+
+        {id.sshUsers !== undefined && (otherRows.length > 0 || id.writable) && (
+          <details className="rounded border border-border p-2" open={otherRows.length > 0}>
+            <summary className="cursor-pointer text-[11px] text-fg-primary">
+              {t("gitIdentity.otherTitle")}
+            </summary>
+            <div className="mt-1.5 space-y-1.5">
+              <div className="text-[10px] text-fg-muted">{t("gitIdentity.otherHint")}</div>
+              {otherRows.map((r) => (
+                <div key={r.host} className="flex items-center gap-2">
+                  <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-secondary">
+                    {r.user}@{r.host}
+                  </span>
+                  {id.writable && (
+                    <button
+                      type="button"
+                      className={`${BTN} hover:text-status-danger`}
+                      disabled={busy}
+                      aria-label={`${t("gitIdentity.remove")} ${r.host}`}
+                      onClick={() => void run(() => api.gitIdentity.removeSshUser(r.host))}
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  )}
+                </div>
+              ))}
+              {id.writable && (
+                <form
+                  className="grid gap-2 sm:grid-cols-[2fr_1fr_auto]"
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    void saveOther();
+                  }}
+                >
+                  <input
+                    aria-label={t("gitIdentity.otherHost")}
+                    placeholder="git.example.com"
+                    value={other.host}
+                    onChange={(e) => setOther({ ...other, host: e.target.value })}
+                    className={`${INPUT} font-mono`}
+                  />
+                  <input
+                    aria-label={t("gitIdentity.otherUser")}
+                    placeholder={t("gitIdentity.otherUser")}
+                    autoComplete="off"
+                    value={other.user}
+                    onChange={(e) => setOther({ ...other, user: e.target.value })}
+                    className={`${INPUT} font-mono`}
+                  />
+                  <button
+                    type="submit"
+                    className={BTN}
+                    disabled={busy || !other.host.trim() || !other.user.trim()}
+                  >
+                    {t("gitIdentity.awsSave")}
+                  </button>
+                </form>
+              )}
+            </div>
+          </details>
+        )}
+        <p className="text-[10px] text-fg-muted">{t("gitIdentity.privateNote")}</p>
+      </div>
+
+      {member && (
+        <div className="space-y-2 rounded-lg border border-border p-3">
+          <div className="flex items-center gap-2">
+            <h3 className="flex-1 text-xs font-semibold text-fg-primary">
+              {t("gitIdentity.httpsTitle")}
+            </h3>
+            <button
+              type="button"
+              className={BTN}
+              onClick={() => setForm({ host: "", username: "", token: "" })}
+            >
+              <Plus className="h-3.5 w-3.5" />
+              {t("gitCreds.add")}
+            </button>
+          </div>
+          {form && (
+            <form
+              className="grid gap-2 sm:grid-cols-3"
+              onSubmit={(e) => {
+                e.preventDefault();
+                void saveLogin();
+              }}
+            >
+              <input
+                aria-label={t("gitCreds.fieldHost")}
+                placeholder="github.com"
+                value={form.host}
+                onChange={(e) => setForm({ ...form, host: e.target.value })}
+                className={`${INPUT} font-mono`}
+              />
+              <input
+                aria-label={t("gitCreds.fieldUser")}
+                placeholder={t("gitCreds.fieldUser")}
+                autoComplete="off"
+                value={form.username}
+                onChange={(e) => setForm({ ...form, username: e.target.value })}
+                className={INPUT}
+              />
+              <input
+                type="password"
+                aria-label={t("gitCreds.fieldToken")}
+                placeholder={t("gitCreds.fieldToken")}
+                autoComplete="new-password"
+                value={form.token}
+                onChange={(e) => setForm({ ...form, token: e.target.value })}
+                className={INPUT}
+              />
+              <div className="flex gap-2 sm:col-span-3">
+                <button
+                  type="submit"
+                  disabled={busy || !form.host.trim() || !form.username.trim() || !form.token}
+                  className="rounded border border-accent/40 bg-accent/15 px-3 py-1 text-xs text-accent hover:bg-accent/25 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  {t("gitCreds.save")}
+                </button>
+                <button type="button" onClick={() => setForm(null)} className={BTN}>
+                  {t("gitCreds.cancel")}
+                </button>
+              </div>
+            </form>
+          )}
+          {id.https.length === 0 ? (
+            <p className="text-[11px] text-fg-muted">{t("gitIdentity.noLogins")}</p>
+          ) : (
+            <ul className="divide-y divide-border text-xs">
+              {id.https.map((c) => (
+                <li key={c.host} className="flex items-center gap-2 py-1.5">
+                  <span className="font-mono text-[11px] text-fg-primary">{c.host}</span>
+                  <span className="flex-1 text-fg-secondary">{c.username}</span>
+                  <button
+                    type="button"
+                    aria-label={`${t("gitIdentity.remove")} ${c.host}`}
+                    title={t("gitIdentity.remove")}
+                    disabled={busy}
+                    onClick={() => void removeLogin(c.host)}
+                    className="rounded p-1 text-fg-muted hover:bg-surface-3 hover:text-status-danger"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/settings/SettingsRow.tsx

@@ -37,15 +37,19 @@ export function SettingsRow({
   description,
   control,
   alignTop = false,
+  id,
 }: {
   label: ReactNode;
   description?: ReactNode;
   control: ReactNode;
   alignTop?: boolean;
+  /** A deep-link anchor (`#id`) for one row inside a grouped section. */
+  id?: string;
 }) {
   return (
     <div
-      className={`flex justify-between gap-4 border-b border-border/60 last:border-b-0 ${
+      id={id}
+      className={`${id ? "scroll-mt-24 " : ""}flex justify-between gap-4 border-b border-border/60 last:border-b-0 ${
         description ? "py-3" : "py-2"
       } ${alignTop ? "items-start" : "items-center"}`}
     >
@@ -64,15 +68,18 @@ export function SettingsSwitchRow({
   checked,
   onChange,
   disabled = false,
+  id,
 }: {
   label: string;
   description?: ReactNode;
   checked: boolean;
   onChange: (v: boolean) => void;
   disabled?: boolean;
+  id?: string;
 }) {
   return (
     <SettingsRow
+      id={id}
       label={label}
       description={description}
       control={<Switch checked={checked} onChange={onChange} label={label} disabled={disabled} />}

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

@@ -0,0 +1,131 @@
+/**
+ * @file AccountSettings.test.tsx
+ * @description Settings → Account: shows the account's own information, saves
+ * only a changed display name/email, refuses a password change whose two new
+ * passwords differ, sends the current + new password, asks before signing
+ * the other devices out, and uploads/removes the avatar.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const me = vi.hoisted(() => ({
+  account: vi.fn(),
+  updateAccount: vi.fn(),
+  changePassword: vi.fn(),
+  signOutOthers: vi.fn(),
+  setAvatar: vi.fn(),
+  removeAvatar: vi.fn(),
+  avatarUrl: (at?: string | null) => (at ? `/api/me/avatar?v=${at}` : null),
+}));
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, api: { me } };
+});
+const confirm = vi.hoisted(() => vi.fn());
+vi.mock("../../../lib/confirm", () => ({ confirmDialog: confirm }));
+
+import { AccountSettings } from "../AccountSettings";
+
+const account = {
+  mode: "server" as const,
+  user: {
+    id: 2,
+    username: "mia",
+    role: "developer" as const,
+    disabled: false,
+    displayName: "Mia Tran",
+    email: null,
+    createdAt: "2026-10-01T00:00:00.000Z",
+  },
+  workspaces: 3,
+  sessions: 12,
+  logins: 2,
+  lastLoginAt: null,
+};
+
+beforeEach(() => {
+  for (const fn of Object.values(me)) if ("mockReset" in fn) fn.mockReset();
+  me.account.mockResolvedValue(account);
+  me.updateAccount.mockResolvedValue(account);
+  me.changePassword.mockResolvedValue({ ok: true });
+  me.signOutOthers.mockResolvedValue({ ended: 1 });
+  confirm.mockReset().mockResolvedValue(true);
+});
+
+describe("AccountSettings", () => {
+  it("uploads a picked avatar and removes it again", async () => {
+    const ue = userEvent.setup();
+    const withAvatar = { ...account, user: { ...account.user, avatarAt: "2026-10-14T00:00:00Z" } };
+    me.setAvatar.mockResolvedValue(withAvatar);
+    me.removeAvatar.mockResolvedValue(account);
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    expect(screen.getByTestId("user-avatar-initials").textContent).toBe("Mi");
+    expect(screen.queryByTestId("account-avatar-remove")).toBeNull();
+    const file = new File([new Uint8Array([0x89, 0x50])], "me.png", { type: "image/png" });
+    await ue.upload(screen.getByTestId("account-avatar-input"), file);
+    await waitFor(() => expect(me.setAvatar).toHaveBeenCalledWith(file));
+    expect((await screen.findByTestId("user-avatar-img")).getAttribute("src")).toBe(
+      "/api/me/avatar?v=2026-10-14T00:00:00Z"
+    );
+    await ue.click(screen.getByTestId("account-avatar-remove"));
+    await waitFor(() => expect(me.removeAvatar).toHaveBeenCalled());
+    expect(await screen.findByTestId("user-avatar-initials")).toBeTruthy();
+  });
+
+  it("shows the account's own information", async () => {
+    render(<AccountSettings />);
+    const card = await screen.findByTestId("account-card");
+    expect(card.textContent).toContain("Mia Tran");
+    expect(card.textContent).toContain("@mia");
+    expect(card.textContent).toContain("Developer");
+    expect(card.textContent).toContain("12");
+  });
+
+  it("saves only a changed field", async () => {
+    const ue = userEvent.setup();
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    await ue.type(screen.getByLabelText("Email"), "mia@x.vn");
+    await ue.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() => expect(me.updateAccount).toHaveBeenCalledWith({ email: "mia@x.vn" }));
+  });
+
+  it("refuses two different new passwords", async () => {
+    const ue = userEvent.setup();
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    await ue.type(screen.getByLabelText("Current password"), "old-pass-1");
+    await ue.type(screen.getByLabelText("New password"), "new-pass-123");
+    await ue.type(screen.getByLabelText("Confirm new password"), "new-pass-999");
+    expect(screen.getByText("The two new passwords differ.")).toBeTruthy();
+    const button = screen.getByRole("button", { name: "Change password" });
+    expect(button.hasAttribute("disabled")).toBe(true);
+    expect(me.changePassword).not.toHaveBeenCalled();
+  });
+
+  it("changes the password with the current one", async () => {
+    const ue = userEvent.setup();
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    await ue.type(screen.getByLabelText("Current password"), "old-pass-1");
+    await ue.type(screen.getByLabelText("New password"), "new-pass-123");
+    await ue.type(screen.getByLabelText("Confirm new password"), "new-pass-123");
+    await ue.click(screen.getByRole("button", { name: "Change password" }));
+    await waitFor(() =>
+      expect(me.changePassword).toHaveBeenCalledWith("old-pass-1", "new-pass-123")
+    );
+  });
+
+  it("asks before signing the other devices out", async () => {
+    const ue = userEvent.setup();
+    render(<AccountSettings />);
+    await screen.findByTestId("account-card");
+    await ue.click(screen.getByRole("button", { name: "Sign out other devices" }));
+    expect(confirm).toHaveBeenCalled();
+    await waitFor(() => expect(me.signOutOthers).toHaveBeenCalled());
+  });
+});

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

@@ -1,6 +1,6 @@
 /**
  * @file AppearanceSettings.test.tsx
- * @description Tests for the Settings → Appearance section: the language switch, the terminal font picker, and the mode switch and the per-mode theme cards writing through useTheme to `<html>`.
+ * @description Tests for the Settings → Appearance section: the language switch, the text size, the terminal font and size pickers, and the mode switch and the per-mode theme cards writing through useTheme to `<html>`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -20,6 +20,7 @@ describe("AppearanceSettings", () => {
     root.classList.remove("dark");
     root.removeAttribute("data-theme");
     root.removeAttribute("data-mode");
+    root.style.removeProperty("font-size");
   });
 
   it("switches the interface language and holds the pet block", async () => {
@@ -102,4 +103,33 @@ describe("AppearanceSettings", () => {
     expect(localStorage.getItem("agenthub.terminal.font")).toBe("system");
     expect(screen.getByText(/may lack some Vietnamese letters/)).toBeInTheDocument();
   });
+
+  it("sets the interface text size on <html>, the default leaving it unset", async () => {
+    const user = userEvent.setup();
+    render(<AppearanceSettings />);
+    const group = screen.getByRole("radiogroup", { name: "Interface text" });
+    expect(within(group).getByRole("radio", { name: "Default" })).toHaveAttribute(
+      "aria-checked",
+      "true"
+    );
+    await user.click(within(group).getByRole("radio", { name: "Larger" }));
+    expect(root.style.fontSize).toBe("18px");
+    expect(localStorage.getItem("agenthub.ui.fontSize")).toBe("18");
+    await user.click(within(group).getByRole("radio", { name: "Default" }));
+    expect(root.style.fontSize).toBe("");
+  });
+
+  it("picks the terminal font size and tells open terminals", async () => {
+    const user = userEvent.setup();
+    const heard = vi.fn();
+    window.addEventListener("agenthub-font-size", heard);
+    render(<AppearanceSettings />);
+    expect(screen.getByRole("button", { name: /^Size/ })).toHaveTextContent("13px");
+    await user.click(screen.getByRole("button", { name: /^Size/ }));
+    await user.click(screen.getByRole("option", { name: "16px" }));
+    expect(localStorage.getItem("agenthub.terminal.fontSize")).toBe("16");
+    expect(screen.getByTestId("terminal-font-preview").style.fontSize).toBe("16px");
+    expect(heard).toHaveBeenCalled();
+    window.removeEventListener("agenthub-font-size", heard);
+  });
 });

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

@@ -0,0 +1,46 @@
+/**
+ * @file Tests for ArtifactsHubSettings — the admin's Hub install switch in
+ * Settings → AI tools: hidden in local mode and for a non-manager, and a
+ * toggle saves through PUT /api/artifacts/settings.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import "../../../i18n";
+import { ArtifactsHubSettings } from "../ArtifactsHubSettings";
+import { api } from "../../../lib/api";
+
+vi.mock("../../../lib/api", () => ({
+  api: { artifacts: { settings: vi.fn(), setInstallsEnabled: vi.fn() } },
+}));
+
+const settings = vi.mocked(api.artifacts.settings);
+const setInstalls = vi.mocked(api.artifacts.setInstallsEnabled);
+const base = { serverMode: true, canShare: true, installsEnabled: true, canManage: true };
+
+describe("ArtifactsHubSettings", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("lets an admin turn Hub installs off", async () => {
+    settings.mockResolvedValue(base);
+    setInstalls.mockResolvedValue({ installsEnabled: false });
+    render(<ArtifactsHubSettings />);
+    const sw = await screen.findByRole("switch", { name: "Allow installing from the Hub" });
+    fireEvent.click(sw);
+    await waitFor(() => expect(setInstalls).toHaveBeenCalledWith(false));
+    await waitFor(() => expect(sw).toHaveAttribute("aria-checked", "false"));
+  });
+
+  it("renders nothing for a non-manager or in local mode", async () => {
+    settings.mockResolvedValue({ ...base, canManage: false });
+    const { container, unmount } = render(<ArtifactsHubSettings />);
+    await waitFor(() => expect(settings).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+    unmount();
+    settings.mockResolvedValue({ ...base, serverMode: false });
+    const r = render(<ArtifactsHubSettings />);
+    await waitFor(() => expect(settings).toHaveBeenCalledTimes(2));
+    expect(r.container).toBeEmptyDOMElement();
+  });
+});

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

@@ -0,0 +1,197 @@
+/**
+ * @file Tests for Settings → Git → Your git identity: a user with no key
+ * makes one, a key shows only its public half and copies it, replacing asks
+ * first, and a member (S3) adds an HTTPS login of their own while the host's
+ * view leaves HTTPS to the shared Git credentials table, and an SSH user per
+ * host is saved — AWS CodeCommit's key ID inside its own RSA section, any
+ * other host under "Other SSH hosts" — so the sections never mix.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { GitIdentitySettings } from "../GitIdentitySettings";
+import { api, type GitIdentity } from "../../../lib/api";
+import { confirmDialog } from "../../../lib/confirm";
+import { copyText } from "../../../lib/clipboard";
+
+vi.mock("../../../lib/api", () => ({
+  api: {
+    gitIdentity: {
+      get: vi.fn(),
+      generateKey: vi.fn(),
+      removeKey: vi.fn(),
+      setTerminalSsh: vi.fn(),
+      setSshUser: vi.fn(),
+      removeSshUser: vi.fn(),
+      saveHttps: vi.fn(),
+      saveAuthor: vi.fn(),
+      removeHttps: vi.fn(),
+    },
+  },
+}));
+vi.mock("../../../lib/toast", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(() => Promise.resolve(true)) }));
+vi.mock("../../../lib/clipboard", () => ({ copyText: vi.fn(() => Promise.resolve(true)) }));
+
+const KEY = { publicKey: "ssh-ed25519 AAAAC3Nz an@agenthub", fingerprint: "SHA256:abc" };
+const view = (over: Partial<GitIdentity> = {}): GitIdentity => ({
+  account: "member",
+  writable: true,
+  ssh: null,
+  https: [],
+  author: { name: "An", email: "an@x.vn" },
+  ...over,
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("GitIdentitySettings", () => {
+  it("makes a key when there is none, without asking", async () => {
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view());
+    vi.mocked(api.gitIdentity.generateKey).mockResolvedValue(view({ ssh: KEY }));
+    render(<GitIdentitySettings />);
+    const gh = await screen.findByRole("region", { name: /GitHub/ });
+    await userEvent.click(within(gh).getByRole("button", { name: "Generate key" }));
+    expect(confirmDialog).not.toHaveBeenCalled();
+    expect(api.gitIdentity.generateKey).toHaveBeenCalledWith(false, "ed25519");
+    expect(await screen.findByLabelText(/^Public key/)).toHaveValue(KEY.publicKey);
+  });
+
+  it("copies the public key and asks before replacing it", async () => {
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view({ ssh: KEY }));
+    vi.mocked(api.gitIdentity.generateKey).mockResolvedValue(view({ ssh: KEY }));
+    render(<GitIdentitySettings />);
+    await userEvent.click(await screen.findByRole("button", { name: "Copy public key" }));
+    expect(copyText).toHaveBeenCalledWith(KEY.publicKey);
+    await userEvent.click(screen.getByRole("button", { name: "Replace key" }));
+    expect(confirmDialog).toHaveBeenCalled();
+    await waitFor(() => expect(api.gitIdentity.generateKey).toHaveBeenCalledWith(true, "ed25519"));
+  });
+
+  it("lets a member save an https login of their own", async () => {
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view());
+    vi.mocked(api.gitIdentity.saveHttps).mockResolvedValue(
+      view({ https: [{ protocol: "https", host: "github.com", username: "an", hasToken: true }] })
+    );
+    render(<GitIdentitySettings />);
+    await userEvent.click(await screen.findByRole("button", { name: "Add login" }));
+    await userEvent.type(screen.getByLabelText("Server URL"), "https://github.com/o/r");
+    await userEvent.type(screen.getByLabelText("Username"), "an");
+    await userEvent.type(screen.getByLabelText("Password or access token"), "tok");
+    // The second Save: the first belongs to the commit-author form.
+    await userEvent.click(screen.getAllByRole("button", { name: "Save" })[1]!);
+    expect(api.gitIdentity.saveHttps).toHaveBeenCalledWith({
+      host: "github.com",
+      username: "an",
+      password: "tok",
+    });
+    expect(await screen.findByText("github.com")).toBeInTheDocument();
+  });
+
+  it("makes the RSA key from the AWS CodeCommit section", async () => {
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view());
+    vi.mocked(api.gitIdentity.generateKey).mockResolvedValue(
+      view({ ssh: { ...KEY, type: "rsa", publicKey: "ssh-rsa AAAAB3 an@agenthub" } })
+    );
+    render(<GitIdentitySettings />);
+    const aws = await screen.findByRole("region", { name: "AWS CodeCommit" });
+    await userEvent.click(within(aws).getByRole("button", { name: "Generate key" }));
+    expect(api.gitIdentity.generateKey).toHaveBeenCalledWith(false, "rsa");
+    expect(await screen.findByLabelText("Public key RSA")).toBeInTheDocument();
+  });
+
+  it("keeps each key in its own section and deletes each on its own", async () => {
+    const RSA = {
+      type: "rsa" as const,
+      publicKey: "ssh-rsa AAAAB3 an@agenthub",
+      fingerprint: "SHA256:r",
+    };
+    const ED = { ...KEY, type: "ed25519" as const };
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(
+      view({ ssh: ED, sshKeys: [ED, RSA], sshTerminal: "on" })
+    );
+    vi.mocked(api.gitIdentity.removeKey).mockResolvedValue(view({ ssh: ED, sshKeys: [ED] }));
+    render(<GitIdentitySettings />);
+    const gh = await screen.findByRole("region", { name: /GitHub/ });
+    const aws = screen.getByRole("region", { name: "AWS CodeCommit" });
+    expect(within(gh).getByLabelText("Public key ED25519")).toHaveValue(ED.publicKey);
+    expect(within(aws).getByLabelText("Public key RSA")).toHaveValue(RSA.publicKey);
+    // Each section explains only its own host.
+    expect(within(gh).queryByText(/IAM/)).toBeNull();
+    expect(within(aws).queryByText(/GitHub/)).toBeNull();
+    expect(screen.getByRole("switch", { name: /terminal/ })).toBeChecked();
+    await userEvent.click(within(aws).getByRole("button", { name: "Delete" }));
+    await waitFor(() => expect(api.gitIdentity.removeKey).toHaveBeenCalledWith("rsa"));
+  });
+
+  it("saves the CodeCommit SSH key ID for a region and shows the plain clone", async () => {
+    const RSA = { type: "rsa" as const, publicKey: "ssh-rsa AAAAB3 x", fingerprint: "SHA256:r" };
+    const H = "git-codecommit.eu-west-1.amazonaws.com";
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view({ sshKeys: [RSA], sshUsers: [] }));
+    vi.mocked(api.gitIdentity.setSshUser).mockResolvedValue(
+      view({ sshKeys: [RSA], sshUsers: [{ host: H, user: "APKA1" }] })
+    );
+    vi.mocked(api.gitIdentity.removeSshUser).mockResolvedValue(
+      view({ sshKeys: [RSA], sshUsers: [] })
+    );
+    render(<GitIdentitySettings />);
+    const aws = await screen.findByRole("region", { name: "AWS CodeCommit" });
+    await userEvent.type(within(aws).getByLabelText("SSH key ID"), " APKA1 ");
+    await userEvent.selectOptions(within(aws).getByLabelText("Region"), "eu-west-1");
+    await userEvent.click(within(aws).getByRole("button", { name: "Save" }));
+    expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({ host: H, user: "APKA1" });
+    expect(await within(aws).findByText("eu-west-1 · APKA1")).toBeInTheDocument();
+    expect(within(aws).getByText(`git clone ssh://${H}/v1/repos/<repo>`)).toBeInTheDocument();
+    // A CodeCommit host never shows up again under "other hosts".
+    expect(screen.queryByText(`APKA1@${H}`)).toBeNull();
+    await userEvent.click(within(aws).getByRole("button", { name: `Delete ${H}` }));
+    expect(api.gitIdentity.removeSshUser).toHaveBeenCalledWith(H);
+  });
+
+  it("saves a user for any other SSH host under the advanced section", async () => {
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view({ ssh: KEY, sshUsers: [] }));
+    vi.mocked(api.gitIdentity.setSshUser).mockResolvedValue(
+      view({ ssh: KEY, sshUsers: [{ host: "git.example.com", user: "deploy" }] })
+    );
+    render(<GitIdentitySettings />);
+    await userEvent.click(await screen.findByText("Other SSH hosts (advanced)"));
+    await userEvent.type(screen.getByLabelText("Host"), "ssh://git.example.com/x");
+    await userEvent.type(screen.getByLabelText("User name"), "deploy");
+    const form = screen.getByLabelText("Host").closest("form")!;
+    await userEvent.click(within(form).getByRole("button", { name: "Save" }));
+    expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({
+      host: "git.example.com",
+      user: "deploy",
+    });
+    expect(await screen.findByText("deploy@git.example.com")).toBeInTheDocument();
+  });
+
+  it("warns while the commit author is unset and saves it", async () => {
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(view({ author: { name: null, email: null } }));
+    vi.mocked(api.gitIdentity.saveAuthor).mockResolvedValue(view());
+    render(<GitIdentitySettings />);
+    expect(
+      await screen.findByText(/commits from the dashboard and your agents fail/)
+    ).toBeInTheDocument();
+    await userEvent.type(screen.getByLabelText("Name"), "An Nguyen");
+    await userEvent.type(screen.getByLabelText("Email"), "an@x.vn");
+    await userEvent.click(screen.getAllByRole("button", { name: "Save" })[0]!);
+    expect(api.gitIdentity.saveAuthor).toHaveBeenCalledWith({
+      name: "An Nguyen",
+      email: "an@x.vn",
+    });
+  });
+
+  it("shows the host's key read-only and no https list", async () => {
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(
+      view({ account: "host", writable: false, ssh: KEY })
+    );
+    render(<GitIdentitySettings />);
+    expect(await screen.findByLabelText(/^Public key/)).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Replace key" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add login" })).toBeNull();
+  });
+});

client/src/components/users/AccountPoolCard.tsx

@@ -0,0 +1,495 @@
+/**
+ * @file AccountPoolCard.tsx
+ * @description The Users page's account pool card (`GET /api/accounts`): the
+ * Claude and Codex accounts every user's new sessions are spread over, each
+ * with its live panes, $ and tokens in the last 5 h / 7 d and quota — so nobody signs in
+ * per user. An admin adds one — for Claude a login MOVED in from a saved
+ * switch-user profile (`GET /api/accounts/profiles`), a pasted
+ * `.credentials.json`, or a `claude setup-token` token; for Codex an OpenAI
+ * API key or a pasted `auth.json` — or removes one, each time with their own
+ * password again; an analyst only reads. The secret only goes IN: the server
+ * never sends it back.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState, type KeyboardEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import type { TFunction } from "i18next";
+import { KeyRound, Plus, RefreshCw, Trash2 } from "lucide-react";
+import {
+  api,
+  type AccountPool,
+  type PoolAccountInput,
+  type PoolProfile,
+  type PoolTool,
+} from "../../lib/api";
+import { fmt, fmtCost, formatDateTime } from "../../lib/format";
+import { toast } from "../../lib/toast";
+import { isSubmitEnter } from "../../lib/keys";
+import { useSpin } from "../../hooks/useSpin";
+import { ConfirmModal } from "../ConfirmModal";
+
+type Row = {
+  tool: PoolTool;
+  name: string;
+  kind: string;
+  email: string | null;
+  refreshError: string | null;
+  addedAt: string;
+  expired: boolean;
+  livePanes: number;
+  spend5h: number;
+  spend7d: number;
+  tokens5h: number;
+  tokens7d: number;
+  quotaPercent: number | null;
+  full: boolean;
+};
+
+function rowsOf(pool: AccountPool): Row[] {
+  return [
+    ...pool.accounts.map((a) => ({ ...a, tool: "claude" as const })),
+    ...pool.codex.map((a) => ({
+      ...a,
+      tool: "codex" as const,
+      expired: false,
+      email: null,
+      refreshError: null,
+    })),
+  ];
+}
+
+function errorText(t: TFunction<"users">, e: unknown): string {
+  const err = e as Error & { code?: string };
+  return err.code && t(`pool.errors.${err.code}`, { defaultValue: "" })
+    ? t(`pool.errors.${err.code}`)
+    : err.message;
+}
+
+export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
+  const { t } = useTranslation("users");
+  const [pool, setPool] = useState<AccountPool | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [adding, setAdding] = useState(false);
+  const [removing, setRemoving] = useState<Row | null>(null);
+
+  const load = useCallback(
+    (force = false) =>
+      api.accountPool
+        .list(force)
+        .then((r) => {
+          setPool(r);
+          setError(null);
+        })
+        .catch((e: Error) => setError(e.message)),
+    []
+  );
+  const [spinning, refresh] = useSpin(() => load(true));
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const rows = pool ? rowsOf(pool) : [];
+  const th = "px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider";
+
+  return (
+    <section className="card" data-testid="account-pool">
+      <div className="flex flex-wrap items-center gap-2 px-5 py-4 border-b border-border">
+        <KeyRound className="w-4 h-4 text-fg-muted" />
+        <div className="flex-1 min-w-0">
+          <h2 className="text-sm font-semibold text-fg-primary">{t("pool.title")}</h2>
+          <p className="text-xs text-fg-muted">{t("pool.description")}</p>
+        </div>
+        <button
+          type="button"
+          onClick={refresh}
+          disabled={spinning}
+          aria-busy={spinning}
+          title={t("pool.refresh")}
+          aria-label={t("pool.refresh")}
+          className="btn-icon"
+        >
+          <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />
+        </button>
+        {isAdmin && (
+          <button type="button" onClick={() => setAdding(true)} className="btn-primary">
+            <Plus className="w-4 h-4" /> {t("pool.add")}
+          </button>
+        )}
+      </div>
+      {error && (
+        <p role="alert" className="px-5 py-3 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+      {pool && rows.length === 0 && (
+        <p className="px-5 py-8 text-center text-sm text-fg-muted">{t("pool.empty")}</p>
+      )}
+      {rows.length > 0 && (
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[640px]">
+            <thead>
+              <tr className="border-b border-border text-left">
+                <th className={th}>{t("pool.account")}</th>
+                <th className={th}>{t("pool.tool")}</th>
+                <th className={`${th} text-right`}>{t("pool.livePanes")}</th>
+                <th className={`${th} text-right`}>{t("pool.quota")}</th>
+                <th className={`${th} text-right`}>{t("pool.spend")}</th>
+                {isAdmin && <th className={`${th} text-right`}>{t("actions")}</th>}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {rows.map((r) => (
+                <tr key={`${r.tool}:${r.name}`} className={r.expired ? "opacity-60" : ""}>
+                  <td className="px-5 py-2.5">
+                    <div className="text-sm font-medium text-fg-primary">{r.name}</div>
+                    {r.email && <div className="text-[11px] text-fg-secondary">{r.email}</div>}
+                    <div className="text-[11px] text-fg-muted">
+                      {t("pool.added", { at: formatDateTime(r.addedAt) })}
+                    </div>
+                  </td>
+                  <td className="px-5 py-2.5 text-sm text-fg-secondary">
+                    {t(`pool.kind.${r.kind}`)}
+                    {r.expired && (
+                      <span className="badge ml-1.5 py-0 text-[10px] bg-status-danger/10 text-status-danger border-status-danger/20">
+                        {t("pool.expired")}
+                      </span>
+                    )}
+                    {r.refreshError && !r.expired && (
+                      <span
+                        className="badge ml-1.5 py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20"
+                        title={r.refreshError}
+                      >
+                        {t("pool.refreshFailed")}
+                      </span>
+                    )}
+                    {r.full && (
+                      <span className="badge ml-1.5 py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20">
+                        {t("pool.full")}
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-5 py-2.5 text-right text-sm tabular-nums text-fg-secondary">
+                    {r.livePanes}
+                  </td>
+                  <td className="px-5 py-2.5 text-right text-sm tabular-nums text-fg-secondary">
+                    {r.quotaPercent == null ? "—" : `${Math.round(r.quotaPercent)}%`}
+                  </td>
+                  <td className="px-5 py-2.5 text-right tabular-nums">
+                    <div className="text-sm text-fg-primary">
+                      {fmtCost(r.spend5h)}
+                      <span className="ml-1.5 text-[11px] text-fg-muted">
+                        {t("pool.tokens", { tokens: fmt(r.tokens5h) })}
+                      </span>
+                    </div>
+                    <div className="text-[11px] text-fg-muted">
+                      {t("pool.spend7d", { cost: fmtCost(r.spend7d), tokens: fmt(r.tokens7d) })}
+                    </div>
+                  </td>
+                  {isAdmin && (
+                    <td className="px-5 py-2 text-right">
+                      <button
+                        type="button"
+                        onClick={() => setRemoving(r)}
+                        title={t("pool.remove", { name: r.name })}
+                        aria-label={t("pool.remove", { name: r.name })}
+                        className="btn-icon"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </td>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {adding && (
+        <AddAccountDialog
+          onClose={() => setAdding(false)}
+          onDone={(name) => {
+            toast.success(t("pool.done.added", { name }));
+            setAdding(false);
+            void load();
+          }}
+        />
+      )}
+      {removing && (
+        <RemoveAccountDialog
+          row={removing}
+          onClose={() => setRemoving(null)}
+          onDone={() => {
+            toast.success(t("pool.done.removed", { name: removing.name }));
+            setRemoving(null);
+            void load();
+          }}
+        />
+      )}
+    </section>
+  );
+}
+
+type ClaudeSource = "profile" | "credentials" | "token";
+
+function AddAccountDialog({
+  onClose,
+  onDone,
+}: {
+  onClose: () => void;
+  onDone: (name: string) => void;
+}) {
+  const { t } = useTranslation("users");
+  const [tool, setTool] = useState<PoolTool>("claude");
+  const [source, setSource] = useState<ClaudeSource>("profile");
+  const [profiles, setProfiles] = useState<PoolProfile[] | null>(null);
+  const [profile, setProfile] = useState("");
+  const [name, setName] = useState("");
+  const [secret, setSecret] = useState("");
+  const [current, setCurrent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.accountPool
+      .profiles()
+      .then((r) => setProfiles(r.profiles))
+      .catch(() => setProfiles([]));
+  }, []);
+
+  const fromProfile = tool === "claude" && source === "profile";
+  // A profile already names itself: its name is the default.
+  const ready =
+    current.length > 0 &&
+    (fromProfile ? profile.length > 0 : name.trim().length > 0 && secret.trim().length > 0);
+
+  const submit = async () => {
+    if (!ready || busy) return;
+    setBusy(true);
+    setError(null);
+    const body: PoolAccountInput =
+      tool === "codex"
+        ? { tool, name: name.trim(), token: secret.trim() }
+        : source === "profile"
+          ? { tool, name: name.trim() || profile, profile }
+          : source === "credentials"
+            ? { tool, name: name.trim(), credentials: secret.trim() }
+            : { tool, name: name.trim(), token: secret.trim() };
+    try {
+      const r = await api.accountPool.add(body, current);
+      onDone(r.account.name);
+    } catch (e) {
+      setError(errorText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    // The secret box is a textarea for pasted JSON: Enter there is a newline.
+    if ((e.target as HTMLElement).tagName !== "TEXTAREA" && isSubmitEnter(e)) {
+      e.preventDefault();
+      void submit();
+    }
+  };
+  const secretKind = tool === "codex" ? "codex" : source;
+
+  return (
+    <ConfirmModal
+      open
+      title={t("pool.add")}
+      confirmLabel={t("pool.add")}
+      cancelLabel={t("common:cancel")}
+      destructive={false}
+      busy={busy}
+      disabled={!ready}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <div className="mt-3 space-y-3" onKeyDown={onKeyDown}>
+        <Field label={t("pool.tool")}>
+          <select
+            className="input w-full text-sm"
+            value={tool}
+            onChange={(e) => setTool(e.target.value as PoolTool)}
+            aria-label={t("pool.tool")}
+          >
+            <option value="claude">Claude Code</option>
+            <option value="codex">Codex</option>
+          </select>
+        </Field>
+        {tool === "claude" && (
+          <Field label={t("pool.source")} hint={t(`pool.sourceHint.${source}`)}>
+            <select
+              className="input w-full text-sm"
+              value={source}
+              onChange={(e) => setSource(e.target.value as ClaudeSource)}
+              aria-label={t("pool.source")}
+            >
+              {(["profile", "credentials", "token"] as const).map((s) => (
+                <option key={s} value={s}>
+                  {t(`pool.sources.${s}`)}
+                </option>
+              ))}
+            </select>
+          </Field>
+        )}
+        {fromProfile && (
+          <Field label={t("pool.profile")} hint={t("pool.profileHint")}>
+            <select
+              className="input w-full text-sm"
+              value={profile}
+              onChange={(e) => setProfile(e.target.value)}
+              aria-label={t("pool.profile")}
+            >
+              <option value="">
+                {profiles === null
+                  ? t("pool.loadingProfiles")
+                  : profiles.length === 0
+                    ? t("pool.noProfiles")
+                    : t("pool.chooseProfile")}
+              </option>
+              {profiles?.map((p) => (
+                <option key={p.name} value={p.name}>
+                  {p.label}
+                  {p.email ? ` — ${p.email}` : ""}
+                  {p.active ? ` (${t("pool.activeHere")})` : ""}
+                </option>
+              ))}
+            </select>
+          </Field>
+        )}
+        <Field
+          label={t("pool.name")}
+          hint={fromProfile ? t("pool.nameFromProfile") : t("pool.nameHint")}
+        >
+          <input
+            className="input w-full text-sm"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            autoComplete="off"
+            aria-label={t("pool.name")}
+          />
+        </Field>
+        {!fromProfile && (
+          <Field label={t(`pool.secret.${secretKind}`)} hint={t(`pool.secretHint.${secretKind}`)}>
+            {secretKind === "token" ? (
+              <input
+                type="password"
+                className="input w-full font-mono text-sm"
+                value={secret}
+                onChange={(e) => setSecret(e.target.value)}
+                autoComplete="off"
+                aria-label={t(`pool.secret.${secretKind}`)}
+              />
+            ) : (
+              <textarea
+                className="input w-full h-24 font-mono text-xs"
+                value={secret}
+                onChange={(e) => setSecret(e.target.value)}
+                autoComplete="off"
+                spellCheck={false}
+                aria-label={t(`pool.secret.${secretKind}`)}
+              />
+            )}
+          </Field>
+        )}
+        <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("yourPassword")}
+          />
+        </Field>
+        {error && (
+          <p role="alert" className="text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}
+
+function RemoveAccountDialog({
+  row,
+  onClose,
+  onDone,
+}: {
+  row: Row;
+  onClose: () => void;
+  onDone: () => void;
+}) {
+  const { t } = useTranslation("users");
+  const [current, setCurrent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async () => {
+    if (!current || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.accountPool.remove(row.tool, row.name, current);
+      onDone();
+    } catch (e) {
+      setError(errorText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <ConfirmModal
+      open
+      title={t("pool.remove", { name: row.name })}
+      message={t("pool.removeHint")}
+      confirmLabel={t("pool.removeButton")}
+      cancelLabel={t("common:cancel")}
+      busy={busy}
+      disabled={!current}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <div
+        className="mt-3 space-y-3"
+        onKeyDown={(e) => {
+          if (isSubmitEnter(e)) {
+            e.preventDefault();
+            void submit();
+          }
+        }}
+      >
+        <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("yourPassword")}
+          />
+        </Field>
+        {error && (
+          <p role="alert" className="text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="text-xs font-medium text-fg-secondary">{label}</span>
+      <div className="mt-1">{children}</div>
+      {hint && <span className="mt-0.5 block text-[11px] text-fg-muted">{hint}</span>}
+    </label>
+  );
+}

client/src/components/users/MemberTmuxCard.tsx

@@ -0,0 +1,267 @@
+/**
+ * @file MemberTmuxCard.tsx
+ * @description The Users page's tmux card (one Linux user per account only,
+ * `GET /api/users/tmux`): each member's own tmux server — the version it runs
+ * beside the installed one, its sessions, whether an agent of theirs is
+ * working — so an admin sees who still runs an old tmux after an upgrade.
+ * An admin restarts one member's server, or every idle outdated one at once
+ * (`POST /api/users/:id/tmux-restart`, `/api/users/tmux-restart-idle`), each
+ * time with their own password again; a restart ends that member's panes,
+ * and the next start runs the installed tmux. An analyst only reads.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import type { TFunction } from "i18next";
+import { RefreshCw, RotateCcw, TerminalSquare } from "lucide-react";
+import { api, type MemberTmux, type MemberTmuxRow } from "../../lib/api";
+import { formatDateTime } from "../../lib/format";
+import { toast } from "../../lib/toast";
+import { isSubmitEnter } from "../../lib/keys";
+import { useSpin } from "../../hooks/useSpin";
+import { ConfirmModal } from "../ConfirmModal";
+
+function errorText(t: TFunction<"users">, e: unknown): string {
+  const err = e as Error & { code?: string };
+  return err.code && t(`tmux.errors.${err.code}`, { defaultValue: "" })
+    ? t(`tmux.errors.${err.code}`)
+    : err.message;
+}
+
+const BADGE = "badge ml-1.5 py-0 text-[10px]";
+const WARN = `${BADGE} bg-status-warning/10 text-status-warning border-status-warning/20`;
+const DANGER = `${BADGE} bg-status-danger/10 text-status-danger border-status-danger/20`;
+
+export function MemberTmuxCard({ isAdmin }: { isAdmin: boolean }) {
+  const { t } = useTranslation("users");
+  const [data, setData] = useState<MemberTmux | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  // A member row = restart that one; "idle" = every idle outdated member.
+  const [restarting, setRestarting] = useState<MemberTmuxRow | "idle" | null>(null);
+
+  const load = useCallback(
+    () =>
+      api.users
+        .tmux()
+        .then((r) => {
+          setData(r);
+          setError(null);
+        })
+        .catch((e: Error) => setError(e.message)),
+    []
+  );
+  const [spinning, refresh] = useSpin(load);
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (!data?.available) return null;
+  const rows = data.users.filter((u) => u.running);
+  const idleOutdated = rows.filter((u) => u.outdated && u.busy === 0);
+  const th = "px-5 py-2.5 text-[11px] font-semibold text-fg-muted uppercase tracking-wider";
+
+  return (
+    <section className="card" data-testid="member-tmux">
+      <div className="flex flex-wrap items-center gap-2 px-5 py-4 border-b border-border">
+        <TerminalSquare className="w-4 h-4 text-fg-muted" />
+        <div className="flex-1 min-w-0">
+          <h2 className="text-sm font-semibold text-fg-primary">{t("tmux.title")}</h2>
+          <p className="text-xs text-fg-muted">
+            {t("tmux.description", { version: data.installed ?? "?" })}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={refresh}
+          disabled={spinning}
+          aria-busy={spinning}
+          title={t("tmux.refresh")}
+          aria-label={t("tmux.refresh")}
+          className="btn-icon"
+        >
+          <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />
+        </button>
+        {isAdmin && idleOutdated.length > 0 && (
+          <button type="button" onClick={() => setRestarting("idle")} className="btn-primary">
+            <RotateCcw className="w-4 h-4" />{" "}
+            {t("tmux.restartIdle", { count: idleOutdated.length })}
+          </button>
+        )}
+      </div>
+      {!data.matched && (
+        <p className="px-5 py-2.5 text-xs text-status-warning border-b border-border">
+          {t("tmux.notMatched")}
+        </p>
+      )}
+      {error && (
+        <p role="alert" className="px-5 py-3 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+      {rows.length === 0 ? (
+        <p className="px-5 py-8 text-center text-sm text-fg-muted">{t("tmux.empty")}</p>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="w-full min-w-[560px]">
+            <thead>
+              <tr className="border-b border-border text-left">
+                <th className={th}>{t("tmux.user")}</th>
+                <th className={th}>{t("tmux.version")}</th>
+                <th className={`${th} text-right`}>{t("tmux.sessions")}</th>
+                <th className={th}>{t("tmux.agents")}</th>
+                {isAdmin && <th className={`${th} text-right`}>{t("actions")}</th>}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {rows.map((u) => (
+                <tr key={u.id}>
+                  <td className="px-5 py-2.5 text-sm text-fg-primary">{u.username}</td>
+                  <td className="px-5 py-2.5 text-sm text-fg-secondary">
+                    <span className="font-mono">{u.stuck ? "?" : (u.version ?? "?")}</span>
+                    {u.stuck && <span className={DANGER}>{t("tmux.stuck")}</span>}
+                    {u.outdated && <span className={WARN}>{t("tmux.outdated")}</span>}
+                    {u.startedAt && (
+                      <div className="text-[11px] text-fg-muted">
+                        {t("tmux.since", {
+                          at: formatDateTime(new Date(u.startedAt).toISOString()),
+                        })}
+                      </div>
+                    )}
+                  </td>
+                  <td className="px-5 py-2.5 text-right text-sm tabular-nums text-fg-secondary">
+                    {u.sessions ?? "—"}
+                  </td>
+                  <td className="px-5 py-2.5 text-sm text-fg-secondary">
+                    {u.busy > 0 ? t("tmux.working", { count: u.busy }) : t("tmux.idle")}
+                  </td>
+                  {isAdmin && (
+                    <td className="px-5 py-2 text-right">
+                      <button
+                        type="button"
+                        onClick={() => setRestarting(u)}
+                        title={t("tmux.restart", { name: u.username })}
+                        aria-label={t("tmux.restart", { name: u.username })}
+                        className="btn-icon"
+                      >
+                        <RotateCcw className="h-4 w-4" />
+                      </button>
+                    </td>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+      {restarting && (
+        <RestartDialog
+          target={restarting}
+          idle={idleOutdated}
+          onClose={() => setRestarting(null)}
+          onDone={(msg) => {
+            toast.success(msg);
+            setRestarting(null);
+            void load();
+          }}
+        />
+      )}
+    </section>
+  );
+}
+
+function RestartDialog({
+  target,
+  idle,
+  onClose,
+  onDone,
+}: {
+  target: MemberTmuxRow | "idle";
+  idle: MemberTmuxRow[];
+  onClose: () => void;
+  onDone: (message: string) => void;
+}) {
+  const { t } = useTranslation("users");
+  const [current, setCurrent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const one = target === "idle" ? null : target;
+
+  const submit = async () => {
+    if (!current || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      if (one) {
+        await api.users.tmuxRestart(one.id, current);
+        onDone(t("tmux.done", { name: one.username }));
+      } else {
+        const r = await api.users.tmuxRestartIdle(current);
+        // A server that would not stop needs root: say which, the rest went.
+        if (r.failed.length) toast.error(r.failed.map((f) => f.message).join("\n"));
+        onDone(t("tmux.doneIdle", { names: r.restarted.join(", ") || "—" }));
+      }
+    } catch (e) {
+      setError(errorText(t, e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <ConfirmModal
+      open
+      title={one ? t("tmux.restart", { name: one.username }) : t("tmux.restartIdleTitle")}
+      message={
+        one
+          ? t(one.busy > 0 ? "tmux.restartHintBusy" : "tmux.restartHint", {
+              name: one.username,
+              count: one.sessions ?? 0,
+            })
+          : t("tmux.restartIdleHint", { names: idle.map((u) => u.username).join(", ") })
+      }
+      confirmLabel={t("tmux.restartButton")}
+      cancelLabel={t("common:cancel")}
+      busy={busy}
+      disabled={!current}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <div
+        className="mt-3 space-y-3"
+        onKeyDown={(e) => {
+          if (isSubmitEnter(e)) {
+            e.preventDefault();
+            void submit();
+          }
+        }}
+      >
+        <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>
+          <input
+            type="password"
+            className="input w-full text-sm"
+            value={current}
+            onChange={(e) => setCurrent(e.target.value)}
+            autoComplete="current-password"
+            aria-label={t("yourPassword")}
+          />
+        </Field>
+        {error && (
+          <p role="alert" className="whitespace-pre-line text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="text-xs font-medium text-fg-secondary">{label}</span>
+      <div className="mt-1">{children}</div>
+      {hint && <span className="mt-0.5 block text-[11px] text-fg-muted">{hint}</span>}
+    </label>
+  );
+}

client/src/components/users/UserAvatar.tsx

@@ -0,0 +1,59 @@
+/**
+ * @file UserAvatar.tsx
+ * @description An account's round picture: the signed-in account's own
+ * (`GET /api/me/avatar`) or, with `userId`, another's (`GET
+ * /api/users/:id/avatar`, staff only), versioned by `avatarAt`; without one —
+ * or when the image fails to load — the first letters of its name. Used by the
+ * sidebar's account row, its workspace owner groups and Settings → Account.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { api } from "../../lib/api";
+
+export function UserAvatar({
+  name,
+  avatarAt,
+  userId,
+  letters = 2,
+  className = "h-7 w-7 text-[11px]",
+  initialsClassName = "bg-accent/15 text-accent",
+}: {
+  name: string;
+  avatarAt?: string | null;
+  /** Another account's (staff only); omitted = the signed-in account's own. */
+  userId?: number;
+  /** How many letters of the name stand in for a missing picture. */
+  letters?: number;
+  /** Size and font size: the parts that differ between call sites. */
+  className?: string;
+  /** The initials' colours. */
+  initialsClassName?: string;
+}) {
+  const url = userId != null ? api.users.avatarUrl(userId, avatarAt) : api.me.avatarUrl(avatarAt);
+  // A broken image falls back to the initials, per URL.
+  const [failed, setFailed] = useState<string | null>(null);
+  const base = `flex flex-shrink-0 items-center justify-center overflow-hidden rounded-full ${className}`;
+  if (url && failed !== url) {
+    return (
+      <img
+        src={url}
+        alt=""
+        aria-hidden
+        draggable={false}
+        onError={() => setFailed(url)}
+        className={`${base} object-cover`}
+        data-testid="user-avatar-img"
+      />
+    );
+  }
+  return (
+    <span
+      aria-hidden
+      className={`${base} ${initialsClassName} font-semibold uppercase`}
+      data-testid="user-avatar-initials"
+    >
+      {name.slice(0, letters)}
+    </span>
+  );
+}

client/src/components/users/UserEditDialog.tsx

@@ -0,0 +1,558 @@
+/**
+ * @file UserEditDialog.tsx
+ * @description The Users page's ONE account editor (admin only): profile
+ * (display name, email), access (role, active/disabled — neither for your own
+ * account), a new password (typed or generated, copyable), the workspaces the
+ * account owns (remove, add from every workspace), and "sign out everywhere".
+ * Every change is staged and sent as ONE `PATCH /api/users/:id` carrying only
+ * what changed, confirmed with the admin's OWN password (`currentPassword`) —
+ * the server validates the whole change before it applies any of it. A
+ * refusal is shown inside the dialog, which stays open.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Copy, Eye, EyeOff, Plus, Sparkles, X } from "lucide-react";
+import { confirmDialog } from "../../lib/confirm";
+import { api, type AuthUser, type ServerUserUsage, type UserPatch } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { fmtCost, formatDateTime } from "../../lib/format";
+import { copyText } from "../../lib/clipboard";
+import { isSubmitEnter } from "../../lib/keys";
+import { useDialog } from "../../hooks/useDialog";
+import { Switch } from "../Switch";
+import { Checkbox } from "../Checkbox";
+
+type Role = AuthUser["role"];
+const ROLES: Role[] = ["admin", "analyst", "developer"];
+
+export const ROLE_BADGE: Record<Role, string> = {
+  admin: "bg-accent/15 text-accent border-accent/20",
+  analyst: "bg-status-warning/10 text-status-warning border-status-warning/20",
+  developer: "bg-surface-4 text-fg-secondary border-border",
+};
+
+/** A random password of `n` characters, no look-alikes (0/O, 1/l/I). */
+export function generatePassword(n = 16): string {
+  const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789-_!@#%";
+  const bytes = new Uint32Array(n);
+  crypto.getRandomValues(bytes);
+  return Array.from(bytes, (b) => chars[b % chars.length]).join("");
+}
+
+type OwnedWorkspace = { id: number; title: string; cwd: string };
+
+export function UserEditDialog({
+  user,
+  self,
+  users,
+  onClose,
+  onDone,
+}: {
+  user: ServerUserUsage;
+  /** The account being edited is the signed-in admin's own. */
+  self: boolean;
+  users: ServerUserUsage[];
+  onClose: () => void;
+  onDone: (message: string) => void;
+}) {
+  const { t } = useTranslation("users");
+  const panelRef = useRef<HTMLDivElement>(null);
+  useDialog(true, panelRef, onClose);
+
+  const [displayName, setDisplayName] = useState(user.displayName ?? "");
+  const [email, setEmail] = useState(user.email ?? "");
+  const [role, setRole] = useState<Role>(user.role);
+  const [active, setActive] = useState(!user.disabled);
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [owned, setOwned] = useState<OwnedWorkspace[] | null>(null);
+  const [lanes, setLanes] = useState<Lane[] | null>(null);
+  const [removed, setRemoved] = useState<Set<number>>(new Set());
+  const [added, setAdded] = useState<number[]>([]);
+  const [pick, setPick] = useState("");
+  const [signOut, setSignOut] = useState(false);
+  const [current, setCurrent] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.users
+      .get(user.id)
+      .then((r) => setOwned(r.workspaces))
+      .catch(() => setOwned([]));
+    api.lanes
+      .list()
+      .then((r) => setLanes(r.lanes))
+      .catch(() => setLanes([]));
+  }, [user.id]);
+
+  const ownerName = (id: number) => {
+    const u = users.find((x) => x.id === id);
+    return u ? u.displayName || u.username : `#${id}`;
+  };
+  const ownedIds = useMemo(() => new Set((owned ?? []).map((w) => w.id)), [owned]);
+  const addable = (lanes ?? []).filter((l) => !ownedIds.has(l.id) && !added.includes(l.id));
+  const laneLabel = (id: number) => {
+    const l = (lanes ?? []).find((x) => x.id === id);
+    return l ? l.title || l.cwd : `#${id}`;
+  };
+
+  const patch: UserPatch = {};
+  const norm = (v: string) => (v.trim() === "" ? null : v.trim());
+  if (norm(displayName) !== (user.displayName ?? null)) patch.displayName = norm(displayName);
+  if (norm(email) !== (user.email ?? null)) patch.email = norm(email);
+  if (!self && role !== user.role) patch.role = role;
+  if (!self && active === user.disabled) patch.disabled = !active;
+  if (password) patch.password = password;
+  if (added.length) patch.addWorkspaces = added;
+  if (removed.size) patch.removeWorkspaces = [...removed];
+  if (signOut) patch.signOut = true;
+  const changed = Object.keys(patch).length > 0;
+  // No minimum length (server/lib/auth.js) — a blank field keeps the password.
+  const ready = changed && current.length > 0 && !busy;
+
+  const submit = async () => {
+    if (!ready) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.users.update(user.id, patch, current);
+      onDone(t("done.updated", { name: user.displayName || user.username }));
+    } catch (e) {
+      const err = e as Error & { code?: string };
+      setError(
+        err.code && t(`errors.${err.code}`, { defaultValue: "" })
+          ? t(`errors.${err.code}`)
+          : err.message
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  /** Delete the user for good — asked first, with what goes, in red. */
+  const remove = async () => {
+    if (self || busy) return;
+    if (!current) {
+      setError(t("delete.needsPassword"));
+      return;
+    }
+    const name = user.displayName || user.username;
+    const ok = await confirmDialog({
+      title: t("delete.title", { name }),
+      message: t("delete.body", { name, count: owned?.length ?? 0, user: user.username }),
+      confirmLabel: t("delete.confirm"),
+      destructive: true,
+    });
+    if (!ok) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.users.remove(user.id, current);
+      onDone(t("done.deleted", { name }));
+    } catch (e) {
+      const err = e as Error & { code?: string };
+      setError(
+        err.code && t(`errors.${err.code}`, { defaultValue: "" })
+          ? t(`errors.${err.code}`)
+          : err.message
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (isSubmitEnter(e)) {
+      e.preventDefault();
+      void submit();
+    }
+  };
+
+  const shown = user.displayName || user.username;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-surface-0/70 p-4"
+      role="presentation"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="user-edit-title"
+        className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-xl"
+      >
+        <div className="flex items-start gap-3 border-b border-border px-5 py-4">
+          <span
+            aria-hidden
+            className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-accent/15 text-sm font-semibold uppercase text-accent"
+          >
+            {shown.slice(0, 2)}
+          </span>
+          <div className="min-w-0 flex-1">
+            <h2 id="user-edit-title" className="text-base font-semibold text-fg-primary">
+              {t("edit.title", { name: user.displayName || user.username })}
+            </h2>
+            <div className="mt-1 flex flex-wrap items-center gap-1.5">
+              <span className={`badge py-0.5 text-[11px] ${ROLE_BADGE[user.role]}`}>
+                {t(`roles.${user.role}`)}
+              </span>
+              {self && (
+                <span className="badge py-0.5 text-[11px] bg-accent/15 text-accent border-accent/20">
+                  {t("you")}
+                </span>
+              )}
+              {user.disabled && (
+                <span className="badge py-0.5 text-[11px] bg-status-danger/10 text-status-danger border-status-danger/20">
+                  {t("disabled")}
+                </span>
+              )}
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t("common:close")}
+            className="btn-icon"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex-1 space-y-5 overflow-y-auto px-5 py-4">
+          <dl
+            className="grid grid-cols-2 gap-3 rounded-lg border border-border bg-surface-2 p-3 text-xs sm:grid-cols-3"
+            data-testid="user-edit-info"
+          >
+            <Info label={t("edit.created")}>
+              {user.createdAt ? formatDateTime(user.createdAt) : "—"}
+            </Info>
+            <Info label={t("edit.lastLogin")}>
+              {user.lastLoginAt ? formatDateTime(user.lastLoginAt) : t("edit.never")}
+            </Info>
+            <Info label={t("edit.logins")}>{user.logins ?? 0}</Info>
+            <Info label={t("workspaces")}>{user.workspaces}</Info>
+            <Info label={t("sessions")}>{user.sessions}</Info>
+            <Info label={t("cost30d")}>{fmtCost(user.last30d.cost)}</Info>
+          </dl>
+
+          <Section title={t("edit.profile")}>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <Field label={t("displayName")} hint={t("displayNameHint")}>
+                <input
+                  className="input w-full text-sm"
+                  value={displayName}
+                  onChange={(e) => setDisplayName(e.target.value)}
+                  onKeyDown={onKeyDown}
+                  maxLength={100}
+                  aria-label={t("displayName")}
+                />
+              </Field>
+              <Field label={t("email")}>
+                <input
+                  type="email"
+                  className="input w-full text-sm"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  onKeyDown={onKeyDown}
+                  maxLength={254}
+                  autoComplete="off"
+                  aria-label={t("email")}
+                />
+              </Field>
+            </div>
+          </Section>
+
+          <Section title={t("edit.access")}>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <Field label={t("role")} hint={self ? t("edit.selfRole") : t(`roleHint.${role}`)}>
+                <select
+                  className="input w-full text-sm"
+                  value={role}
+                  disabled={self}
+                  onChange={(e) => setRole(e.target.value as Role)}
+                  aria-label={t("role")}
+                >
+                  {ROLES.map((r) => (
+                    <option key={r} value={r}>
+                      {t(`roles.${r}`)}
+                    </option>
+                  ))}
+                </select>
+              </Field>
+              <div>
+                <span className="text-xs font-medium text-fg-secondary">{t("edit.status")}</span>
+                <div className="mt-2 flex items-center gap-2">
+                  <Switch
+                    checked={active}
+                    onChange={setActive}
+                    disabled={self}
+                    label={t("edit.active")}
+                  />
+                  <span className="text-sm text-fg-secondary">
+                    {active ? t("edit.active") : t("disabled")}
+                  </span>
+                </div>
+                <span className="mt-0.5 block text-[11px] text-fg-muted">
+                  {self ? t("edit.selfDisable") : t("edit.statusHint")}
+                </span>
+                {!active && !user.disabled && (
+                  <p className="mt-1 text-[11px] text-status-danger">
+                    {t("dialog.disableBody", { name: user.displayName || user.username })}
+                  </p>
+                )}
+              </div>
+            </div>
+          </Section>
+
+          <Section title={t("edit.password")}>
+            <Field label={t("newPassword")} hint={t("edit.passwordHint")}>
+              <div className="flex gap-2">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  className="input w-full font-mono text-sm"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  onKeyDown={onKeyDown}
+                  autoComplete="new-password"
+                  aria-label={t("newPassword")}
+                />
+                <button
+                  type="button"
+                  className="btn-icon"
+                  onClick={() => setShowPassword((v) => !v)}
+                  aria-label={showPassword ? t("edit.hide") : t("edit.show")}
+                  title={showPassword ? t("edit.hide") : t("edit.show")}
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+                <button
+                  type="button"
+                  className="btn-icon"
+                  disabled={!password}
+                  onClick={() => void copyText(password)}
+                  aria-label={t("edit.copy")}
+                  title={t("edit.copy")}
+                >
+                  <Copy className="h-4 w-4" />
+                </button>
+                <button
+                  type="button"
+                  className="btn-ghost whitespace-nowrap text-xs"
+                  onClick={() => {
+                    setPassword(generatePassword());
+                    setShowPassword(true);
+                  }}
+                >
+                  <Sparkles className="h-3.5 w-3.5" /> {t("edit.generate")}
+                </button>
+              </div>
+            </Field>
+          </Section>
+
+          <Section title={t("workspaces")}>
+            {owned === null ? (
+              <p className="text-xs text-fg-muted">{t("edit.loading")}</p>
+            ) : (
+              <ul className="space-y-1.5" data-testid="user-edit-workspaces">
+                {owned.length === 0 && added.length === 0 && (
+                  <li className="text-xs text-fg-muted">{t("edit.noOwned")}</li>
+                )}
+                {owned.map((w) => {
+                  const gone = removed.has(w.id);
+                  return (
+                    <li
+                      key={w.id}
+                      className="flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm"
+                    >
+                      <span
+                        className={`min-w-0 flex-1 truncate ${gone ? "text-fg-muted line-through" : "text-fg-primary"}`}
+                        title={w.cwd}
+                      >
+                        {w.title || w.cwd}
+                      </span>
+                      {gone ? (
+                        <button
+                          type="button"
+                          className="text-xs text-accent hover:underline"
+                          onClick={() =>
+                            setRemoved((s) => {
+                              const n = new Set(s);
+                              n.delete(w.id);
+                              return n;
+                            })
+                          }
+                        >
+                          {t("edit.undo")}
+                        </button>
+                      ) : (
+                        <button
+                          type="button"
+                          className="btn-icon"
+                          aria-label={t("edit.removeWorkspace", { name: w.title || w.cwd })}
+                          title={t("edit.removeWorkspaceHint")}
+                          onClick={() => setRemoved((s) => new Set(s).add(w.id))}
+                        >
+                          <X className="h-4 w-4" />
+                        </button>
+                      )}
+                    </li>
+                  );
+                })}
+                {added.map((id) => (
+                  <li
+                    key={`add-${id}`}
+                    className="flex items-center gap-2 rounded-md border border-accent/30 bg-accent/5 px-3 py-1.5 text-sm"
+                  >
+                    <Plus className="h-3.5 w-3.5 text-accent" />
+                    <span className="min-w-0 flex-1 truncate text-fg-primary">{laneLabel(id)}</span>
+                    <button
+                      type="button"
+                      className="btn-icon"
+                      aria-label={t("edit.undo")}
+                      onClick={() => setAdded((a) => a.filter((x) => x !== id))}
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {addable.length > 0 && (
+              <div className="mt-2 flex gap-2">
+                <select
+                  className="input w-full text-sm"
+                  value={pick}
+                  onChange={(e) => setPick(e.target.value)}
+                  aria-label={t("edit.addWorkspace")}
+                >
+                  <option value="">{t("edit.chooseWorkspace")}</option>
+                  {addable.map((l) => (
+                    <option key={l.id} value={l.id}>
+                      {(l.title || l.cwd) +
+                        " — " +
+                        (l.owner_id == null
+                          ? t("noOwner")
+                          : t("ownedBy", { name: ownerName(l.owner_id) }))}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  className="btn-ghost whitespace-nowrap text-xs"
+                  disabled={!pick}
+                  onClick={() => {
+                    setAdded((a) => [...a, Number(pick)]);
+                    setPick("");
+                  }}
+                >
+                  <Plus className="h-3.5 w-3.5" /> {t("edit.addWorkspace")}
+                </button>
+              </div>
+            )}
+            {(added.length > 0 || removed.size > 0) && (
+              <p className="mt-1 text-[11px] text-fg-muted">
+                {t("dialog.workspaceBody", { name: user.displayName || user.username })}
+              </p>
+            )}
+          </Section>
+
+          <Section title={t("edit.sessions")}>
+            <Checkbox
+              checked={signOut}
+              onChange={setSignOut}
+              tone="warning"
+              label={t("edit.signOut")}
+              labelClassName="text-sm text-fg-secondary"
+            />
+            <p className="ml-6 mt-0.5 text-[11px] text-fg-muted">
+              {t("edit.signOutHint", { n: user.logins ?? 0 })}
+            </p>
+          </Section>
+        </div>
+
+        <div className="space-y-3 border-t border-border bg-surface-2/40 px-5 py-4">
+          <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>
+            <input
+              type="password"
+              className="input w-full text-sm"
+              value={current}
+              onChange={(e) => setCurrent(e.target.value)}
+              onKeyDown={onKeyDown}
+              autoComplete="current-password"
+              aria-label={t("yourPassword")}
+            />
+          </Field>
+          {error && (
+            <p role="alert" className="text-xs text-status-danger">
+              {error}
+            </p>
+          )}
+          <div className="flex items-center justify-end gap-2">
+            {!self && (
+              <button
+                type="button"
+                onClick={() => void remove()}
+                disabled={busy}
+                data-testid="user-delete"
+                className="mr-auto rounded-md border border-status-danger/50 px-3 py-1.5 text-sm text-status-danger hover:bg-status-danger/10 disabled:opacity-50"
+              >
+                {t("delete.button")}
+              </button>
+            )}
+            {!changed && (
+              <span className={`text-xs text-fg-muted ${self ? "mr-auto" : ""}`}>
+                {t("edit.noChanges")}
+              </span>
+            )}
+            <button type="button" onClick={onClose} className="btn-ghost">
+              {t("common:cancel")}
+            </button>
+            <button
+              type="button"
+              onClick={() => void submit()}
+              disabled={!ready}
+              aria-busy={busy}
+              className="btn-primary disabled:opacity-50"
+            >
+              {t("save")}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section>
+      <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-fg-muted">
+        {title}
+      </h3>
+      {children}
+    </section>
+  );
+}
+
+function Info({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-[11px] text-fg-muted">{label}</dt>
+      <dd className="truncate text-sm tabular-nums text-fg-primary">{children}</dd>
+    </div>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {
+  return (
+    <label className="block">
+      <span className="text-xs font-medium text-fg-secondary">{label}</span>
+      <div className="mt-1">{children}</div>
+      {hint && <span className="mt-0.5 block text-[11px] text-fg-muted">{hint}</span>}
+    </label>
+  );
+}

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

@@ -0,0 +1,161 @@
+/**
+ * @file AccountPoolCard.test.tsx
+ * @description The Users page's account pool card: lists the Claude and Codex
+ * accounts with their live panes and quota, says what an empty pool means, an
+ * admin adds an account only with their own password typed (the token goes
+ * in once and is not shown back) — a saved login moved in (the server's own
+ * included), or a setup-token — and removes one the same way, and an analyst
+ * sees no add or remove control.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { AccountPool } from "../../../lib/api";
+
+const accountPool = vi.hoisted(() => ({
+  list: vi.fn(),
+  add: vi.fn(),
+  remove: vi.fn(),
+  profiles: vi.fn(),
+}));
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, api: { accountPool } };
+});
+
+import { AccountPoolCard } from "../AccountPoolCard";
+
+const POOL: AccountPool = {
+  accounts: [
+    {
+      name: "team-1",
+      kind: "login",
+      email: "team1@example.com",
+      refreshError: null,
+      addedAt: "2026-10-01T00:00:00Z",
+      expiresAt: null,
+      expired: false,
+      livePanes: 2,
+      spend5h: 1.5,
+      spend7d: 12,
+      tokens5h: 250_000,
+      tokens7d: 3_400_000,
+      quotaPercent: 42,
+      full: false,
+    },
+  ],
+  codex: [
+    {
+      name: "cx-1",
+      kind: "apikey",
+      addedAt: "2026-10-02T00:00:00Z",
+      livePanes: 0,
+      spend5h: 0,
+      spend7d: 0,
+      tokens5h: 0,
+      tokens7d: 0,
+      quotaPercent: null,
+      full: false,
+    },
+  ],
+  blockPercent: 90,
+};
+
+beforeEach(() => {
+  for (const fn of Object.values(accountPool)) fn.mockReset();
+  accountPool.list.mockResolvedValue(POOL);
+  accountPool.profiles.mockResolvedValue({
+    profiles: [
+      {
+        name: "work",
+        label: "Work",
+        email: "w@example.com",
+        subscriptionType: "max",
+        active: false,
+      },
+      { name: "me", label: "Me", email: "me@example.com", subscriptionType: "pro", active: true },
+    ],
+  });
+});
+
+describe("AccountPoolCard", () => {
+  it("lists every account, and explains an empty pool", async () => {
+    const { unmount } = render(<AccountPoolCard isAdmin={false} />);
+    expect(await screen.findByText("team-1")).toBeInTheDocument();
+    expect(screen.getByText("cx-1")).toBeInTheDocument();
+    expect(screen.getByText("42%")).toBeInTheDocument();
+    expect(screen.getByText("250.0K tokens")).toBeInTheDocument();
+    expect(screen.getByText("$12.00 · 3.4M tokens in 7 days")).toBeInTheDocument();
+    expect(screen.getByText("team1@example.com")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /add account/i })).toBeNull();
+    expect(screen.queryByRole("button", { name: /remove/i })).toBeNull();
+    unmount();
+    accountPool.list.mockResolvedValue({ accounts: [], codex: [], blockPercent: 90 });
+    render(<AccountPoolCard isAdmin />);
+    expect(await screen.findByText(/no accounts yet/i)).toBeInTheDocument();
+  });
+
+  it("moves a saved login in, the server's own included", async () => {
+    accountPool.add.mockResolvedValue({ account: { name: "work" } });
+    const user = userEvent.setup();
+    render(<AccountPoolCard isAdmin />);
+    await screen.findByText("team-1");
+    await user.click(screen.getByRole("button", { name: /add account/i }));
+    const dialog = await screen.findByRole("dialog");
+    const select = await screen.findByLabelText("Profile");
+    await waitFor(() => expect(screen.getByRole("option", { name: /Work/ })).toBeInTheDocument());
+    expect(screen.getByRole("option", { name: /Me/ })).toBeEnabled();
+    await user.selectOptions(select, "work");
+    const confirm = Array.from(dialog.querySelectorAll("button")).find(
+      (b) => b.textContent === "Add account"
+    )!;
+    expect(confirm).toBeDisabled();
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    await user.click(confirm);
+    await waitFor(() =>
+      expect(accountPool.add).toHaveBeenCalledWith(
+        { tool: "claude", name: "work", profile: "work" },
+        "boss-pass"
+      )
+    );
+  });
+
+  it("adds a setup-token only with the admin's own password", async () => {
+    accountPool.add.mockResolvedValue({ account: { name: "team-2" } });
+    const user = userEvent.setup();
+    render(<AccountPoolCard isAdmin />);
+    await screen.findByText("team-1");
+    await user.click(screen.getByRole("button", { name: /add account/i }));
+    const dialog = await screen.findByRole("dialog");
+    await user.selectOptions(screen.getByLabelText("From"), "token");
+    await user.type(screen.getByLabelText("Name"), "team-2");
+    await user.type(screen.getByLabelText("Token"), "sk-ant-oat01-xyz");
+    const confirm = Array.from(dialog.querySelectorAll("button")).find(
+      (b) => b.textContent === "Add account"
+    )!;
+    expect(confirm).toBeDisabled();
+    await user.type(screen.getByLabelText("Your password"), "boss-pass");
+    expect(confirm).toBeEnabled();
+    await user.click(confirm);
+    await waitFor(() =>
+      expect(accountPool.add).toHaveBeenCalledWith(
+        { tool: "claude", name: "team-2", token: "sk-ant-oat01-xyz" },
+        "boss-pass"
+      )
+    );
+  });
+
+  it("removes an account with the admin's own password", async () => {
+    accountPool.remove.mockResolvedValue({ ok: true });
+    const user = userEvent.setup();
+    render(<AccountPoolCard isAdmin />);
+    await user.click(await screen.findByRole("button", { name: "Remove cx-1" }));
+    await user.type(await screen.findByLabelText("Your password"), "boss-pass");
+    await user.click(screen.getByRole("button", { name: "Remove" }));
+    await waitFor(() =>
+      expect(accountPool.remove).toHaveBeenCalledWith("codex", "cx-1", "boss-pass")
+    );
+  });
+});

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

@@ -0,0 +1,100 @@
+/**
+ * @file MemberTmuxCard.test.tsx
+ * @description The Users page's members' tmux card: hidden without one Linux
+ * user per account, lists each running member server with its version and a
+ * badge when it is older than the installed tmux, warns until tmux-member is
+ * installed, and an admin restarts one member — or every idle outdated one,
+ * the working member left out — only with their own password typed; an
+ * analyst sees no restart control.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { MemberTmux } from "../../../lib/api";
+
+const users = vi.hoisted(() => ({
+  tmux: vi.fn(),
+  tmuxRestart: vi.fn(),
+  tmuxRestartIdle: vi.fn(),
+}));
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, api: { users } };
+});
+vi.mock("../../../lib/toast", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+import { MemberTmuxCard } from "../MemberTmuxCard";
+
+const DATA: MemberTmux = {
+  available: true,
+  installed: "3.8",
+  matched: true,
+  users: [
+    { id: 2, username: "mia", running: true, version: "3.6", sessions: 2, busy: 0, outdated: true },
+    { id: 3, username: "zed", running: true, version: "3.6", sessions: 1, busy: 1, outdated: true },
+    {
+      id: 4,
+      username: "ann",
+      running: true,
+      version: "3.8",
+      sessions: 3,
+      busy: 0,
+      outdated: false,
+    },
+    { id: 5, username: "bob", running: false, busy: 0, outdated: false },
+  ],
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  users.tmux.mockResolvedValue(DATA);
+});
+
+describe("MemberTmuxCard", () => {
+  it("renders nothing without one Linux user per account", async () => {
+    users.tmux.mockResolvedValue({ available: false, users: [] });
+    const { container } = render(<MemberTmuxCard isAdmin />);
+    await waitFor(() => expect(users.tmux).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("lists running servers and marks the ones older than the installed tmux", async () => {
+    render(<MemberTmuxCard isAdmin={false} />);
+    expect(await screen.findByText("mia")).toBeInTheDocument();
+    expect(screen.queryByText("bob")).toBeNull();
+    expect(screen.getAllByText("older than installed")).toHaveLength(2);
+    expect(screen.getByText(/Installed: tmux 3\.8/)).toBeInTheDocument();
+    // An analyst reads only.
+    expect(screen.queryByRole("button", { name: /Restart/ })).toBeNull();
+  });
+
+  it("warns until tmux-member is installed", async () => {
+    users.tmux.mockResolvedValue({ ...DATA, matched: false });
+    render(<MemberTmuxCard isAdmin />);
+    expect(await screen.findByText(/install-system/)).toBeInTheDocument();
+  });
+
+  it("restarts one member only with the admin's password", async () => {
+    users.tmuxRestart.mockResolvedValue({});
+    render(<MemberTmuxCard isAdmin />);
+    await userEvent.click(await screen.findByRole("button", { name: "Restart mia's tmux" }));
+    expect(screen.getByText(/Every pane of mia closes \(2 sessions\)/)).toBeInTheDocument();
+    const go = screen.getByRole("button", { name: "Restart" });
+    expect(go).toBeDisabled();
+    await userEvent.type(screen.getByLabelText("Your password"), "pw");
+    await userEvent.click(go);
+    await waitFor(() => expect(users.tmuxRestart).toHaveBeenCalledWith(2, "pw"));
+  });
+
+  it("restarts every idle outdated member at once, the working one left out", async () => {
+    users.tmuxRestartIdle.mockResolvedValue({ restarted: ["mia"], skipped: ["zed"], failed: [] });
+    render(<MemberTmuxCard isAdmin />);
+    await userEvent.click(await screen.findByRole("button", { name: "Restart 1 idle member" }));
+    expect(screen.getByText(/no agent working: mia\./)).toBeInTheDocument();
+    await userEvent.type(screen.getByLabelText("Your password"), "pw");
+    await userEvent.click(screen.getByRole("button", { name: "Restart" }));
+    await waitFor(() => expect(users.tmuxRestartIdle).toHaveBeenCalledWith("pw"));
+  });
+});

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

@@ -0,0 +1,174 @@
+/**
+ * @file UserEditDialog.test.tsx
+ * @description The admin's account editor: Save stays off until something
+ * changed AND the admin typed their own password; one PATCH carries only the
+ * changed fields (profile, role, disable, workspace add/remove, sign-out); an
+ * admin editing their own row cannot touch role or state; Generate fills a
+ * 16-character password.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ServerUserUsage } from "../../../lib/api";
+
+const users = vi.hoisted(() => ({ get: vi.fn(), update: vi.fn(), remove: vi.fn() }));
+const confirmDialog = vi.hoisted(() => vi.fn());
+vi.mock("../../../lib/confirm", () => ({ confirmDialog }));
+const lanes = vi.hoisted(() => ({ list: vi.fn() }));
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, api: { users, lanes } };
+});
+
+import { UserEditDialog, generatePassword } from "../UserEditDialog";
+
+const usage = { cost: 0, tokens: 0 };
+const mia: ServerUserUsage = {
+  id: 2,
+  username: "mia",
+  role: "developer",
+  disabled: false,
+  displayName: null,
+  email: null,
+  createdAt: "2026-10-01T00:00:00.000Z",
+  workspaces: 1,
+  sessions: 3,
+  last7d: usage,
+  last30d: usage,
+  logins: 2,
+  lastLoginAt: null,
+};
+
+function open(user = mia, self = false) {
+  const onDone = vi.fn();
+  const onClose = vi.fn();
+  render(
+    <UserEditDialog user={user} self={self} users={[mia]} onClose={onClose} onDone={onDone} />
+  );
+  return { onDone, onClose };
+}
+
+const save = () => screen.getByRole("button", { name: "Save" });
+
+beforeEach(() => {
+  users.get.mockReset().mockResolvedValue({
+    user: mia,
+    workspaces: [{ id: 5, title: "api", cwd: "/w/api" }],
+  });
+  users.update.mockReset().mockResolvedValue({ user: mia });
+  lanes.list.mockReset().mockResolvedValue({
+    lanes: [
+      { id: 5, title: "api", cwd: "/w/api", owner_id: 2 },
+      { id: 7, title: "web", cwd: "/w/web", owner_id: null },
+    ],
+  });
+});
+
+describe("UserEditDialog", () => {
+  it("needs a change and the admin's own password before Save", async () => {
+    const ue = userEvent.setup();
+    open();
+    await screen.findByText("api");
+    expect(save().hasAttribute("disabled")).toBe(true);
+    await ue.type(screen.getByLabelText("Your password"), "boss-pass");
+    expect(save().hasAttribute("disabled")).toBe(true); // nothing changed yet
+    await ue.type(screen.getByLabelText("Display name"), "Mia");
+    expect(save().hasAttribute("disabled")).toBe(false);
+  });
+
+  it("sends one PATCH with only what changed", async () => {
+    const ue = userEvent.setup();
+    const { onDone } = open();
+    await screen.findByText("api");
+    await ue.type(screen.getByLabelText("Email"), "mia@x.vn");
+    await ue.selectOptions(screen.getByLabelText("Role"), "analyst");
+    await ue.click(screen.getByRole("switch", { name: "Active" }));
+    await ue.click(screen.getByRole("button", { name: "Remove api" }));
+    await ue.selectOptions(screen.getByLabelText("Add workspace"), "7");
+    await ue.click(screen.getByRole("button", { name: "Add workspace" }));
+    await ue.click(screen.getByRole("checkbox", { name: "Sign out everywhere" }));
+    await ue.type(screen.getByLabelText("Your password"), "boss-pass");
+    await ue.click(save());
+    await waitFor(() =>
+      expect(users.update).toHaveBeenCalledWith(
+        2,
+        {
+          email: "mia@x.vn",
+          role: "analyst",
+          disabled: true,
+          addWorkspaces: [7],
+          removeWorkspaces: [5],
+          signOut: true,
+        },
+        "boss-pass"
+      )
+    );
+    expect(onDone).toHaveBeenCalledWith("mia updated");
+  });
+
+  it("never lets an admin change their own role or disable themselves", async () => {
+    open({ ...mia, role: "admin" }, true);
+    await screen.findByText("api");
+    expect(screen.getByLabelText("Role").hasAttribute("disabled")).toBe(true);
+    expect(screen.getByRole("switch", { name: "Active" }).hasAttribute("disabled")).toBe(true);
+  });
+
+  it("accepts a short new password: there is no minimum length", async () => {
+    const ue = userEvent.setup();
+    open();
+    await screen.findByText("api");
+    await ue.type(screen.getByLabelText("New password"), "abc");
+    await ue.type(screen.getByLabelText("Your password"), "boss-pass");
+    expect(save().hasAttribute("disabled")).toBe(false);
+  });
+
+  it("deletes a user after the admin's password and a red confirm that says what goes", async () => {
+    users.remove.mockReset().mockResolvedValue({ user: mia });
+    confirmDialog.mockReset().mockResolvedValue(true);
+    const ue = userEvent.setup();
+    const { onDone } = open();
+    await screen.findByText("api");
+    // No password yet: asked for it, nothing sent.
+    await ue.click(screen.getByRole("button", { name: "Delete user" }));
+    expect(await screen.findByRole("alert")).toHaveTextContent("Enter your own password");
+    expect(users.remove).not.toHaveBeenCalled();
+    await ue.type(screen.getByLabelText("Your password"), "boss-pass");
+    await ue.click(screen.getByRole("button", { name: "Delete user" }));
+    expect(confirmDialog).toHaveBeenCalledWith(
+      expect.objectContaining({
+        destructive: true,
+        message: expect.stringContaining("/srv/agenthub/users/mia"),
+      })
+    );
+    await waitFor(() => expect(users.remove).toHaveBeenCalledWith(2, "boss-pass"));
+    expect(onDone).toHaveBeenCalled();
+  });
+
+  it("sends nothing when the confirm is cancelled, and offers no delete for yourself", async () => {
+    users.remove.mockReset();
+    confirmDialog.mockReset().mockResolvedValue(false);
+    const ue = userEvent.setup();
+    open();
+    await screen.findByText("api");
+    await ue.type(screen.getByLabelText("Your password"), "boss-pass");
+    await ue.click(screen.getByRole("button", { name: "Delete user" }));
+    expect(users.remove).not.toHaveBeenCalled();
+  });
+
+  it("has no Delete button on your own account", async () => {
+    open(mia, true);
+    await screen.findByText("api");
+    expect(screen.queryByRole("button", { name: "Delete user" })).toBeNull();
+  });
+
+  it("generates a 16-character password", async () => {
+    expect(generatePassword()).toHaveLength(16);
+    const ue = userEvent.setup();
+    open();
+    await screen.findByText("api");
+    await ue.click(screen.getByRole("button", { name: /Generate/ }));
+    expect((screen.getByLabelText("New password") as HTMLInputElement).value).toHaveLength(16);
+  });
+});

client/src/hooks/__tests__/useOnScreen.test.tsx

@@ -0,0 +1,56 @@
+/**
+ * @file useOnScreen.test.tsx
+ * @description useOnScreen follows the IntersectionObserver: on screen by
+ * default (and always without an observer, as in jsdom), off once the element
+ * stops intersecting, and `onShow` runs only on the way back on screen.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { act, render } from "@testing-library/react";
+import { useRef } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useOnScreen, isShown } from "../useOnScreen";
+
+const original = globalThis.IntersectionObserver;
+afterEach(() => {
+  globalThis.IntersectionObserver = original;
+});
+
+let seen: { current: boolean | null } = { current: null };
+function Probe({ onShow }: { onShow?: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+  seen = useOnScreen(ref, onShow);
+  return <div ref={ref} />;
+}
+
+describe("useOnScreen", () => {
+  it("counts as on screen without an IntersectionObserver", () => {
+    // @ts-expect-error removed for the test
+    delete globalThis.IntersectionObserver;
+    render(<Probe />);
+    expect(seen.current).toBe(true);
+    expect(isShown(seen as never)).toBe(true);
+  });
+
+  it("follows the observer and calls onShow only when it comes back", () => {
+    let fire: (v: boolean) => void = () => {};
+    // @ts-expect-error test stub
+    globalThis.IntersectionObserver = class {
+      constructor(cb: (e: { isIntersecting: boolean }[]) => void) {
+        fire = (v) => cb([{ isIntersecting: v }]);
+      }
+      observe() {}
+      disconnect() {}
+    };
+    const onShow = vi.fn();
+    render(<Probe onShow={onShow} />);
+    act(() => fire(true));
+    expect(onShow).not.toHaveBeenCalled();
+    act(() => fire(false));
+    expect(seen.current).toBe(false);
+    expect(isShown(seen as never)).toBe(false);
+    act(() => fire(true));
+    expect(seen.current).toBe(true);
+    expect(onShow).toHaveBeenCalledTimes(1);
+  });
+});

client/src/hooks/useOnScreen.ts

@@ -0,0 +1,42 @@
+/**
+ * @file useOnScreen — whether an element is laid out on screen right now, for
+ * work that only matters while it can be seen. The Workspace keeps panes of
+ * other workspaces and other tabs MOUNTED but `display:none` (unmounting would
+ * drop a live terminal), so `document.visibilityState` alone keeps every hidden
+ * pane polling and re-rendering as if it were shown. An IntersectionObserver
+ * reports a `display:none` subtree as not intersecting; `onShow` runs when the
+ * element comes back, so a caller can catch up once instead of all the time.
+ * Without IntersectionObserver (jsdom, very old browsers) the element counts
+ * as always on screen — the behaviour before this hook existed.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, type RefObject } from "react";
+
+export function useOnScreen(
+  ref: RefObject<Element | null>,
+  onShow?: () => void
+): RefObject<boolean> {
+  const visible = useRef(true);
+  const showRef = useRef(onShow);
+  showRef.current = onShow;
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver((entries) => {
+      const now = entries[entries.length - 1]!.isIntersecting;
+      const was = visible.current;
+      visible.current = now;
+      if (now && !was) showRef.current?.();
+    });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [ref]);
+
+  return visible;
+}
+
+/** True while the page is shown AND the element is on screen. */
+export const isShown = (onScreen: RefObject<boolean>) =>
+  document.visibilityState === "visible" && onScreen.current !== false;

client/src/i18n/index.ts

@@ -116,6 +116,7 @@ export const i18nReady = i18n
       "lanes",
       "users",
       "onboarding",
+      "artifacts",
     ],
     defaultNS: "common",
     interpolation: { escapeValue: false },

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

@@ -0,0 +1,112 @@
+{
+  "title": "Artifacts",
+  "subtitle": "What your agents produced — claude.ai pages, files, skills and plugins — kept in one place.",
+  "subtitleServer": "What your agents produced — claude.ai pages, files, skills and plugins. Share one and it appears in the Hub for everyone.",
+  "tab.mine": "My library",
+  "tab.hub": "Hub",
+  "kind.all": "All",
+  "kind.page": "Pages",
+  "kind.file": "Files",
+  "kind.skill": "Skills",
+  "kind.plugin": "Plugins",
+  "kindOne.page": "Page",
+  "kindOne.file": "File",
+  "kindOne.skill": "Skill",
+  "kindOne.plugin": "Plugin",
+  "search": "Search artifacts…",
+  "add": "Add",
+  "add.page": "claude.ai link",
+  "add.file": "File from a workspace",
+  "add.skill": "Skill",
+  "add.plugin": "Plugin",
+  "empty.mine": "Nothing here yet. Pages your sessions publish appear on their own; add files, skills and plugins with Add.",
+  "empty.hub": "Nobody has shared anything yet.",
+  "loading": "Loading…",
+  "by": "by {{name}}",
+  "shared": "Shared",
+  "share": "Share",
+  "unshare": "Unshare",
+  "shareDone": "Shared to the Hub",
+  "unshareDone": "Removed from the Hub",
+  "open": "Open",
+  "preview": "Preview",
+  "download": "Download",
+  "install": "Install",
+  "installs": "{{count}} installs",
+  "installed": "Installed to {{path}}",
+  "installedPlugin": "Installed {{name}} — start a new session (or /reload-plugins) to use it",
+  "rename": "Edit",
+  "delete": "Delete",
+  "deleteTitle": "Delete “{{title}}”?",
+  "deleteBody": "It is removed from your library and the Hub. Anything already installed from it stays installed.",
+  "deleteConfirm": "Delete",
+  "installTitle": "Install “{{title}}”?",
+  "installSkillBody": "These files are written to your own ~/.claude/skills/{{name}}/. A skill can carry scripts your agent will run — only install what you trust:",
+  "installPluginBody": "Runs, as your account: claude plugin marketplace add {{market}} and claude plugin install {{name}} --scope user. Only install what you trust.",
+  "installConfirm": "Install",
+  "replaceTitle": "Replace your skill “{{name}}”?",
+  "replaceBody": "You already have a skill with that name. Yours is moved to ~/.claude/agenthub-replaced-skills/, not deleted.",
+  "replaceConfirm": "Replace",
+  "installsOff": "Installs are off",
+  "installsSwitch": "Allow installing from the Hub",
+  "installsSwitchHint": "Off: nobody can install a shared skill or plugin into their account.",
+  "form.url": "claude.ai link",
+  "form.title": "Title (optional)",
+  "form.description": "Description (optional)",
+  "form.workspace": "Workspace",
+  "form.pickWorkspace": "Pick a workspace…",
+  "form.noCandidates": "No documents written by this workspace's sessions yet.",
+  "form.pinned": "Pinned",
+  "form.pin": "Pin",
+  "form.missing": "gone",
+  "form.skillFrom": "Skill",
+  "form.fromUser": "mine",
+  "form.fromWorkspace": "workspace",
+  "form.noSkills": "No skills found in your ~/.claude/skills or this workspace's .claude/skills.",
+  "form.pluginKey": "Plugin (name@marketplace)",
+  "form.market": "Marketplace (owner/repo or git URL)",
+  "form.save": "Add",
+  "form.cancel": "Cancel",
+  "added": "Added",
+  "files": "{{count}} files",
+  "close": "Close",
+  "fromSession": "From a session",
+  "form.saveEdit": "Save",
+  "skill.tab.upload": "Upload files",
+  "skill.tab.write": "Write new",
+  "skill.tab.existing": "From my skills",
+  "skill.name": "Skill name",
+  "skill.slugHint": "Installs as ~/.claude/skills/{{slug}}/ and runs as /{{slug}}",
+  "skill.slugBad": "Use letters, digits, '.', '_' or '-'",
+  "skill.description": "Description — when Claude should use this skill",
+  "skill.descriptionHint": "e.g. Use when writing release notes from the git log",
+  "skill.content": "Instructions (the body of SKILL.md)",
+  "skill.contentHint": "Write the steps Claude should follow. You can also paste a whole SKILL.md, frontmatter included.",
+  "skill.dropHint": "Drop a SKILL.md, any Markdown file, a skill folder, several files or a .zip/.skill here",
+  "skill.pickFiles": "Choose files",
+  "skill.pickFolder": "Choose folder",
+  "skill.clear": "Clear",
+  "skill.uploading": "Uploading…",
+  "skill.shape.none": "Nothing to upload",
+  "skill.shape.single-md": "This Markdown file becomes the skill's SKILL.md",
+  "skill.shape.archive": "An archive — it is unpacked; each folder with a SKILL.md becomes a skill",
+  "skill.shape.one": "One skill folder",
+  "skill.shape.many": "{{count}} skills — each is added on its own, named by its folder",
+  "skill.shape.no-skill-md": "No SKILL.md here — add one, or upload a single Markdown file",
+  "skill.manyHint": "Several skills: each keeps its own folder name and the description in its SKILL.md.",
+  "skill.addedMany": "Added {{count}} skills",
+  "plugin.link": "Marketplace link",
+  "plugin.linkHint": "A git repository with .claude-plugin/marketplace.json (https link, the forge's web link, or owner/repo for GitHub), or a link to a marketplace.json.",
+  "plugin.read": "Read plugins",
+  "plugin.reading": "Reading…",
+  "plugin.none": "This marketplace lists no plugins.",
+  "plugin.all": "Select all",
+  "plugin.have": "already added",
+  "plugin.addPicked": "Add {{count}} plugin(s)",
+  "plugin.addedMany": "Added {{count}} plugin(s)",
+  "plugin.manual": "Type name@marketplace by hand (ssh link, private repository…)",
+  "file.fromComputer": "From your computer (≤ 25 MB)",
+  "file.upload": "Upload",
+  "file.tooBig": "The file is larger than 25 MB.",
+  "file.fromWorkspace": "Or pin a document a workspace's sessions wrote"
+}

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

@@ -31,10 +31,8 @@
   "addLaneSetupTitle": "Setup",
   "addLaneTitleLabel": "Title",
   "addLaneTitlePlaceholder": "Optional",
-  "addLaneToolDefaultBadge": "Default",
   "addLaneNoTools": "No AI tool is installed and enabled.",
   "addLaneNoToolsLink": "Open Settings → AI Tools",
-  "addLaneToolHint": "Which CLI drives this workspace. Cannot be changed later.",
   "addLaneWorktreeDetached": "(detached)",
   "addLaneWorktreesMore": "+{{count}} more",
   "addLaneWorktreesTitle": "Worktrees of this repo ({{count}})",
@@ -42,6 +40,26 @@
   "browse.empty": "This folder is empty.",
   "browse.fileTitle": "Browse for a file",
   "browse.select": "Select this folder",
+  "browse.back": "Back (Alt+←)",
+  "browse.create": "Create",
+  "browse.editPath": "Type a path (Ctrl+L)",
+  "browse.filter": "Filter…",
+  "browse.forward": "Forward (Alt+→)",
+  "browse.hint": "Double-click or Enter opens · Backspace goes up · type to jump",
+  "browse.home": "Home",
+  "browse.modified": "Modified",
+  "browse.name": "Name",
+  "browse.newFolder": "New folder",
+  "browse.newFolderName": "Folder name",
+  "browse.noMatch": "Nothing matches the filter.",
+  "browse.places": "Places",
+  "browse.recent": "Recent",
+  "browse.selectFile": "Select file",
+  "browse.showHidden": "Show hidden",
+  "browse.hostFolder": "Server folder",
+  "browse.hostFolderHint": "Browse the server account's own folder ({{path}}). A workspace there runs as the shared server account, which every admin uses — not as your own.",
+  "browse.up": "Up one level (Backspace)",
+  "browse.workspaces": "Workspaces",
   "browse.title": "Browse for a folder",
   "changes.back": "All files",
   "changes.bin": "bin",
@@ -64,6 +82,12 @@
   "changes.expand": "Show the changes panel",
   "changes.expandAll": "Expand every file",
   "changes.expandAllFolders": "Expand all folders",
+  "changes.download": "Download",
+  "changes.upload": "Upload files to the workspace root",
+  "changes.uploadHere": "Upload files here…",
+  "changes.uploaded_one": "Uploaded {{count}} file to {{dir}}",
+  "changes.uploaded_other": "Uploaded {{count}} files to {{dir}}",
+  "changes.uploadFailed": "Could not upload {{name}}: {{message}}",
   "changes.expandContext": "Show more surrounding lines",
   "changes.expandFile": "Expand {{path}}",
   "changes.fileGone": "That file no longer has changes in this range.",
@@ -166,6 +190,7 @@
   "gitBar.pull": "Pull",
   "gitBar.pullHint": "git pull --ff-only — refuses instead of merging when the branch has diverged",
   "gitBar.push": "Push",
+  "gitBar.nothingToPush": "Nothing to push — {{upstream}} already has every commit.",
   "gitBar.pushHint": "git push -u origin HEAD",
   "gitBar.switch": "Branch",
   "gitBar.switchApply": "Switch branch",
@@ -180,6 +205,21 @@
   "mode.repoHint": "Adopt this directory as a workspace, as-is — no worktree, no new branch.",
   "mode.worktree": "Worktree",
   "mode.worktreeHint": "Provision a new git worktree + branch from a source repo.",
+  "mode.clone": "Clone",
+  "mode.cloneHint": "Clone a repository over HTTPS or SSH into one of your folders, as a new workspace.",
+  "clone.urlLabel": "Repository URL",
+  "clone.urlHint": "https://host/owner/repo.git, git@host:owner/repo.git or ssh://… — SSH uses your own key (Settings → Git).",
+  "clone.parentLabel": "Clone into folder",
+  "clone.parentHint": "The repository is cloned to {{path}}",
+  "clone.nameLabel": "Folder name",
+  "clone.cloning": "Cloning…",
+  "clone.loginNeeded": "{{host}} needs a login: your username and a password or access token.",
+  "clone.loginRejected": "{{host}} rejected that username or token.",
+  "clone.username": "Username",
+  "clone.token": "Password or access token",
+  "clone.remember": "Remember this login for my account",
+  "clone.sshRefused": "{{host}} refused the SSH login. Add your public key to that host, or make one in Settings → Git.",
+  "clone.sshSettings": "Open Settings → Git",
   "moreActions": "More actions",
   "pipelinePicker.label": "Pipeline template",
   "pipelinePicker.stageMismatch": "Stage \"{{stage}}\" matches no node in \"{{pipeline}}\" — declare one of: {{nodes}}",
@@ -248,6 +288,7 @@
   "changes.mergeAbortConfirm": "Click again to abort the {{op}}",
   "changes.discardShortConfirm": "Discard?",
   "changes.amend": "Amend",
+  "changes.amendPushed": "The last commit is already pushed; amending it would rewrite shared history. Revert it from History instead.",
   "changes.amendHint": "Fold the ticked files into the last commit (only before it is pushed). Nothing ticked rewords it; leave the message empty to keep the old one.",
   "changes.amendPlaceholder": "New message (empty = keep the old one)",
   "changes.historyOf": "History of branch",
@@ -324,6 +365,9 @@
   "tree.splitHint": "Live pane — Ctrl/Cmd+click opens it in a split beside the focused pane",
   "tree.renameSession": "Rename session",
   "tree.archiveSession": "Archive — hide from this workspace (deletes nothing)",
+  "tree.pinSession": "Pin to the top of this workspace",
+  "tree.unpinSession": "Unpin",
+  "tree.pinned": "Pinned",
   "tree.worktreeSession": "In its own worktree: .claude/worktrees/{{name}}",
   "tree.archiveWorktreeTitle": "Archive and remove its worktree?",
   "tree.archiveWorktreeBody": "Like Claude Desktop, archiving removes the session's worktree .claude/worktrees/{{name}} and its branch. Git refuses if it holds uncommitted changes, and a branch with commits merged nowhere is kept — nothing unsaved is lost.",
@@ -371,6 +415,12 @@
   "home.addFolder": "Add folder",
   "home.folderPath": "Absolute folder path",
   "home.add": "Add",
+  "home.cloneFolders": "Or clone repositories",
+  "home.cloneHint": "One URL per line — each is cloned into {{path}} with your own git login (Settings → Git) and added here.",
+  "home.clonePlaceholder": "https://host/owner/repo.git\ngit@host:owner/other.git",
+  "home.cloneRun": "Clone",
+  "home.cloneRetry": "Retry the failed ones",
+  "home.cloneDone": "Added",
   "home.suggested": "Untracked worktrees",
   "home.remove": "Remove",
   "home.missing": "missing",
@@ -380,13 +430,19 @@
   "tabs.new": "New tab",
   "tabs.newTerminal": "New terminal",
   "tabs.terminal": "Terminal",
-  "tabs.close": "Close tab (stops its session)",
+  "tabs.close": "Close tab (stops and archives its session)",
   "tabs.full": "All 10 sessions are in use — stop one first",
   "tabs.agentSettings": "Agent settings…",
   "tabs.settings": "Settings",
   "tabs.closeSettings": "Close Settings",
   "tabs.splitHint": "Ctrl/Cmd+click: open in a split · drag onto a pane to place it",
-  "panes.drag": "Drag to move this pane — onto another pane's edge to split there, onto its middle to swap",
+  "panes.drag": "Drag to move this pane — onto another pane's edge to split there, onto its middle to swap; hold it over another tab to open that tab",
+  "panes.drop.left": "Place on the left",
+  "panes.drop.right": "Place on the right",
+  "panes.drop.top": "Place on top",
+  "panes.drop.bottom": "Place below",
+  "panes.drop.swap": "Swap places",
+  "panes.drop.replace": "Show here — this pane moves to its own tab",
   "panes.pick": "Show another session in this pane",
   "panes.empty": "No session",
   "panes.split.right": "Split right",
@@ -403,11 +459,14 @@
   "sessionMenu.details": "Session details",
   "sessionMenu.copyId": "Copy session ID",
   "sessionMenu.archive": "Archive",
+  "sessionMenu.pin": "Pin",
+  "sessionMenu.unpin": "Unpin",
   "panes.show": "Show {{name}} here",
   "panes.splitNew.right": "Split right with a new terminal",
   "panes.splitNew.bottom": "Split down with a new terminal",
   "panes.closeShort": "Move to own tab",
-  "panes.stop": "Stop session",
+  "panes.stop": "Stop and archive session",
+  "panes.sleep": "Sleep session (stop, keep to resume later)",
   "changes.copyPath": "Copy relative path",
   "changes.viewCommit": "View commit",
   "changes.copySha": "Copy commit SHA",
@@ -421,8 +480,13 @@
   "tabs.renameHint": "Double-click to rename",
   "tabs.stopTitle": "Stop “{{name}}”?",
   "tabs.stopGroupTitle": "Stop the {{count}} sessions in this tab?",
-  "tabs.stopBody": "Closing the tab stops its session, even mid-turn. It can be resumed later from Recents.",
+  "tabs.stopBody": "Stopping ends the session, even mid-turn, and archives it: it leaves this workspace's list (Unarchive brings it back). To keep it for later, use Sleep instead.",
   "tabs.stopConfirm": "Stop session",
+  "tabs.sleep": "Sleep (stop, keep to resume later)",
+  "tabs.sleepTitle": "Sleep “{{name}}”?",
+  "tabs.sleepGroupTitle": "Sleep the {{count}} sessions in this tab?",
+  "tabs.sleepBody": "Sleep stops the session, even mid-turn, but keeps it in this workspace's list. Open it and send a message to resume it.",
+  "tabs.sleepConfirm": "Sleep",
   "changes.loadMore": "Load more commits",
   "changes.commentPasted": "Pasted into tab {{tab}} — press Enter there to send it",
   "changes.splitter": "Resize the changes panel",
@@ -474,5 +538,91 @@
   "changes.historyWholeBranch": "Whole branch",
   "changes.annotate": "Annotate",
   "changes.noBlame": "Nothing to annotate: this file has no committed history yet",
-  "changes.notCommitted": "Not committed yet"
+  "changes.notCommitted": "Not committed yet",
+  "fx.title": "Files",
+  "fx.workspace": "Workspace",
+  "fx.files": "Files",
+  "fx.trash": "Trash",
+  "fx.close": "Close",
+  "fx.up": "Parent folder",
+  "fx.refresh": "Refresh",
+  "fx.newFolder": "New folder",
+  "fx.newFile": "New file",
+  "fx.uploadFiles": "Upload files",
+  "fx.uploadFolder": "Upload a folder",
+  "fx.download": "Download",
+  "fx.downloadZip": "Download as zip",
+  "fx.rename": "Rename",
+  "fx.copy": "Copy",
+  "fx.cut": "Cut",
+  "fx.paste": "Paste",
+  "fx.pasteInto": "Paste into this folder",
+  "fx.pasteFrom": "Paste {{count}} item(s) from {{workspace}}",
+  "fx.delete": "Move to Trash",
+  "fx.open": "Open",
+  "fx.location": "Location",
+  "fx.name": "Name",
+  "fx.size": "Size",
+  "fx.modified": "Modified",
+  "fx.empty": "This folder is empty — drop files here to upload.",
+  "fx.itemsCount": "{{count}} item(s)",
+  "fx.selectedCount": "{{count}} selected",
+  "fx.dropHint": "Drag files or folders here to upload · drag onto a folder to move (Ctrl: copy)",
+  "fx.uploading": "Uploading {{done}}/{{total}}…",
+  "fx.uploaded": "Uploaded {{count}} file(s).",
+  "fx.uploadFailed": "Could not upload {{name}}: {{message}}",
+  "fx.tooBig": "{{size}} is more than one upload may carry ({{max}}). Upload fewer files at a time.",
+  "fx.trashed": "Moved {{count}} item(s) to the Trash.",
+  "fx.copiedDone": "Copied {{count}} item(s) — open a folder (or another workspace) and Paste.",
+  "fx.cutDone": "Cut {{count}} item(s) — open a folder (or another workspace) and Paste.",
+  "fx.pasted": "Pasted.",
+  "fx.crossOnlyWorkspace": "These items can only be pasted where they came from (a session worktree, an extra folder, or between two homes).",
+  "fx.needsUpgrade": "This needs the updated server helper — ask an admin to run `sudo agenthub server install-system` once.",
+  "fx.conflictTitle": "Already there",
+  "fx.conflictBody": "This name is taken in the destination: {{names}}",
+  "fx.conflictAll": "Do this for every remaining file",
+  "fx.cancel": "Cancel",
+  "fx.skip": "Skip",
+  "fx.keepBoth": "Keep both",
+  "fx.replace": "Replace",
+  "fx.trashHint": "Deleted files and folders, restorable for 7 days.",
+  "fx.emptyTrash": "Empty Trash",
+  "fx.restore": "Restore",
+  "fx.purge": "Delete forever",
+  "fx.restored": "Restored.",
+  "fx.trashEmpty": "The Trash is empty.",
+  "changes.openExplorer": "Open File Explorer — manage, upload and download files",
+  "changes.openInExplorer": "Open in File Explorer",
+  "fx.places": "Workspaces",
+  "fx.back": "Back",
+  "fx.forward": "Forward",
+  "fx.search": "Search (Ctrl+F)",
+  "fx.searchHere": "Search this folder…",
+  "fx.viewAs": "View as",
+  "fx.gridView": "Icons",
+  "fx.listView": "List",
+  "fx.new": "New",
+  "fx.upload": "Upload",
+  "fx.more": "More",
+  "fx.selectAll": "Select all",
+  "fx.showHidden": "Show hidden files (Ctrl+H)",
+  "fx.untitledFolder": "New folder",
+  "fx.untitledFile": "untitled.txt",
+  "fx.copyPath": "Copy path",
+  "fx.clearSelection": "Clear selection",
+  "fx.noMatch": "Nothing here matches.",
+  "fx.loading": "Loading…",
+  "fx.dropHere": "Drop to upload into {{folder}}",
+  "fx.nameField": "Name",
+  "fx.from": "From",
+  "fx.deletedAt": "Deleted",
+  "fx.unavailable": "The file manager is not available on this dashboard yet — it needs a restart after the update.",
+  "fx.noWorkspace": "There is no workspace yet. Add one first, then its files show here.",
+  "fx.myHome": "Home",
+  "fx.userHomes": "Users' homes",
+  "fx.readOnlyHome": "Another user's home — view and download only",
+  "fx.readOnly": "Read-only",
+  "fx.readOnlyHint": "This is another user's home: you can view, copy and download, not change it.",
+  "fx.homeEmpty": "Nothing in your home yet — its hidden files (.bashrc, .claude…) are not shown here. Your workspaces are on the left.",
+  "tmuxUpgrade": "Upgrade tmux: {{advice}}"
 }

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

@@ -1,5 +1,6 @@
 {
   "activityFeed": "Activity Feed",
+  "artifacts": "Artifacts",
   "agents": "Agents",
   "analytics": "Analytics",
   "avg": "avg",
@@ -85,5 +86,6 @@
   "closeMenu": "Close menu",
   "sidebar": "Sidebar",
   "now": "now",
-  "users": "Users"
+  "users": "Users",
+  "files": "Files"
 }

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

@@ -65,6 +65,7 @@
   },
   "drop": {
     "hint": "Drop files or images to attach",
+    "paste": "Drop to paste into the terminal",
     "uploading": "Uploading…",
     "failed": "Could not attach the file",
     "remove": "Remove attachment",

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

@@ -37,29 +37,198 @@
     "chooseDesc": "Featured pets come from codex-pets.net and are downloaded into this install the first time you pick one. Your choice and size are saved to your account.",
     "uploadHint": "An image (PNG, JPEG, GIF, WebP — no SVG) is shown still; a .codex-pet.zip (pet.json + a 1536×1872 spritesheet.webp) is animated by mood.",
     "panel": {
-      "label": "Sagi companion",
+      "label": "{{name}} companion",
       "live": "Live",
       "offline": "Offline",
-      "close": "Close Sagi",
+      "close": "Close {{name}}",
       "statLive": "live",
       "statWaiting": "waiting",
       "statErrored": "errored",
-      "runClaude": "Run Claude",
-      "activity": "Activity",
-      "sessions": "Sessions",
-      "errored": "Errored",
       "mute": "Mute",
       "unmute": "Unmute",
       "clearAlerts": "Clear alerts",
-      "askPlaceholder": "Ask Sagi… (e.g. any errors?)",
-      "ask": "Ask Sagi",
-      "send": "Send"
+      "askPlaceholder": "Ask {{name}}… (e.g. any errors?)",
+      "ask": "Ask {{name}}",
+      "send": "Send",
+      "rename": "Click to rename {{name}}",
+      "renameLabel": "Pet name",
+      "renameHint": "Enter to save · empty = default name",
+      "pat": "Pat {{name}}",
+      "attention": "Needs you",
+      "attentionError": "errored",
+      "attentionWaiting": "waiting on you",
+      "attentionMore": "+{{count}} more in Sessions"
     },
     "bubbleDismiss": "Dismiss",
-    "open": "Open Sagi companion",
-    "closeAvatar": "Close Sagi",
-    "avatarTitle": "Sagi — Ctrl/⌘+B · drag or arrow keys to move · right-click for pets",
-    "startFailed": "Couldn't start that session: {{error}}"
+    "open": "Open {{name}} companion",
+    "closeAvatar": "Close {{name}}",
+    "avatarTitle": "{{name}} — Ctrl/⌘+B · drag or arrow keys to move · stroke to pat · right-click for pets",
+    "startFailed": "Couldn't start that session: {{error}}",
+    "bubbleOpen": "Open",
+    "bubbleMore": "{{list}} +{{count}} more",
+    "notify": {
+      "session_done_one": "{{count}} session finished ✨",
+      "session_done_other": "{{count}} sessions finished ✨",
+      "session_start_one": "{{count}} new session started 👀",
+      "session_start_other": "{{count}} new sessions started 👀",
+      "subagent_spawn_one": "{{count}} subagent joined in 🤝",
+      "subagent_spawn_other": "{{count}} subagents joined in 🤝",
+      "waiting_one": "{{count}} session is waiting on you ⏳",
+      "waiting_other": "{{count}} sessions are waiting on you ⏳",
+      "error_one": "{{count}} error just popped up 😿",
+      "error_other": "{{count}} errors just popped up 😿",
+      "run_done_one": "{{count}} run finished 🐾",
+      "run_done_other": "{{count}} runs finished 🐾"
+    },
+    "greet": {
+      "morning": [
+        "good morning! ☀️",
+        "morning! coffee first? ☕",
+        "rise and shine 🌤️"
+      ],
+      "afternoon": [
+        "good afternoon! 🐾",
+        "hey, welcome back 😺",
+        "afternoon! ready when you are ✨"
+      ],
+      "evening": [
+        "good evening! 🌆",
+        "evening shift? I'm in 😼",
+        "hey there, night owl-to-be 🌙"
+      ],
+      "night": [
+        "burning the midnight oil? 🌙",
+        "late one, huh? I'll keep watch 🦉",
+        "still up? don't forget to rest 💤"
+      ],
+      "summary_one": "{{count}} session live",
+      "summary_other": "{{count}} sessions live",
+      "summaryWaiting": "{{count}} waiting on you",
+      "summaryErrors": "{{count}} errored"
+    },
+    "pat": [
+      "purr… 💜",
+      "hehe, that tickles 😸",
+      "*happy wiggle* ✨",
+      "more pats please 🐾",
+      "best human 😻"
+    ],
+    "intent": {
+      "empty": "ask me about your sessions - what's running, any errors, or a quick status.",
+      "help": "I'm {{name}} - I watch your sessions. Try \"what's running\", \"any errors\", \"what's waiting\" or \"status\". Anything else, I'll hand to Claude.",
+      "whoami": "I'm {{name}}, your session-watching buddy 🐾 Right-click me to change my look, or click my name in the panel to rename me.",
+      "hello": "hi there! 😺 {{summary}}.",
+      "thanks": [
+        "anytime! 💜",
+        "happy to help 😸",
+        "you got it 🐾"
+      ],
+      "errors_one": "{{count}} session errored{{list}} - open the panel to jump to it.",
+      "errors_other": "{{count}} sessions errored{{list}} - open the panel to jump to them.",
+      "errorsNone": "no errors - all clean 🐾",
+      "waiting_one": "{{count}} session waiting on you{{list}} 👀",
+      "waiting_other": "{{count}} sessions waiting on you{{list}} 👀",
+      "waitingNone": "nothing's waiting on you right now 🐾",
+      "live_one": "{{count}} session live right now 🐾{{tail}}",
+      "live_other": "{{count}} sessions live right now 🐾{{tail}}",
+      "liveTail": " ({{count}} waiting on you 👀)",
+      "liveNone": "nothing's running right now - all quiet.",
+      "status": "{{live}} live · {{waiting}} waiting · {{errors}} errored · {{conn}}.",
+      "connected": "connected",
+      "offline": "offline"
+    },
+    "quips": {
+      "session_done": [
+        "a session just wrapped up! 🐾",
+        "a session finished - nice work! ✨",
+        "that session's all done 😺",
+        "clean finish on that one 💜"
+      ],
+      "session_start": [
+        "a new session started! 👀",
+        "a fresh session just landed 🐾",
+        "ooh, a new session to watch 😻",
+        "something new is cooking 🍲"
+      ],
+      "subagent_spawn": [
+        "a subagent just spawned! 🐾",
+        "a little helper joined in 🤝",
+        "a subagent's on the job 🚀",
+        "reinforcements - new subagent! 😺"
+      ],
+      "waiting": [
+        "a session needs your input 👀",
+        "a session is waiting on you ⏳",
+        "a session paused for your reply 💬",
+        "your turn - a session's waiting 🐾"
+      ],
+      "error": [
+        "uh oh, a session hit an error 😿",
+        "something broke - wanna peek? 🙀",
+        "a hook tripped on something ⚠️",
+        "hiss… an error popped up 💢"
+      ],
+      "run_done": [
+        "your run just finished! 🐾",
+        "the run's all wrapped up ✨",
+        "run complete - that's a wrap 😸",
+        "all done with that run 💜"
+      ],
+      "disconnected": [
+        "lost the connection… 😴",
+        "can't reach the server 📡",
+        "no signal - taking a nap 💤"
+      ],
+      "worried": [
+        "that didn't look right 😟",
+        "keeping an eye out 👀",
+        "hmm, something's off 🫣"
+      ],
+      "stuck": [
+        "a session's been quiet a while… 🤔",
+        "is something stuck? ⏳",
+        "still chewing on it… 😾"
+      ],
+      "happy": [
+        "great run! 😻",
+        "love a tidy finish ✨",
+        "purrfect 💜"
+      ],
+      "thinking": [
+        "hmm, let me look… 🤔",
+        "sniffing around… 🐾",
+        "one sec, checking 🔍"
+      ],
+      "watching": [
+        "on the prowl 👀",
+        "watching your sessions 😼",
+        "eyes peeled 🐾"
+      ],
+      "sleeping": [
+        "zzz… 💤",
+        "wake me if something happens 😴",
+        "curled up, all calm 🐈"
+      ],
+      "idle": [
+        "all quiet 😺",
+        "ready when you are 🐾",
+        "just vibing ✨"
+      ]
+    },
+    "chat": {
+      "label": "Chat with {{name}}",
+      "back": "Back",
+      "close": "Close {{name}}",
+      "new": "New chat",
+      "openWorkspace": "Open in workspace",
+      "typing": "typing…",
+      "placeholder": "Ask {{name}} anything…",
+      "emptyTitle": "Hi! I'm {{name}} 🐾",
+      "emptyHint": "Ask me anything — I'll get {{tool}} to answer right here.",
+      "starting": "Starting {{tool}}…",
+      "notStarted": "Waiting for the session to start — if it asks something, open it in the workspace.",
+      "notSent": "Couldn't reach the session's terminal — try again, or open it in the workspace."
+    }
   },
   "pricing": {
     "vendor": {
@@ -626,6 +795,7 @@
     "title": "AI Proxy",
     "description": "For example 9Router, OpenRouter or a self-hosted gateway. Save one here, then pick it for a session in the workspace prompt box.",
     "add": "Add profile",
+    "config9router": "Config 9router",
     "edit": "Edit",
     "remove": "Remove",
     "empty": "No proxy profile saved yet. Native runs against the vendor's own API.",
@@ -722,6 +892,53 @@
     "pet": "Pet",
     "petDescription": "The corner mascot: show it, its size, speech bubbles, and which pet it wears."
   },
+  "gitIdentity": {
+    "authorTitle": "Commit author",
+    "authorName": "Name",
+    "authorEmail": "Email",
+    "authorUnset": "Not set yet: commits from the dashboard and your agents fail until a name and email are saved. Filled in from your account — check and save.",
+    "authorSaved": "Commit author saved.",
+    "title": "Your git identity",
+    "descriptionMember": "Your own SSH key and HTTPS logins, kept in your own home. Add workspace → Clone uses them, and the clone keeps them for its later fetch, pull and push.",
+    "descriptionHost": "The SSH key of the account this AgentHub runs as. Add workspace → Clone uses it, and the clone keeps it for its later fetch, pull and push. HTTPS logins for this account are the Git credentials above.",
+    "sshTitle": "SSH keys",
+    "generate": "Generate key",
+    "replace": "Replace key",
+    "replaceConfirm": "Replace the SSH key? Clones that use the old key stop working until the new public key is added to their host.",
+    "keyMade": "SSH key ready — add its public key to your git host.",
+    "remove": "Delete",
+    "removeKeyConfirm": "Delete this SSH key? Clones that use it can no longer fetch or push.",
+    "publicKey": "Public key",
+    "copy": "Copy public key",
+    "noKey": "No key yet. Generate one to start.",
+    "httpsTitle": "HTTPS logins",
+    "noLogins": "No HTTPS login saved. A clone asks for one when a host needs it.",
+    "removeLoginConfirm": "Delete the login for {{host}}? Clones from that host will ask for a login again.",
+    "terminal": "Use this key for git in the terminal",
+    "terminalHint": "A clone, fetch or push you type yourself (in a pane or over SSH) uses this key, then your own ~/.ssh keys. Sets core.sshCommand in your ~/.gitconfig.",
+    "terminalForeign": "Your ~/.gitconfig already sets its own core.sshCommand, so AgentHub leaves it alone. Remove it to use this key in the terminal.",
+    "sshIntro": "Use the section for where your code lives. Each kind of host takes its own key; you need only the ones you use.",
+    "gitHubTitle": "GitHub · GitLab · Gitea · Bitbucket",
+    "gitHubSub": "ED25519 key — the git@… SSH address",
+    "gitHubStepAdd": "Add it to your account on the host: GitHub → Settings → SSH and GPG keys → New SSH key. GitLab: Preferences → SSH Keys. Paste the whole line.",
+    "gitHubStepClone": "Clone with the SSH address the repository page shows:",
+    "awsTitle": "AWS CodeCommit",
+    "awsSub": "RSA 4096 key — AWS accepts only RSA",
+    "stepCopy": "Copy the public key.",
+    "awsStepUpload": "In the AWS console: IAM → Users → your user → Security credentials → SSH public keys for AWS CodeCommit → Upload SSH public key, and paste it.",
+    "awsStepKeyId": "AWS then shows an SSH key ID (it starts with APKA). Paste it here and pick the region of your repositories:",
+    "awsKeyId": "SSH key ID",
+    "awsRegion": "Region",
+    "awsSave": "Save",
+    "awsSaved": "SSH key ID saved for {{region}}",
+    "awsReady": "Ready. Clone with the plain address CodeCommit shows — in a terminal or in Add workspace → Clone:",
+    "otherTitle": "Other SSH hosts (advanced)",
+    "otherHint": "Only for a host that logs you in with a user name other than git. Then a plain ssh://<host>/… address logs in as that user.",
+    "otherHost": "Host",
+    "otherUser": "User name",
+    "otherSaved": "SSH user saved for {{host}}",
+    "privateNote": "Only the public key is ever shown; the private key never leaves the server."
+  },
   "gitCreds": {
     "title": "Git credentials",
     "description": "One login per host, shared by everyone using this AgentHub. A token is never shown again after it is saved.",
@@ -820,6 +1037,10 @@
       "data": "Data"
     },
     "section": {
+      "account": {
+        "title": "Account",
+        "description": "Your profile, password and sign-ins on this server."
+      },
       "appearance": {
         "title": "Appearance",
         "description": "Language, colour mode and theme, and the corner pet."
@@ -886,6 +1107,14 @@
     "agenthub": "AgentHub-managed worktrees",
     "agenthubDesc": "Worktrees AgentHub created under its workspaces root."
   },
+  "fonts": {
+    "title": "Text & fonts",
+    "description": "Language, text size and the terminal's font. Saved to your account."
+  },
+  "sessionsView": {
+    "title": "Sessions",
+    "description": "How a new session opens and which sessions the session view's tab bar holds. Saved to your account."
+  },
   "language": {
     "title": "Language",
     "description": "The language of the whole dashboard, saved to your account.",
@@ -901,9 +1130,20 @@
     "label": "Tabs from every workspace",
     "labelDesc": "Keep every workspace's live sessions as tabs, and mix them in one split. Focusing a tab selects its workspace. Off: only the selected workspace's sessions."
   },
+  "textSize": {
+    "title": "Text size",
+    "description": "How large the dashboard's text is — menus, lists, chat and settings. Saved to your account. Ctrl + / Ctrl − in the browser still zooms everything on top of this.",
+    "label": "Interface text",
+    "names": {
+      "14": "Small",
+      "16": "Default",
+      "17": "Large",
+      "18": "Larger"
+    }
+  },
   "terminalFont": {
     "title": "Terminal font",
-    "description": "The font of the workspace terminals. Takes effect the next time a terminal opens. Saved to your account.",
+    "description": "The font and size of the workspace terminals. Open terminals change at once. Saved to your account.",
     "label": "Font",
     "names": {
       "jetbrains": "JetBrains Mono",
@@ -911,7 +1151,8 @@
       "system": "System font"
     },
     "systemNote": "Your browser's fixed-width font. It may lack some Vietnamese letters (ấ, ế, ố…), which then draw out of line.",
-    "preview": "Preview"
+    "preview": "Preview",
+    "sizeLabel": "Size"
   },
   "rowMenu": {
     "copyHost": "Copy host",
@@ -1044,5 +1285,40 @@
     "chooseFile": "Choose file",
     "fileTooBig": "{{name}} is {{size}} characters — instructions hold at most {{max}}",
     "appliesTo": "Applies to"
+  },
+  "account": {
+    "avatar": {
+      "change": "Change picture",
+      "remove": "Remove picture",
+      "saved": "Picture updated",
+      "removed": "Picture removed",
+      "tooBig": "The picture must be at most 1 MB"
+    },
+    "loadFailed": "Could not load your account: {{message}}",
+    "memberSince": "Member since",
+    "workspaces": "Workspaces",
+    "sessions": "Sessions",
+    "logins": "Active sign-ins",
+    "lastLogin": "Last sign-in",
+    "roleNote": "Your role and access are set by an admin on the Users page.",
+    "profile": "Profile",
+    "profileDescription": "How your name appears to others on this server.",
+    "save": "Save",
+    "profileSaved": "Profile saved",
+    "password": "Password",
+    "passwordDescription": "Changing it keeps this browser signed in and signs you out everywhere else.",
+    "currentPassword": "Current password",
+    "newPassword": "New password",
+    "confirmPassword": "Confirm new password",
+    "mismatch": "The two new passwords differ.",
+    "changePassword": "Change password",
+    "passwordChanged": "Password changed",
+    "sessionsTitle": "Sign-ins",
+    "sessionsDescription": "You are signed in on {{n}} browser(s), this one included.",
+    "signOutOthers": "Sign out other devices",
+    "signOutOthersConfirm": "Sign out every other device?",
+    "signOutOthersBody": "Every browser signed in to your account except this one is signed out.",
+    "signedOut_one": "Signed out {{count}} other device",
+    "signedOut_other": "Signed out {{count}} other devices"
   }
 }

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

@@ -31,5 +31,9 @@
   "installedTitle": "Version {{version}} is installed but not running",
   "later": "Not now",
   "skipVersion": "Skip this version",
-  "skipVersionHint": "Don't ask again about this version; a newer one will still be offered."
+  "skipVersionHint": "Don't ask again about this version; a newer one will still be offered.",
+  "autoFix": "Auto fix",
+  "autoFixHint": "Open a Claude Code session in the install folder with this error, so an AI agent fixes it and finishes the update.",
+  "autoFixWorkspace": "AgentHub update",
+  "autoFixError": "Could not start the Auto fix session"
 }

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

@@ -7,6 +7,11 @@
   "sessions": "Sessions",
   "last7d": "7 days",
   "last30d": "30 days",
+  "storage": "Storage",
+  "storageHint": "{{files}} files · measured {{at}}",
+  "storagePartial": "at least — part of the folder could not be read in time",
+  "storageNone": "No home folder of their own",
+  "storageMeasuring": "Measuring…",
   "disabled": "disabled",
   "you": "you",
   "tokens": "{{n}} tokens",
@@ -25,7 +30,7 @@
   "username": "Username",
   "usernameHint": "Letters, digits, '.', '_' or '-'",
   "password": "Password",
-  "passwordHint": "At least 8 characters",
+  "passwordHint": "No minimum length",
   "newPassword": "New password",
   "changeRole": "Change role",
   "disable": "Disable",
@@ -56,20 +61,178 @@
     "disabled": "{{name}} disabled",
     "enabled": "{{name}} enabled",
     "password": "{{name}}'s password reset",
-    "workspace": "Workspace given to {{name}}"
+    "workspace": "Workspace given to {{name}}",
+    "updated": "{{name}} updated",
+    "deleted": "{{name}} was deleted."
   },
   "errors": {
+    "EBADIMAGE": "Only a PNG, JPEG, GIF or WebP picture",
+    "ETOOBIG": "The picture must be at most 1 MB",
     "EREAUTH": "Your password is wrong.",
     "ETOOMANY": "Too many wrong passwords. Try again in 15 minutes.",
     "ESELF": "You cannot change your own role or disable yourself.",
     "EEXISTS": "That username is taken.",
     "EBADUSER": "Username: letters, digits, '.', '_' or '-' (up to 64).",
-    "EBADPASSWORD": "Password: at least 8 characters."
+    "EBADPASSWORD": "Password cannot be empty.",
+    "EBADEMAIL": "That email address does not look valid.",
+    "EBADFIELD": "One of the values is not valid.",
+    "ENOLANE": "That workspace no longer exists.",
+    "ENOTOWNED": "That workspace is not this user's any more.",
+    "EOWNERFOLDER": "That workspace's folder belongs to another user's account.",
+    "EBADROLE": "Unknown role.",
+    "ELOCALMODE": "Accounts are managed in server mode only.",
+    "ELASTADMIN": "The last admin cannot be deleted."
   },
   "readOnly": "Analysts can view accounts but not change them.",
   "auditTitle": "Audit log",
   "auditDescription": "Account changes made here, and each time an admin or analyst opened a session a developer owns.",
   "auditEmpty": "Nothing recorded yet.",
   "activeCount": "{{n}} active",
-  "cost30d": "Cost · 30 days"
+  "cost30d": "Cost · 30 days",
+  "displayName": "Display name",
+  "displayNameHint": "Shown beside the username. Optional.",
+  "email": "Email",
+  "edit": {
+    "button": "Edit user",
+    "title": "Edit {{name}}",
+    "created": "Created",
+    "lastLogin": "Last sign-in",
+    "never": "Never",
+    "logins": "Active sign-ins",
+    "profile": "Profile",
+    "access": "Access",
+    "status": "Status",
+    "active": "Active",
+    "statusHint": "A disabled user cannot sign in; their workspaces and history stay.",
+    "selfRole": "You cannot change your own role.",
+    "selfDisable": "You cannot disable yourself.",
+    "password": "Password",
+    "passwordHint": "Leave blank to keep the current one. A new one signs them out everywhere.",
+    "show": "Show password",
+    "hide": "Hide password",
+    "copy": "Copy password",
+    "generate": "Generate",
+    "loading": "Loading…",
+    "noOwned": "Owns no workspace.",
+    "undo": "Undo",
+    "removeWorkspace": "Remove {{name}}",
+    "removeWorkspaceHint": "The workspace is left with no owner",
+    "addWorkspace": "Add workspace",
+    "chooseWorkspace": "Choose a workspace…",
+    "sessions": "Sign-ins",
+    "signOut": "Sign out everywhere",
+    "signOutHint": "Ends this user's {{n}} active sign-in(s); they sign in again with their password.",
+    "noChanges": "No changes yet."
+  },
+  "pool": {
+    "title": "Account pool",
+    "description": "Claude and Codex accounts every user's new sessions run on — the least-used one is picked, and a login is written into the user's home by the server, so nobody signs in per user.",
+    "refresh": "Re-read quotas",
+    "add": "Add account",
+    "empty": "No accounts yet. Until you add one, each user's session needs that user's own sign-in.",
+    "account": "Account",
+    "tool": "Tool",
+    "livePanes": "Live",
+    "quota": "Quota",
+    "spend": "5 hours",
+    "spend7d": "{{cost}} · {{tokens}} tokens in 7 days",
+    "tokens": "{{tokens}} tokens",
+    "added": "added {{at}}",
+    "expired": "expired",
+    "full": "full",
+    "kind": {
+      "token": "Claude · setup-token",
+      "login": "Claude · login",
+      "apikey": "Codex · API key",
+      "chatgpt": "Codex · ChatGPT"
+    },
+    "name": "Name",
+    "nameHint": "Any label you will recognise: letters, digits, '.', '_' or '-'",
+    "remove": "Remove {{name}}",
+    "removeHint": "New sessions stop using this account. Sessions already running on it keep running.",
+    "removeButton": "Remove",
+    "done": {
+      "added": "{{name}} added to the pool",
+      "removed": "{{name}} removed from the pool"
+    },
+    "errors": {
+      "EREAUTH": "Your password is wrong.",
+      "ETOOMANY": "Too many wrong passwords. Try again in 15 minutes.",
+      "EBADNAME": "Name: 1–64 letters, digits, '.', '_' or '-'.",
+      "EBADTOKEN": "That is not a valid token for this tool.",
+      "EEXISTS": "An account with that name is already in the pool.",
+      "ENOACCOUNT": "That account is no longer in the pool.",
+      "ELOCALMODE": "In local mode the pool is changed from the host's shell (agenthub accounts).",
+      "EACTIVE": "This server's Claude Code keeps that login in the macOS Keychain. Switch it to another profile first.",
+      "ENOTFOUND": "That saved login no longer exists.",
+      "ESTALE": "That login was already refreshed elsewhere. Log in again and save it anew.",
+      "EUPSTREAM": "Anthropic could not be reached. Try again."
+    },
+    "source": "From",
+    "sources": {
+      "profile": "A saved login (Switch account profiles)",
+      "credentials": "Paste .credentials.json / Keychain",
+      "token": "claude setup-token"
+    },
+    "sourceHint": {
+      "profile": "The login is moved into the pool: the profile leaves the switcher, and the server writes it into each user's home when their session starts.",
+      "credentials": "From ~/.claude/.credentials.json, or on a Mac `security find-generic-password -s \"Claude Code-credentials\" -w`. Do not keep using that login where you copied it from — two copies log each other out.",
+      "token": "A one-year token from `claude setup-token`, given to every session as an environment variable."
+    },
+    "profile": "Profile",
+    "profileHint": "Saved in Settings → Claude config → Switch account. The one this server's own Claude Code is logged into can be moved too: the server keeps running on it and refreshes it for everyone.",
+    "chooseProfile": "Choose a saved login…",
+    "noProfiles": "No saved logins — save one in Settings → Claude config → Switch account",
+    "loadingProfiles": "Loading…",
+    "activeHere": "in use on this server — keeps working",
+    "nameFromProfile": "Leave blank to use the profile's name",
+    "secret": {
+      "credentials": "Credentials JSON",
+      "token": "Token",
+      "codex": "API key or auth.json"
+    },
+    "secretHint": {
+      "credentials": "The whole file: {\"claudeAiOauth\": {…}}",
+      "token": "The sk-ant-… that `claude setup-token` printed.",
+      "codex": "An OpenAI API key (sk-…), or the whole ~/.codex/auth.json after `codex login` with a ChatGPT account."
+    },
+    "refreshFailed": "refresh failed"
+  },
+  "delete": {
+    "button": "Delete user",
+    "title": "Delete {{name}}?",
+    "body": "This deletes {{name}} for good: their login, {{count}} workspace(s), and their Linux account with the whole home folder (/srv/agenthub/users/{{user}}) — every file and all source code in it. It cannot be undone. Session history and the audit log stay.",
+    "confirm": "Delete for good",
+    "needsPassword": "Enter your own password below first."
+  },
+  "tmux": {
+    "title": "Members' tmux",
+    "description": "Each member's own tmux server keeps the version it started with until its last pane closes. Installed: tmux {{version}}.",
+    "refresh": "Refresh",
+    "notMatched": "Run `sudo agenthub server install-system` once: until then an older member server is asked with the installed tmux, which can leave it stuck at 100% CPU.",
+    "empty": "No member has a tmux server running.",
+    "user": "User",
+    "version": "tmux",
+    "sessions": "Sessions",
+    "agents": "Agents",
+    "stuck": "not answering",
+    "outdated": "older than installed",
+    "since": "since {{at}}",
+    "working_one": "{{count}} working",
+    "working_other": "{{count}} working",
+    "idle": "idle",
+    "restart": "Restart {{name}}'s tmux",
+    "restartIdle_one": "Restart {{count}} idle member",
+    "restartIdle_other": "Restart {{count}} idle members",
+    "restartIdleTitle": "Restart idle members' tmux",
+    "restartHint": "Every pane of {{name}} closes ({{count}} sessions). Their Claude sessions resume from the workspace, and the next start runs the installed tmux.",
+    "restartHintBusy": "An agent of {{name}} is working right now and will be stopped. Every pane of theirs closes ({{count}} sessions); their Claude sessions resume from the workspace.",
+    "restartIdleHint": "Restarts the tmux of every member on an older version with no agent working: {{names}}. Their panes close; their Claude sessions resume from the workspace.",
+    "restartButton": "Restart",
+    "done": "{{name}}'s tmux restarted",
+    "doneIdle": "Restarted: {{names}}",
+    "errors": {
+      "ETMUXSTUCK": "The server did not stop. Run the `sudo kill -9` command shown, as root, on the server."
+    }
+  }
 }