chore: v2.8.44 — Discard in the Changes panel takes only the ticked files and blocks

The Changes panel's "Discard all" threw away every changed file, ticked or
not. It is now "Discard (n)": the same selection Commit sends — whole ticked
files as `paths`, a partly ticked file's ticked blocks as `hunks` — and is
disabled with nothing ticked. The server's `discard` accepts `hunks`
(`selectionPatch` in reverse, `git apply -R`), building every patch before
applying any so a stale selection undoes nothing.

Closes #87

.claude/settings.local.json

@@ -1,4 +1,8 @@
 {
+  "env": {
+    "ANTHROPIC_BASE_URL": "",
+    "ANTHROPIC_AUTH_TOKEN": ""
+  },
   "permissions": {
     "allow": [
       "Bash(npm run:*)",
@@ -36,11 +40,8 @@
       "Bash(node -e ':*)",
       "Bash(node -e \"require\\('./server/lib/transcript-cache'\\); require\\('./scripts/import-history'\\); console.log\\('All modules load OK'\\)\")",
       "Bash(claude --version)",
-      "Bash(gh pr *)"
+      "Bash(gh pr *)",
+      "Bash(grep *)"
     ]
-  },
-  "env": {
-    "ANTHROPIC_BASE_URL": "",
-    "ANTHROPIC_AUTH_TOKEN": ""
   }
 }

ARCHITECTURE.md

@@ -7,7 +7,7 @@ Architectural overview and technical reference for the Agent Dashboard system, c
 ![Model Context Protocol](https://img.shields.io/badge/Model_Context_Protocol-1.0-0f766e?style=flat-square&logo=modelcontextprotocol&logoColor=white)
 ![Node.js](https://img.shields.io/badge/Node.js-%3E%3D20-339933?style=flat-square&logo=node.js&logoColor=white)
 ![Python](https://img.shields.io/badge/Python-%3E%3D3.6-3776AB?style=flat-square&logo=python&logoColor=white)
-![Express](https://img.shields.io/badge/Express-4.21-000000?style=flat-square&logo=express&logoColor=white)
+![Express](https://img.shields.io/badge/Express-5-000000?style=flat-square&logo=express&logoColor=white)
 ![ws](https://img.shields.io/badge/ws-WebSocket_server-010101?style=flat-square&logo=socketdotio&logoColor=white)
 ![web-push](https://img.shields.io/badge/web--push-VAPID-3b82f6?style=flat-square&logo=javascript&logoColor=white)
 ![swagger-ui-express](https://img.shields.io/badge/swagger--ui--express-5.0-85EA2D?style=flat-square&logo=swagger&logoColor=white)
@@ -327,6 +327,7 @@ graph TD
 | `routes/settings.js`      | System info (DB size, hook status, server uptime, transcript cache stats), data export as one versioned JSON bundle and matching import/restore (`POST /api/settings/import` via `server/lib/data-transfer.js` — idempotent, session-atomic, non-destructive; consolidates machines), session cleanup (abandon stale, purge old), clear all data (including the fired-alert feed and webhook delivery log; alert *rules* and webhook *targets* are preserved as user configuration), reset pricing, reinstall hooks                                                                                                                                                                                                                                                                                                                                           |
 | `routes/alerts.js`        | HTTP surface for the rules-based alerting engine: alert-rule CRUD (`GET/POST /api/alerts/rules`, `PATCH/DELETE /api/alerts/rules/:id` — rule_type is immutable after creation, config re-validated against the stored type on PATCH), the fired-alert feed (`GET /api/alerts` with `?unacked=true` + pagination, response carries `total` and `unacked` counts), and acknowledgement (`POST /api/alerts/:id/ack`, `POST /api/alerts/ack-all`, broadcasting `alert_updated`), and the read-only dry run `POST /api/alerts/rules/preview` (`{rule_type, config, days?, cooldown_seconds?}` → what `previewRule` says it would have fired over the last `days`, 1–90, default 7). Every rule mutation calls `invalidateRuleCache()` so the evaluation engine picks up changes immediately |
 | `routes/budgets.js` + `lib/budgets.js` | Spend budgets: a budget IS an alert rule of type `budget` (CRUD through `/api/alerts/rules`). `lib/budgets.js` computes a period's bounds in the user's local time (`tz_offset` saved with the rule; day / week from Monday / month), its spend priced like `GET /api/pricing/cost` by the day tokens were spent (via `dailyTokenRows` + `costWhere`, scoped to `tool`/`lane`), and the pace projection to the period's end; `GET /api/budgets/status` lists every enabled budget with `spend`, `pct`, `projected` and the thresholds `crossed` |
+| `lib/user-quota.js` | Server mode's spend quota per user (`user_quotas`, row 0 = the default; `PUT /api/users/quota-default`, `PATCH /api/users/:id {quota}`, `GET /api/me/quota`): `limit_usd` per local `day` or sliding `5h`, spend = the users page's `hourlyTokenRows` + `calculateCost` over owned sessions. Over it: `spawnRun` throws `EQUOTA` (429); a 60 s `sweep` writes each pane's `AGENTHUB_QUOTA_FILE` (the hook handler then exits 2 on `UserPromptSubmit`, from the file alone, fail-open), leaves the owner's omp keys out of the gateway's clients file and ends panes no hook can stop |
 | `lib/alerts.js`           | Rule evaluation engine for the alerting feature. Six rule types — `cost_threshold` (a session's cost ≥ `usd`, on token-bearing events like `token_threshold`) and `budget` (on the sweep: each of `thresholds` % of `limit_usd` for the current `period` fires ONCE per period, deduped on `details.period_start` + `details.threshold` and bypassing the cooldown) plus the four original ones: `event_pattern` (match `event_type` / `tool_name` / `summary_contains`, optionally requiring ≥ `count` matching events within `window_minutes` — counted via a dynamically built, statement-cached SQL query), `token_threshold` (session total tokens ≥ `total_tokens`, only evaluated on token-bearing events: PostToolUse / Stop / SubagentStop / SessionEnd), `inactivity` (active session whose `updated_at` — bumped on every ingested event — is older than `minutes`), and `status_duration` (agent stuck in `working`/`waiting` with no activity for `minutes`, joined against active sessions). Event-driven types run via `evaluateEvent()` called from `routes/hooks.js` **after** the ingest transaction commits and the HTTP response is sent — alerting can never slow down or fail hook ingestion, and `evaluateEvent` is itself fully try/catch-guarded per rule. Time-based types run via `sweepTimeRules()` on a 60 s unref'd interval (same pattern as the hooks watchdog). `fireAlert()` applies per-(rule, session, agent) cooldown dedup (`cooldown_seconds`, default 300) by checking the most recent `alert_events` row for the scope, then persists and broadcasts `alert_triggered`. Enabled rules are cached in memory (hook ingest is hot) and invalidated on every CRUD mutation. `validateRuleConfig()` normalizes + validates type-specific config and is shared with the routes. After persisting and broadcasting a fired alert, `fireAlert()` hands it to `lib/webhooks.js` `dispatchAlert()` fire-and-forget (lazy-required to keep the module graph acyclic) — webhook delivery never blocks or fails alert firing |
 | `routes/webhooks.js`      | HTTP surface for universal webhook targets: target CRUD (`GET/POST /api/webhooks`, `PATCH/DELETE /api/webhooks/:id` — `type` is immutable after creation), a redacted provider catalog (`GET /api/webhooks/providers`, drives the UI form), a synchronous test probe (`POST /api/webhooks/:id/test` — always 200, the `ok` flag carries the downstream delivery result), and a per-target delivery log (`GET /api/webhooks/:id/deliveries`). Validation is registry-driven: required URL (per provider), per-provider config fields, https enforcement, generic-family secret/headers. **Security**: target URLs are masked (host + last 4 chars) and secret config fields + custom-header values are redacted in every response — full URLs, signing secrets, and credentials (routing keys, api keys, bot tokens) are stored server-side and never leave the server. PATCH uses "set-flag" semantics (omit `url`/`secret`/`headers`/`config` to leave unchanged); `config` is merged over the existing config so one field can change without re-sending secrets. Every mutation calls `invalidateWebhookCache()` |
 | `lib/webhook-providers.js`| Declarative registry of the 14 first-class providers (+ generic). Each entry declares a `family` (`chat` / `api` / `generic`), a payload `format`ter, URL resolution (`urlFrom(config)` for Telegram/Opsgenie that derive the endpoint, `defaultUrl` for PagerDuty, or a user-supplied URL), optional `authFrom(config)` headers (Opsgenie GenieKey), and the credential `fields` the UI renders + the route validates. Formatters emit each platform's native body: Slack Block Kit, Discord embed, Teams Adaptive Card wrapped in the Power Automate Workflows `{ type: "message", attachments: [...] }` envelope (the legacy O365-connector MessageCard transport was retired May 2026), Google Chat text, Mattermost/Rocket.Chat Slack-style attachments, Telegram sendMessage (HTML), PagerDuty Events API v2 (with `dedup_key`), Opsgenie Alert API, Splunk On-Call/VictorOps, and the generic `{ event, alert }` envelope. A provider may also declare `verifyResponse(body)` to veto a 2xx that actually signals failure (Splunk On-Call returns 200 with `result:"failure"`). `publicProviders()` returns the redacted catalog. Adding a provider = one registry entry + a formatter — no route or delivery changes |
@@ -2557,7 +2558,7 @@ Components that consume this: SessionDetail, Analytics (donut chart + breakdown)
 | **SQLite** (via `better-sqlite3` or built-in `node:sqlite`) | Zero-config, embedded, no server process. WAL mode gives concurrent reads. Synchronous API is simpler than async alternatives for this use case. Falls back to Node.js built-in `node:sqlite` when `better-sqlite3` cannot be compiled |
 | **Express**                     | Battle-tested, minimal, well-understood. Overkill would be Fastify for this scale; underkill would be raw `http` module                         |
 | **ws**                          | Fastest, most lightweight WebSocket library for Node. No Socket.IO overhead needed since we only push JSON messages                             |
-| **React 18**                    | Stable, widely known, strong TypeScript support. No need for Server Components or RSC given this is a client-rendered SPA                       |
+| **React 19**                    | Stable, widely known, strong TypeScript support. No need for Server Components or RSC given this is a client-rendered SPA                       |
 | **Vite**                        | Fast builds, native ESM, excellent dev experience. Proxy config handles the dev server split cleanly                                            |
 | **Tailwind CSS**                | Utility-first approach keeps styles colocated with markup. No CSS module boilerplate. Colors are CSS-variable-backed tokens (`darkMode: "class"`) so the Dark/Light/System switch re-themes the app with one class flip rather than per-component `dark:` variants, and a named theme (Settings → Appearance) is one `data-theme` attribute selecting an override block of the same variables |
 | **React Router 6**              | Standard routing for React SPAs. Layout routes with `<Outlet>` give clean shell composition                                                     |

bin/agenthub.js

@@ -1281,7 +1281,7 @@ async function cmdDoctor() {
   // Asked of the SERVER, not of this shell: a run is a tmux session the server
   // spawns, so the only PATH that decides whether Start Run works is its own —
   // a systemd --user service never reads your shell profile. Missing tmux is a
-  // warning, not a failure: it costs the run console and `lanes shell`, nothing
+  // warning, not a failure: it costs the run console and `workspace shell`, nothing
   // else.
   try {
     const { available, upgrade } = await get("/api/run/tmux");
@@ -1693,7 +1693,7 @@ function cmdOpen() {
 }
 
 /**
- * `agenthub lanes add` — adopt a working directory or provision a managed worktree.
+ * `agenthub workspace add` — adopt a working directory or provision a managed worktree.
  */
 async function cmdLanesAdd(args) {
   const flag = (name) => {
@@ -1719,12 +1719,12 @@ async function cmdLanesAdd(args) {
     if (base) body.base = base;
     if (slug) body.slug = slug;
     if (tool) body.tool = tool;
-    const { lane: provisioning } = await post("/api/lanes/worktree", body);
+    const { lane: provisioning } = await post("/api/workspaces/worktree", body);
     const deadline = Date.now() + 30_000;
     let lane = provisioning;
     while (lane.status === "provisioning" && Date.now() < deadline) {
       await new Promise((resolve) => setTimeout(resolve, 250));
-      ({ lane } = await get(`/api/lanes/${provisioning.id}`));
+      ({ lane } = await get(`/api/workspaces/${provisioning.id}`));
     }
     if (lane.status === "provisioning") {
       console.error(
@@ -1755,12 +1755,12 @@ async function cmdLanesAdd(args) {
   const body = { cwd, title };
   if (pipeline) body.pipeline = pipeline;
   if (tool) body.tool = tool;
-  const { lane } = await post("/api/lanes", body);
+  const { lane } = await post("/api/workspaces", body);
   console.log(`${c.green("✔")} Created workspace #${lane.id}: ${lane.title}`);
 }
 
 /**
- * `agenthub lanes gc [--dry-run]` — reap orphaned Playwright MCP processes
+ * `agenthub workspace gc [--dry-run]` — reap orphaned Playwright MCP processes
  * (owning session died) and cap oversized hook logs, across every lane on
  * this machine. Machine-wide, not one lane's; pure local process/file
  * action, no HTTP round-trip.
@@ -1790,7 +1790,7 @@ function cmdLanesGc(args) {
 }
 
 /**
- * `agenthub lanes profile init <repo>` — detect a Node.js project and scaffold
+ * `agenthub workspace profile init <repo>` — detect a Node.js project and scaffold
  * `.agenthub/profile/`. Pure filesystem action against the SOURCE repo; does not
  * talk to the dashboard server at all.
  */
@@ -1844,9 +1844,9 @@ function cmdLanesProfileInit(args) {
 }
 
 /**
- * `agenthub lanes profile check [<path>]` — validate a profile without needing a
+ * `agenthub workspace profile check [<path>]` — validate a profile without needing a
  * lane to exist for it yet. Defaults to the current directory, NOT lane-id
- * resolution (unlike every other `lanes` subcommand) — this is meant to run
+ * resolution (unlike every other `workspace` subcommand) — this is meant to run
  * against a bare repo right after `profile init`.
  */
 async function cmdLanesProfileCheck(args) {
@@ -1883,7 +1883,7 @@ function printLaneFacts(title, facts, fields) {
   }
 }
 
-/** `agenthub lanes reset|remove|purge` — destructive work only after a fact check. */
+/** `agenthub workspace reset|remove|purge` — destructive work only after a fact check. */
 async function cmdLanesLifecycle(action, args) {
   const id = args.find((arg) => !arg.startsWith("--"));
   const fields = LANE_PREFLIGHT_FIELDS[action];
@@ -1894,7 +1894,7 @@ async function cmdLanesLifecycle(action, args) {
     return;
   }
 
-  const preflight = await get(`/api/lanes/${id}/preflight?action=${action}`);
+  const preflight = await get(`/api/workspaces/${id}/preflight?action=${action}`);
   printLaneFacts(`Preflight for ${action} workspace #${id}:`, preflight, fields);
   const keepDb = action === "reset" && args.includes("--keep-db");
   if (preflight.database) {
@@ -1938,7 +1938,7 @@ async function cmdLanesLifecycle(action, args) {
   const body = { confirm: true, expect };
   if (args.includes("--force")) body.force = true;
   if (keepDb) body.keepDb = true;
-  const result = await post(`/api/lanes/${id}/${action}`, body, { allowError: true });
+  const result = await post(`/api/workspaces/${id}/${action}`, body, { allowError: true });
   if (result.status) {
     const error = result.data?.error || {};
     console.error(`✖ ${action} workspace #${id} → ${error.message || `HTTP ${result.status}`}`);
@@ -1961,7 +1961,7 @@ async function cmdLanesLifecycle(action, args) {
 }
 
 /**
- * `agenthub lanes` — one row per lane: what it is, where it is in its pipeline, and
+ * `agenthub workspaces` — one row per lane: what it is, where it is in its pipeline, and
  * whether the driving session is still breathing.
  */
 /**
@@ -1993,7 +1993,7 @@ function detectionLeadsDeclaration(l) {
 }
 
 async function cmdLanes() {
-  const { lanes, counts } = await get("/api/lanes");
+  const { lanes, counts } = await get("/api/workspaces");
   if (!lanes.length) {
     console.log(
       "no workspaces yet — create one with: agenthub workspace add --cwd <path> --title <text>"
@@ -2040,7 +2040,7 @@ function toolFromEnv() {
  *
  * Only the FIRST positional counts as an id, and only when it is all digits.
  * Scanning the whole argv for a number would swallow flag values —
- * `agenthub lanes logs web --tail 4096` would have addressed lane 4096.
+ * `agenthub workspace logs web --tail 4096` would have addressed lane 4096.
  *
  * @param {string[]} args - Arguments after the subcommand.
  * @returns {Promise<{laneId: string|number, rest: string[]}|null>} null once an error is printed.
@@ -2051,13 +2051,13 @@ async function resolveLaneArg(args) {
     return i > -1 ? args[i + 1] : undefined;
   };
 
-  const explicit = flagValue("lane") || flagValue("workspace");
+  const explicit = flagValue("workspace");
   if (explicit) return { laneId: explicit, rest: args };
   if (args.length && /^\d+$/.test(args[0])) return { laneId: args[0], rest: args.slice(1) };
 
   const tool = flagValue("tool") || toolFromEnv();
   const cwd = require("path").resolve(flagValue("cwd") || process.cwd());
-  const { lanes } = await get("/api/lanes");
+  const { lanes } = await get("/api/workspaces");
 
   // A pane's AGENTHUB_LANE_ID beats cwd matching, but only after it is checked
   // against the live lane list AND the directory: a pane outlives the lane it
@@ -2146,7 +2146,7 @@ function printRuntime(runtime) {
 }
 
 /**
- * `agenthub lanes up|down|runtime|logs|hook` — a lane's own application stack, as
+ * `agenthub workspace up|down|runtime|logs|hook` — a lane's own application stack, as
  * opposed to `start`/`stop`, which drive its Claude run. Two lifecycles, one
  * lane id.
  *
@@ -2160,7 +2160,7 @@ async function cmdLanesRuntime(sub, args) {
   const { laneId, rest: laneArgs } = resolved;
 
   if (sub === "runtime") {
-    printRuntime(await get(`/api/lanes/${laneId}/runtime`));
+    printRuntime(await get(`/api/workspaces/${laneId}/runtime`));
     return;
   }
 
@@ -2168,7 +2168,7 @@ async function cmdLanesRuntime(sub, args) {
     const body = {};
     if (laneArgs.includes("--no-build")) body.build = false;
     if (laneArgs.includes("--qc")) body.qc = true;
-    const result = await post(`/api/lanes/${laneId}/up`, body, { allowError: true });
+    const result = await post(`/api/workspaces/${laneId}/up`, body, { allowError: true });
     if (result.status) {
       console.error(`✖ up workspace #${laneId} → ${result.data?.error?.message || result.status}`);
       process.exitCode = 1;
@@ -2181,7 +2181,7 @@ async function cmdLanesRuntime(sub, args) {
     const deadline = Date.now() + 15 * 60 * 1000;
     for (;;) {
       await new Promise((r) => setTimeout(r, 2000));
-      const runtime = await get(`/api/lanes/${laneId}/runtime`);
+      const runtime = await get(`/api/workspaces/${laneId}/runtime`);
       if (runtime.healthy) {
         printRuntime(runtime);
         return;
@@ -2202,7 +2202,7 @@ async function cmdLanesRuntime(sub, args) {
   }
 
   if (sub === "down") {
-    const result = await post(`/api/lanes/${laneId}/down`, {}, { allowError: true });
+    const result = await post(`/api/workspaces/${laneId}/down`, {}, { allowError: true });
     if (result.status) {
       console.error(
         `✖ down workspace #${laneId} → ${result.data?.error?.message || result.status}`
@@ -2223,7 +2223,7 @@ async function cmdLanesRuntime(sub, args) {
     }
     const i = laneArgs.indexOf("--tail");
     const query = i > -1 && laneArgs[i + 1] ? `?tail=${encodeURIComponent(laneArgs[i + 1])}` : "";
-    const log = await get(`/api/lanes/${laneId}/logs/${encodeURIComponent(svc)}${query}`);
+    const log = await get(`/api/workspaces/${laneId}/logs/${encodeURIComponent(svc)}${query}`);
     if (!log.available) {
       console.log("no logs for this workspace yet.");
       return;
@@ -2241,7 +2241,7 @@ async function cmdLanesRuntime(sub, args) {
       return;
     }
     const result = await post(
-      `/api/lanes/${laneId}/hook/${encodeURIComponent(name)}`,
+      `/api/workspaces/${laneId}/hook/${encodeURIComponent(name)}`,
       { args: laneArgs.slice(1) },
       { allowError: true }
     );
@@ -2263,7 +2263,7 @@ async function cmdLanesRuntime(sub, args) {
         : "merge";
     const branch = laneArgs.find((arg) => !arg.startsWith("--"));
     const result = await post(
-      `/api/lanes/${laneId}/sync-base`,
+      `/api/workspaces/${laneId}/sync-base`,
       { mode, branch },
       { allowError: true }
     );
@@ -2342,7 +2342,7 @@ async function defaultHolder(argsAfterName) {
 
   const resolved = await resolveLaneArg(argsAfterName);
   if (!resolved) return null;
-  const { lane } = await get(`/api/lanes/${resolved.laneId}`);
+  const { lane } = await get(`/api/workspaces/${resolved.laneId}`);
   return lane.slot ? `lane${lane.slot}` : `lane${lane.id}`;
 }
 
@@ -2474,7 +2474,7 @@ function fmtFeatureRow(f) {
 async function cmdFeatureList(args) {
   const resolved = await resolveLaneArg(args);
   if (!resolved) return;
-  const { features } = await get(`/api/lanes/${resolved.laneId}/features`);
+  const { features } = await get(`/api/workspaces/${resolved.laneId}/features`);
   if (!features.length) {
     console.log("no features activated yet — start one with: agenthub feature activate <slug>");
     return;
@@ -2496,7 +2496,7 @@ async function cmdFeatureActivate(args) {
   };
   const resolved = await resolveLaneArg(args.filter((a) => a !== slug));
   if (!resolved) return;
-  const { lane, feature } = await post(`/api/lanes/${resolved.laneId}/features/activate`, {
+  const { lane, feature } = await post(`/api/workspaces/${resolved.laneId}/features/activate`, {
     slug,
     title: flag("title"),
   });
@@ -2506,13 +2506,13 @@ async function cmdFeatureActivate(args) {
 }
 
 /** `agenthub feature show <slug> [<id>] [--cwd path]` — one feature's saved pipeline. */
-/** `agenthub lanes proof-link [<id>] [--cwd path]` — converge the clone-root
+/** `agenthub workspace proof-link [<id>] [--cwd path]` — converge the clone-root
  *  `proof/` onto `.playwright-mcp/proof` (idempotent). Never run automatically
  *  by anything else in this codebase; a session or hook calls it explicitly. */
 async function cmdLanesProofLink(args) {
   const resolved = await resolveLaneArg(args);
   if (!resolved) return;
-  const { linked } = await post(`/api/lanes/${resolved.laneId}/proof-link`);
+  const { linked } = await post(`/api/workspaces/${resolved.laneId}/proof-link`);
   console.log(
     linked
       ? `${c.green("✔")} linked proof/ -> .playwright-mcp/proof`
@@ -2520,13 +2520,13 @@ async function cmdLanesProofLink(args) {
   );
 }
 
-/** `agenthub lanes mcp sync [<id>] [--cwd path]` — relocate the source repo's
+/** `agenthub workspace mcp sync [<id>] [--cwd path]` — relocate the source repo's
  *  already-configured MCP servers into <lane>/.mcp.json and seed Chromium
  *  profiles. Never run automatically; a session calls it explicitly. */
 async function cmdLanesMcpSync(args) {
   const resolved = await resolveLaneArg(args);
   if (!resolved) return;
-  const result = await post(`/api/lanes/${resolved.laneId}/mcp/sync`, {}, { allowError: true });
+  const result = await post(`/api/workspaces/${resolved.laneId}/mcp/sync`, {}, { allowError: true });
   if (result.status) {
     console.error(`✖ mcp sync → ${result.data?.error?.message || result.status}`);
     process.exitCode = 1;
@@ -2538,7 +2538,7 @@ async function cmdLanesMcpSync(args) {
   }
 }
 
-/** `agenthub lanes integration <name> [<id>]` — check whether a named
+/** `agenthub workspace integration <name> [<id>]` — check whether a named
  *  integration (tracker, dev_qc, ci_wait) is turned on for this lane, per
  *  its .agenthub/profile/integrations.env. Exit 0 = on, 1 = off. */
 async function cmdLanesIntegration(args) {
@@ -2551,13 +2551,13 @@ async function cmdLanesIntegration(args) {
   const resolved = await resolveLaneArg(args.filter((a) => a !== name));
   if (!resolved) return;
   const { enabled } = await get(
-    `/api/lanes/${resolved.laneId}/integrations/${encodeURIComponent(name)}`
+    `/api/workspaces/${resolved.laneId}/integrations/${encodeURIComponent(name)}`
   );
   console.log(enabled ? "on" : "off");
   process.exitCode = enabled ? 0 : 1;
 }
 
-/** `agenthub lanes ci status <branch-or-sha> [<lane-id>]` — one-shot GitHub
+/** `agenthub workspace ci status <branch-or-sha> [<lane-id>]` — one-shot GitHub
  *  Actions status snapshot for a ref, via GET /:id/ci/status. Never polls;
  *  the caller (ship-feature-lane Stage 13) owns the wait loop. Exit code
  *  mirrors the derived state: 0 success, 1 failure or any error, 3 pending. */
@@ -2576,7 +2576,7 @@ async function cmdLanesCi(args) {
   const resolved = await resolveLaneArg(args.slice(2));
   if (!resolved) return;
   const result = await get(
-    `/api/lanes/${resolved.laneId}/ci/status?ref=${encodeURIComponent(ref)}`,
+    `/api/workspaces/${resolved.laneId}/ci/status?ref=${encodeURIComponent(ref)}`,
     undefined,
     { allowError: true }
   );
@@ -2590,7 +2590,7 @@ async function cmdLanesCi(args) {
 }
 
 /**
- * `agenthub lanes node [<node-id>] [extra…] [<id>] [--print]` — run ONE node of the
+ * `agenthub workspace node [<node-id>] [extra…] [<id>] [--print]` — run ONE node of the
  * lane's pipeline instead of the whole thing.
  *
  * Every node already carries the one command that drives it (`command`, added
@@ -2599,7 +2599,7 @@ async function cmdLanesCi(args) {
  * pasted it into a session by hand. This runs it, in the lane's own cwd:
  *
  *   - a slash command starts `claude` with it as the prompt;
- *   - anything else (`npm test`, `agenthub lanes hook ci-gate`) is spawned directly.
+ *   - anything else (`npm test`, `agenthub workspace hook ci-gate`) is spawned directly.
  *
  * With no node id it lists the nodes and their commands, which is also the
  * error path's answer. `--print` shows the argv and runs nothing.
@@ -2621,10 +2621,10 @@ async function cmdLanesNode(args) {
   const { flags, positional } = parseArgs(args);
   const resolved = await resolveLaneArg(args);
   if (!resolved) return;
-  const { lane } = await get(`/api/lanes/${resolved.laneId}`);
+  const { lane } = await get(`/api/workspaces/${resolved.laneId}`);
   // The lane payload's `pipeline_nodes` carries render state but not `aliases`;
   // the template does. Merge, so the listing can still mark the current node.
-  const { pipelines } = await get("/api/lanes/pipelines");
+  const { pipelines } = await get("/api/workspaces/pipelines");
   const stateOf = new Map((lane.pipeline_nodes || []).map((n) => [n.id, n.state]));
   const nodes = (pipelines.find((p) => p.id === lane.pipeline)?.nodes || []).map((n) => ({
     ...n,
@@ -2699,8 +2699,8 @@ async function cmdLanesNode(args) {
 }
 
 /**
- * `agenthub lanes pipeline [<template-id>] [<id>]` — show or switch which pipeline
- * template a lane renders against. `agenthub lanes add --pipeline` could only set
+ * `agenthub workspace pipeline [<template-id>] [<id>]` — show or switch which pipeline
+ * template a lane renders against. `agenthub workspace add --pipeline` could only set
  * this at creation time, so every lane added from the dashboard's "+ Add lane"
  * was stuck on `default` with no way back to a 16-node template.
  */
@@ -2710,15 +2710,15 @@ async function cmdLanesPipeline(args) {
   if (!resolved) return;
 
   if (!target) {
-    const { lane } = await get(`/api/lanes/${resolved.laneId}`);
-    const { pipelines } = await get("/api/lanes/pipelines");
+    const { lane } = await get(`/api/workspaces/${resolved.laneId}`);
+    const { pipelines } = await get("/api/workspaces/pipelines");
     console.log(`workspace #${lane.id} → ${lane.pipeline} (${lane.pipeline_nodes.length} nodes)`);
     if (lane.pipeline_skill) console.log(`driver: ${lane.pipeline_skill} <requirement>`);
     console.log(`available: ${pipelines.map((p) => `${p.id} (${p.nodes.length})`).join(", ")}`);
     return;
   }
 
-  const { lane } = await patch(`/api/lanes/${resolved.laneId}`, { pipeline: target });
+  const { lane } = await patch(`/api/workspaces/${resolved.laneId}`, { pipeline: target });
   console.log(
     `${c.green("✔")} workspace #${lane.id} → pipeline ${lane.pipeline} ` +
       `(${lane.pipeline_nodes.length} nodes, stage ${lane.stage}, ${lane.progress}%)`
@@ -2746,7 +2746,7 @@ async function cmdLanesPipeline(args) {
 async function cmdLanesShell(args) {
   const resolved = await resolveLaneArg(args);
   if (!resolved) return;
-  const { lane } = await get(`/api/lanes/${resolved.laneId}`);
+  const { lane } = await get(`/api/workspaces/${resolved.laneId}`);
   const sessionName = `agenthub-lane-${lane.id}`;
   const child = spawn("tmux", ["new-session", "-A", "-s", sessionName, "-c", lane.cwd], {
     stdio: "inherit",
@@ -2771,7 +2771,7 @@ async function cmdFeatureShow(args) {
   const resolved = await resolveLaneArg(args.filter((a) => a !== slug));
   if (!resolved) return;
   const result = await get(
-    `/api/lanes/${resolved.laneId}/features/${encodeURIComponent(slug)}`,
+    `/api/workspaces/${resolved.laneId}/features/${encodeURIComponent(slug)}`,
     undefined,
     { allowError: true }
   );
@@ -2806,7 +2806,7 @@ async function cmdStage(args) {
   if (!resolved) return;
   const laneId = resolved.laneId;
 
-  const { lane } = await post(`/api/lanes/${laneId}/stage`, {
+  const { lane } = await post(`/api/workspaces/${laneId}/stage`, {
     stage,
     status: flag("status"),
     evidence: flag("evidence"),
@@ -3101,8 +3101,8 @@ falling back to http://127.0.0.1:4820.
 ${c.bold("Output:")} colors auto-enable on a TTY and turn off when piped.
 Disable with --no-color or NO_COLOR=1; force with FORCE_COLOR=1 / AGENTHUB_COLOR=1.
 
-${c.bold("Old name:")} ${c.bold("agenthub lanes …")} and ${c.bold("--lane")} still work — the same
-commands as ${c.bold("agenthub workspace …")} and ${c.bold("--workspace")}.
+${c.bold("Old name:")} ${c.bold("agenthub lanes …")} and ${c.bold("--lane")} were removed — use
+${c.bold("agenthub workspace …")} and ${c.bold("--workspace")}.
 
 ${c.bold("Note:")} agenthub talks to the local dashboard server — API-backed commands
 require it to be running (${c.bold("agenthub start")} brings one up in the background).
@@ -3512,8 +3512,8 @@ function replHelp() {
 /** Detailed help for one command (or command prefix): every catalog entry
  *  whose invocation starts with the token. Returns false if none matched. */
 function commandHelp(token) {
-  // `lanes`, `workspace` and `workspaces` are one command (COMMAND_ALIASES),
-  // so `help lanes` finds the `workspace …` rows and vice versa.
+  // `workspace` and `workspaces` are one command (COMMAND_ALIASES), so
+  // `help workspaces` finds the `workspace …` rows and vice versa.
   const canon = (words) => {
     const [head, ...tail] = words.split(" ");
     return [COMMAND_ALIASES[head] || head, ...tail].join(" ");
@@ -3774,23 +3774,22 @@ async function cmdRepl() {
 // prompt. Handlers that need the server throw ServerDownError; the caller
 // decides whether to fall back to an offline reader or report the refusal.
 
-/** Command names that are another command under the user-facing word.
- *  `workspace` is the name to use; `lanes` (the handler's own name) and
- *  `--lane` are the OLD names, still working but deprecated. Removing them is
- *  step 4 of docs/plans/workspace-rename/README.md — not before the third
- *  release after the first one that shipped these aliases. */
-const COMMAND_ALIASES = { workspace: "lanes", workspaces: "lanes" };
+/** Command names that are another command under the user-facing word. */
+const COMMAND_ALIASES = { workspaces: "workspace" };
 const canonicalArgv = (argv) =>
   COMMAND_ALIASES[argv[0]] ? [COMMAND_ALIASES[argv[0]], ...argv.slice(1)] : argv;
 
-/** One stderr line when an old name is typed, so people and agents move over
- *  before step 4 removes it. stderr only: scripts reading stdout see nothing. */
-function warnOldNames(argv) {
-  const old = [];
-  if (argv[0] === "lanes") old.push("`agenthub lanes` → `agenthub workspace`");
-  if (argv.includes("--lane")) old.push("`--lane` → `--workspace`");
-  if (old.length) {
-    console.error(c.dim(`note: old name, still works for now — use ${old.join(", ")}`));
+/** The old names `agenthub workspace` and `--lane` were removed in step 4 of
+ *  docs/plans/workspace-rename/README.md. They exit 1 naming the new spelling
+ *  — never "Unknown command" or help, so a script written before says why. */
+function refuseOldNames(argv) {
+  if (argv[0] === "lanes") {
+    console.error(c.red("✖ renamed: use agenthub workspace …"));
+    process.exit(1);
+  }
+  if (argv.includes("--lane")) {
+    console.error(c.red("✖ renamed: use --workspace <id>"));
+    process.exit(1);
   }
 }
 
@@ -3803,7 +3802,6 @@ const COMMANDS = (() => {
     for (const [name] of items) set.add(name.split(" ")[0]);
   }
   set.add("help");
-  // The old names stay typeable (and completable) for scripts written before.
   for (const [alias, canonical] of Object.entries(COMMAND_ALIASES)) set.add(alias).add(canonical);
   return [...set];
 })();
@@ -4498,7 +4496,7 @@ async function cmdAccounts(sub, positional, flags = {}) {
  *  for usage/validation failures. `cmd === "repl"` is handled by the entry
  *  points, not here, to avoid recursive REPLs. */
 async function runCommand(argv) {
-  warnOldNames(argv);
+  refuseOldNames(argv);
   const [cmd, ...rest] = canonicalArgv(argv);
   const { flags, positional } = parseArgs(rest);
   switch (cmd) {
@@ -4571,7 +4569,7 @@ async function runCommand(argv) {
       return cmdReinstallHooks();
     case "update-check":
       return cmdUpdateCheck();
-    case "lanes":
+    case "workspace":
       if (rest[0] === "add") {
         return cmdLanesAdd(rest.slice(1));
       }

client/README.md

@@ -49,8 +49,8 @@ Enterprise-grade React + TypeScript dashboard for real-time Claude Code agent mo
 
 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
+- **React 19** - Component-based UI with hooks and concurrent features
+- **TypeScript 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 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`)
 
@@ -1215,7 +1215,7 @@ graph TB
 
 The client is a production-ready React application with:
 
-- 🚀 **Modern Stack** - React 18, TypeScript, Vite, Tailwind
+- 🚀 **Modern Stack** - React 19, TypeScript, Vite, Tailwind
 - ⚡ **Real-time** - WebSocket integration for live updates
 - 🧪 **Tested** - Vitest + React Testing Library
 - 📦 **Optimized** - Code splitting, tree shaking, lazy loading

client/package-lock.json

@@ -15,18 +15,18 @@
         "@fontsource/inter": "^5.2.8",
         "@fontsource/jetbrains-mono": "^5.2.8",
         "@fontsource/maple-mono": "^5.3.0",
-        "@xterm/addon-canvas": "^0.7.0",
-        "@xterm/addon-clipboard": "^0.1.0",
-        "@xterm/addon-fit": "^0.10.0",
-        "@xterm/addon-search": "^0.15.0",
-        "@xterm/addon-web-links": "^0.11.0",
-        "@xterm/xterm": "^5.5.0",
+        "@xterm/addon-clipboard": "^0.2.0",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-search": "^0.16.0",
+        "@xterm/addon-web-links": "^0.12.0",
+        "@xterm/addon-webgl": "^0.19.0",
+        "@xterm/xterm": "^6.0.0",
         "d3": "^7.9.0",
         "i18next": "^26.0.8",
         "i18next-browser-languagedetector": "^8.2.1",
-        "lucide-react": "^0.474.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "lucide-react": "^1.61.0",
+        "react": "^19.3.1",
+        "react-dom": "^19.3.1",
         "react-i18next": "^17.0.4",
         "react-markdown": "^10.1.0",
         "react-router-dom": "^7.18.4",
@@ -34,17 +34,17 @@
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.9.1",
-        "@testing-library/react": "^16.3.2",
+        "@testing-library/react": "^16.3.3",
         "@testing-library/user-event": "^14.6.1",
         "@types/d3": "^7.4.3",
-        "@types/react": "^18.3.18",
-        "@types/react-dom": "^18.3.5",
+        "@types/react": "^19.3.0",
+        "@types/react-dom": "^19.3.0",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
         "jsdom": "^27.0.1",
         "postcss": "^8.5.1",
         "tailwindcss": "^3.4.17",
-        "typescript": "^5.7.3",
+        "typescript": "^7.0.2",
         "vite": "^6.1.0",
         "vitest": "^3.2.4"
       }
@@ -450,10 +450,9 @@
       }
     },
     "node_modules/@codemirror/merge": {
-      "version": "6.12.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.12.2.tgz",
-      "integrity": "sha512-V8JvyAPjHbPupqP7BeMcsdsYCbyPij74jxIbaIJDORI+VZzW44zFmon8bF+oxGWvOKhcRmkiUMXd8MxHr3YA2w==",
-      "license": "MIT",
+      "version": "6.12.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.12.3.tgz",
+      "integrity": "sha512-Wq9wXrp41cW/nIpi1CQPyNwD+36kg8KIX676ym0Hyfn3Dpr+XQHNAIsZYVNlaivuVB4SAASbreG3V0VXinbqZA==",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -478,10 +477,9 @@
       "license": "MIT"
     },
     "node_modules/@codemirror/view": {
-      "version": "6.43.14",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.14.tgz",
-      "integrity": "sha512-hC45YnmJNR1rz42OF57BLoQNFMV12/13drnvibDsR2quNDmldcb4WvYVV81hFQg56i9lcqQMEDqilhX2QDcGQQ==",
-      "license": "MIT",
+      "version": "6.43.15",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.15.tgz",
+      "integrity": "sha512-HHsfpqFeHyXLs983pSRe38Xajs0vFWZQ2BuX0m7Ki8w3jZ5iD8cuR3lBz2/5/X53Dhf32SBHKh6rtSTB6tKeGw==",
       "dependencies": {
         "@codemirror/state": "^6.7.0",
         "crelt": "^1.0.6",
@@ -1661,7 +1659,6 @@
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.3.tgz",
       "integrity": "sha512-Uo193NgQbPMz6lrrhtRQQFcMC6Re/ELLFbbuVL30WDlZxlpZf9/lMHTAVxPRLw1q1iu9OJmR1c2BLiENRstdBg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -2108,30 +2105,21 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.15",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
-      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "license": "MIT"
-    },
     "node_modules/@types/react": {
-      "version": "18.3.31",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz",
-      "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
-      "license": "MIT",
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
       "dependencies": {
-        "@types/prop-types": "*",
         "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
-      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==",
       "dev": true,
-      "license": "MIT",
       "peerDependencies": {
-        "@types/react": "^18.0.0"
+        "@types/react": "^19.3.0"
       }
     },
     "node_modules/@types/unist": {
@@ -2140,6 +2128,326 @@
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@typescript/typescript-aix-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-aix-ppc64/-/typescript-aix-ppc64-7.0.2.tgz",
+      "integrity": "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-arm64/-/typescript-darwin-arm64-7.0.2.tgz",
+      "integrity": "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-x64/-/typescript-darwin-x64-7.0.2.tgz",
+      "integrity": "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-arm64/-/typescript-freebsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-x64/-/typescript-freebsd-x64-7.0.2.tgz",
+      "integrity": "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm/-/typescript-linux-arm-7.0.2.tgz",
+      "integrity": "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm64/-/typescript-linux-arm64-7.0.2.tgz",
+      "integrity": "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-loong64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-loong64/-/typescript-linux-loong64-7.0.2.tgz",
+      "integrity": "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-mips64el": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-mips64el/-/typescript-linux-mips64el-7.0.2.tgz",
+      "integrity": "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-ppc64/-/typescript-linux-ppc64-7.0.2.tgz",
+      "integrity": "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-riscv64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-riscv64/-/typescript-linux-riscv64-7.0.2.tgz",
+      "integrity": "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-s390x": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-s390x/-/typescript-linux-s390x-7.0.2.tgz",
+      "integrity": "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-x64/-/typescript-linux-x64-7.0.2.tgz",
+      "integrity": "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-arm64/-/typescript-netbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-x64/-/typescript-netbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-arm64/-/typescript-openbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-x64/-/typescript-openbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-sunos-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-sunos-x64/-/typescript-sunos-x64-7.0.2.tgz",
+      "integrity": "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-arm64/-/typescript-win32-arm64-7.0.2.tgz",
+      "integrity": "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-x64/-/typescript-win32-x64-7.0.2.tgz",
+      "integrity": "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.4.0.tgz",
@@ -2282,59 +2590,38 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@xterm/addon-canvas": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-canvas/-/addon-canvas-0.7.0.tgz",
-      "integrity": "sha512-LF5LYcfvefJuJ7QotNRdRSPc9YASAVDeoT5uyXS/nZshZXjYplGXRECBGiznwvhNL2I8bq1Lf5MzRwstsYQ2Iw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
-    },
     "node_modules/@xterm/addon-clipboard": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-clipboard/-/addon-clipboard-0.1.0.tgz",
-      "integrity": "sha512-zdoM7p53T5sv/HbRTyp4hY0kKmEQ3MZvAvEtiXqNIHc/JdpqwByCtsTaQF5DX2n4hYdXRPO4P/eOS0QEhX1nPw==",
-      "license": "MIT",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-clipboard/-/addon-clipboard-0.2.0.tgz",
+      "integrity": "sha512-Dl31BCtBhLaUEECUbEiVcCLvLBbaeGYdT7NofB8OJkGTD3MWgBsaLjXvfGAD4tQNHhm6mbKyYkR7XD8kiZsdNg==",
       "dependencies": {
         "js-base64": "^3.7.5"
-      },
-      "peerDependencies": {
-        "@xterm/xterm": "^5.4.0"
       }
     },
     "node_modules/@xterm/addon-fit": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
-      "integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g=="
     },
     "node_modules/@xterm/addon-search": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.15.0.tgz",
-      "integrity": "sha512-ZBZKLQ+EuKE83CqCmSSz5y1tx+aNOCUaA7dm6emgOX+8J9H1FWXZyrKfzjwzV+V14TV3xToz1goIeRhXBS5qjg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-search/-/addon-search-0.16.0.tgz",
+      "integrity": "sha512-9OeuBFu0/uZJPu+9AHKY6g/w0Czyb/Ut0A5t79I4ULoU4IfU5BEpPFVGQxP4zTTMdfZEYkVIRYbHBX1xWwjeSA=="
     },
     "node_modules/@xterm/addon-web-links": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
-      "integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@xterm/xterm": "^5.0.0"
-      }
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.12.0.tgz",
+      "integrity": "sha512-4Smom3RPyVp7ZMYOYDoC/9eGJJJqYhnPLGGqJ6wOBfB8VxPViJNSKdgRYb8NpaM6YSelEKbA2SStD7lGyqaobw=="
+    },
+    "node_modules/@xterm/addon-webgl": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-webgl/-/addon-webgl-0.19.0.tgz",
+      "integrity": "sha512-b3fMOsyLVuCeNJWxolACEUED0vm7qC0cy4wRvf3oURSzDTYVQiGPhTnhWZwIHdvC48Y+oLhvYXnY4XDXPoJo6A=="
     },
     "node_modules/@xterm/xterm": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
-      "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
-      "license": "MIT"
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
+      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg=="
     },
     "node_modules/agent-base": {
       "version": "7.1.4",
@@ -3706,9 +3993,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "26.4.2",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.4.2.tgz",
-      "integrity": "sha512-RX+R0VLg13IbvRuJSxnqykUFS9vQZTl8wYpWPCIUDWVrSGjsQywB5Y+pjzrkboxGAuYfJZVH1InFTdgBdxq6ug==",
+      "version": "26.5.11",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.5.11.tgz",
+      "integrity": "sha512-Wc0klBPKxqZ2tL2qdAnF8xvvnWgr1IMGSY2ikTiAvaFVbz7xiFARtkoU4RidBDw1SyziGROp0qxu6qnJ7l2Wug==",
       "funding": [
         {
           "type": "individual",
@@ -3723,7 +4010,6 @@
           "url": "https://www.locize.com"
         }
       ],
-      "license": "MIT",
       "peerDependencies": {
         "typescript": "^5 || ^6 || ^7"
       },
@@ -3734,12 +4020,11 @@
       }
     },
     "node_modules/i18next-browser-languagedetector": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz",
-      "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==",
-      "license": "MIT",
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.3.tgz",
+      "integrity": "sha512-0jSTK3ncpXj9MFdxRz+TVTKDkSvYH8ifB/OCmUdEMprvXC3vy7kEvdKpj0yYB72B0UKEHJLPMEeRVC/UXroWnw==",
       "dependencies": {
-        "@babel/runtime": "^7.23.2"
+        "@babel/runtime": "^7.29.2"
       }
     },
     "node_modules/iconv-lite": {
@@ -3924,6 +4209,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/jsdom": {
@@ -4022,18 +4308,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
     "node_modules/loupe": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
@@ -4052,12 +4326,17 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.474.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz",
-      "integrity": "sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==",
-      "license": "ISC",
+      "version": "1.61.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.61.0.tgz",
+      "integrity": "sha512-v2SQPPPNjnr+BlhL9Spuzmo5yR+hLkftfuE4E3jaxdNPgSH0hJKPcLJBP7yAta87jQNPsSERS59PJjCJ/CorBA==",
       "peerDependencies": {
+        "@types/react": "*",
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/lz-string": {
@@ -5378,35 +5657,28 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
+      "version": "19.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.3.1.tgz",
+      "integrity": "sha512-QNhWdt7nrgVWWQG58QuGsAR3jv3Hbe4mb4vz7w2csnHavciZJgda1CPNaldF6eVxv90ud3jUXpKlHL69gO38yw==",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "license": "MIT",
+      "version": "19.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.1.tgz",
+      "integrity": "sha512-Y0bARz53lhEC1NMCASs0/j+faB/zqt3R8hpvg1e8+61ZVJ4UL0UdC4cBbXfZMcIuhrfgeILTLe+ZeBCavQPtKQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "^0.28.0"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^19.3.1"
       }
     },
     "node_modules/react-i18next": {
-      "version": "17.0.16",
-      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.16.tgz",
-      "integrity": "sha512-7uImVD9hG5yUOaP5KHVied1x0A004Di/KU031ULR35Ma+9e9H5GdnNZHgQEIByyAz+IAXBkRDTedNVzjPUH8ZA==",
-      "license": "MIT",
+      "version": "17.1.9",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.1.9.tgz",
+      "integrity": "sha512-OgYqIH13XHPlWTaaI795Dz+k2AdKnXcOxNQVnf750T8Ij0TYWp1nYvXRpoJBulPqlyk2OAbn1PM4tFKiIj/byA==",
       "dependencies": {
         "@babel/runtime": "^7.29.7",
         "html-parse-stringify": "^4.0.1",
@@ -5755,13 +6027,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz",
+      "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw=="
     },
     "node_modules/semver": {
       "version": "6.3.1",
@@ -5774,9 +6042,9 @@
       }
     },
     "node_modules/set-cookie-parser": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
-      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.3.tgz",
+      "integrity": "sha512-irZHtTqurLna57KQG/s+fzOwv/J6XSH4cs8M/vsrY3uCaQ3S6+QJguAH0WdN47SXlk82voMZ4naWMQf8fdEoIg=="
     },
     "node_modules/siginfo": {
       "version": "2.0.0",
@@ -6183,17 +6451,37 @@
       "license": "Apache-2.0"
     },
     "node_modules/typescript": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-7.0.2.tgz",
+      "integrity": "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==",
       "devOptional": true,
-      "license": "Apache-2.0",
       "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
+        "tsc": "bin/tsc"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=16.20.0"
+      },
+      "optionalDependencies": {
+        "@typescript/typescript-aix-ppc64": "7.0.2",
+        "@typescript/typescript-darwin-arm64": "7.0.2",
+        "@typescript/typescript-darwin-x64": "7.0.2",
+        "@typescript/typescript-freebsd-arm64": "7.0.2",
+        "@typescript/typescript-freebsd-x64": "7.0.2",
+        "@typescript/typescript-linux-arm": "7.0.2",
+        "@typescript/typescript-linux-arm64": "7.0.2",
+        "@typescript/typescript-linux-loong64": "7.0.2",
+        "@typescript/typescript-linux-mips64el": "7.0.2",
+        "@typescript/typescript-linux-ppc64": "7.0.2",
+        "@typescript/typescript-linux-riscv64": "7.0.2",
+        "@typescript/typescript-linux-s390x": "7.0.2",
+        "@typescript/typescript-linux-x64": "7.0.2",
+        "@typescript/typescript-netbsd-arm64": "7.0.2",
+        "@typescript/typescript-netbsd-x64": "7.0.2",
+        "@typescript/typescript-openbsd-arm64": "7.0.2",
+        "@typescript/typescript-openbsd-x64": "7.0.2",
+        "@typescript/typescript-sunos-x64": "7.0.2",
+        "@typescript/typescript-win32-arm64": "7.0.2",
+        "@typescript/typescript-win32-x64": "7.0.2"
       }
     },
     "node_modules/unified": {

client/package.json

@@ -18,18 +18,18 @@
     "@fontsource/inter": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
     "@fontsource/maple-mono": "^5.3.0",
-    "@xterm/addon-canvas": "^0.7.0",
-    "@xterm/addon-clipboard": "^0.1.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-search": "^0.15.0",
-    "@xterm/addon-web-links": "^0.11.0",
-    "@xterm/xterm": "^5.5.0",
+    "@xterm/addon-clipboard": "^0.2.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
     "d3": "^7.9.0",
     "i18next": "^26.0.8",
     "i18next-browser-languagedetector": "^8.2.1",
-    "lucide-react": "^0.474.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "lucide-react": "^1.61.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "react-i18next": "^17.0.4",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.18.4",
@@ -37,17 +37,17 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.1",
     "@types/d3": "^7.4.3",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "jsdom": "^27.0.1",
     "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3",
+    "typescript": "^7.0.2",
     "vite": "^6.1.0",
     "vitest": "^3.2.4"
   }

client/public/og-image.svg

@@ -49,7 +49,7 @@
     <g transform="translate(20,22)"><rect width="48" height="48" rx="12" fill="#4cc3f5" fill-opacity="0.12"/><rect x="11" y="11" width="11" height="11" rx="3" fill="#4cc3f5"/><rect x="26" y="11" width="11" height="11" rx="3" fill="none" stroke="#4cc3f5" stroke-width="2.5"/><rect x="11" y="26" width="11" height="11" rx="3" fill="none" stroke="#4cc3f5" stroke-width="2.5"/><rect x="26" y="26" width="11" height="11" rx="3" fill="#4cc3f5"/></g>
     <text x="84" y="44" font-family="'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="21" font-weight="700" fill="#f1f5ff">Every AI coding agent</text>
     <text x="84" y="72" font-family="'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#9aa6c4">Claude Code, Codex, Antigravity,</text>
-    <text x="84" y="94" font-family="'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#9aa6c4">Cursor, Kimi, Grok and more</text>
+    <text x="84" y="94" font-family="'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="16" fill="#9aa6c4">Cursor, omp and more</text>
   </g>
   <g transform="translate(792,300)">
     <rect width="344" height="116" rx="16" fill="#ffffff" fill-opacity="0.045" stroke="#ffffff" stroke-opacity="0.10"/>

client/src/components/DocumentTitle.tsx

@@ -24,10 +24,18 @@ export function DocumentTitle() {
     title = `${t("sessions")} · ${sessionId.slice(0, 8)}`;
   } else if (path.startsWith("/sessions")) {
     title = t("sessions");
+  } else if (path.startsWith("/snapshot/")) {
+    title = t("snapshot");
   } else if (path.startsWith("/workspace")) {
     title = t("workspace");
   } else if (path.startsWith("/settings")) {
     title = t("settings");
+  } else if (path.startsWith("/artifacts")) {
+    title = t("artifacts");
+  } else if (path.startsWith("/files")) {
+    title = t("files");
+  } else if (path.startsWith("/admin")) {
+    title = t("admin");
   } else if (path !== "/") {
     title = t("notFound");
   }

client/src/components/HtmlFrame.tsx

@@ -0,0 +1,100 @@
+/**
+ * @file HtmlFrame.tsx
+ * @description An HTML file rendered as a page, the one way every file view
+ * shows one (a Chat file preview, the Changes panel's Preview, the File
+ * Explorer's viewer): its relative CSS, scripts and images pulled in through
+ * the caller's guarded read (`lib/htmlInline.ts`), then run in the chat
+ * artifact's sandbox — `<iframe srcdoc>` with scripts but never the
+ * dashboard's origin (no `allow-same-origin`). Given no `html`, it reads the
+ * file itself through the same `fetchFile`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { FileText, Loader2 } from "lucide-react";
+import { artifactDocument, frameSandbox } from "../lib/artifactView";
+import { blobText, inlineHtml, type FetchFile } from "../lib/htmlInline";
+
+/** A page read by `fetchFile` is shown up to this size. A self-contained
+ *  page (a slide deck with its video and images inlined as base64) is easily
+ *  past 10 MB; the iframe renders far larger documents than this. */
+const HTML_MAX = 64 * 1024 * 1024;
+
+export function HtmlFrame({
+  path,
+  html,
+  fetchFile,
+  title,
+  className = "",
+  testId = "html-frame",
+}: {
+  /** The file's path relative to the place `fetchFile` reads from. */
+  path: string;
+  /** The page's text; read through `fetchFile` when absent. */
+  html?: string;
+  /** Reads the page's relative files; none = the page as it is. */
+  fetchFile?: FetchFile | null;
+  title: string;
+  className?: string;
+  testId?: string;
+}) {
+  const [doc, setDoc] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    let live = true;
+    // The page shown stays until its successor is ready (a version step, a
+    // re-read): no flash of the spinner between two renders of one file.
+    setFailed(false);
+    (async () => {
+      let text = html;
+      if (text === undefined) {
+        if (!fetchFile) throw new Error("nothing to read the page with");
+        const b = await fetchFile(path);
+        if (b.size > HTML_MAX) throw new Error("too big");
+        text = await blobText(b);
+      }
+      const page = text;
+      return fetchFile ? inlineHtml(page, path, fetchFile).catch(() => page) : page;
+    })().then(
+      (d) => live && setDoc(d),
+      () => live && setFailed(true)
+    );
+    return () => {
+      live = false;
+    };
+  }, [html, path, fetchFile]);
+  if (failed) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6 text-center text-sm text-fg-muted">
+        <FileText className="h-8 w-8" />
+        <p className="break-all font-mono text-xs">{path}</p>
+      </div>
+    );
+  }
+  if (doc === null) {
+    return (
+      <div className="flex flex-1 items-center justify-center">
+        <Loader2 className="h-5 w-5 animate-spin text-fg-muted" />
+      </div>
+    );
+  }
+  return (
+    <iframe
+      data-testid={testId}
+      title={title}
+      srcDoc={artifactDocument("html", doc, false) ?? ""}
+      sandbox={frameSandbox("html")}
+      referrerPolicy="no-referrer"
+      className={`min-h-0 w-full flex-1 border-0 bg-white ${className}`}
+    />
+  );
+}
+
+/** A `FetchFile` over a download URL builder (a workspace's or a home's). */
+export function fetchVia(url: (relPath: string) => string): FetchFile {
+  return async (rel) => {
+    const r = await fetch(url(rel), { credentials: "same-origin" });
+    if (!r.ok) throw new Error(String(r.status));
+    return r.blob();
+  };
+}

client/src/components/HtmlViewerModal.tsx

@@ -0,0 +1,109 @@
+/**
+ * @file HtmlViewerModal.tsx
+ * @description An HTML file shown as the page in a modal over the whole
+ * screen — the one viewer the File Explorer and the Changes panel's Preview
+ * open (the Chat's file preview opens its own panel as a modal instead, for
+ * its versions and Code tab). The page itself is `HtmlFrame`: the chat
+ * artifact's sandbox, its relative files read through the caller's guarded
+ * `fetchFile`. Keys and clicks stop at the modal, so a shortcut of the view
+ * underneath (the explorer's Delete) never fires from inside it.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { Download, X } from "lucide-react";
+import { useDialog } from "../hooks/useDialog";
+import { HtmlFrame } from "./HtmlFrame";
+import type { FetchFile } from "../lib/htmlInline";
+
+export function HtmlViewerModal({
+  path,
+  html,
+  fetchFile,
+  onDownload,
+  onClose,
+  testId = "html-viewer",
+}: {
+  /** The file's path relative to the place `fetchFile` reads from; also its title. */
+  path: string;
+  /** The page's text; read through `fetchFile` when absent. */
+  html?: string;
+  fetchFile?: FetchFile | null;
+  onDownload?: () => void;
+  onClose: () => void;
+  testId?: string;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const panelRef = useRef<HTMLDivElement>(null);
+  useDialog(true, panelRef, onClose);
+  const name = path.slice(path.lastIndexOf("/") + 1);
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-3"
+      onClick={(e) => {
+        e.stopPropagation();
+        onClose();
+      }}
+      onKeyDown={(e) => {
+        // Nothing reaches the view underneath — so Esc, which useDialog's
+        // document listener would never see, closes here.
+        e.stopPropagation();
+        if (e.key === "Escape") onClose();
+      }}
+      role="presentation"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={name}
+        data-testid={testId}
+        className="flex h-[92vh] w-[96vw] max-w-7xl flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl shadow-black/50"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+          <span className="min-w-0 flex-1 truncate font-mono text-[13px] text-fg-primary">
+            {path}
+          </span>
+          {onDownload && (
+            <HeadButton label={t("fx.download")} onClick={onDownload}>
+              <Download className="h-4 w-4" />
+            </HeadButton>
+          )}
+          <HeadButton label={t("fx.close")} onClick={onClose}>
+            <X className="h-4 w-4" />
+          </HeadButton>
+        </div>
+        <HtmlFrame path={path} html={html} fetchFile={fetchFile} title={name} />
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+function HeadButton({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick();
+      }}
+      className="rounded-md p-1.5 text-fg-secondary transition-colors hover:bg-surface-2 hover:text-fg-primary"
+    >
+      {children}
+    </button>
+  );
+}

client/src/components/Sagi/SagiAvatar.tsx

@@ -93,7 +93,7 @@ export const SagiAvatar = memo(function SagiAvatar({
   moment = null,
 }: SagiAvatarProps) {
   const rootRef = useRef<SVGSVGElement | null>(null);
-  const rafRef = useRef<number>();
+  const rafRef = useRef<number | undefined>(undefined);
 
   // Pupils follow the cursor whenever motion is allowed and the eyes are open.
   // (Only `sleeping` closes them by intent; `disconnected` hides the open-eye

client/src/components/Sagi/useSagiBrain.ts

@@ -197,11 +197,11 @@ export function useSagiBrain(): SagiBrain {
   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 reactionTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const [muted, setMuted] = useState<boolean>(() => sagiPrefs.getMuted());
 
-  const bubbleTimer = useRef<ReturnType<typeof setTimeout>>();
-  const momentTimer = useRef<ReturnType<typeof setTimeout>>();
+  const bubbleTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const momentTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const lastBubbleAt = useRef(0);
   const burst = useRef<Burst | null>(null);
   const momentKey = useRef(0);

client/src/components/SessionToolBadge.tsx

@@ -1,8 +1,8 @@
 /**
  * @file SessionToolBadge — names the AI coding CLI that produced a session
  * when it is not Claude Code (`sessions.tool` = `codex`, `antigravity`, …, by
- * its AI Tools label). Renders nothing for a Claude session, so the Sessions
- * list and session header look as before for every Claude row.
+ * its AI Tools label). Renders nothing for a Claude session, so the session
+ * header looks as before for every Claude row.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 

client/src/components/StatusBar.tsx

@@ -5,7 +5,8 @@
  * — with a green dot while a newer release is out —, how many SESSIONS are
  * running and how many need the user (`GET /api/sessions?status=active` and
  * `?awaiting=1` — the Dashboard's Needs-you rule —, re-read on session
- * messages), and today's spend — `GET /api/pricing/cost?date=<local date>` — and, on the
+ * messages), and today's spend — `GET /api/pricing/cost?date=<local date>&mine=1`, the
+ * user's OWN spend even for an admin — and, on the
  * Workspace page, the open workspace's total (`?lane=` on the same call: the
  * sessions it owns) and the shown session's (`GET /api/pricing/cost/:id` for
  * the URL's `session`, or the focused pane's session from the page's run poll,
@@ -21,6 +22,9 @@
  * its fullest window, live account only — and, on hover or focus, a panel
  * above grouping every account per tool (saved Claude profiles too): name,
  * sign-in expiry, and a row per window with its bar, percent and reset time.
+ * Server mode: the user's OWN spend quota (`GET /api/me/quota`, read with the
+ * costs) as "Quota N%" — amber from 80 %, red once used up, when the user can
+ * start nothing and their prompts are refused until it opens again.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -29,9 +33,9 @@ import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router-dom";
 import { RefreshCw, Wifi, WifiOff } from "lucide-react";
-import { api, type RunHandle } from "../lib/api";
+import { api, type RunHandle, type UserQuotaStatus } from "../lib/api";
 import type { BudgetStatus, CostResult, ToolQuota } from "../lib/types";
-import { fmt, fmtCostFull, formatModelName, timeAgo } from "../lib/format";
+import { fmt, fmtCostFull, formatDateTime, formatModelName, timeAgo } from "../lib/format";
 import { AiToolIcon } from "./AiToolIcon";
 import { useLiveRefresh } from "../hooks/useLiveRefresh";
 import { useSpin } from "../hooks/useSpin";
@@ -50,9 +54,6 @@ const QUOTA_TOOL_LABEL: Record<ToolQuota["id"], string> = {
   codex: "Codex",
   antigravity: "Antigravity",
   cursor: "Cursor",
-  grok: "Grok",
-  kimi: "Kimi",
-  opencode: "OpenCode Go",
 };
 
 function localDate(d = new Date()): string {
@@ -281,7 +282,7 @@ function QuotaChips() {
   const [open, setOpen] = useState(false);
   // Leaving the chips closes the panel only after a beat, and entering the
   // panel cancels that: the pointer crosses the gap to read it.
-  const closeTimer = useRef<number>();
+  const closeTimer = useRef<number | undefined>(undefined);
   const show = () => {
     window.clearTimeout(closeTimer.current);
     setOpen(true);
@@ -371,6 +372,8 @@ export function StatusBar({
   const [runs, setRuns] = useState<RunHandle[]>([]);
   // The budget furthest past one of its thresholds, if any.
   const [budget, setBudget] = useState<BudgetStatus | null>(null);
+  // Server mode: this user's own spend quota (null: none, or local mode).
+  const [myQuota, setMyQuota] = useState<UserQuotaStatus | null>(null);
   const location = useLocation();
   const shown = selectedFrom(location.pathname, location.search);
   const lane = shown.lane;
@@ -406,7 +409,7 @@ export function StatusBar({
     const gen = costGen.current;
     const live = () => gen === costGen.current;
     api.pricing
-      .totalCost({ date: localDate() })
+      .totalCost({ date: localDate(), mine: true })
       .then((r) => live() && setToday(r))
       .catch(() => undefined);
     api.budgets
@@ -416,6 +419,10 @@ export function StatusBar({
         if (live()) setBudget(hit[0] ?? null);
       })
       .catch(() => undefined);
+    api.me
+      .quota()
+      .then((r) => live() && setMyQuota(r?.quota ?? null))
+      .catch(() => undefined);
     if (lane !== null) {
       api.pricing
         .totalCost({ lane })
@@ -526,6 +533,26 @@ export function StatusBar({
           {t("statusBar.budget", { pct: Math.round(budget.pct) })}
         </Link>
       )}
+      {myQuota && (
+        <span
+          data-testid="status-bar-user-quota"
+          title={t(myQuota.exceeded ? "statusBar.userQuotaBlocked" : "statusBar.userQuotaTitle", {
+            spend: usd(myQuota.spend),
+            limit: usd(myQuota.limit_usd),
+            period: t(`statusBar.userQuotaPeriod.${myQuota.period}`),
+            at: myQuota.resetsAt ? formatDateTime(myQuota.resetsAt) : "",
+          })}
+          className={`tabular-nums ${
+            myQuota.exceeded
+              ? "text-status-danger"
+              : myQuota.pct >= 80
+                ? "text-status-warning"
+                : "text-fg-muted"
+          }`}
+        >
+          {t("statusBar.userQuota", { pct: Math.min(999, Math.round(myQuota.pct)) })}
+        </span>
+      )}
       <QuotaChips />
     </footer>
   );

client/src/components/UpdateNotifier.tsx

@@ -19,9 +19,12 @@
  * background process can do for it. Escape, the backdrop and × close it for
  * this page load only — also while an update applies: it keeps running in the
  * background (the page still reloads itself once the new server is up), and a
- * failure re-opens the modal with its error. While hidden, a small chip in the
- * corner keeps showing the update — with the plugin chain's current step from
- * `plugin_update_progress` — and a click on it shows the modal again; "Skip this version" is the one
+ * failure re-opens the modal with its error. While hidden — or once the status
+ * stops offering the update mid-run — a small chip in the corner keeps showing
+ * it, with the plugin chain's current step from `plugin_update_progress`, and a
+ * click on it shows the modal again. A chain the server reports as running
+ * (started before a reload or from another tab) is adopted the same way;
+ * "Skip this version" is the one
  * persistent, per-version dismiss (never while applying). 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
@@ -242,13 +245,14 @@ export function UpdateNotifier() {
     status?.latest_release ||
     status?.remote_sha ||
     (installed ? `installed:${installed.root}` : null);
-  // Updating replaces the host's install: only an admin is offered it.
+  // Updating replaces the host's install: only an admin is offered it. A
+  // running update stays shown (unless closed) even once the status stops
+  // offering it — the new version may already be on disk before it restarts.
   const show = Boolean(
     isAdmin &&
-    status?.update_available &&
     dismissKey &&
-    dismissedSha !== dismissKey &&
-    closedKey !== dismissKey
+    closedKey !== dismissKey &&
+    (applying || restarting || (status?.update_available && dismissedSha !== dismissKey))
   );
   const busy = applying || restarting || fixing;
 
@@ -256,9 +260,8 @@ export function UpdateNotifier() {
   // poll that reloads the page keep running, and a failure re-opens it.
   const closeForNow = useCallback(() => {
     if (!dismissKey) return;
-    if (applying || restarting) toast.info(t("backgroundNote"));
     setClosedKey(dismissKey);
-  }, [applying, restarting, dismissKey, t]);
+  }, [dismissKey]);
 
   const dismiss = useCallback(() => {
     if (busy || !dismissKey) return;
@@ -344,6 +347,19 @@ export function UpdateNotifier() {
     [syncFromPayload, t]
   );
 
+  // A chain already running on the server (started before a reload, in another
+  // tab, or from the old bundle) is adopted: this tab shows its steps, then
+  // reloads onto the new server like the tab that started it.
+  const running = status?.plugin_update_progress ?? null;
+  const adoptedRef = useRef(false);
+  useEffect(() => {
+    if (!running || !isAdmin || applying || restarting || adoptedRef.current) return;
+    adoptedRef.current = true;
+    setProgress(running);
+    setRestarting(true);
+    pollUntilBack(true, status?.local_version ?? null);
+  }, [running, isAdmin, applying, restarting, pollUntilBack, status?.local_version]);
+
   const applyNow = async () => {
     if (applying || restarting) return;
     setError(null);
@@ -406,8 +422,9 @@ export function UpdateNotifier() {
       })
     : null;
 
-  // Hidden while it runs: a chip keeps it in sight and brings the modal back.
-  if (!show && isAdmin && (applying || restarting) && dismissKey && closedKey === dismissKey) {
+  // Hidden while it runs — closed, or the status no longer offers the update
+  // (the new version is already on disk): a chip keeps it in sight.
+  if (!show && isAdmin && (applying || restarting)) {
     return (
       <button
         type="button"

client/src/components/WorkspaceTree.tsx

@@ -15,6 +15,16 @@
  * 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.
+ * The user's own GROUPS (`lib/workspaceGroups.ts`, kept per account on the
+ * server like the other preferences) arrange the list under foldable headers —
+ * each group in its order, then "Ungrouped" — inside each owner group when
+ * there are owner groups. A workspace joins a group from its menu, by a drop
+ * on the group's header, by a drag that lands it below a row of that
+ * group, or by Alt+↑/↓ past the group's edge; a header is dragged onto
+ * another to reorder the groups, and its menu renames, moves, folds every
+ * group, adds a new workspace straight into it or deletes it (its
+ * workspaces stay, ungrouped). A folded header still shows the worst state
+ * of its workspaces (needs you, error, running) and marks the selected one.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -30,7 +40,7 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
-import { ChevronDown, ChevronRight, Plus, Search } from "lucide-react";
+import { ChevronDown, ChevronRight, FolderPlus, MoreHorizontal, Plus, Search } from "lucide-react";
 import { api, type CwdSuggestion, type RunHandle } from "../lib/api";
 import type { Lane } from "../lib/types";
 import { useLanes } from "../hooks/useLanes";
@@ -46,7 +56,31 @@ import {
   writeLaneOrder,
 } from "../lib/laneOrderStorage";
 import { useProjectTreePrefs, writeProjectTreePrefs } from "../lib/projectTreePrefs";
-import { LANE_DRAG_TYPE, WorkspaceRow, isLaneDrag, workspaceName } from "./lanes/WorkspaceRow";
+import {
+  arrangeByGroup,
+  assignGroup,
+  createGroup,
+  deleteGroup,
+  groupOf,
+  moveGroup,
+  moveGroupBefore,
+  pruneWorkspaceGroups,
+  renameGroup,
+  setAllFolded,
+  setGroupFolded,
+  useWorkspaceGroups,
+  type WorkspaceGroup,
+} from "../lib/workspaceGroups";
+import { confirmDialog } from "../lib/confirm";
+import { ContextMenu, MenuItem, MenuSeparator } from "./ContextMenu";
+import {
+  LANE_DRAG_TYPE,
+  WorkspaceRow,
+  isLaneDrag,
+  workspaceDot,
+  workspaceDotLabel,
+  workspaceName,
+} from "./lanes/WorkspaceRow";
 import { WorkspaceSessionList } from "./lanes/WorkspaceSessionList";
 import { WorkspaceRowMenu, type WorkspaceMenuAction } from "./lanes/WorkspaceRowMenu";
 import { UserAvatar } from "./users/UserAvatar";
@@ -98,8 +132,23 @@ export function WorkspaceTree() {
   );
   const [addOpen, setAddOpen] = useState(false);
   const [addPrefill, setAddPrefill] = useState<{ sourceRepo?: string } | null>(null);
+  // "New workspace in this group": the group the added workspace joins.
+  const [addToGroup, setAddToGroup] = useState<string | null>(null);
   const [cwdSuggestions, setCwdSuggestions] = useState<CwdSuggestion[]>([]);
   const [orderTick, setOrderTick] = useState(0);
+  const groups = useWorkspaceGroups();
+  const hasGroups = groups.groups.length > 0;
+  const [renamingGroup, setRenamingGroup] = useState<string | null>(null);
+  const [groupMenu, setGroupMenu] = useState<{
+    group: WorkspaceGroup;
+    x: number;
+    y: number;
+  } | null>(null);
+  // A removed workspace leaves the stored groups (they hold ids only).
+  const laneIdsKey = lanes.map((l) => l.id).join(",");
+  useEffect(() => {
+    if (laneIdsKey) pruneWorkspaceGroups(laneIdsKey.split(",").map(Number));
+  }, [laneIdsKey]);
 
   // A slot-0 pane starts, ends or learns its session id exactly when a lane's
   // status or session moves, so that is when the live-pane list is re-read;
@@ -126,8 +175,9 @@ export function WorkspaceTree() {
     return () => window.removeEventListener(LIVE_RUNS_EVENT, take);
   }, []);
 
-  const openAdd = (sourceRepo?: string) => {
+  const openAdd = (sourceRepo?: string, groupId: string | null = null) => {
     setAddPrefill(sourceRepo ? { sourceRepo } : null);
+    setAddToGroup(groupId);
     setAddOpen(true);
     api.run
       .cwds()
@@ -148,8 +198,9 @@ export function WorkspaceTree() {
   const toolFilter =
     tools.length > 1 && prefs.tool && tools.includes(prefs.tool) ? prefs.tool : null;
   const sorted = useMemo(() => {
-    const list = sortByStoredOrder(lanes, order).filter(
-      (l) => !toolFilter || l.tool === toolFilter
+    const list = arrangeByGroup(
+      sortByStoredOrder(lanes, order).filter((l) => !toolFilter || l.tool === toolFilter),
+      groups
     );
     if (!grouped) return list;
     // Stable: each owner's workspaces keep the stored order inside the group.
@@ -157,7 +208,7 @@ export function WorkspaceTree() {
     return [...list].sort(
       (a, b) => rank(a) - rank(b) || ownerShown(a).localeCompare(ownerShown(b))
     );
-  }, [lanes, order, toolFilter, grouped, meId]);
+  }, [lanes, order, toolFilter, grouped, meId, groups]);
   const q = query.trim().toLowerCase();
   const nameHit = (l: Lane) =>
     workspaceName(l).toLowerCase().includes(q) || l.cwd.toLowerCase().includes(q);
@@ -190,6 +241,26 @@ export function WorkspaceTree() {
     setOrderTick((n) => n + 1);
   };
 
+  // Alt+↑/↓. Past the edge of its group the workspace stays where it is on
+  // screen and joins the next group instead (the arrangement would otherwise
+  // put it straight back): last of the group above, first of the one below —
+  // opened if folded, so the focused row stays shown. The shown order is
+  // written as it stands, so the store agrees. Never across an owner's section.
+  const nudge = (from: number, to: number) => {
+    const lane = sorted[from];
+    const next = sorted[to];
+    if (lane && next && hasGroups && ownerKey(lane) === ownerKey(next)) {
+      const target = groupOf(groups, next.id);
+      if ((target?.id ?? null) !== (groupOf(groups, lane.id)?.id ?? null)) {
+        assignGroup(lane.id, target?.id ?? null);
+        if (target?.folded) setGroupFolded(target.id, false);
+        reorder((ids) => [...ids]);
+        return;
+      }
+    }
+    reorder((ids) => moveLane(ids, from, to));
+  };
+
   // A row only starts a drag; the whole section takes the drop, so a gap — a
   // workspace's session list, the space above or below a row — lands too.
   // `dropAt` is the insertion point in `sorted`, drawn as a line.
@@ -223,11 +294,74 @@ export function WorkspaceTree() {
       const raw = e.dataTransfer.getData(LANE_DRAG_TYPE);
       // Number("") is 0: an empty payload must not move the first row.
       const from = raw === "" ? NaN : Number(raw);
+      if (!Number.isInteger(from)) return;
+      const lane = sorted[from];
+      // Dropped on a group's header: into that group, at its top.
+      const header = (e.target as HTMLElement).closest<HTMLElement>("[data-group-drop]");
+      if (header && lane) {
+        const gid = header.dataset.groupDrop || null;
+        assignGroup(lane.id, gid);
+        const first = sorted.findIndex(
+          (l) => (groups.of[l.id] ?? null) === gid && l.id !== lane.id
+        );
+        if (first >= 0) reorder((ids) => moveBefore(ids, from, first));
+        return;
+      }
       const before = dropIndexAt(e.clientY);
-      if (Number.isInteger(from)) reorder((ids) => moveBefore(ids, from, before));
+      // Elsewhere it joins the group of the row it now sits under (the line
+      // drawn above a header closes the section before it).
+      if (lane && hasGroups) {
+        const rest = sorted.filter((l) => l.id !== lane.id);
+        const at = sorted.slice(0, before).filter((l) => l.id !== lane.id).length;
+        const neighbour = rest[at - 1] ?? rest[0];
+        if (neighbour) assignGroup(lane.id, groups.of[neighbour.id] ?? null);
+      }
+      reorder((ids) => moveBefore(ids, from, before));
     },
   };
 
+  // A group no workspace is in yet still shows (to be renamed, or dropped on),
+  // just above the ungrouped ones; a search hides it.
+  const emptyGroups = q
+    ? []
+    : groups.groups.filter((g) => !sorted.some((l) => groups.of[l.id] === g.id));
+  const firstUngrouped = hasGroups ? sorted.findIndex((l) => !groupOf(groups, l.id)) : -1;
+  const groupHeader = (g: WorkspaceGroup | null, members: Lane[], first: boolean) => (
+    <GroupHeader
+      key={g?.id ?? "none"}
+      group={g}
+      count={members.length}
+      // What a folded group hides: the most urgent of its workspaces, and
+      // whether the open one is among them.
+      worst={worstOf(members)}
+      holdsSelected={members.some((l) => l.id === selected.lane)}
+      onGroupDrop={(dragged) => moveGroupBefore(dragged, g?.id ?? null)}
+      folded={!!g?.folded && !q}
+      renaming={!!g && renamingGroup === g.id}
+      first={first}
+      onToggle={() => g && setGroupFolded(g.id, !g.folded)}
+      onMenu={(x, y) => g && setGroupMenu({ group: g, x, y })}
+      onRenameEnd={(name) => {
+        setRenamingGroup(null);
+        if (g && name !== null) renameGroup(g.id, name);
+      }}
+    />
+  );
+
+  const newGroup = (laneIds: number[] = []) => {
+    const id = createGroup(t("tree.groupDefaultName"), laneIds);
+    setRenamingGroup(id);
+  };
+  const removeGroup = async (g: WorkspaceGroup) => {
+    const ok = await confirmDialog({
+      title: t("tree.groupDelete"),
+      message: t("tree.groupDeleteConfirm", { name: g.name }),
+      confirmLabel: t("tree.groupDelete"),
+    });
+    if (!ok) return;
+    deleteGroup(g.id);
+  };
+
   const rename = async (lane: Lane, title: string | null) => {
     setRenamingId(null);
     if (title === null || title === (lane.title || "")) return;
@@ -304,6 +438,16 @@ export function WorkspaceTree() {
         >
           <Search className="h-3.5 w-3.5" />
         </button>
+        <button
+          type="button"
+          data-testid="workspace-tree-new-group"
+          onClick={() => newGroup()}
+          aria-label={t("tree.newGroup")}
+          title={t("tree.newGroup")}
+          className={headBtn}
+        >
+          <FolderPlus className="h-3.5 w-3.5" />
+        </button>
         <button
           type="button"
           data-testid="workspace-tree-add"
@@ -347,6 +491,16 @@ export function WorkspaceTree() {
                 : 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));
+          // The user's own group, inside the owner's.
+          const ug = groupOf(groups, lane.id);
+          const ugKey = ug?.id ?? "";
+          const sameSection = (l: Lane) =>
+            ownerKey(l) === owner && (groupOf(groups, l.id)?.id ?? "") === ugKey;
+          const prev = sorted[i - 1];
+          const sectionStart = hasGroups && (groupStart || !prev || !sameSection(prev));
+          const sectionShown = sorted.some((l) => sameSection(l) && visible(l));
+          const sectionFolded = !!ug?.folded && !q;
+          const hiddenRow = folded || sectionFolded;
           return (
             <div key={lane.id} className="relative">
               {groupStart && groupShown && (
@@ -381,8 +535,13 @@ export function WorkspaceTree() {
                   </span>
                 </button>
               )}
+              {i === firstUngrouped && emptyGroups.map((g) => groupHeader(g, [], false))}
+              {sectionStart &&
+                sectionShown &&
+                !folded &&
+                groupHeader(ug, sorted.filter(sameSection), i === 0 || !!groupStart)}
               {dropAt === i && <DropLine />}
-              {visible(lane) && !folded && (
+              {visible(lane) && !hiddenRow && (
                 <WorkspaceRow
                   lane={lane}
                   index={i}
@@ -398,13 +557,13 @@ export function WorkspaceTree() {
                   }}
                   onToggle={() => setExpanded(lane.id, !expanded(lane.id))}
                   onNewSession={() => select(lane.id)}
-                  onReorder={(from, to) => reorder((ids) => moveLane(ids, from, to))}
+                  onReorder={nudge}
                   onMenu={(x, y) => setMenu({ lane, x, y })}
                   onRenameStart={() => setRenamingId(lane.id)}
                   onRenameEnd={(title) => void rename(lane, title)}
                 />
               )}
-              {expanded(lane.id) && !folded && (
+              {expanded(lane.id) && !hiddenRow && (
                 <WorkspaceSessionList
                   lane={lane}
                   liveRuns={liveRuns}
@@ -420,6 +579,8 @@ export function WorkspaceTree() {
             </div>
           );
         })}
+        {firstUngrouped === -1 &&
+          emptyGroups.map((g, k) => groupHeader(g, [], k === 0 && sorted.length === 0))}
         {dropAt === sorted.length && (
           <div className="relative">
             <DropLine />
@@ -440,8 +601,92 @@ export function WorkspaceTree() {
           y={menu.y}
           onClose={() => setMenu(null)}
           onAction={(a) => onMenuAction(menu.lane, a)}
+          groups={groups.groups}
+          groupId={groups.of[menu.lane.id] ?? null}
+          onGroup={(target) => {
+            const id = menu.lane.id;
+            setMenu(null);
+            if (target === "new") newGroup([id]);
+            else assignGroup(id, target);
+          }}
         />
       )}
+      {groupMenu && (
+        <ContextMenu
+          x={groupMenu.x}
+          y={groupMenu.y}
+          onClose={() => setGroupMenu(null)}
+          testId={`workspace-group-menu-${groupMenu.group.id}`}
+        >
+          <MenuItem
+            onSelect={() => {
+              setRenamingGroup(groupMenu.group.id);
+              setGroupMenu(null);
+            }}
+          >
+            {t("tree.groupRename")}
+          </MenuItem>
+          <MenuItem
+            disabled={groups.groups[0]?.id === groupMenu.group.id}
+            onSelect={() => {
+              moveGroup(groupMenu.group.id, -1);
+              setGroupMenu(null);
+            }}
+          >
+            {t("tree.groupMoveUp")}
+          </MenuItem>
+          <MenuItem
+            disabled={groups.groups[groups.groups.length - 1]?.id === groupMenu.group.id}
+            onSelect={() => {
+              moveGroup(groupMenu.group.id, 1);
+              setGroupMenu(null);
+            }}
+          >
+            {t("tree.groupMoveDown")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            testId="workspace-group-add"
+            onSelect={() => {
+              const g = groupMenu.group;
+              setGroupMenu(null);
+              openAdd(undefined, g.id);
+            }}
+          >
+            {t("tree.groupAddWorkspace")}
+          </MenuItem>
+          <MenuItem
+            testId="workspace-group-fold-all"
+            onSelect={() => {
+              setGroupMenu(null);
+              setAllFolded(true);
+            }}
+          >
+            {t("tree.groupFoldAll")}
+          </MenuItem>
+          <MenuItem
+            testId="workspace-group-unfold-all"
+            onSelect={() => {
+              setGroupMenu(null);
+              setAllFolded(false);
+            }}
+          >
+            {t("tree.groupUnfoldAll")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            danger
+            testId="workspace-group-delete"
+            onSelect={() => {
+              const g = groupMenu.group;
+              setGroupMenu(null);
+              void removeGroup(g);
+            }}
+          >
+            {t("tree.groupDelete")}
+          </MenuItem>
+        </ContextMenu>
+      )}
       <Suspense fallback={null}>
         {destructive && (
           <DestructiveLaneModal
@@ -460,8 +705,10 @@ export function WorkspaceTree() {
             onClose={() => {
               setAddOpen(false);
               setAddPrefill(null);
+              setAddToGroup(null);
             }}
             onAdded={(lane) => {
+              if (addToGroup) assignGroup(lane.id, addToGroup);
               void refreshLanes();
               select(lane.id);
             }}
@@ -472,9 +719,167 @@ export function WorkspaceTree() {
   );
 }
 
+/** What a group header's drag carries: the group's id. */
+const GROUP_DRAG_TYPE = "application/x-agenthub-workspace-group";
+const isGroupDrag = (e: { dataTransfer: DataTransfer | null }) =>
+  !!e.dataTransfer?.types?.includes(GROUP_DRAG_TYPE);
+
+// needsYou outranks an error, an error a running agent; idle/active say nothing.
+const URGENCY: Record<string, number> = { needsYou: 3, error: 2, running: 1 };
+/** The most urgent of `lanes` by its dot, or null when all are at rest. */
+function worstOf(lanes: Lane[]): Lane | null {
+  let best: Lane | null = null;
+  let top = 0;
+  for (const l of lanes) {
+    const u = URGENCY[workspaceDotLabel(l)] ?? 0;
+    if (u > top) [best, top] = [l, u];
+  }
+  return best;
+}
+
 /** A workspace's owner group: its user id, or "none". */
 const ownerKey = (l: Lane) => (l.owner_id == null ? "none" : String(l.owner_id));
 
+/**
+ * A section's header: a user group (foldable, menu, inline rename) or, with
+ * `group` null, "Ungrouped". Both take a dropped workspace (`data-group-drop`).
+ */
+function GroupHeader({
+  group,
+  count,
+  worst,
+  holdsSelected,
+  folded,
+  renaming,
+  first,
+  onToggle,
+  onMenu,
+  onRenameEnd,
+  onGroupDrop,
+}: {
+  group: WorkspaceGroup | null;
+  count: number;
+  /** The most urgent workspace inside, drawn as its dot while folded. */
+  worst: Lane | null;
+  /** The open workspace is in this group (marked while folded). */
+  holdsSelected: boolean;
+  folded: boolean;
+  renaming: boolean;
+  first: boolean;
+  onToggle: () => void;
+  onMenu: (x: number, y: number) => void;
+  /** The typed name, or null when the edit was cancelled. */
+  onRenameEnd: (name: string | null) => void;
+  /** A group header (by id) dropped here: it goes before this group, or last on "Ungrouped". */
+  onGroupDrop: (draggedId: string) => void;
+}) {
+  const { t } = useTranslation("lanes");
+  const [draft, setDraft] = useState(group?.name ?? "");
+  const [dropOver, setDropOver] = useState(false);
+  useEffect(() => {
+    if (renaming) setDraft(group?.name ?? "");
+  }, [renaming, group?.name]);
+  const label = group ? group.name : t("tree.ungrouped");
+  return (
+    <div
+      data-group-drop={group?.id ?? ""}
+      data-testid={`workspace-group-${group?.id ?? "none"}`}
+      onContextMenu={(e) => {
+        if (!group) return;
+        e.preventDefault();
+        onMenu(e.clientX, e.clientY);
+      }}
+      // A group (never "Ungrouped") is dragged by its header to reorder.
+      draggable={!!group && !renaming}
+      onDragStart={(e) => {
+        if (!group) return;
+        e.dataTransfer.setData(GROUP_DRAG_TYPE, group.id);
+        e.dataTransfer.effectAllowed = "move";
+      }}
+      onDragOver={(e) => {
+        if (!isGroupDrag(e)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setDropOver(true);
+      }}
+      onDragLeave={() => setDropOver(false)}
+      onDrop={(e) => {
+        setDropOver(false);
+        if (!isGroupDrag(e)) return;
+        e.preventDefault();
+        const id = e.dataTransfer.getData(GROUP_DRAG_TYPE);
+        if (id) onGroupDrop(id);
+      }}
+      className={`group/gh flex items-center gap-1 rounded px-1 py-0.5 text-[11px] font-semibold text-fg-muted ${first ? "" : "mt-1.5"} ${dropOver ? "shadow-[inset_0_2px_0_rgb(var(--accent))]" : ""}`}
+    >
+      {renaming && group ? (
+        <input
+          autoFocus
+          value={draft}
+          maxLength={60}
+          aria-label={t("tree.groupNameLabel")}
+          onChange={(e) => setDraft(e.target.value)}
+          onFocus={(e) => e.currentTarget.select()}
+          onBlur={() => onRenameEnd(draft)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onRenameEnd(draft);
+            else if (e.key === "Escape") onRenameEnd(null);
+          }}
+          className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-1 py-0.5 text-[11px] font-normal text-fg-primary"
+        />
+      ) : (
+        <button
+          type="button"
+          aria-expanded={group ? !folded : undefined}
+          disabled={!group}
+          title={group ? t("tree.groupToggle", { name: label }) : undefined}
+          onClick={onToggle}
+          className="flex min-w-0 flex-1 items-center gap-1 text-left hover:text-fg-primary disabled:hover:text-fg-muted"
+        >
+          {group ? (
+            folded ? (
+              <ChevronRight className="h-3 w-3 shrink-0" />
+            ) : (
+              <ChevronDown className="h-3 w-3 shrink-0" />
+            )
+          ) : (
+            <span className="w-3 shrink-0" />
+          )}
+          <span
+            className={`truncate uppercase tracking-wide ${folded && holdsSelected ? "text-accent" : ""}`}
+          >
+            {label}
+          </span>
+          <span className="ml-1 shrink-0 font-normal tabular-nums">{count}</span>
+          {folded && worst && (
+            <span
+              data-testid={`workspace-group-state-${group?.id ?? "none"}`}
+              className="ml-1 flex shrink-0 items-center"
+            >
+              <span aria-hidden className={`h-1.5 w-1.5 rounded-full ${workspaceDot(worst)}`} />
+              <span className="sr-only">{t(`row.state.${workspaceDotLabel(worst)}`)}</span>
+            </span>
+          )}
+        </button>
+      )}
+      {group && !renaming && (
+        <button
+          type="button"
+          aria-label={t("tree.groupMenu")}
+          title={t("tree.groupMenu")}
+          onClick={(e) => {
+            const r = e.currentTarget.getBoundingClientRect();
+            onMenu(r.left, r.bottom);
+          }}
+          className="rounded p-0.5 opacity-0 hover:bg-surface-4 hover:text-fg-primary focus:opacity-100 group-hover/gh:opacity-100"
+        >
+          <MoreHorizontal className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}
+
 /** Where a dragged workspace would land: a line on its parent's top edge. */
 function DropLine() {
   return (

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

@@ -13,7 +13,7 @@ import { AgentCard } from "../AgentCard";
 import type { Agent } from "../../lib/types";
 import { formatModelName, fmtCost } from "../../lib/format";
 
-function renderCard(element: JSX.Element) {
+function renderCard(element: React.JSX.Element) {
   return render(<MemoryRouter>{element}</MemoryRouter>);
 }
 

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

@@ -34,5 +34,13 @@ describe("DocumentTitle", () => {
     expect(titleFor("/")).toMatch(/^Dashboard · /);
     expect(titleFor("/sessions")).toMatch(/^Sessions · /);
     expect(titleFor("/settings")).toMatch(/^Settings · /);
+    expect(titleFor("/artifacts")).toMatch(/^Artifacts · /);
+    expect(titleFor("/files")).toMatch(/^Files · /);
+    expect(titleFor("/admin")).toMatch(/^Administration · /);
+    expect(titleFor("/snapshot/abc")).toMatch(/^Snapshot · /);
+  });
+
+  it("titles an unknown route as not found", () => {
+    expect(titleFor("/nope")).toMatch(/^Not found · /);
   });
 });

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

@@ -129,6 +129,20 @@ vi.mock("../../lib/api", () => ({
         daily_costs: [],
       })),
     },
+    me: {
+      // Server mode: this user's own spend quota, used up.
+      quota: vi.fn().mockResolvedValue({
+        quota: {
+          limit_usd: 10,
+          period: "day",
+          spend: 12,
+          pct: 120,
+          exceeded: true,
+          resetsAt: "2026-10-29T17:00:00.000Z",
+          since: "2026-10-28T17:00:00.000Z",
+        },
+      }),
+    },
     budgets: {
       status: vi.fn().mockResolvedValue({
         budgets: [
@@ -151,7 +165,7 @@ import { api } from "../../lib/api";
 import { StatusBar } from "../StatusBar";
 import { LIVE_RUNS_EVENT } from "../WorkspaceTree";
 
-const at = (url: string, ui: JSX.Element) =>
+const at = (url: string, ui: React.JSX.Element) =>
   render(<MemoryRouter initialEntries={[url]}>{ui}</MemoryRouter>);
 
 describe("StatusBar", () => {
@@ -162,7 +176,7 @@ describe("StatusBar", () => {
     const conn = screen.getByRole("button", { name: /Live/ });
     expect(conn).toHaveTextContent(`v${__APP_VERSION__}`);
     const cost = await screen.findByText("Today $1.23 (12.3M Tokens)");
-    expect(api.pricing.totalCost).toHaveBeenCalledWith({ date: today() });
+    expect(api.pricing.totalCost).toHaveBeenCalledWith({ date: today(), mine: true });
     expect(cost).toHaveAttribute(
       "title",
       "Claude Opus 4.8: 12.0M · $1.20\nClaude Haiku 4.5: 300.0K · $0.03"
@@ -183,6 +197,16 @@ describe("StatusBar", () => {
     expect(chip.getAttribute("title")).toBe("Monthly: $85.00 of $100.00 this period");
   });
 
+  it("shows the user's own spend quota, red once used up", async () => {
+    at("/", <StatusBar wsConnected left="0" onConnectionClick={() => {}} />);
+    const chip = await screen.findByTestId("status-bar-user-quota");
+    expect(chip.textContent).toBe("Quota 120%");
+    expect(chip.className).toContain("text-status-danger");
+    expect(chip.getAttribute("title")).toMatch(
+      /^Your spend quota is used up \(\$12\.00 of \$10\.00 today\)/
+    );
+  });
+
   it("says Disconnected when the socket is down", () => {
     at("/", <StatusBar wsConnected={false} left="0" onConnectionClick={() => {}} />);
     expect(screen.getByRole("button", { name: /Disconnected/ })).toBeInTheDocument();

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

@@ -353,6 +353,39 @@ describe("UpdateNotifier — hidden while it runs", () => {
     expect(screen.queryByTestId("update-chip")).toBeNull();
   });
 
+  it("adopts a chain the server reports as running, and keeps it once the update is no longer offered", async () => {
+    const running: UpdateStatusPayload = {
+      ...BASE_STATUS,
+      situation: "plugin_managed",
+      install_kind: "plugin",
+      plugin_marketplace: "sg",
+      plugin_name: "agenthub",
+      commits_behind: 0,
+      local_version: "1.5.0",
+      release_check: "ok",
+      latest_release: "v1.6.0",
+      // The new version is already installed: the status no longer offers it.
+      update_available: false,
+      plugin_update_progress: {
+        step: "bootstrap",
+        index: 3,
+        total: 3,
+        started_at: new Date().toISOString(),
+      },
+    };
+    statusMock.mockResolvedValue(running);
+    render(<UpdateNotifier />);
+    const step = i18n.t("updates:pluginStep.bootstrap", { index: 3, total: 3 });
+    expect(await screen.findByTestId("update-step")).toHaveTextContent(step);
+    expect(screen.queryByText(i18n.t("updates:updateNow"))).toBeNull();
+
+    await userEvent.keyboard("{Escape}");
+    const chip = await screen.findByTestId("update-chip");
+    expect(chip).toHaveTextContent(step);
+    await userEvent.click(chip);
+    expect(await screen.findByTestId("update-step")).toHaveTextContent(step);
+  });
+
   it("shows no chip when nothing is running", async () => {
     render(<UpdateNotifier />);
     await screen.findByText(i18n.t("updates:title"));

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

@@ -3,10 +3,13 @@
  * @description Tests for the sidebar's workspace list: one flat row per
  * workspace in the stored order, a row expanding to its sessions (remembered),
  * a live session opening its pane and an ended one its transcript, the
- * workspace's OWN sessions only, a session's state dot, rename and archive,
+ * workspace's OWN sessions only, a session's state dot, rename and archive
+ * (a live one's pane stopped first),
  * selection
  * by URL, Alt+arrow reordering kept in localStorage, double-click rename, the
- * search, the row menu's items by kind and tool, and the status dot.
+ * search, the row menu's items by kind and tool, the status dot, and the
+ * user's own groups (menu, Alt+arrow past a group's edge, a folded group's
+ * state dot, dragging a header to reorder, fold all).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -91,6 +94,20 @@ vi.mock("../../lib/api", async (importOriginal) => {
   };
 });
 
+// The Add modal reports the workspace it made (id 2 here); the tree does the rest.
+vi.mock("../lanes/AddLaneModal", () => ({
+  AddLaneModal: ({ onAdded, onClose }: { onAdded: (l: Lane) => void; onClose: () => void }) => (
+    <button
+      type="button"
+      data-testid="stub-add-lane"
+      onClick={() => {
+        onAdded(lane(2, "/r/sub"));
+        onClose();
+      }}
+    />
+  ),
+}));
+
 import { api } from "../../lib/api";
 import { WorkspaceTree } from "../WorkspaceTree";
 import { workspaceDot } from "../lanes/WorkspaceRow";
@@ -209,6 +226,8 @@ describe("WorkspaceTree", () => {
     await user.type(input, "Better name{Enter}");
     expect(api.sessions.patch).toHaveBeenCalledWith("s-old", { name: "Better name" });
     await user.click(screen.getByTestId("workspace-session-archive-s-live"));
+    // A live session's Archive stops its pane first — never a hidden pane left running.
+    expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1-2", { archive: true });
     expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { archived: true });
   });
 
@@ -576,6 +595,185 @@ describe("WorkspaceTree", () => {
     menu = screen.getByTestId("workspace-row-menu-3");
     expect(within(menu).getByText("Reset worktree…")).toBeInTheDocument();
   });
+
+  it("groups workspaces under named, foldable headers, ungrouped last", async () => {
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-row-1");
+    // No group yet: no headers at all.
+    expect(screen.queryByTestId("workspace-group-none")).toBeNull();
+
+    // A new group from the row menu holds that workspace and asks for a name.
+    await user.click(screen.getByTestId("workspace-menu-3"));
+    await user.click(screen.getByTestId("workspace-move-group-new"));
+    const name = await screen.findByRole("textbox", { name: "Group name" });
+    await user.clear(name);
+    await user.type(name, "Backend{Enter}");
+    const stored = JSON.parse(localStorage.getItem("agenthub.workspace.groups")!);
+    expect(stored.groups).toEqual([expect.objectContaining({ name: "Backend" })]);
+    const gid = stored.groups[0].id as string;
+    expect(stored.of).toEqual({ 3: gid });
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-1", "workspace-row-2"])
+    );
+    expect(screen.getByTestId(`workspace-group-${gid}`)).toHaveTextContent("Backend1");
+    expect(screen.getByTestId("workspace-group-none")).toHaveTextContent("Ungrouped2");
+
+    // Another workspace joins it from its menu.
+    await user.click(screen.getByTestId("workspace-menu-2"));
+    await user.click(screen.getByTestId(`workspace-move-group-${gid}`));
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-2", "workspace-row-3", "workspace-row-1"])
+    );
+
+    // Folding hides its rows; the ungrouped one stays.
+    await user.click(
+      within(screen.getByTestId(`workspace-group-${gid}`)).getByRole("button", {
+        expanded: true,
+      })
+    );
+    expect(rowIds()).toEqual(["workspace-row-1"]);
+
+    // Deleting the group only ungroups: every workspace is still listed.
+    fireEvent.contextMenu(screen.getByTestId(`workspace-group-${gid}`));
+    await user.click(screen.getByTestId("workspace-group-delete"));
+    await waitFor(() => expect(rowIds()).toHaveLength(3));
+    expect(screen.queryByTestId("workspace-group-none")).toBeNull();
+    expect(api.lanes.update).not.toHaveBeenCalled();
+  });
+
+  it("shows a new, empty group to be named, above the ungrouped workspaces", async () => {
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-row-1");
+    await user.click(screen.getByTestId("workspace-tree-new-group"));
+    const name = await screen.findByRole("textbox", { name: "Group name" });
+    await user.clear(name);
+    await user.type(name, "Later{Enter}");
+    const gid = JSON.parse(localStorage.getItem("agenthub.workspace.groups")!).groups[0].id;
+    const header = screen.getByTestId(`workspace-group-${gid}`);
+    expect(header).toHaveTextContent("Later0");
+    expect(
+      header.compareDocumentPosition(screen.getByTestId("workspace-group-none")) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy();
+    expect(rowIds()).toHaveLength(3);
+  });
+});
+
+describe("WorkspaceTree groups", () => {
+  // Groups A = [1], B = [3]; 2 ungrouped. Stored order 1, 2, 3.
+  const seed = (extra: { folded?: boolean } = {}) =>
+    localStorage.setItem(
+      "agenthub.workspace.groups",
+      JSON.stringify({
+        groups: [
+          { id: "ga", name: "Alpha", ...extra },
+          { id: "gb", name: "Beta" },
+        ],
+        of: { 1: "ga", 3: "gb" },
+      })
+    );
+  const stored = () => JSON.parse(localStorage.getItem("agenthub.workspace.groups")!);
+
+  it("moves a workspace into the next group with Alt+arrow past its edge", async () => {
+    seed();
+    const user = userEvent.setup();
+    renderTree();
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-3", "workspace-row-2"])
+    );
+    // The last of Alpha, Alt+↓: the first of Beta.
+    screen.getByTestId("workspace-open-1").focus();
+    await user.keyboard("{Alt>}{ArrowDown}{/Alt}");
+    expect(stored().of).toEqual({ 1: "gb", 3: "gb" });
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-1", "workspace-row-3", "workspace-row-2"])
+    );
+    expect(screen.getByTestId("workspace-group-gb")).toHaveTextContent("Beta2");
+    // The last of Beta, Alt+↓: out into the ungrouped ones.
+    screen.getByTestId("workspace-open-3").focus();
+    await user.keyboard("{Alt>}{ArrowDown}{/Alt}");
+    expect(stored().of).toEqual({ 1: "gb" });
+    expect(api.lanes.update).not.toHaveBeenCalled();
+  });
+
+  it("shows a folded group's most urgent state and marks the open workspace", async () => {
+    lanes[0] = lane(1, "/r", { title: "Repo", status: "running" });
+    seed({ folded: true });
+    renderTree("/workspace?lane=1");
+    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-2"]));
+    const state = screen.getByTestId("workspace-group-state-ga");
+    expect(state).toHaveTextContent("running");
+    expect(within(screen.getByTestId("workspace-group-ga")).getByText("Alpha")).toHaveClass(
+      "text-accent"
+    );
+    // An open group shows its rows instead.
+    expect(screen.queryByTestId("workspace-group-state-gb")).toBeNull();
+  });
+
+  it("reorders groups by dragging a header onto another, last onto Ungrouped", async () => {
+    seed();
+    renderTree();
+    await screen.findByTestId("workspace-group-gb");
+    const data = new Map<string, string>();
+    const dataTransfer = {
+      get types() {
+        return [...data.keys()];
+      },
+      setData: (k: string, v: string) => data.set(k, v),
+      getData: (k: string) => data.get(k) ?? "",
+      dropEffect: "move",
+      effectAllowed: "move",
+    };
+    fireEvent.dragStart(screen.getByTestId("workspace-group-gb"), { dataTransfer });
+    fireEvent.dragOver(screen.getByTestId("workspace-group-ga"), { dataTransfer });
+    fireEvent.drop(screen.getByTestId("workspace-group-ga"), { dataTransfer });
+    expect(stored().groups.map((g: { id: string }) => g.id)).toEqual(["gb", "ga"]);
+    await waitFor(() =>
+      expect(rowIds()).toEqual(["workspace-row-3", "workspace-row-1", "workspace-row-2"])
+    );
+    data.clear();
+    fireEvent.dragStart(screen.getByTestId("workspace-group-gb"), { dataTransfer });
+    fireEvent.drop(screen.getByTestId("workspace-group-none"), { dataTransfer });
+    expect(stored().groups.map((g: { id: string }) => g.id)).toEqual(["ga", "gb"]);
+    // A header drag never moves a workspace.
+    expect(stored().of).toEqual({ 1: "ga", 3: "gb" });
+  });
+
+  it("puts a workspace added from a group's menu into that group", async () => {
+    seed();
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-group-gb");
+    fireEvent.contextMenu(screen.getByTestId("workspace-group-gb"));
+    await user.click(screen.getByTestId("workspace-group-add"));
+    await user.click(await screen.findByTestId("stub-add-lane"));
+    expect(stored().of).toEqual({ 1: "ga", 2: "gb", 3: "gb" });
+    // The header's own Add belongs to no group: what it adds stays where it is.
+    act(() =>
+      localStorage.setItem(
+        "agenthub.workspace.groups",
+        JSON.stringify({ ...stored(), of: { 1: "ga" } })
+      )
+    );
+    await user.click(screen.getByTestId("workspace-tree-add"));
+    await user.click(await screen.findByTestId("stub-add-lane"));
+    expect(stored().of).toEqual({ 1: "ga" });
+  });
+
+  it("folds and unfolds every group from a header's menu", async () => {
+    seed();
+    const user = userEvent.setup();
+    renderTree();
+    await screen.findByTestId("workspace-group-ga");
+    fireEvent.contextMenu(screen.getByTestId("workspace-group-ga"));
+    await user.click(screen.getByTestId("workspace-group-fold-all"));
+    await waitFor(() => expect(rowIds()).toEqual(["workspace-row-2"]));
+    fireEvent.contextMenu(screen.getByTestId("workspace-group-gb"));
+    await user.click(screen.getByTestId("workspace-group-unfold-all"));
+    await waitFor(() => expect(rowIds()).toHaveLength(3));
+  });
 });
 
 describe("workspaceDot", () => {

client/src/components/admin/MiniChart.tsx

@@ -0,0 +1,165 @@
+/**
+ * @file MiniChart.tsx
+ * @description The Administration page's small single-series charts: a bar
+ * chart (a user's daily spend) and a line chart (System Health's CPU and
+ * memory history), plain SVG in the app's theme tokens. One series each — the
+ * card's title names it, so there is no legend — thin marks, rounded bar ends
+ * on the baseline, a recessive grid with a max label, and a hover tooltip
+ * (crosshair for the line, per bar for the bars) whose text is the caller's.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useRef, useState, type MouseEvent } from "react";
+
+export type ChartPoint = { x: string; y: number };
+
+const H = 120;
+const PAD_TOP = 14;
+const PAD_BOTTOM = 18;
+
+/**
+ * @param props.points - In x order; `x` is the axis/tooltip label.
+ * @param props.kind - `bar` or `line`.
+ * @param props.format - Formats a value for the max label and the tooltip.
+ * @param props.max - A fixed top (e.g. 100 for a percentage); else the data's max.
+ * @param props.label - The chart's accessible name.
+ */
+export function MiniChart({
+  points,
+  kind,
+  format,
+  max,
+  label,
+  emptyText,
+}: {
+  points: ChartPoint[];
+  kind: "bar" | "line";
+  format: (v: number) => string;
+  max?: number;
+  label: string;
+  emptyText?: string;
+}) {
+  const ref = useRef<SVGSVGElement>(null);
+  const [hover, setHover] = useState<number | null>(null);
+  if (points.length === 0)
+    return (
+      <div className="flex h-[120px] items-center justify-center text-xs text-fg-muted">
+        {emptyText ?? "—"}
+      </div>
+    );
+
+  const W = 600;
+  const top = Math.max(max ?? 0, ...points.map((p) => p.y), 1e-9);
+  const plotH = H - PAD_TOP - PAD_BOTTOM;
+  const yOf = (v: number) => PAD_TOP + plotH - (v / top) * plotH;
+  const step = W / points.length;
+  const xOf = (i: number) =>
+    kind === "bar" ? i * step + step / 2 : (i / Math.max(1, points.length - 1)) * W;
+
+  const onMove = (e: MouseEvent<SVGSVGElement>) => {
+    const r = ref.current?.getBoundingClientRect();
+    if (!r || r.width === 0) return;
+    const fx = ((e.clientX - r.left) / r.width) * W;
+    const i =
+      kind === "bar"
+        ? Math.floor(fx / step)
+        : Math.round((fx / W) * Math.max(1, points.length - 1));
+    setHover(Math.max(0, Math.min(points.length - 1, i)));
+  };
+
+  const h = hover != null ? points[hover] : null;
+  const barW = Math.max(2, Math.min(24, step - 2));
+  const line = points
+    .map((p, i) => `${i ? "L" : "M"}${xOf(i).toFixed(1)},${yOf(p.y).toFixed(1)}`)
+    .join("");
+
+  return (
+    <div className="relative">
+      <svg
+        ref={ref}
+        viewBox={`0 0 ${W} ${H}`}
+        preserveAspectRatio="none"
+        className="block h-[120px] w-full"
+        role="img"
+        aria-label={label}
+        onMouseMove={onMove}
+        onMouseLeave={() => setHover(null)}
+      >
+        {[0, 0.5, 1].map((f) => (
+          <line
+            key={f}
+            x1={0}
+            x2={W}
+            y1={yOf(top * f)}
+            y2={yOf(top * f)}
+            className="stroke-border"
+            strokeWidth={1}
+            vectorEffect="non-scaling-stroke"
+            strokeDasharray={f === 0 ? undefined : "3 3"}
+          />
+        ))}
+        {kind === "bar" ? (
+          points.map((p, i) => {
+            const y = yOf(p.y);
+            const bh = Math.max(0, PAD_TOP + plotH - y);
+            const r = Math.min(4, barW / 2, bh);
+            const x = xOf(i) - barW / 2;
+            const base = PAD_TOP + plotH;
+            // Rounded top only; the base sits flat on the axis.
+            const d =
+              bh <= 0
+                ? ""
+                : `M${x},${base}V${y + r}Q${x},${y} ${x + r},${y}H${x + barW - r}Q${x + barW},${y} ${x + barW},${y + r}V${base}Z`;
+            return (
+              <path key={i} d={d} className={hover === i ? "fill-accent" : "fill-accent-solid"} />
+            );
+          })
+        ) : (
+          <>
+            <path
+              d={`${line}L${W},${PAD_TOP + plotH}L0,${PAD_TOP + plotH}Z`}
+              className="fill-accent-solid"
+              opacity={0.12}
+            />
+            <path
+              d={line}
+              fill="none"
+              className="stroke-accent-solid"
+              strokeWidth={2}
+              vectorEffect="non-scaling-stroke"
+              strokeLinejoin="round"
+            />
+            {hover != null && (
+              <line
+                x1={xOf(hover)}
+                x2={xOf(hover)}
+                y1={PAD_TOP}
+                y2={PAD_TOP + plotH}
+                className="stroke-fg-muted"
+                strokeWidth={1}
+                vectorEffect="non-scaling-stroke"
+              />
+            )}
+          </>
+        )}
+      </svg>
+      <span className="pointer-events-none absolute left-0 top-0 text-[10px] text-fg-muted tabular-nums">
+        {format(top)}
+      </span>
+      <div className="pointer-events-none flex justify-between text-[10px] text-fg-muted">
+        <span>{points[0]!.x}</span>
+        <span>{points[points.length - 1]!.x}</span>
+      </div>
+      {h && hover != null && (
+        <div
+          className="pointer-events-none absolute top-0 z-10 -translate-x-1/2 whitespace-nowrap rounded-md border border-border bg-surface-1 px-2 py-1 text-[11px] shadow-lg"
+          style={{ left: `${Math.min(92, Math.max(8, (xOf(hover) / W) * 100))}%` }}
+          role="status"
+        >
+          <div className="text-fg-muted">{h.x}</div>
+          <div className="font-medium text-fg-primary tabular-nums">{format(h.y)}</div>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/components/admin/ServerPanel.tsx

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

client/src/components/conversation/ConversationView.tsx

@@ -78,7 +78,12 @@ 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";
+import type {
+  TranscriptMessage,
+  TranscriptInfo,
+  TranscriptResult,
+  WSMessage,
+} from "../../lib/types";
 
 // Catch-up poll interval. Claude Code only fires hooks on PreToolUse /
 // PostToolUse / Stop, which means a user-typed message (no hook) and any
@@ -175,6 +180,8 @@ function ConversationViewPane({
     initialTranscriptId ?? null
   );
   const [hasMore, setHasMore] = useState(false);
+  // The edits of the turn the oldest loaded page starts inside of (`turn_edits`).
+  const [leadEdits, setLeadEdits] = useState<TranscriptResult["turn_edits"]>(undefined);
   const [error, setError] = useState<string | null>(null);
   const [transcripts, setTranscripts] = useState<TranscriptInfo[]>([]);
   const [showNewMsg, setShowNewMsg] = useState(false);
@@ -283,6 +290,7 @@ function ConversationViewPane({
         if (cancelled) return;
         setNotStarted(false);
         setMessages(result.messages);
+        setLeadEdits(result.turn_edits);
         setTotal(result.total);
         setHasMore(result.has_more);
         lastLineRef.current = result.last_line;
@@ -343,6 +351,7 @@ function ConversationViewPane({
         // Seed the view in a single render so the user sees the whole
         // catch-up batch instead of a blank panel followed by a partial one.
         setMessages(result.messages);
+        setLeadEdits(result.turn_edits);
         firstLineRef.current = result.first_line;
         setHasMore(result.has_more);
       } else {
@@ -487,6 +496,7 @@ function ConversationViewPane({
       firstLineRef.current = result.first_line;
 
       setMessages((prev) => [...result.messages, ...prev]);
+      setLeadEdits(result.turn_edits);
       setHasMore(result.has_more);
 
       // Preserve scroll position (don't jump to top)
@@ -686,6 +696,7 @@ function ConversationViewPane({
               stopped={stopped}
               agentLinks={agentLinks}
               compact={compact}
+              leadEdits={leadEdits}
               sessionId={
                 selectedTranscript && selectedTranscript !== "main" ? undefined : sessionId
               }

client/src/components/conversation/MessageList.tsx

@@ -172,6 +172,9 @@ interface MessageListProps {
   /** A subagent's conversation inside its step: tight spacing, and the task
    *  the orchestrator gave it reads as the prompt it is. */
   compact?: boolean;
+  /** The files the first, cut-off turn changed before `messages` begins (the
+   *  transcript page's `turn_edits`): counted in that turn's card. */
+  leadEdits?: TranscriptContent["edits"];
 }
 
 /** Build a map from tool_use id → tool_result for matching */
@@ -491,6 +494,10 @@ type Item =
   | { kind: "command"; key: string; name: string | null; output: string | null; error: boolean };
 
 const EDIT_TOOLS = new Set(["Write", "Edit", "MultiEdit", "NotebookEdit"]);
+// A subagent's result carries the files IT changed (`edits`): they count too.
+const AGENT_TOOLS = new Set(["Agent", "Task"]);
+// The stand-in for the part of a turn the page cut off: its `edits` count.
+const LEAD = "__lead_edits";
 
 /** A line that is only Claude Code's local-command plumbing — the caveat it
  *  writes first, the command, what the command printed — or null for
@@ -515,11 +522,18 @@ export function localCommand(
   return { name, output, error };
 }
 
-export function chatItems(messages: TranscriptMessage[], keys: string[]): Item[] {
+export function chatItems(
+  messages: TranscriptMessage[],
+  keys: string[],
+  leadEdits?: TranscriptContent["edits"]
+): Item[] {
   const items: Item[] = [];
   // The file-changing calls of the turn so far, closed into one card when the
-  // human speaks again (or the list ends).
-  let edits: TranscriptContent[] = [];
+  // human speaks again (or the list ends) — starting with what the page's
+  // cut-off first turn changed before it.
+  let edits: TranscriptContent[] = leadEdits?.length
+    ? [{ type: "tool_use", name: LEAD, edits: leadEdits }]
+    : [];
   // The turn's prompt time, its newest assistant line and its output so far,
   // for the "Done in …" line under a turn that ended.
   let start: string | null = null;
@@ -592,7 +606,11 @@ export function chatItems(messages: TranscriptMessage[], keys: string[]): Item[]
     if (msg.usage) output.add(msg.usage);
     msg.content.forEach((block, b) => {
       const last = items[items.length - 1];
-      if (block.type === "tool_use" && EDIT_TOOLS.has(block.name ?? "")) edits.push(block);
+      if (
+        block.type === "tool_use" &&
+        (EDIT_TOOLS.has(block.name ?? "") || AGENT_TOOLS.has(block.name ?? ""))
+      )
+        edits.push(block);
       // A question to the user is a turn of the conversation, not hidden work.
       if (block.type === "tool_use" && block.name === "AskUserQuestion") {
         items.push({ kind: "ask", key: `${key}:${b}`, block });
@@ -672,19 +690,38 @@ function EditedFilesCard({
   const files = new Map<string, { added: number; removed: number; counted: boolean }>();
   // Written whole in this turn (a Write): a component made here is an artifact.
   const created = new Set<string>();
+  // Changed only by a subagent: listed, never an artifact card — the chat
+  // rebuilds an artifact from this transcript's Write/Edit inputs, which a
+  // subagent's are not.
+  const byAgent = new Set<string>();
   for (const b of blocks) {
+    const r0 = b.id ? toolResultMap.get(b.id) : undefined;
+    if (AGENT_TOOLS.has(b.name ?? "") || b.name === LEAD) {
+      for (const e of (b.name === LEAD ? b.edits : r0?.edits) ?? []) {
+        if (!files.has(e.path)) byAgent.add(e.path);
+        const f = files.get(e.path) ?? { added: 0, removed: 0, counted: false };
+        f.added += e.added;
+        f.removed += e.removed;
+        f.counted ||= e.counted;
+        files.set(e.path, f);
+      }
+      continue;
+    }
     const input = (b.input ?? {}) as Record<string, unknown>;
     const p = input.file_path ?? input.notebook_path;
     const r = b.id ? toolResultMap.get(b.id) : undefined;
     if (typeof p !== "string" || !r || r.is_error) continue;
     if (b.name === "Write") created.add(p);
+    byAgent.delete(p);
     const f = files.get(p) ?? { added: 0, removed: 0, counted: false };
     f.added += r.diff?.added ?? 0;
     f.removed += r.diff?.removed ?? 0;
     f.counted ||= !!r.diff;
     files.set(p, f);
   }
-  const artifacts = [...files.keys()].filter((p) => isArtifact(p, created.has(p)));
+  const artifacts = [...files.keys()].filter(
+    (p) => !byAgent.has(p) && isArtifact(p, created.has(p))
+  );
   const cards = artifacts.length > 0 && (
     <div data-testid="artifact-cards" className="flex flex-col gap-2">
       {artifacts.map((p) => (
@@ -773,6 +810,7 @@ function MessageListView({
   sessionId,
   agentLinks,
   compact = false,
+  leadEdits,
 }: MessageListProps) {
   const { t } = useTranslation("sessions");
   const toolResultMap = useMemo(() => buildToolResultMap(messages), [messages]);
@@ -798,9 +836,10 @@ function MessageListView({
               m.sender === "orchestrator" ? { ...m, sender: "user" as const } : m
             )
           : messages,
-        keys
+        keys,
+        leadEdits
       ),
-    [messages, keys, compact]
+    [messages, keys, compact, leadEdits]
   );
   const agents = useMemo(
     () => (live ? backgroundAgents(messages, toolResultMap) : []),

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

@@ -4,7 +4,10 @@
  * Desktop's "Edited N files" card: one row per file with the lines added and
  * removed summed over the turn, a failed call left out, a row click handed
  * to the caller, and a row (or the header, every file) dragged as `@path`
- * attachments for a prompt box.
+ * attachments for a prompt box. Files a subagent changed (its Agent
+ * result's `edits`, read from its own transcript) are counted in the same
+ * card, never as an artifact; so are the files a turn changed before the
+ * loaded page began (`leadEdits`, the page's `turn_edits`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi } from "vitest";
@@ -127,4 +130,71 @@ describe("the Edited N files card", () => {
       JSON.parse(all["application/x-agenthub-attach"]!).map((a: { path: string }) => a.path)
     ).toEqual(["@/w/a.ts", "@/w/b.json"]);
   });
+
+  it("counts the files a subagent changed, beside the turn's own edits", () => {
+    render(
+      <MessageList
+        loading={false}
+        messages={[
+          user("run the task"),
+          call("1", "Edit", "/w/a.go"),
+          result("1", { added: 1, removed: 0 }),
+          {
+            type: "assistant",
+            sender: "assistant",
+            timestamp: at,
+            content: [{ type: "tool_use", id: "2", name: "Agent", input: { prompt: "do it" } }],
+          } as TranscriptMessage,
+          {
+            type: "user",
+            sender: "tool",
+            timestamp: at,
+            content: [
+              {
+                type: "tool_result",
+                id: "2",
+                output: "done",
+                agent: { id: "x1" },
+                edits: [
+                  { path: "/w/a.go", added: 4, removed: 2, counted: true },
+                  { path: "/w/b_test.go", added: 9, removed: 0, counted: true },
+                  { path: "/w/report.html", added: 5, removed: 0, counted: true },
+                ],
+              },
+            ],
+          } as TranscriptMessage,
+          user("thanks"),
+        ]}
+      />
+    );
+    const card = screen.getByTestId("edited-files");
+    expect(card.textContent).toContain("Edited 3 files");
+    expect(within(card).getByText("b_test.go")).toBeTruthy();
+    expect(within(card).getByTitle("/w/a.go").textContent).toContain("+5"); // a.go: 1 + 4
+    // A page only a subagent wrote is listed, not shown as an artifact card.
+    expect(within(card).getByText("report.html")).toBeTruthy();
+    expect(screen.queryByTestId("artifact-card")).toBeNull();
+  });
+
+  it("adds what the cut-off first turn changed before the page to that turn's card", () => {
+    render(
+      <MessageList
+        loading={false}
+        leadEdits={[{ path: "/w/rbac_test.go", added: 176, removed: 0, counted: true }]}
+        messages={[
+          call("1", "Write", "/w/handler_test.go"),
+          result("1", { added: 113, removed: 0 }),
+          user("what changed?"),
+          call("2", "Edit", "/w/x.go"),
+          result("2", { added: 1, removed: 0 }),
+        ]}
+      />
+    );
+    const [first, second] = screen.getAllByTestId("edited-files");
+    expect(first!.textContent).toContain("Edited 2 files");
+    expect(within(first!).getByText("rbac_test.go")).toBeTruthy();
+    expect(within(first!).getByText("handler_test.go")).toBeTruthy();
+    // The next turn's card is its own.
+    expect(second!.textContent).toContain("Edited 1 file");
+  });
 });

client/src/components/health/HostHealth.tsx

@@ -0,0 +1,726 @@
+/**
+ * @file HostHealth.tsx
+ * @description The machine AgentHub runs on, as part of the Dashboard's
+ * System Health tab (`GET /api/host`, server/lib/host-stats.js — every
+ * signed-in user sees all of it). In the tab's own card style:
+ * `HostCard` — hostname, OS, uptime, CPU model and load, the AgentHub process
+ * (pid, uptime, Node RSS) and bars for CPU, memory, swap and the V8 heap;
+ * `HostSections` — the tab's whole "machine" group: `HostCard` beside the
+ * CPU / memory history (`GET /api/host/history`, kept in memory since the
+ * server started); then CPU (every thread as a compact cell, temperatures,
+ * GPUs), disks (how full, read / write rate) with network interfaces, and the
+ * busiest processes with who each counts for (history, CPU threads and
+ * processes are Linux-only reads, so off Linux those cards are left out); and — server mode — each user's
+ * live CPU / RAM share (a tile per user; click for their busiest processes). Also exports `useHostStats` (a poll every `pollMs` while
+ * the tab is visible; 0 = read once), `Meter`, `pct` and `fmtPct`, which the
+ * Administration users table shares for each home's share of the homes disk.
+ * Read-only.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Activity,
+  ArrowDown,
+  ArrowUp,
+  Cpu,
+  HardDrive,
+  ListTree,
+  Network,
+  Server,
+  Thermometer,
+  Users,
+} from "lucide-react";
+import {
+  api,
+  type HostHistory,
+  type HostHistoryRange,
+  type HostStats,
+  type HostUsageGroup,
+} from "../../lib/api";
+import { formatBytes, formatDateTime } from "../../lib/format";
+import { Tip } from "../Tip";
+import { MiniChart } from "../admin/MiniChart";
+import { UserAvatar } from "../users/UserAvatar";
+
+const POLL_MS = 5000;
+const HISTORY_POLL_MS = 30000;
+const RANGES: HostHistoryRange[] = ["1h", "6h", "24h"];
+
+export const pct = (part: number, whole: number) => (whole > 0 ? (part / whole) * 100 : 0);
+export const fmtPct = (n: number) => `${n < 10 ? n.toFixed(1) : Math.round(n)}%`;
+
+/** `GET /api/host`, re-read every `POLL_MS` while the tab is visible. */
+export type HostState = {
+  stats: HostStats | null;
+  error: string | null;
+  reload: () => Promise<void>;
+};
+
+export function useHostStats(enabled = true, pollMs = POLL_MS): HostState {
+  const [stats, setStats] = useState<HostStats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const reload = useCallback(
+    () =>
+      api.host
+        .stats()
+        .then((s) => {
+          setStats(s);
+          setError(null);
+        })
+        .catch((e: Error) => setError(e.message)),
+    []
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    void reload();
+    if (!pollMs) return;
+    const id = setInterval(() => {
+      if (document.visibilityState === "visible") void reload();
+    }, pollMs);
+    return () => clearInterval(id);
+  }, [enabled, pollMs, reload]);
+  return { stats, error, reload };
+}
+
+/** A thin bar, amber past 75 %, red past 90 %. */
+export function Meter({ value, label }: { value: number; label: string }) {
+  const v = Math.max(0, Math.min(100, value));
+  const tone = v >= 90 ? "bg-status-danger" : v >= 75 ? "bg-status-warning" : "bg-accent-solid";
+  return (
+    <div
+      role="meter"
+      aria-label={label}
+      aria-valuenow={Math.round(v)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className="h-1.5 w-full rounded-full bg-surface-4 overflow-hidden"
+    >
+      <div className={`h-full rounded-full ${tone}`} style={{ width: `${v}%` }} />
+    </div>
+  );
+}
+
+/** The System Health tab's own bar: h-2, green / amber / red by level. */
+function HealthBar({
+  label,
+  value,
+  tip,
+  warn = 70,
+  bad = 90,
+}: {
+  label: string;
+  value: number | null;
+  tip?: string;
+  warn?: number;
+  bad?: number;
+}) {
+  const v = value == null ? 0 : Math.max(0, Math.min(100, value));
+  const tone = v > bad ? "bg-status-danger" : v > warn ? "bg-status-warning" : "bg-status-success";
+  return (
+    <Tip block raw={tip}>
+      <div className="space-y-1">
+        <div className="flex justify-between text-[10px]">
+          <span className="text-fg-muted">{label}</span>
+          <span className="text-fg-secondary font-mono">
+            {value == null ? "—" : `${Math.round(v)}%`}
+          </span>
+        </div>
+        <div
+          role="meter"
+          aria-label={label}
+          aria-valuenow={Math.round(v)}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          className="w-full bg-surface-3 rounded-full h-2"
+        >
+          <div
+            className={`h-2 rounded-full transition-all duration-700 ${tone}`}
+            style={{ width: `${v}%` }}
+          />
+        </div>
+      </div>
+    </Tip>
+  );
+}
+
+/** One CPU thread in the CPU card's compact grid: its number, % and a thin bar. */
+function CoreCell({ n, value, label }: { n: number; value: number; label: string }) {
+  const v = Math.max(0, Math.min(100, value));
+  const tone = v > 90 ? "text-status-danger" : v > 70 ? "text-status-warning" : "text-fg-secondary";
+  return (
+    <div className="space-y-0.5">
+      <div className="flex justify-between text-[10px] font-mono">
+        <span className="text-fg-muted">{n}</span>
+        <span className={tone}>{Math.round(v)}%</span>
+      </div>
+      <Meter value={v} label={label} />
+    </div>
+  );
+}
+
+function CardHead({
+  icon: Icon,
+  tone,
+  title,
+  right,
+}: {
+  icon: ComponentType<{ className?: string }>;
+  tone: string;
+  title: string;
+  right?: ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center gap-3 min-w-0">
+        <Icon className={`w-4 h-4 flex-shrink-0 ${tone}`} />
+        <span className="text-xs text-fg-muted uppercase tracking-wider truncate">{title}</span>
+      </div>
+      {right}
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-xs text-fg-secondary w-28 flex-shrink-0">{label}</span>
+      <span className="ml-auto min-w-0 truncate text-right text-xs text-fg-secondary font-mono">
+        {children}
+      </span>
+    </div>
+  );
+}
+
+function uptimeText(t: (k: string, o?: Record<string, unknown>) => string, sec: number) {
+  const d = Math.floor(sec / 86400);
+  const h = Math.floor((sec % 86400) / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  return d > 0 ? t("host.uptimeDays", { d, h }) : t("host.uptimeHours", { h, m });
+}
+
+/** The process's own heap, from `GET /api/settings/info` (the host read has none). */
+export type HeapInfo = {
+  heapUsed: number;
+  heapTotal: number;
+  heapLimit?: number;
+  external: number;
+};
+
+/**
+ * The tab's first card: the machine and the AgentHub process on it.
+ * `heap` comes from the tab's settings read.
+ */
+export function HostCard({ host, heap }: { host: HostState; heap?: HeapInfo }) {
+  const { t } = useTranslation("dashboard");
+  const s = host.stats;
+  const mem = s?.memory;
+  const heapMax = heap ? heap.heapLimit || heap.heapTotal : 0;
+  const heapPct = heap && heapMax > 0 ? (heap.heapUsed / heapMax) * 100 : null;
+  return (
+    <div className="card p-5 flex flex-col gap-4" data-testid="server-facts">
+      <CardHead
+        icon={Server}
+        tone="text-status-success"
+        title={t("host.title")}
+        right={
+          s && (
+            <span className="text-[10px] font-mono text-fg-muted truncate" title={s.hostname}>
+              {s.hostname}
+            </span>
+          )
+        }
+      />
+      {!s ? (
+        <p className="text-xs text-fg-muted">{host.error ?? t("host.sampling")}</p>
+      ) : (
+        <>
+          <div className="space-y-2.5">
+            <Row label={t("host.os")}>
+              {s.os.distro ?? s.os.platform} · {s.os.release}
+            </Row>
+            <Row label={t("host.uptime")}>{uptimeText(t, s.uptime)}</Row>
+            <Row label={t("host.cpuModel")}>
+              <Tip raw={s.cpu.model ?? undefined}>
+                <span>
+                  {s.cpu.physicalCores
+                    ? `${t("host.physical", { n: s.cpu.physicalCores })} · `
+                    : ""}
+                  {t("host.threads", { n: s.cpu.cores })} · {s.os.arch}
+                </span>
+              </Tip>
+            </Row>
+            {s.os.platform !== "win32" && (
+              <div className="flex items-center gap-3">
+                <span className="text-xs text-fg-secondary w-28 flex-shrink-0">
+                  {t("host.load")}
+                </span>
+                <div className="flex gap-1 ml-auto">
+                  {s.cpu.load.slice(0, 3).map((load, i) => (
+                    <span
+                      key={i}
+                      className={`text-[10px] font-mono px-1.5 py-0.5 rounded ${i === 0 && load > s.cpu.cores ? "bg-status-danger/20 text-status-danger" : "bg-surface-3 text-fg-secondary"}`}
+                    >
+                      {load.toFixed(2)}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            {s.process && (
+              <Row label={t("host.agenthub")}>
+                <Tip raw={t("host.agenthubTip", { pid: s.process.pid, node: s.process.node })}>
+                  <span>
+                    {uptimeText(t, s.process.uptime)} · {formatBytes(s.process.rss)}
+                  </span>
+                </Tip>
+              </Row>
+            )}
+          </div>
+          <div className="border-t border-border/40 pt-3 space-y-3">
+            {s.usage && (
+              <HealthBar label={t("host.cpu")} value={s.usage.cpu} tip={t("host.cpuHelp")} />
+            )}
+            <HealthBar
+              label={t("host.memory")}
+              value={mem ? pct(mem.used, mem.total) : null}
+              tip={mem ? `${formatBytes(mem.used)} / ${formatBytes(mem.total)}` : undefined}
+            />
+            {mem && mem.swapTotal > 0 && (
+              <HealthBar
+                label={t("host.swap")}
+                value={pct(mem.swapUsed, mem.swapTotal)}
+                tip={`${formatBytes(mem.swapUsed)} / ${formatBytes(mem.swapTotal)}`}
+              />
+            )}
+            {heap && (
+              <HealthBar
+                label={t("health.heap")}
+                value={heapPct}
+                warn={60}
+                bad={85}
+                tip={t("health.heapTip", {
+                  pct: (heapPct ?? 0).toFixed(1),
+                  used: formatBytes(heap.heapUsed),
+                  limit: formatBytes(heapMax),
+                  allocated: formatBytes(heap.heapTotal),
+                  external: formatBytes(heap.external),
+                })}
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/** The tab's machine group: host + history, CPU / disks / processes, users. */
+export function HostSections({ host, heap }: { host: HostState; heap?: HeapInfo }) {
+  const { t } = useTranslation("dashboard");
+  const { stats } = host;
+  const [range, setRange] = useState<HostHistoryRange>("1h");
+  const [history, setHistory] = useState<HostHistory | null>(null);
+  // The user tile whose busiest processes are shown.
+  const [open, setOpen] = useState<string | null>(null);
+
+  const loadHistory = useCallback(
+    () =>
+      api.host
+        .history(range)
+        .then(setHistory)
+        .catch(() => setHistory(null)),
+    [range]
+  );
+  useEffect(() => {
+    void loadHistory();
+    const id = setInterval(() => {
+      if (document.visibilityState === "visible") void loadHistory();
+    }, HISTORY_POLL_MS);
+    return () => clearInterval(id);
+  }, [loadHistory]);
+
+  // Same tree as the full render below, so the card is not remounted once stats arrive.
+  if (!stats)
+    return (
+      <>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <HostCard host={host} heap={heap} />
+        </div>
+      </>
+    );
+
+  const groups = stats.usage?.groups ?? [];
+  const groupName = (g: HostUsageGroup) => {
+    if (g.kind === "host") return t("host.hostGroup");
+    if (g.kind === "system") return t("host.systemGroup");
+    return g.displayName || g.username || "";
+  };
+  const groupByKey = new Map(groups.map((g) => [g.key, g]));
+  const ownerOf = (key: string) => {
+    const g = groupByKey.get(key);
+    if (g) return groupName(g);
+    if (key === "host") return t("host.hostGroup");
+    if (key === "system") return t("host.systemGroup");
+    return key;
+  };
+  const perSec = (v: number) => t("host.perSecond", { v: formatBytes(v) });
+  const timeLabel = (iso: string) =>
+    new Date(iso).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const histPoints = (key: "cpu" | "memory") =>
+    (history?.points ?? [])
+      .filter((p) => p[key] != null)
+      .map((p) => ({ x: timeLabel(p.at), y: p[key] as number }));
+  const perCore = stats.cpu.perCore ?? [];
+  const network = stats.network ?? [];
+  const temps = stats.temperatures ?? [];
+  const topProcs = stats.topProcesses ?? [];
+  const others = groups.filter((g) => g.kind !== "user");
+  const people = groups.filter((g) => g.kind === "user");
+  // History, per-thread CPU and processes are read from /proc: on Windows and
+  // macOS their cards would only ever be empty, so they are left out.
+  const linux = stats.os.platform === "linux";
+  const showCores = perCore.length > 0 || temps.length > 0 || stats.gpus.length > 0;
+  const showProcs = !!stats.usage || others.length > 0;
+
+  // A whole disk's I/O goes on the first mounted file system that lives on it
+  // (`/dev/sda1` → `sda`, `/dev/nvme0n1p2` → `nvme0n1`); a disk with nothing
+  // mounted gets a row of its own.
+  const ioLeft = new Map((stats.diskIo ?? []).map((d) => [d.name, d]));
+  const diskRows = stats.disks.map((d) => {
+    const base = d.device.split("/").pop() ?? "";
+    const key = [base, base.replace(/p?\d+$/, "")].find((k) => ioLeft.has(k));
+    const io = key ? ioLeft.get(key) : undefined;
+    if (key) ioLeft.delete(key);
+    return { disk: d, io };
+  });
+  const loneIo = [...ioLeft.values()];
+
+  const rate = (down?: number, up?: number) => (
+    <span className="flex items-center gap-2 text-[10px] font-mono text-fg-muted">
+      <span className="inline-flex items-center gap-0.5">
+        <ArrowDown className="w-2.5 h-2.5" />
+        {down == null ? "—" : perSec(down)}
+      </span>
+      <span className="inline-flex items-center gap-0.5">
+        <ArrowUp className="w-2.5 h-2.5" />
+        {up == null ? "—" : perSec(up)}
+      </span>
+    </span>
+  );
+
+  return (
+    <>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <HostCard host={host} heap={heap} />
+
+        {/* CPU and memory over time. */}
+        {linux && (
+          <div className="card p-5 flex flex-col gap-4 lg:col-span-2" data-testid="server-history">
+            <CardHead
+              icon={Activity}
+              tone="text-accent"
+              title={t("host.historyTitle")}
+              right={
+                <div
+                  role="group"
+                  aria-label={t("host.range")}
+                  className="flex gap-1 rounded-lg border border-border bg-surface-1 p-0.5"
+                >
+                  {RANGES.map((r) => (
+                    <button
+                      key={r}
+                      type="button"
+                      onClick={() => setRange(r)}
+                      aria-pressed={range === r}
+                      className={`rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors ${
+                        range === r
+                          ? "bg-surface-4 text-fg-secondary"
+                          : "text-fg-muted hover:text-fg-secondary"
+                      }`}
+                    >
+                      {t(`host.range${r}`)}
+                    </button>
+                  ))}
+                </div>
+              }
+            />
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div>
+                <div className="mb-1 text-[10px] text-fg-muted">{t("host.historyCpu")}</div>
+                <MiniChart
+                  kind="line"
+                  points={histPoints("cpu")}
+                  max={100}
+                  format={fmtPct}
+                  label={t("host.historyCpu")}
+                  emptyText={t("host.historyNone")}
+                />
+              </div>
+              <div>
+                <div className="mb-1 text-[10px] text-fg-muted">{t("host.historyMemory")}</div>
+                <MiniChart
+                  kind="line"
+                  points={histPoints("memory")}
+                  max={100}
+                  format={fmtPct}
+                  label={t("host.historyMemory")}
+                  emptyText={t("host.historyNone")}
+                />
+              </div>
+            </div>
+            {history?.startedAt && (
+              <p className="text-[10px] text-fg-muted">
+                {t("host.historyHelp", {
+                  s: history.intervalMs / 1000,
+                  at: formatDateTime(history.startedAt),
+                })}
+              </p>
+            )}
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 empty:hidden">
+        {/* CPU: every thread as a compact cell, then temperatures and GPUs. */}
+        {showCores && (
+          <div className="card p-5 flex flex-col gap-4" data-testid="server-cores">
+            <CardHead
+              icon={Cpu}
+              tone="text-syntax-keyword"
+              title={t("host.cpu")}
+              right={
+                <span className="text-[10px] font-mono text-fg-muted">
+                  {t("host.threads", { n: perCore.length || stats.cpu.cores })}
+                </span>
+              }
+            />
+            {perCore.length > 0 && (
+              <div className="grid grid-cols-4 gap-x-3 gap-y-2">
+                {perCore.map((v, i) => (
+                  <CoreCell key={i} n={i} value={v} label={t("host.coreN", { n: i })} />
+                ))}
+              </div>
+            )}
+            {temps.length > 0 && (
+              <div
+                className="border-t border-border/40 pt-3 space-y-2"
+                data-testid="server-temperatures"
+              >
+                <div className="flex items-center gap-1.5 text-[10px] text-fg-muted uppercase tracking-wider">
+                  <Thermometer className="w-3 h-3 text-status-warning" />
+                  {t("host.temperatures")}
+                </div>
+                {temps.map((s, i) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <span className="text-xs text-fg-secondary min-w-0 truncate" title={s.chip}>
+                      {s.label} <span className="text-fg-muted">· {s.chip}</span>
+                    </span>
+                    <span
+                      className={`ml-auto text-[10px] font-mono px-1.5 py-0.5 rounded ${
+                        s.celsius >= 90
+                          ? "bg-status-danger/20 text-status-danger"
+                          : s.celsius >= 75
+                            ? "bg-status-warning/20 text-status-warning"
+                            : "bg-surface-3 text-fg-secondary"
+                      }`}
+                    >
+                      {s.celsius.toFixed(0)} °C
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+            {stats.gpus.length > 0 && (
+              <div className="border-t border-border/40 pt-3 space-y-3">
+                {stats.gpus.map((g, i) => (
+                  <HealthBar
+                    key={i}
+                    label={g.name}
+                    value={g.utilization}
+                    tip={`${formatBytes(g.memoryUsed)} / ${formatBytes(g.memoryTotal)}`}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Disks (with their I/O) and network interfaces. */}
+        {(diskRows.length > 0 || loneIo.length > 0 || network.length > 0) && (
+          <div className="card p-5 flex flex-col gap-4" data-testid="server-disks-table">
+            <CardHead
+              icon={HardDrive}
+              tone="text-syntax-builtin"
+              title={t("host.storageNetwork")}
+            />
+            <div className="space-y-3" data-testid="server-disk-io">
+              {diskRows.map(({ disk: d, io }) => (
+                <div key={d.device} className="space-y-1">
+                  <HealthBar
+                    label={`${d.mount}${d.kind ? ` · ${d.kind}` : ""}${d.mount === stats.homesMount ? ` · ${t("host.homesBadge")}` : ""}`}
+                    value={pct(d.used, d.total)}
+                    warn={75}
+                    tip={`${d.device} · ${d.type}\n${formatBytes(d.used)} / ${formatBytes(d.total)} · ${formatBytes(d.free)} ${t("host.free")}`}
+                  />
+                  <div className="flex justify-between gap-2">
+                    <span className="text-[10px] font-mono text-fg-muted">
+                      {formatBytes(d.free)} {t("host.free")}
+                    </span>
+                    {io && rate(io.read, io.write)}
+                  </div>
+                </div>
+              ))}
+              {loneIo.map((io) => (
+                <div key={io.name} className="flex items-center gap-3">
+                  <span className="text-xs text-fg-secondary font-mono">{io.name}</span>
+                  <span className="ml-auto">{rate(io.read, io.write)}</span>
+                </div>
+              ))}
+            </div>
+            {network.length > 0 && (
+              <div
+                className="border-t border-border/40 pt-3 space-y-2"
+                data-testid="server-network"
+              >
+                {network.map((n) => (
+                  <div key={n.name} className="flex items-center gap-3">
+                    <span className="inline-flex items-center gap-1.5 text-xs text-fg-secondary">
+                      <Network className="w-3 h-3 text-fg-muted" />
+                      <span className="font-mono">{n.name}</span>
+                    </span>
+                    <span className="ml-auto">{rate(n.rx, n.tx)}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* The busiest processes, and what belongs to no user. */}
+        {showProcs && (
+          <div className="card p-5 flex flex-col gap-4" data-testid="server-top-processes">
+            <CardHead
+              icon={ListTree}
+              tone="text-syntax-function"
+              title={t("host.topProcesses")}
+              right={
+                <span className="text-[10px] font-mono text-fg-muted">
+                  {t("host.sampled", { s: (stats.usage?.sampleMs ?? 1000) / 1000 })}
+                </span>
+              }
+            />
+            {!stats.usage ? (
+              <p className="text-xs text-fg-muted">{t("host.usageUnavailable")}</p>
+            ) : (
+              <div className="space-y-2">
+                {topProcs.map((p) => (
+                  <Tip block key={p.pid} raw={`#${p.pid} · ${ownerOf(p.group)}`}>
+                    <div className="flex items-center gap-3">
+                      <span className="min-w-0 flex-1 truncate text-xs">
+                        <span className="font-mono text-fg-secondary">{p.name}</span>
+                        <span className="ml-1.5 text-[10px] text-fg-muted">{ownerOf(p.group)}</span>
+                      </span>
+                      <span className="text-[10px] font-mono text-fg-muted">
+                        {formatBytes(p.memory)}
+                      </span>
+                      <span
+                        className={`w-12 text-right text-[10px] font-mono px-1.5 py-0.5 rounded ${p.cpu >= 50 ? "bg-status-warning/20 text-status-warning" : "bg-surface-3 text-fg-secondary"}`}
+                      >
+                        {fmtPct(p.cpu)}
+                      </span>
+                    </div>
+                  </Tip>
+                ))}
+              </div>
+            )}
+            {others.length > 0 && (
+              <div
+                className="border-t border-border/40 pt-3 space-y-1.5"
+                data-testid="server-usage-table"
+              >
+                {others.map((g) => (
+                  <div key={g.key} className="flex items-center gap-3 text-[10px]">
+                    <span className="min-w-0 flex-1 truncate text-fg-muted" title={groupName(g)}>
+                      {groupName(g)}
+                    </span>
+                    <span className="font-mono text-fg-secondary">
+                      {fmtPct(g.cpu)} · {formatBytes(g.memory)} ·{" "}
+                      {t("host.processCount", { n: g.processes })}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Each user's live share of the machine (server mode). */}
+      {people.length > 0 && (
+        <div className="card p-5 flex flex-col gap-4" data-testid="server-users">
+          <CardHead
+            icon={Users}
+            tone="text-syntax-string"
+            title={t("host.usersTitle")}
+            right={
+              <span className="text-[10px] font-mono text-fg-muted">
+                {t("host.usersCount", { n: people.length })}
+              </span>
+            }
+          />
+          <div className="grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2 xl:grid-cols-3">
+            {people.map((g) => {
+              const name = groupName(g);
+              const isOpen = open === g.key;
+              return (
+                <div key={g.key} className="space-y-2" data-testid="server-user">
+                  <button
+                    type="button"
+                    onClick={() => setOpen(isOpen ? null : g.key)}
+                    disabled={!g.top.length}
+                    aria-expanded={isOpen}
+                    className="flex w-full items-center gap-2 text-left disabled:cursor-default"
+                  >
+                    <UserAvatar
+                      name={name}
+                      userId={g.userId}
+                      avatarAt={g.avatarAt}
+                      className="h-6 w-6 text-[10px]"
+                    />
+                    <span className="min-w-0 flex-1 truncate text-xs text-fg-secondary">
+                      {name}
+                    </span>
+                    <span className="text-[10px] font-mono text-fg-muted">
+                      {t("host.processCount", { n: g.processes })}
+                    </span>
+                  </button>
+                  <HealthBar label="CPU" value={g.cpu} tip={t("host.cpuHelp")} />
+                  <HealthBar label={`RAM · ${formatBytes(g.memory)}`} value={g.memoryPercent} />
+                  {isOpen && (
+                    <ul className="space-y-1 rounded-md bg-surface-2/60 px-2 py-1.5">
+                      {g.top.map((p) => (
+                        <li
+                          key={p.pid}
+                          className="flex justify-between gap-2 text-[10px] font-mono"
+                        >
+                          <span className="truncate text-fg-secondary">
+                            {p.name} <span className="text-fg-muted">#{p.pid}</span>
+                          </span>
+                          <span className="flex-shrink-0 text-fg-muted">
+                            {fmtPct(p.cpu)} · {formatBytes(p.memory)}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

client/src/components/health/__tests__/HostHealth.test.tsx

@@ -0,0 +1,213 @@
+/**
+ * @file HostHealth.test.tsx
+ * @description The machine on the Dashboard's System Health tab
+ * (`HostHealth.tsx`, `GET /api/host`), its whole machine group: the first card names the host, its OS,
+ * load and the AgentHub process with bars for CPU, memory, swap and heap; the
+ * rows under it show every CPU thread, temperatures, each disk with its I/O
+ * rate and each network interface, the CPU / memory history with its range
+ * switch (`GET /api/host/history`), and the busiest processes with who each
+ * counts for, the processes of no user in a short list of their own, and
+ * each user's live CPU / RAM as a tile (their busiest processes on click);
+ * off Linux the cards it can never fill are left out.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import type { HostStats } from "../../../lib/api";
+
+const GB = 1024 ** 3;
+const stats: HostStats = {
+  at: "2026-10-15T00:00:00Z",
+  hostname: "box",
+  os: { platform: "linux", release: "7.0.0", distro: "Ubuntu 26.04", arch: "x64" },
+  uptime: 90000,
+  cpu: { model: "i5-7500", cores: 4, load: [1, 0.5, 0.25] },
+  memory: { total: 16 * GB, available: 8 * GB, used: 8 * GB, swapTotal: 4 * GB, swapUsed: 0 },
+  disks: [
+    {
+      device: "/dev/sdb2",
+      mount: "/",
+      type: "ext4",
+      kind: "SSD",
+      total: 200 * GB,
+      used: 50 * GB,
+      free: 150 * GB,
+    },
+    {
+      device: "/dev/sda1",
+      mount: "/data",
+      type: "ext4",
+      kind: "HDD",
+      total: 500 * GB,
+      used: 0,
+      free: 500 * GB,
+    },
+  ],
+  homesMount: "/",
+  gpus: [],
+  usage: {
+    cpu: 40,
+    sampleMs: 1000,
+    groups: [
+      {
+        key: "user:2",
+        kind: "user",
+        userId: 2,
+        username: "mia",
+        cpu: 25,
+        memory: 2 * GB,
+        memoryPercent: 12.5,
+        processes: 3,
+        top: [{ pid: 77, name: "claude", cpu: 20, memory: GB }],
+      },
+      { key: "host", kind: "host", cpu: 5, memory: GB, memoryPercent: 6.3, processes: 90, top: [] },
+    ],
+  },
+};
+
+const api = vi.hoisted(() => ({
+  host: { stats: vi.fn(), history: vi.fn() },
+  me: { avatarUrl: () => null },
+  users: { avatarUrl: () => null },
+}));
+vi.mock("../../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return { ...actual, api };
+});
+
+import { HostSections, useHostStats } from "../HostHealth";
+
+function Tab() {
+  const host = useHostStats();
+  return (
+    <HostSections
+      host={host}
+      heap={{ heapUsed: GB / 4, heapTotal: GB / 2, heapLimit: GB, external: 0 }}
+    />
+  );
+}
+
+const full: HostStats = {
+  ...stats,
+  usage: {
+    ...stats.usage!,
+    groups: stats.usage!.groups.map((g) => (g.kind === "user" ? { ...g, displayName: "Mia" } : g)),
+  },
+  bootTime: "2026-10-14T00:00:00Z",
+  cpu: { ...stats.cpu, physicalCores: 4, perCore: [10, 20, 30, 40] },
+  network: [{ name: "enp4s0", rx: 2048, tx: 1024 }],
+  diskIo: [{ name: "sda", read: 4096, write: 0 }],
+  temperatures: [{ chip: "coretemp", label: "Package id 0", celsius: 55 }],
+  topProcesses: [{ pid: 77, name: "claude", cpu: 20, memory: GB, group: "user:2" }],
+  process: { pid: 9, node: "v24.0.0", uptime: 3600, rss: GB, heapUsed: GB / 2 },
+};
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  api.host.stats.mockResolvedValue(full);
+  api.host.history.mockResolvedValue({
+    range: "1h",
+    intervalMs: 30000,
+    running: true,
+    startedAt: "2026-10-15T00:00:00Z",
+    points: [
+      {
+        at: "2026-10-15T00:00:00Z",
+        cpu: 30,
+        memory: 50,
+        memoryUsed: 0,
+        swapUsed: 0,
+        load1: 1,
+        users: {},
+      },
+      {
+        at: "2026-10-15T00:00:30Z",
+        cpu: 40,
+        memory: 52,
+        memoryUsed: 0,
+        swapUsed: 0,
+        load1: 1,
+        users: {},
+      },
+    ],
+  });
+});
+
+describe("HostHealth", () => {
+  it("names the machine and the AgentHub process, with bars", async () => {
+    render(<Tab />);
+    const card = await screen.findByTestId("server-facts");
+    expect(await within(card).findByText("box")).toBeTruthy();
+    expect(card.textContent).toContain("Ubuntu 26.04");
+    expect(card.textContent).toContain("1.0 GB");
+    expect(within(card).getByRole("meter", { name: "CPU" }).getAttribute("aria-valuenow")).toBe(
+      "40"
+    );
+    expect(within(card).getByRole("meter", { name: "Memory" }).getAttribute("aria-valuenow")).toBe(
+      "50"
+    );
+    expect(within(card).getByRole("meter", { name: "V8 Heap" })).toBeTruthy();
+  });
+
+  it("shows every thread, sensors, disks with I/O, network, history and processes", async () => {
+    render(<Tab />);
+    expect(await screen.findByTestId("server-history")).toBeTruthy();
+    expect(await screen.findByRole("img", { name: /CPU/ })).toBeTruthy();
+    expect(screen.getByTestId("server-cores").textContent).toContain("40%");
+    expect(screen.getByTestId("server-temperatures").textContent).toContain("55 °C");
+    const disks = screen.getByTestId("server-disk-io").textContent;
+    expect(disks).toContain("/data · HDD");
+    expect(disks).toContain("4.0 KB/s");
+    expect(screen.getByTestId("server-network").textContent).toContain("enp4s0");
+    const top = screen.getByTestId("server-top-processes");
+    expect(await within(top).findByText("Mia")).toBeTruthy();
+    const other = screen.getByTestId("server-usage-table");
+    expect(within(other).queryByText("Mia")).toBeNull();
+    expect(within(other).getByText(/^Host account/)).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "24 h" }));
+    expect(api.host.history).toHaveBeenLastCalledWith("24h");
+  });
+
+  it("shows each user's live CPU and RAM, their processes on click", async () => {
+    render(<Tab />);
+    const tile = await screen.findByTestId("server-user");
+    expect(tile.textContent).toContain("Mia");
+    expect(within(tile).getByRole("meter", { name: "CPU" }).getAttribute("aria-valuenow")).toBe(
+      "25"
+    );
+    expect(tile.textContent).toContain("2.0 GB");
+    expect(within(tile).queryByText("claude")).toBeNull();
+    fireEvent.click(within(tile).getByRole("button", { expanded: false }));
+    expect(within(tile).getByText("claude")).toBeTruthy();
+  });
+
+  it("leaves out what Windows cannot report instead of empty cards", async () => {
+    api.host.stats.mockResolvedValue({
+      ...stats,
+      os: { platform: "win32", release: "10.0.26300", distro: null, arch: "x64" },
+      cpu: { ...stats.cpu, load: [0, 0, 0], perCore: [] },
+      disks: [],
+      usage: null,
+    });
+    api.host.history.mockResolvedValue({
+      range: "1h",
+      intervalMs: 30000,
+      running: false,
+      points: [],
+    });
+    render(<Tab />);
+    const card = await screen.findByTestId("server-facts");
+    expect(await within(card).findByText(/win32/)).toBeTruthy();
+    expect(within(card).queryByRole("meter", { name: "CPU" })).toBeNull();
+    expect(card.textContent).not.toContain("Load");
+    expect(within(card).getByRole("meter", { name: "Memory" })).toBeTruthy();
+    for (const id of [
+      "server-history",
+      "server-cores",
+      "server-top-processes",
+      "server-disks-table",
+    ])
+      expect(screen.queryByTestId(id)).toBeNull();
+  });
+});

client/src/components/lanes/FileExplorer.tsx

@@ -17,7 +17,8 @@
  * (the clipboard outlives the dialog); upload files or whole folders (picker
  * or dropped from the desktop), streamed with progress, ≤ 500 MB a batch;
  * drag items onto a folder to move them (Ctrl: copy); download a file as
- * itself, anything else as one zip; a taken name asks Replace / Keep both /
+ * itself, anything else as one zip — except an HTML file, which opens as the
+ * page (`HtmlViewer`, Download on its header and right-click menu); a taken name asks Replace / Keep both /
  * Skip. Deleting forever asks first when it empties the Trash or touches
  * another user's. An admin's Trash opens on one folder per user (with its
  * item count); each folder is THAT user's Trash, to restore from or purge
@@ -85,10 +86,13 @@ import {
   type FsTrashItem,
   type FsHome,
   type FsPlace,
+  type GitSource,
   isHomePlace,
 } from "../../lib/api";
 import type { Lane } from "../../lib/types";
 import { useDialog } from "../../hooks/useDialog";
+import { fetchVia } from "../HtmlFrame";
+import { HtmlViewerModal } from "../HtmlViewerModal";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { formatBytes } from "../../lib/format";
@@ -165,6 +169,7 @@ const join = (dir: string, name: string) => (dir ? `${dir}/${name}` : name);
 const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
 const errCode = (e: unknown) => (e as { code?: string })?.code;
 const isFolder = (e: FsEntry) => e.type === "dir" || e.type === "linkdir";
+const isHtml = (e: FsEntry) => !isFolder(e) && /\.html?$/i.test(e.name);
 const ext = (name: string) => name.slice(name.lastIndexOf(".") + 1).toLowerCase();
 const IMAGE = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico"]);
 const CODE = new Set([
@@ -283,7 +288,7 @@ export function FileBrowser({
   /** A home to open on (`me`, or another user's for an admin). */
   initialHome?: string | null;
   session?: string | null;
-  source?: number | null;
+  source?: GitSource | null;
   initialPath?: string;
   /** Called after anything changed files, so a tree elsewhere can re-read. */
   onChanged?: () => void;
@@ -497,8 +502,11 @@ export function FileBrowser({
   };
 
   // ── Actions ─────────────────────────────────────────────────────────────
+  // An HTML page opens as itself (`HtmlViewer`); any other file downloads.
+  const [viewing, setViewing] = useState<FsEntry | null>(null);
   const openEntry = (e: FsEntry) => {
     if (isFolder(e)) go(e.path);
+    else if (isHtml(e)) setViewing(e);
     else download([e]);
   };
   const goUp = () => {
@@ -969,6 +977,14 @@ export function FileBrowser({
       onClick={() => setMenu(null)}
       data-testid="file-explorer"
     >
+      {viewing && (
+        <HtmlViewer
+          entry={viewing}
+          place={target}
+          onDownload={() => download([viewing])}
+          onClose={() => setViewing(null)}
+        />
+      )}
       {cloneParent && (
         <CloneHereDialog
           open={cloning}
@@ -1655,13 +1671,18 @@ export function FileBrowser({
           {menuItem ? (
             <>
               <MenuItem onSelect={close(() => openEntry(menuItem))}>
-                {isFolder(menuItem) ? t("fx.open") : t("fx.download")}
+                {isFolder(menuItem) || isHtml(menuItem) ? t("fx.open") : t("fx.download")}
               </MenuItem>
               {(isFolder(menuItem) || menuTargets.length > 1) && (
                 <MenuItem onSelect={close(() => download(menuTargets))}>
                   {t("fx.downloadZip")}
                 </MenuItem>
               )}
+              {isHtml(menuItem) && menuTargets.length === 1 && (
+                <MenuItem onSelect={close(() => download([menuItem]))}>
+                  {t("fx.download")}
+                </MenuItem>
+              )}
               <MenuSeparator />
               {!ro && (
                 <MenuItem onSelect={close(() => putClip(menuTargets, true))}>
@@ -1882,7 +1903,7 @@ export function FileExplorer({
   onClose: () => void;
   laneId: number;
   session?: string | null;
-  source?: number | null;
+  source?: GitSource | null;
   initialPath?: string;
   onChanged?: () => void;
 }) {
@@ -1915,6 +1936,36 @@ export function FileExplorer({
   );
 }
 
+/** An HTML file as the page, in the shared modal viewer (`HtmlViewerModal`):
+ *  its relative CSS, scripts and images read through the same download route. */
+function HtmlViewer({
+  entry,
+  place,
+  onDownload,
+  onClose,
+}: {
+  entry: FsEntry;
+  place: FsPlace;
+  onDownload: () => void;
+  onClose: () => void;
+}) {
+  const placeKey = JSON.stringify(place);
+  const fetchFile = useMemo(
+    () => fetchVia((p) => api.files.downloadUrl(place, p)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [placeKey]
+  );
+  return (
+    <HtmlViewerModal
+      path={entry.path}
+      fetchFile={fetchFile}
+      onDownload={onDownload}
+      onClose={onClose}
+      testId="fx-html-viewer"
+    />
+  );
+}
+
 function HeadButton({
   label,
   onClick,

client/src/components/lanes/LaneChangesPanel.tsx

@@ -13,7 +13,10 @@
  *              side, each block with the diff's Undo / Keep while nothing
  *              is unsaved): Changes folds the unchanged lines away, Whole file
  *              shows them; any other file opens on its read-only diff; a
- *              whole markdown file can also be read rendered (Preview), and an
+ *              whole markdown file can also be read rendered (Preview), an HTML
+ *              file's Preview beside Whole file opens the page in a modal
+ *              (`HtmlViewerModal`, its relative CSS, scripts and images read
+ *              like downloads), and an
  *              image file is shown as the picture (`GET …/git/raw`)
  *   history  — recent commits; opening one shows that commit's diff
  *   browse   — quick-open by path, or the repo's tracked file tree (the
@@ -77,7 +80,16 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { Suspense, lazy, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  Suspense,
+  lazy,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import {
   ChevronDown,
@@ -103,7 +115,7 @@ import {
   Trash2,
   UnfoldVertical,
 } from "lucide-react";
-import { api, gitTarget } from "../../lib/api";
+import { api, gitTarget, type GitSource } from "../../lib/api";
 import { usePermissions } from "../AuthGate";
 import { pasteToLane } from "../../lib/panePaste";
 import { readMarkdownPreview } from "../../lib/markdownView";
@@ -127,6 +139,8 @@ import { LaneConflictView } from "./LaneConflictView";
 import { FileExplorer } from "./FileExplorer";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { fetchVia } from "../HtmlFrame";
+import { HtmlViewerModal } from "../HtmlViewerModal";
 import { LaneGitHeader, useLaneGitFacts } from "./LaneGitHeader";
 import { changeTree, treeFiles, type ChangeTreeDir } from "../../lib/changeTree";
 import { dragProjectPath } from "../../lib/promptAttach";
@@ -185,6 +199,9 @@ function Delta({
   );
 }
 
+/** An HTML page, which Preview opens as the page (`HtmlViewerModal`). */
+const isHtml = (p: string | null | undefined) => !!p && /\.html?$/i.test(p);
+
 /** What the viewer shows as a picture (`readImageAt`'s list on the server). */
 const IMAGE_FILE = /\.(png|jpe?g|gif|webp|avif|bmp|ico|svg)$/i;
 // CodeMirror is loaded only once a file is edited.
@@ -827,7 +844,7 @@ export function LaneChangesPanel({
   session?: string;
   /** Show and act on that extra folder's repo instead (`lane_sources` id);
    *  wins over `session`, and is keyed on like it. */
-  source?: number;
+  source?: GitSource;
   /** Open the Add-lane flow for a sibling worktree; see `LaneGitBar`. */
   onNewLane?: (branch?: string) => void;
   /** The panel has the whole width: the file tree becomes a sidebar and a
@@ -874,10 +891,13 @@ export function LaneChangesPanel({
   const [layout, setLayout] = useState<DiffLayout>(wide ? "split" : "unified");
   useEffect(() => setLayout(wide ? "split" : "unified"), [wide]);
   const [whole, setWhole] = useState(false);
-  // A whole markdown file shown rendered instead of as source; per file, each
-  // one opening as Settings → Appearance says (`lib/markdownView.ts`).
+  // A whole markdown file shown rendered instead of as source; per file,
+  // opening as Settings → Appearance says (`lib/markdownView.ts`).
   const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
   useEffect(() => setMdPreview(readMarkdownPreview()), [openFile]);
+  // An HTML file's page, open in the modal viewer (Preview beside Whole file).
+  const [htmlOpen, setHtmlOpen] = useState(false);
+  useEffect(() => setHtmlOpen(false), [openFile, mode]);
   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
@@ -1450,25 +1470,40 @@ export function LaneChangesPanel({
     }
   };
 
-  // Discard all: every non-conflicted file in one `discard`, asked once in a
-  // dialog that names how many untracked files it will delete.
-  const discardAll = async () => {
-    const rows = files.filter((f) => !f.conflicted);
-    if (!rows.length) return;
+  // Discard selected: exactly what Commit would take — the ticked files, and
+  // only the ticked blocks of a partly ticked one (#87: it used to discard
+  // every file, ticked or not) — in one `discard`, asked once in a dialog
+  // that names how many untracked files it will delete.
+  const discardTicked = async () => {
+    if (!tickedPaths.length) return;
     const ok = await confirmDialog({
-      title: t("changes.discardAllTitle"),
-      message: t("changes.discardAllConfirm", {
-        count: rows.length,
-        untracked: rows.filter((f) => f.untracked).length,
+      title: t("changes.discardTickedTitle"),
+      message: t("changes.discardTickedConfirm", {
+        count: tickedPaths.length,
+        untracked: files.filter((f) => f.untracked && tickedPaths.includes(f.path)).length,
       }),
-      confirmLabel: t("changes.discardAll"),
+      confirmLabel: t("changes.discardTicked"),
     });
-    if (ok)
-      await act(
-        "discard",
-        rows.map((f) => f.path),
-        true
-      );
+    if (!ok) return;
+    const lane = laneId;
+    setBusy(true);
+    setError(null);
+    try {
+      const { paths, hunks } = await selection();
+      await api.lanes.gitAction(target, "discard", {
+        paths,
+        ...(hunks ? { hunks, context: CONTEXT_STEPS[0] } : {}),
+        confirm: true,
+      });
+      if (laneNow.current !== lane) return;
+      setConfirmDiscard(null);
+      refreshGit();
+      await load();
+    } catch (err) {
+      if (laneNow.current === lane) setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      if (laneNow.current === lane) setBusy(false);
+    }
   };
 
   // resolve / merge-commit / merge-abort: same shape as `act`, other body.
@@ -2044,6 +2079,13 @@ export function LaneChangesPanel({
   const dirty = draft !== null && draft !== text?.lines.join("\n");
   // Rendered only where the toggle is offered: a whole markdown file.
   const mdShown = mdPreview && whole && isMarkdown(openFile);
+  // An HTML page's relative CSS/scripts/images, read like a download — only
+  // from the working tree: a commit's page would get today's files.
+  const htmlFetch = useMemo(
+    () => (range === "commit" ? null : fetchVia((p) => api.lanes.gitDownloadUrl(target, p))),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [range, JSON.stringify(target)]
+  );
   dirtyRef.current = dirty;
   useUnsavedGuard(dirty);
   const dirtyChangeRef = useRef(onDirtyChange);
@@ -2560,6 +2602,31 @@ export function LaneChangesPanel({
                   ))}
                 </div>
               )}
+              {/* An HTML file opens as the page in a modal over the screen;
+                  a commit's page once its text is read (Whole file). */}
+              {mode === "file" && isHtml(openFile) && (
+                <button
+                  type="button"
+                  data-testid="lane-file-preview"
+                  disabled={dirty || (range === "commit" && !text)}
+                  onClick={() => setHtmlOpen(true)}
+                  className="flex items-center gap-1 rounded border border-border bg-surface-2 px-2 py-1 text-[11px] text-fg-secondary hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  <Eye className="h-3 w-3" />
+                  {t("changes.preview")}
+                </button>
+              )}
+              {htmlOpen && openFile && (
+                <HtmlViewerModal
+                  path={openFile}
+                  // A commit's page is its text at that commit (no sibling
+                  // files); a working one is read whole from the disk.
+                  html={range === "commit" ? text?.lines.join("\n") : undefined}
+                  fetchFile={htmlFetch}
+                  onDownload={!local && range !== "commit" ? () => download(openFile) : undefined}
+                  onClose={() => setHtmlOpen(false)}
+                />
+              )}
             </div>
           )}
         </div>
@@ -2810,13 +2877,13 @@ export function LaneChangesPanel({
                     <button
                       type="button"
                       data-testid="lane-changes-discard-all"
-                      disabled={busy}
-                      onClick={() => void discardAll()}
-                      title={t("changes.discardAllTitle")}
+                      disabled={busy || tickedPaths.length === 0}
+                      onClick={() => void discardTicked()}
+                      title={t("changes.discardTickedTitle")}
                       className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-status-danger hover:bg-status-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
                     >
                       <Trash2 className="h-3 w-3" aria-hidden />
-                      {t("changes.discardAll")}
+                      {t("changes.discardTicked", { count: tickedPaths.length })}
                     </button>
                   </div>
                 </div>
@@ -2969,6 +3036,7 @@ export function LaneChangesPanel({
                       {t("changes.annotate")}
                     </button>
                   )}
+                  {/* An HTML file's Preview sits beside Whole file instead. */}
                   {whole && text && !dirty && isMarkdown(openFile) && (
                     <button
                       type="button"

client/src/components/lanes/LaneConflictView.tsx

@@ -15,7 +15,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { api, gitTarget } from "../../lib/api";
+import { api, gitTarget, type GitSource } from "../../lib/api";
 import {
   applyChoices,
   parseConflicts,
@@ -47,7 +47,7 @@ export function LaneConflictView({
   /** Work in that session's own worktree (see `gitTarget`). */
   session?: string;
   /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
-  source?: number;
+  source?: GitSource;
   path: string;
   /** The file left the conflict (resolved, or a whole side taken). */
   onResolved: () => void;

client/src/components/lanes/LaneDiffView.tsx

@@ -179,6 +179,18 @@ export function langFor(filePath: string) {
 }
 
 /** Tokenized line text. `emph` marks the span that actually changed. */
+/** The tail of a row the server cut down (`LaneDiffLine.elided`). */
+function Elided({ n }: { n?: number }) {
+  const { t, i18n } = useTranslation("lanes");
+  if (!n) return null;
+  const size = new Intl.NumberFormat(i18n.language, { notation: "compact" }).format(n);
+  return (
+    <span className="ml-1 select-none rounded bg-surface-3 px-1 font-sans text-[10px] text-fg-muted">
+      {t("changes.lineElided", { size })}
+    </span>
+  );
+}
+
 function Code({ text, lang, emph }: { text: string; lang: string; emph?: [number, number] }) {
   if (emph) {
     const [from, to] = emph;
@@ -544,6 +556,7 @@ function UnifiedLine({
           {line.type === "add" ? "+" : line.type === "del" ? "-" : " "}
         </span>
         <Code text={line.text} lang={lang} emph={emph} />
+        <Elided n={line.elided} />
       </span>
       {bar && <HunkBar change={bar} />}
     </Row>
@@ -621,6 +634,7 @@ function SplitLine({
       />
       <span className="whitespace-pre px-1">
         {line ? <Code text={line.text} lang={lang} emph={e} /> : null}
+        {line ? <Elided n={line.elided} /> : null}
       </span>
       {bar && <HunkBar change={bar} />}
     </Row>

client/src/components/lanes/LaneGitBar.tsx

@@ -1,7 +1,9 @@
 /**
  * @file The lane's git action row: ahead/behind against the upstream, and the
  * writes `POST /api/lanes/:id/git/:action` offers that are not per-file —
- * fetch, pull, push, switch branch, create/delete a branch, publish a repo
+ * fetch, pull, push, switch branch (a local one, or one only a remote has —
+ * listed under "On the remote" and checked out as a new tracking branch; the
+ * list is re-read after every fetch and pull), create/delete a branch, publish a repo
  * that has no remote yet (a URL, then `origin` + `push -u`), and start a merge
  * (the picked branch, or the upstream once diverged; resolving it is the
  * Changes panel's job). Committing is
@@ -38,7 +40,7 @@ import {
   Trash2,
   Upload,
 } from "lucide-react";
-import { api, gitTarget, type GitAuthNeeded } from "../../lib/api";
+import { api, gitTarget, type GitSource, type GitAuthNeeded } from "../../lib/api";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { isSubmitEnter } from "../../lib/keys";
@@ -98,7 +100,7 @@ export function LaneGitBar({
   /** Work in that session's own worktree (see `gitTarget`). */
   session?: string;
   /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
-  source?: number;
+  source?: GitSource;
   git: LaneGitFacts;
   /** Rendered at the start of the action row: the header's branch line, so
    *  the facts and the buttons that act on them read as one row. */
@@ -114,6 +116,8 @@ export function LaneGitBar({
   const [error, setError] = useState<string | null>(null);
   const [switching, setSwitching] = useState(false);
   const [branches, setBranches] = useState<string[] | null>(null);
+  // Fetched remote branches with no local one yet (`origin/feature`).
+  const [remoteBranches, setRemoteBranches] = useState<string[]>([]);
   const [worktrees, setWorktrees] = useState<LaneWorktree[]>([]);
   const [picked, setPicked] = useState("");
   const [newBranch, setNewBranch] = useState("");
@@ -138,6 +142,7 @@ export function LaneGitBar({
     setError(null);
     setSwitching(false);
     setBranches(null);
+    setRemoteBranches([]);
     setWorktrees([]);
     setPicked("");
     setNewBranch("");
@@ -152,6 +157,9 @@ export function LaneGitBar({
 
   if (!git.available) return null;
   const dirty = git.dirty + git.untracked;
+  // A remote branch: switching creates its local tracking branch; it cannot
+  // be deleted here or given a sibling worktree before that.
+  const pickedRemote = remoteBranches.includes(picked);
   const merging = !!git.merging;
 
   const run = async (action: Action, body?: RunBody) => {
@@ -184,6 +192,9 @@ export function LaneGitBar({
         setPicked("");
         setBranches(null);
         await refreshBranches();
+      } else if ((action === "fetch" || action === "pull") && branches !== null) {
+        // A fetch may have brought branches the list does not show yet.
+        await refreshBranches();
       }
       onChanged();
     } catch (err) {
@@ -217,6 +228,7 @@ export function LaneGitBar({
       const r = await api.lanes.gitBranches(gitTarget(laneId, session, source));
       if (laneNow.current !== laneId) return;
       setBranches(r.branches);
+      setRemoteBranches(r.remotes || []);
       setWorktrees(r.worktrees || []);
     } catch {
       if (laneNow.current === laneId) setBranches([]);
@@ -446,6 +458,15 @@ export function LaneGitBar({
                 </option>
               );
             })}
+            {remoteBranches.length > 0 && (
+              <optgroup label={t("gitBar.remoteBranches")}>
+                {remoteBranches.map((b) => (
+                  <option key={`remote:${b}`} value={b}>
+                    {b}
+                  </option>
+                ))}
+              </optgroup>
+            )}
           </select>
           <Btn
             label={t("gitBar.switchApply")}
@@ -476,7 +497,7 @@ export function LaneGitBar({
                     })
                   : t("gitBar.newLaneHint")
               }
-              disabled={!picked || heldBy.has(picked) || picked === git.branch}
+              disabled={!picked || heldBy.has(picked) || picked === git.branch || pickedRemote}
               // The sibling lane is created through the normal Add-lane flow,
               // prefilled — one provisioning path, not a second one here.
               onClick={() => onNewLane(picked)}
@@ -486,7 +507,7 @@ export function LaneGitBar({
             label={t("gitBar.branchDelete")}
             icon={<Trash2 className="h-3 w-3" />}
             busy={busy === "branch-delete"}
-            disabled={!picked || picked === git.branch || !!heldBy.get(picked)}
+            disabled={!picked || picked === git.branch || !!heldBy.get(picked) || pickedRemote}
             title={t("gitBar.branchDeleteHint")}
             onClick={() =>
               void confirmRun(

client/src/components/lanes/LaneGitHeader.tsx

@@ -19,7 +19,7 @@ import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { GitBranch } from "lucide-react";
 import { LaneGitBar } from "./LaneGitBar";
-import { api, gitTarget } from "../../lib/api";
+import { api, gitTarget, type GitSource } from "../../lib/api";
 import { keepIfSame } from "../../lib/keepIfSame";
 import type { LaneGitFacts, LaneGitFile } from "../../lib/types";
 
@@ -37,8 +37,8 @@ export function useLaneGitFacts(
   laneId: number,
   /** Read that session's own worktree instead (`?session=`). */
   session?: string,
-  /** Read that extra folder's repo instead (`?source=`). */
-  source?: number
+  /** Read that extra folder's repo (`?source=`, a number) or that inner repo (`?repo=`, a string) instead. */
+  source?: GitSource
 ): [LaneGitFacts | null, () => void] {
   const [facts, setFacts] = useState<LaneGitFacts | null>(null);
   // Bumped by the git action bar: a commit or a pull changes every fact on
@@ -329,7 +329,7 @@ export function LaneGitRailCounts({
 }: {
   laneId: number;
   session?: string;
-  source?: number;
+  source?: GitSource;
   /** Opens the Changes panel from the file list's "… more files". */
   onShowAll?: () => void;
 }) {
@@ -349,7 +349,7 @@ export function LaneGitHeader({
   /** Work in that session's own worktree (see `gitTarget`). */
   session?: string;
   /** Work in that extra folder's repo instead (`lane_sources` id, see `gitTarget`). */
-  source?: number;
+  source?: GitSource;
   git: LaneGitFacts | null;
   /** Called after a git bar action: the facts AND the panel's diff moved. */
   onChanged: () => void;

client/src/components/lanes/SessionReplay.tsx

@@ -10,7 +10,7 @@
  * second `--resume` (the server refuses one too, `ESESSIONLIVE`) — the typed
  * message is pasted there (never sent: Enter is the user's), with a toast; while
  * it is live the composer is off. Only Claude, Codex and a catalog tool with
- * `resumeById` (omp) can resume a session by id — any other tool's session
+ * `resumeById` (omp, Cursor, Antigravity) can resume a session by id — any other tool's session
  * offers a new session from the workspace home
  * instead. The header carries the transcript page's Resume/Fork
  * (`SessionResumeButton`, behind its warning). The session's tool and folder

client/src/components/lanes/WorkspaceHome.tsx

@@ -14,7 +14,7 @@
  * a catalog tool's bypass — a YOLO chip for Codex) and Local / New worktree — the workspace's Recents — the sessions it
  * owns and has not archived (`?lane=&archived=0`, with each one's state dot,
  * **Show more** past the first page, and the sidebar row's Rename/Archive in
- * its right-click menu), then the archived ones folded with Unarchive; a live session opens its pane,
+ * its right-click menu — Archive on a live session stops its pane first, `endRuns`), then the archived ones folded with Unarchive; a live session opens its pane,
  * any other its conversation (`&session=`, `SessionReplay`), nothing is resumed — and on the right its context: Instructions, Memory (read-only), Context files and
  * Folders (`WorkspaceContext.tsx`, also folded at the bottom of the Changes panel).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -22,6 +22,7 @@
 
 import { isSubmitEnter } from "../../lib/keys";
 import { confirmDialog } from "../../lib/confirm";
+import { endRuns } from "../../lib/stopSession";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -307,30 +308,30 @@ function HomeBody({
     }
   };
   const archiveSession = async (s: Session) => {
-    const live = !!liveRunFor(lane, liveRuns, s.id);
+    const run = liveRunFor(lane, liveRuns, s.id);
+    // A live one is stopped first, as the tab's X does (its own confirm):
+    // archiving only its row left a pane running that no list showed.
+    if (run) {
+      if ((await endRuns([run], { name: s.name || t("tree.newSession"), t })).length)
+        await patchSession(s, { archived: true });
+      return;
+    }
     const wt = sessionWorktreeName(lane, s);
     const ok = await confirmDialog(
-      wt && !live
+      wt
         ? {
             title: t("tree.archiveWorktreeTitle"),
             message: t("tree.archiveWorktreeBody", { name: wt }),
             confirmLabel: t("tree.archiveWorktreeConfirm"),
           }
-        : live
-          ? {
-              title: t("tree.archiveLiveTitle"),
-              message: t("tree.archiveLiveBody"),
-              confirmLabel: t("sessionMenu.archive"),
-              destructive: false,
-            }
-          : {
-              title: t("tree.archiveSession"),
-              confirmLabel: t("sessionMenu.archive"),
-              destructive: false,
-            }
+        : {
+            title: t("tree.archiveSession"),
+            confirmLabel: t("sessionMenu.archive"),
+            destructive: false,
+          }
     );
     if (!ok) return;
-    if (wt && !live) {
+    if (wt) {
       try {
         await api.lanes.removeSessionWorktree(lane.id, s.id).catch((err: unknown) => {
           if ((err as { code?: string }).code !== "ENOWORKTREE") throw err;

client/src/components/lanes/WorkspaceRowMenu.tsx

@@ -3,7 +3,9 @@
  * the pointer (right-click) or under the row's `⋯` button. Every item is an
  * existing call: Rename (the row's inline field), New workspace here (the
  * Add modal prefilled), Copy path, and Reset/Remove through `DestructiveLaneModal` — Reset only on a
- * managed lane. The server's guards are the real ones; the menu only hides
+ * managed lane — plus Move to group (the sidebar's own groups,
+ * `lib/workspaceGroups.ts`: one of them, a new one, or out of its group). The
+ * server's guards are the real ones; the menu only hides
  * what the lane's kind or tool makes meaningless. The shell (position,
  * Escape / outside-click close) is `ContextMenu`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
@@ -11,7 +13,9 @@
 
 import { useTranslation } from "react-i18next";
 import type { Lane } from "../../lib/types";
+import { Check } from "lucide-react";
 import { ContextMenu, MenuItem, MenuSeparator } from "../ContextMenu";
+import type { WorkspaceGroup } from "../../lib/workspaceGroups";
 import { copyText } from "../../lib/clipboard";
 
 export type WorkspaceMenuAction = "rename" | "new-here" | "reset" | "remove";
@@ -22,6 +26,9 @@ export function WorkspaceRowMenu({
   y,
   onClose,
   onAction,
+  groups = [],
+  groupId = null,
+  onGroup,
 }: {
   lane: Lane;
   x: number;
@@ -29,6 +36,11 @@ export function WorkspaceRowMenu({
   onClose: () => void;
   /** Items the tree itself carries out (rename field, modals). */
   onAction: (action: WorkspaceMenuAction) => void;
+  /** The sidebar's groups and the one this workspace is in. */
+  groups?: WorkspaceGroup[];
+  groupId?: string | null;
+  /** Move it: to a group's id, out of its group (null), or into a new group ("new"). */
+  onGroup?: (target: string | null | "new") => void;
 }) {
   const { t } = useTranslation("lanes");
   return (
@@ -43,6 +55,35 @@ export function WorkspaceRowMenu({
       >
         {t("menu.copyPath")}
       </MenuItem>
+      {onGroup && (
+        <>
+          <MenuSeparator />
+          <div className="px-2 pb-0.5 pt-1 text-[10px] font-semibold uppercase tracking-wide text-fg-muted">
+            {t("menu.moveToGroup")}
+          </div>
+          {groups.map((g) => (
+            <MenuItem
+              key={g.id}
+              testId={`workspace-move-group-${g.id}`}
+              disabled={g.id === groupId}
+              onSelect={() => onGroup(g.id)}
+            >
+              <Check className={`h-3 w-3 shrink-0 ${g.id === groupId ? "" : "invisible"}`} />
+              <span className="truncate">{g.name}</span>
+            </MenuItem>
+          ))}
+          <MenuItem testId="workspace-move-group-new" onSelect={() => onGroup("new")}>
+            <span className="w-3 shrink-0" />
+            {t("menu.newGroupWith")}
+          </MenuItem>
+          {groupId && (
+            <MenuItem testId="workspace-move-group-none" onSelect={() => onGroup(null)}>
+              <span className="w-3 shrink-0" />
+              {t("menu.removeFromGroup")}
+            </MenuItem>
+          )}
+        </>
+      )}
       <MenuSeparator />
       {lane.kind === "managed" && (
         <MenuItem danger onSelect={() => onAction("reset")}>

client/src/components/lanes/WorkspaceSessionList.tsx

@@ -24,7 +24,7 @@
  * The list shows `SESSION_LIMIT` rows and a **See all (N more)** under them that
  * loads every one, then a **Show less** that goes back to `SESSION_LIMIT`. A
  * live tab whose session was archived is not brought back as a New session,
- * and archiving a live one asks first. F2 renames the focused row too; each
+ * and archiving a live one STOPS it first (`endRuns`, the tab X's confirm). F2 renames the focused row too; each
  * dot carries its meaning as screen-reader text. `readOnly` (another user's
  * workspace, for an analyst): no live tabs, no rename/archive/menu, and a row
  * opens the session's analysis page (`/sessions/<id>`) — never a pane or a resume.
@@ -32,7 +32,7 @@
  */
 
 import { useEffect, useState, type ReactNode } from "react";
-import { confirmDialog } from "../../lib/confirm";
+import { endRuns } from "../../lib/stopSession";
 import { isSubmitEnter } from "../../lib/keys";
 import { Archive, GitBranch, Pin, PinOff, SquareTerminal } from "lucide-react";
 import { useTranslation } from "react-i18next";
@@ -363,17 +363,10 @@ export function WorkspaceSessionList({
   };
   const archive = async (s: Session) => {
     if (sessionWorktreeName(lane, s) && !runFor(s)) return setArchiving(s);
-    // A live one keeps running in its tab; archiving only hides its row.
-    if (
-      runFor(s) &&
-      !(await confirmDialog({
-        title: t("tree.archiveLiveTitle"),
-        message: t("tree.archiveLiveBody"),
-        confirmLabel: t("sessionMenu.archive"),
-        destructive: false,
-      }))
-    )
-      return;
+    // A live one is stopped first, as the tab's X does: archiving only its row
+    // left a pane running that no list showed any more.
+    const run = runFor(s);
+    if (run && !(await endRuns([run], { name: s.name || t("tree.newSession"), t })).length) return;
     await patch(s, { archived: true });
   };
   const archiveWithWorktree = async (s: Session) => {

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

@@ -69,7 +69,7 @@ const TOOLS: AiToolsView = {
     tool("codex", "Codex", { launcher: "codex", proxyCapable: true, prompt: null }),
     tool("gemini", "Gemini"),
     tool("aider", "Aider", { installed: false, path: null }),
-    tool("grok", "Grok", { enabled: false }),
+    tool("goose", "Goose", { enabled: false }),
   ],
 };
 

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

@@ -9,7 +9,8 @@
  * purge there, sending the item's store) and
  * shows a Trash that could not be read as an error, never as empty; nests a
  * user's workspaces under their home in the sidebar (under a fold-only row
- * when the viewer may not open that home).
+ * when the viewer may not open that home); opens an HTML file as the page
+ * instead of downloading it.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
@@ -136,6 +137,38 @@ describe("FileExplorer", () => {
     expect(api.files.list).toHaveBeenLastCalledWith(1, "src");
   });
 
+  it("opens an HTML file as the page, its stylesheet read through the download", async () => {
+    vi.mocked(api.files.list).mockResolvedValue({
+      ...root,
+      entries: [
+        ...root.entries,
+        { name: "deck.html", path: "deck.html", type: "file", size: 9, mtime: 0 },
+      ],
+    });
+    const body: Record<string, string> = {
+      "/dl/1/deck.html": '<link rel="stylesheet" href="s.css"><p>deck</p>',
+      "/dl/1/s.css": "p{color:red}",
+    };
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (u) => new Response(body[String(u)] ?? "", { status: 200 }));
+    const click = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => {});
+    open();
+    await screen.findByText("deck.html");
+    fireEvent.doubleClick(row("deck.html"));
+    const viewer = await screen.findByTestId("fx-html-viewer");
+    await waitFor(() =>
+      expect(within(viewer).getByTestId("html-frame").getAttribute("srcdoc")).toContain(
+        "<style>p{color:red}</style>"
+      )
+    );
+    expect(click).not.toHaveBeenCalled();
+    fireEvent.click(within(viewer).getByRole("button", { name: "Close" }));
+    expect(screen.queryByTestId("fx-html-viewer")).toBeNull();
+    fetchSpy.mockRestore();
+    click.mockRestore();
+  });
+
   it("makes a folder inline", async () => {
     vi.mocked(api.files.mkdir).mockResolvedValue({ path: "docs" });
     const user = userEvent.setup();

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

@@ -382,7 +382,8 @@ describe("LaneChangesPanel", () => {
     const box = within(folder.parentElement!).getByRole("checkbox", {
       name: "Tick every file in server/lib",
     });
-    expect(box).toBeChecked();
+    // The default ticks land in an effect after the list renders.
+    await waitFor(() => expect(box).toBeChecked());
     await user.click(box);
     expect(tickOf("server/lib/git-ops.js")).not.toBeChecked();
     await user.click(folder);
@@ -543,6 +544,71 @@ describe("LaneChangesPanel", () => {
     expect(screen.queryByTestId("lane-file-editor")).toBeNull();
   });
 
+  it("opens a whole HTML file as its source, the page in a modal after Preview", async () => {
+    vi.mocked(api.lanes.gitTree).mockResolvedValue({
+      available: true,
+      path: "",
+      entries: [{ name: "deck.html", path: "deck.html", dir: false, status: "??" }],
+      truncated: false,
+    });
+    vi.mocked(api.lanes.gitFile).mockResolvedValue({
+      available: true,
+      path: "deck.html",
+      rev: "work",
+      binary: false,
+      truncated: false,
+      lines: ["<p>deck</p>"],
+      sha: "c".repeat(40),
+    });
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response("<p>deck</p>", { status: 200 }));
+    try {
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} full />);
+      const sidebar = await screen.findByTestId("lane-changes-sidebar");
+      await user.click(await within(sidebar).findByText("deck.html"));
+      expect(await screen.findByTestId("lane-file-editor")).toHaveValue("<p>deck</p>");
+      expect(screen.queryByTestId("html-frame")).toBeNull();
+      await user.click(screen.getByTestId("lane-file-preview"));
+      const modal = await screen.findByTestId("html-viewer");
+      const frame = await within(modal).findByTestId("html-frame");
+      expect(frame.getAttribute("srcdoc")).toContain("<p>deck</p>");
+      expect(frame.getAttribute("sandbox")).not.toContain("allow-same-origin");
+      await user.keyboard("{Escape}");
+      await waitFor(() => expect(screen.queryByTestId("html-viewer")).toBeNull());
+      // The source stayed where it was, under the modal.
+      expect(screen.getByTestId("lane-file-editor")).toHaveValue("<p>deck</p>");
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
+  it("offers Preview on a changed HTML file's Changes, opening the page in a modal", async () => {
+    vi.mocked(api.lanes.changes).mockResolvedValue(
+      changes({
+        files: [
+          { path: "deck.html", status: "??", untracked: true, added: 1, deleted: 0, binary: false },
+        ],
+      })
+    );
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response("<p>deck</p>", { status: 200 }));
+    try {
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} />);
+      await user.click(await screen.findByTitle("deck.html"));
+      await screen.findByRole("button", { name: "Changes", pressed: true });
+      await user.click(await screen.findByTestId("lane-file-preview"));
+      const modal = await screen.findByTestId("html-viewer");
+      expect(await within(modal).findByTestId("html-frame")).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Changes", pressed: true })).toBeInTheDocument();
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
   it("shows an image file as the picture, with no edit control", async () => {
     vi.mocked(api.lanes.gitTree).mockResolvedValue({
       available: true,
@@ -771,10 +837,12 @@ describe("LaneChangesPanel", () => {
     });
   });
 
-  it("discards every file at once only after the dialog is confirmed", async () => {
+  it("discards only the ticked files, and only after the dialog is confirmed (#87)", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);
     await screen.findByTestId("lane-changes-overview");
+    // notes.txt (unversioned) starts unticked; untick docs/API.md too.
+    await user.click(tickOf("docs/API.md"));
 
     vi.mocked(confirmDialog).mockResolvedValueOnce(false);
     await user.click(screen.getByTestId("lane-changes-discard-all"));
@@ -783,10 +851,14 @@ describe("LaneChangesPanel", () => {
     await user.click(screen.getByTestId("lane-changes-discard-all"));
     await waitFor(() =>
       expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "discard", {
-        paths: ["server/lib/git-ops.js", "notes.txt", "docs/API.md"],
+        paths: ["server/lib/git-ops.js"],
         confirm: true,
       })
     );
+
+    // Nothing ticked: nothing to discard.
+    await user.click(tickOf("server/lib/git-ops.js"));
+    expect(screen.getByTestId("lane-changes-discard-all")).toBeDisabled();
   });
 
   it("right-click on a changed file offers Commit File, a two-click discard, copy path and patch", async () => {
@@ -1607,6 +1679,25 @@ describe("LaneChangesPanel", () => {
       expect(api.lanes.gitAction).not.toHaveBeenCalled();
     });
 
+    it("discards only the ticked change blocks of a partly ticked file (#87)", async () => {
+      const user = userEvent.setup();
+      await openReview(user);
+      await user.click(
+        screen.getAllByRole("checkbox", { name: "Include this change in the commit" })[1]!
+      );
+      await user.click(screen.getByRole("button", { name: "Changes" }));
+      await screen.findByTestId("lane-changes-commit");
+      await user.click(screen.getByTestId("lane-changes-discard-all"));
+      await waitFor(() =>
+        expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "discard", {
+          paths: [],
+          hunks: { "server/lib/git-ops.js": [{ hunk: "@@ -1,2 +1,3 @@", blocks: [0] }] },
+          context: 3,
+          confirm: true,
+        })
+      );
+    });
+
     it("commits only the ticked change blocks of a partly ticked file (hunks)", async () => {
       const user = userEvent.setup();
       await openReview(user);

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

@@ -609,3 +609,26 @@ describe("LaneDiffView — line comments", () => {
     expect(screen.queryByTestId("diff-comment-line-1")).toBeNull();
   });
 });
+
+describe("LaneDiffView — a row the server cut down", () => {
+  const CUT: LaneChangeFile = {
+    ...FILE,
+    hunks: [
+      {
+        ...FILE.hunks![0]!,
+        lines: [
+          { type: "del", oldLine: 1, newLine: null, text: '<video src="AAAA', elided: 3_000_000 },
+          { type: "add", oldLine: null, newLine: 1, text: '<video src="BBBB', elided: 3_000_000 },
+        ],
+      },
+    ],
+  };
+
+  it("says how much of the row it hides, in both layouts", () => {
+    const { unmount } = render(<LaneDiffView file={CUT} layout="unified" />);
+    expect(screen.getAllByText(/3M more characters on this line/)).toHaveLength(2);
+    unmount();
+    render(<LaneDiffView file={CUT} layout="split" />);
+    expect(screen.getAllByText(/3M more characters on this line/)).toHaveLength(2);
+  });
+});

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

@@ -4,7 +4,8 @@
  * buttons a repo with no remote may press (and that it may publish to a typed URL),
  * what an unborn repo and a branch with no upstream show, that it offers no commit (the
  * Changes panel's staged-only box owns that), that a dirty tree blocks the branch switch client-side (the server
- * refuses it too), and that a failed action shows git's own words rather than
+ * refuses it too), that branches only the remote has are offered (and the list
+ * is re-read after a fetch), and that a failed action shows git's own words rather than
  * a generic sentence.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
@@ -236,6 +237,43 @@ describe("LaneGitBar", () => {
     await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledTimes(2));
   });
 
+  it("lists branches only the remote has, switches to one, and re-reads the list after a fetch", async () => {
+    vi.mocked(api.lanes.gitBranches).mockResolvedValue({
+      available: true,
+      branches: ["development", "feat/thing"],
+      remotes: ["origin/feat/new"],
+      current: "feat/thing",
+      worktrees: [],
+    });
+    const user = userEvent.setup();
+    render(
+      <LaneGitBar
+        laneId={3}
+        git={facts({ dirty: 0, untracked: 0 })}
+        onChanged={vi.fn()}
+        onNewLane={vi.fn()}
+      />
+    );
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    const select = await screen.findByLabelText("Switch branch…");
+    expect(
+      screen.getByRole("group", { name: "On the remote — switching creates the local branch" })
+    ).toBeInTheDocument();
+    await user.selectOptions(select, "origin/feat/new");
+    // Not a local branch yet: nothing to delete, no worktree to start on it.
+    expect(screen.getByRole("button", { name: "Delete" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /New workspace here/ })).toBeDisabled();
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "switch", { branch: "origin/feat/new" })
+    );
+
+    vi.mocked(api.lanes.gitBranches).mockClear();
+    await user.click(screen.getByRole("button", { name: /Fetch/ }));
+    await waitFor(() => expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "fetch", {}));
+    await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledTimes(1));
+  });
+
   it("creates a branch without switching, then offers a sibling lane on it", async () => {
     const user = userEvent.setup();
     const onNewLane = vi.fn();

client/src/components/run/ChatFilePreview.tsx

@@ -12,6 +12,8 @@
  * 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.
+ * `FilePreview` with `modal` (an HTML page, from PaneChat) is the same view in
+ * a modal over the whole screen.
  * `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.
@@ -39,6 +41,7 @@ import { useDialog } from "../../hooks/useDialog";
 import { dragSkill } from "../../lib/promptAttach";
 import { readMarkdownPreview } from "../../lib/markdownView";
 import { MarkdownPreview } from "../MarkdownPreview";
+import { HtmlFrame, fetchVia } from "../HtmlFrame";
 import { CodeBlock } from "../conversation/CodeBlock";
 import { useTheme } from "../../hooks/useTheme";
 import { toast } from "../../lib/toast";
@@ -85,6 +88,18 @@ export const extOf = (p: string) => {
 export const displayName = (p: string) =>
   DROP_RE.test(p) ? baseName(p).replace(/^[0-9a-f]{16}-?/, "") || baseName(p) : baseName(p);
 
+/** A file inside the pane's folder: the git target that reads it and its path there. */
+function workspaceFile(path: string, scope: PreviewScope) {
+  const file = slashed(path);
+  const base = slashed(scope.cwd).replace(/\/+$/, "");
+  if (scope.laneId === null || !base || !file.startsWith(`${base}/`)) return null;
+  const target =
+    base === slashed(scope.laneCwd).replace(/\/+$/, "")
+      ? scope.laneId
+      : gitTarget(scope.laneId, scope.sessionId);
+  return { target, rel: file.slice(base.length + 1) };
+}
+
 type Content =
   | { kind: "loading" }
   | { kind: "image"; src: string }
@@ -121,8 +136,8 @@ function useContent(path: string, scope: PreviewScope): Content {
       };
     }
     const file = slashed(path);
-    const base = slashed(scope.cwd).replace(/\/+$/, "");
-    if (scope.laneId === null || !base || !file.startsWith(`${base}/`)) {
+    const inside = workspaceFile(path, scope);
+    if (!inside) {
       // Claude Code's own files (memory, a skill): the config pages' guarded read.
       if (/\/\.claude\//.test(file) && !IMAGE_RE.test(file)) {
         show(
@@ -147,11 +162,7 @@ function useContent(path: string, scope: PreviewScope): Content {
         live = false;
       };
     }
-    const rel = file.slice(base.length + 1);
-    const target =
-      base === slashed(scope.laneCwd).replace(/\/+$/, "")
-        ? scope.laneId
-        : gitTarget(scope.laneId, scope.sessionId);
+    const { target, rel } = inside;
     if (IMAGE_RE.test(path)) {
       setContent({ kind: "image", src: api.lanes.gitRawUrl(target, rel) });
       return;
@@ -235,9 +246,28 @@ function defaultView(path: string): View {
   return kind === "markdown" && !readMarkdownPreview() ? "code" : "preview";
 }
 
-function Body({ path, content, view }: { path: string; content: Content; view: View }) {
+function Body({
+  path,
+  content,
+  view,
+  scope,
+}: {
+  path: string;
+  content: Content;
+  view: View;
+  scope: PreviewScope;
+}) {
   const { t } = useTranslation("run");
   const kind = artifactKind(path);
+  // A page in the workspace brings its relative CSS, scripts and images along.
+  const inside = kind === "html" ? workspaceFile(path, scope) : null;
+  const insideTarget = inside ? JSON.stringify(inside.target) : null;
+  const page = useMemo(() => {
+    if (!inside) return null;
+    const { target, rel } = inside;
+    return { rel, fetchFile: fetchVia((p) => api.lanes.gitDownloadUrl(target, p)) };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [insideTarget, inside?.rel]);
   // An image the route refused (gone, server mode) shows like no preview.
   const [broken, setBroken] = useState<string | null>(null);
   const shown: Content =
@@ -290,6 +320,18 @@ function Body({ path, content, view }: { path: string; content: Content; view: V
     );
   }
   if (kind === "csv") return <CsvTable text={shown.text} tab={/\.tsv$/i.test(path)} />;
+  if (page && !shown.truncated) {
+    return (
+      <HtmlFrame
+        key={path}
+        path={page.rel}
+        html={shown.text}
+        fetchFile={page.fetchFile}
+        title={baseName(path)}
+        testId="artifact-frame"
+      />
+    );
+  }
   return <ArtifactFrame kind={kind} text={shown.text} title={baseName(path)} />;
 }
 
@@ -317,6 +359,7 @@ export function FilePreview({
   onClose,
   className = "",
   messages,
+  modal = false,
 }: {
   path: string;
   scope: PreviewScope;
@@ -324,12 +367,16 @@ export function FilePreview({
   className?: string;
   /** The conversation, for the versions its Write/Edit calls left. */
   messages?: TranscriptMessage[];
+  /** A modal over the whole screen (backdrop, Esc closes) instead of a panel. */
+  modal?: boolean;
 }) {
   const { t } = useTranslation("run");
   const kind = artifactKind(path);
   const loaded = useContent(path, scope);
   const [view, setView] = useState<View>(() => defaultView(path));
   const [full, setFull] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  useDialog(modal, modalRef, onClose);
   const [sharing, setSharing] = useState(false);
   const versions = useMemo(
     () => (messages ? artifactVersions(messages, path) : []),
@@ -384,7 +431,9 @@ export function FilePreview({
     <section
       data-testid="chat-file-preview"
       className={
-        full
+        modal
+          ? "flex h-[92vh] w-[96vw] max-w-7xl min-h-0 min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl shadow-black/50"
+          : full
           ? "fixed inset-4 z-[200] flex min-h-0 min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-2xl"
           : `flex min-h-0 min-w-0 flex-col overflow-hidden bg-surface-1 ${className}`
       }
@@ -482,16 +531,18 @@ export function FilePreview({
               <Share2 className="h-3.5 w-3.5" />
             )}
           </button>
-          <button
-            type="button"
-            data-testid="artifact-expand"
-            onClick={() => setFull((f) => !f)}
-            title={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
-            aria-label={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
-            className={iconBtn}
-          >
-            {full ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
-          </button>
+          {!modal && (
+            <button
+              type="button"
+              data-testid="artifact-expand"
+              onClick={() => setFull((f) => !f)}
+              title={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
+              aria-label={t(full ? "chat.artifact.collapse" : "chat.artifact.expand")}
+              className={iconBtn}
+            >
+              {full ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+            </button>
+          )}
           <button
             type="button"
             onClick={onClose}
@@ -503,9 +554,35 @@ export function FilePreview({
           </button>
         </div>
       </header>
-      <Body path={path} content={content} view={view} />
+      <Body path={path} content={content} view={view} scope={scope} />
     </section>
   );
+  if (modal) {
+    return createPortal(
+      <div
+        className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-3"
+        onClick={onClose}
+        onKeyDown={(e) => {
+          // Nothing reaches the view underneath — so Esc, which useDialog's
+          // document listener would never see, closes here.
+          e.stopPropagation();
+          if (e.key === "Escape") onClose();
+        }}
+        role="presentation"
+      >
+        <div
+          ref={modalRef}
+          role="dialog"
+          aria-modal="true"
+          aria-label={displayName(path)}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {panel}
+        </div>
+      </div>,
+      document.body
+    );
+  }
   // Full screen: over the whole page, where a pane's edges cannot clip it.
   return full ? createPortal(panel, document.body) : panel;
 }

client/src/components/run/PaneChat.tsx

@@ -35,7 +35,9 @@
  * of files or the used skills a list with a preview (`FileListModal`,
  * `SkillListModal`). Anything there drags into the prompt box. A file in a turn's
  * "Edited N files" card opens in the Workspace's Changes panel
- * (`openInChanges`) when it lies in the pane's folder. The unsent prompt and
+ * (`openInChanges`) when it lies in the pane's folder. An HTML file — a card,
+ * an Outputs row, a path in a reply — opens instead as the page, the same
+ * preview in a modal over the whole screen. The unsent prompt and
  * its attachments are kept per session (`lib/chatDraft.ts`), so a reload
  * leaves them as typed; switching to the terminal pastes them into its input
  * box and back brings that box's text here (`ChatToggle`). A send scrolls the
@@ -582,6 +584,12 @@ export const PaneChat = memo(function PaneChat({
     setPreview(null);
   };
   const [preview, setPreview] = useState<string | null>(null);
+  // An HTML file shown as the page, in a modal over the screen.
+  const [htmlView, setHtmlView] = useState<string | null>(null);
+  const show = useCallback(
+    (path: string) => (/\.html?$/i.test(path) ? setHtmlView(path) : setPreview(path)),
+    []
+  );
   // The side panel's width as a fraction of the pane: the dragged one, else
   // a default per content (a preview wants more room than the panel).
   const [dragged, setDragged] = useState(storedSide);
@@ -757,20 +765,21 @@ export const PaneChat = memo(function PaneChat({
   // not the workspace's Changes panel a plain file link goes to.
   const openArtifact = useCallback(
     (named: string) => {
-      setPreview(resolveIn(cwd, named));
+      show(resolveIn(cwd, named));
     },
-    [cwd]
+    [cwd, show]
   );
   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);
+      if (/\.html?$/i.test(path)) return show(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);
     },
-    [laneId, cwd]
+    [laneId, cwd, show]
   );
 
   // Before the session starts the CLI may be asking in the terminal (trust
@@ -984,7 +993,7 @@ export const PaneChat = memo(function PaneChat({
           <ChatOutline
             outline={activity}
             onClose={() => openOutline(false)}
-            onOpenFile={setPreview}
+            onOpenFile={show}
             onOpenList={setList}
           />
         )
@@ -1006,6 +1015,15 @@ export const PaneChat = memo(function PaneChat({
           />
         </div>
       )}
+      {htmlView && (
+        <FilePreview
+          path={htmlView}
+          scope={scope}
+          messages={convMessages}
+          onClose={() => setHtmlView(null)}
+          modal
+        />
+      )}
       {list === "skills" && (
         <SkillListModal
           title={t("chat.outline.skills")}

client/src/components/run/PaneGrid.tsx

@@ -765,7 +765,7 @@ export function Divider({
   onRatio,
   label,
 }: {
-  gridRef: React.RefObject<HTMLDivElement>;
+  gridRef: React.RefObject<HTMLDivElement | null>;
   dir: SplitDir;
   at: number;
   box: Rect;

client/src/components/run/RunSetup.tsx

@@ -12,7 +12,8 @@
  *     remembered for the + menu's Recent uploads), and a panel row (Files,
  *     Changes, a context file or folder) dropped on it (`lib/promptAttach.ts`)
  *     as an `@path` chip — so is a local file a browser on the dashboard's
- *     own machine drops or pastes with its `file://` path, never uploaded —
+ *     own machine drops or pastes with its `file://` path, or pastes from a
+ *     file manager's Copy its OS clipboard holds, never uploaded —
  *     a `bare` one takes a drop anywhere on its box;
  *     its `/command` and `@path` tokens are coloured by a mirror laid over
  *     the textarea (`lib/promptTokens.ts`);
@@ -78,6 +79,8 @@ import {
   localAttachment,
   localCandidates,
   sameFilesHere,
+  fileManagerPaths,
+  isClipboardBitmap,
   SKILL_MIME,
   rememberUploads,
 } from "../../lib/promptAttach";
@@ -463,21 +466,26 @@ export function PromptEditor({
   };
   /** Dropped or pasted files: by their own paths when the browser is on the
    *  dashboard's machine and the server finds the same files there (a file
-   *  manager hands over `file://` paths beside the bytes), else uploaded. */
+   *  manager hands over `file://` paths beside the bytes) or its file manager
+   *  holds them (a paste: its clipboard; a drop: its selection — no upload,
+   *  no size limit), else uploaded. */
   const attachDropped = (
     dt: DataTransfer | null | undefined,
-    list: FileList | null | undefined
+    list: FileList | File[] | null | undefined,
+    from: "paste" | "drop"
   ) => {
     const files = Array.from(list ?? []);
     if (files.length === 0) return false;
-    const paths = localCandidates(dt, files);
-    if (!paths) return attachImages(files);
+    if (!isLocalBrowser()) return attachImages(files);
+    const candidates = localCandidates(dt, files);
     setUpload("uploading");
-    void sameFilesHere(paths, files).then((same) => {
-      if (!same) return void attachImages(files);
+    void (async () => {
+      let paths = candidates && (await sameFilesHere(candidates, files)) ? candidates : null;
+      paths ??= await fileManagerPaths(files, from);
+      if (!paths) return void attachImages(files);
       setUpload(null);
       onImagesChange((prev) => addAttachments(prev, paths.map(localAttachment)));
-    });
+    })();
     return true;
   };
   // Anything attached since — a path, a panel row, a + menu pick — ends a past
@@ -518,7 +526,7 @@ export function PromptEditor({
     } else if (skill) {
       e.preventDefault();
       onChange(`/${skill} ${value.replace(/^\s+/, "")}`);
-    } else if (attachDropped(e.dataTransfer, e.dataTransfer?.files)) e.preventDefault();
+    } else if (attachDropped(e.dataTransfer, e.dataTransfer?.files, "drop")) 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.
@@ -683,17 +691,21 @@ export function PromptEditor({
           onBlur={() => setTrigger(null)}
           onKeyDown={handleKeyDown}
           onPaste={(e) => {
-            if (attachDropped(e.clipboardData, e.clipboardData?.files)) e.preventDefault();
-            else if (pastedLocalFiles(e.clipboardData)) e.preventDefault();
-            else {
+            const pasted = Array.from(e.clipboardData?.files ?? []);
+            const text = e.clipboardData?.getData?.("text/plain") ?? "";
+            // Cells from a spreadsheet come with a picture of them: the text
+            // is what was copied (isClipboardBitmap).
+            const textWithPicture =
+              pasted.length > 0 && pasted.every(isClipboardBitmap) && !!text.trim();
+            if (!textWithPicture && attachDropped(e.clipboardData, pasted, "paste"))
+              e.preventDefault();
+            else if (!textWithPicture && pastedLocalFiles(e.clipboardData)) e.preventDefault();
+            else if (text.length > PASTE_AS_FILE_CHARS) {
               // A very long paste goes in as a text file, like Claude Desktop:
               // the prompt then carries its path, never the text (#68: a CLI's
               // argument and a tmux message both have a size limit).
-              const text = e.clipboardData?.getData("text/plain") ?? "";
-              if (text.length > PASTE_AS_FILE_CHARS) {
-                e.preventDefault();
-                attachImages([new File([text], "pasted-text.txt", { type: "text/plain" })]);
-              }
+              e.preventDefault();
+              attachImages([new File([text], "pasted-text.txt", { type: "text/plain" })]);
             }
           }}
           placeholder={placeholder}

client/src/components/run/TerminalView.tsx

@@ -18,7 +18,14 @@
  * (`POST /api/run/drop-file`) and their PATHS pasted into the pane — what a
  * local terminal does on a drop — as `@` mentions in a `claude` pane, which
  * reads them when the prompt is sent — an image as its bare path, which claude
- * shows as `[Image #n]` like a native drop; a browser on the dashboard's own
+ * shows as `[Image #n]` like a native drop — except a PASTED image in a
+ * `claude` pane of a local-mode dashboard opened on its own machine, which is
+ * sent as its image-paste key (^V; Alt+V on Windows) so `claude` reads the
+ * desktop clipboard itself, uploading nothing — and a file manager's files
+ * pasted or dropped on that machine go in by the paths it holds them under
+ * (its clipboard / its selection: `POST /api/run/clipboard-files`,
+ * `selected-files`), with no upload and no size limit
+ * (`lib/nativePaste.ts`, a Settings switch); a browser on the dashboard's own
  * machine pastes a file manager's files (dropped, or copied: `file://` text)
  * by their own paths instead, uploading nothing. A text drag (a Files/Changes row, a skill) is pasted as its text. The pane also registers with
  * `lib/panePaste.ts`, so a diff-line comment from the Changes panel can be
@@ -41,7 +48,9 @@
  * 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
  * the driver's grid (`size`), scaled down to fit, until a click or a keystroke
- * here takes the lead back (`resize` with `drive: true`).
+ * here takes the lead back (`resize` with `drive: true`). Cells are drawn by
+ * the WebGL addon (the DOM renderer after a lost context), and Alt+arrow keeps
+ * the word-move keys xterm 5 sent (`altArrowSeq`).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import {
@@ -56,7 +65,7 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import type { Terminal } from "@xterm/xterm";
-import type { CanvasAddon } from "@xterm/addon-canvas";
+import type { WebglAddon } from "@xterm/addon-webgl";
 import type { ClipboardAddon, IClipboardProvider } from "@xterm/addon-clipboard";
 import type { SearchAddon } from "@xterm/addon-search";
 import { ArrowDown, ArrowUp, X } from "lucide-react";
@@ -69,20 +78,54 @@ import { MENU_CURSOR_ROW, notePaneFocus, notePaneOutput, registerPane } from "..
 import {
   claudePastes,
   copiedFilePaths,
+  isClipboardBitmap,
   droppedFilePaths,
+  fileManagerPaths,
   isLocalBrowser,
   localCandidates,
   sameFilesHere,
 } from "../../lib/promptAttach";
 import { attachImeInput } from "../../lib/imeInput";
+import { nativePasteKey, nativePasteWorks, readNativePaste } from "../../lib/nativePaste";
+import { usePermissions } from "../AuthGate";
 import { TERMINAL_FONTS, readTerminalFont } from "../../lib/terminalFont";
 import { FONT_SIZE_EVENT, readTerminalFontSize } from "../../lib/fontSize";
 
-type DropState = "hint" | "paste" | "uploading" | "failed" | "tooBig" | "tooBigLocal";
+type DropState = "hint" | "paste" | "uploading" | "failed" | "tooBig" | "tooBigLocalPaste";
 
 /** localStorage flag for xterm's screen-reader mode (a Settings toggle can set it later). */
 export const SCREEN_READER_KEY = "agenthub.terminal.screenReader";
 /** localStorage flag: the "Shift+drag selects text" hint was dismissed. */
+/** The atlas a WebGL addon draws from: @xterm/addon-webgl 0.19 keeps these
+ *  fields unminified in its build. Undefined on any other shape. */
+type AtlasPages = { pages: { version: number }[] };
+const atlasOf = (addon: WebglAddon): AtlasPages | undefined => {
+  const atlas = (addon as unknown as { _renderer?: { _charAtlas?: AtlasPages } })._renderer
+    ?._charAtlas;
+  return Array.isArray(atlas?.pages) ? atlas : undefined;
+};
+/** Last version handed out by `restampAtlas`, shared by every pane. */
+let atlasStamp = 0;
+/**
+ * Gives every page of the addon's glyph atlas a version no texture slot has
+ * uploaded, so EVERY renderer sharing that atlas re-uploads every page from
+ * its canvas on its next draw — what addon-webgl 0.20 does with globally
+ * monotonic page versions. 0.19 counts per page, so after a merge shifts the
+ * pages down a slot can hold a stale page whose counter happens to match, and
+ * glyphs are sampled squeezed or foreign. Steps of 2^24 stay clear of the
+ * per-glyph increments a page makes before the next restamp. False when the
+ * addon is not the shape this knows.
+ */
+const restampAtlas = (addon: WebglAddon): boolean => {
+  const atlas = atlasOf(addon);
+  if (!atlas) return false;
+  for (const page of atlas.pages) {
+    atlasStamp += 2 ** 24;
+    page.version = atlasStamp;
+  }
+  return true;
+};
+
 const SELECT_HINT_KEY = "agenthub.terminal.selectHintSeen";
 const readFlag = (key: string) => {
   try {
@@ -112,10 +155,10 @@ const clipboardProvider: IClipboardProvider = {
  *  Workspace chunk. The result is cached, so every later pane (and a test that
  *  awaits `loadXterm()` first) sets up synchronously. */
 const importXterm = async () => {
-  const [xterm, fit, canvas, clipboard, search, links] = await Promise.all([
+  const [xterm, fit, webgl, clipboard, search, links] = await Promise.all([
     import("@xterm/xterm"),
     import("@xterm/addon-fit"),
-    import("@xterm/addon-canvas"),
+    import("@xterm/addon-webgl"),
     import("@xterm/addon-clipboard"),
     import("@xterm/addon-search"),
     import("@xterm/addon-web-links"),
@@ -123,7 +166,7 @@ const importXterm = async () => {
   return {
     Terminal: xterm.Terminal,
     FitAddon: fit.FitAddon,
-    CanvasAddon: canvas.CanvasAddon,
+    WebglAddon: webgl.WebglAddon,
     SearchAddon: search.SearchAddon,
     WebLinksAddon: links.WebLinksAddon,
     // The addon's typings declare one argument, its code takes (base64, provider).
@@ -147,6 +190,25 @@ export function loadXterm(): Promise<Xterm> {
   return xtermLoading;
 }
 
+const IS_MAC = /^Mac/.test(typeof navigator === "undefined" ? "" : navigator.platform);
+/** What xterm 5 sent for a bare Alt+arrow (its Keyboard.ts "HACK"s, removed
+ *  in xterm 6): Ctrl+arrow's sequence, except macOS's left/right, which are
+ *  readline's backward-word / forward-word and whose up/down stay Alt's. */
+export function altArrowSeq(key: string, mac = IS_MAC): string | null {
+  switch (key) {
+    case "ArrowLeft":
+      return mac ? "\x1bb" : "\x1b[1;5D";
+    case "ArrowRight":
+      return mac ? "\x1bf" : "\x1b[1;5C";
+    case "ArrowUp":
+      return mac ? null : "\x1b[1;5A";
+    case "ArrowDown":
+      return mac ? null : "\x1b[1;5B";
+    default:
+      return null;
+  }
+}
+
 /** Reconnect delay: 1.5 s, doubling per failed attempt up to 30 s. */
 const RETRY_MIN_MS = 1500;
 const RETRY_MAX_MS = 30_000;
@@ -239,6 +301,12 @@ export const TerminalView = memo(function TerminalView({
 
   // Ctrl+V was pressed and its paste has not arrived yet (see the key handler).
   const ctrlVRef = useRef(false);
+  const { local: localMode } = usePermissions();
+  // Ask early whether `^V` can reach this machine's clipboard, so the first
+  // pasted screenshot already takes the right way.
+  useEffect(() => {
+    if (tool === "claude" && localMode && isLocalBrowser()) nativePasteWorks();
+  }, [tool, localMode]);
 
   const onDrop = (e: DragEvent) => {
     if (hasText(e)) {
@@ -256,7 +324,7 @@ export const TerminalView = memo(function TerminalView({
     e.preventDefault();
     dragDepth.current = 0;
     const files = Array.from(e.dataTransfer.files);
-    void attachFiles(files, localCandidates(e.dataTransfer, files));
+    void attachFiles(files, localCandidates(e.dataTransfer, files), "drop");
   };
 
   // A pasted image (a screenshot) goes the way of a drop: xterm only reads
@@ -277,9 +345,27 @@ export const TerminalView = memo(function TerminalView({
       return;
     }
     if (files.length === 0 && (!ctrlV || e.clipboardData?.getData("text/plain"))) return;
+    // Cells from a spreadsheet, a page's selection: text WITH a picture of
+    // it. A terminal pastes the text there, so does this.
+    if (files.every(isClipboardBitmap) && e.clipboardData?.getData("text/plain")?.trim()) return;
     e.preventDefault();
     e.stopPropagation();
-    if (files.length > 0) void attachFiles(files, localCandidates(e.clipboardData, files));
+    // On the dashboard's own machine the browser's clipboard IS the pane's:
+    // `claude` reads a pasted image itself on ^V, as in a native terminal —
+    // nothing uploaded (lib/nativePaste.ts; off for an SSH tunnel's browser).
+    const nativeImage =
+      tool === "claude" &&
+      localMode &&
+      isLocalBrowser() &&
+      readNativePaste() &&
+      nativePasteWorks() &&
+      files.length > 0 &&
+      files.every(isClipboardBitmap);
+    if (nativeImage) {
+      termRef.current?.input(nativePasteKey(), true);
+      return;
+    }
+    if (files.length > 0) void attachFiles(files, localCandidates(e.clipboardData, files), "paste");
     else termRef.current?.input("\x16", true);
   };
 
@@ -299,11 +385,15 @@ export const TerminalView = memo(function TerminalView({
   /** Pastes the files' paths: their own (`local`, the `file://` paths a
    *  browser on the dashboard's machine is handed beside the bytes) once the
    *  server finds the same files there — nothing uploaded —, else the paths
-   *  the uploads were saved at. A refused file does not cost the others. */
-  const attachFiles = async (files: File[], local: string[] | null = null) => {
+   *  that machine's file manager holds them under (a paste: its clipboard; a
+   *  drop: its selection, what the drag carries — no upload, no size limit,
+   *  as a native terminal), else the paths the uploads were saved at. A
+   *  refused file does not cost the others. */
+  const attachFiles = async (files: File[], local: string[] | null, from: "paste" | "drop") => {
     if (files.length === 0) return;
     setDrop("uploading");
     let paths = local && (await sameFilesHere(local, files)) ? local : null;
+    paths ??= await fileManagerPaths(files, from);
     const errors: unknown[] = [];
     if (!paths) {
       const results = await Promise.allSettled(files.map((f) => api.run.dropFile(f, runId)));
@@ -321,7 +411,8 @@ export const TerminalView = memo(function TerminalView({
     if (tooBig) setLimitMb(Math.round((tooBig.maxBytes ?? 0) / 1024 / 1024));
     if (!errors.length) setDrop(null);
     else if (!tooBig) flash("failed");
-    else flash(isLocalBrowser() ? "tooBigLocal" : "tooBig", 6000); // a sentence to read
+    // A terminal has no + menu: on this machine, a paste goes by path.
+    else flash(isLocalBrowser() ? "tooBigLocalPaste" : "tooBig", 6000); // a sentence to read
   };
 
   useEffect(() => {
@@ -329,7 +420,7 @@ export const TerminalView = memo(function TerminalView({
     const attach = ({
       Terminal,
       FitAddon,
-      CanvasAddon,
+      WebglAddon,
       SearchAddon,
       WebLinksAddon,
       ClipboardWithProvider,
@@ -339,7 +430,7 @@ export const TerminalView = memo(function TerminalView({
       // which on Windows lacks Vietnamese precomposed diacritics — the OS then
       // substitutes those specific glyphs from a different face with a
       // mismatched advance width, corrupting the cell it's drawn into even
-      // under the canvas renderer (which only stops a glyph from shoving its
+      // under the WebGL renderer (which only stops a glyph from shoving its
       // *neighbours*, not from overflowing its own cell). JetBrains Mono is
       // already bundled for the rest of the UI; main.tsx additionally imports
       // its `vietnamese` subset so this covers the diacritics too. Settings →
@@ -385,17 +476,31 @@ export const TerminalView = memo(function TerminalView({
       // face whose advance width differs, so glyphs shove their neighbours along
       // and the row's tail spills onto the row below. The buffer is correct
       // throughout (copying the line yields clean text); only the painting drifts,
-      // and no CSS can correct it. Best-effort: a browser that cannot give a 2D
-      // context keeps the DOM renderer rather than losing the terminal.
-      let canvas: CanvasAddon | null = null;
+      // and no CSS can correct it. xterm 6 dropped its canvas renderer, so the
+      // cells are drawn by the WebGL one. Best-effort: a browser with no WebGL2
+      // keeps the DOM renderer rather than losing the terminal, and so does a
+      // pane whose context the browser takes back (GPU reset, or past the
+      // browser's cap of live contexts with many panes open) — disposing the
+      // addon hands the drawing back to the DOM renderer.
+      let gpu: WebglAddon | null = null;
       try {
-        canvas = new CanvasAddon();
-        term.loadAddon(canvas);
+        const addon = new WebglAddon();
+        term.loadAddon(addon);
+        gpu = addon;
+        addon.onContextLoss(() => {
+          addon.dispose();
+          if (gpu === addon) gpu = null;
+        });
       } catch {
-        canvas = null;
+        gpu = null;
       }
 
-      fit.fit();
+      // A terminal mounted on a hidden tab sits in a 0×0 box (`display:none`):
+      // fitting it there shrinks xterm to its 12×6 minimum, and that size would
+      // reach tmux with the attach. It stays unfitted until it is shown.
+      const hasBox = () =>
+        !!containerRef.current?.clientWidth && !!containerRef.current.clientHeight;
+      if (hasBox()) fit.fit();
       // Take the keyboard as soon as the pane is on screen: the terminal IS the
       // page here, and having to click it first meant the first thing typed went
       // nowhere. A click elsewhere still moves focus away, as in any editor.
@@ -482,6 +587,17 @@ export const TerminalView = memo(function TerminalView({
           term.input("\x1f", true);
           return false;
         }
+        // Alt+arrow moves by word, as it did before xterm 6 dropped its own
+        // mapping (xterm.js #5346): Ctrl+arrow's sequence, or readline's
+        // ESC b / ESC f for left/right on macOS — the same keys tmux,
+        // bash and claude's prompt have always been handed from this pane.
+        const altArrow =
+          ev.altKey && !ev.ctrlKey && !ev.metaKey && !ev.shiftKey ? altArrowSeq(ev.key) : null;
+        if (altArrow) {
+          ev.preventDefault();
+          term.input(altArrow, true);
+          return false;
+        }
         if (ev.key === "Tab" && tabMovesRef.current) return false;
         if (ev.key === "Tab" && ev.shiftKey) ev.preventDefault();
         return true;
@@ -524,7 +640,7 @@ export const TerminalView = memo(function TerminalView({
        */
       const sendSizeNow = (drive = false) => {
         if (!ws || ws.readyState !== WebSocket.OPEN) return;
-        if (term.cols < 2 || term.rows < 2) return;
+        if (!hasBox() || term.cols < 2 || term.rows < 2) return;
         ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows, drive }));
       };
       // This browser is the one in use now: back to its own size, and the
@@ -561,7 +677,10 @@ export const TerminalView = memo(function TerminalView({
         // scrollback as torn fragments along the left margin, visible as soon as
         // you scroll back (issue #33). Happens on every attach: page load,
         // lane switch, and each reconnect.
-        const size = term.cols > 1 && term.rows > 1 ? `?cols=${term.cols}&rows=${term.rows}` : "";
+        // A hidden terminal sends none: the server attaches it at the window's
+        // own size, so a pane on a background tab is never resized by it.
+        const size =
+          hasBox() && term.cols > 1 && term.rows > 1 ? `?cols=${term.cols}&rows=${term.rows}` : "";
         const sock = new WebSocket(`${wsBaseUrl}/ws-pty/${encodeURIComponent(runId)}${size}`);
         ws = sock;
         wsRef.current = sock;
@@ -656,6 +775,9 @@ export const TerminalView = memo(function TerminalView({
         if (!el || !el.clientWidth || !el.clientHeight) return;
         if (follow) return scaleToFit(); // the driver's grid, not ours
         fit.fit(); // a real change fires onResize, which reports it
+        // A tab shown for the first time may fit to the very size xterm already
+        // had (no onResize), yet tmux has never heard it: report it anyway.
+        sendSize();
       };
       const resizeObserver = new ResizeObserver(refit);
       if (containerRef.current) resizeObserver.observe(containerRef.current);
@@ -670,6 +792,44 @@ export const TerminalView = memo(function TerminalView({
         refit();
       };
       document.fonts?.addEventListener("loadingdone", onFontLoaded);
+      // @xterm/addon-webgl 0.19 shares ONE glyph atlas between every terminal
+      // with the same font. When it fills up it merges four pages into one
+      // larger page and shifts the rest down, and a GPU texture is re-uploaded
+      // only when its page's `version` differs from the uploaded one — after a
+      // shift those per-page counters can coincide, so a slot keeps a stale
+      // page of another size and every glyph is drawn squeezed or foreign
+      // while the buffer stays correct (fixed upstream only in 0.20 betas).
+      // Any change to the page list therefore restamps every page's version
+      // (`restampAtlas`) synchronously, before the next draw of ANY pane on
+      // that atlas. `clearTextureAtlas` is no fix: it empties the SHARED atlas
+      // but redraws only this pane, leaving its siblings slicing reused space.
+      // An addon of another shape falls back to toggling the family's
+      // trailing space on the next frame, which makes each renderer re-acquire
+      // its atlas (as onFontLoaded does).
+      let atlasFrame = 0;
+      const rebuildAtlas = () => {
+        if (gpu && restampAtlas(gpu)) return true;
+        if (atlasFrame) return false;
+        // Never inside the render that is rasterizing the merging glyph.
+        atlasFrame = requestAnimationFrame(() => {
+          atlasFrame = 0;
+          const family = term.options.fontFamily ?? "";
+          term.options.fontFamily = family.endsWith(" ") ? family.trimEnd() : `${family} `;
+        });
+        return false;
+      };
+      const atlasMerged = gpu?.onRemoveTextureAtlasCanvas(rebuildAtlas);
+      const atlasGrew = gpu?.onAddTextureAtlasCanvas(rebuildAtlas);
+      // The browser may also drop the textures without a context-loss event
+      // (sleep/resume, a long-backgrounded tab): re-upload when the page is
+      // back, and repaint, since nothing else asks this pane to draw.
+      const onPageShown = () => {
+        if (document.visibilityState === "visible" && rebuildAtlas()) {
+          term.refresh(0, term.rows - 1);
+        }
+      };
+      document.addEventListener("visibilitychange", onPageShown);
+      window.addEventListener("focus", onPageShown);
       // 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 = () => {
@@ -688,13 +848,18 @@ export const TerminalView = memo(function TerminalView({
         searchRef.current = null;
         resizeObserver.disconnect();
         document.fonts?.removeEventListener("loadingdone", onFontLoaded);
+        if (atlasFrame) cancelAnimationFrame(atlasFrame);
+        atlasMerged?.dispose();
+        atlasGrew?.dispose();
+        document.removeEventListener("visibilitychange", onPageShown);
+        window.removeEventListener("focus", onPageShown);
         window.removeEventListener(FONT_SIZE_EVENT, onFontPref);
         term.textarea?.removeEventListener("focus", reassert);
         detachIme();
         resizeDisposable.dispose();
         dataDisposable.dispose();
         ws?.close();
-        canvas?.dispose();
+        gpu?.dispose();
         term.dispose();
         termRef.current = null;
       };
@@ -939,7 +1104,7 @@ export const TerminalView = memo(function TerminalView({
         <div
           data-testid="terminal-drop"
           className={`pointer-events-none absolute inset-2 flex items-center justify-center rounded-lg border-2 border-dashed bg-black/50 text-sm font-medium ${
-            drop === "failed" || drop === "tooBig" || drop === "tooBigLocal"
+            drop === "failed" || drop === "tooBig" || drop === "tooBigLocalPaste"
               ? "border-red-400 text-red-300"
               : "border-sky-400 text-sky-200"
           }`}

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

@@ -217,6 +217,17 @@ describe("the artifact view", () => {
     cleanup();
   });
 
+  it("shows a page as a modal over the screen, closed by Esc", async () => {
+    const onClose = vi.fn();
+    render(<FilePreview path="/w/page.html" scope={scope} onClose={onClose} modal />);
+    const dialog = await screen.findByRole("dialog", { name: "page.html" });
+    expect(dialog.parentElement?.parentElement).toBe(document.body);
+    expect(await screen.findByTestId("artifact-frame")).toBeInTheDocument();
+    expect(screen.queryByTestId("artifact-expand")).toBeNull();
+    fireEvent.keyDown(screen.getByTestId("artifact-tab-code"), { key: "Escape" });
+    expect(onClose).toHaveBeenCalled();
+  });
+
   it("steps back to an older version the conversation wrote", async () => {
     html(["<p>two</p>"]);
     const tool = (id: string, input: Record<string, unknown>, name = "Write") => ({
@@ -242,7 +253,9 @@ describe("the artifact view", () => {
       ((await screen.findByTestId("artifact-frame")) as HTMLIFrameElement).getAttribute("srcdoc")
     ).toContain("two");
     fireEvent.click(versions.querySelector("button")!);
-    expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>");
+    await vi.waitFor(() =>
+      expect(screen.getByTestId("artifact-frame").getAttribute("srcdoc")).toContain("<p>one</p>")
+    );
     cleanup();
   });
 

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

@@ -60,6 +60,8 @@ vi.mock("../../../lib/api", async (importOriginal) => {
         files: r({ items: [] }),
         dropFile: r({ path: "/tmp/agenthub-drops-1/a.png" }),
         localPaths: r({ sizes: [1] }),
+        clipboardFiles: r({ files: [] }),
+        selectedFiles: r({ files: [] }),
       },
       ccConfig: {
         commands: r({
@@ -377,6 +379,35 @@ describe("PromptEditor — newlines and images", () => {
     expect(screen.getByTestId("sent").textContent).toBe("read @/home/u/demo.mp4");
   });
 
+  // Chrome on Windows pastes a file manager's copy as bytes only: the path
+  // comes off the OS clipboard, so a file over the upload limit attaches too.
+  it("attaches a pasted file manager copy by the path the OS clipboard holds", async () => {
+    vi.mocked(api.run.clipboardFiles).mockResolvedValueOnce({
+      files: [{ path: "C:\\Users\\u\\big.iso", size: 3_000_000_000, dir: false }],
+    });
+    vi.mocked(api.run.dropFile).mockClear();
+    const onImagesChange = vi.fn();
+    render(
+      <PromptEditor
+        value=""
+        onChange={() => {}}
+        onSubmit={() => {}}
+        placeholder="Ask anything…"
+        slash={false}
+        fileCwd="/home/u"
+        images={[]}
+        onImagesChange={onImagesChange}
+      />
+    );
+    const iso = new File(["x"], "big.iso");
+    Object.defineProperty(iso, "size", { value: 3_000_000_000 });
+    fireEvent.paste(box(), { clipboardData: { files: [iso], getData: () => "" } });
+    await vi.waitFor(() => expect(onImagesChange).toHaveBeenCalled());
+    const update = onImagesChange.mock.calls[0]![0] as (p: unknown[]) => { path: string }[];
+    expect(update([]).map((a) => a.path)).toEqual(["@C:/Users/u/big.iso"]);
+    expect(api.run.dropFile).not.toHaveBeenCalled();
+  });
+
   it("uploads a dropped file whose path the server does not have (an SSH tunnel's laptop)", async () => {
     vi.mocked(api.run.localPaths).mockResolvedValueOnce({ sizes: [null] });
     const onImagesChange = vi.fn();

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

@@ -6,13 +6,24 @@
  * included) as outgoing binary frames, and
  * re-attaches after the socket drops (server restart) with backoff, but not
  * after `exit` or a policy close,
- * and recolours live on a dark-theme change without re-attaching.
+ * recolours live on a dark-theme change without re-attaching, draws through
+ * the WebGL addon (DOM renderer again on a lost context) and keeps xterm 5's
+ * Alt+arrow word moves.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
-import { describe, it, expect, vi, beforeAll, beforeEach, afterEach } from "vitest";
-import { render, cleanup, act, fireEvent, screen, waitFor } from "@testing-library/react";
-import { TerminalView, loadXterm } from "../TerminalView";
+import { describe, it, expect, vi, beforeAll, beforeEach, afterEach, onTestFinished } from "vitest";
+import {
+  render,
+  cleanup,
+  act,
+  createEvent,
+  fireEvent,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { TerminalView, altArrowSeq, loadXterm } from "../TerminalView";
 import { pasteToLane, pasteToRun } from "../../../lib/panePaste";
+import { __resetNativePaste, nativePasteWorks } from "../../../lib/nativePaste";
 
 const writeMock = vi.fn();
 const onDataHandlers: Array<(d: string) => void> = [];
@@ -27,11 +38,18 @@ const inputMock = vi.fn();
 let textarea: HTMLTextAreaElement;
 const dropFileMock = vi.fn();
 const localPathsMock = vi.fn();
+const nativePasteMock = vi.fn(() => Promise.resolve({ native: true }));
+type Held = { files: { path: string; size: number | null; dir: boolean }[] };
+const clipboardFilesMock = vi.fn((): Promise<Held> => Promise.resolve({ files: [] }));
+const selectedFilesMock = vi.fn((): Promise<Held> => Promise.resolve({ files: [] }));
 vi.mock("../../../lib/api", () => ({
   api: {
     run: {
       dropFile: (f: File, lane?: string) => dropFileMock(f, lane),
       localPaths: (paths: string[]) => localPathsMock(paths),
+      nativePaste: () => nativePasteMock(),
+      clipboardFiles: () => clipboardFilesMock(),
+      selectedFiles: () => selectedFilesMock(),
     },
   },
 }));
@@ -45,6 +63,9 @@ const termState = {
 };
 const onResizeHandlers: Array<() => void> = [];
 const termOptions: { theme?: unknown } = {};
+const refreshMock = vi.fn();
+/** The atlas the next WebGL addon draws from; null = an addon of another shape. */
+const nextAtlas: { pages: { version: number }[] | null } = { pages: null };
 const ctorArgs: Array<{ theme?: unknown }> = [];
 
 vi.mock("@xterm/xterm", () => ({
@@ -74,6 +95,7 @@ vi.mock("@xterm/xterm", () => ({
       return { dispose: vi.fn() };
     },
     dispose: disposeMock,
+    refresh: refreshMock,
     loadAddon: loadAddonMock,
     attachCustomWheelEventHandler: wheelHandlerMock,
     attachCustomKeyEventHandler: keyHandlerMock,
@@ -93,8 +115,47 @@ vi.mock("../../../lib/terminalTheme", () => ({
 vi.mock("@xterm/addon-fit", () => ({
   FitAddon: vi.fn().mockImplementation(() => ({ fit: vi.fn() })),
 }));
-vi.mock("@xterm/addon-canvas", () => ({
-  CanvasAddon: vi.fn().mockImplementation(() => ({ __canvas: true, dispose: vi.fn() })),
+// The newest WebGL addon, with the context-loss listener the view gave it.
+const gpu: {
+  last: {
+    dispose: ReturnType<typeof vi.fn>;
+    lose: () => void;
+    merge: () => void;
+    grow: () => void;
+  } | null;
+} = {
+  last: null,
+};
+vi.mock("@xterm/addon-webgl", () => ({
+  WebglAddon: vi.fn().mockImplementation(() => {
+    let onLoss = () => {};
+    let onMerge = () => {};
+    let onGrow = () => {};
+    const addon = {
+      __webgl: true,
+      ...(nextAtlas.pages ? { _renderer: { _charAtlas: { pages: nextAtlas.pages } } } : {}),
+      dispose: vi.fn(),
+      onContextLoss: (fn: () => void) => {
+        onLoss = fn;
+        return { dispose: vi.fn() };
+      },
+      onRemoveTextureAtlasCanvas: (fn: () => void) => {
+        onMerge = fn;
+        return { dispose: vi.fn() };
+      },
+      onAddTextureAtlasCanvas: (fn: () => void) => {
+        onGrow = fn;
+        return { dispose: vi.fn() };
+      },
+    };
+    gpu.last = {
+      dispose: addon.dispose,
+      lose: () => onLoss(),
+      merge: () => onMerge(),
+      grow: () => onGrow(),
+    };
+    return addon;
+  }),
 }));
 
 class MockWebSocket {
@@ -120,6 +181,17 @@ class MockWebSocket {
 // @ts-expect-error test override
 global.WebSocket = MockWebSocket;
 
+/** Give every element a real box (jsdom's are 0×0, like a terminal on a hidden
+ *  tab); returns the restore. */
+function withBox(width = 800, height = 600) {
+  const w = vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(width);
+  const h = vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(height);
+  return () => {
+    w.mockRestore();
+    h.mockRestore();
+  };
+}
+
 describe("TerminalView", () => {
   // xterm is a lazy chunk; once loaded every terminal sets up synchronously.
   beforeAll(() => loadXterm());
@@ -151,11 +223,51 @@ describe("TerminalView", () => {
     // it: tmux resizes the window to the newest client, so attaching at the
     // server's default 80x24 makes claude redraw its UI at 80 columns and
     // leaves that width in the scrollback (issue #33).
-    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
-    expect(MockWebSocket.instances).toHaveLength(1);
-    expect(MockWebSocket.instances[0]!.url).toBe(
-      "ws://localhost:4820/ws-pty/agenthub-lane-1?cols=131&rows=28"
-    );
+    const restore = withBox();
+    try {
+      render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+      expect(MockWebSocket.instances).toHaveLength(1);
+      expect(MockWebSocket.instances[0]!.url).toBe(
+        "ws://localhost:4820/ws-pty/agenthub-lane-1?cols=131&rows=28"
+      );
+    } finally {
+      restore();
+    }
+  });
+
+  it("a terminal on a hidden tab sends no size until it is shown", () => {
+    // Its box is 0×0 (display:none): fitting there shrank xterm to 12×6 and
+    // that size resized the real tmux pane under every other client.
+    let observed: (() => void) | null = null;
+    const RO = globalThis.ResizeObserver;
+    // @ts-expect-error test override
+    globalThis.ResizeObserver = class {
+      constructor(cb: () => void) {
+        observed = cb;
+      }
+      observe() {}
+      disconnect() {}
+    };
+    vi.useFakeTimers();
+    let restore = () => {};
+    try {
+      render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+      const ws = MockWebSocket.instances[0]!;
+      expect(ws.url).toBe("ws://localhost:4820/ws-pty/agenthub-lane-1");
+      ws.onopen?.();
+      expect(ws.sent).toEqual([]);
+      // The tab is shown: the box gets a size and its size reaches tmux.
+      restore = withBox();
+      observed!();
+      vi.advanceTimersByTime(200);
+      expect(ws.sent).toEqual([
+        JSON.stringify({ type: "resize", cols: 131, rows: 28, drive: false }),
+      ]);
+    } finally {
+      restore();
+      vi.useRealTimers();
+      globalThis.ResizeObserver = RO;
+    }
   });
 
   it("omits the size when the terminal has none yet (a collapsed console is 0x0)", () => {
@@ -381,34 +493,119 @@ describe("TerminalView", () => {
     expect(onExit).toHaveBeenCalledTimes(1);
   });
 
-  it("renders through the canvas addon, not xterm's DOM renderer", () => {
+  it("renders through the WebGL addon, not xterm's DOM renderer", () => {
     // The DOM renderer aligns a row with one `letter-spacing`, which holds only
     // while every glyph shares a font. Vietnamese diacritics and CJK fall to a
     // fallback face with a different advance, so glyphs shove their neighbours
     // and the row's tail spills onto the row below — buffer clean, painting
-    // wrong. The canvas renderer draws each cell at a fixed position instead.
+    // wrong. The WebGL renderer draws each cell at a fixed position instead
+    // (xterm 6 removed the canvas one).
     render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
-    expect(loadAddonMock.mock.calls.some(([a]) => (a as { __canvas?: boolean }).__canvas)).toBe(
+    expect(loadAddonMock.mock.calls.some(([a]) => (a as { __webgl?: boolean }).__webgl)).toBe(
       true
     );
   });
 
+  it("falls back to the DOM renderer when the browser takes the WebGL context back", () => {
+    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+    const addon = gpu.last!;
+    expect(addon.dispose).not.toHaveBeenCalled();
+    addon.lose();
+    expect(addon.dispose).toHaveBeenCalledTimes(1);
+    expect(disposeMock).not.toHaveBeenCalled(); // the terminal itself lives on
+  });
+
+  it("restamps every atlas page at once when the page list changes", () => {
+    // addon-webgl 0.19 counts versions per page, so after a merge shifts the
+    // pages a texture slot can keep a stale page whose counter matches. Every
+    // page gets a version no slot has uploaded — in every pane on the atlas.
+    const pages = [{ version: 3 }, { version: 7 }, { version: 1 }];
+    nextAtlas.pages = pages;
+    const raf = vi.spyOn(window, "requestAnimationFrame");
+    try {
+      render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+      gpu.last!.merge();
+      const first = pages.map((p) => p.version);
+      expect(new Set(first).size).toBe(3);
+      expect(first.every((v) => v > 7)).toBe(true);
+      gpu.last!.grow();
+      expect(pages.every((p, i) => p.version > Math.max(...first) && p.version !== first[i])).toBe(
+        true
+      );
+      expect(raf).not.toHaveBeenCalled(); // synchronous, before any pane draws
+      // The page coming back re-uploads and repaints this pane.
+      refreshMock.mockClear();
+      window.dispatchEvent(new Event("focus"));
+      expect(refreshMock).toHaveBeenCalledWith(0, 27);
+    } finally {
+      nextAtlas.pages = null;
+      raf.mockRestore();
+    }
+  });
+
+  it("re-acquires the glyph atlas on the next frame after a page merge", () => {
+    // An addon whose atlas this cannot reach: any option change makes each
+    // renderer re-acquire its atlas and re-upload every page.
+    const raf = vi.spyOn(window, "requestAnimationFrame").mockImplementation(() => 1);
+    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+    const opts = termOptions as { fontFamily?: string };
+    opts.fontFamily = "JetBrains Mono";
+    gpu.last!.merge();
+    gpu.last!.merge(); // coalesced into one frame
+    expect(raf).toHaveBeenCalledTimes(1);
+    expect(opts.fontFamily).toBe("JetBrains Mono"); // never inside the render that merged
+    (raf.mock.calls[0]![0] as FrameRequestCallback)(0);
+    expect(opts.fontFamily).toBe("JetBrains Mono ");
+    raf.mockRestore();
+  });
+
+  // xterm 6 dropped its own Alt+arrow → word-move mapping; the pane keeps it.
+  it("sends Alt+arrow as the word-move keys xterm 5 sent", () => {
+    expect(altArrowSeq("ArrowLeft", false)).toBe("\x1b[1;5D");
+    expect(altArrowSeq("ArrowRight", false)).toBe("\x1b[1;5C");
+    expect(altArrowSeq("ArrowUp", false)).toBe("\x1b[1;5A");
+    expect(altArrowSeq("ArrowDown", false)).toBe("\x1b[1;5B");
+    expect(altArrowSeq("ArrowLeft", true)).toBe("\x1bb");
+    expect(altArrowSeq("ArrowRight", true)).toBe("\x1bf");
+    expect(altArrowSeq("ArrowUp", true)).toBeNull();
+    expect(altArrowSeq("a", false)).toBeNull();
+
+    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: "ArrowLeft", altKey: true, cancelable: true });
+    expect(handler(ev)).toBe(false);
+    expect(ev.defaultPrevented).toBe(true);
+    expect(inputMock).toHaveBeenCalledWith(altArrowSeq("ArrowLeft"), true);
+    // Another modifier with it is xterm's own sequence.
+    expect(
+      handler(new KeyboardEvent("keydown", { key: "ArrowLeft", altKey: true, shiftKey: true }))
+    ).toBe(true);
+  });
+
   describe("size reporting (tmux must never be wider than the terminal)", () => {
     // A tmux pane wider than xterm wraps each over-long row's tail onto the
     // next row's left margin, and tmux never repaints a row it believes
     // unchanged — the stray characters glued to the left edge after scrolling.
     it("reports its size when the socket opens", () => {
-      render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
-      const ws = MockWebSocket.instances[0]!;
-      ws.onopen?.();
-      expect(ws.sent).toContain(
-        JSON.stringify({ type: "resize", cols: 131, rows: 28, drive: false })
-      );
+      const restore = withBox();
+      try {
+        render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+        const ws = MockWebSocket.instances[0]!;
+        ws.onopen?.();
+        expect(ws.sent).toContain(
+          JSON.stringify({ type: "resize", cols: 131, rows: 28, drive: false })
+        );
+      } finally {
+        restore();
+      }
     });
 
     it("reports a size change xterm made on its own, with no container resize", async () => {
       // Webfont load and page zoom both move cols without resizing the element
       // ResizeObserver watches, which is why onResize is the hook.
+      const restore = withBox();
+      onTestFinished(restore);
       render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
       const ws = MockWebSocket.instances[0]!;
       ws.onopen?.();
@@ -590,6 +787,168 @@ describe("TerminalView", () => {
     expect(dropFileMock).toHaveBeenCalledWith(img, "r1");
   });
 
+  it("hands a local claude pane's pasted image to claude as ^V, uploading nothing", async () => {
+    __resetNativePaste();
+    dropFileMock.mockReset();
+    inputMock.mockClear();
+    pasteMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    await waitFor(() => expect(nativePasteWorks()).toBe(true));
+    const img = new File([new Uint8Array([137, 80])], "image.png", { type: "image/png" });
+    fireEvent.paste(screen.getByTestId("terminal-view"), {
+      clipboardData: { files: [img], getData: () => "" },
+    });
+    expect(inputMock).toHaveBeenCalledWith("\x16", true);
+    expect(dropFileMock).not.toHaveBeenCalled();
+    expect(pasteMock).not.toHaveBeenCalled();
+  });
+
+  // Claude Code on Windows binds its image paste to Alt+V; a ^V did nothing.
+  it("sends Alt+V instead of ^V when the dashboard runs on Windows", async () => {
+    __resetNativePaste();
+    nativePasteMock.mockResolvedValueOnce({ native: true, key: "alt+v" } as never);
+    dropFileMock.mockReset();
+    inputMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    await waitFor(() => expect(nativePasteWorks()).toBe(true));
+    const img = new File([new Uint8Array([137, 80])], "image.png", { type: "image/png" });
+    fireEvent.paste(screen.getByTestId("terminal-view"), {
+      clipboardData: { files: [img], getData: () => "" },
+    });
+    expect(inputMock).toHaveBeenCalledWith("\x1bv", true);
+    expect(inputMock).not.toHaveBeenCalledWith("\x16", true);
+    expect(dropFileMock).not.toHaveBeenCalled();
+  });
+
+  // No wl-paste/xclip (or no display) on the dashboard's machine: ^V would
+  // paste nothing, so the screenshot is uploaded like a remote browser's.
+  it("uploads a claude pane's pasted image when the machine cannot read its clipboard", async () => {
+    __resetNativePaste();
+    nativePasteMock.mockResolvedValueOnce({ native: false });
+    dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-image.png" });
+    inputMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    await waitFor(() => expect(nativePasteMock).toHaveBeenCalled());
+    await Promise.resolve();
+    const img = new File([new Uint8Array([137, 80])], "image.png", { type: "image/png" });
+    fireEvent.paste(screen.getByTestId("terminal-view"), {
+      clipboardData: { files: [img], getData: () => "" },
+    });
+    await waitFor(() => expect(dropFileMock).toHaveBeenCalledWith(img, "r1"));
+    expect(inputMock).not.toHaveBeenCalledWith("\x16", true);
+  });
+
+  it("uploads a claude pane's pasted image once native paste is turned off", async () => {
+    localStorage.setItem("agenthub.terminal.nativePaste", "off");
+    dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-image.png" });
+    inputMock.mockClear();
+    try {
+      render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+      const img = new File([new Uint8Array([137, 80])], "image.png", { type: "image/png" });
+      fireEvent.paste(screen.getByTestId("terminal-view"), {
+        clipboardData: { files: [img], getData: () => "" },
+      });
+      await waitFor(() => expect(dropFileMock).toHaveBeenCalledWith(img, "r1"));
+      expect(inputMock).not.toHaveBeenCalledWith("\x16", true);
+    } finally {
+      localStorage.removeItem("agenthub.terminal.nativePaste");
+    }
+  });
+
+  // A file manager's Copy reaches Chrome on Windows as bytes and a name only:
+  // the pane gets the file's own path off the OS clipboard — no upload, so
+  // no size limit (a 3 GB video too), as a native terminal pastes it.
+  it("pastes a copied file by the path the OS clipboard holds, uploading nothing", async () => {
+    __resetNativePaste();
+    dropFileMock.mockReset();
+    pasteMock.mockClear();
+    inputMock.mockClear();
+    clipboardFilesMock.mockResolvedValueOnce({
+      files: [{ path: "C:\\Users\\u\\Videos\\demo.mp4", size: 3_000_000_000, dir: false }],
+    });
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    await waitFor(() => expect(nativePasteWorks()).toBe(true));
+    const video = new File([new Uint8Array([1])], "demo.mp4", { type: "video/mp4" });
+    Object.defineProperty(video, "size", { value: 3_000_000_000 });
+    fireEvent.paste(screen.getByTestId("terminal-view"), {
+      clipboardData: { files: [video], getData: () => "" },
+    });
+    await waitFor(() => expect(pasteMock).toHaveBeenCalledWith("@C:/Users/u/Videos/demo.mp4 "));
+    expect(dropFileMock).not.toHaveBeenCalled();
+    expect(inputMock).not.toHaveBeenCalledWith("\x16", true);
+  });
+
+  // Chrome hands a file dragged from Explorer no path; the drag carries the
+  // items selected there, so the pane gets their own paths — as a native
+  // terminal types them — and nothing is uploaded, whatever the size.
+  it("drops a file manager's file by the path selected there, uploading nothing", async () => {
+    dropFileMock.mockReset();
+    pasteMock.mockClear();
+    selectedFilesMock.mockResolvedValueOnce({
+      files: [{ path: "C:\\Users\\u\\Videos\\big.mkv", size: 5_000_000_000, dir: false }],
+    });
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    const video = new File([new Uint8Array([1])], "big.mkv");
+    Object.defineProperty(video, "size", { value: 5_000_000_000 });
+    fireEvent.drop(screen.getByTestId("terminal-view"), {
+      dataTransfer: { files: [video], types: ["Files"], getData: () => "" },
+    });
+    await waitFor(() => expect(pasteMock).toHaveBeenCalledWith("@C:/Users/u/Videos/big.mkv "));
+    expect(dropFileMock).not.toHaveBeenCalled();
+  });
+
+  it("uploads a dropped file the file manager does not hold selected", async () => {
+    dropFileMock.mockReset().mockResolvedValue({ path: "/tmp/agenthub-drops-1/ab-notes.txt" });
+    selectedFilesMock.mockResolvedValueOnce({
+      files: [{ path: "/home/u/other.txt", size: 1, dir: false }],
+    });
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="codex" />);
+    const notes = new File(["x"], "notes.txt");
+    fireEvent.drop(screen.getByTestId("terminal-view"), {
+      dataTransfer: { files: [notes], types: ["Files"], getData: () => "" },
+    });
+    await waitFor(() => expect(dropFileMock).toHaveBeenCalledWith(notes, "r1"));
+  });
+
+  // A copied image FILE is not a screenshot: claude's own paste finds no
+  // picture on a clipboard holding a file, so it goes by path too.
+  it("pastes a copied image file by path instead of claude's image paste", async () => {
+    __resetNativePaste();
+    dropFileMock.mockReset();
+    pasteMock.mockClear();
+    inputMock.mockClear();
+    clipboardFilesMock.mockResolvedValueOnce({
+      files: [{ path: "/home/u/Pictures/logo.png", size: 2, dir: false }],
+    });
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    await waitFor(() => expect(nativePasteWorks()).toBe(true));
+    const logo = new File([new Uint8Array([137, 80])], "logo.png", { type: "image/png" });
+    fireEvent.paste(screen.getByTestId("terminal-view"), {
+      clipboardData: { files: [logo], getData: () => "" },
+    });
+    await waitFor(() => expect(pasteMock).toHaveBeenCalledWith("/home/u/Pictures/logo.png "));
+    expect(inputMock).not.toHaveBeenCalledWith("\x16", true);
+    expect(dropFileMock).not.toHaveBeenCalled();
+  });
+
+  // Cells from a spreadsheet come with a picture of them; a terminal pastes
+  // the text, so the browser's paste is left to xterm.
+  it("leaves text that comes with a picture of it to xterm's paste", async () => {
+    __resetNativePaste();
+    dropFileMock.mockReset();
+    inputMock.mockClear();
+    render(<TerminalView runId="r1" wsBaseUrl="ws://x" tool="claude" />);
+    await waitFor(() => expect(nativePasteWorks()).toBe(true));
+    const pic = new File([new Uint8Array([137, 80])], "image.png", { type: "image/png" });
+    const ev = createEvent.paste(screen.getByTestId("terminal-view"), {
+      clipboardData: { files: [pic], getData: (t: string) => (t === "text/plain" ? "a\tb" : "") },
+    });
+    fireEvent(screen.getByTestId("terminal-view"), ev);
+    expect(ev.defaultPrevented).toBe(false);
+    expect(inputMock).not.toHaveBeenCalled();
+    expect(dropFileMock).not.toHaveBeenCalled();
+  });
+
   // Ctrl+V is how claude pastes an image; xterm would send ^V, and claude then
   // reads the SERVER's clipboard, not the browser's. Text on the clipboard is
   // pasted like any browser paste: sending ^V for it pasted nothing.

client/src/components/settings/AiToolsSettings.tsx

@@ -5,7 +5,8 @@
  * Default badge or Set default, and Update whenever the catalog names an
  * updater — no version lookup, the updater itself knows whether it has work.
  * The ones available to install fold behind a disclosure, with Install where
- * the catalog knows how. Install/Update/Update all confirm the exact command
+ * the catalog knows how (an admin's; Update all is anyone's — auth.js
+ * MEMBER_WRITE_EXCEPTIONS). Install/Update/Update all confirm the exact command
  * first, run as ONE server job at a time and show its log under the row
  * (polled from GET /api/ai-tools/job; a finished job folds to one line).
  * A right-click on an installed row opens its Update / Set default /
@@ -231,7 +232,8 @@ export function AiToolsSettings({
             {t("aiTools.installed", { count: installed.length })}
           </p>
           <div className="flex items-center gap-2">
-            {isAdmin && updateAllTools.length > 0 && (
+            {/* Every signed-in user may run Update all (auth.js MEMBER_WRITE_EXCEPTIONS). */}
+            {updateAllTools.length > 0 && (
               <button
                 type="button"
                 onClick={() => setConfirm({ kind: "update-all" })}

client/src/components/settings/AppearanceSettings.tsx

@@ -4,7 +4,9 @@
  * 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`) —
+ * `#terminal-font`, with a preview line), and — local mode only — whether a
+ * pasted image reaches a `claude` pane natively (`lib/nativePaste.ts`,
+ * `#native-paste`, this browser only); **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`), and whether a Markdown file opens as Preview (the
@@ -39,6 +41,8 @@ import {
 } from "../../lib/terminalFont";
 import { readAllTabs, writeAllTabs } from "../../lib/workspaceTabs";
 import { readMarkdownPreview, writeMarkdownPreview } from "../../lib/markdownView";
+import { readNativePaste, writeNativePaste } from "../../lib/nativePaste";
+import { usePermissions } from "../AuthGate";
 import {
   TERMINAL_FONT_SIZES,
   UI_FONT_SIZES,
@@ -100,6 +104,8 @@ export function AppearanceSettings() {
   const [uiSize, setUiSize] = useState(readUiFontSize);
   const [allTabs, setAllTabs] = useState(readAllTabs);
   const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
+  const [nativePaste, setNativePaste] = useState(readNativePaste);
+  const { local } = usePermissions();
   const pickTermFont = (font: TerminalFont) => {
     writeTerminalFont(font);
     setTermFont(font);
@@ -209,6 +215,18 @@ export function AppearanceSettings() {
         >
           ❯ Tiếng Việt: ấ ế ố ồ ủ ữ — const x = {"{ ok: true }"}; 0O il1|
         </p>
+        {local && (
+          <SettingsSwitchRow
+            id="native-paste"
+            label={t("nativePaste.label")}
+            description={t("nativePaste.description")}
+            checked={nativePaste}
+            onChange={(on) => {
+              writeNativePaste(on);
+              setNativePaste(on);
+            }}
+          />
+        )}
       </SettingsSection>
 
       <SettingsSection

client/src/components/settings/ChangesPanelSettings.tsx

@@ -0,0 +1,26 @@
+/**
+ * @file ChangesPanelSettings — Settings → Git → Changes panel: whether a
+ * workspace folder that holds several git repositories shows each of them as
+ * its own section in the Changes panel (off by default: only the folder's own
+ * git). Writes the account preference in `lib/innerReposPref.ts`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useTranslation } from "react-i18next";
+import { useInnerReposMode, writeInnerReposMode } from "../../lib/innerReposPref";
+import { SettingsSection, SettingsSwitchRow } from "./SettingsRow";
+
+export function ChangesPanelSettings() {
+  const { t } = useTranslation("settings");
+  const mode = useInnerReposMode();
+  return (
+    <SettingsSection title={t("changesPanel.title")} description={t("changesPanel.description")}>
+      <SettingsSwitchRow
+        label={t("changesPanel.innerRepos")}
+        description={t("changesPanel.innerReposDesc")}
+        checked={mode === "all"}
+        onChange={(on) => writeInnerReposMode(on ? "all" : "own")}
+      />
+    </SettingsSection>
+  );
+}

client/src/components/settings/GitIdentitySettings.tsx

@@ -79,14 +79,6 @@ function Step({ n, children }: { n: number; children: ReactNode }) {
   );
 }
 
-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];
 type SshUser = NonNullable<GitIdentity["sshUsers"]>[number];
 
@@ -642,10 +634,6 @@ export function GitIdentitySettings() {
                 onRemove={() => removeKey("ed25519")}
               >
                 <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>
               {namedOf("ed25519").map((k) => {
                 const rows = rowsOf(otherRows, k);
@@ -668,11 +656,6 @@ export function GitIdentitySettings() {
                       {id.writable && rows.length === 0 && (
                         <GitHostForm busy={busy} onSave={(host) => saveGitHost(host, k)} />
                       )}
-                      {rows.map((r) => (
-                        <Code key={r.alias ?? r.host}>
-                          git clone ssh://{r.alias ?? r.host}/&lt;org&gt;/&lt;repo&gt;.git
-                        </Code>
-                      ))}
                     </Step>
                   </KeyCard>
                 );
@@ -720,16 +703,6 @@ export function GitIdentitySettings() {
                         </>
                       )}
                     </Step>
-                    {rows.length > 0 && (
-                      <div className="rounded border border-status-success/40 bg-status-success/10 p-2 text-[11px] text-fg-primary">
-                        {t("gitIdentity.awsReady")}
-                        {rows.map((r) => (
-                          <Code key={r.alias ?? r.host}>
-                            git clone ssh://{r.alias ?? r.host}/v1/repos/&lt;repo&gt;
-                          </Code>
-                        ))}
-                      </div>
-                    )}
                   </KeyCard>
                 );
               })}

client/src/components/settings/NineRouterUpdate.tsx

@@ -0,0 +1,242 @@
+/**
+ * @file NineRouterUpdate.tsx
+ * @description **Update 9router** on the AI Proxy page (every user's; beside
+ * Config 9router): a button — dotted when npm has a newer 9router — and a
+ * dialog that runs the server's three-step job (`server/lib/nine-router-update.js`):
+ * disconnect and shut 9router down, `npm install -g 9router@latest`, start it
+ * again hidden (tray, no browser) — the last only when it was running before.
+ * The dialog shows why an update cannot run right now (the server's `blocker`,
+ * with the command to run by hand when sudo needs a password) and follows the
+ * job by polling until it ends. Closing the dialog does not stop the job.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowUpCircle, Check, Circle, Copy, Loader2, MinusCircle, X } from "lucide-react";
+import { api, type NineRouterUpdateStatus, type NineRouterUpdateStep } from "../../lib/api";
+import { copyText } from "../../lib/clipboard";
+import { useDialog } from "../../hooks/useDialog";
+
+const POLL_MS = 1000;
+
+function StepIcon({ status }: { status: NineRouterUpdateStep["status"] }) {
+  if (status === "running") return <Loader2 className="h-3.5 w-3.5 animate-spin text-accent" />;
+  if (status === "done") return <Check className="h-3.5 w-3.5 text-status-success" />;
+  if (status === "failed") return <X className="h-3.5 w-3.5 text-status-danger" />;
+  if (status === "skipped") return <MinusCircle className="h-3.5 w-3.5 text-fg-muted" />;
+  return <Circle className="h-3.5 w-3.5 text-fg-muted" />;
+}
+
+export function NineRouterUpdate() {
+  const { t } = useTranslation("settings");
+  const [status, setStatus] = useState<NineRouterUpdateStatus | null>(null);
+  const [open, setOpen] = useState(false);
+  const [starting, setStarting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  useDialog(open, dialogRef, () => setOpen(false));
+
+  const load = useCallback(async (fresh = false) => {
+    try {
+      setStatus(await api.aiProxies.nineRouterUpdateStatus(fresh));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const running = status?.job?.status === "running";
+  // Follow a running job — also one started from another tab.
+  useEffect(() => {
+    if (!running) return;
+    const timer = window.setInterval(() => void load(), POLL_MS);
+    return () => window.clearInterval(timer);
+  }, [running, load]);
+
+  const openDialog = () => {
+    setError(null);
+    setOpen(true);
+    void load(true);
+  };
+
+  const start = async () => {
+    setStarting(true);
+    setError(null);
+    try {
+      const job = await api.aiProxies.nineRouterUpdate();
+      setStatus((s) => (s ? { ...s, job } : s));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      void load(true);
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  if (!status?.installed) return null;
+  const job = status.job;
+  const blocker = status.blocker;
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={openDialog}
+        className="relative inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary transition-colors hover:border-accent/30 hover:bg-accent/10 hover:text-accent"
+      >
+        {running ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <ArrowUpCircle className="h-3.5 w-3.5" />
+        )}
+        {t("aiProxy.update9router")}
+        {status.updateAvailable && !running && (
+          <span
+            className="absolute -right-1 -top-1 h-2 w-2 rounded-full bg-accent-solid"
+            aria-label={t("aiProxy.update9routerAvailable")}
+          />
+        )}
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-surface-0/70 p-4"
+          role="presentation"
+        >
+          <div
+            ref={dialogRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="nine-router-update-title"
+            className="max-h-[90vh] w-full max-w-md overflow-y-auto rounded-xl border border-border bg-surface-1 p-5 shadow-xl"
+          >
+            <h3
+              id="nine-router-update-title"
+              className="mb-3 text-sm font-semibold text-fg-primary"
+            >
+              {t("aiProxy.update9router")}
+            </h3>
+
+            <dl className="mb-3 grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+              <dt className="text-fg-muted">{t("aiProxy.update9routerCurrent")}</dt>
+              <dd className="font-mono text-fg-primary">{status.version ?? "—"}</dd>
+              <dt className="text-fg-muted">{t("aiProxy.update9routerLatest")}</dt>
+              <dd className="font-mono text-fg-primary">{status.latest ?? "—"}</dd>
+              <dt className="text-fg-muted">{t("aiProxy.update9routerState")}</dt>
+              <dd className="text-fg-primary">
+                {status.running
+                  ? status.managedBy === "systemd"
+                    ? t("aiProxy.update9routerRunningUnit")
+                    : t("aiProxy.update9routerRunning")
+                  : t("aiProxy.update9routerStopped")}
+              </dd>
+            </dl>
+
+            <p className="mb-3 text-[11px] text-fg-muted">
+              {status.running
+                ? t("aiProxy.update9routerExplain")
+                : t("aiProxy.update9routerExplainStopped")}
+            </p>
+
+            {job && (
+              <ol className="mb-3 space-y-1.5 rounded-md border border-border bg-surface-0 p-3">
+                {job.steps.map((s) => (
+                  <li key={s.id} className="flex items-start gap-2 text-xs">
+                    <span className="mt-0.5">
+                      <StepIcon status={s.status} />
+                    </span>
+                    <span className="min-w-0">
+                      <span className="text-fg-primary">
+                        {t(`aiProxy.update9routerStep.${s.id}`)}
+                      </span>
+                      {s.message && (
+                        <span className="block break-words text-[11px] text-fg-muted">
+                          {s.message}
+                        </span>
+                      )}
+                    </span>
+                  </li>
+                ))}
+              </ol>
+            )}
+            {job && job.status !== "running" && (
+              <p
+                className={`mb-3 text-xs ${
+                  job.status === "done" ? "text-status-success" : "text-status-danger"
+                }`}
+              >
+                {job.status !== "done"
+                  ? t("aiProxy.update9routerFailed")
+                  : job.steps.find((s) => s.id === "relaunch")?.status === "skipped"
+                    ? t("aiProxy.update9routerDoneStopped", { version: job.to ?? "—" })
+                    : t("aiProxy.update9routerDone", { version: job.to ?? "—" })}
+              </p>
+            )}
+            {job?.log && (
+              <details className="mb-3">
+                <summary className="cursor-pointer text-[11px] text-fg-muted">
+                  {t("aiProxy.update9routerLog")}
+                </summary>
+                <pre className="mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-surface-0 p-2 font-mono text-[10px] text-fg-secondary">
+                  {job.log}
+                </pre>
+              </details>
+            )}
+
+            {blocker && !running && blocker.code !== "EUPTODATE" && (
+              <div className="mb-3 rounded-md border border-status-warning/40 bg-status-warning/10 px-3 py-2 text-xs text-fg-secondary">
+                <p>{blocker.message}</p>
+                {blocker.command && (
+                  <div className="mt-2 flex items-center gap-2">
+                    <code className="min-w-0 flex-1 truncate rounded bg-surface-0 px-2 py-1 font-mono text-[11px]">
+                      {blocker.command}
+                    </code>
+                    <button
+                      type="button"
+                      onClick={() => void copyText(blocker.command!)}
+                      className="shrink-0 rounded p-1 text-fg-muted hover:text-accent"
+                      aria-label={t("aiProxy.update9routerCopy")}
+                      title={t("aiProxy.update9routerCopy")}
+                    >
+                      <Copy className="h-3.5 w-3.5" />
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+            {blocker?.code === "EUPTODATE" && !running && (
+              <p className="mb-3 text-xs text-fg-muted">{t("aiProxy.update9routerUpToDate")}</p>
+            )}
+            {error && (
+              <p className="mb-3 rounded-md border border-status-danger/40 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
+                {error}
+              </p>
+            )}
+
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="rounded-lg border border-border px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2"
+              >
+                {t("aiProxy.update9routerClose")}
+              </button>
+              <button
+                type="button"
+                onClick={() => void start()}
+                disabled={Boolean(blocker) || running || starting}
+                className="btn-primary inline-flex items-center gap-1.5 px-3 py-1.5 text-xs disabled:opacity-50"
+              >
+                {(running || starting) && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                {t("aiProxy.update9routerStart")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

client/src/components/settings/PoolAccountSettings.tsx

@@ -0,0 +1,120 @@
+/**
+ * @file PoolAccountSettings — Settings → AI tools → Pool account: in server
+ * mode, every user picks which account of the shared account pool their own
+ * new sessions run on, per tool, among the accounts their pool group may use
+ * (`GET/PUT /api/me/pool-accounts`, server/lib/account-pins.js `setChoice`).
+ * "Automatic" leaves it to the balancer; an admin's pin locks the choice. A
+ * Claude login goes into the user's home at once, so running panes follow it;
+ * Codex and Cursor take it at the next session. Renders nothing in local mode
+ * or when the pool holds no account the user may use.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Lock } from "lucide-react";
+import { api, type MyPoolTool, type PoolTool } from "../../lib/api";
+import { toast } from "../../lib/toast";
+import { usePermissions } from "../AuthGate";
+import { AiToolIcon } from "../AiToolIcon";
+import { SettingsRow, SettingsSection } from "./SettingsRow";
+
+const LABEL: Record<PoolTool, string> = { claude: "Claude Code", codex: "Codex", cursor: "Cursor" };
+
+export function PoolAccountSettings() {
+  const { t } = useTranslation("settings");
+  const { local } = usePermissions();
+  const [tools, setTools] = useState<MyPoolTool[] | null>(null);
+  const [busy, setBusy] = useState<PoolTool | null>(null);
+
+  useEffect(() => {
+    if (local) return;
+    api.me
+      .poolAccounts()
+      .then((r) => setTools(r.tools))
+      .catch(() => setTools(null));
+  }, [local]);
+
+  if (local || !tools?.length) return null;
+
+  const choose = async (tool: PoolTool, account: string | null) => {
+    setBusy(tool);
+    try {
+      const r = await api.me.choosePoolAccount(tool, account);
+      setTools((list) =>
+        (list ?? []).map((x) => (x.tool === tool ? { ...x, choice: r.choice } : x))
+      );
+      toast.success(
+        !r.choice
+          ? t("poolAccount.automaticSaved")
+          : r.switched === "switched" || r.switched === "kept"
+            ? t("poolAccount.switchedNow", { account: r.choice })
+            : t("poolAccount.nextSession", { account: r.choice })
+      );
+    } catch (err) {
+      toast.error(err);
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <SettingsSection
+      id="pool-account"
+      title={t("poolAccount.title")}
+      description={t("poolAccount.description")}
+    >
+      {tools.map((x) => (
+        <SettingsRow
+          key={x.tool}
+          id={`pool-account-${x.tool}`}
+          label={
+            <span className="inline-flex items-center gap-1.5">
+              <AiToolIcon tool={{ id: x.tool, label: LABEL[x.tool] }} className="h-4 w-4" />
+              {LABEL[x.tool]}
+            </span>
+          }
+          description={
+            x.pin ? (
+              <span className="inline-flex items-center gap-1">
+                <Lock className="h-3 w-3" />
+                {t("poolAccount.pinned", { account: x.pin })}
+              </span>
+            ) : (
+              t("poolAccount.count", { count: x.accounts.length })
+            )
+          }
+          disabled={!!x.pin}
+          control={
+            <select
+              aria-label={t("poolAccount.select", { tool: LABEL[x.tool] })}
+              value={x.pin ?? x.choice ?? ""}
+              disabled={!!x.pin || busy === x.tool}
+              onChange={(e) => void choose(x.tool, e.target.value || null)}
+              className="select !py-1 !text-xs max-w-[16rem]"
+            >
+              {!x.pin && <option value="">{t("poolAccount.automatic")}</option>}
+              {x.accounts.map((a) => (
+                <option key={a.name} value={a.name} disabled={a.expired && a.name !== x.choice}>
+                  {[
+                    a.name,
+                    a.email && a.email !== a.name ? `(${a.email})` : null,
+                    a.expired
+                      ? `— ${t("poolAccount.expired")}`
+                      : a.full
+                        ? `— ${t("poolAccount.full")}`
+                        : a.quotaPercent != null
+                          ? `— ${Math.round(a.quotaPercent)}%`
+                          : null,
+                  ]
+                    .filter(Boolean)
+                    .join(" ")}
+                </option>
+              ))}
+            </select>
+          }
+        />
+      ))}
+    </SettingsSection>
+  );
+}

client/src/components/settings/ToolProfilesSettings.tsx

@@ -262,11 +262,11 @@ function LabelEdit({
 function useRunner(load: () => Promise<unknown>) {
   const [busy, setBusy] = useState<string | null>(null);
   const run = useCallback(
-    async (key: string, fn: () => Promise<unknown>, success: string) => {
+    async <T,>(key: string, fn: () => Promise<T>, success: string | ((r: T) => string)) => {
       setBusy(key);
       try {
-        await fn();
-        toast.success(success);
+        const r = await fn();
+        toast.success(typeof success === "function" ? success(r) : success);
         await load();
       } catch (err: unknown) {
         toast.error(err);
@@ -399,7 +399,14 @@ function OtherProfiles({
                   void run(
                     `switch:${p.name}`,
                     () => api.toolProfiles.activate(tool, p.name),
-                    t("toolProfiles.switchSuccess", { name: p.label, tool: label })
+                    (r) =>
+                      t(
+                        r.following ? "toolProfiles.switchFollowing" : "toolProfiles.switchSuccess",
+                        {
+                          name: p.label,
+                          tool: label,
+                        }
+                      )
                   )
                 }
                 className={btnCls}
@@ -800,9 +807,7 @@ function ProfileUsageLine({
 
 /** Org / seat / plan line shared by the active card and each profile row. */
 function IdentityLine({ identity }: { identity: CcAccountIdentity }) {
-  const parts = [identity.organization, identity.seatTier, identity.subscriptionType].filter(
-    Boolean
-  );
+  const parts = [identity.organization, identity.plan || identity.subscriptionType].filter(Boolean);
   if (parts.length === 0) return null;
   return <div className="text-[10px] text-fg-muted mt-0.5">{parts.join(" · ")}</div>;
 }

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

@@ -65,7 +65,7 @@ const VIEW: AiToolsView = {
   tools: [
     tool("claude", "Claude Code"),
     tool("gemini", "Gemini"),
-    tool("grok", "Grok", { enabled: false }),
+    tool("goose", "Goose", { enabled: false }),
     tool("aider", "Aider", { installed: false, path: null }),
   ],
 };
@@ -155,9 +155,9 @@ describe("AiToolsSettings", () => {
     await user.click(within(gemini).getByText("Set default"));
     expect(api.aiTools.update).toHaveBeenCalledWith("gemini", { default: true });
     // A disabled tool cannot become the default.
-    const grok = screen.getByTestId("ai-tool-grok");
-    expect(within(grok).getByText("Set default")).toBeDisabled();
-    expect(within(grok).getByRole("switch")).toHaveAttribute("aria-checked", "false");
+    const goose = screen.getByTestId("ai-tool-goose");
+    expect(within(goose).getByText("Set default")).toBeDisabled();
+    expect(within(goose).getByRole("switch")).toHaveAttribute("aria-checked", "false");
   });
 
   it("refreshes detection", async () => {
@@ -179,7 +179,7 @@ describe("AiToolsSettings", () => {
     await user.click(screen.getByRole("menuitem", { name: "Disable" }));
     expect(api.aiTools.update).toHaveBeenCalledWith("gemini", { enabled: false });
     // A disabled tool cannot become the default from the menu either.
-    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("ai-tool-grok") });
+    await user.pointer({ keys: "[MouseRight]", target: screen.getByTestId("ai-tool-goose") });
     expect(screen.getByRole("menuitem", { name: "Set default" })).toBeDisabled();
   });
 });
@@ -301,11 +301,9 @@ describe("AiToolsSettings — install and update", () => {
 describe("AiToolIcon", () => {
   it("retries the icon when the same instance shows another tool", async () => {
     const { AiToolIcon } = await import("../../AiToolIcon");
-    const { container, rerender } = render(
-      <AiToolIcon tool={{ id: "opencode", label: "OpenCode" }} />
-    );
+    const { container, rerender } = render(<AiToolIcon tool={{ id: "aider", label: "Aider" }} />);
     fireEvent.error(container.querySelector("img")!);
-    expect(screen.getByText("O")).toBeInTheDocument();
+    expect(screen.getByText("A")).toBeInTheDocument();
     rerender(<AiToolIcon tool={{ id: "cursor", label: "Cursor CLI" }} />);
     expect(container.querySelector('img[src="/api/ai-tools/cursor/icon"]')).toBeTruthy();
   });

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

@@ -0,0 +1,33 @@
+/**
+ * @file ChangesPanelSettings.test.tsx
+ * @description Settings → Git → Changes panel: the inner-repositories switch
+ * starts off, turning it on stores `all` in the synced account preference,
+ * and turning it off again removes the key (back to the default).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ChangesPanelSettings } from "../ChangesPanelSettings";
+import { INNER_REPOS_KEY, readInnerReposMode } from "../../../lib/innerReposPref";
+
+describe("ChangesPanelSettings", () => {
+  beforeEach(() => localStorage.clear());
+
+  it("is off by default and toggles the account preference", () => {
+    render(<ChangesPanelSettings />);
+    const sw = screen.getByRole("switch", {
+      name: /Show the repositories inside the workspace folder/,
+    });
+    expect(sw).toHaveAttribute("aria-checked", "false");
+    expect(readInnerReposMode()).toBe("own");
+
+    fireEvent.click(sw);
+    expect(localStorage.getItem(INNER_REPOS_KEY)).toBe("all");
+    expect(sw).toHaveAttribute("aria-checked", "true");
+
+    fireEvent.click(sw);
+    expect(localStorage.getItem(INNER_REPOS_KEY)).toBeNull();
+    expect(readInnerReposMode()).toBe("own");
+  });
+});

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

@@ -156,7 +156,6 @@ describe("GitIdentitySettings", () => {
     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 · Any key")).toBeInTheDocument();
-    expect(within(aws).getByText(`git clone ssh://${H}/v1/repos/<repo>`)).toBeInTheDocument();
     // A CodeCommit host never shows up again under "other hosts".
     expect(screen.queryByText(`APKA1@${H}`)).toBeNull();
     await userEvent.click(within(aws).getByRole("button", { name: `Delete ${H}` }));
@@ -260,7 +259,6 @@ describe("GitIdentitySettings", () => {
     expect(
       await within(prod).findByText("aws-2 · ap-southeast-1 · APKA2 · aws-2")
     ).toBeInTheDocument();
-    expect(within(prod).getByText("git clone ssh://aws-2/v1/repos/<repo>")).toBeInTheDocument();
     // The default key's card does not list the named key's login.
     const def = screen.getByRole("region", { name: "AWS CodeCommit" });
     expect(within(def).queryByText(/APKA2/)).toBeNull();
@@ -301,7 +299,7 @@ describe("GitIdentitySettings", () => {
       key: "id_ed25519_git-2",
     });
     expect(
-      await within(work).findByText("git clone ssh://git-2/<org>/<repo>.git")
+      await within(work).findByText("ssh://git-2/ → git@github.com")
     ).toBeInTheDocument();
   });
 });

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

@@ -0,0 +1,95 @@
+/**
+ * @file Tests for **Update 9router** on the AI Proxy page: hidden without a
+ * 9router, a dialog that shows versions and starts the job, the server's
+ * blocker (with the manual command) disabling the start, and the job's steps.
+ * @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 { NineRouterUpdate } from "../NineRouterUpdate";
+import { api, type NineRouterUpdateJob, type NineRouterUpdateStatus } from "../../../lib/api";
+
+vi.mock("../../../lib/api", () => ({
+  api: { aiProxies: { nineRouterUpdateStatus: vi.fn(), nineRouterUpdate: vi.fn() } },
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const statusMock = vi.mocked(api.aiProxies.nineRouterUpdateStatus);
+const startMock = vi.mocked(api.aiProxies.nineRouterUpdate);
+
+const base: NineRouterUpdateStatus = {
+  installed: true,
+  version: "0.5.104",
+  latest: "0.5.109",
+  updateAvailable: true,
+  running: true,
+  managedBy: "systemd",
+  blocker: null,
+  job: null,
+};
+
+const job: NineRouterUpdateJob = {
+  status: "running",
+  startedAt: "2026-10-26T00:00:00Z",
+  finishedAt: null,
+  from: "0.5.104",
+  to: null,
+  managedBy: "systemd",
+  install: "direct",
+  steps: [
+    { id: "shutdown", status: "done", message: null },
+    { id: "update", status: "running", message: null },
+    { id: "relaunch", status: "pending", message: null },
+  ],
+  log: "",
+};
+
+beforeEach(() => {
+  statusMock.mockReset();
+  startMock.mockReset();
+});
+
+describe("NineRouterUpdate", () => {
+  it("renders nothing when 9router is not installed", async () => {
+    statusMock.mockResolvedValue({ ...base, installed: false });
+    const { container } = render(<NineRouterUpdate />);
+    await waitFor(() => expect(statusMock).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("opens with both versions and starts the three-step job", async () => {
+    statusMock.mockResolvedValue(base);
+    startMock.mockResolvedValue(job);
+    render(<NineRouterUpdate />);
+    await userEvent.click(await screen.findByRole("button", { name: /aiProxy.update9router/ }));
+    expect(statusMock).toHaveBeenLastCalledWith(true);
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveTextContent("0.5.104");
+    expect(dialog).toHaveTextContent("0.5.109");
+    await userEvent.click(screen.getByRole("button", { name: "aiProxy.update9routerStart" }));
+    expect(startMock).toHaveBeenCalledTimes(1);
+    expect(await screen.findByText("aiProxy.update9routerStep.shutdown")).toBeInTheDocument();
+    expect(screen.getByText("aiProxy.update9routerStep.update")).toBeInTheDocument();
+    expect(screen.getByText("aiProxy.update9routerStep.relaunch")).toBeInTheDocument();
+  });
+
+  it("shows the blocker with its manual command and keeps the start disabled", async () => {
+    statusMock.mockResolvedValue({
+      ...base,
+      blocker: {
+        code: "ENOPERM",
+        message: "/usr/local is not writable by this account and sudo needs a password",
+        command: "sudo npm install -g 9router@latest",
+      },
+    });
+    render(<NineRouterUpdate />);
+    await userEvent.click(await screen.findByRole("button", { name: /aiProxy.update9router/ }));
+    expect(await screen.findByText("sudo npm install -g 9router@latest")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "aiProxy.update9routerStart" })).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,85 @@
+/**
+ * @file Tests for PoolAccountSettings — Settings → AI tools → Pool account:
+ * hidden in local mode and with no usable account; one select per tool that
+ * starts on the user's choice (or Automatic) and saves a pick through
+ * `PUT /api/me/pool-accounts`; locked when an admin pinned the user.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "../../../i18n";
+import { PoolAccountSettings } from "../PoolAccountSettings";
+
+const perms = vi.hoisted(() => ({ local: false }));
+vi.mock("../../AuthGate", () => ({ usePermissions: () => perms }));
+
+const m = vi.hoisted(() => ({ poolAccounts: vi.fn(), choosePoolAccount: vi.fn() }));
+vi.mock("../../../lib/api", () => ({
+  api: { me: m, aiTools: { iconUrl: (id: string) => `/icons/${id}.png` } },
+}));
+
+const account = (name: string) => ({
+  name,
+  kind: "login",
+  email: `${name}@x.io`,
+  expired: false,
+  quotaPercent: 20,
+  full: false,
+});
+
+async function show() {
+  render(<PoolAccountSettings />);
+  await act(async () => {
+    await new Promise((res) => setTimeout(res, 0));
+  });
+}
+
+beforeEach(() => {
+  perms.local = false;
+  m.poolAccounts.mockReset();
+  m.choosePoolAccount.mockReset();
+});
+
+describe("PoolAccountSettings", () => {
+  it("renders nothing in local mode or with no account to choose", async () => {
+    perms.local = true;
+    await show();
+    expect(m.poolAccounts).not.toHaveBeenCalled();
+    expect(screen.queryByRole("combobox")).toBeNull();
+    perms.local = false;
+    m.poolAccounts.mockResolvedValue({ tools: [] });
+    await show();
+    expect(screen.queryByRole("combobox")).toBeNull();
+  });
+
+  it("starts on the user's choice and saves a new pick", async () => {
+    m.poolAccounts.mockResolvedValue({
+      tools: [
+        { tool: "claude", pin: null, choice: "two", accounts: [account("one"), account("two")] },
+      ],
+    });
+    m.choosePoolAccount.mockResolvedValue({ tool: "claude", choice: "one", switched: "switched" });
+    await show();
+    const select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.value).toBe("two");
+    await userEvent.selectOptions(select, "one");
+    expect(m.choosePoolAccount).toHaveBeenCalledWith("claude", "one");
+    await userEvent.selectOptions(select, "");
+    expect(m.choosePoolAccount).toHaveBeenLastCalledWith("claude", null);
+  });
+
+  it("is locked on an admin's pin", async () => {
+    m.poolAccounts.mockResolvedValue({
+      tools: [
+        { tool: "codex", pin: "one", choice: null, accounts: [account("one"), account("two")] },
+      ],
+    });
+    await show();
+    const select = screen.getByRole("combobox") as HTMLSelectElement;
+    expect(select.disabled).toBe(true);
+    expect(select.value).toBe("one");
+    expect(screen.getByText(/one/, { selector: "span" })).toBeTruthy();
+  });
+});

client/src/components/users/AccountPoolCard.tsx

@@ -1,15 +1,15 @@
 /**
  * @file AccountPoolCard.tsx
- * @description The Users page's account pool card (`GET /api/accounts`), one
- * tab per AI tool so each tool's pool is managed on its own: Claude Code,
- * Codex and Cursor have a pool — the accounts every user's new sessions of that
- * tool are spread over, each with its live panes (and, for Claude/Codex, $ and
- * tokens in the last 5 h / 7 d and quota) — so nobody signs in per user;
- * Oh My Pi has no pool but can share the host's login (the same switch as
- * Settings → AI tools, `GET/PUT /api/ai-tools/omp-sharing`, S3 only); every
- * other installed tool says that its users sign in themselves. A tab shows
- * how many accounts its pool holds, and an empty pool says so instead of
- * vanishing. An admin adds an account to the open tab's tool — for Claude a
+ * @description The Users page's account pool card (`GET /api/accounts`).
+ * Claude Code, Codex and Cursor accounts live on the POOLS board
+ * (`PoolGroups`): one column per pool with its accounts of every tool — each
+ * a card with its live panes (and, for Claude/Codex, $ and tokens in the last
+ * 5 h / 7 d and quota) — and its members, so nobody signs in per user. The
+ * tools with no pool get a tab each below it: Oh My Pi can share the host's
+ * login (the same switch as Settings → AI tools,
+ * `GET/PUT /api/ai-tools/omp-sharing`, S3 only); every other installed tool
+ * says that its users sign in themselves. An admin adds an account from the
+ * header's Add account, picking its tool — for Claude a
  * login MOVED in from a saved profile (Settings → AI tools → Profiles,
  * `GET /api/accounts/profiles`), a pasted `.credentials.json`, or a
  * `claude setup-token` token; for Codex a saved Codex profile
@@ -17,11 +17,11 @@
  * Cursor API key — 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. An account's Edit (pencil) picks the users who run on it
- * (`PUT /api/accounts/:name/users`): their sessions skip the balancer, and a
+ * (`PUT /api/accounts/:name/users`, from a `MemberPicker` filtered by role
+ * or "no group"): their sessions skip the balancer, and a
  * Claude login goes into their home at once — no restart. A profile's
  * "Move to pool" link lands here as `?poolAdd=<tool>&poolProfile=<name>`,
- * which opens that tool's tab and Add on that profile; the header links back
- * to the profiles.
+ * which opens Add on that profile; the header links back to the profiles.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -29,7 +29,7 @@ import { useCallback, useEffect, useState, type KeyboardEvent, type ReactNode }
 import { useTranslation } from "react-i18next";
 import type { TFunction } from "i18next";
 import { Link, useSearchParams } from "react-router-dom";
-import { KeyRound, Pencil, Plus, RefreshCw, Share2, Trash2, UserRound, Users } from "lucide-react";
+import { KeyRound, Pencil, Plus, RefreshCw, Share2, Trash2, UserRound } from "lucide-react";
 import {
   api,
   type AccountPin,
@@ -47,10 +47,10 @@ import { isSubmitEnter } from "../../lib/keys";
 import { useSpin } from "../../hooks/useSpin";
 import { useAiTools } from "../../hooks/useAiTools";
 import { ConfirmModal } from "../ConfirmModal";
-import { Checkbox } from "../Checkbox";
 import { AiToolIcon } from "../AiToolIcon";
 import { SettingsSwitchRow } from "../settings/SettingsRow";
-import { PoolGroups, groupsOf } from "./PoolGroups";
+import { PoolGroups, POOL_TOOL_LABELS } from "./PoolGroups";
+import { MemberPicker } from "./MemberPicker";
 
 type Row = {
   tool: PoolTool;
@@ -69,18 +69,20 @@ type Row = {
   full: boolean;
   /** The 5-hour and weekly windows, as the account last reported them. */
   windows: QuotaWindow[];
+  /** "Max 5x", "Team Premium", "Plus"…; null when the account does not say. */
+  plan?: string | null;
 };
 
 /** One quota window of an account: % used and when it rolls over. */
-type QuotaWindow = { key: "5h" | "wk"; used: number | null; resetsAt: string | null };
+export type QuotaWindow = { key: "5h" | "wk"; used: number | null; resetsAt: string | null };
 
 /**
  * The 5-hour and weekly windows of an account, from Claude's `fiveHour` /
  * `sevenDay` or Codex's `5h` / `wk` rollout windows. A window whose reset has
  * passed is empty again (the reading predates it), as the balancer treats it.
  */
-function windowsOf(
-  a: AccountPool["accounts"][number] | AccountPool["codex"][number]
+export function windowsOf(
+  a: Pick<AccountPool["accounts"][number] | AccountPool["codex"][number], "quota">
 ): QuotaWindow[] {
   const q = a.quota as
     | {
@@ -119,13 +121,8 @@ function untilText(iso: string | null): string | null {
 
 /** The tools that have a pool, in tab order (server/routes/accounts.js). */
 const POOL_TOOLS: PoolTool[] = ["claude", "codex", "cursor"];
-/** Fixed tabs, always shown; any other installed tool follows them. */
-const FIXED_TABS: { id: string; label: string }[] = [
-  { id: "claude", label: "Claude Code" },
-  { id: "codex", label: "Codex" },
-  { id: "cursor", label: "Cursor CLI" },
-  { id: "omp", label: "Oh My Pi" },
-];
+/** Tabs for the tools with no pool: Oh My Pi always, any other installed tool after it. */
+const FIXED_TABS: { id: string; label: string }[] = [{ id: "omp", label: "Oh My Pi" }];
 /** Tools whose pool reports spend and quota (Cursor's CLI exposes neither). */
 const METERED = new Set<PoolTool>(["claude", "codex"]);
 
@@ -166,7 +163,7 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
     const profile = params.get("poolProfile");
     return tool && isPoolTool(tool) && profile ? { tool, profile } : null;
   })();
-  const [tab, setTab] = useState<string>(preset?.tool ?? "claude");
+  const [tab, setTab] = useState<string>("omp");
   // What Add opens on: a tool, and a saved profile to share into its pool.
   const [adding, setAdding] = useState<{ tool: PoolTool; profile?: string } | null>(() =>
     isAdmin && preset ? preset : null
@@ -208,15 +205,14 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   const tabs = [
     ...FIXED_TABS,
     ...aiTools.tools
-      .filter((x) => x.installed && !FIXED_TABS.some((f) => f.id === x.id))
+      .filter((x) => x.installed && !isPoolTool(x.id) && !FIXED_TABS.some((f) => f.id === x.id))
       .map((x) => ({ id: x.id, label: x.label })),
   ];
   const current = tabs.find((x) => x.id === tab) ?? FIXED_TABS[0]!;
-  const badge = (id: string): string | null => {
-    if (isPoolTool(id)) return pool ? String(rowsOf(pool, id).length) : null;
-    if (id === "omp") return omp?.available && omp.enabled ? t("pool.omp.badgeOn") : null;
-    return null;
-  };
+  const badge = (id: string): string | null =>
+    id === "omp" && omp?.available && omp.enabled ? t("pool.omp.badgeOn") : null;
+  const rowOf = (tool: PoolTool, name: string) =>
+    pool ? rowsOf(pool, tool).find((r) => r.name === name) : undefined;
 
   return (
     <section id="account-pool" className="card scroll-mt-24" data-testid="account-pool">
@@ -229,6 +225,29 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
         <Link to="/settings/agents#tool-profiles" className="btn-ghost text-xs">
           {t("pool.profilesLink")}
         </Link>
+        {isAdmin && (
+          <label className="relative">
+            <span className="btn-primary pointer-events-none text-xs">
+              <Plus className="h-4 w-4" /> {t("pool.addAccount")}
+            </span>
+            <select
+              className="absolute inset-0 cursor-pointer opacity-0"
+              value=""
+              onChange={(e) => {
+                if (isPoolTool(e.target.value)) setAdding({ tool: e.target.value });
+              }}
+              aria-label={t("pool.addAccount")}
+              data-testid="pool-add-account"
+            >
+              <option value="">{t("pool.addAccount")}</option>
+              {POOL_TOOL_LABELS.map((x) => (
+                <option key={x.id} value={x.id}>
+                  {x.label}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
         <button
           type="button"
           onClick={refresh}
@@ -241,11 +260,37 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
           <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />
         </button>
       </div>
-      {pool?.groups && <PoolGroups pool={pool} isAdmin={isAdmin} onChanged={() => void load()} />}
+      {error && (
+        <p role="alert" className="px-5 py-3 text-xs text-status-danger">
+          {error}
+        </p>
+      )}
+      {pool && (
+        <PoolGroups
+          pool={pool}
+          isAdmin={isAdmin}
+          onChanged={() => void load()}
+          renderAccount={(tool, name) => {
+            const r = rowOf(tool, name);
+            return r ? (
+              <AccountCard
+                row={r}
+                pool={pool}
+                isAdmin={isAdmin}
+                onEdit={() => setEditing(r)}
+                onRemove={() => setRemoving(r)}
+              />
+            ) : null;
+          }}
+        />
+      )}
+      <h3 className="border-t border-border px-5 pt-4 text-xs font-semibold uppercase tracking-wider text-fg-muted">
+        {t("pool.otherTools")}
+      </h3>
       <div
         role="tablist"
-        aria-label={t("pool.title")}
-        className="flex gap-1 overflow-x-auto px-5 pt-3 border-b border-border"
+        aria-label={t("pool.otherTools")}
+        className="flex gap-1 overflow-x-auto px-5 pt-2 border-b border-border"
       >
         {tabs.map((x) => {
           const selected = x.id === current.id;
@@ -280,24 +325,8 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
           );
         })}
       </div>
-      {error && (
-        <p role="alert" className="px-5 py-3 text-xs text-status-danger">
-          {error}
-        </p>
-      )}
       <div role="tabpanel" id="pool-panel" aria-labelledby={`pool-tab-${current.id}`}>
-        {isPoolTool(current.id) ? (
-          <PoolPanel
-            tool={current.id}
-            label={current.label}
-            pool={pool}
-            isAdmin={isAdmin}
-            installed={current.id === "claude" || !!aiTools.byId(current.id)?.installed}
-            onAdd={(profile) => setAdding({ tool: current.id as PoolTool, profile })}
-            onEdit={setEditing}
-            onRemove={setRemoving}
-          />
-        ) : current.id === "omp" ? (
+        {current.id === "omp" ? (
           <OmpPanel state={omp} isAdmin={isAdmin} onChange={setOmp} />
         ) : (
           <NoPoolPanel id={current.id} label={current.label} />
@@ -306,7 +335,7 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
       {adding && (
         <AddAccountDialog
           tool={adding.tool}
-          label={tabs.find((x) => x.id === adding.tool)?.label ?? adding.tool}
+          label={POOL_TOOL_LABELS.find((x) => x.id === adding.tool)?.label ?? adding.tool}
           preset={adding.profile ? { tool: adding.tool, profile: adding.profile } : null}
           onClose={closeAdd}
           onDone={(name) => {
@@ -351,89 +380,16 @@ export function AccountPoolCard({ isAdmin }: { isAdmin: boolean }) {
   );
 }
 
-/** One pool tool's tab: what its pool does, its accounts as cards, the saved profiles to share, and Add. */
-function PoolPanel({
-  tool,
-  label,
-  pool,
-  isAdmin,
-  installed,
-  onAdd,
-  onEdit,
-  onRemove,
-}: {
-  tool: PoolTool;
-  label: string;
-  pool: AccountPool | null;
-  isAdmin: boolean;
-  installed: boolean;
-  /** Add an account; `profile` = share that saved profile into the pool. */
-  onAdd: (profile?: string) => void;
-  onEdit: (r: Row) => void;
-  onRemove: (r: Row) => void;
-}) {
-  const { t } = useTranslation("users");
-  const rows = pool ? rowsOf(pool, tool) : [];
-  const grouped = (pool?.groups ?? []).length > 0;
-  const addButton = isAdmin && (
-    <button type="button" onClick={() => onAdd()} className="btn-primary">
-      <Plus className="w-4 h-4" /> {t("pool.addFor", { tool: label })}
-    </button>
-  );
-
-  return (
-    <>
-      <div className="flex flex-wrap items-start gap-3 px-5 py-3">
-        <p className="flex-1 min-w-[16rem] text-xs text-fg-secondary leading-relaxed">
-          {t(`pool.about.${tool}`)}
-          {!installed && (
-            <span className="ml-1 text-status-warning">
-              {t("pool.notInstalled", { tool: label })}
-            </span>
-          )}
-        </p>
-        {rows.length > 0 && addButton}
-      </div>
-      {pool && rows.length === 0 && (
-        <div className="flex flex-col items-center gap-3 px-5 pb-6 pt-2 text-center">
-          <p className="max-w-md text-sm text-fg-muted">{t("pool.emptyFor", { tool: label })}</p>
-          {addButton}
-        </div>
-      )}
-      {rows.length > 0 && (
-        <div className="grid gap-3 px-5 pb-4 sm:grid-cols-2 xl:grid-cols-3">
-          {rows.map((r) => (
-            <AccountCard
-              key={r.name}
-              row={r}
-              pool={pool!}
-              grouped={grouped}
-              isAdmin={isAdmin}
-              onEdit={() => onEdit(r)}
-              onRemove={() => onRemove(r)}
-            />
-          ))}
-        </div>
-      )}
-      {isAdmin && SOURCES[tool].includes("profile") && (
-        <SavedProfiles tool={tool} pool={pool} onShare={(name) => onAdd(name)} />
-      )}
-    </>
-  );
-}
-
-/** One pool account: who it is, how loaded, which groups and users run on it. */
+/** One pool account: who it is and on which plan, how loaded, who is pinned to it. */
 function AccountCard({
   row: r,
   pool,
-  grouped,
   isAdmin,
   onEdit,
   onRemove,
 }: {
   row: Row;
   pool: AccountPool;
-  grouped: boolean;
   isAdmin: boolean;
   onEdit: () => void;
   onRemove: () => void;
@@ -443,39 +399,52 @@ function AccountCard({
   const users = pinsOf(pool, r.tool)
     .filter((p) => p.account === r.name)
     .map((p) => p.username);
-  const inGroups = groupsOf(pool, r.tool, r.name);
+  const warn = "bg-status-warning/10 text-status-warning border-status-warning/20";
   return (
     <div
-      className={`flex flex-col gap-2 rounded-lg border bg-surface-2 p-3 ${
+      className={`group flex flex-col gap-2 rounded-lg border bg-surface-1 p-2.5 shadow-sm transition-[border-color,box-shadow] duration-150 hover:border-accent/40 hover:shadow-md ${
         r.expired ? "border-status-danger/30 opacity-70" : "border-border"
       }`}
+      title={t("pool.added", { at: formatDateTime(r.addedAt) })}
       data-testid="pool-account"
     >
       <div className="flex items-start gap-2">
         <div className="flex-1 min-w-0">
-          <div className="truncate text-sm font-medium text-fg-primary">{r.name}</div>
-          {r.email && <div className="truncate text-[11px] text-fg-secondary">{r.email}</div>}
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span className="truncate text-sm font-semibold text-fg-primary">{r.name}</span>
+            {r.plan && (
+              <span
+                className="shrink-0 rounded-full bg-accent/10 px-1.5 text-[10px] font-medium leading-4 text-accent"
+                data-testid="pool-account-plan"
+              >
+                {r.plan}
+              </span>
+            )}
+          </div>
+          {r.email && <div className="truncate text-[11px] text-fg-muted">{r.email}</div>}
         </div>
-        <span className="badge shrink-0 py-0 text-[10px]">{t(`pool.kindShort.${r.kind}`)}</span>
+        <span className="shrink-0 rounded border border-border px-1 text-[10px] leading-4 text-fg-muted">
+          {t(`pool.kindShort.${r.kind}`)}
+        </span>
         {isAdmin && (
-          <div className="-mr-1 -mt-1 flex shrink-0">
+          <div className="-mr-1 -mt-1 flex shrink-0 opacity-60 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
             <button
               type="button"
               onClick={onEdit}
               title={t("pool.edit", { name: r.name })}
               aria-label={t("pool.edit", { name: r.name })}
-              className="btn-icon"
+              className="btn-icon p-1"
             >
-              <Pencil className="h-4 w-4" />
+              <Pencil className="h-3.5 w-3.5" />
             </button>
             <button
               type="button"
               onClick={onRemove}
               title={t("pool.remove", { name: r.name })}
               aria-label={t("pool.remove", { name: r.name })}
-              className="btn-icon"
+              className="btn-icon p-1 hover:text-status-danger"
             >
-              <Trash2 className="h-4 w-4" />
+              <Trash2 className="h-3.5 w-3.5" />
             </button>
           </div>
         )}
@@ -488,68 +457,47 @@ function AccountCard({
             </span>
           )}
           {r.refreshError && !r.expired && (
-            <span
-              className="badge py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20"
-              title={r.refreshError}
-            >
+            <span className={`badge py-0 text-[10px] ${warn}`} title={r.refreshError}>
               {t("pool.refreshFailed")}
             </span>
           )}
-          {r.full && (
-            <span className="badge py-0 text-[10px] bg-status-warning/10 text-status-warning border-status-warning/20">
-              {t("pool.full")}
-            </span>
-          )}
+          {r.full && <span className={`badge py-0 text-[10px] ${warn}`}>{t("pool.full")}</span>}
         </div>
       )}
-      <div className="flex items-center gap-3 text-xs text-fg-secondary">
-        <span className="inline-flex items-center gap-1">
+      {metered && (
+        <div className="space-y-1" data-testid="pool-quota">
+          {r.windows.map((w) => (
+            <QuotaBar key={w.key} window={w} />
+          ))}
+        </div>
+      )}
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] tabular-nums text-fg-muted">
+        <span className="inline-flex items-center gap-1 text-fg-secondary">
           <span
             className={`h-1.5 w-1.5 rounded-full ${r.livePanes > 0 ? "bg-status-success" : "bg-fg-muted/40"}`}
             aria-hidden
           />
           {t("pool.liveCount", { count: r.livePanes })}
         </span>
+        {metered && (
+          <>
+            <span aria-hidden>·</span>
+            <span>
+              {t("pool.spend")}: <span className="text-fg-primary">{fmtCost(r.spend5h)}</span> ·{" "}
+              {t("pool.tokens", { tokens: fmt(r.tokens5h) })}
+            </span>
+            <span className="basis-full">
+              {t("pool.spend7d", { cost: fmtCost(r.spend7d), tokens: fmt(r.tokens7d) })}
+            </span>
+          </>
+        )}
       </div>
-      {metered && (
-        <div className="space-y-1.5" data-testid="pool-quota">
-          {r.windows.map((w) => (
-            <QuotaBar key={w.key} window={w} />
-          ))}
-        </div>
-      )}
-      {metered && (
-        <div className="text-[11px] tabular-nums text-fg-muted">
-          <div>
-            {t("pool.spend")}: <span className="text-fg-primary">{fmtCost(r.spend5h)}</span> ·{" "}
-            {t("pool.tokens", { tokens: fmt(r.tokens5h) })}
-          </div>
-          <div>{t("pool.spend7d", { cost: fmtCost(r.spend7d), tokens: fmt(r.tokens7d) })}</div>
-        </div>
-      )}
-      {grouped && (
-        <div className="flex flex-wrap items-center gap-1 text-[11px]">
-          <Users className="h-3 w-3 text-fg-muted" aria-hidden />
-          {inGroups.length === 0 ? (
-            <span className="text-fg-muted">{t("pool.groups.shared")}</span>
-          ) : (
-            inGroups.map((g) => (
-              <span key={g.id} className="badge py-0 text-[10px]">
-                {g.name}
-              </span>
-            ))
-          )}
-        </div>
-      )}
       {users.length > 0 && (
         <div className="inline-flex items-center gap-1 text-[11px] text-fg-secondary">
           <UserRound className="h-3 w-3" aria-hidden />
           {t("pool.pinned", { users: users.join(", ") })}
         </div>
       )}
-      <div className="mt-auto text-[11px] text-fg-muted">
-        {t("pool.added", { at: formatDateTime(r.addedAt) })}
-      </div>
     </div>
   );
 }
@@ -558,7 +506,7 @@ function AccountCard({
  * One window of an account's quota, shown as what is LEFT (100% = untouched,
  * 0% = used up), with when it resets.
  */
-function QuotaBar({ window: w }: { window: QuotaWindow }) {
+export function QuotaBar({ window: w }: { window: QuotaWindow }) {
   const { t } = useTranslation("users");
   const left = w.used == null ? null : Math.max(0, Math.min(100, 100 - Math.round(w.used)));
   const resets = untilText(w.resetsAt);
@@ -568,7 +516,7 @@ function QuotaBar({ window: w }: { window: QuotaWindow }) {
         <span className="w-14 shrink-0 text-fg-muted">{t(`pool.window.${w.key}`)}</span>
         <span className="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-4">
           <span
-            className={`block h-full ${
+            className={`block h-full transition-[width] duration-500 ${
               left == null
                 ? ""
                 : left === 0
@@ -596,72 +544,6 @@ function QuotaBar({ window: w }: { window: QuotaWindow }) {
   );
 }
 
-/**
- * The tool's saved login profiles (Settings → AI tools → Profiles) as cards:
- * "Share to pool" moves one in (`POST /api/accounts` with `profile`) — it then
- * leaves the switcher, since a login's refresh token may have one holder.
- */
-function SavedProfiles({
-  tool,
-  pool,
-  onShare,
-}: {
-  tool: PoolTool;
-  /** Re-read whenever the pool changes: a shared profile is gone from the list. */
-  pool: AccountPool | null;
-  onShare: (name: string) => void;
-}) {
-  const { t } = useTranslation("users");
-  const [profiles, setProfiles] = useState<PoolProfile[] | null>(null);
-  useEffect(() => {
-    api.accountPool
-      .profiles(tool)
-      .then((r) => setProfiles(r.profiles))
-      .catch(() => setProfiles([]));
-  }, [tool, pool]);
-  return (
-    <div className="border-t border-border px-5 py-4" data-testid="pool-profiles">
-      <div className="flex flex-wrap items-center gap-2">
-        <h3 className="flex-1 text-xs font-semibold uppercase tracking-wider text-fg-muted">
-          {t("pool.savedProfiles.title")}
-        </h3>
-        <Link to="/settings/agents#tool-profiles" className="text-xs text-accent hover:underline">
-          {t("pool.profilesLink")}
-        </Link>
-      </div>
-      {profiles !== null && profiles.length === 0 && (
-        <p className="mt-2 text-xs text-fg-muted">{t("pool.savedProfiles.empty")}</p>
-      )}
-      {profiles && profiles.length > 0 && (
-        <div className="mt-2 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
-          {profiles.map((p) => (
-            <div
-              key={p.name}
-              className="flex items-center gap-2 rounded-lg border border-dashed border-border px-3 py-2"
-            >
-              <div className="flex-1 min-w-0">
-                <div className="truncate text-sm text-fg-primary">{p.label}</div>
-                <div className="truncate text-[11px] text-fg-muted">
-                  {[p.email, p.subscriptionType].filter(Boolean).join(" · ")}
-                  {p.active ? ` · ${t("pool.savedProfiles.activeHere")}` : ""}
-                </div>
-              </div>
-              <button
-                type="button"
-                onClick={() => onShare(p.name)}
-                className="btn-ghost shrink-0 text-xs"
-                aria-label={t("pool.savedProfiles.shareNamed", { name: p.label })}
-              >
-                <Share2 className="h-3.5 w-3.5" /> {t("pool.savedProfiles.share")}
-              </button>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
 /**
  * Oh My Pi's tab: no pool, but the host's own omp login can be shared with
  * every member's pane through omp's gateway (server/lib/omp-share.js) — the
@@ -777,13 +659,8 @@ function EditAccountDialog({
 
   const changed = chosen.size !== initial.length || initial.some((id) => !chosen.has(id));
   const ready = changed && current.length > 0;
-  const toggle = (id: number, on: boolean) =>
-    setChosen((prev) => {
-      const next = new Set(prev);
-      if (on) next.add(id);
-      else next.delete(id);
-      return next;
-    });
+  const groupOf = (userId: number) =>
+    (pool.groups ?? []).find((g) => g.users.some((u) => u.userId === userId))?.name ?? null;
 
   const submit = async () => {
     if (!ready || busy) return;
@@ -822,38 +699,28 @@ function EditAccountDialog({
       >
         <div>
           <span className="text-xs font-medium text-fg-secondary">{t("pool.users")}</span>
-          <div className="mt-1 max-h-56 overflow-y-auto rounded-md border border-border divide-y divide-border">
-            {users === null && (
-              <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.loadingUsers")}</p>
-            )}
-            {users?.length === 0 && (
-              <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.noUsers")}</p>
-            )}
-            {users?.map((u) => {
-              const elsewhere = pins.find((p) => p.userId === u.id && p.account !== row.name);
-              return (
-                <div key={u.id} className="px-3 py-2">
-                  <Checkbox
-                    checked={chosen.has(u.id)}
-                    onChange={(on) => toggle(u.id, on)}
-                    label={
-                      <span>
-                        {u.username}
-                        {u.disabled && (
-                          <span className="ml-1 text-fg-muted">({t("disabled")})</span>
-                        )}
-                        {elsewhere && (
-                          <span className="ml-1.5 text-[11px] text-fg-muted">
-                            {t("pool.onAccount", { account: elsewhere.account })}
-                          </span>
-                        )}
-                      </span>
-                    }
-                    labelClassName="text-sm text-fg-primary"
-                  />
-                </div>
-              );
-            })}
+          <div className="mt-1">
+            <MemberPicker
+              users={users}
+              chosen={chosen}
+              onChange={setChosen}
+              groupOf={groupOf}
+              grouped={(pool.groups ?? []).length > 0}
+              note={(u) => {
+                const elsewhere = pins.find((p) => p.userId === u.id && p.account !== row.name);
+                const group = groupOf(u.id);
+                return (
+                  <span className="ml-1.5 text-[11px] text-fg-muted">
+                    {[
+                      group && t("pool.groups.inGroup", { group }),
+                      elsewhere && t("pool.onAccount", { account: elsewhere.account }),
+                    ]
+                      .filter(Boolean)
+                      .join(" · ")}
+                  </span>
+                );
+              }}
+            />
           </div>
         </div>
         <Field label={t("yourPassword")} hint={t("yourPasswordHint")}>

client/src/components/users/MemberPicker.tsx

@@ -0,0 +1,194 @@
+/**
+ * @file MemberPicker.tsx
+ * @description The pool dialogs' member list (an account's Edit, a group's
+ * Edit): filter chips by role (Admin / Developer / Analyst, each with its
+ * count) plus "No group" for the users in no pool group, a search box, a
+ * tick-all for what is shown, and one checkbox per user with their role and
+ * where they are now. Pure UI: the caller owns the ticked set.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Search } from "lucide-react";
+import type { AuthUser, ServerUserUsage } from "../../lib/api";
+import { Checkbox } from "../Checkbox";
+import { UserAvatar } from "./UserAvatar";
+
+export const ROLES: AuthUser["role"][] = ["admin", "developer", "analyst"];
+/** A role, every user, or the users in no pool group. */
+export type MemberFilter = "all" | "nogroup" | AuthUser["role"];
+
+/** The chips' filter applied to one user. */
+export function matchesFilter(
+  u: Pick<ServerUserUsage, "id" | "role">,
+  filter: MemberFilter,
+  groupOf: (userId: number) => string | null
+): boolean {
+  if (filter === "all") return true;
+  if (filter === "nogroup") return groupOf(u.id) === null;
+  return u.role === filter;
+}
+
+/** A row of filter chips with counts; `nogroup` only when groups exist. */
+export function MemberFilterChips({
+  users,
+  filter,
+  onFilter,
+  groupOf,
+  grouped,
+}: {
+  users: Pick<ServerUserUsage, "id" | "role">[];
+  filter: MemberFilter;
+  onFilter: (f: MemberFilter) => void;
+  groupOf: (userId: number) => string | null;
+  grouped: boolean;
+}) {
+  const { t } = useTranslation("users");
+  const chips: { id: MemberFilter; label: string }[] = [
+    { id: "all", label: t("pool.members.all") },
+    ...ROLES.map((r) => ({ id: r as MemberFilter, label: t(`roles.${r}`) })),
+    ...(grouped ? [{ id: "nogroup" as MemberFilter, label: t("pool.members.noGroup") }] : []),
+  ];
+  return (
+    <div role="group" aria-label={t("pool.members.filter")} className="flex flex-wrap gap-1">
+      {chips.map((c) => {
+        const n = users.filter((u) => matchesFilter(u, c.id, groupOf)).length;
+        if (n === 0 && c.id !== "all" && c.id !== filter) return null;
+        const on = filter === c.id;
+        return (
+          <button
+            key={c.id}
+            type="button"
+            aria-pressed={on}
+            onClick={() => onFilter(c.id)}
+            className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] transition-colors ${
+              on
+                ? "border-accent/50 bg-accent/15 text-accent"
+                : "border-border text-fg-muted hover:text-fg-secondary"
+            }`}
+          >
+            {c.label}
+            <span className="tabular-nums opacity-70">{n}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function MemberPicker({
+  users,
+  chosen,
+  onChange,
+  groupOf,
+  grouped,
+  note,
+}: {
+  users: ServerUserUsage[] | null;
+  chosen: Set<number>;
+  onChange: (next: Set<number>) => void;
+  /** The pool group a user is in now, by name, or null. */
+  groupOf: (userId: number) => string | null;
+  /** Whether any pool group exists (shows the "No group" chip). */
+  grouped: boolean;
+  /** Extra text after a user's name (where they run now). */
+  note?: (u: ServerUserUsage) => ReactNode;
+}) {
+  const { t } = useTranslation("users");
+  const [filter, setFilter] = useState<MemberFilter>("all");
+  const [query, setQuery] = useState("");
+  const q = query.trim().toLowerCase();
+  const shown = (users ?? []).filter(
+    (u) =>
+      matchesFilter(u, filter, groupOf) &&
+      (!q ||
+        u.username.toLowerCase().includes(q) ||
+        (u.displayName ?? "").toLowerCase().includes(q))
+  );
+  const allShown = shown.length > 0 && shown.every((u) => chosen.has(u.id));
+  const setMany = (ids: number[], on: boolean) => {
+    const next = new Set(chosen);
+    for (const id of ids) {
+      if (on) next.add(id);
+      else next.delete(id);
+    }
+    onChange(next);
+  };
+
+  return (
+    <div className="space-y-2" data-testid="member-picker">
+      {users && users.length > 0 && (
+        <>
+          <MemberFilterChips
+            users={users}
+            filter={filter}
+            onFilter={setFilter}
+            groupOf={groupOf}
+            grouped={grouped}
+          />
+          <div className="flex items-center gap-2">
+            <label className="relative flex-1">
+              <Search className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-fg-muted" />
+              <input
+                className="input w-full py-1 pl-7 text-xs"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("pool.members.search")}
+                aria-label={t("pool.members.search")}
+              />
+            </label>
+            <Checkbox
+              checked={allShown}
+              disabled={shown.length === 0}
+              onChange={(on) =>
+                setMany(
+                  shown.map((u) => u.id),
+                  on
+                )
+              }
+              label={t("pool.members.tickShown", { count: shown.length })}
+              labelClassName="text-[11px] text-fg-secondary"
+            />
+          </div>
+        </>
+      )}
+      <div className="max-h-56 overflow-y-auto rounded-md border border-border divide-y divide-border">
+        {users === null && (
+          <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.loadingUsers")}</p>
+        )}
+        {users?.length === 0 && (
+          <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.noUsers")}</p>
+        )}
+        {users && users.length > 0 && shown.length === 0 && (
+          <p className="px-3 py-2 text-xs text-fg-muted">{t("pool.members.noneShown")}</p>
+        )}
+        {shown.map((u) => (
+          <div key={u.id} className="flex items-center gap-2 px-3 py-1.5">
+            <Checkbox
+              checked={chosen.has(u.id)}
+              onChange={(on) => setMany([u.id], on)}
+              label={
+                <span className="inline-flex items-center gap-1.5">
+                  <UserAvatar
+                    name={u.displayName || u.username}
+                    userId={u.id}
+                    avatarAt={u.avatarAt}
+                    letters={1}
+                    className="h-5 w-5 text-[10px]"
+                  />
+                  {u.username}
+                  {u.disabled && <span className="ml-1 text-fg-muted">({t("disabled")})</span>}
+                  {note?.(u)}
+                </span>
+              }
+              className="min-w-0 flex-1"
+              labelClassName="text-sm text-fg-primary"
+            />
+            <span className="badge shrink-0 py-0 text-[10px]">{t(`roles.${u.role}`)}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

client/src/components/users/MemberTmux.tsx

@@ -0,0 +1,220 @@
+/**
+ * @file MemberTmux.tsx
+ * @description Each member's own tmux server as part of the Administration
+ * page's users table (one Linux user per account only, `GET /api/users/tmux`,
+ * `useMemberTmux`): a `TmuxCell` per row — the version it runs, a badge when
+ * older than the installed one, its sessions, whether an agent of theirs is
+ * working — and `MemberTmuxBar` above the table, 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 { 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 { 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`;
+
+/** `GET /api/users/tmux`; `available` false without one Linux user per account. */
+export function useMemberTmux(enabled = true) {
+  const [data, setData] = useState<MemberTmux | null>(null);
+  const reload = useCallback(
+    () =>
+      api.users
+        .tmux()
+        .then(setData)
+        .catch(() => setData(null)),
+    []
+  );
+  useEffect(() => {
+    if (enabled) void reload();
+  }, [enabled, reload]);
+  return { data, reload };
+}
+
+/** One member's tmux server as a users-table cell: version, badges, sessions, agents. */
+export function TmuxCell({ row }: { row?: MemberTmuxRow }) {
+  const { t } = useTranslation("users");
+  if (!row?.running) return <span className="text-sm text-fg-muted">—</span>;
+  return (
+    <div className="text-sm text-fg-secondary">
+      <span className="font-mono">{row.stuck ? "?" : (row.version ?? "?")}</span>
+      {row.stuck && <span className={DANGER}>{t("tmux.stuck")}</span>}
+      {row.outdated && <span className={WARN}>{t("tmux.outdated")}</span>}
+      <div
+        className="text-[11px] text-fg-muted"
+        title={
+          row.startedAt
+            ? t("tmux.since", { at: formatDateTime(new Date(row.startedAt).toISOString()) })
+            : undefined
+        }
+      >
+        {t("tmux.sessionsCount", { count: row.sessions ?? 0 })} ·{" "}
+        {row.busy > 0 ? t("tmux.working", { count: row.busy }) : t("tmux.idle")}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Above the users table: the installed tmux, the not-yet-installed tmux-member
+ * warning, and (an admin) "Restart N idle members". Nothing without S3.
+ */
+export function MemberTmuxBar({
+  data,
+  isAdmin,
+  onRestart,
+}: {
+  data: MemberTmux | null;
+  isAdmin: boolean;
+  onRestart: (target: "idle") => void;
+}) {
+  const { t } = useTranslation("users");
+  if (!data?.available) return null;
+  const idle = data.users.filter((u) => u.running && u.outdated && u.busy === 0);
+  return (
+    <div className="flex flex-wrap items-center gap-3 text-xs" data-testid="member-tmux">
+      <span className="inline-flex items-center gap-1.5 text-fg-muted">
+        <TerminalSquare className="w-3.5 h-3.5" />
+        {t("tmux.description", { version: data.installed ?? "?" })}
+      </span>
+      {!data.matched && <span className="text-status-warning">{t("tmux.notMatched")}</span>}
+      {isAdmin && idle.length > 0 && (
+        <button type="button" onClick={() => onRestart("idle")} className="btn-ghost text-xs">
+          <RotateCcw className="w-3.5 h-3.5" /> {t("tmux.restartIdle", { count: idle.length })}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/** An admin's restart of one member's tmux, or of every idle outdated one. */
+export function TmuxRestartDialog({
+  target,
+  data,
+  onClose,
+  onDone,
+}: {
+  target: MemberTmuxRow | "idle";
+  data: MemberTmux | null;
+  onClose: () => void;
+  onDone: (message: string) => void;
+}) {
+  const idle = (data?.users ?? []).filter((u) => u.running && u.outdated && u.busy === 0);
+  return <RestartDialog target={target} idle={idle} onClose={onClose} onDone={onDone} />;
+}
+
+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/MemberTmuxCard.tsx

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

@@ -4,7 +4,9 @@
  * (`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.
+ * sidebar's account row, its workspace owner groups, Settings → Account, the
+ * Users page and its editor, the pool board and member picker, and System
+ * Health's per-user CPU/RAM card.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 

client/src/components/users/UserDetail.tsx

@@ -0,0 +1,333 @@
+/**
+ * @file UserDetail.tsx
+ * @description One account, opened IN PLACE under its row of the
+ * Administration page's users table (`?user=<id>`, `GET /api/users/:id/details`).
+ * The row already shows identity, sessions, spend, home and tmux, so
+ * this keeps only what the row cannot: one summary line (last sign-in, last
+ * activity, active sessions and live panes), then three short columns — spend
+ * (30-day bars, by AI tool, top models), the account pool (per tool: pin or
+ * group, each account's quota left beside this user's own 7-day share), and
+ * what runs now (live panes, owned workspaces) — and the five newest sessions. Read-only; Edit stays on
+ * the row.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { AlertCircle, Play, RefreshCw } from "lucide-react";
+import { api, type PoolTool, type UserDetails } from "../../lib/api";
+import { fmtCost, formatDateTime } from "../../lib/format";
+import { effectiveSessionStatus, sessionAwaitingReason } from "../../lib/types";
+import { useSpin } from "../../hooks/useSpin";
+import { useAiTools } from "../../hooks/useAiTools";
+import { AiToolIcon } from "../AiToolIcon";
+import { SessionStatusBadge } from "../StatusBadge";
+import { MiniChart } from "../admin/MiniChart";
+import { QuotaBar, windowsOf } from "./AccountPoolCard";
+
+const POOL_LABEL: Record<PoolTool, string> = {
+  claude: "Claude Code",
+  codex: "Codex",
+  cursor: "Cursor CLI",
+};
+const pctText = (n: number) => `${n < 10 ? n.toFixed(1) : Math.round(n)}%`;
+
+export function UserDetail({ userId }: { userId: number }) {
+  const { t } = useTranslation("users");
+  const { label: toolLabel } = useAiTools();
+  const [data, setData] = useState<UserDetails | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(
+    () =>
+      api.users
+        .details(userId)
+        .then((d) => {
+          setData(d);
+          setError(null);
+        })
+        .catch((e: Error) => setError(e.message)),
+    [userId]
+  );
+  const [spinning, refresh] = useSpin(load);
+  useEffect(() => {
+    setData(null);
+    void load();
+  }, [load]);
+
+  if (error)
+    return (
+      <div
+        role="alert"
+        data-testid="user-detail"
+        className="flex flex-wrap items-center gap-3 text-sm text-status-danger"
+      >
+        <AlertCircle className="w-4 h-4 flex-shrink-0" />
+        <span className="flex-1 min-w-0">
+          {t("detail.failed")}: {error}
+        </span>
+        <button type="button" onClick={refresh} className="btn-ghost text-xs">
+          {t("common:retry")}
+        </button>
+      </div>
+    );
+  if (!data)
+    return (
+      <p data-testid="user-detail" className="py-4 text-center text-sm text-fg-muted">
+        {t("common:loading")}
+      </p>
+    );
+
+  const u = data.user;
+  const total30 = data.usage.last30d.cost;
+  const pools = (Object.keys(POOL_LABEL) as PoolTool[]).filter(
+    (tool) => (data.pool[tool]?.accounts.length ?? 0) > 0
+  );
+
+  return (
+    <div className="space-y-4" data-testid="user-detail">
+      {/* One line of what the row does not show. */}
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-1 text-xs">
+        <Inline label={t("detail.lastLogin")}>
+          {u.lastLoginAt ? formatDateTime(u.lastLoginAt) : t("detail.never")}
+        </Inline>
+        <Inline label={t("detail.lastSession")}>
+          {data.sessions.lastAt ? formatDateTime(data.sessions.lastAt) : "—"}
+        </Inline>
+        <Inline label={t("detail.activeLabel")}>
+          {t("detail.activeValue", { sessions: data.sessions.active, panes: data.panes.length })}
+        </Inline>
+        <button
+          type="button"
+          onClick={refresh}
+          disabled={spinning}
+          aria-busy={spinning}
+          className="btn-ghost ml-auto py-1 text-xs"
+        >
+          <RefreshCw className={`w-3.5 h-3.5 ${spinning ? "animate-spin" : ""}`} />{" "}
+          {t("common:refresh")}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        {/* Spend: the month at a glance, then where it went. */}
+        <Panel title={t("detail.spendDaily")}>
+          <MiniChart
+            kind="bar"
+            label={t("detail.spendDaily")}
+            points={data.usage.daily.map((d) => ({ x: d.date.slice(5), y: d.cost }))}
+            format={(v) => fmtCost(v)}
+          />
+          {data.usage.byTool.length === 0 ? (
+            <p className="text-xs text-fg-muted">{t("detail.noUsage")}</p>
+          ) : (
+            <ul className="space-y-1.5 pt-1">
+              {data.usage.byTool.map((r) => (
+                <ShareRow
+                  key={r.key}
+                  label={
+                    <span className="flex items-center gap-1.5">
+                      <AiToolIcon
+                        tool={{ id: r.key, label: toolLabel(r.key) }}
+                        className="h-4 w-4"
+                      />
+                      {toolLabel(r.key)}
+                    </span>
+                  }
+                  cost={r.cost}
+                  total={total30}
+                />
+              ))}
+              {data.usage.byModel.slice(0, 3).map((r) => (
+                <ShareRow
+                  key={`m:${r.key}`}
+                  label={<span className="font-mono text-[11px] text-fg-muted">{r.key}</span>}
+                  cost={r.cost}
+                  total={total30}
+                />
+              ))}
+            </ul>
+          )}
+        </Panel>
+
+        {/* Pool: what they may run on, and how much of it is theirs. */}
+        <Panel title={t("detail.pool")}>
+          {pools.length === 0 ? (
+            <p className="text-xs text-fg-muted">{t("detail.poolNone")}</p>
+          ) : (
+            pools.map((tool) => {
+              const p = data.pool[tool]!;
+              return (
+                <div key={tool} className="space-y-2">
+                  <div className="flex flex-wrap items-center gap-1.5 text-xs">
+                    <AiToolIcon tool={{ id: tool, label: POOL_LABEL[tool] }} className="h-4 w-4" />
+                    <span className="font-medium text-fg-primary">{POOL_LABEL[tool]}</span>
+                    <span className="text-fg-muted">
+                      ·{" "}
+                      {p.pin
+                        ? t("detail.poolPinned", { account: p.pin })
+                        : p.choice
+                          ? t("detail.poolChosen", { account: p.choice })
+                          : p.group
+                            ? t("detail.poolGroup", { name: p.group.name })
+                            : t("detail.poolShared")}
+                    </span>
+                  </div>
+                  {p.accounts.map((a) => {
+                    const share = a.spend7d > 0 ? (a.userSpend7d / a.spend7d) * 100 : 0;
+                    return (
+                      <div
+                        key={a.name}
+                        className={`rounded-md border border-border px-2.5 py-2 space-y-1 ${a.allowed ? "" : "opacity-60"}`}
+                        data-testid="user-pool-account"
+                      >
+                        <div className="flex items-center justify-between gap-2 text-xs">
+                          <span className="truncate font-medium text-fg-primary">
+                            {a.name}
+                            {a.expired && (
+                              <span className="ml-1.5 text-status-danger">{t("pool.expired")}</span>
+                            )}
+                            {!a.allowed && (
+                              <span className="ml-1.5 text-fg-muted">
+                                {t("detail.poolNotAllowed")}
+                              </span>
+                            )}
+                          </span>
+                          {tool !== "cursor" && (
+                            <span
+                              className="flex-shrink-0 tabular-nums text-fg-secondary"
+                              title={t("detail.poolTotal7d", { cost: fmtCost(a.spend7d) })}
+                            >
+                              {t("detail.poolTheirs7d", { cost: fmtCost(a.userSpend7d) })}
+                              {a.spend7d > 0 && (
+                                <span className="text-fg-muted"> ({pctText(share)})</span>
+                              )}
+                            </span>
+                          )}
+                        </div>
+                        {tool !== "cursor" &&
+                          windowsOf(a).map((w) => <QuotaBar key={w.key} window={w} />)}
+                      </div>
+                    );
+                  })}
+                </div>
+              );
+            })
+          )}
+        </Panel>
+
+        {/* Now: live panes and the workspaces they own. */}
+        <Panel title={t("detail.nowTitle")}>
+          {data.panes.length === 0 ? (
+            <p className="text-xs text-fg-muted">{t("detail.noPanes")}</p>
+          ) : (
+            <ul className="space-y-1.5">
+              {data.panes.map((p) => (
+                <li key={p.id} className="text-xs">
+                  <Link
+                    to={`/workspace?lane=${p.laneId}&run=${encodeURIComponent(p.id)}`}
+                    className="inline-flex items-center gap-1.5 text-fg-primary hover:text-accent"
+                  >
+                    <Play className="h-3 w-3 text-status-success" />
+                    {p.laneTitle || p.laneCwd}
+                  </Link>
+                  <span className="text-fg-muted">
+                    {" "}
+                    · {toolLabel(p.tool)}
+                    {p.account ? ` · ${p.account}` : ""}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
+          {data.workspaces.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 border-t border-border pt-2">
+              {data.workspaces.map((w) => (
+                <Link
+                  key={w.id}
+                  to={`/workspace?lane=${w.id}`}
+                  title={w.cwd}
+                  className="badge py-0.5 text-[11px] hover:text-accent"
+                >
+                  {w.livePanes > 0 && (
+                    <span className="mr-1 inline-block h-1.5 w-1.5 rounded-full bg-status-success" />
+                  )}
+                  {w.title || w.cwd.split("/").pop()}
+                  <span className="ml-1 text-fg-muted">{w.sessions}</span>
+                </Link>
+              ))}
+            </div>
+          )}
+        </Panel>
+      </div>
+
+      {data.recentSessions.length > 0 && (
+        <Panel title={t("detail.recentTitle")}>
+          <ul className="divide-y divide-border">
+            {data.recentSessions.slice(0, 5).map((s) => (
+              <li key={s.id} className="flex items-center gap-3 py-1.5 text-xs">
+                <SessionStatusBadge
+                  status={effectiveSessionStatus(s)}
+                  reason={sessionAwaitingReason(s)}
+                />
+                <Link
+                  to={`/sessions/${s.id}`}
+                  className="min-w-0 flex-1 truncate text-fg-primary hover:text-accent"
+                >
+                  {s.name || s.id.slice(0, 8)}
+                </Link>
+                <span className="flex-shrink-0 text-fg-muted">{toolLabel(s.tool || "claude")}</span>
+                <span className="w-32 flex-shrink-0 text-right text-fg-muted">
+                  {formatDateTime(s.last_activity || s.started_at)}
+                </span>
+                <span className="w-16 flex-shrink-0 text-right font-mono text-fg-secondary">
+                  {s.cost ? fmtCost(s.cost) : "—"}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </Panel>
+      )}
+    </div>
+  );
+}
+
+function Inline({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <span>
+      <span className="text-fg-muted">{label}: </span>
+      <span className="text-fg-primary">{children}</span>
+    </span>
+  );
+}
+
+function Panel({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="card p-3 space-y-2.5 min-w-0">
+      <h3 className="text-[11px] font-semibold uppercase tracking-wider text-fg-muted">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+/** One slice of the 30-day spend: label, $, and a thin bar of its share. */
+function ShareRow({ label, cost, total }: { label: ReactNode; cost: number; total: number }) {
+  const share = total > 0 ? (cost / total) * 100 : 0;
+  return (
+    <li className="space-y-0.5">
+      <div className="flex items-center justify-between gap-2 text-xs">
+        <span className="min-w-0 truncate text-fg-secondary">{label}</span>
+        <span className="flex-shrink-0 tabular-nums text-fg-primary">
+          {fmtCost(cost)} <span className="text-fg-muted">{Math.round(share)}%</span>
+        </span>
+      </div>
+      <span className="block h-1 overflow-hidden rounded-full bg-surface-4">
+        <span
+          className="block h-full rounded-full bg-accent-solid"
+          style={{ width: `${Math.min(100, share)}%` }}
+        />
+      </span>
+    </li>
+  );
+}

client/src/components/users/UserEditDialog.tsx

@@ -2,10 +2,13 @@
  * @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 — someone else's
+ * account — and, for an admin, whether they own the host's Linux account, so
+ * its sessions outside every workspace are billed to them), a new password (typed or generated, copyable — someone else's
  * may be anything and makes them choose their own at next sign-in; your own
  * must pass every rule of `lib/passwordRules.ts`), the workspaces the
- * account owns (remove, add from every workspace), and "sign out everywhere".
+ * account owns (remove, add from every workspace), its spend quota (the
+ * default, no limit, or its own dollars per day / 5 h — `UserQuota.tsx`), 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
@@ -17,16 +20,25 @@ import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNod
 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 {
+  api,
+  type AuthUser,
+  type ServerUserUsage,
+  type UserPatch,
+  type UserQuota,
+  type UserQuotaSetting,
+} 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 { passwordProblems } from "../../lib/passwordRules";
 import { PasswordRules } from "./PasswordRules";
+import { UserAvatar } from "./UserAvatar";
 import { useDialog } from "../../hooks/useDialog";
 import { Switch } from "../Switch";
 import { Checkbox } from "../Checkbox";
+import { QuotaFields, parseLimit, useQuotaLabel, type QuotaPeriod } from "./UserQuota";
 
 type Role = AuthUser["role"];
 const ROLES: Role[] = ["admin", "analyst", "developer"];
@@ -55,10 +67,13 @@ export function UserEditDialog({
   user,
   self,
   users,
+  quotaDefault = null,
   onClose,
   onDone,
 }: {
   user: ServerUserUsage;
+  /** The default spend quota, named beside the "Default" choice. */
+  quotaDefault?: UserQuota | null;
   /** The account being edited is the signed-in admin's own. */
   self: boolean;
   users: ServerUserUsage[];
@@ -73,6 +88,7 @@ export function UserEditDialog({
   const [email, setEmail] = useState(user.email ?? "");
   const [role, setRole] = useState<Role>(user.role);
   const [active, setActive] = useState(!user.disabled);
+  const [hostAccount, setHostAccount] = useState(Boolean(user.hostAccount));
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [owned, setOwned] = useState<OwnedWorkspace[] | null>(null);
@@ -81,6 +97,18 @@ export function UserEditDialog({
   const [added, setAdded] = useState<number[]>([]);
   const [pick, setPick] = useState("");
   const [signOut, setSignOut] = useState(false);
+  // Spend quota: absent from an older server, which then gets no quota field.
+  const quotaSetting = user.quotaSetting;
+  const [quotaMode, setQuotaMode] = useState<UserQuotaSetting["mode"]>(
+    quotaSetting?.mode ?? "default"
+  );
+  const [quotaLimit, setQuotaLimit] = useState(
+    quotaSetting?.mode === "custom" ? String(quotaSetting.limit_usd) : ""
+  );
+  const [quotaPeriod, setQuotaPeriod] = useState<QuotaPeriod>(
+    quotaSetting?.mode === "custom" ? quotaSetting.period : (quotaDefault?.period ?? "day")
+  );
+  const quotaLabel = useQuotaLabel();
   const [current, setCurrent] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -113,16 +141,38 @@ export function UserEditDialog({
   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 (role === "admin" && hostAccount !== Boolean(user.hostAccount)) patch.hostAccount = hostAccount;
   if (password) patch.password = password;
   if (added.length) patch.addWorkspaces = added;
   if (removed.size) patch.removeWorkspaces = [...removed];
   if (signOut) patch.signOut = true;
+  const quotaValue = parseLimit(quotaLimit);
+  const quotaBad = quotaMode === "custom" && quotaValue === null;
+  if (quotaSetting && !quotaBad) {
+    const same =
+      quotaMode === quotaSetting.mode &&
+      (quotaMode !== "custom" ||
+        (quotaSetting.mode === "custom" &&
+          quotaSetting.limit_usd === quotaValue &&
+          quotaSetting.period === quotaPeriod));
+    if (!same) {
+      patch.quota =
+        quotaMode === "custom"
+          ? {
+              mode: "custom",
+              limit_usd: quotaValue as number,
+              period: quotaPeriod,
+              tz_offset: new Date().getTimezoneOffset(),
+            }
+          : { mode: quotaMode };
+    }
+  }
   const changed = Object.keys(patch).length > 0;
   // A blank field keeps the password. Someone else's may be anything (they
   // choose their own at next sign-in); your own must pass every rule.
   const weakOwn =
     self && password.length > 0 && passwordProblems(password, user.username).length > 0;
-  const ready = changed && current.length > 0 && !weakOwn && !busy;
+  const ready = changed && current.length > 0 && !weakOwn && !quotaBad && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -197,12 +247,12 @@ export function UserEditDialog({
         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>
+          <UserAvatar
+            name={shown}
+            userId={user.id}
+            avatarAt={user.avatarAt}
+            className="h-10 w-10 text-sm"
+          />
           <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 })}
@@ -317,6 +367,17 @@ export function UserEditDialog({
                 )}
               </div>
             </div>
+            {role === "admin" && (
+              <div className="mt-3">
+                <Checkbox
+                  checked={hostAccount}
+                  onChange={setHostAccount}
+                  label={t("edit.hostAccount")}
+                  labelClassName="text-sm text-fg-secondary"
+                />
+                <p className="ml-6 mt-0.5 text-[11px] text-fg-muted">{t("edit.hostAccountHint")}</p>
+              </div>
+            )}
           </Section>
 
           <Section title={t("edit.password")}>
@@ -479,6 +540,44 @@ export function UserEditDialog({
             )}
           </Section>
 
+          {quotaSetting && (
+            <Section title={t("quota.title")}>
+              <div className="space-y-2" data-testid="user-edit-quota">
+                <select
+                  className="input w-full text-sm"
+                  value={quotaMode}
+                  onChange={(e) => setQuotaMode(e.target.value as UserQuotaSetting["mode"])}
+                  aria-label={t("quota.title")}
+                >
+                  <option value="default">
+                    {quotaDefault
+                      ? t("quota.modes.defaultOf", { quota: quotaLabel(quotaDefault) })
+                      : t("quota.modes.defaultNone")}
+                  </option>
+                  <option value="unlimited">{t("quota.modes.unlimited")}</option>
+                  <option value="custom">{t("quota.modes.custom")}</option>
+                </select>
+                {quotaMode === "custom" && (
+                  <QuotaFields
+                    limit={quotaLimit}
+                    period={quotaPeriod}
+                    onLimit={setQuotaLimit}
+                    onPeriod={setQuotaPeriod}
+                    onKeyDown={onKeyDown}
+                  />
+                )}
+                <span className="block text-[11px] text-fg-muted">
+                  {user.quota
+                    ? t("quota.now", {
+                        spend: fmtCost(user.quota.spend),
+                        limit: quotaLabel(user.quota),
+                      })
+                    : t("quota.enforceHint")}
+                </span>
+              </div>
+            </Section>
+          )}
+
           <Section title={t("edit.sessions")}>
             <Checkbox
               checked={signOut}

client/src/components/users/UserQuota.tsx

@@ -0,0 +1,269 @@
+/**
+ * @file UserQuota.tsx
+ * @description Spend quotas per user on the Users page (server mode;
+ * server/lib/user-quota.js): `QuotaSummary`, a row's "spent / limit per day"
+ * line with its bar — red once used up, with when it opens again;
+ * `QuotaFields`, a limit in dollars and its period (a day from local midnight,
+ * or a sliding 5 hours); and `QuotaDefaultCard`, the default every user
+ * without one of their own gets — an admin edits it with their own password
+ * again (`PUT /api/users/quota-default`), an analyst only reads. A user's own
+ * setting is part of the Edit user form (`UserEditDialog`). A user over their
+ * quota can start no session and their prompts are refused until it resets.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState, type KeyboardEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { Gauge, Pencil } from "lucide-react";
+import { api, type UserQuota, type UserQuotaStatus } from "../../lib/api";
+import { fmtCost, formatDateTime } from "../../lib/format";
+import { isSubmitEnter } from "../../lib/keys";
+import { Checkbox } from "../Checkbox";
+import { ConfirmModal } from "../ConfirmModal";
+import { Meter } from "../health/HostHealth";
+
+export type QuotaPeriod = UserQuota["period"];
+export const QUOTA_PERIODS: QuotaPeriod[] = ["day", "5h"];
+
+/** "$10 / day", "$2.50 / 5 h". */
+export function useQuotaLabel() {
+  const { t } = useTranslation("users");
+  return (q: Pick<UserQuota, "limit_usd" | "period">) =>
+    t(`quota.per.${q.period}`, { limit: fmtCost(q.limit_usd) });
+}
+
+/** A row's quota: spent of the limit, a bar, and when a used-up one opens again. */
+export function QuotaSummary({ quota }: { quota: UserQuotaStatus | null | undefined }) {
+  const { t } = useTranslation("users");
+  const label = useQuotaLabel();
+  if (quota === undefined) return null;
+  if (quota === null) {
+    return <div className="text-[11px] text-fg-muted">{t("quota.none")}</div>;
+  }
+  return (
+    <div
+      className="mt-1 space-y-0.5"
+      data-testid="user-quota"
+      title={
+        quota.exceeded && quota.resetsAt
+          ? t("quota.blockedUntil", { at: formatDateTime(quota.resetsAt) })
+          : undefined
+      }
+    >
+      <div
+        className={`whitespace-nowrap text-[11px] ${quota.exceeded ? "text-status-danger" : "text-fg-muted"}`}
+      >
+        {t("quota.used", { spend: fmtCost(quota.spend), limit: label(quota) })}
+        {quota.source === "default" && <span className="ml-1">{t("quota.defaultTag")}</span>}
+      </div>
+      <Meter value={quota.pct} label={t("quota.title")} />
+    </div>
+  );
+}
+
+/** A dollar limit and its period. `limit` is the raw input text. */
+export function QuotaFields({
+  limit,
+  period,
+  onLimit,
+  onPeriod,
+  onKeyDown,
+  disabled,
+}: {
+  limit: string;
+  period: QuotaPeriod;
+  onLimit: (v: string) => void;
+  onPeriod: (v: QuotaPeriod) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation("users");
+  return (
+    <div className="flex gap-2">
+      <div className="relative w-36">
+        <span className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-sm text-fg-muted">
+          $
+        </span>
+        <input
+          type="number"
+          min={0}
+          step="0.01"
+          inputMode="decimal"
+          className="input w-full pl-6 text-sm tabular-nums"
+          value={limit}
+          disabled={disabled}
+          onChange={(e) => onLimit(e.target.value)}
+          onKeyDown={onKeyDown}
+          aria-label={t("quota.limit")}
+        />
+      </div>
+      <select
+        className="input flex-1 text-sm"
+        value={period}
+        disabled={disabled}
+        onChange={(e) => onPeriod(e.target.value as QuotaPeriod)}
+        aria-label={t("quota.period")}
+      >
+        {QUOTA_PERIODS.map((p) => (
+          <option key={p} value={p}>
+            {t(`quota.periods.${p}`)}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+/** A positive dollar amount from the input text, or null. */
+export function parseLimit(text: string): number | null {
+  const n = Number(text);
+  return text.trim() !== "" && Number.isFinite(n) && n > 0 ? Math.round(n * 100) / 100 : null;
+}
+
+/** The default quota: shown to staff, edited by an admin with their own password. */
+export function QuotaDefaultCard({
+  quotaDefault,
+  isAdmin,
+  onSaved,
+}: {
+  /** `undefined` while loading, null for none. */
+  quotaDefault: UserQuota | null | undefined;
+  isAdmin: boolean;
+  onSaved: (message: string) => void;
+}) {
+  const { t } = useTranslation("users");
+  const label = useQuotaLabel();
+  const [editing, setEditing] = useState(false);
+  return (
+    <section className="card" data-testid="quota-default-card">
+      <div className="flex flex-wrap items-center gap-3 px-5 py-4">
+        <Gauge className="h-4 w-4 text-fg-muted" />
+        <div className="min-w-0 flex-1">
+          <h2 className="text-sm font-semibold text-fg-primary">{t("quota.cardTitle")}</h2>
+          <p className="text-xs text-fg-muted">{t("quota.cardDescription")}</p>
+        </div>
+        <div className="text-sm tabular-nums text-fg-primary" data-testid="quota-default-value">
+          {quotaDefault === undefined
+            ? "…"
+            : quotaDefault
+              ? label(quotaDefault)
+              : t("quota.noDefault")}
+        </div>
+        {isAdmin && quotaDefault !== undefined && (
+          <button type="button" className="btn-ghost text-xs" onClick={() => setEditing(true)}>
+            <Pencil className="h-3.5 w-3.5" /> {t("quota.editDefault")}
+          </button>
+        )}
+      </div>
+      {editing && (
+        <QuotaDefaultDialog
+          current={quotaDefault ?? null}
+          onClose={() => setEditing(false)}
+          onDone={(message) => {
+            setEditing(false);
+            onSaved(message);
+          }}
+        />
+      )}
+    </section>
+  );
+}
+
+function QuotaDefaultDialog({
+  current,
+  onClose,
+  onDone,
+}: {
+  current: UserQuota | null;
+  onClose: () => void;
+  onDone: (message: string) => void;
+}) {
+  const { t } = useTranslation("users");
+  const [on, setOn] = useState(current !== null);
+  const [limit, setLimit] = useState(current ? String(current.limit_usd) : "");
+  const [period, setPeriod] = useState<QuotaPeriod>(current?.period ?? "day");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const value = parseLimit(limit);
+  const ready = password.length > 0 && (!on || value !== null) && !busy;
+
+  const submit = async () => {
+    if (!ready) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.users.setQuotaDefault(
+        on && value !== null
+          ? { limit_usd: value, period, tz_offset: new Date().getTimezoneOffset() }
+          : null,
+        password
+      );
+      onDone(t("quota.defaultSaved"));
+    } 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();
+    }
+  };
+
+  return (
+    <ConfirmModal
+      open
+      title={t("quota.defaultDialog")}
+      confirmLabel={t("save")}
+      cancelLabel={t("common:cancel")}
+      destructive={false}
+      busy={busy}
+      disabled={!ready}
+      onConfirm={() => void submit()}
+      onCancel={onClose}
+    >
+      <div className="mt-3 space-y-3">
+        <Checkbox
+          checked={on}
+          onChange={setOn}
+          label={t("quota.defaultOn")}
+          labelClassName="text-sm text-fg-secondary"
+        />
+        <QuotaFields
+          limit={limit}
+          period={period}
+          onLimit={setLimit}
+          onPeriod={setPeriod}
+          onKeyDown={onKeyDown}
+          disabled={!on}
+        />
+        <p className="text-[11px] text-fg-muted">{t("quota.enforceHint")}</p>
+        <label className="block">
+          <span className="text-xs font-medium text-fg-secondary">{t("yourPassword")}</span>
+          <input
+            type="password"
+            className="input mt-1 w-full text-sm"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyDown={onKeyDown}
+            autoComplete="current-password"
+            aria-label={t("yourPassword")}
+          />
+        </label>
+        {error && (
+          <p role="alert" className="text-xs text-status-danger">
+            {error}
+          </p>
+        )}
+      </div>
+    </ConfirmModal>
+  );
+}

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

@@ -1,19 +1,24 @@
 /**
  * @file AccountPoolCard.test.tsx
- * @description The Users page's account pool card: one tab per AI tool — the
- * Claude, Codex and Cursor pools with their accounts' live panes and quota,
- * Oh My Pi's login sharing, and a "no pool" note for any other installed
- * tool; says what an empty pool means per tool, an
+ * @description The Users page's account pool card: the pools board with every
+ * tool's accounts (live panes and quota) and members per pool, then a tab per
+ * tool with no pool — Oh My Pi's login sharing, and a "no pool" note for any
+ * other installed tool; 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. An account's Edit ticks the users who run on
  * it, saved with the admin's own password; the users show on the account.
+ * The board moves members and accounts between pools (drag, or a column's
+ * menu) — an account sits in one pool, so a move takes it out of the other —
+ * splits an account off onto New pool, merges a pool by dragging its only
+ * account into another, adds a saved profile to a pool, shows each account's
+ * plan, and saves every change with ONE 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 { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter } from "react-router-dom";
 import type { AccountPool } from "../../../lib/api";
@@ -28,7 +33,7 @@ const accountPool = vi.hoisted(() => ({
   updateGroup: vi.fn(),
   deleteGroup: vi.fn(),
 }));
-const users = vi.hoisted(() => ({ list: vi.fn() }));
+const users = vi.hoisted(() => ({ list: vi.fn(), avatarUrl: () => null }));
 const aiTools = vi.hoisted(() => ({
   list: vi.fn(),
   ompSharing: vi.fn(),
@@ -129,6 +134,28 @@ const OMP = {
   gateway: { running: false },
 };
 
+/** The account names a pool column holds (its move menu names others too). */
+const held = (col: HTMLElement) =>
+  within(col)
+    .queryAllByTestId("pool-group-account")
+    .map((c) => within(c).queryByText(/^(team|cx)-\d$/)?.textContent);
+
+/** A drag-and-drop between two elements, through one shared DataTransfer. */
+function drag(from: Element, to: Element) {
+  const store: Record<string, string> = {};
+  const dataTransfer = {
+    setData: (k: string, v: string) => (store[k] = v),
+    getData: (k: string) => store[k] ?? "",
+    get types() {
+      return Object.keys(store);
+    },
+    effectAllowed: "",
+  };
+  fireEvent.dragStart(from, { dataTransfer });
+  fireEvent.dragOver(to, { dataTransfer });
+  fireEvent.drop(to, { dataTransfer });
+}
+
 beforeEach(() => {
   for (const fn of Object.values(accountPool)) fn.mockReset();
   aiTools.list.mockResolvedValue({
@@ -147,8 +174,8 @@ beforeEach(() => {
   accountPool.list.mockResolvedValue(POOL);
   users.list.mockResolvedValue({
     users: [
-      { id: 7, username: "mia", disabled: false },
-      { id: 8, username: "leo", disabled: false },
+      { id: 7, username: "mia", role: "developer", disabled: false },
+      { id: 8, username: "leo", role: "analyst", disabled: false },
     ],
   });
   accountPool.profiles.mockResolvedValue({
@@ -166,11 +193,15 @@ beforeEach(() => {
 });
 
 describe("AccountPoolCard", () => {
-  it("shows each tool's pool on its own tab, counted, and explains an empty one", async () => {
+  it("shows every tool's accounts on the board, and a tab per tool with no pool", async () => {
     const user = userEvent.setup();
-    const { unmount } = render(card(false));
+    render(card(false));
     expect(await screen.findByText("team-1")).toBeInTheDocument();
-    expect(screen.queryByText("cx-1")).toBeNull();
+    // With no pool made yet, every account sits in the shared pool, by tool.
+    const shared = screen.getByTestId("pool-shared");
+    expect(shared).toHaveTextContent("Claude Code2");
+    expect(shared).toHaveTextContent("Codex1");
+    expect(shared).toHaveTextContent("cx-1");
     const [account, second] = screen.getAllByTestId("pool-account");
     // Every account of the pool has its card; quota is shown as what is LEFT.
     expect(second).toHaveTextContent("team-2");
@@ -188,39 +219,25 @@ describe("AccountPoolCard", () => {
     expect(account).toHaveTextContent("$12.00 · 3.4M tokens in 7 days");
     expect(account).toHaveTextContent("2 live");
     expect(screen.getByText("team1@example.com")).toBeInTheDocument();
-    // Without groups nothing is said about them on an account.
-    expect(screen.queryByText("Shared pool")).toBeNull();
-    expect(screen.queryByRole("button", { name: /^add/i })).toBeNull();
+    // An analyst reads: no add, remove or new pool.
+    expect(screen.queryByTestId("pool-add-account")).toBeNull();
     expect(screen.queryByRole("button", { name: /remove/i })).toBeNull();
-    const codexTab = screen.getByRole("tab", { name: /Codex/ });
-    expect(codexTab).toHaveTextContent("1");
-    expect(screen.getByRole("tab", { name: /Claude Code/ })).toHaveTextContent("2");
-    await user.click(codexTab);
-    expect(screen.getByText("cx-1")).toBeInTheDocument();
-    expect(screen.queryByText("team-1")).toBeNull();
-    // A pool with no account still has its tab, with what that means.
-    await user.click(screen.getByRole("tab", { name: /Cursor CLI/ }));
-    expect(screen.getByText(/No Cursor CLI accounts yet/)).toBeInTheDocument();
-    // An installed tool without a pool says so; an uninstalled one gets no tab.
+    expect(screen.queryByRole("button", { name: "New pool" })).toBeNull();
+    // Pool tools have no tab any more; an installed tool without a pool does.
+    expect(screen.queryByRole("tab", { name: /Codex/ })).toBeNull();
     await user.click(screen.getByRole("tab", { name: /Antigravity/ }));
     expect(screen.getByText("Antigravity has no account pool")).toBeInTheDocument();
     expect(screen.getByText(/system keyring/)).toBeInTheDocument();
     expect(screen.queryByRole("tab", { name: /Goose/ })).toBeNull();
-    unmount();
-    accountPool.list.mockResolvedValue({ accounts: [], codex: [], blockPercent: 90 });
-    render(card(true));
-    expect(await screen.findByText(/No Claude Code accounts yet/)).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Add Claude Code account" })).toBeInTheDocument();
   });
 
-  it("adds a Cursor API key from the Cursor tab", async () => {
+  it("adds a Cursor API key from Add account", async () => {
     accountPool.add.mockResolvedValue({ account: { name: "cu-1" } });
     accountPool.list.mockResolvedValue({ ...POOL, cursor: [] });
     const user = userEvent.setup();
     render(card(true));
     await screen.findByText("team-1");
-    await user.click(screen.getByRole("tab", { name: /Cursor CLI/ }));
-    await user.click(screen.getByRole("button", { name: "Add Cursor CLI account" }));
+    await user.selectOptions(screen.getByTestId("pool-add-account"), "cursor");
     const dialog = await screen.findByRole("dialog");
     expect(screen.queryByLabelText("From")).toBeNull();
     await user.type(screen.getByLabelText("Name"), "cu-1");
@@ -238,27 +255,7 @@ describe("AccountPoolCard", () => {
     expect(accountPool.profiles).not.toHaveBeenCalledWith("cursor");
   });
 
-  it("shares a saved profile from its card", async () => {
-    accountPool.add.mockResolvedValue({ account: { name: "work" } });
-    const user = userEvent.setup();
-    render(card(true));
-    await screen.findByText("team-1");
-    await user.click(await screen.findByRole("button", { name: "Share Work to the pool" }));
-    const dialog = await screen.findByRole("dialog");
-    await waitFor(() => expect(screen.getByLabelText("Profile")).toHaveValue("work"));
-    await user.type(screen.getByLabelText("Your password"), "boss-pass");
-    await user.click(
-      Array.from(dialog.querySelectorAll("button")).find((b) => b.textContent === "Add account")!
-    );
-    await waitFor(() =>
-      expect(accountPool.add).toHaveBeenCalledWith(
-        { tool: "claude", name: "work", profile: "work" },
-        "boss-pass"
-      )
-    );
-  });
-
-  it("shows the groups as cards and saves a new one with members and accounts", async () => {
+  it("builds pools on the board: members, accounts and profiles moved in, one password", async () => {
     accountPool.list.mockResolvedValue({
       ...POOL,
       groups: [
@@ -272,28 +269,180 @@ describe("AccountPoolCard", () => {
     });
     accountPool.createGroup.mockResolvedValue({ group: { id: 2, name: "Team B" } });
     accountPool.updateGroup.mockResolvedValue({ group: {} });
+    accountPool.add.mockResolvedValue({ account: { name: "work" } });
     const user = userEvent.setup();
     render(card(true));
-    const groupCard = await screen.findByTestId("pool-group");
-    expect(groupCard).toHaveTextContent("Team A");
-    expect(groupCard).toHaveTextContent("leo");
-    expect(screen.getAllByTestId("pool-account")[0]).toHaveTextContent("Team A");
-    await user.click(screen.getByRole("button", { name: "New group" }));
-    await screen.findByRole("dialog");
-    await user.type(screen.getByLabelText("Group name"), "Team B");
-    await user.click(await screen.findByRole("checkbox", { name: /leo/ }));
-    expect(screen.getByText("now in Team A")).toBeInTheDocument();
-    await user.click(screen.getByRole("checkbox", { name: "cx-1" }));
-    await user.type(screen.getByLabelText("Your password"), "boss-pass");
-    await user.click(screen.getByRole("button", { name: "Save" }));
+    const teamA = await screen.findByTestId("pool-group");
+    expect(teamA).toHaveTextContent("leo");
+    expect(teamA).toHaveTextContent("team-1");
+    await screen.findByText("mia");
+
+    await user.click(screen.getByRole("button", { name: "New pool" }));
+    const names = screen.getAllByLabelText("Pool name");
+    await user.type(names[names.length - 1]!, "Team B");
+    const teamB = screen.getAllByTestId("pool-group")[1]!;
+    drag(screen.getByText("mia").closest("[data-testid=pool-member]")!, teamB);
+    expect(teamB).toHaveTextContent("mia");
+    const add = within(teamB).getByLabelText("Move an account into Team B");
+    await user.selectOptions(add, "codex|cx-1");
+    await user.selectOptions(add, "claude|profile:work");
+    expect(held(screen.getByTestId("pool-shared"))).not.toContain("cx-1");
+    expect(screen.getByTestId("pool-board-save")).toHaveTextContent("2 unsaved changes");
+    expect(accountPool.updateGroup).not.toHaveBeenCalled();
+
+    await user.click(
+      within(screen.getByTestId("pool-board-save")).getByRole("button", { name: "Save" })
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveTextContent("Move the saved profile Work into the pool");
+    await user.type(within(dialog).getByLabelText("Your password"), "boss-pass");
+    await user.click(within(dialog).getByRole("button", { name: "Save" }));
     await waitFor(() =>
       expect(accountPool.updateGroup).toHaveBeenCalledWith(
         2,
-        { userIds: [8], accounts: { claude: [], codex: ["cx-1"], cursor: [] } },
+        { userIds: [7], accounts: { claude: ["work"], codex: ["cx-1"], cursor: [] } },
         "boss-pass"
       )
     );
+    expect(accountPool.add).toHaveBeenCalledWith(
+      { tool: "claude", name: "work", profile: "work" },
+      "boss-pass"
+    );
     expect(accountPool.createGroup).toHaveBeenCalledWith("Team B", "boss-pass");
+    // Team A did not change: nothing is sent for it.
+    expect(accountPool.updateGroup).toHaveBeenCalledTimes(1);
+  });
+
+  it("drags accounts between pools — one pool each — and a member back to the shared pool", async () => {
+    accountPool.list.mockResolvedValue({
+      ...POOL,
+      groups: [
+        {
+          id: 1,
+          name: "Team A",
+          users: [{ userId: 8, username: "leo" }],
+          accounts: { claude: ["team-1"], codex: [], cursor: [] },
+        },
+      ],
+    });
+    accountPool.updateGroup.mockResolvedValue({ group: {} });
+    const user = userEvent.setup();
+    render(card(true));
+    const teamA = await screen.findByTestId("pool-group");
+    const shared = screen.getByTestId("pool-shared");
+    const item = (col: HTMLElement, name: string) =>
+      within(col)
+        .getAllByTestId("pool-group-account")
+        .find((c) => c.textContent?.includes(name))!;
+    drag(item(shared, "team-2"), teamA);
+    expect(held(teamA)).toEqual(["team-1", "team-2"]);
+    // And back again: an account is in one pool, so it leaves the other.
+    drag(item(teamA, "team-1"), shared);
+    expect(held(teamA)).toEqual(["team-2"]);
+    expect(held(shared)).toContain("team-1");
+    expect(teamA).toHaveTextContent("team-2");
+    await user.click(
+      within(teamA).getByRole("button", { name: "Send leo back to the shared pool" })
+    );
+    expect(shared).toHaveTextContent("leo");
+    await user.click(
+      within(screen.getByTestId("pool-board-save")).getByRole("button", { name: "Save" })
+    );
+    const dialog = await screen.findByRole("dialog");
+    await user.type(within(dialog).getByLabelText("Your password"), "boss-pass");
+    await user.click(within(dialog).getByRole("button", { name: "Save" }));
+    await waitFor(() =>
+      expect(accountPool.updateGroup).toHaveBeenCalledWith(
+        1,
+        {
+          name: "Team A",
+          userIds: [],
+          accounts: { claude: ["team-2"], codex: [], cursor: [] },
+        },
+        "boss-pass"
+      )
+    );
+  });
+
+  it("shows each account's plan on its card", async () => {
+    accountPool.list.mockResolvedValue({
+      ...POOL,
+      accounts: [{ ...POOL.accounts[0]!, plan: "Max 5x" }, POOL.accounts[1]!],
+    });
+    render(card(false));
+    const [first, second] = await screen.findAllByTestId("pool-account");
+    expect(within(first!).getByTestId("pool-account-plan")).toHaveTextContent("Max 5x");
+    expect(within(second!).queryByTestId("pool-account-plan")).toBeNull();
+  });
+
+  it("splits an account off onto New pool, and merges a pool by its only account", async () => {
+    accountPool.list.mockResolvedValue({
+      ...POOL,
+      groups: [
+        {
+          id: 1,
+          name: "Team A",
+          users: [{ userId: 8, username: "leo" }],
+          accounts: { claude: ["team-1"], codex: [], cursor: [] },
+        },
+        {
+          id: 2,
+          name: "Team B",
+          users: [{ userId: 7, username: "mia" }],
+          accounts: { claude: [], codex: ["cx-1"], cursor: [] },
+        },
+      ],
+    });
+    accountPool.createGroup.mockResolvedValue({ group: { id: 3, name: "Solo" } });
+    accountPool.updateGroup.mockResolvedValue({ group: {} });
+    accountPool.deleteGroup.mockResolvedValue({ ok: true });
+    const user = userEvent.setup();
+    render(card(true));
+    const [teamA, teamB] = await screen.findAllByTestId("pool-group");
+    await screen.findByText("mia");
+    const item = (col: HTMLElement, name: string) =>
+      within(col)
+        .getAllByTestId("pool-group-account")
+        .find((c) => c.textContent?.includes(name))!;
+    // Split: team-2 leaves the shared pool for a new pool of its own.
+    drag(item(screen.getByTestId("pool-shared"), "team-2"), screen.getByTestId("pool-new"));
+    const pools = screen.getAllByTestId("pool-group");
+    expect(pools).toHaveLength(3);
+    expect(held(pools[2]!)).toEqual(["team-2"]);
+    await user.type(within(pools[2]!).getByLabelText("Pool name"), "Solo");
+    // Merge: Team B's only account into Team A brings mia along; Team B goes.
+    drag(item(teamB!, "cx-1"), teamA!);
+    expect(screen.getAllByTestId("pool-group")).toHaveLength(2);
+    expect(held(teamA!)).toEqual(["team-1", "cx-1"]);
+    expect(teamA).toHaveTextContent("mia");
+
+    await user.click(
+      within(screen.getByTestId("pool-board-save")).getByRole("button", { name: "Save" })
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveTextContent("Merge Team B into Team A: pool Team B is deleted");
+    await user.type(within(dialog).getByLabelText("Your password"), "boss-pass");
+    await user.click(within(dialog).getByRole("button", { name: "Save" }));
+    await waitFor(() => expect(accountPool.deleteGroup).toHaveBeenCalledWith(2, "boss-pass"));
+    expect(accountPool.updateGroup).toHaveBeenCalledWith(
+      1,
+      {
+        name: "Team A",
+        userIds: [8, 7],
+        accounts: { claude: ["team-1"], codex: ["cx-1"], cursor: [] },
+      },
+      "boss-pass"
+    );
+    expect(accountPool.createGroup).toHaveBeenCalledWith("Solo", "boss-pass");
+    expect(accountPool.updateGroup).toHaveBeenCalledWith(
+      3,
+      { userIds: [], accounts: { claude: ["team-2"], codex: [], cursor: [] } },
+      "boss-pass"
+    );
+    // The members moved before the emptied pool was deleted.
+    const order = (fn: { mock: { invocationCallOrder: number[] } }) =>
+      fn.mock.invocationCallOrder[0]!;
+    expect(order(accountPool.updateGroup)).toBeLessThan(order(accountPool.deleteGroup));
   });
 
   it("turns Oh My Pi login sharing on from its tab", async () => {
@@ -312,7 +461,7 @@ describe("AccountPoolCard", () => {
     const user = userEvent.setup();
     render(card(true));
     await screen.findByText("team-1");
-    await user.click(screen.getByRole("button", { name: "Add Claude Code account" }));
+    await user.selectOptions(screen.getByTestId("pool-add-account"), "claude");
     const dialog = await screen.findByRole("dialog");
     const select = await screen.findByLabelText("Profile");
     await waitFor(() => expect(screen.getByRole("option", { name: /Work/ })).toBeInTheDocument());
@@ -337,7 +486,7 @@ describe("AccountPoolCard", () => {
     const user = userEvent.setup();
     render(card(true));
     await screen.findByText("team-1");
-    await user.click(screen.getByRole("button", { name: "Add Claude Code account" }));
+    await user.selectOptions(screen.getByTestId("pool-add-account"), "claude");
     const dialog = await screen.findByRole("dialog");
     await user.selectOptions(screen.getByLabelText("From"), "token");
     await user.type(screen.getByLabelText("Name"), "team-2");
@@ -362,7 +511,6 @@ describe("AccountPoolCard", () => {
     const user = userEvent.setup();
     render(card(true));
     await screen.findByText("team-1");
-    await user.click(screen.getByRole("tab", { name: /Codex/ }));
     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" }));
@@ -425,7 +573,6 @@ describe("AccountPoolCard", () => {
     render(card(true, "/admin?poolAdd=codex&poolProfile=cx"));
     const dialog = await screen.findByRole("dialog");
     await waitFor(() => expect(accountPool.profiles).toHaveBeenCalledWith("codex"));
-    expect(screen.getByRole("tab", { name: /Codex/ })).toHaveAttribute("aria-selected", "true");
     await waitFor(() => expect(screen.getByLabelText("Profile")).toHaveValue("cx"));
     await user.type(screen.getByLabelText("Your password"), "boss-pass");
     const confirm = Array.from(dialog.querySelectorAll("button")).find(

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

@@ -1,18 +1,20 @@
 /**
- * @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.
+ * @file MemberTmux.test.tsx
+ * @description Each member's tmux server as part of the users table
+ * (`MemberTmux.tsx`): the bar above the table is hidden without one Linux
+ * user per account, names the installed tmux and warns until tmux-member is
+ * installed; a row's cell shows the version with a badge when it is older than
+ * the installed tmux, and "—" for a member with no server; an admin restarts
+ * one member — or every idle outdated one, the working member left out — only
+ * with their own password typed; an analyst gets no "Restart idle".
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
+import { useState } from "react";
 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";
+import type { MemberTmux, MemberTmuxRow } from "../../../lib/api";
 
 const users = vi.hoisted(() => ({
   tmux: vi.fn(),
@@ -25,7 +27,41 @@ vi.mock("../../../lib/api", async (importOriginal) => {
 });
 vi.mock("../../../lib/toast", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
 
-import { MemberTmuxCard } from "../MemberTmuxCard";
+import { MemberTmuxBar, TmuxCell, TmuxRestartDialog, useMemberTmux } from "../MemberTmux";
+
+/** The users table's use of it, reduced: the bar, one cell and restart per row. */
+function Harness({ isAdmin }: { isAdmin: boolean }) {
+  const { data, reload } = useMemberTmux();
+  const [target, setTarget] = useState<MemberTmuxRow | "idle" | null>(null);
+  return (
+    <>
+      <MemberTmuxBar data={data} isAdmin={isAdmin} onRestart={setTarget} />
+      {data?.available &&
+        data.users.map((u) => (
+          <div key={u.id} data-testid={`row-${u.username}`}>
+            <span>{u.username}</span>
+            <TmuxCell row={u} />
+            {isAdmin && u.running && (
+              <button type="button" onClick={() => setTarget(u)}>
+                Restart {u.username}'s tmux
+              </button>
+            )}
+          </div>
+        ))}
+      {target && (
+        <TmuxRestartDialog
+          target={target}
+          data={data}
+          onClose={() => setTarget(null)}
+          onDone={() => {
+            setTarget(null);
+            void reload();
+          }}
+        />
+      )}
+    </>
+  );
+}
 
 const DATA: MemberTmux = {
   available: true,
@@ -52,33 +88,33 @@ beforeEach(() => {
   users.tmux.mockResolvedValue(DATA);
 });
 
-describe("MemberTmuxCard", () => {
-  it("renders nothing without one Linux user per account", async () => {
+describe("MemberTmux", () => {
+  it("shows no bar without one Linux user per account", async () => {
     users.tmux.mockResolvedValue({ available: false, users: [] });
-    const { container } = render(<MemberTmuxCard isAdmin />);
+    render(<Harness isAdmin />);
     await waitFor(() => expect(users.tmux).toHaveBeenCalled());
-    expect(container).toBeEmptyDOMElement();
+    expect(screen.queryByTestId("member-tmux")).toBeNull();
   });
 
-  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();
+  it("marks the servers older than the installed tmux, and a member with none", async () => {
+    render(<Harness isAdmin={false} />);
+    expect(await screen.findByText(/Installed: tmux 3\.8/)).toBeInTheDocument();
     expect(screen.getAllByText("older than installed")).toHaveLength(2);
-    expect(screen.getByText(/Installed: tmux 3\.8/)).toBeInTheDocument();
+    expect(screen.getByTestId("row-mia").textContent).toContain("2 sessions");
+    expect(screen.getByTestId("row-bob").textContent).toContain("—");
     // 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 />);
+    render(<Harness 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 />);
+    render(<Harness 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" });
@@ -90,7 +126,7 @@ describe("MemberTmuxCard", () => {
 
   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 />);
+    render(<Harness 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");

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

@@ -13,7 +13,12 @@ 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 users = vi.hoisted(() => ({
+  get: vi.fn(),
+  update: vi.fn(),
+  remove: vi.fn(),
+  avatarUrl: () => null,
+}));
 const confirmDialog = vi.hoisted(() => vi.fn());
 vi.mock("../../../lib/confirm", () => ({ confirmDialog }));
 const lanes = vi.hoisted(() => ({ list: vi.fn() }));

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

@@ -0,0 +1,158 @@
+/**
+ * @file UserQuota.test.tsx
+ * @description Spend quotas on the Users page: a row's "spent of limit" line
+ * (red once used up, "(default)" when it is the default), the default quota
+ * card (an admin edits it with their own password, an analyst only reads),
+ * and the Edit user form sending a user's own quota as part of its ONE PATCH.
+ * @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(() => ({
+  setQuotaDefault: vi.fn(),
+  update: vi.fn(),
+  get: vi.fn(),
+  avatarUrl: () => null,
+}));
+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 { QuotaDefaultCard, QuotaSummary } from "../UserQuota";
+import { UserEditDialog } from "../UserEditDialog";
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  users.setQuotaDefault.mockResolvedValue({ user: {}, quotaDefault: null });
+  users.update.mockResolvedValue({ user: {} });
+  users.get.mockResolvedValue({ user: {}, workspaces: [] });
+  lanes.list.mockResolvedValue({ lanes: [] });
+});
+
+describe("QuotaSummary", () => {
+  it("shows spent of the limit, red and marked default once used up", () => {
+    render(
+      <QuotaSummary
+        quota={{
+          limit_usd: 10,
+          period: "day",
+          source: "default",
+          spend: 12.5,
+          pct: 125,
+          exceeded: true,
+          resetsAt: "2026-10-29T17:00:00.000Z",
+          since: "2026-10-28T17:00:00.000Z",
+        }}
+      />
+    );
+    const line = screen.getByText(/of \$10\.00 \/ day/);
+    expect(line.textContent).toContain("$12.50");
+    expect(line.textContent).toContain("(default)");
+    expect(line.className).toContain("text-status-danger");
+    expect(screen.getByRole("meter")).toHaveAttribute("aria-valuenow", "100");
+  });
+
+  it("says No quota without one, and nothing for an older server", () => {
+    const { container, rerender } = render(<QuotaSummary quota={null} />);
+    expect(screen.getByText("No quota")).toBeInTheDocument();
+    rerender(<QuotaSummary quota={undefined} />);
+    expect(container.textContent).toBe("");
+  });
+});
+
+describe("QuotaDefaultCard", () => {
+  it("an admin sets the default with their own password", async () => {
+    const user = userEvent.setup();
+    const onSaved = vi.fn();
+    render(<QuotaDefaultCard quotaDefault={null} isAdmin onSaved={onSaved} />);
+    expect(screen.getByTestId("quota-default-value").textContent).toBe("No default — no limit");
+    await user.click(screen.getByRole("button", { name: /Edit/ }));
+    await user.click(screen.getByRole("checkbox", { name: "Limit what each user may spend" }));
+    await user.type(screen.getByLabelText("Limit in dollars"), "25");
+    await user.selectOptions(screen.getByLabelText("Period"), "5h");
+    const save = screen.getByRole("button", { name: "Save" });
+    expect(save).toBeDisabled(); // no password yet
+    await user.type(screen.getByLabelText("Your password"), "pw");
+    await user.click(save);
+    await waitFor(() => expect(onSaved).toHaveBeenCalled());
+    expect(users.setQuotaDefault).toHaveBeenCalledWith(
+      expect.objectContaining({ limit_usd: 25, period: "5h" }),
+      "pw"
+    );
+  });
+
+  it("an analyst only reads it", () => {
+    render(
+      <QuotaDefaultCard
+        quotaDefault={{ limit_usd: 5, period: "day" }}
+        isAdmin={false}
+        onSaved={() => {}}
+      />
+    );
+    expect(screen.getByTestId("quota-default-value").textContent).toBe("$5.00 / day");
+    expect(screen.queryByRole("button", { name: /Edit/ })).toBeNull();
+  });
+});
+
+describe("UserEditDialog quota", () => {
+  const mia: ServerUserUsage = {
+    id: 7,
+    username: "mia",
+    role: "developer",
+    disabled: false,
+    workspaces: 0,
+    sessions: 0,
+    last7d: { cost: 0, tokens: 0 },
+    last30d: { cost: 0, tokens: 0 },
+    quotaSetting: { mode: "default" },
+    quota: null,
+  } as ServerUserUsage;
+
+  it("sends the user's own limit in the one PATCH", async () => {
+    const user = userEvent.setup();
+    const onDone = vi.fn();
+    render(
+      <UserEditDialog
+        user={mia}
+        self={false}
+        users={[mia]}
+        quotaDefault={{ limit_usd: 10, period: "day" }}
+        onClose={() => {}}
+        onDone={onDone}
+      />
+    );
+    const select = screen.getByLabelText("Spend quota");
+    expect(screen.getByRole("option", { name: "Default ($10.00 / day)" })).toBeInTheDocument();
+    await user.selectOptions(select, "custom");
+    await user.type(screen.getByLabelText("Limit in dollars"), "40");
+    await user.type(screen.getByLabelText("Your password"), "pw");
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() => expect(onDone).toHaveBeenCalled());
+    expect(users.update).toHaveBeenCalledWith(
+      7,
+      { quota: expect.objectContaining({ mode: "custom", limit_usd: 40, period: "day" }) },
+      "pw"
+    );
+  });
+
+  it("No limit is a change; an empty custom limit keeps Save off", async () => {
+    const user = userEvent.setup();
+    render(
+      <UserEditDialog user={mia} self={false} users={[mia]} onClose={() => {}} onDone={() => {}} />
+    );
+    await user.type(screen.getByLabelText("Your password"), "pw");
+    await user.selectOptions(screen.getByLabelText("Spend quota"), "custom");
+    expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
+    await user.selectOptions(screen.getByLabelText("Spend quota"), "unlimited");
+    await user.click(screen.getByRole("button", { name: "Save" }));
+    await waitFor(() =>
+      expect(users.update).toHaveBeenCalledWith(7, { quota: { mode: "unlimited" } }, "pw")
+    );
+  });
+});

client/src/hooks/useCcTarget.ts

@@ -0,0 +1,41 @@
+/**
+ * @file useCcTarget — whose Claude Code config the Config Explorer manages for
+ * this login (GET /api/cc-config/target). Local mode and an admin: the host's,
+ * answered at once without a request (nothing changes for them). A non-admin
+ * in server mode asks the server: `own` when they have their own Linux account
+ * (S3) — Settings then shows "Your Claude Code config" — else `none` and the
+ * page stays hidden. The server's refusal (403 ENOACCOUNT/EADMIN) is the rule;
+ * this only hides what would be refused.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { api, type CcTarget } from "../lib/api";
+import { usePermissions } from "../components/AuthGate";
+
+const HOST: CcTarget = { kind: "host", readOnly: false, claudeHome: null };
+
+/** `null` while a non-admin's answer is on its way. */
+export function useCcTarget(): CcTarget | null {
+  const { isAdmin } = usePermissions();
+  const [target, setTarget] = useState<CcTarget | null>(isAdmin ? HOST : null);
+  useEffect(() => {
+    if (isAdmin) {
+      setTarget(HOST);
+      return;
+    }
+    let live = true;
+    api.ccConfig
+      .target()
+      .then((t) => {
+        if (live) setTarget(t);
+      })
+      .catch(() => {
+        if (live) setTarget({ kind: "none", readOnly: true, claudeHome: null });
+      });
+    return () => {
+      live = false;
+    };
+  }, [isAdmin]);
+  return target;
+}

client/src/hooks/useDialog.ts

@@ -27,9 +27,9 @@ const FOCUSABLE =
  */
 export function useDialog(
   open: boolean,
-  panelRef: RefObject<HTMLElement>,
+  panelRef: RefObject<HTMLElement | null>,
   onClose?: () => void,
-  initialFocus?: RefObject<HTMLElement>
+  initialFocus?: RefObject<HTMLElement | null>
 ): void {
   // Read through a ref so an inline `onClose` does not re-run the effect, which
   // would steal focus back to the first control on every parent render.

client/src/hooks/useWebSocket.ts

@@ -63,7 +63,7 @@ type MessageHandler = (msg: WSMessage) => void;
  * auto-reconnects with capped exponential backoff on close - plus an
  * immediate reconnect attempt on tab focus/network-online/visibility-change
  * so the socket recovers quickly after a server restart or laptop sleep.
- * Guards against React 18 StrictMode's mount→cleanup→remount cycle opening a
+ * Guards against React StrictMode's mount→cleanup→remount cycle opening a
  * duplicate socket (see the inline comment in `connect`).
  * @param onMessage Called with every message parsed from the socket; the
  *   latest reference is used even across reconnects (no stale closures).
@@ -73,7 +73,7 @@ export function useWebSocket(onMessage: MessageHandler) {
   const wsRef = useRef<WebSocket | null>(null);
   const handlersRef = useRef<MessageHandler>(onMessage);
   const [connected, setConnected] = useState(false);
-  const reconnectTimer = useRef<ReturnType<typeof setTimeout>>();
+  const reconnectTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const mountedRef = useRef(true);
   const reconnectAttempts = useRef(0);
 
@@ -82,7 +82,7 @@ export function useWebSocket(onMessage: MessageHandler) {
   const connect = useCallback(() => {
     if (!mountedRef.current) return;
     // Don't open a second socket if one is already alive or in flight.
-    // Without this, React 18 StrictMode (mount → cleanup → remount in dev)
+    // Without this, React StrictMode (mount → cleanup → remount in dev)
     // and the close→reconnect race could leave two sockets connected at the
     // same time. Both would receive every server broadcast, producing
     // duplicate stream_event deltas (doubled text, duplicate assistant

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

@@ -1,37 +1,4 @@
 {
   "title": "Administration",
-  "description": "Accounts and the server AgentHub runs on.",
-  "tabs": {
-    "users": "Users",
-    "server": "Server"
-  },
-  "server": {
-    "title": "Server",
-    "uptime": "up {{v}}",
-    "uptimeDays": "{{d}} d {{h}} h",
-    "uptimeHours": "{{h}} h {{m}} min",
-    "cpu": "CPU",
-    "cores": "{{n}} cores · load {{load}}",
-    "cpuHelp": "Share of the whole machine: 100% means every core is busy.",
-    "memory": "Memory",
-    "swap": "Swap",
-    "homesDisk": "Homes disk",
-    "homesDiskHelp": "The disk that holds the users' home folders.",
-    "free": "free",
-    "usageTitle": "Usage by user",
-    "usageHelp": "Live, sampled over {{s}} s. A process counts for a user when it runs as their Linux account or inside one of their workspaces' sessions. Memory is resident (RSS); shared pages count once per process. Click a row for its busiest processes.",
-    "usageUnavailable": "Per-user usage is read from /proc and is only available on Linux.",
-    "who": "User",
-    "processes": "Processes",
-    "home": "Home",
-    "sampling": "Sampling…",
-    "hostGroup": "Host account (AgentHub and other host processes)",
-    "systemGroup": "System (root and other accounts)",
-    "disks": "Disks",
-    "mount": "Mount",
-    "device": "Device",
-    "used": "Used",
-    "homesBadge": "homes",
-    "gpus": "GPUs"
-  }
+  "description": "Accounts and the server AgentHub runs on."
 }

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

@@ -34,7 +34,6 @@
   "download": "Download",
   "noPreview": "This file type cannot be shown here — download it to open it.",
   "install": "Install",
-  "installs": "{{count}} installs",
   "installed": "Installed to {{path}}",
   "installedPlugin": "Installed {{name}} — start a new session (or /reload-plugins) to use it",
   "rename": "Edit",
@@ -197,5 +196,32 @@
   "unowned.claimed": "Added to your library",
   "unowned.declined": "Removed from your list",
   "unowned.assigned": "Owner assigned",
-  "unowned.empty": "Nothing without an owner."
+  "unowned.empty": "Nothing without an owner.",
+  "installs_one": "{{count}} install",
+  "installs_other": "{{count}} installs",
+  "private": "Private",
+  "privateHint": "Not shared: only you (and admins) see it. Share puts it in the Hub.",
+  "showMore": "Show {{count}} more",
+  "view.label": "Layout",
+  "view.list": "List view",
+  "view.grid": "Grid view",
+  "pack.title": "{{prefix}}-* pack",
+  "pack.count_one": "{{count}} skill",
+  "pack.count_other": "{{count}} skills",
+  "pack.installAll": "Install all",
+  "pack.installRest": "Install {{count}} more",
+  "pack.installTitle": "Install {{count}} skills of {{prefix}}-*?",
+  "pack.installBody": "Each one is written into your own account. A skill you already have under the same name is left as it is:",
+  "pack.installed": "Installed {{ok}} · already there {{skipped}} · failed {{failed}}",
+  "section.unshared": "Not shared by their owners",
+  "section.unsharedHint": "Other users' private items — only admins see these",
+  "update": "Update",
+  "updateHint": "Its owner changed it since you installed it",
+  "updateTitle": "Update “{{title}}”?",
+  "updateBody": "Your copy of {{name}} is replaced by the newest version. The current one is moved to ~/.claude/agenthub-replaced-skills/, not deleted.",
+  "updated": "Updated {{name}}",
+  "pack.updateN": "Update {{count}}",
+  "pack.updateTitle": "Update {{count}} skills of {{prefix}}-*?",
+  "pack.updateBody": "Each copy is replaced by the newest version; the current ones are moved to ~/.claude/agenthub-replaced-skills/:",
+  "pack.updated": "Updated {{ok}} · failed {{failed}}"
 }

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

@@ -1,6 +1,10 @@
 {
   "title": "Claude Config Explorer",
   "subtitle": "Your Claude Code setup at a glance - plugins, skills, subagents, MCP servers, hooks, and settings.",
+  "own": {
+    "label": "Your Claude Code config — {{home}}",
+    "subtitle": "Only your own account's setup: every change here runs as your account and reaches only your own sessions."
+  },
   "refresh": "Refresh",
   "refreshing": "Refreshing…",
   "lastUpdated": "Last updated {{time}}",
@@ -30,6 +34,7 @@
   },
   "overview": {
     "rootsTitle": "Roots",
+    "claudeHome": "Your .claude",
     "projectClaudeDir": "Project .claude",
     "projectRoot": "Project root",
     "claudeJson": "claude.json",

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

@@ -30,14 +30,6 @@
     "since": "waiting {{ago}}"
   },
   "health": {
-    "runtime": "Runtime",
-    "cores_one": "{{count}} core",
-    "cores_other": "{{count}} cores",
-    "uptime": "Uptime",
-    "cpu": "CPU (1/5/15m)",
-    "nodeRss": "Node RSS",
-    "hostMemory": "Host Memory",
-    "hostMemoryTip": "Host Memory: {{pct}}% used\n{{used}} / {{total}}",
     "heap": "V8 Heap",
     "heapTip": "V8 Heap: {{pct}}% used\n{{used}} / {{limit}} limit\nAllocated: {{allocated}}\nExternal: {{external}}",
     "storage": "Storage",
@@ -50,12 +42,7 @@
     "events": "Events",
     "score": "Health Score",
     "formula": "Formula",
-    "formulaTip": "Composite index formula:\n0.4 × Success rate ({{success}}%)\n+ 0.25 × Cache hit ({{cache}}%)\n+ 0.25 × (100 − Error rate) ({{noError}}%)\n+ 0.10 × (100 − Heap%) ({{noHeap}}%)\n= {{score}}",
-    "scoreTip": "Score: {{score}} / 100\n\n• Success rate (40%): {{success}}%\n• Cache hit (25%): {{cache}}%\n• Error avoidance (25%): {{noError}}%\n• Memory health (10%): {{noHeap}}%",
-    "cache": "Cache",
-    "cacheTip": "Cache hit rate: {{pct}}%\nHits: {{hits}}\nMisses: {{misses}}",
-    "errors": "Errors",
-    "errorsTip": "Error rate: {{pct}}%\n<5% = healthy, 5–15% = warning, >15% = critical",
+    "cacheTip": "Transcript cache hit rate: {{pct}}% (shown, not scored — it restarts empty with the server)",
     "compact": "Compact",
     "compactTip": "Transcript compactions: {{count}}\nReduces the context window by summarizing turns.",
     "saved": "Saved",
@@ -65,9 +52,10 @@
     "modelTip": "{{model}}\nInput: {{input}}\nOutput: {{output}}\nCache read: {{cacheRead}}\nShare: {{pct}}%",
     "noModelData": "No model data",
     "concurrency": "Concurrency",
-    "intervals_one": "{{count}} interval",
-    "intervals_other": "{{count}} intervals",
+    "intervals_one": "{{count}} agent type",
+    "intervals_other": "{{count}} agent types",
     "concurrencyTip": "Peak: {{peak}} parallel sessions\nActive intervals: {{active}}\nAvg: {{avg}}",
+    "laneTip": "{{name}}\n{{count}} agents\nRuns {{start}}–{{end}}% of the session (avg)",
     "noConcurrencyData": "No concurrency data",
     "peak": "Peak",
     "peakTip": "Peak: {{count}} sessions running simultaneously.",
@@ -99,11 +87,101 @@
     "synchronous": "Synchronous",
     "autoVacuum": "Auto-vacuum",
     "foreignKeys": "Foreign keys",
-    "busyTimeout": "Busy timeout"
+    "busyTimeout": "Busy timeout",
+    "groupApp": "AgentHub",
+    "groupAppHint": "How the dashboard itself is doing: score, database, sessions at once",
+    "groupMachine": "Machine",
+    "groupMachineHint": "The computer AgentHub runs on: CPU, memory, disks, processes",
+    "groupActivity": "Agent activity",
+    "groupActivityHint": "What the agents used: tokens by model, tools, subagents",
+    "scoreFormula": "100 minus what each check costs:",
+    "scoreResult": "= {{score}} / 100",
+    "check": {
+      "loop": "AgentHub response",
+      "cpu": "CPU wait",
+      "memory": "Memory wait",
+      "io": "Disk wait",
+      "ram": "RAM in use",
+      "disk": "Data disk",
+      "heap": "V8 heap",
+      "hooks": "Last hook",
+      "agents": "Agent errors 24h"
+    },
+    "checkTip": {
+      "loop": "How long AgentHub's event loop was held up (p99 over the last minute). Every page, hook and terminal keystroke waits this long.",
+      "cpu": "CPU pressure (Linux PSI, last 10 s): share of time tasks waited for a free CPU — the machine feels slow above a few %.",
+      "cpuLoad": "Load per core (1 min) — this machine has no PSI, so CPU wait is estimated from load.",
+      "memory": "Memory pressure (Linux PSI, last 10 s): share of time tasks stalled reclaiming or swapping memory.",
+      "io": "Disk I/O pressure (Linux PSI, last 10 s): share of time tasks waited on the disk — a slow or busy HDD shows here.",
+      "ram": "Memory in use (total minus available).",
+      "disk": "How full the disk holding AgentHub's database is ({{mount}}).",
+      "heap": "AgentHub's V8 heap against its limit.",
+      "hooks": "Minutes since the last hook event, counted only while an agent is working: silence then means the dashboard stopped seeing it.",
+      "agents": "Agents that ended in the last 24 h with an error (errors / finished; needs at least 5)."
+    },
+    "checkNa": "Not measured here — costs nothing.",
+    "checkThresholds": "Amber from {{warn}}{{unit}}, red from {{bad}}{{unit}}",
+    "checkPenalty": "Costs {{n}} of up to {{max}} points",
+    "hooksMissing": "not installed",
+    "hooksIdle": "idle",
+    "minutesAgo": "{{n}} min ago",
+    "verdict": {
+      "ok": "Healthy",
+      "warn": "Degraded",
+      "bad": "Unhealthy"
+    },
+    "allOk": "Every check is fine",
+    "badCount_one": "{{count}} red",
+    "badCount_other": "{{count}} red",
+    "warnCount_one": "{{count}} amber",
+    "warnCount_other": "{{count}} amber",
+    "lagGroup": "Lag",
+    "systemGroup": "Capacity & signals"
   },
   "errorBoundary": {
     "title": "Something went wrong",
     "body": "This page failed to load. Reloading usually fixes it — for example after the dashboard was updated.",
     "reload": "Reload"
+  },
+  "host": {
+    "uptimeDays": "{{d}} d {{h}} h",
+    "uptimeHours": "{{h}} h {{m}} min",
+    "cpu": "CPU",
+    "cpuHelp": "Share of the whole machine: 100% means every core is busy.",
+    "memory": "Memory",
+    "swap": "Swap",
+    "free": "free",
+    "usageUnavailable": "Per-user usage is read from /proc and is only available on Linux.",
+    "hostGroup": "Host account (AgentHub and other host processes)",
+    "systemGroup": "System (root and other accounts)",
+    "homesBadge": "homes",
+    "historyTitle": "History",
+    "historyHelp": "Kept in memory, one point every {{s}} s, since the server started at {{at}}.",
+    "historyCpu": "CPU (% of the machine)",
+    "historyMemory": "Memory used (%)",
+    "range": "Range",
+    "range1h": "1 h",
+    "range6h": "6 h",
+    "range24h": "24 h",
+    "coreN": "CPU {{n}}",
+    "threads": "{{n}} threads",
+    "physical": "{{n}} cores",
+    "perSecond": "{{v}}/s",
+    "temperatures": "Temperatures",
+    "topProcesses": "Busiest processes",
+    "cpuModel": "CPU",
+    "storageNetwork": "Disks & network",
+    "processCount": "{{n}} processes",
+    "title": "Server",
+    "os": "System",
+    "uptime": "Uptime",
+    "load": "Load (1/5/15 min)",
+    "agenthubTip": "pid {{pid}} · Node {{node}}",
+    "sampling": "Sampling…",
+    "sampled": "{{s}} s sample",
+    "historyNone": "No history yet — the server keeps it in memory on Linux, from the moment it starts.",
+    "agenthub": "AgentHub",
+    "usersTitle": "Users · CPU / RAM now",
+    "usersCount": "{{n}} users"
   }
 }

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

@@ -92,6 +92,7 @@
   "changes.expandFile": "Expand {{path}}",
   "changes.fileGone": "That file no longer has changes in this range.",
   "changes.fileTruncated": "Diff cut short — open the file in an editor for the rest.",
+  "changes.lineElided": "… {{size}} more characters on this line",
   "changes.commentLine": "Comment on line {{n}} — pasted into this workspace's pane",
   "changes.commentOn": "Comment on {{at}} — pasted into the pane you used last; nothing is sent until you press Enter there",
   "changes.commentSend": "Paste into pane",
@@ -195,6 +196,7 @@
   "gitBar.switch": "Branch",
   "gitBar.switchApply": "Switch branch",
   "gitBar.switchCurrent": "current",
+  "gitBar.remoteBranches": "On the remote — switching creates the local branch",
   "gitBar.switchDirty": "Commit or discard the uncommitted changes first",
   "gitBar.switchHint": "Switch this worktree to another local branch",
   "gitBar.switchLabel": "Switch branch…",
@@ -504,8 +506,6 @@
   "changes.loadMore": "Load more commits",
   "changes.commentPasted": "Pasted into tab {{tab}} — press Enter there to send it",
   "changes.splitter": "Resize the changes panel",
-  "tree.archiveLiveTitle": "Archive a live session?",
-  "tree.archiveLiveBody": "Its tab keeps running; archiving only hides it from this list. Unarchive it from the archived fold.",
   "tree.state.awaiting": "waiting for you",
   "tree.state.error": "error",
   "tree.state.live": "live",
@@ -532,9 +532,9 @@
   "changes.unversionedGroup": "Unversioned Files",
   "changes.commitTicked": "Commit ({{count}})",
   "changes.commitAndPush": "Commit and Push",
-  "changes.discardAll": "Discard all",
-  "changes.discardAllTitle": "Discard all changes?",
-  "changes.discardAllConfirm": "Every change in {{count}} file(s) goes back to the last commit, and {{untracked}} new file(s) git does not track yet are deleted. This cannot be undone.",
+  "changes.discardTicked": "Discard ({{count}})",
+  "changes.discardTickedTitle": "Discard the ticked changes?",
+  "changes.discardTickedConfirm": "The ticked changes in {{count}} file(s) go back to the last commit, and {{untracked}} ticked new file(s) git does not track yet are deleted. Unticked files and blocks are kept. This cannot be undone.",
   "changes.amendAndPush": "Amend and Push",
   "changes.pushFailed": "Committed, but the push failed: {{error}}",
   "changes.tickFile": "Include {{path}} in the commit",
@@ -657,5 +657,23 @@
   "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}}"
+  "tmuxUpgrade": "Upgrade tmux: {{advice}}",
+  "changes.rescanRepos": "Scan for repositories again",
+  "tree.newGroup": "New group",
+  "tree.groupDefaultName": "New group",
+  "tree.ungrouped": "Ungrouped",
+  "tree.groupToggle": "Show or hide the {{name}} group",
+  "tree.groupMenu": "Group options",
+  "tree.groupRename": "Rename group",
+  "tree.groupDelete": "Delete group",
+  "tree.groupMoveUp": "Move group up",
+  "tree.groupMoveDown": "Move group down",
+  "tree.groupDeleteConfirm": "Delete the group \"{{name}}\"? Its workspaces stay, ungrouped.",
+  "tree.groupNameLabel": "Group name",
+  "menu.moveToGroup": "Move to group",
+  "menu.removeFromGroup": "Remove from group",
+  "menu.newGroupWith": "New group…",
+  "tree.groupAddWorkspace": "New workspace in this group…",
+  "tree.groupFoldAll": "Fold all groups",
+  "tree.groupUnfoldAll": "Unfold all groups"
 }

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

@@ -78,6 +78,13 @@
     "quotaWindow": {
       "wk": "Week",
       "mo": "Month"
+    },
+    "userQuota": "Quota {{pct}}%",
+    "userQuotaTitle": "Your spend quota: {{spend}} of {{limit}} {{period}}",
+    "userQuotaBlocked": "Your spend quota is used up ({{spend}} of {{limit}} {{period}}): no new session and no prompt until {{at}}",
+    "userQuotaPeriod": {
+      "day": "today",
+      "5h": "in the last 5 hours"
     }
   },
   "version": "Version",
@@ -88,5 +95,6 @@
   "now": "now",
   "users": "Users",
   "admin": "Administration",
-  "files": "Files"
+  "files": "Files",
+  "snapshot": "Snapshot"
 }

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

@@ -73,6 +73,7 @@
     "failed": "Could not attach the file",
     "tooBig": "File too large to upload (max {{mb}} MB) — put it in the workspace folder and attach it from Files",
     "tooBigLocal": "File too large to upload (max {{mb}} MB) — attach it by path instead: + → Choose a file on this computer",
+    "tooBigLocalPaste": "File too large to upload (max {{mb}} MB) — copy it in your file manager and paste it here instead (Ctrl+V): a pasted file goes in by its own path",
     "remove": "Remove attachment",
     "view": "View image"
   },

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

@@ -18,6 +18,12 @@
   "tableAgents": "Agents",
   "tableCost": "Cost",
   "tableDirectory": "Directory",
+  "tableUser": "User",
+  "tableTool": "AI Tool",
+  "tableActions": "Actions",
+  "noOwner": "No owner",
+  "moreActions": "More actions",
+  "viewDetails": "View details",
   "defaultName": "Session ",
   "detail": {
     "waitingBanner": {

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

@@ -759,6 +759,29 @@
     "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",
+    "update9router": "Update 9router",
+    "update9routerAvailable": "A newer 9router is available",
+    "update9routerCurrent": "Installed",
+    "update9routerLatest": "Latest",
+    "update9routerState": "State",
+    "update9routerRunning": "Running",
+    "update9routerRunningUnit": "Running (9router.service)",
+    "update9routerStopped": "Not running",
+    "update9routerExplain": "Every session using 9router is disconnected while it updates: 9router is shut down, updated with npm, then started again hidden (tray, no browser).",
+    "update9routerExplainStopped": "9router is not running: it is updated with npm and left off.",
+    "update9routerStep": {
+      "shutdown": "Disconnect and shut down 9router",
+      "update": "Run the update (npm install -g 9router@latest)",
+      "relaunch": "Start 9router again, hidden"
+    },
+    "update9routerDone": "9router {{version}} is running.",
+    "update9routerDoneStopped": "9router {{version}} is installed and left off, as it was.",
+    "update9routerFailed": "The update did not finish — see the steps and the log.",
+    "update9routerLog": "npm output",
+    "update9routerUpToDate": "9router is already the latest version.",
+    "update9routerCopy": "Copy command",
+    "update9routerClose": "Close",
+    "update9routerStart": "Update now",
     "edit": "Edit",
     "remove": "Remove",
     "empty": "No proxy profile saved yet. Native runs against the vendor's own API.",
@@ -884,7 +907,6 @@
     "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.",
@@ -894,7 +916,6 @@
     "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",
@@ -1035,6 +1056,10 @@
         "title": "Claude Code",
         "description": "Claude Code's own configuration, and what AgentHub reads from it."
       },
+      "claudeCodeOwn": {
+        "title": "Your Claude Code config",
+        "description": "The skills, agents, plugins, MCP servers and settings your own sessions use."
+      },
       "codex": {
         "title": "Codex",
         "description": "Codex's own configuration, and what AgentHub reads from it."
@@ -1075,6 +1100,12 @@
     "noMatch": "No setting matches “{{query}}”.",
     "results": "Search results"
   },
+  "changesPanel": {
+    "title": "Changes panel",
+    "description": "For a workspace folder that holds several git repositories (each with its own .git). Saved to your account.",
+    "innerRepos": "Show the repositories inside the workspace folder",
+    "innerReposDesc": "Each repository found inside the folder (up to two levels down) gets its own section in the Changes panel. Off: only the folder's own git is shown."
+  },
   "worktrees": {
     "title": "Worktree suggestions",
     "description": "When you add a folder to a workspace, the repo's worktrees that have no workspace are suggested. Saved in this browser only.",
@@ -1134,6 +1165,10 @@
       "18": "Larger"
     }
   },
+  "nativePaste": {
+    "label": "Paste images natively",
+    "description": "On this machine, an image pasted into a Claude pane is read by Claude from your clipboard, like in a normal terminal — nothing is uploaded. Needs wl-paste or xclip on Linux; without them the image is uploaded instead. Turn it off if you open the dashboard through an SSH tunnel: Claude would read the server's clipboard. This browser only."
+  },
   "terminalFont": {
     "title": "Terminal font",
     "description": "The font and size of the workspace terminals. Open terminals change at once. Saved to your account.",
@@ -1361,6 +1396,7 @@
     "noActive": "{{tool}} holds no login on this machine.",
     "noProfiles": "Could not load the profiles.",
     "switchSuccess": "Switched {{tool}} to \"{{name}}\". Start a new session to use it.",
+    "switchFollowing": "Switched {{tool}} to \"{{name}}\" — running sessions follow it.",
     "deleteConfirmBody": "This removes the saved {{tool}} login. To use it again, sign in from a terminal and save it once more.",
     "loginHint": "Add another {{tool}} login by signing in from a terminal first:",
     "subtitle": {
@@ -1375,5 +1411,19 @@
       "apikey": "API key",
       "credentials": "Logins"
     }
+  },
+  "poolAccount": {
+    "title": "Pool account",
+    "description": "Which account of the shared account pool your own new sessions run on. Automatic lets AgentHub pick the least-used one.",
+    "automatic": "Automatic",
+    "select": "{{tool}} pool account",
+    "count_one": "{{count}} account you may use",
+    "count_other": "{{count}} accounts you may use",
+    "pinned": "An admin pinned you to {{account}}",
+    "expired": "expired",
+    "full": "quota full",
+    "automaticSaved": "Back to automatic — AgentHub picks the account",
+    "switchedNow": "Switched to {{account}} — running sessions follow it",
+    "nextSession": "{{account}} is used from your next session"
   }
 }

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

@@ -36,7 +36,6 @@
   "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",
-  "backgroundNote": "The update keeps running in the background — the page reloads itself when the new version is up.",
   "chipTitle": "Updating to {{version}}…",
   "chipHint": "The update runs in the background — click to show it",
   "pluginStep.marketplace_update": "Step {{index}}/{{total}}: refreshing the marketplace",

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

@@ -79,6 +79,7 @@
     "EBADUSER": "Username: letters, digits, '.', '_' or '-' (up to 64).",
     "EBADPASSWORD": "Password cannot be empty.",
     "EBADEMAIL": "That email address does not look valid.",
+    "ENAMETAKEN": "Another account already uses that name. Pick one that is yours.",
     "EBADFIELD": "One of the values is not valid.",
     "ENOLANE": "That workspace no longer exists.",
     "ENOTOWNED": "That workspace is not this user's any more.",
@@ -87,7 +88,8 @@
     "ELOCALMODE": "Accounts are managed in server mode only.",
     "ELASTADMIN": "The last admin cannot be deleted, demoted or disabled.",
     "EWEAKPASSWORD": "The new password does not meet every rule (or is the current one).",
-    "EPWCHANGE": "Choose your own password first."
+    "EPWCHANGE": "Choose your own password first.",
+    "EBADQUOTA": "Enter a positive dollar limit and a period of a day or 5 hours."
   },
   "readOnly": "Analysts can view accounts but not change them.",
   "auditTitle": "Audit log",
@@ -110,6 +112,8 @@
     "status": "Status",
     "active": "Active",
     "statusHint": "A disabled user cannot sign in; their workspaces and history stay.",
+    "hostAccount": "Owns this server's host account",
+    "hostAccountHint": "Sessions run as the server's own Linux account outside every workspace (a script's claude -p, a CLI in a plain terminal) count toward this admin's spend. At most one admin; with none marked, the only admin.",
     "selfRole": "You cannot change your own role.",
     "selfDisable": "You cannot disable yourself.",
     "password": "Password",
@@ -133,7 +137,7 @@
   },
   "pool": {
     "title": "Account pool",
-    "description": "Accounts each tool's new sessions run on, one tab per AI tool. The least-used account is picked (or the one a user is pinned to), so nobody signs in per user.",
+    "description": "Each pool holds accounts of every AI tool (Claude Code, Codex, Cursor) and the members who run on them. A member's new session takes the least-used account of their pool, so nobody signs in per user.",
     "refresh": "Re-read quotas",
     "add": "Add account",
     "account": "Account",
@@ -254,20 +258,20 @@
       "shareNamed": "Share {{name}} to the pool"
     },
     "groups": {
-      "title": "Groups",
-      "description": "Give each team its own accounts: a group's members run only on the group's accounts. Users in no group share the accounts no group lists.",
-      "new": "New group",
+      "title": "Pools",
+      "description": "Members in no pool, and accounts in no pool, make up the shared pool.",
+      "new": "New pool",
       "empty": "No groups yet — every user shares every account.",
       "members_one": "{{count}} member",
       "members_other": "{{count}} members",
       "edit": "Edit group {{name}}",
-      "delete": "Delete group {{name}}",
-      "deleteHint": "Its members go back to the shared pool. No account is removed.",
+      "delete": "Delete pool {{name}}",
+      "deleteHint": "Its members and accounts go back to the shared pool. No account is removed.",
       "noAccounts": "none — members sign in themselves",
       "saved": "Group {{name}} saved",
-      "deleted": "Group {{name}} deleted",
+      "deleted": "Pool {{name}} deleted",
       "hint": "Tick the members and the accounts they run on. A user belongs to one group, so ticking one moves them here. An account can serve several groups.",
-      "name": "Group name",
+      "name": "Pool name",
       "memberList": "Members",
       "inGroup": "now in {{group}}",
       "accountList": "Accounts",
@@ -278,7 +282,57 @@
       "5h": "5 hours",
       "wk": "Week"
     },
-    "resetsIn": "resets in {{time}} · {{at}}"
+    "resetsIn": "resets in {{time}} · {{at}}",
+    "members": {
+      "title": "Members",
+      "filter": "Show members",
+      "all": "All",
+      "noGroup": "No pool",
+      "search": "Search members",
+      "tickShown": "Tick all {{count}}",
+      "noneShown": "No member matches."
+    },
+    "board": {
+      "howTo": "Drag an account or a member between pools; drop one on New pool to split it off, or drag a pool's only account into another pool to merge them. Nothing is saved until Save.",
+      "sharedHint": "Members and accounts in no pool",
+      "toShared": "Send {{name}} back to the shared pool",
+      "removeAccount": "Send {{name}} back to the shared pool",
+      "moveHere_one": "Move {{count}} here",
+      "moveHere_other": "Move {{count}} here",
+      "noMembers": "No members",
+      "noSharedAccounts": "No account is left for the shared pool.",
+      "dropMembers": "Drop members here",
+      "untitled": "New pool",
+      "new": "not saved yet",
+      "pick": "Pick members of {{name}}",
+      "pickHint": "Filter by role or by \"No pool\", tick who belongs here. A member is in one pool, so ticking one moves them here. Applied on the board — Save sends it.",
+      "apply": "Apply",
+      "addAccount": "Move an account into {{name}}",
+      "addAccountOption": "+ Move an account or saved profile here…",
+      "profilesOf": "Saved {{tool}} profiles — moved into the pool on Save",
+      "profilePending": "A saved profile: it is moved into the pool when you save",
+      "pending_one": "{{count}} unsaved change",
+      "pending_other": "{{count}} unsaved changes",
+      "needsName": "Every pool needs a name.",
+      "discard": "Discard",
+      "saveTitle": "Save the pools",
+      "saveHint": "Type your own password once to apply every change below.",
+      "summaryProfile": "Move the saved profile {{name}} into the pool",
+      "summaryNew": "Create {{name}}: {{count}} member(s), {{accounts}} account(s)",
+      "summaryGroup": "Set {{name}}: {{count}} member(s), {{accounts}} account(s)",
+      "saved": "Pools saved",
+      "dropAccounts": "Drag accounts here",
+      "noAccounts": "No accounts",
+      "accountsCount_one": "{{count}} account",
+      "accountsCount_other": "{{count}} accounts",
+      "mergeHint": "Drop to merge {{from}} into {{into}}",
+      "merged": "{{from}} merged into {{into}} — Save to apply",
+      "summaryMerge": "Merge {{from}} into {{into}}: pool {{from}} is deleted",
+      "newDrop": "Drop here to split it into a pool of its own",
+      "newHint": "Or drag an account or a member here to split it off"
+    },
+    "addAccount": "Add account",
+    "otherTools": "Other AI tools"
   },
   "delete": {
     "button": "Delete user",
@@ -315,7 +369,9 @@
     "doneIdle": "Restarted: {{names}}",
     "errors": {
       "ETMUXSTUCK": "The server did not stop. Run the `sudo kill -9` command shown, as root, on the server."
-    }
+    },
+    "sessionsCount_one": "{{count}} session",
+    "sessionsCount_other": "{{count}} sessions"
   },
   "rowMenu": {
     "openHome": "Open home in Files",
@@ -331,5 +387,66 @@
     "digit": "A digit",
     "symbol": "A symbol (e.g. ! - _ @)",
     "username": "Does not contain the username"
+  },
+  "detail": {
+    "open": "Open {{name}}'s details",
+    "lastLogin": "Last sign-in",
+    "lastSession": "Last activity",
+    "never": "never",
+    "spendDaily": "Spend · last 30 days",
+    "noUsage": "No spend in the last 30 days.",
+    "pool": "Account pool & quota",
+    "poolPinned": "pinned to {{account}}",
+    "poolChosen": "chose {{account}}",
+    "poolGroup": "group {{name}}",
+    "poolShared": "shared pool",
+    "poolNone": "No account in this tool's pool.",
+    "poolNotAllowed": "no longer allowed",
+    "poolTotal7d": "Account total 7 days: {{cost}}",
+    "noPanes": "Nothing running.",
+    "recentTitle": "Recent sessions",
+    "failed": "Could not load this user",
+    "activeLabel": "Running now",
+    "activeValue": "{{sessions}} sessions · {{panes}} panes",
+    "nowTitle": "Running now",
+    "poolTheirs7d": "theirs 7 d {{cost}}"
+  },
+  "activity": "Activity",
+  "spend": "Spend today",
+  "spendSub": "7 d {{week}} · 30 d {{month}}",
+  "sessionsN": "{{n}} sessions",
+  "workspacesN": "{{n}} workspaces",
+  "tmuxCol": "tmux",
+  "quota": {
+    "title": "Spend quota",
+    "limit": "Limit in dollars",
+    "period": "Period",
+    "periods": {
+      "day": "per day (from local midnight)",
+      "5h": "per 5 hours (sliding)"
+    },
+    "per": {
+      "day": "{{limit}} / day",
+      "5h": "{{limit}} / 5 h"
+    },
+    "used": "{{spend}} of {{limit}}",
+    "defaultTag": "(default)",
+    "none": "No quota",
+    "blockedUntil": "Used up — no new session and no prompt until {{at}}",
+    "cardTitle": "Default spend quota",
+    "cardDescription": "Every user without a quota of their own gets this one. Once it is used up they can start no session and their prompts are refused until it resets; a pane no hook can stop (Antigravity, Cursor, Codex without trusted hooks, omp on its own login) is ended.",
+    "noDefault": "No default — no limit",
+    "editDefault": "Edit",
+    "defaultDialog": "Default spend quota",
+    "defaultOn": "Limit what each user may spend",
+    "defaultSaved": "Default spend quota saved",
+    "enforceHint": "Over the quota: no new session, Claude Code and Codex prompts refused, other AI tools' panes ended — until it resets.",
+    "modes": {
+      "defaultOf": "Default ({{quota}})",
+      "defaultNone": "Default (no limit)",
+      "unlimited": "No limit",
+      "custom": "Their own limit"
+    },
+    "now": "Now: {{spend}} of {{limit}}"
   }
 }

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

@@ -1,37 +1,4 @@
 {
   "title": "Quản trị",
-  "description": "Tài khoản và máy chủ AgentHub đang chạy.",
-  "tabs": {
-    "users": "Người dùng",
-    "server": "Máy chủ"
-  },
-  "server": {
-    "title": "Máy chủ",
-    "uptime": "đã chạy {{v}}",
-    "uptimeDays": "{{d}} ngày {{h}} giờ",
-    "uptimeHours": "{{h}} giờ {{m}} phút",
-    "cpu": "CPU",
-    "cores": "{{n}} lõi · tải {{load}}",
-    "cpuHelp": "Tỷ lệ trên toàn máy: 100% nghĩa là mọi lõi đều bận.",
-    "memory": "Bộ nhớ",
-    "swap": "Swap",
-    "homesDisk": "Ổ chứa thư mục người dùng",
-    "homesDiskHelp": "Ổ đĩa chứa thư mục home của các người dùng.",
-    "free": "trống",
-    "usageTitle": "Mức sử dụng theo người dùng",
-    "usageHelp": "Số liệu trực tiếp, lấy mẫu trong {{s}} giây. Một tiến trình được tính cho người dùng khi nó chạy bằng tài khoản Linux của họ hoặc trong một phiên thuộc workspace của họ. Bộ nhớ là RSS; trang nhớ dùng chung được tính cho mỗi tiến trình. Bấm vào một dòng để xem các tiến trình nặng nhất.",
-    "usageUnavailable": "Mức dùng theo người dùng được đọc từ /proc nên chỉ có trên Linux.",
-    "who": "Người dùng",
-    "processes": "Tiến trình",
-    "home": "Thư mục home",
-    "sampling": "Đang lấy mẫu…",
-    "hostGroup": "Tài khoản máy chủ (AgentHub và tiến trình khác của host)",
-    "systemGroup": "Hệ thống (root và tài khoản khác)",
-    "disks": "Ổ đĩa",
-    "mount": "Điểm gắn",
-    "device": "Thiết bị",
-    "used": "Đã dùng",
-    "homesBadge": "home",
-    "gpus": "GPU"
-  }
+  "description": "Tài khoản và máy chủ AgentHub đang chạy."
 }

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

@@ -197,5 +197,29 @@
   "unowned.claimed": "Đã nhận về thư viện của bạn",
   "unowned.declined": "Đã bỏ khỏi danh sách của bạn",
   "unowned.assigned": "Đã gán chủ",
-  "unowned.empty": "Không có mục nào chưa có chủ."
+  "unowned.empty": "Không có mục nào chưa có chủ.",
+  "private": "Riêng tư",
+  "privateHint": "Chưa chia sẻ: chỉ bạn (và admin) thấy. Bấm Chia sẻ để đưa lên Hub.",
+  "showMore": "Xem thêm {{count}}",
+  "view.label": "Cách hiển thị",
+  "view.list": "Dạng danh sách",
+  "view.grid": "Dạng lưới",
+  "pack.title": "Bộ {{prefix}}-*",
+  "pack.count": "{{count}} skill",
+  "pack.installAll": "Cài tất cả",
+  "pack.installRest": "Cài {{count}} còn lại",
+  "pack.installTitle": "Cài {{count}} skill của bộ {{prefix}}-*?",
+  "pack.installBody": "Mỗi skill được ghi vào tài khoản của bạn. Skill nào bạn đã có cùng tên thì giữ nguyên:",
+  "pack.installed": "Đã cài {{ok}} · đã có sẵn {{skipped}} · lỗi {{failed}}",
+  "section.unshared": "Chủ chưa chia sẻ",
+  "section.unsharedHint": "Mục riêng tư của người khác — chỉ admin thấy",
+  "update": "Cập nhật",
+  "updateHint": "Người tạo đã sửa skill này từ khi bạn cài",
+  "updateTitle": "Cập nhật “{{title}}”?",
+  "updateBody": "Bản {{name}} của bạn sẽ được thay bằng phiên bản mới nhất. Bản hiện tại được chuyển sang ~/.claude/agenthub-replaced-skills/, không bị xóa.",
+  "updated": "Đã cập nhật {{name}}",
+  "pack.updateN": "Cập nhật {{count}}",
+  "pack.updateTitle": "Cập nhật {{count}} skill của bộ {{prefix}}-*?",
+  "pack.updateBody": "Mỗi bản sẽ được thay bằng phiên bản mới nhất; bản hiện tại được chuyển sang ~/.claude/agenthub-replaced-skills/:",
+  "pack.updated": "Đã cập nhật {{ok}} · lỗi {{failed}}"
 }

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

@@ -1,6 +1,10 @@
 {
   "title": "Trình khám phá cấu hình Claude",
   "subtitle": "Toàn cảnh thiết lập Claude Code của bạn - plugin, skill, subagent, máy chủ MCP, hook và cài đặt.",
+  "own": {
+    "label": "Cấu hình Claude Code của bạn — {{home}}",
+    "subtitle": "Chỉ thiết lập của tài khoản bạn: mọi thay đổi ở đây chạy dưới tài khoản của bạn và chỉ áp dụng cho các phiên của chính bạn."
+  },
   "refresh": "Làm mới",
   "refreshing": "Đang làm mới…",
   "lastUpdated": "Cập nhật lần cuối {{time}}",
@@ -30,6 +34,7 @@
   },
   "overview": {
     "rootsTitle": "Thư mục gốc",
+    "claudeHome": ".claude của bạn",
     "projectClaudeDir": "Dự án .claude",
     "projectRoot": "Thư mục dự án",
     "claudeJson": "claude.json",

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

@@ -30,14 +30,6 @@
     "since": "đang chờ {{ago}}"
   },
   "health": {
-    "runtime": "Môi trường chạy",
-    "cores_one": "{{count}} lõi",
-    "cores_other": "{{count}} lõi",
-    "uptime": "Thời gian chạy",
-    "cpu": "CPU (1/5/15 phút)",
-    "nodeRss": "Bộ nhớ Node (RSS)",
-    "hostMemory": "Bộ nhớ máy",
-    "hostMemoryTip": "Bộ nhớ máy: đã dùng {{pct}}%\n{{used}} / {{total}}",
     "heap": "Heap V8",
     "heapTip": "Heap V8: đã dùng {{pct}}%\n{{used}} / giới hạn {{limit}}\nĐã cấp phát: {{allocated}}\nNgoài heap: {{external}}",
     "storage": "Lưu trữ",
@@ -50,12 +42,7 @@
     "events": "Sự kiện",
     "score": "Điểm sức khỏe",
     "formula": "Công thức",
-    "formulaTip": "Công thức chỉ số tổng hợp:\n0.4 × Tỉ lệ thành công ({{success}}%)\n+ 0.25 × Trúng cache ({{cache}}%)\n+ 0.25 × (100 − Tỉ lệ lỗi) ({{noError}}%)\n+ 0.10 × (100 − Heap%) ({{noHeap}}%)\n= {{score}}",
-    "scoreTip": "Điểm: {{score}} / 100\n\n• Tỉ lệ thành công (40%): {{success}}%\n• Trúng cache (25%): {{cache}}%\n• Tránh lỗi (25%): {{noError}}%\n• Sức khỏe bộ nhớ (10%): {{noHeap}}%",
-    "cache": "Cache",
-    "cacheTip": "Tỉ lệ trúng cache: {{pct}}%\nTrúng: {{hits}}\nTrượt: {{misses}}",
-    "errors": "Lỗi",
-    "errorsTip": "Tỉ lệ lỗi: {{pct}}%\n<5% = tốt, 5–15% = cảnh báo, >15% = nghiêm trọng",
+    "cacheTip": "Tỉ lệ trúng cache transcript: {{pct}}% (chỉ để xem, không tính điểm — cache trống lại mỗi lần server khởi động)",
     "compact": "Nén",
     "compactTip": "Số lần nén transcript: {{count}}\nThu gọn cửa sổ ngữ cảnh bằng cách tóm tắt các lượt.",
     "saved": "Tiết kiệm",
@@ -65,9 +52,10 @@
     "modelTip": "{{model}}\nĐầu vào: {{input}}\nĐầu ra: {{output}}\nĐọc cache: {{cacheRead}}\nTỉ trọng: {{pct}}%",
     "noModelData": "Chưa có dữ liệu mô hình",
     "concurrency": "Đồng thời",
-    "intervals_one": "{{count}} khoảng",
-    "intervals_other": "{{count}} khoảng",
+    "intervals_one": "{{count}} loại agent",
+    "intervals_other": "{{count}} loại agent",
     "concurrencyTip": "Đỉnh: {{peak}} phiên song song\nKhoảng có hoạt động: {{active}}\nTrung bình: {{avg}}",
+    "laneTip": "{{name}}\n{{count}} agent\nChạy từ {{start}}–{{end}}% thời lượng phiên (trung bình)",
     "noConcurrencyData": "Chưa có dữ liệu đồng thời",
     "peak": "Đỉnh",
     "peakTip": "Đỉnh: {{count}} phiên chạy cùng lúc.",
@@ -99,11 +87,101 @@
     "synchronous": "Đồng bộ",
     "autoVacuum": "Tự dọn dẹp",
     "foreignKeys": "Khóa ngoại",
-    "busyTimeout": "Thời gian chờ khóa"
+    "busyTimeout": "Thời gian chờ khóa",
+    "groupApp": "AgentHub",
+    "groupAppHint": "Tình trạng của chính dashboard: điểm, cơ sở dữ liệu, số phiên đồng thời",
+    "groupMachine": "Máy chủ",
+    "groupMachineHint": "Máy đang chạy AgentHub: CPU, bộ nhớ, ổ đĩa, tiến trình",
+    "groupActivity": "Hoạt động agent",
+    "groupActivityHint": "Agent đã dùng gì: token theo model, công cụ, subagent",
+    "scoreFormula": "100 trừ đi phần mỗi mục bị trừ:",
+    "scoreResult": "= {{score}} / 100",
+    "check": {
+      "loop": "Phản hồi AgentHub",
+      "cpu": "Chờ CPU",
+      "memory": "Chờ bộ nhớ",
+      "io": "Chờ ổ đĩa",
+      "ram": "RAM đang dùng",
+      "disk": "Ổ chứa dữ liệu",
+      "heap": "V8 heap",
+      "hooks": "Hook gần nhất",
+      "agents": "Agent lỗi 24h"
+    },
+    "checkTip": {
+      "loop": "Event loop của AgentHub bị nghẽn bao lâu (p99 trong phút vừa qua). Mọi trang, hook và phím gõ trong terminal đều phải chờ chừng ấy.",
+      "cpu": "Áp lực CPU (Linux PSI, 10 s gần nhất): tỉ lệ thời gian tác vụ phải chờ CPU rảnh — vài % trở lên là máy bắt đầu chậm.",
+      "cpuLoad": "Tải mỗi lõi (1 phút) — máy này không có PSI nên ước lượng chờ CPU từ load.",
+      "memory": "Áp lực bộ nhớ (Linux PSI, 10 s gần nhất): tỉ lệ thời gian tác vụ bị treo để thu hồi hoặc swap bộ nhớ.",
+      "io": "Áp lực I/O ổ đĩa (Linux PSI, 10 s gần nhất): tỉ lệ thời gian tác vụ phải chờ ổ đĩa — HDD chậm hoặc bận sẽ hiện ở đây.",
+      "ram": "Bộ nhớ đang dùng (tổng trừ phần còn khả dụng).",
+      "disk": "Mức đầy của ổ chứa cơ sở dữ liệu AgentHub ({{mount}}).",
+      "heap": "V8 heap của AgentHub so với giới hạn.",
+      "hooks": "Số phút từ hook gần nhất, chỉ tính khi có agent đang chạy: im lặng lúc đó nghĩa là dashboard không còn thấy agent.",
+      "agents": "Agent kết thúc với lỗi trong 24 giờ qua (lỗi / đã kết thúc; cần ít nhất 5)."
+    },
+    "checkNa": "Không đo được trên máy này — không trừ điểm.",
+    "checkThresholds": "Vàng từ {{warn}}{{unit}}, đỏ từ {{bad}}{{unit}}",
+    "checkPenalty": "Trừ {{n}} / tối đa {{max}} điểm",
+    "hooksMissing": "chưa cài",
+    "hooksIdle": "nghỉ",
+    "minutesAgo": "{{n}} phút trước",
+    "verdict": {
+      "ok": "Khỏe",
+      "warn": "Suy giảm",
+      "bad": "Có vấn đề"
+    },
+    "allOk": "Mọi mục đều ổn",
+    "badCount_one": "{{count}} đỏ",
+    "badCount_other": "{{count}} đỏ",
+    "warnCount_one": "{{count}} vàng",
+    "warnCount_other": "{{count}} vàng",
+    "lagGroup": "Độ trễ",
+    "systemGroup": "Tài nguyên & tín hiệu"
   },
   "errorBoundary": {
     "title": "Đã xảy ra lỗi",
     "body": "Không thể tải trang này. Tải lại thường sẽ khắc phục — ví dụ sau khi dashboard vừa được cập nhật.",
     "reload": "Tải lại"
+  },
+  "host": {
+    "uptimeDays": "{{d}} ngày {{h}} giờ",
+    "uptimeHours": "{{h}} giờ {{m}} phút",
+    "cpu": "CPU",
+    "cpuHelp": "Tỷ lệ trên toàn máy: 100% nghĩa là mọi lõi đều bận.",
+    "memory": "Bộ nhớ",
+    "swap": "Swap",
+    "free": "trống",
+    "usageUnavailable": "Mức dùng theo người dùng được đọc từ /proc nên chỉ có trên Linux.",
+    "hostGroup": "Tài khoản máy chủ (AgentHub và tiến trình khác của host)",
+    "systemGroup": "Hệ thống (root và tài khoản khác)",
+    "homesBadge": "home",
+    "historyTitle": "Lịch sử",
+    "historyHelp": "Lưu trong bộ nhớ, mỗi {{s}} giây một điểm, từ khi máy chủ khởi động lúc {{at}}.",
+    "historyCpu": "CPU (% toàn máy)",
+    "historyMemory": "Bộ nhớ đã dùng (%)",
+    "range": "Khoảng thời gian",
+    "range1h": "1 giờ",
+    "range6h": "6 giờ",
+    "range24h": "24 giờ",
+    "coreN": "CPU {{n}}",
+    "threads": "{{n}} luồng",
+    "physical": "{{n}} lõi",
+    "perSecond": "{{v}}/giây",
+    "temperatures": "Nhiệt độ",
+    "topProcesses": "Tiến trình nặng nhất",
+    "cpuModel": "CPU",
+    "storageNetwork": "Ổ đĩa & mạng",
+    "processCount": "{{n}} tiến trình",
+    "title": "Máy chủ",
+    "os": "Hệ điều hành",
+    "uptime": "Thời gian chạy",
+    "load": "Tải (1/5/15 phút)",
+    "agenthubTip": "pid {{pid}} · Node {{node}}",
+    "sampling": "Đang lấy mẫu…",
+    "sampled": "mẫu {{s}} giây",
+    "historyNone": "Chưa có lịch sử — server chỉ giữ trong bộ nhớ trên Linux, tính từ lúc khởi động.",
+    "agenthub": "AgentHub",
+    "usersTitle": "Người dùng · CPU / RAM hiện tại",
+    "usersCount": "{{n}} người dùng"
   }
 }

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

@@ -92,6 +92,7 @@
   "changes.expandFile": "Mở {{path}}",
   "changes.fileGone": "File này không còn thay đổi nào trong phạm vi đang xem.",
   "changes.fileTruncated": "Diff bị cắt bớt — mở file trong editor để xem phần còn lại.",
+  "changes.lineElided": "… còn {{size}} ký tự trên dòng này",
   "changes.commentLine": "Comment dòng {{n}} — dán vào pane của workspace này",
   "changes.commentOn": "Comment {{at}} — dán vào pane bạn dùng gần nhất; chưa gửi gì cho tới khi bạn nhấn Enter ở đó",
   "changes.commentSend": "Dán vào pane",
@@ -195,6 +196,7 @@
   "gitBar.switch": "Nhánh",
   "gitBar.switchApply": "Chuyển nhánh",
   "gitBar.switchCurrent": "hiện tại",
+  "gitBar.remoteBranches": "Trên remote — switch sẽ tạo nhánh local",
   "gitBar.switchDirty": "Hãy commit hoặc bỏ các thay đổi chưa commit trước",
   "gitBar.switchHint": "Đổi worktree này sang nhánh local khác",
   "gitBar.switchLabel": "Đổi nhánh…",
@@ -504,8 +506,6 @@
   "changes.loadMore": "Tải thêm commit",
   "changes.commentPasted": "Đã dán vào tab {{tab}} — nhấn Enter ở đó để gửi",
   "changes.splitter": "Đổi độ rộng khung thay đổi",
-  "tree.archiveLiveTitle": "Lưu trữ một session đang chạy?",
-  "tree.archiveLiveBody": "Tab của nó vẫn chạy; lưu trữ chỉ ẩn nó khỏi danh sách này. Bỏ lưu trữ trong mục đã lưu trữ.",
   "tree.state.awaiting": "đang chờ bạn",
   "tree.state.error": "lỗi",
   "tree.state.live": "đang chạy",
@@ -532,9 +532,9 @@
   "changes.unversionedGroup": "File chưa theo dõi",
   "changes.commitTicked": "Commit ({{count}})",
   "changes.commitAndPush": "Commit và Push",
-  "changes.discardAll": "Bỏ tất cả",
-  "changes.discardAllTitle": "Bỏ tất cả thay đổi?",
-  "changes.discardAllConfirm": "Mọi thay đổi trong {{count}} file sẽ trở về commit cuối, và {{untracked}} file mới chưa được git theo dõi sẽ bị xoá. Không thể hoàn tác.",
+  "changes.discardTicked": "Bỏ ({{count}})",
+  "changes.discardTickedTitle": "Bỏ các thay đổi đã chọn?",
+  "changes.discardTickedConfirm": "Các thay đổi đã chọn trong {{count}} file sẽ trở về commit cuối, và {{untracked}} file mới đã chọn chưa được git theo dõi sẽ bị xoá. File và đoạn không chọn được giữ nguyên. Không thể hoàn tác.",
   "changes.amendAndPush": "Amend và Push",
   "changes.pushFailed": "Đã commit, nhưng push thất bại: {{error}}",
   "changes.tickFile": "Đưa {{path}} vào commit",
@@ -657,5 +657,23 @@
   "fx.readOnly": "Chỉ đọc",
   "fx.readOnlyHint": "Đây là home của user khác: bạn chỉ xem, sao chép và tải về được, không sửa được.",
   "fx.homeEmpty": "Home của bạn chưa có thư mục nào — các file ẩn (.bashrc, .claude…) không hiện ở đây. Các workspace nằm ở danh sách bên trái.",
-  "tmuxUpgrade": "Cần nâng cấp tmux: {{advice}}"
+  "tmuxUpgrade": "Cần nâng cấp tmux: {{advice}}",
+  "changes.rescanRepos": "Quét lại các repository",
+  "tree.newGroup": "Nhóm mới",
+  "tree.groupDefaultName": "Nhóm mới",
+  "tree.ungrouped": "Chưa phân nhóm",
+  "tree.groupToggle": "Hiện hoặc ẩn nhóm {{name}}",
+  "tree.groupMenu": "Tuỳ chọn nhóm",
+  "tree.groupRename": "Đổi tên nhóm",
+  "tree.groupDelete": "Xoá nhóm",
+  "tree.groupMoveUp": "Đưa nhóm lên",
+  "tree.groupMoveDown": "Đưa nhóm xuống",
+  "tree.groupDeleteConfirm": "Xoá nhóm \"{{name}}\"? Các workspace trong nhóm vẫn giữ nguyên, chỉ không còn thuộc nhóm.",
+  "tree.groupNameLabel": "Tên nhóm",
+  "menu.moveToGroup": "Chuyển vào nhóm",
+  "menu.removeFromGroup": "Bỏ khỏi nhóm",
+  "menu.newGroupWith": "Nhóm mới…",
+  "tree.groupAddWorkspace": "Workspace mới trong nhóm này…",
+  "tree.groupFoldAll": "Thu gọn mọi nhóm",
+  "tree.groupUnfoldAll": "Mở rộng mọi nhóm"
 }

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

@@ -78,6 +78,13 @@
     "quotaWindow": {
       "wk": "Tuần",
       "mo": "Tháng"
+    },
+    "userQuota": "Quota {{pct}}%",
+    "userQuotaTitle": "Quota chi phí của bạn: {{spend}} trên {{limit}} {{period}}",
+    "userQuotaBlocked": "Bạn đã dùng hết quota chi phí ({{spend}} trên {{limit}} {{period}}): không mở phiên mới, không gửi prompt đến {{at}}",
+    "userQuotaPeriod": {
+      "day": "hôm nay",
+      "5h": "trong 5 giờ qua"
     }
   },
   "version": "Phiên bản",
@@ -88,5 +95,6 @@
   "now": "bây giờ",
   "users": "Người dùng",
   "admin": "Quản trị",
-  "files": "Quản lý file"
+  "files": "Quản lý file",
+  "snapshot": "Snapshot"
 }