chore: v2.8.31 — remote-only branches in the branch switcher, spend quota per user

GET /api/lanes/:id/git/branches read only refs/heads, so a branch someone
else pushed never showed after a fetch or pull, and `switch` refused it
(ENOBRANCH). It now also returns `remotes`: fetched remote-tracking branches
with no local branch of that name (origin/HEAD left out), listed under
"On the remote"; switching to one runs `git switch -c <b> --track
refs/remotes/<remote>/<b>` with the remote ref looked up, never passed
through (bare name only when exactly one remote has it, else EAMBIGUOUS).
The bar also re-reads the branch list after a fetch or pull instead of
keeping the list it loaded first.

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/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

@@ -260,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;

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/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,721 @@
+/**
+ * @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} 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,212 @@
+/**
+ * @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 },
+}));
+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/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
@@ -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/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/__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__/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);

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/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

@@ -20,7 +20,11 @@
  * reads them when the prompt is sent — an image as its bare path, which claude
  * 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 ^V so `claude` reads the desktop clipboard itself, uploading nothing
+ * 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
@@ -44,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 {
@@ -59,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";
@@ -72,18 +78,20 @@ 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 { readNativePaste } from "../../lib/nativePaste";
+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";
@@ -117,10 +125,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"),
@@ -128,7 +136,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).
@@ -152,6 +160,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;
@@ -245,6 +272,11 @@ 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)) {
@@ -262,7 +294,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
@@ -283,6 +315,9 @@ 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();
     // On the dashboard's own machine the browser's clipboard IS the pane's:
@@ -293,13 +328,14 @@ export const TerminalView = memo(function TerminalView({
       localMode &&
       isLocalBrowser() &&
       readNativePaste() &&
+      nativePasteWorks() &&
       files.length > 0 &&
-      files.every((f) => f.type.startsWith("image/"));
+      files.every(isClipboardBitmap);
     if (nativeImage) {
-      termRef.current?.input("\x16", true);
+      termRef.current?.input(nativePasteKey(), true);
       return;
     }
-    if (files.length > 0) void attachFiles(files, localCandidates(e.clipboardData, files));
+    if (files.length > 0) void attachFiles(files, localCandidates(e.clipboardData, files), "paste");
     else termRef.current?.input("\x16", true);
   };
 
@@ -319,11 +355,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)));
@@ -341,7 +381,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(() => {
@@ -349,7 +390,7 @@ export const TerminalView = memo(function TerminalView({
     const attach = ({
       Terminal,
       FitAddon,
-      CanvasAddon,
+      WebglAddon,
       SearchAddon,
       WebLinksAddon,
       ClipboardWithProvider,
@@ -359,7 +400,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 →
@@ -405,17 +446,30 @@ 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.
@@ -502,6 +556,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;
@@ -544,7 +609,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
@@ -581,7 +646,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;
@@ -676,6 +744,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);
@@ -714,7 +785,7 @@ export const TerminalView = memo(function TerminalView({
         resizeDisposable.dispose();
         dataDisposable.dispose();
         ws?.close();
-        canvas?.dispose();
+        gpu?.dispose();
         term.dispose();
         termRef.current = null;
       };
@@ -959,7 +1030,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__/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(),
     },
   },
 }));
@@ -93,8 +111,24 @@ 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 } | null } = {
+  last: null,
+};
+vi.mock("@xterm/addon-webgl", () => ({
+  WebglAddon: vi.fn().mockImplementation(() => {
+    let onLoss = () => {};
+    const addon = {
+      __webgl: true,
+      dispose: vi.fn(),
+      onContextLoss: (fn: () => void) => {
+        onLoss = fn;
+        return { dispose: vi.fn() };
+      },
+    };
+    gpu.last = { dispose: addon.dispose, lose: () => onLoss() };
+    return addon;
+  }),
 }));
 
 class MockWebSocket {
@@ -120,6 +154,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 +196,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 +466,75 @@ 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
+  });
+
+  // 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,11 +716,13 @@ describe("TerminalView", () => {
     expect(dropFileMock).toHaveBeenCalledWith(img, "r1");
   });
 
-  it("hands a local claude pane's pasted image to claude as ^V, uploading nothing", () => {
+  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: () => "" },
@@ -604,6 +732,41 @@ describe("TerminalView", () => {
     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" });
@@ -621,6 +784,100 @@ describe("TerminalView", () => {
     }
   });
 
+  // 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/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

@@ -800,7 +800,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(
+  const parts = [identity.organization, identity.plan || identity.subscriptionType].filter(
     Boolean
   );
   if (parts.length === 0) return null;

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__/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,186 @@
+/**
+ * @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";
+
+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>
+                  {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/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

@@ -5,7 +5,9 @@
  * account), a new password (typed or generated, copyable — someone else's
  * may be anything and makes them choose their own at next sign-in; your own
  * must pass every rule of `lib/passwordRules.ts`), the workspaces the
- * account owns (remove, add from every workspace), and "sign out everywhere".
+ * 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,7 +19,14 @@ 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";
@@ -27,6 +36,7 @@ import { PasswordRules } from "./PasswordRules";
 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 +65,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[];
@@ -81,6 +94,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);
@@ -117,12 +142,33 @@ export function UserEditDialog({
   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;
@@ -479,6 +525,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";
@@ -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__/UserQuota.test.tsx

@@ -0,0 +1,157 @@
+/**
+ * @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(),
+}));
+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

@@ -195,6 +195,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…",

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."
@@ -1142,7 +1167,7 @@
   },
   "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. Turn it off if you open the dashboard through an SSH tunnel: Claude would read the server's clipboard. This browser only."
+    "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",
@@ -1385,5 +1410,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

@@ -87,7 +87,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",
@@ -133,7 +134,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 +255,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 +279,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 +366,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 +384,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

@@ -195,6 +195,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…",

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"
 }

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

@@ -73,6 +73,7 @@
     "failed": "Không đính kèm được file",
     "tooBig": "File quá lớn để tải lên (tối đa {{mb}} MB) — hãy đặt file vào thư mục workspace rồi đính kèm từ Files",
     "tooBigLocal": "File quá lớn để tải lên (tối đa {{mb}} MB) — hãy đính kèm bằng đường dẫn: + → Chọn file trên máy này",
+    "tooBigLocalPaste": "File quá lớn để tải lên (tối đa {{mb}} MB) — hãy copy file trong trình quản lý file rồi dán vào đây (Ctrl+V): file được dán sẽ dùng đường dẫn gốc",
     "remove": "Bỏ đính kèm",
     "view": "Xem ảnh"
   },

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

@@ -18,6 +18,12 @@
   "tableAgents": "Agent",
   "tableCost": "Chi phí",
   "tableDirectory": "Thư mục",
+  "tableUser": "Người dùng",
+  "tableTool": "AI Tool",
+  "tableActions": "Thao tác",
+  "noOwner": "Không có chủ",
+  "moreActions": "Thao tác khác",
+  "viewDetails": "Xem chi tiết",
   "defaultName": "Phiên ",
   "detail": {
     "waitingBanner": {

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

@@ -747,6 +747,29 @@
     "description": "Ví dụ 9Router, OpenRouter hoặc gateway tự dựng. Lưu ở đây rồi chọn cho từng session ở ô nhập prompt của workspace.",
     "add": "Thêm profile",
     "config9router": "Config 9router",
+    "update9router": "Cập nhật 9router",
+    "update9routerAvailable": "Đã có bản 9router mới",
+    "update9routerCurrent": "Đang cài",
+    "update9routerLatest": "Mới nhất",
+    "update9routerState": "Trạng thái",
+    "update9routerRunning": "Đang chạy",
+    "update9routerRunningUnit": "Đang chạy (9router.service)",
+    "update9routerStopped": "Không chạy",
+    "update9routerExplain": "Mọi session đang dùng 9router sẽ bị ngắt kết nối trong lúc cập nhật: 9router được tắt, cập nhật bằng npm rồi mở lại ở chế độ ẩn (khay hệ thống, không mở trình duyệt).",
+    "update9routerExplainStopped": "9router đang không chạy: chỉ cập nhật bằng npm và giữ nguyên trạng thái tắt.",
+    "update9routerStep": {
+      "shutdown": "Ngắt kết nối và tắt 9router",
+      "update": "Chạy cập nhật (npm install -g 9router@latest)",
+      "relaunch": "Mở lại 9router ở chế độ ẩn"
+    },
+    "update9routerDone": "9router {{version}} đang chạy.",
+    "update9routerDoneStopped": "Đã cài 9router {{version}}, giữ nguyên trạng thái tắt như trước.",
+    "update9routerFailed": "Cập nhật chưa hoàn tất — xem các bước và log.",
+    "update9routerLog": "Output của npm",
+    "update9routerUpToDate": "9router đã là bản mới nhất.",
+    "update9routerCopy": "Sao chép lệnh",
+    "update9routerClose": "Đóng",
+    "update9routerStart": "Cập nhật ngay",
     "edit": "Sửa",
     "remove": "Xoá",
     "empty": "Chưa lưu profile proxy nào. Native là chạy thẳng vào API của hãng.",
@@ -872,7 +895,6 @@
     "gitHubTitle": "GitHub · GitLab · Gitea · Bitbucket",
     "gitHubSub": "Key ED25519 — địa chỉ SSH dạng git@…",
     "gitHubStepAdd": "Thêm vào tài khoản trên host: GitHub → Settings → SSH and GPG keys → New SSH key. GitLab: Preferences → SSH Keys. Dán nguyên dòng.",
-    "gitHubStepClone": "Clone bằng địa chỉ SSH mà trang repository hiển thị:",
     "awsTitle": "AWS CodeCommit",
     "awsSub": "Key RSA 4096 — AWS chỉ nhận RSA",
     "stepCopy": "Copy public key.",
@@ -882,7 +904,6 @@
     "awsRegion": "Region",
     "awsSave": "Lưu",
     "awsSaved": "Đã lưu SSH key ID cho {{region}}",
-    "awsReady": "Sẵn sàng. Clone bằng địa chỉ trơn mà CodeCommit hiển thị — trong terminal hoặc Add workspace → Clone:",
     "otherTitle": "Host SSH khác (nâng cao)",
     "otherHint": "Chỉ dùng cho host đăng nhập bằng tên user khác git. Sau khi lưu, địa chỉ ssh://<host>/… trơn sẽ đăng nhập bằng user đó.",
     "otherHost": "Host",
@@ -1023,6 +1044,10 @@
         "title": "Claude Code",
         "description": "Cấu hình của Claude Code và những gì AgentHub đọc từ đó."
       },
+      "claudeCodeOwn": {
+        "title": "Cấu hình Claude Code của bạn",
+        "description": "Skill, agent, plugin, MCP server và thiết lập mà các phiên của chính bạn dùng."
+      },
       "codex": {
         "title": "Codex",
         "description": "Cấu hình của Codex và những gì AgentHub đọc từ đó."
@@ -1130,7 +1155,7 @@
   },
   "nativePaste": {
     "label": "Dán ảnh kiểu native",
-    "description": "Trên máy này, ảnh dán vào pane Claude được Claude tự đọc từ clipboard, như trong terminal thường — không upload gì. Tắt nếu bạn mở dashboard qua SSH tunnel: khi đó Claude sẽ đọc clipboard của server. Chỉ áp dụng cho trình duyệt này."
+    "description": "Trên máy này, ảnh dán vào pane Claude được Claude tự đọc từ clipboard, như trong terminal thường — không upload gì. Trên Linux cần wl-paste hoặc xclip; thiếu thì ảnh được upload thay thế. Tắt nếu bạn mở dashboard qua SSH tunnel: khi đó Claude sẽ đọc clipboard của server. Chỉ áp dụng cho trình duyệt này."
   },
   "terminalFont": {
     "title": "Font terminal",
@@ -1373,5 +1398,19 @@
       "apikey": "API key",
       "credentials": "Đăng nhập"
     }
+  },
+  "poolAccount": {
+    "title": "Tài khoản pool",
+    "description": "Tài khoản nào trong pool tài khoản dùng chung chạy các phiên mới của bạn. Tự động để AgentHub chọn tài khoản ít dùng nhất.",
+    "automatic": "Tự động",
+    "select": "Tài khoản pool của {{tool}}",
+    "count_one": "{{count}} tài khoản bạn được dùng",
+    "count_other": "{{count}} tài khoản bạn được dùng",
+    "pinned": "Admin đã ghim bạn vào {{account}}",
+    "expired": "hết hạn",
+    "full": "hết quota",
+    "automaticSaved": "Đã về Tự động — AgentHub tự chọn tài khoản",
+    "switchedNow": "Đã chuyển sang {{account}} — các phiên đang chạy theo luôn",
+    "nextSession": "{{account}} được dùng từ phiên tiếp theo"
   }
 }

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

@@ -36,7 +36,6 @@
   "autoFixHint": "Mở một phiên Claude Code trong thư mục cài đặt kèm lỗi này, để AI agent sửa và hoàn tất cập nhật.",
   "autoFixWorkspace": "Cập nhật AgentHub",
   "autoFixError": "Không mở được phiên Tự sửa",
-  "backgroundNote": "Bản cập nhật vẫn chạy ngầm — trang sẽ tự tải lại khi phiên bản mới sẵn sàng.",
   "chipTitle": "Đang cập nhật lên {{version}}…",
   "chipHint": "Bản cập nhật đang chạy ngầm — bấm để xem",
   "pluginStep.marketplace_update": "Bước {{index}}/{{total}}: làm mới marketplace",

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

@@ -87,7 +87,8 @@
     "ELOCALMODE": "Chỉ quản lý tài khoản được ở chế độ server.",
     "ELASTADMIN": "Không thể xoá, hạ quyền hay khoá admin cuối cùng.",
     "EWEAKPASSWORD": "Mật khẩu mới chưa đạt đủ các yêu cầu (hoặc trùng mật khẩu hiện tại).",
-    "EPWCHANGE": "Hãy đặt mật khẩu riêng của bạn trước."
+    "EPWCHANGE": "Hãy đặt mật khẩu riêng của bạn trước.",
+    "EBADQUOTA": "Nhập hạn mức USD lớn hơn 0 và chu kỳ ngày hoặc 5 giờ."
   },
   "readOnly": "Analyst chỉ xem được tài khoản, không thay đổi được.",
   "auditTitle": "Nhật ký audit",
@@ -133,7 +134,7 @@
   },
   "pool": {
     "title": "Pool tài khoản",
-    "description": "Các tài khoản mà phiên mới của từng tool chạy trên đó, mỗi AI tool một tab. Tự chọn tài khoản ít tải nhất (hoặc tài khoản user được gán), không ai phải đăng nhập riêng.",
+    "description": "Mỗi pool chứa tài khoản của mọi AI tool (Claude Code, Codex, Cursor) và các member dùng chúng. Session mới của member chạy trên tài khoản dùng ít nhất trong pool của họ, không ai phải tự đăng nhập.",
     "refresh": "Đọc lại quota",
     "add": "Thêm tài khoản",
     "account": "Tài khoản",
@@ -254,20 +255,20 @@
       "shareNamed": "Chia sẻ {{name}} vào pool"
     },
     "groups": {
-      "title": "Nhóm",
-      "description": "Mỗi nhóm có tài khoản riêng: thành viên của nhóm chỉ chạy trên tài khoản của nhóm. User không thuộc nhóm nào dùng chung các tài khoản không nằm trong nhóm nào.",
-      "new": "Tạo nhóm",
+      "title": "Pool",
+      "description": "Member và tài khoản chưa thuộc pool nào nằm trong pool chung.",
+      "new": "Tạo pool",
       "empty": "Chưa có nhóm — mọi user dùng chung mọi tài khoản.",
       "members_one": "{{count}} thành viên",
       "members_other": "{{count}} thành viên",
       "edit": "Sửa nhóm {{name}}",
-      "delete": "Xoá nhóm {{name}}",
-      "deleteHint": "Các thành viên quay về pool chung. Không tài khoản nào bị xoá.",
+      "delete": "Xoá pool {{name}}",
+      "deleteHint": "Member và tài khoản của pool quay về pool chung. Không tài khoản nào bị xoá.",
       "noAccounts": "chưa có — thành viên tự đăng nhập",
       "saved": "Đã lưu nhóm {{name}}",
-      "deleted": "Đã xoá nhóm {{name}}",
+      "deleted": "Đã xoá pool {{name}}",
       "hint": "Tick các thành viên và tài khoản mà họ dùng. Mỗi user thuộc một nhóm, tick một user sẽ chuyển họ sang đây. Một tài khoản có thể dùng cho nhiều nhóm.",
-      "name": "Tên nhóm",
+      "name": "Tên pool",
       "memberList": "Thành viên",
       "inGroup": "đang ở {{group}}",
       "accountList": "Tài khoản",
@@ -278,7 +279,57 @@
       "5h": "5 giờ",
       "wk": "Tuần"
     },
-    "resetsIn": "reset sau {{time}} · {{at}}"
+    "resetsIn": "reset sau {{time}} · {{at}}",
+    "members": {
+      "title": "Thành viên",
+      "filter": "Hiện thành viên",
+      "all": "Tất cả",
+      "noGroup": "Chưa có pool",
+      "search": "Tìm thành viên",
+      "tickShown": "Chọn cả {{count}}",
+      "noneShown": "Không có thành viên nào khớp."
+    },
+    "board": {
+      "howTo": "Kéo tài khoản hoặc member giữa các pool; thả vào ô Tạo pool để tách ra, hoặc kéo tài khoản duy nhất của một pool sang pool khác để gộp. Chỉ lưu khi bấm Lưu.",
+      "sharedHint": "Member và tài khoản chưa thuộc pool nào",
+      "toShared": "Đưa {{name}} về pool chung",
+      "removeAccount": "Đưa {{name}} về pool chung",
+      "moveHere_one": "Chuyển {{count}} vào đây",
+      "moveHere_other": "Chuyển {{count}} vào đây",
+      "noMembers": "Chưa có thành viên",
+      "noSharedAccounts": "Không còn tài khoản nào cho pool chung.",
+      "dropMembers": "Thả thành viên vào đây",
+      "untitled": "Pool mới",
+      "new": "chưa lưu",
+      "pick": "Chọn thành viên cho {{name}}",
+      "pickHint": "Lọc theo role hoặc \"Chưa có pool\", tick người thuộc pool này. Mỗi người chỉ ở một pool, tick sẽ chuyển họ vào đây. Áp dụng lên bảng — bấm Lưu mới gửi.",
+      "apply": "Áp dụng",
+      "addAccount": "Chuyển tài khoản vào {{name}}",
+      "addAccountOption": "+ Chuyển tài khoản hoặc profile đã lưu vào đây…",
+      "profilesOf": "Profile {{tool}} đã lưu — chuyển vào pool khi Lưu",
+      "profilePending": "Profile đã lưu: sẽ được chuyển vào pool khi bạn lưu",
+      "pending_one": "{{count}} thay đổi chưa lưu",
+      "pending_other": "{{count}} thay đổi chưa lưu",
+      "needsName": "Pool nào cũng cần có tên.",
+      "discard": "Bỏ thay đổi",
+      "saveTitle": "Lưu các pool",
+      "saveHint": "Nhập mật khẩu của bạn một lần để áp dụng mọi thay đổi bên dưới.",
+      "summaryProfile": "Chuyển profile {{name}} vào pool",
+      "summaryNew": "Tạo {{name}}: {{count}} thành viên, {{accounts}} tài khoản",
+      "summaryGroup": "Cập nhật {{name}}: {{count}} thành viên, {{accounts}} tài khoản",
+      "saved": "Đã lưu các pool",
+      "dropAccounts": "Kéo tài khoản vào đây",
+      "noAccounts": "Chưa có tài khoản",
+      "accountsCount_one": "{{count}} tài khoản",
+      "accountsCount_other": "{{count}} tài khoản",
+      "mergeHint": "Thả để gộp {{from}} vào {{into}}",
+      "merged": "Đã gộp {{from}} vào {{into}} — bấm Lưu để áp dụng",
+      "summaryMerge": "Gộp {{from}} vào {{into}}: xoá pool {{from}}",
+      "newDrop": "Thả vào đây để tách thành pool riêng",
+      "newHint": "Hoặc kéo tài khoản / member vào đây để tách ra"
+    },
+    "addAccount": "Thêm tài khoản",
+    "otherTools": "AI tool khác"
   },
   "delete": {
     "button": "Xoá user",
@@ -315,7 +366,9 @@
     "doneIdle": "Đã khởi động lại: {{names}}",
     "errors": {
       "ETMUXSTUCK": "Server không dừng. Chạy lệnh `sudo kill -9` được nêu, bằng quyền root, trên máy server."
-    }
+    },
+    "sessionsCount_one": "{{count}} session",
+    "sessionsCount_other": "{{count}} session"
   },
   "rowMenu": {
     "openHome": "Mở home trong Files",
@@ -331,5 +384,66 @@
     "digit": "Có chữ số",
     "symbol": "Có ký tự đặc biệt (vd. ! - _ @)",
     "username": "Không chứa tên đăng nhập"
+  },
+  "detail": {
+    "open": "Xem chi tiết {{name}}",
+    "lastLogin": "Đăng nhập gần nhất",
+    "lastSession": "Hoạt động gần nhất",
+    "never": "chưa bao giờ",
+    "spendDaily": "Chi phí · 30 ngày qua",
+    "noUsage": "Không có chi phí trong 30 ngày qua.",
+    "pool": "Account pool & quota",
+    "poolPinned": "ghim vào {{account}}",
+    "poolChosen": "tự chọn {{account}}",
+    "poolGroup": "nhóm {{name}}",
+    "poolShared": "pool dùng chung",
+    "poolNone": "Pool của tool này chưa có tài khoản nào.",
+    "poolNotAllowed": "không còn được dùng",
+    "poolTotal7d": "Tổng tài khoản 7 ngày: {{cost}}",
+    "noPanes": "Không có gì đang chạy.",
+    "recentTitle": "Session gần đây",
+    "failed": "Không tải được thông tin người dùng",
+    "activeLabel": "Đang chạy",
+    "activeValue": "{{sessions}} session · {{panes}} pane",
+    "nowTitle": "Đang chạy",
+    "poolTheirs7d": "của họ 7 ngày {{cost}}"
+  },
+  "activity": "Hoạt động",
+  "spend": "Chi phí hôm nay",
+  "spendSub": "7 ngày {{week}} · 30 ngày {{month}}",
+  "sessionsN": "{{n}} session",
+  "workspacesN": "{{n}} workspace",
+  "tmuxCol": "tmux",
+  "quota": {
+    "title": "Quota chi phí",
+    "limit": "Hạn mức (USD)",
+    "period": "Chu kỳ",
+    "periods": {
+      "day": "mỗi ngày (từ nửa đêm giờ địa phương)",
+      "5h": "mỗi 5 giờ (trượt)"
+    },
+    "per": {
+      "day": "{{limit}} / ngày",
+      "5h": "{{limit}} / 5 giờ"
+    },
+    "used": "{{spend}} trên {{limit}}",
+    "defaultTag": "(mặc định)",
+    "none": "Không giới hạn",
+    "blockedUntil": "Đã hết — không mở phiên mới, không gửi prompt đến {{at}}",
+    "cardTitle": "Quota chi phí mặc định",
+    "cardDescription": "Áp cho mọi user không có quota riêng. Khi dùng hết, user không mở được phiên mới và prompt bị từ chối đến khi quota mở lại; pane không hook nào chặn được (Antigravity, Cursor, Codex chưa tin hook, omp dùng login riêng) sẽ bị dừng.",
+    "noDefault": "Chưa có mặc định — không giới hạn",
+    "editDefault": "Sửa",
+    "defaultDialog": "Quota chi phí mặc định",
+    "defaultOn": "Giới hạn chi phí của mỗi user",
+    "defaultSaved": "Đã lưu quota chi phí mặc định",
+    "enforceHint": "Vượt quota: không mở phiên mới, prompt Claude Code và Codex bị từ chối, pane của các AI tool khác bị dừng — đến khi quota mở lại.",
+    "modes": {
+      "defaultOf": "Mặc định ({{quota}})",
+      "defaultNone": "Mặc định (không giới hạn)",
+      "unlimited": "Không giới hạn",
+      "custom": "Hạn mức riêng"
+    },
+    "now": "Hiện tại: {{spend}} trên {{limit}}"
   }
 }

client/src/index.css

@@ -717,6 +717,11 @@
 .xterm-viewport::-webkit-scrollbar {
   display: none;
 }
+/* xterm 6 draws its own scrollbar (VS Code's scrollable element) instead of
+   the viewport's native one: the same dead affordance, hidden the same way. */
+.xterm .xterm-scrollable-element > .scrollbar {
+  display: none;
+}
 
 /* Settings → Appearance → Text size (lib/fontSize.ts) sets the ROOT font size.
    Tailwind's own sizes are rem and follow it; these are the `text-[Npx]`

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

@@ -49,6 +49,16 @@ describe("artifactView", () => {
     expect(isArtifact("server.js", true)).toBe(false);
   });
 
+  it("never takes the project's own HTML pages for artifacts", () => {
+    expect(isArtifact("/tmp/out/report.html", true)).toBe(true);
+    expect(isArtifact("/tmp/out/report.html", false)).toBe(false);
+    expect(isArtifact("/repo/index.html", true)).toBe(false);
+    expect(isArtifact("/repo/client/INDEX.HTM", true)).toBe(false);
+    expect(isArtifact("/repo/public/about.html", true)).toBe(false);
+    expect(isArtifact("C:\\repo\\templates\\mail.html", true)).toBe(false);
+    expect(isArtifact("/repo/docs/chart.html", true)).toBe(true);
+  });
+
   it("rebuilds a file's versions from Write, Edit and MultiEdit", () => {
     const msgs = [
       use("1", "Write", { file_path: "/w/a.md", content: "# A\nold line\n" }),

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

@@ -31,9 +31,9 @@ describe("git targets", () => {
     await api.lanes.gitAction(gitTarget(3, "s-1"), "stage", { paths: ["a"] });
     await api.lanes.git(gitTarget(3, null));
     const urls = spy.mock.calls.map((c) => String(c[0]));
-    expect(urls[0]).toMatch(/\/lanes\/3\/git\/changes\?range=work$/);
-    expect(urls[1]).toMatch(/\/lanes\/3\/git\/changes\?range=work&session=s-1$/);
-    expect(urls[2]).toMatch(/\/lanes\/3\/git\/stage\?session=s-1$/);
-    expect(urls[3]).toMatch(/\/lanes\/3\/git$/);
+    expect(urls[0]).toMatch(/\/workspaces\/3\/git\/changes\?range=work$/);
+    expect(urls[1]).toMatch(/\/workspaces\/3\/git\/changes\?range=work&session=s-1$/);
+    expect(urls[2]).toMatch(/\/workspaces\/3\/git\/stage\?session=s-1$/);
+    expect(urls[3]).toMatch(/\/workspaces\/3\/git$/);
   });
 });

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

@@ -0,0 +1,153 @@
+/**
+ * @file healthScore.test.ts
+ * @description Tests for lib/healthScore.ts — the System Health score: a calm
+ * machine scores 100, lag (event loop, CPU / memory / I/O pressure) pulls it
+ * down hard, a check without data costs nothing, CPU falls back to load per
+ * core without PSI, the data disk is the one holding the database, and hooks
+ * count only while an agent works.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, expect, it } from "vitest";
+import type { HostStats } from "../api";
+import { healthChecks, healthScore, scoreLevel, type HealthInput } from "../healthScore";
+
+const GB = 1024 ** 3;
+const NOW = Date.parse("2026-10-27T10:00:00Z");
+
+const host = (over: Partial<HostStats> = {}): HostStats => ({
+  at: "2026-10-27T10:00:00Z",
+  hostname: "box",
+  os: { platform: "linux", release: "7", distro: null, arch: "x64" },
+  uptime: 1000,
+  cpu: { model: null, cores: 4, load: [0.5, 0.5, 0.5] },
+  memory: { total: 16 * GB, available: 12 * GB, used: 4 * GB, swapTotal: 0, swapUsed: 0 },
+  disks: [
+    { device: "/dev/a", mount: "/", type: "ext4", kind: "SSD", total: 100, used: 10, free: 90 },
+    { device: "/dev/b", mount: "/data", type: "ext4", kind: "HDD", total: 100, used: 99, free: 1 },
+  ],
+  homesMount: null,
+  gpus: [],
+  usage: null,
+  pressure: {
+    cpu: { some10: 1, some60: 1, full10: 0 },
+    memory: { some10: 0, some60: 0, full10: 0 },
+    io: { some10: 0, some60: 0, full10: 0 },
+  },
+  ...over,
+});
+
+const calm = (over: Partial<HealthInput> = {}): HealthInput => ({
+  eventLoop: { p50: 10, p99: 20, max: 40 },
+  heap: { heapUsed: 100, heapTotal: 200, heapLimit: 1000 },
+  hooksInstalled: true,
+  activity: {
+    last_event_at: "2026-10-27T09:59:00Z",
+    working_agents: 1,
+    agents_24h: { completed: 50, error: 0 },
+  },
+  dbPath: "/home/me/.claude/agenthub/dashboard.db",
+  host: host(),
+  now: NOW,
+  ...over,
+});
+
+const byKey = (input: HealthInput) => new Map(healthChecks(input).map((c) => [c.key, c]));
+
+describe("healthScore", () => {
+  it("scores a calm machine 100 with every check ok", () => {
+    const checks = healthChecks(calm());
+    expect(healthScore(checks)).toBe(100);
+    expect(checks.every((c) => c.level === "ok")).toBe(true);
+    expect(scoreLevel(100)).toBe("ok");
+  });
+
+  it("drops the score when the machine lags", () => {
+    const lagging = calm({
+      eventLoop: { p50: 50, p99: 1200, max: 2000 },
+      host: host({
+        pressure: {
+          cpu: { some10: 70, some60: 50, full10: 0 },
+          memory: { some10: 0, some60: 0, full10: 0 },
+          io: { some10: 60, some60: 40, full10: 30 },
+        },
+      }),
+    });
+    const c = byKey(lagging);
+    expect(c.get("loop")?.level).toBe("bad");
+    expect(c.get("cpu")?.level).toBe("bad");
+    expect(c.get("io")?.level).toBe("bad");
+    const score = healthScore([...c.values()]);
+    expect(score).toBe(100 - 25 - 20 - 20);
+    expect(scoreLevel(score)).toBe("bad");
+  });
+
+  it("charges part of the points between amber and red", () => {
+    const c = byKey(calm({ eventLoop: { p50: 10, p99: 550, max: 600 } })).get("loop");
+    expect(c?.level).toBe("warn");
+    expect(c?.penalty).toBe(12.5);
+  });
+
+  it("costs nothing for what was not measured, and estimates CPU from load without PSI", () => {
+    const c = byKey(
+      calm({
+        eventLoop: undefined,
+        host: host({ pressure: null, cpu: { model: null, cores: 2, load: [5, 1, 1] } }),
+      })
+    );
+    expect(c.get("loop")?.level).toBe("na");
+    expect(c.get("memory")?.level).toBe("na");
+    expect(c.get("cpu")?.detail?.source).toBe("load");
+    expect(c.get("cpu")?.value).toBe(250);
+    expect(c.get("cpu")?.level).toBe("bad");
+  });
+
+  it("reads the disk that holds the database", () => {
+    const c = byKey(calm({ dbPath: "/data/agenthub/dashboard.db" })).get("disk");
+    expect(c?.detail?.mount).toBe("/data");
+    expect(c?.level).toBe("bad");
+    expect(byKey(calm({ dbPath: null })).get("disk")?.detail?.mount).toBe("/");
+  });
+
+  it("counts silent hooks only while an agent works; missing hooks are red", () => {
+    const silent = calm({
+      activity: {
+        last_event_at: "2026-10-27T09:20:00Z",
+        working_agents: 2,
+        agents_24h: { completed: 0, error: 0 },
+      },
+    });
+    expect(byKey(silent).get("hooks")?.level).toBe("bad");
+    const idle = calm({
+      activity: {
+        last_event_at: "2026-10-27T05:00:00Z",
+        working_agents: 0,
+        agents_24h: { completed: 0, error: 0 },
+      },
+    });
+    expect(byKey(idle).get("hooks")).toMatchObject({ level: "ok", penalty: 0 });
+    expect(byKey(calm({ hooksInstalled: false })).get("hooks")).toMatchObject({
+      level: "bad",
+      penalty: 30,
+    });
+  });
+
+  it("rates agent errors only with enough finished agents", () => {
+    const few = calm({
+      activity: {
+        last_event_at: null,
+        working_agents: 0,
+        agents_24h: { completed: 1, error: 2 },
+      },
+    });
+    expect(byKey(few).get("agents")?.level).toBe("na");
+    const many = calm({
+      activity: {
+        last_event_at: null,
+        working_agents: 0,
+        agents_24h: { completed: 6, error: 4 },
+      },
+    });
+    expect(byKey(many).get("agents")).toMatchObject({ level: "bad", value: 40 });
+  });
+});

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

@@ -25,7 +25,7 @@ function stubFetch(body: unknown) {
 }
 
 describe("api.lanes.git", () => {
-  it("requests /api/lanes/<id>/git and returns the parsed facts", async () => {
+  it("requests /api/workspaces/<id>/git and returns the parsed facts", async () => {
     const facts = {
       available: true,
       branch: "feat/x",
@@ -41,7 +41,7 @@ describe("api.lanes.git", () => {
     expect(spy).toHaveBeenCalledTimes(1);
     const call = spy.mock.calls[0] as [string, RequestInit | undefined];
     // endsWith, not toContain: `/gitt` contains `/git` and would slip through.
-    expect(String(call[0]).endsWith("/api/lanes/3/git")).toBe(true);
+    expect(String(call[0]).endsWith("/api/workspaces/3/git")).toBe(true);
     expect(call[1]?.method ?? "GET").toBe("GET");
     expect(result).toEqual(facts);
   });

client/src/lib/api.ts

@@ -545,6 +545,110 @@ export type ServerUserUsage = AuthUser & {
   /** Active login sessions (cookies not expired). */
   logins?: number;
   lastLoginAt?: string | null;
+  /** This user's own spend quota setting (absent from an older server). */
+  quotaSetting?: UserQuotaSetting;
+  /** The quota that binds them now with its spend; null = no limit. */
+  quota?: UserQuotaStatus | null;
+};
+/** A spend quota: `limit_usd` per day (from local midnight of `tz_offset`) or per sliding 5 h. */
+export type UserQuota = {
+  limit_usd: number;
+  period: "day" | "5h";
+  /** getTimezoneOffset() minutes of the zone a `day` starts in. */
+  tz_offset?: number;
+  /** Where it comes from: the default, or the user's own. */
+  source?: "default" | "user";
+};
+/** A user's own setting: the default applies, no limit, or a limit of their own. */
+export type UserQuotaSetting =
+  { mode: "default" } | { mode: "unlimited" } | ({ mode: "custom" } & UserQuota);
+/** A quota now (`GET /api/users`, `GET /api/me/quota`). */
+export type UserQuotaStatus = UserQuota & {
+  spend: number;
+  pct: number;
+  /** Used up: no new session starts and prompts are refused until `resetsAt`. */
+  exceeded: boolean;
+  resetsAt: string | null;
+  since: string;
+};
+/** A priced slice of a user's spend (`GET /api/users/:id/details`). */
+export type UsageSlice = { key: string; cost: number; tokens: number; sessions: number };
+/** One pool account as one user's detail sees it: the account's totals and their share. */
+export type UserPoolAccount = {
+  name: string;
+  kind: string;
+  email: string | null;
+  expired: boolean;
+  /** Their group/pin lets them run on it (false = they ran on it before). */
+  allowed: boolean;
+  pinned: boolean;
+  quota: PoolAccount["quota"] | CodexPoolAccount["quota"];
+  quotaPercent: number | null;
+  full: boolean;
+  livePanes: number;
+  spend5h: number;
+  spend7d: number;
+  userSpend5h: number;
+  userSpend7d: number;
+  userTokens5h: number;
+  userTokens7d: number;
+  userRuns7d: number;
+  userLivePanes: number;
+  userLastAt: string | null;
+};
+/** `GET /api/users/:id/details` — the Administration page's user detail. */
+export type UserDetails = {
+  user: AuthUser & { disabled: boolean; logins: number; lastLoginAt: string | null };
+  sessions: { total: number; active: number; firstAt: string | null; lastAt: string | null };
+  usage: {
+    today: { cost: number; tokens: number };
+    last7d: { cost: number; tokens: number };
+    last30d: { cost: number; tokens: number };
+    /** 30 local days, the oldest first. */
+    daily: { date: string; cost: number; tokens: number }[];
+    byTool: UsageSlice[];
+    byModel: UsageSlice[];
+  };
+  workspaces: {
+    id: number;
+    title: string;
+    cwd: string;
+    tool: string;
+    kind: string;
+    branch: string | null;
+    status: string;
+    createdAt: string;
+    sessions: number;
+    lastActiveAt: string | null;
+    livePanes: number;
+  }[];
+  panes: {
+    id: string;
+    laneId: number;
+    laneTitle: string;
+    laneCwd: string;
+    tool: string;
+    model: string | null;
+    account: string | null;
+    proxy: string | null;
+    sessionId: string | null;
+    startedAt: string;
+    status: string;
+  }[];
+  recentSessions: (Session & { tokens?: number })[];
+  pool: Partial<
+    Record<
+      PoolTool,
+      {
+        pin: string | null;
+        /** The user's own choice (below a pin); absent from an older server. */
+        choice?: string | null;
+        group: { id: number; name: string } | null;
+        accounts: UserPoolAccount[];
+      }
+    >
+  >;
+  audit: AuditEntry[];
 };
 /** One member's own tmux server (`GET /api/users/tmux`). */
 export interface MemberTmuxRow {
@@ -578,6 +682,8 @@ export interface HostUsageGroup {
   kind: "user" | "host" | "system";
   userId?: number;
   username?: string;
+  /** The user's display name, null when none is set (absent from an older server). */
+  displayName?: string | null;
   /** % of the whole machine's CPU (100 = every core busy) over the sample. */
   cpu: number;
   /** Resident memory, bytes (shared pages count in every process). */
@@ -587,13 +693,31 @@ export interface HostUsageGroup {
   /** Busiest processes, by the kernel's short name only. */
   top: { pid: number; name: string; cpu: number; memory: number }[];
 }
+/** One `/proc/pressure/<resource>` reading, in % of the window. */
+export interface HostPressure {
+  some10: number;
+  some60: number;
+  full10: number;
+}
+
 /** `GET /api/host` — hardware, load, disks and per-user usage. */
 export interface HostStats {
   at: string;
   hostname: string;
   os: { platform: string; release: string; distro: string | null; arch: string };
   uptime: number;
-  cpu: { model: string | null; cores: number; load: number[] };
+  /** When the machine booted (ISO); absent from an older server. */
+  bootTime?: string;
+  cpu: {
+    model: string | null;
+    /** Logical CPUs (threads). */
+    cores: number;
+    load: number[];
+    /** Physical cores from /proc/cpuinfo; null when it cannot tell. */
+    physicalCores?: number | null;
+    /** Busy % of each logical CPU over the sample; [] off Linux. */
+    perCore?: number[];
+  };
   memory: { total: number; available: number; used: number; swapTotal: number; swapUsed: number };
   disks: {
     device: string;
@@ -609,6 +733,46 @@ export interface HostStats {
   gpus: { name: string; utilization: number; memoryUsed: number; memoryTotal: number }[];
   /** null off Linux. */
   usage: { cpu: number; sampleMs: number; groups: HostUsageGroup[] } | null;
+  /** Bytes/s per network interface over the sample (`lo` left out). */
+  network?: { name: string; rx: number; tx: number }[];
+  /** Bytes/s per whole disk over the sample. */
+  diskIo?: { name: string; read: number; write: number }[];
+  /** `/sys/class/hwmon` sensors; [] when none. */
+  temperatures?: { chip: string; label: string; celsius: number }[];
+  /** Linux PSI (`/proc/pressure/*`): % of the last 10 / 60 s tasks stalled on
+   *  each resource; null without PSI (or off Linux). */
+  pressure?: {
+    cpu: HostPressure | null;
+    memory: HostPressure | null;
+    io: HostPressure | null;
+  } | null;
+  /** The ten busiest processes machine-wide; `group` is a `HostUsageGroup` key. */
+  topProcesses?: { pid: number; name: string; cpu: number; memory: number; group: string }[];
+  /** The dashboard's own process. */
+  process?: { pid: number; node: string; uptime: number; rss: number; heapUsed: number };
+}
+/** One point of `GET /api/host/history`. */
+export interface HostHistoryPoint {
+  at: string;
+  /** Machine CPU %, null when it could not be sampled. */
+  cpu: number | null;
+  /** Memory used, % of total. */
+  memory: number | null;
+  memoryUsed: number;
+  swapUsed: number;
+  load1: number | null;
+  /** Per user id: CPU % and resident bytes (users with any use only). */
+  users: Record<string, { cpu: number; memory: number }>;
+}
+export type HostHistoryRange = "1h" | "6h" | "24h";
+/** `GET /api/host/history` — kept in memory since the server started. */
+export interface HostHistory {
+  range: HostHistoryRange;
+  intervalMs: number;
+  /** False when this server keeps no history (local mode, not Linux). */
+  running: boolean;
+  startedAt: string | null;
+  points: HostHistoryPoint[];
 }
 
 /** One user's home folder on disk (`GET /api/users/storage`); null = not measured. */
@@ -634,6 +798,8 @@ export type UserPatch = {
   addWorkspaces?: number[];
   removeWorkspaces?: number[];
   signOut?: true;
+  /** Their own spend quota (`default` = the default applies). */
+  quota?: UserQuotaSetting;
 };
 /** GET /api/me/account — the signed-in account's own information. */
 export type MyAccount =
@@ -671,6 +837,8 @@ export type PoolAccount = {
   } | null;
   quotaPercent: number | null;
   full: boolean;
+  /** Readable plan of a login ("Max 5x", "Team Premium"); null for a setup-token. */
+  plan?: string | null;
 };
 /** One Codex pool account — an API key or a ChatGPT login, never the secret. */
 export type CodexPoolAccount = {
@@ -689,6 +857,8 @@ export type CodexPoolAccount = {
   } | null;
   quotaPercent: number | null;
   full: boolean;
+  /** A ChatGPT login's plan ("Plus", "Pro", "Team"); null for an API key. */
+  plan?: string | null;
 };
 /** A user an admin pinned to one pool account: their new sessions skip the balancer. */
 export type AccountPin = {
@@ -728,6 +898,22 @@ export type PoolGroupPatch = {
   accounts?: Partial<Record<PoolTool, string[]>>;
 };
 export type PoolTool = "claude" | "codex" | "cursor";
+/** One tool of `GET /api/me/pool-accounts`: the accounts this user may use — never a token. */
+export type MyPoolTool = {
+  tool: PoolTool;
+  /** An admin's pin: while set, the user cannot choose. */
+  pin: string | null;
+  /** The user's own choice; null = the balancer picks. */
+  choice: string | null;
+  accounts: {
+    name: string;
+    kind: string;
+    email: string | null;
+    expired: boolean;
+    quotaPercent: number | null;
+    full: boolean;
+  }[];
+};
 /** A saved switch-user profile that can be moved into the pool (no token). */
 export type PoolProfile = {
   name: string;
@@ -915,7 +1101,7 @@ function gitUrl(target: GitTarget, sub: string, q?: URLSearchParams): string {
   if (typeof target !== "number" && target.source) params.set("source", String(target.source));
   if (typeof target !== "number" && target.repo) params.set("repo", target.repo);
   const qs = params.toString();
-  return `/lanes/${lane}/git${sub}${qs ? `?${qs}` : ""}`;
+  return `/workspaces/${lane}/git${sub}${qs ? `?${qs}` : ""}`;
 }
 
 /** Where the File Explorer works: a workspace (as {@link GitTarget}) or a user's home. */
@@ -929,7 +1115,7 @@ function fsUrl(place: FsPlace, sub: string, q?: URLSearchParams): string {
     const qs = new URLSearchParams(q).toString();
     return `/homes/${encodeURIComponent(place.home)}/fs${sub}${qs ? `?${qs}` : ""}`;
   }
-  return gitUrl(place, sub, q).replace(/^(\/lanes\/\d+)\/git/, "$1/fs");
+  return gitUrl(place, sub, q).replace(/^(\/workspaces\/\d+)\/git/, "$1/fs");
 }
 
 /**
@@ -1023,6 +1209,13 @@ export function gitTarget(
   return session ? { lane: laneId, session } : laneId;
 }
 
+/** A file the dashboard machine's file manager holds, by its own path. */
+export interface FileManagerFile {
+  path: string;
+  size: number | null;
+  dir: boolean;
+}
+
 export const api = {
   // ───────────────────────── Server mode login (routes/auth.js) ─────────────────────────
   auth: {
@@ -1044,6 +1237,8 @@ export const api = {
     /** PUT /api/me/prefs — merge; `null` deletes a key. */
     savePrefs: (prefs: Record<string, string | null>) =>
       request<UserPrefs>("/me/prefs", { method: "PUT", body: JSON.stringify({ prefs }) }),
+    /** GET /api/me/quota — this account's own spend quota now (null: no limit, or local mode). */
+    quota: () => request<{ quota: UserQuotaStatus | null }>("/me/quota"),
     /** GET /api/me/instructions — this account's own agent instructions (issue #67). */
     instructions: () => request<AgentInstructionsView>("/me/instructions"),
     /** PUT /api/me/instructions — blank clears; put before every workspace's own. */
@@ -1082,10 +1277,21 @@ export const api = {
       request<MyAccount>("/me/avatar/url", { method: "POST", body: JSON.stringify({ url }) }),
     /** DELETE /api/me/avatar — back to the initials. */
     removeAvatar: () => request<MyAccount>("/me/avatar", { method: "DELETE" }),
+    /** GET /api/me/pool-accounts — per tool, the pool accounts this account may use (server mode). */
+    poolAccounts: () => request<{ tools: MyPoolTool[] }>("/me/pool-accounts"),
+    /** PUT /api/me/pool-accounts — run new sessions of `tool` on `account` (`null` = automatic). */
+    choosePoolAccount: (tool: PoolTool, account: string | null) =>
+      request<{
+        tool: PoolTool;
+        choice: string | null;
+        switched: "switched" | "kept" | "own-login" | "expired" | "next-session" | null;
+      }>("/me/pool-accounts", { method: "PUT", body: JSON.stringify({ tool, account }) }),
   },
-  /** GET /api/host — the Server tab: hardware and each user's CPU/memory share (staff). */
+  /** GET /api/host — System Health's machine cards and the Administration users table's CPU/RAM (local mode, or staff). */
   host: {
     stats: () => request<HostStats>("/host"),
+    history: (range: HostHistoryRange = "1h") =>
+      request<HostHistory>(`/host/history?range=${range}`),
   },
   // ───────────────────────── Server mode staff views (routes/users.js) ─────────────────────────
   users: {
@@ -1094,7 +1300,18 @@ export const api = {
       avatarAt ? `${BASE}/users/${id}/avatar?v=${encodeURIComponent(avatarAt)}` : null,
     /** GET /api/users — every account with its recent usage (admin/analyst). */
     list: () =>
-      request<{ users: ServerUserUsage[] }>(`/users?tz_offset=${new Date().getTimezoneOffset()}`),
+      request<{ users: ServerUserUsage[]; quotaDefault?: UserQuota | null }>(
+        `/users?tz_offset=${new Date().getTimezoneOffset()}`
+      ),
+    /** PUT /api/users/quota-default — the default spend quota (null = none). */
+    setQuotaDefault: (quota: UserQuota | null, currentPassword: string) =>
+      request<{ user: AuthUser; quotaDefault: UserQuota | null }>("/users/quota-default", {
+        method: "PUT",
+        body: JSON.stringify({ quota, currentPassword }),
+      }),
+    /** GET /api/users/:id/details — one account in full (admin/analyst). */
+    details: (id: number) =>
+      request<UserDetails>(`/users/${id}/details?tz_offset=${new Date().getTimezoneOffset()}`),
     /** GET /api/users/audit — staff reads of members' sessions and admins'
      *  account changes, newest first. */
     audit: () => request<{ entries: AuditEntry[] }>("/users/audit"),
@@ -2003,10 +2220,13 @@ export const api = {
         purged_agents: number;
       }>("/settings/cleanup", { method: "POST", body: JSON.stringify(params) }),
     gc: (body: { dryRun?: boolean } = {}) =>
-      request<{ reaped: number[]; capped: { path: string; sizeBefore: number }[] }>("/lanes/gc", {
-        method: "POST",
-        body: JSON.stringify(body),
-      }),
+      request<{ reaped: number[]; capped: { path: string; sizeBefore: number }[] }>(
+        "/workspaces/gc",
+        {
+          method: "POST",
+          body: JSON.stringify(body),
+        }
+      ),
   },
 
   // ─────────────────────────────── Workflows API ──────────────────────────────
@@ -2152,7 +2372,9 @@ export const api = {
      *
      * @returns {@link CostResult} — the aggregate cost breakdown across sessions.
      */
-    totalCost: (opts: { lane?: number; date?: string; tool?: string; range?: DateRange } = {}) => {
+    totalCost: (
+      opts: { lane?: number; date?: string; tool?: string; range?: DateRange; mine?: boolean } = {}
+    ) => {
       // Scope the aggregate to the active data-scope, exactly like the sessions /
       // stats / analytics endpoints — otherwise switching the Data scope selector
       // left the Dashboard "total cost" showing the un-narrowed global total.
@@ -2162,6 +2384,8 @@ export const api = {
       // `date` (local YYYY-MM-DD): only that day's usage, breakdown included.
       if (opts.date) qs.set("date", opts.date);
       if (opts.tool) qs.set("tool", opts.tool);
+      // `mine`: only the caller's own sessions, even for an admin/analyst (server mode).
+      if (opts.mine) qs.set("mine", "1");
       // `range`: total, breakdown and by_tool for those local days only.
       applyRange(qs, opts.range);
       applyScope(qs);
@@ -2286,6 +2510,13 @@ export const api = {
    *  CLAUDE.md/auto-memory, marketplaces, keybindings, and the statusline
    *  script - for the dashboard's "CC Config" explorer/editor pages. */
   ccConfig: {
+    /**
+     * GET /api/cc-config/target - whose Claude Code config this login manages
+     * here: `own` (server mode, their own account's), `host` (an admin, local
+     * mode, or an analyst's read-only view), `none` (no account: the page is
+     * not theirs).
+     */
+    target: () => request<CcTarget>("/cc-config/target"),
     /**
      * GET /api/cc-config/overview - counts of every artifact kind, for the
      * explorer's landing page.
@@ -3143,6 +3374,13 @@ export const api = {
         method: "POST",
         body: JSON.stringify({ replace }),
       }),
+    /** POST /api/artifacts/:id/install `{update: true}` — an installed skill's
+     *  copies replaced by its newest version (the old ones moved aside). */
+    updateInstalled: (id: number) =>
+      request<{ installed: string; replaced?: boolean }>(`/artifacts/${id}/install`, {
+        method: "POST",
+        body: JSON.stringify({ update: true }),
+      }),
     /** POST /api/artifacts/:id/uninstall — a skill moved aside, a plugin `claude plugin uninstall`. */
     uninstall: (id: number) =>
       request<{ uninstalled: string; paths: string[] }>(`/artifacts/${id}/uninstall`, {
@@ -3256,6 +3494,12 @@ export const api = {
     list: () => request<{ items: AiProxy[] }>("/ai-proxies"),
     /** GET /api/ai-proxies/9router - whether a `9router` binary is installed on the server. */
     nineRouter: () => request<{ installed: boolean }>("/ai-proxies/9router"),
+    /** GET /api/ai-proxies/9router/update - versions, whether it runs, why an update would be refused, the job. */
+    nineRouterUpdateStatus: (fresh = false) =>
+      request<NineRouterUpdateStatus>(`/ai-proxies/9router/update${fresh ? "?fresh=1" : ""}`),
+    /** POST /api/ai-proxies/9router/update - shut 9router down, update it, start it again hidden (admin). */
+    nineRouterUpdate: () =>
+      request<NineRouterUpdateJob>("/ai-proxies/9router/update", { method: "POST" }),
     /** POST /api/ai-proxies - save a new profile. */
     create: (body: AiProxyInput) =>
       request<AiProxy>("/ai-proxies", { method: "POST", body: JSON.stringify(body) }),
@@ -3343,6 +3587,27 @@ export const api = {
         method: "POST",
         body: JSON.stringify({ paths }),
       }),
+    /** POST /api/run/clipboard-files — the files a file manager's Copy put on
+     *  the dashboard machine's clipboard, by their own paths (`size` null for a
+     *  folder); 403 EREMOTE unless local mode and a loopback browser. */
+    clipboardFiles: () =>
+      request<{ files: FileManagerFile[] }>("/run/clipboard-files", {
+        method: "POST",
+        body: "{}",
+      }),
+    /** POST /api/run/selected-files — the files selected in that machine's
+     *  file manager (Explorer, Finder): what a drag from it carries. Same
+     *  shape and refusal as `clipboardFiles`. */
+    selectedFiles: () =>
+      request<{ files: FileManagerFile[] }>("/run/selected-files", {
+        method: "POST",
+        body: "{}",
+      }),
+    /** GET /api/run/native-paste — whether a `claude` pane can read this
+     *  machine's clipboard itself (a reader installed, a display reachable);
+     *  false for a remote browser and in server mode. `key`: the chord
+     *  `claude` reads an image with on that machine (Alt+V on Windows). */
+    nativePaste: () => request<{ native: boolean; key?: "ctrl+v" | "alt+v" }>("/run/native-paste"),
     /** POST /api/run - start (or adopt, if already live) a lane's terminal run. */
     start: (args: RunStartArgs) =>
       request<RunHandle>("/run", { method: "POST", body: JSON.stringify(args) }),
@@ -3751,7 +4016,7 @@ export const api = {
      * GET /api/lanes — list all lanes with pipeline progress and liveness.
      * @returns `{ lanes, counts }` — all {@link Lane} records and aggregate counts.
      */
-    list: () => request<{ lanes: Lane[]; counts: LaneCounts }>("/lanes"),
+    list: () => request<{ lanes: Lane[]; counts: LaneCounts }>("/workspaces"),
     /**
      * POST /api/lanes/ensure — ensure a lane exists for the given cwd.
      * @param body The cwd and optional title. When `cwd` is omitted the server
@@ -3767,7 +4032,7 @@ export const api = {
       /** Only a lane on THIS directory counts, not one on a parent of it. */
       exact?: boolean;
     }) =>
-      request<{ lane: Lane; created: boolean }>("/lanes/ensure", {
+      request<{ lane: Lane; created: boolean }>("/workspaces/ensure", {
         method: "POST",
         body: JSON.stringify(body),
       }),
@@ -3790,7 +4055,7 @@ export const api = {
       /** This clone's name for {@link lanes.cloneProgress}. */
       progressToken?: string;
     }) =>
-      request<{ lane: Lane; created: boolean; path: string }>("/lanes/clone", {
+      request<{ lane: Lane; created: boolean; path: string }>("/workspaces/clone", {
         method: "POST",
         body: JSON.stringify(body),
       }),
@@ -3800,7 +4065,7 @@ export const api = {
      * carrying `progressToken` arrives, and a minute after it ends.
      */
     cloneProgress: (token: string) =>
-      request<CloneProgressView>(`/lanes/clone/progress/${encodeURIComponent(token)}`),
+      request<CloneProgressView>(`/workspaces/clone/progress/${encodeURIComponent(token)}`),
     /**
      * GET /api/lanes/pipelines — every pipeline template the server can render
      * a lane against, built-in plus any `DASHBOARD_PIPELINES_DIR` override.
@@ -3808,7 +4073,7 @@ export const api = {
      */
     pipelines: () =>
       request<{ pipelines: { id: string; name: string; nodes: { id: string }[] }[] }>(
-        "/lanes/pipelines"
+        "/workspaces/pipelines"
       ),
     /**
      * GET /api/lanes/pipeline-stats — per-node pass counts aggregated over every
@@ -3818,7 +4083,7 @@ export const api = {
      */
     pipelineStats: (laneId?: number | null) =>
       request<PipelineStats>(
-        `/lanes/pipeline-stats${laneId ? `?lane=${encodeURIComponent(laneId)}` : ""}`
+        `/workspaces/pipeline-stats${laneId ? `?lane=${encodeURIComponent(laneId)}` : ""}`
       ),
     /**
      * GET /api/lanes/branches — a candidate source repo's local branches.
@@ -3830,7 +4095,7 @@ export const api = {
      */
     branches: (repo: string) =>
       request<{ branches: string[]; current: string | null; worktrees: LaneWorktree[] }>(
-        `/lanes/branches?repo=${encodeURIComponent(repo)}`
+        `/workspaces/branches?repo=${encodeURIComponent(repo)}`
       ),
     /**
      * POST /api/lanes/worktree — provision a dashboard-managed git worktree as
@@ -3848,7 +4113,7 @@ export const api = {
       pipeline?: string;
       tool?: LaneTool;
     }) =>
-      request<{ lane: Lane }>("/lanes/worktree", {
+      request<{ lane: Lane }>("/workspaces/worktree", {
         method: "POST",
         body: JSON.stringify(body),
       }),
@@ -3883,7 +4148,7 @@ export const api = {
           file?: boolean;
           mtime?: number | null;
         }[];
-      }>(`/lanes/browse${qs ? `?${qs}` : ""}`);
+      }>(`/workspaces/browse${qs ? `?${qs}` : ""}`);
     },
     /**
      * POST /api/lanes/browse/mkdir — the folder browser's New folder: one
@@ -3891,7 +4156,7 @@ export const api = {
      * `EFOLDER` (outside the caller's own folder).
      */
     mkdir: (parent: string, name: string) =>
-      request<{ path: string }>("/lanes/browse/mkdir", {
+      request<{ path: string }>("/workspaces/browse/mkdir", {
         method: "POST",
         body: JSON.stringify({ parent, name }),
       }),
@@ -3905,7 +4170,7 @@ export const api = {
      * @returns `{ path }`, or `{ cancelled: true }` when the user cancelled.
      */
     pickPath: (kind: "dir" | "file", start?: string) =>
-      request<{ path?: string; cancelled?: boolean }>("/lanes/pick-path", {
+      request<{ path?: string; cancelled?: boolean }>("/workspaces/pick-path", {
         method: "POST",
         body: JSON.stringify({ kind, start }),
       }),
@@ -3914,7 +4179,7 @@ export const api = {
      * @param id The lane id.
      * @returns `{ lane }` — the {@link Lane} record.
      */
-    get: (id: number) => request<{ lane: Lane }>(`/lanes/${id}`),
+    get: (id: number) => request<{ lane: Lane }>(`/workspaces/${id}`),
     /**
      * GET /api/lanes/:id/git — the lane's working-copy facts.
      * @param id The lane id.
@@ -4048,13 +4313,15 @@ export const api = {
      */
     removeSessionWorktree: (id: number, session: string) =>
       request<{ removed: true; branch: string | null; branchKept: boolean }>(
-        `/lanes/${id}/session-worktree/remove`,
+        `/workspaces/${id}/session-worktree/remove`,
         { method: "POST", body: JSON.stringify({ session, confirm: true }) }
       ),
     gitBranches: (id: GitTarget) =>
       request<{
         available: boolean;
         branches: string[];
+        /** Fetched remote branches with no local one yet (`origin/feature`); absent from an older server. */
+        remotes?: string[];
         current: string | null;
         worktrees: LaneWorktree[];
       }>(gitUrl(id, "/branches")),
@@ -4142,7 +4409,7 @@ export const api = {
      * @param id The lane id.
      * @returns {@link LaneRuntime}
      */
-    runtime: (id: number) => request<LaneRuntime>(`/lanes/${id}/runtime`),
+    runtime: (id: number) => request<LaneRuntime>(`/workspaces/${id}/runtime`),
     /**
      * POST /api/lanes/:id/up — boot the lane's stack through its profile hooks.
      * Returns 202: the boot runs in the background and streams progress as
@@ -4151,7 +4418,7 @@ export const api = {
      * @param body `build: false` reuses an existing build.
      */
     up: (id: number, body: { build?: boolean } = {}) =>
-      request<{ ok: true; laneId: number }>(`/lanes/${id}/up`, {
+      request<{ ok: true; laneId: number }>(`/workspaces/${id}/up`, {
         method: "POST",
         body: JSON.stringify(body),
       }),
@@ -4162,7 +4429,7 @@ export const api = {
      * @returns The pids stopped and the resulting runtime facts.
      */
     down: (id: number) =>
-      request<{ ok: true; killed: number[]; runtime: LaneRuntime }>(`/lanes/${id}/down`, {
+      request<{ ok: true; killed: number[]; runtime: LaneRuntime }>(`/workspaces/${id}/down`, {
         method: "POST",
         body: JSON.stringify({}),
       }),
@@ -4172,7 +4439,7 @@ export const api = {
      * @returns `{ lane }` — the created {@link Lane}.
      */
     create: (body: { title?: string; cwd: string; branch?: string; pipeline?: string }) =>
-      request<{ lane: Lane }>("/lanes", { method: "POST", body: JSON.stringify(body) }),
+      request<{ lane: Lane }>("/workspaces", { method: "POST", body: JSON.stringify(body) }),
     /**
      * PATCH /api/lanes/:id — partial update of a lane.
      * @param id   The lane id.
@@ -4181,17 +4448,17 @@ export const api = {
      */
     /** GET /api/lanes/:id/sources — the workspace's instructions, extra
      *  folders and context files, and whether its tool can take them. */
-    sources: (id: number) => request<LaneSourcesView>(`/lanes/${id}/sources`),
+    sources: (id: number) => request<LaneSourcesView>(`/workspaces/${id}/sources`),
     /** GET /api/lanes/:id/repos — the git repos inside the workspace folder
      *  (a parent folder of several repos), each a Changes section read with
      *  `?repo=<path>`; `root` = the folder itself is in a repo. */
     repos: (id: number, refresh = false) =>
       request<{ root: boolean; items: { path: string; name: string }[]; truncated: boolean }>(
-        `/lanes/${id}/repos${refresh ? "?refresh=1" : ""}`
+        `/workspaces/${id}/repos${refresh ? "?refresh=1" : ""}`
       ),
     /** PUT /api/lanes/:id/instructions — appended to every new pane's system prompt. */
     setInstructions: (id: number, instructions: string | null) =>
-      request<LaneSourcesView>(`/lanes/${id}/instructions`, {
+      request<LaneSourcesView>(`/workspaces/${id}/instructions`, {
         method: "PUT",
         body: JSON.stringify({ instructions }),
       }),
@@ -4209,19 +4476,19 @@ export const api = {
         progressToken?: string;
       }
     ) =>
-      request<LaneSourcesView & { path: string }>(`/lanes/${id}/sources/clone`, {
+      request<LaneSourcesView & { path: string }>(`/workspaces/${id}/sources/clone`, {
         method: "POST",
         body: JSON.stringify(body),
       }),
     /** POST /api/lanes/:id/sources/folder — an extra folder the agent may use. */
     addFolder: (id: number, path: string) =>
-      request<LaneSourcesView>(`/lanes/${id}/sources/folder`, {
+      request<LaneSourcesView>(`/workspaces/${id}/sources/folder`, {
         method: "POST",
         body: JSON.stringify({ path }),
       }),
     /** POST /api/lanes/:id/sources/file — upload one context file (≤ 10 MB). */
     addFile: (id: number, file: File) =>
-      request<LaneSourcesView>(`/lanes/${id}/sources/file`, {
+      request<LaneSourcesView>(`/workspaces/${id}/sources/file`, {
         method: "POST",
         body: file,
         headers: {
@@ -4232,11 +4499,14 @@ export const api = {
     /** DELETE /api/lanes/:id/sources/:sourceId — a folder stays on disk; an
      *  uploaded file's AgentHub copy is deleted. */
     removeSource: (id: number, sourceId: number) =>
-      request<LaneSourcesView>(`/lanes/${id}/sources/${sourceId}`, { method: "DELETE" }),
+      request<LaneSourcesView>(`/workspaces/${id}/sources/${sourceId}`, { method: "DELETE" }),
     /** GET /api/lanes/:id/memory — CLAUDE.md/AGENTS.md and Claude's auto memory, read-only. */
-    memory: (id: number) => request<{ files: LaneMemoryFile[] }>(`/lanes/${id}/memory`),
+    memory: (id: number) => request<{ files: LaneMemoryFile[] }>(`/workspaces/${id}/memory`),
     update: (id: number, patch: Partial<Lane>) =>
-      request<{ lane: Lane }>(`/lanes/${id}`, { method: "PATCH", body: JSON.stringify(patch) }),
+      request<{ lane: Lane }>(`/workspaces/${id}`, {
+        method: "PATCH",
+        body: JSON.stringify(patch),
+      }),
     /**
      * POST /api/lanes/:id/stage — advance the pipeline stage.
      * @param id   The lane id.
@@ -4247,14 +4517,17 @@ export const api = {
       id: number,
       body: { stage: string; status?: string; evidence?: string; note?: string; result?: string }
     ) =>
-      request<{ lane: Lane }>(`/lanes/${id}/stage`, { method: "POST", body: JSON.stringify(body) }),
+      request<{ lane: Lane }>(`/workspaces/${id}/stage`, {
+        method: "POST",
+        body: JSON.stringify(body),
+      }),
     /**
      * GET /api/lanes/:id/preflight?action=reset|remove|purge — read the
      * action-specific facts that a destructive request must echo as `expect`.
      */
     preflight: (id: number, action: "reset" | "remove" | "purge") =>
       request<import("./types").LanePreflight>(
-        `/lanes/${id}/preflight?${new URLSearchParams({ action }).toString()}`
+        `/workspaces/${id}/preflight?${new URLSearchParams({ action }).toString()}`
       ),
     /**
      * POST /api/lanes/:id/:action — trigger a lane action (start, stop, clear, remove, etc.).
@@ -4266,7 +4539,7 @@ export const api = {
     action: (id: number, action: string, body: Record<string, unknown> = {}) =>
       // `run_id` answers a `start`: the session it opened, which for a split
       // pane's slot (`body.slot` 1–3) is not the lane's own `run_id`.
-      request<{ lane?: Lane; ok?: boolean; run_id?: string }>(`/lanes/${id}/${action}`, {
+      request<{ lane?: Lane; ok?: boolean; run_id?: string }>(`/workspaces/${id}/${action}`, {
         method: "POST",
         body: JSON.stringify(body),
       }),
@@ -4277,7 +4550,7 @@ export const api = {
      */
     features: {
       list: (id: number) =>
-        request<{ features: import("./types").LaneFeature[] }>(`/lanes/${id}/features`),
+        request<{ features: import("./types").LaneFeature[] }>(`/workspaces/${id}/features`),
       /**
        * GET /api/lanes/:id/features/:slug — fetch an archived feature snapshot.
        * @param id The lane id.
@@ -4286,7 +4559,7 @@ export const api = {
        */
       show: (id: number, slug: string) =>
         request<{ feature: import("./types").LaneFeature }>(
-          `/lanes/${id}/features/${encodeURIComponent(slug)}`
+          `/workspaces/${id}/features/${encodeURIComponent(slug)}`
         ),
     },
     /**
@@ -4296,7 +4569,7 @@ export const api = {
      */
     proof: {
       list: (id: number) =>
-        request<{ features: import("./types").ProofFeature[] }>(`/lanes/${id}/proof`),
+        request<{ features: import("./types").ProofFeature[] }>(`/workspaces/${id}/proof`),
       /**
        * URL for a proof image, ready to use in an <img src>.
        * @param id The lane id.
@@ -4306,7 +4579,7 @@ export const api = {
        * @returns A URL string pointing to the image.
        */
       imageUrl: (id: number, slug: string, group: string, file: string): string =>
-        `/api/lanes/${id}/proof/${encodeURIComponent(slug)}/${encodeURIComponent(group)}/${encodeURIComponent(file)}`,
+        `/api/workspaces/${id}/proof/${encodeURIComponent(slug)}/${encodeURIComponent(group)}/${encodeURIComponent(file)}`,
       /**
        * DELETE /api/lanes/:id/proof/:slug — delete proof entries for a feature.
        * @param id The lane id.
@@ -4315,19 +4588,19 @@ export const api = {
        * @returns `{ deleted }` — count of deleted images.
        */
       delete: (id: number, slug: string, body: { group?: string; images?: string[] }) =>
-        request<{ deleted: number }>(`/lanes/${id}/proof/${encodeURIComponent(slug)}`, {
+        request<{ deleted: number }>(`/workspaces/${id}/proof/${encodeURIComponent(slug)}`, {
           method: "DELETE",
           body: JSON.stringify(body),
         }),
     },
     mcpSync: (id: number) =>
-      request<{ servers: string[]; profilesSeeded: string[] }>(`/lanes/${id}/mcp/sync`, {
+      request<{ servers: string[]; profilesSeeded: string[] }>(`/workspaces/${id}/mcp/sync`, {
         method: "POST",
         body: "{}",
       }),
     profileInit: (id: number, force = false) =>
       request<{ scaffolded: boolean; written?: string[]; todos?: string[]; reason?: string }>(
-        `/lanes/${id}/profile/init`,
+        `/workspaces/${id}/profile/init`,
         { method: "POST", body: JSON.stringify({ force }) }
       ),
   },
@@ -4423,6 +4696,9 @@ export interface Artifact {
   inLibrary: boolean;
   /** List rows only: a skill/plugin already in every account the viewer's sessions run as. */
   installed?: boolean;
+  /** List rows only: an installed skill whose copy differs from its newest
+   *  version (its owner changed it since) — the list offers Update. */
+  updateAvailable?: boolean;
   /** file: captured when its session stopped, not pinned by hand. */
   auto?: boolean;
   /** Server mode: nobody owns it yet. */
@@ -4545,6 +4821,8 @@ export interface CcAccountIdentity {
   organization: string | null;
   seatTier: string | null;
   subscriptionType: string | null;
+  /** Readable plan from tier + seat ("Max 5x", "Team Premium"); prefer it. */
+  plan?: string | null;
   /** Access-token expiry, epoch ms; a switch still works past it (the refresh
    *  token is stored too). */
   expiresAt: number | null;
@@ -4585,6 +4863,13 @@ export interface CcProfileUsage {
  *  user + project scope in one response. */
 export type CcScope = "user" | "project" | "all";
 
+/** GET /api/cc-config/target — whose Claude Code config the page manages. */
+export interface CcTarget {
+  kind: "own" | "host" | "none";
+  readOnly: boolean;
+  claudeHome: string | null;
+}
+
 /** The per-tier model names an AI Proxy profile carries. Each maps to one env
  *  var Claude Code reads; a proxy that names its models once fills them all
  *  from the profile's `model`. */
@@ -4780,6 +5065,38 @@ export interface AiProxy {
  *  error is still a successful HTTP call: `ok` is the PROXY's verdict, `status`
  *  is its HTTP code (null when nothing answered at all), and `message` is its
  *  own words — truncated server-side, never the key. */
+/** One step of the 9router update job, in order: shutdown → update → relaunch. */
+export interface NineRouterUpdateStep {
+  id: "shutdown" | "update" | "relaunch";
+  status: "pending" | "running" | "done" | "failed" | "skipped";
+  message: string | null;
+}
+
+/** The server's one 9router update job (in memory; null before the first). */
+export interface NineRouterUpdateJob {
+  status: "running" | "done" | "failed";
+  startedAt: string;
+  finishedAt: string | null;
+  from: string | null;
+  to: string | null;
+  managedBy: "systemd" | "process" | null;
+  install: "direct" | "sudo";
+  steps: NineRouterUpdateStep[];
+  log: string;
+}
+
+/** GET /api/ai-proxies/9router/update. `blocker` is why a start would be refused now. */
+export interface NineRouterUpdateStatus {
+  installed: boolean;
+  version: string | null;
+  latest: string | null;
+  updateAvailable: boolean;
+  running: boolean;
+  managedBy: "systemd" | "process" | null;
+  blocker: { code: string; message: string; command?: string } | null;
+  job: NineRouterUpdateJob | null;
+}
+
 export interface AiProxyProbe {
   ok: boolean;
   status: number | null;
@@ -5165,8 +5482,9 @@ export interface CcOverview {
   /** Key filesystem locations the explorer reads from. */
   roots: {
     claudeHome: string;
-    projectClaudeDir: string;
-    projectRoot: string;
+    /** Null for a member's own config with no workspace named: no project layer. */
+    projectClaudeDir: string | null;
+    projectRoot: string | null;
     /** Path to the top-level `.claude.json` (marketplaces/global settings). */
     claudeJson: string;
   };

client/src/lib/artifactView.ts

@@ -43,13 +43,40 @@ export const RENDERED: ReadonlySet<ArtifactKind> = new Set([
   "image",
 ]);
 
-/** An edit worth a card in the conversation: a page, a document, a diagram, a
- *  table — and a React component the model wrote whole (a `.tsx` it merely
- *  edited is project code, not an artifact). */
+/** Folders an app keeps its own pages in: an HTML file under one of them is
+ *  the project's code, never a page the model made to show. */
+const PROJECT_DIRS = new Set([
+  "src",
+  "public",
+  "templates",
+  "views",
+  "pages",
+  "app",
+  "static",
+  "dist",
+  "build",
+  "components",
+  "layouts",
+]);
+
+/** An HTML file the project serves itself: an `index.html`, or one under a
+ *  folder in {@link PROJECT_DIRS}. */
+function isProjectPage(path: string): boolean {
+  const parts = path.split(/[\\/]/);
+  const name = (parts.pop() || "").toLowerCase();
+  if (name === "index.html" || name === "index.htm") return true;
+  return parts.some((d) => PROJECT_DIRS.has(d.toLowerCase()));
+}
+
+/** An edit worth a card in the conversation: a document, a diagram, a table —
+ *  and a page or React component the model wrote whole (a `.tsx` or `.html` it
+ *  merely edited, and an HTML page of the project itself, are project code,
+ *  not an artifact). */
 export function isArtifact(path: string, created: boolean): boolean {
   const k = artifactKind(path);
   if (k === "react") return created;
-  return k === "html" || k === "svg" || k === "markdown" || k === "mermaid" || k === "csv";
+  if (k === "html") return created && !isProjectPage(path);
+  return k === "svg" || k === "markdown" || k === "mermaid" || k === "csv";
 }
 
 /** A code fence language for the Code tab. */

client/src/lib/healthScore.ts

@@ -0,0 +1,213 @@
+/**
+ * @file healthScore.ts
+ * @description The Dashboard System Health score: a list of checks, each read
+ * against two thresholds (`warnAt` → amber, `badAt` → red) and costing up to
+ * `max` points as it climbs between them; the score is 100 minus every
+ * deduction (never below 0). Most of the weight is on what makes the machine
+ * or the dashboard feel slow — the event loop's p99 delay
+ * (`/api/settings/info` `server.event_loop`) and Linux pressure stall
+ * information for CPU, memory and disk I/O (`/api/host` `pressure`; the CPU
+ * falls back to load per core without PSI) — then RAM, the data disk, the V8
+ * heap, hooks going silent while agents work, and agent errors in the last
+ * 24 h. A check whose input is missing is `na` and costs nothing. Pure — the
+ * card in `Dashboard.tsx` only renders the result.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { HostStats } from "./api";
+
+export type CheckLevel = "ok" | "warn" | "bad" | "na";
+export type CheckKey =
+  "loop" | "cpu" | "memory" | "io" | "ram" | "disk" | "heap" | "hooks" | "agents";
+
+export interface HealthCheck {
+  key: CheckKey;
+  /** "lag" checks are what a user feels as a slow machine or dashboard. */
+  group: "lag" | "system";
+  /** The measured value in `unit`; null when not measured. */
+  value: number | null;
+  unit: "ms" | "%" | "min";
+  level: CheckLevel;
+  warnAt: number;
+  badAt: number;
+  /** Points this check took off the score. */
+  penalty: number;
+  /** The most it can take. */
+  max: number;
+  /** Extra facts for the row (e.g. which mount, how many agents). */
+  detail?: Record<string, string | number>;
+}
+
+export interface HealthInput {
+  /** `server.event_loop` (ms); absent on an older server. */
+  eventLoop?: { p50: number; p99: number; max: number };
+  heap: { heapUsed: number; heapTotal: number; heapLimit?: number };
+  hooksInstalled: boolean;
+  activity?: {
+    last_event_at: string | null;
+    working_agents: number;
+    agents_24h: { completed: number; error: number };
+  };
+  /** The database file, to find the disk it lives on; null for a developer. */
+  dbPath: string | null;
+  host: HostStats | null;
+  now?: number;
+}
+
+/** Fewest finished agents before an error rate means anything. */
+const MIN_AGENTS = 5;
+
+function check(
+  key: CheckKey,
+  group: HealthCheck["group"],
+  value: number | null,
+  unit: HealthCheck["unit"],
+  warnAt: number,
+  badAt: number,
+  max: number,
+  detail?: HealthCheck["detail"]
+): HealthCheck {
+  if (value == null || !Number.isFinite(value)) {
+    return { key, group, value: null, unit, level: "na", warnAt, badAt, penalty: 0, max, detail };
+  }
+  const level: CheckLevel = value >= badAt ? "bad" : value >= warnAt ? "warn" : "ok";
+  const t = Math.max(0, Math.min(1, (value - warnAt) / (badAt - warnAt)));
+  return {
+    key,
+    group,
+    value,
+    unit,
+    level,
+    warnAt,
+    badAt,
+    penalty: Math.round(max * t * 10) / 10,
+    max,
+    detail,
+  };
+}
+
+/** The mount holding `path`: the longest mount point that prefixes it, else `/`. */
+function diskOf(host: HostStats, path: string | null) {
+  const disks = host.disks ?? [];
+  if (path) {
+    const hit = disks
+      .filter((d) => path === d.mount || path.startsWith(d.mount === "/" ? "/" : `${d.mount}/`))
+      .sort((a, b) => b.mount.length - a.mount.length)[0];
+    if (hit) return hit;
+  }
+  return disks.find((d) => d.mount === "/") ?? disks[0] ?? null;
+}
+
+export function healthChecks(input: HealthInput): HealthCheck[] {
+  const { host } = input;
+  const now = input.now ?? Date.now();
+  const psi = host?.pressure ?? null;
+  const out: HealthCheck[] = [];
+
+  // ── What lag is made of ──
+  out.push(check("loop", "lag", input.eventLoop?.p99 ?? null, "ms", 100, 1000, 25));
+  if (psi?.cpu) {
+    out.push(check("cpu", "lag", psi.cpu.some10, "%", 20, 60, 20, { source: "psi" }));
+  } else {
+    const load =
+      host && host.cpu.cores > 0 ? ((host.cpu.load[0] ?? 0) / host.cpu.cores) * 100 : null;
+    out.push(check("cpu", "lag", load, "%", 100, 200, 20, { source: "load" }));
+  }
+  out.push(check("memory", "lag", psi?.memory?.some10 ?? null, "%", 5, 25, 25));
+  out.push(check("io", "lag", psi?.io?.some10 ?? null, "%", 15, 50, 20));
+
+  // ── Capacity and the dashboard's own signals ──
+  const mem = host?.memory;
+  out.push(
+    check(
+      "ram",
+      "system",
+      mem && mem.total > 0 ? (mem.used / mem.total) * 100 : null,
+      "%",
+      90,
+      98,
+      10
+    )
+  );
+  const disk = host ? diskOf(host, input.dbPath) : null;
+  out.push(
+    check(
+      "disk",
+      "system",
+      disk && disk.total > 0 ? (disk.used / disk.total) * 100 : null,
+      "%",
+      90,
+      98,
+      15,
+      disk ? { mount: disk.mount } : undefined
+    )
+  );
+  const heapMax = input.heap.heapLimit || input.heap.heapTotal;
+  out.push(
+    check(
+      "heap",
+      "system",
+      heapMax > 0 ? (input.heap.heapUsed / heapMax) * 100 : null,
+      "%",
+      70,
+      90,
+      15
+    )
+  );
+
+  // Hooks: not installed is always red; installed, they matter only while an
+  // agent works — then minutes of silence mean the dashboard went blind.
+  const a = input.activity;
+  if (!input.hooksInstalled) {
+    out.push({
+      key: "hooks",
+      group: "system",
+      value: null,
+      unit: "min",
+      level: "bad",
+      warnAt: 10,
+      badAt: 30,
+      penalty: 30,
+      max: 30,
+      detail: { state: "missing" },
+    });
+  } else if (!a || a.working_agents === 0 || !a.last_event_at) {
+    out.push({
+      ...check("hooks", "system", null, "min", 10, 30, 30, { state: "idle" }),
+      level: "ok",
+    });
+  } else {
+    const age = Math.max(0, (now - Date.parse(a.last_event_at)) / 60000);
+    out.push(
+      check("hooks", "system", age, "min", 10, 30, 30, {
+        state: "working",
+        working: a.working_agents,
+      })
+    );
+  }
+
+  const done = a ? a.agents_24h.completed + a.agents_24h.error : 0;
+  out.push(
+    check(
+      "agents",
+      "system",
+      a && done >= MIN_AGENTS ? (a.agents_24h.error / done) * 100 : null,
+      "%",
+      10,
+      30,
+      10,
+      a ? { error: a.agents_24h.error, total: done } : undefined
+    )
+  );
+  return out;
+}
+
+export function healthScore(checks: HealthCheck[]): number {
+  const lost = checks.reduce((s, c) => s + c.penalty, 0);
+  return Math.max(0, Math.min(100, Math.round((100 - lost) * 10) / 10));
+}
+
+/** Green from 90, amber from 70, red below. */
+export function scoreLevel(score: number): Exclude<CheckLevel, "na"> {
+  return score >= 90 ? "ok" : score >= 70 ? "warn" : "bad";
+}

client/src/lib/laneOrderStorage.ts

@@ -7,7 +7,7 @@
  *
  * The order lives in the browser rather than the lanes table on purpose: it is
  * a per-viewer preference, and nothing
- * server-side (the CLI's `agenthub lanes`, the pipeline-stats picker) has an
+ * server-side (the CLI's `agenthub workspaces`, the pipeline-stats picker) has an
  * opinion about it. Ceiling: the order does not follow the user to another
  * browser or to the CLI — move it to a `lanes.sort_order` column if it ever
  * must.

client/src/lib/nativePaste.ts

@@ -8,9 +8,15 @@
  * uploaded or copied. Off, the image is uploaded like a remote browser's. An
  * SSH tunnel's browser also reaches the dashboard by loopback, and its `^V`
  * would read the SERVER's clipboard — that is what turning it off is for.
+ * The server must also be able to read its clipboard (`nativePasteWorks`: on
+ * Linux `wl-paste`/`xclip` and a display) — else the `^V` pasted nothing.
+ * On Windows Claude Code binds its image paste to Alt+V, not Ctrl+V
+ * (`nativePasteKey`): a `^V` there was silently ignored.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
+import { api } from "./api";
+
 export const NATIVE_PASTE_KEY = "agenthub.terminal.nativePaste";
 
 /** True unless this browser turned native image paste off. */
@@ -30,3 +36,36 @@ export function writeNativePaste(on: boolean) {
     /* storage blocked — the default */
   }
 }
+
+let works: boolean | null = null;
+let asked: Promise<void> | null = null;
+// Claude Code's image-paste chord on the dashboard's machine: Ctrl+V, but
+// Alt+V on Windows, where a ^V reaches no binding and pastes nothing.
+let key = "\x16";
+
+/** Whether the dashboard's machine can hand a pane its clipboard, as last
+ *  answered — false until it has (an upload then, which always works). The
+ *  first call asks the server once per page. */
+export function nativePasteWorks(): boolean {
+  asked ??= api.run
+    .nativePaste()
+    .then((r) => {
+      works = r.native === true;
+      key = r.key === "alt+v" ? "\x1bv" : "\x16";
+    })
+    .catch(() => void (works = false));
+  return works === true;
+}
+
+/** The bytes that make the pane's `claude` read its clipboard: ^V, or ESC v
+ *  (Alt+V) on a Windows dashboard. */
+export function nativePasteKey(): string {
+  return key;
+}
+
+/** Test seam: forget the server's answer. */
+export function __resetNativePaste() {
+  works = null;
+  asked = null;
+  key = "\x16";
+}

client/src/lib/promptAttach.ts

@@ -9,8 +9,10 @@
  * dashboard's own machine attaches by path instead of uploading
  * (`localCandidates` — a drag's uri-list, or the plain-text paths a pasted
  * file-manager copy carries —, checked by the server in `sameFilesHere` —
- * `POST /api/run/local-paths` —, `localAttachment`). An attachment is a path
- * sent with the prompt; that check is the one call here to the server.
+ * `POST /api/run/local-paths` —, `localAttachment`), and the pasted or
+ * dropped files that machine's file manager holds (`fileManagerPaths`). An
+ * attachment is a path sent with the prompt; those checks are the calls here
+ * to the server.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -144,6 +146,53 @@ export async function sameFilesHere(paths: string[], files: File[]): Promise<boo
   }
 }
 
+/** A pasted BITMAP (a screenshot), not a copied image FILE: browsers name the
+ *  clipboard's picture `image.png`, while a file manager's copy keeps its own
+ *  name. Only a bitmap goes to `claude`'s own image paste — a copied file is
+ *  pasted by its path, as a native terminal does (`claude` finds no picture
+ *  on a clipboard that holds a file) — and a bitmap that comes WITH text (a
+ *  spreadsheet's cells, a page's selection) is the text's picture: a
+ *  terminal pastes the text. */
+export function isClipboardBitmap(f: File): boolean {
+  return f.type.startsWith("image/") && f.name === "image.png";
+}
+
+/** The pasted or dropped `files` by their own paths on the dashboard's
+ *  machine, as its file manager holds them — a paste on its OS clipboard, a
+ *  drop as its selection, which is what a drag from it carries
+ *  (`POST /api/run/clipboard-files` / `selected-files`): a native terminal's
+ *  paths, and the one way past the upload limit. Null when this is not a
+ *  loopback browser, on a refusal (server mode), or when any file is not
+ *  held under the same name and size (an SSH tunnel's browser pastes
+ *  ANOTHER machine's files). Paths come back in `files`' order. */
+export async function fileManagerPaths(
+  files: File[],
+  from: "paste" | "drop"
+): Promise<string[] | null> {
+  if (!isLocalBrowser() || files.length === 0) return null;
+  try {
+    const { files: held } = await (from === "paste"
+      ? api.run.clipboardFiles()
+      : api.run.selectedFiles());
+    const base = (p: string) =>
+      p
+        .replace(/[\\/]+$/, "")
+        .split(/[\\/]/)
+        .pop() ?? "";
+    const left = [...held];
+    const paths: string[] = [];
+    for (const f of files) {
+      const i = left.findIndex((h) => base(h.path) === f.name && (h.dir || h.size === f.size));
+      if (i < 0) return null;
+      paths.push(left[i]!.path.replace(/(.)[\\/]+$/, "$1"));
+      left.splice(i, 1);
+    }
+    return paths;
+  } catch {
+    return null;
+  }
+}
+
 /** The local files a drop or a paste names as `file://` URIs (a file
  *  manager's, an editor's), as absolute paths — or null when it names none,
  *  or anything that is not one. `file:///C:/x` is `C:/x`. */
@@ -169,9 +218,11 @@ export function droppedFilePaths(dt: DataTransfer | null | undefined): string[]
 
 /** A file on this machine, by its absolute path, as an attachment. */
 export function localAttachment(path: string): Attachment {
+  // A Windows path in `/` form, like `claudeMention` (Windows takes either).
+  const p = /^[A-Za-z]:\\/.test(path) ? path.replace(/\\/g, "/") : path;
   return {
     // A space would end the mention: Claude Code reads `@"…"` whole.
-    path: /\s/.test(path) ? `@"${path}"` : `@${path}`,
+    path: /\s/.test(p) ? `@"${p}"` : `@${p}`,
     name:
       path
         .replace(/[\\/]$/, "")

client/src/lib/settingsSearch.ts

@@ -329,6 +329,12 @@ export const SETTINGS_INDEX: {
     ],
     to: "#tool-profiles",
   },
+  {
+    section: "agents",
+    titleKey: "poolAccount.title",
+    keywords: ["pool", "account", "switch", "quota", "tài khoản", "pool account"],
+    to: "#pool-account",
+  },
   { section: "agents/claude-code", titleKey: "ccConfig:backups.title", keywords: ["restore"] },
   { section: "agents/codex", titleKey: "codexHooks.title" },
   { section: "agents/codex", titleKey: "codexHome.title" },

client/src/lib/types.ts

@@ -732,10 +732,9 @@ export interface Session {
   /** The AI coding CLI that produced the session: `"claude"` (the default —
    * Claude Code's hooks and imported transcripts), `"codex"` (Codex's rollout
    * journals and hooks), `"antigravity"` (agy's conversation files and
-   * hooks), `"cursor"` (Cursor's agent transcripts, no tokens), `"omp"`,
-   * `"opencode"` (their own session stores, with tokens and subagents) or
-   * `"grok"` (Grok running the Claude hooks, no tokens). Maps to
-   * `sessions.tool`. */
+   * hooks), `"cursor"` (Cursor's agent transcripts, no tokens) or `"omp"`
+   * (its own session journals, with tokens and subagents). Rows an older build
+   * wrote may still say `"opencode"` or `"grok"`. Maps to `sessions.tool`. */
   tool?: string;
   /** The workspace (lane id) that owns the session — the one whose pane held
    * it; null for a session no workspace started.
@@ -747,6 +746,15 @@ export interface Session {
   /** ISO time the user pinned the session to the top of its workspace's
    * sidebar list; null when not pinned. Maps to `sessions.pinned_at`. */
   pinned_at?: string | null;
+  /** Server mode, `GET /api/sessions` only: the account owning the session's
+   * workspace (null when no workspace owns it). Absent in local mode. */
+  owner_id?: number | null;
+  /** That owner's username (`users.username`). */
+  owner_name?: string | null;
+  /** That owner's display name (`users.display_name`); null when none is set. */
+  owner_display_name?: string | null;
+  /** When that owner's avatar was last set (`users.avatar_at`); null = none. */
+  owner_avatar_at?: string | null;
 }
 
 /**
@@ -1217,7 +1225,7 @@ export interface CostResult {
 
 /** GET /api/pricing/quota: plan quota spent per native tool (server/lib/quota.js). */
 export interface ToolQuota {
-  id: "claude" | "codex" | "antigravity" | "cursor" | "grok" | "kimi" | "opencode";
+  id: "claude" | "codex" | "antigravity" | "cursor";
   /** One per plan window: `5h`, `wk`, `mo`, …; `usedPercent` is 0–100.
    *  `group` names the model pool a window belongs to (Antigravity's). */
   windows: Array<{
@@ -2634,7 +2642,7 @@ export interface LaneNode {
   icon: string;
   gate: boolean;
   /** The one command that drives this node — a slash command
-   *  (`/superpowers:writing-plans`) or a shell one (`agenthub lanes hook ci-gate`),
+   *  (`/superpowers:writing-plans`) or a shell one (`agenthub workspace hook ci-gate`),
    *  from the pipeline template. Empty string for a node with no single driver
    *  (`done`, or a gate another agent declares). Display text only; the
    *  dashboard never runs it. Optional in the type only because the archived
@@ -3236,6 +3244,10 @@ export interface TranscriptContent {
   /** Present on a Write/Edit/MultiEdit "tool_result": the lines it added and
    *  removed (from Claude Code's `structuredPatch`). */
   diff?: { added: number; removed: number };
+  /** Present on an Agent/Task "tool_result" whose subagent (or one it started)
+   *  wrote or edited files: each file with its +/- lines (`counted`: the
+   *  results carried them). Read from the subagent's own transcript. */
+  edits?: { path: string; added: number; removed: number; counted: boolean }[];
   /** Present on an AskUserQuestion "tool_result": question text → the option
    *  the user picked, or what they typed. */
   answers?: Record<string, string>;
@@ -3320,6 +3332,10 @@ export interface TranscriptResult {
   last_line: number;
   /** JSONL line number of the first message in this page. */
   first_line: number;
+  /** Claude only, when the page starts in the middle of a turn: the files
+   *  that turn changed before the page's first message — the chat adds them
+   *  to the turn's "Edited N files" card. */
+  turn_edits?: { path: string; added: number; removed: number; counted: boolean }[];
 }
 
 /** One entry in a session's transcript picker (main agent, a subagent, or a

client/src/main.tsx

@@ -1,6 +1,6 @@
 /**
  * @file main.tsx
- * @description Vite client entry point. Bootstraps React 18, loads global styles,
+ * @description Vite client entry point. Bootstraps React 19, loads global styles,
  * registers the service worker, prefetches the Workspace chunk on a `/workspace`
  * deep link, and mounts {@link App} into `#root` once the active locale is loaded.
  *

client/src/pages/Administration.tsx

@@ -1,42 +1,32 @@
 /**
  * @file Administration.tsx
  * @description The Administration page (`/admin`, a sidebar item; `/users`
- * redirects here), server mode only and only for an admin or analyst: a tab
- * shell like `History.tsx`, the active tab in `?tab=` — **Users** (the
- * accounts, the account pool and the audit log, `Users.tsx`) and **Server**
- * (the machine's hardware and each user's share of it, `ServerPanel`).
- * Local mode and a developer are sent home, like the Users page always did.
+ * redirects here), server mode only and only for an admin or analyst — ONE
+ * page, no tabs: ONE users table holding every per-user account fact (account,
+ * spend, home, tmux; each row expands in
+ * place into that user's detail), the account pool, then the audit log — all
+ * from `Users.tsx`. The machine and each user's live CPU / RAM live on the
+ * Dashboard's System Health tab (`HostHealth.tsx`). Local mode and a developer are sent home, like the
+ * Users page always did.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
-import type { ComponentType } from "react";
-import { Navigate, useSearchParams } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Server, ShieldCheck, Users as UsersIcon } from "lucide-react";
-import { PageTabs } from "../components/PageTabs";
+import { ShieldCheck } from "lucide-react";
 import { useAuth } from "../components/AuthGate";
-import { ServerPanel } from "../components/admin/ServerPanel";
+import { useHostStats } from "../components/health/HostHealth";
 import { Users } from "./Users";
 
-interface AdminTab {
-  id: string;
-  label: string;
-  Icon: ComponentType<{ className?: string }>;
-}
-
 export function Administration() {
   const { t } = useTranslation("admin");
   const auth = useAuth();
-  const [params, setParams] = useSearchParams();
   const me = auth.state.mode === "server" ? auth.state.user : null;
+  const staff = !!me && me.role !== "developer";
+  // Read once, for each home's share of the homes disk. The machine and each
+  // user's live CPU / RAM are on the Dashboard's System Health tab.
+  const host = useHostStats(staff, 0);
 
-  if (!me || me.role === "developer") return <Navigate to="/" replace />;
-
-  const tabs: AdminTab[] = [
-    { id: "users", label: t("tabs.users"), Icon: UsersIcon },
-    { id: "server", label: t("tabs.server"), Icon: Server },
-  ];
-  const first = tabs[0]!;
-  const active = tabs.find((x) => x.id === params.get("tab")) ?? first;
+  if (!staff) return <Navigate to="/" replace />;
 
   return (
     <div className="animate-fade-in space-y-6">
@@ -49,18 +39,7 @@ export function Administration() {
           <p className="text-xs text-fg-muted">{t("description")}</p>
         </div>
       </div>
-      <PageTabs
-        ariaLabel={t("title")}
-        activeId={active.id}
-        onSelect={(id) => setParams(id === first.id ? {} : { tab: id }, { replace: true })}
-        tabs={tabs}
-      >
-        {active.id === "server" ? (
-          <ServerPanel isAdmin={me.role === "admin"} />
-        ) : (
-          <Users embedded />
-        )}
-      </PageTabs>
+      <Users embedded host={host} />
     </div>
   );
 }

client/src/pages/AiProxyConfig.tsx

@@ -30,6 +30,8 @@
  * — on the DASHBOARD's host at `NINE_ROUTER_PORT` (`nineRouterUrl`), never the
  * viewer's own localhost: a teammate on the LAN has no 9router of their own.
  * It is shown only when the server finds a `9router` binary installed.
+ * Beside it every user gets **Update 9router** (`NineRouterUpdate`): shut it
+ * down, `npm install -g 9router@latest`, start it again hidden.
  *
  * **Test** asks the endpoint itself, once as Claude Code would
  * (`/v1/messages`) and once as Codex would (`/v1/responses`), one line each.
@@ -54,6 +56,7 @@ import { confirmDialog } from "../lib/confirm";
 import { copyText } from "../lib/clipboard";
 import { useDialog } from "../hooks/useDialog";
 import { useAuth } from "../components/AuthGate";
+import { NineRouterUpdate } from "../components/settings/NineRouterUpdate";
 
 const NINE_ROUTER_PORT = 20128;
 
@@ -271,6 +274,7 @@ export function AiProxyConfig() {
               {t("aiProxy.config9router")}
             </a>
           )}
+          {nineRouter && <NineRouterUpdate />}
           <button
             type="button"
             onClick={startAdd}

client/src/pages/CcConfig.tsx

@@ -16,6 +16,11 @@
  * files, and the `MdItemList` artifacts) also opens a
  * right-click menu that repeats those buttons — same handlers, same
  * confirm path — plus Copy name/path.
+ * Server mode, a non-admin with their own Linux account (S3): the page is
+ * THEIR config (`useCcTarget`, labelled as such, no project layer unless a
+ * workspace is named), and the host-wide controls — Switch profile, Update
+ * all, AgentHub's own Claude settings — are an admin's and hidden (the server
+ * refuses them anyway).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -126,6 +131,8 @@ import { ScopeBadge } from "../components/config/ScopeBadge";
 import { ConfigTabBar } from "../components/config/ConfigTabBar";
 import { ProjectMemoryModal } from "../components/config/ProjectMemoryModal";
 import { ClaudeAgentHubSettings } from "../components/settings/ClaudeAgentHubSettings";
+import { usePermissions } from "../components/AuthGate";
+import { useCcTarget } from "../hooks/useCcTarget";
 import {
   Empty,
   SkeletonRows,
@@ -516,8 +523,14 @@ export function CcConfig() {
 
   const wsConnected = useSyncExternalStore(eventBus.onConnection, () => eventBus.connected);
   const projectRoot = data.overview?.roots.projectRoot ?? null;
-  // Project files under the plugin cache are wiped by the next plugin update.
-  const projectDisabled = isPluginCachePath(projectRoot);
+  // Server mode: whose config this is. The host-wide controls are an admin's.
+  const { isAdmin } = usePermissions();
+  const ccTarget = useCcTarget();
+  const ownHome = ccTarget?.kind === "own" ? ccTarget.claudeHome : null;
+  // Project files under the plugin cache are wiped by the next plugin update;
+  // a member's own config has no project layer at all.
+  const projectDisabled =
+    isPluginCachePath(projectRoot) || (!!data.overview && projectRoot === null);
   useEffect(() => {
     if (projectDisabled && scope === "project") setScope("all");
   }, [projectDisabled, scope]);
@@ -681,6 +694,8 @@ export function CcConfig() {
         }}
         onOpenBackups={() => setBackupsOpen(true)}
         wsConnected={wsConnected}
+        showProfiles={isAdmin}
+        ownHome={ownHome}
       />
 
       <Tabs current={tab} onSelect={(k) => void setTab(k)} counts={data.overview?.counts} />
@@ -777,7 +792,7 @@ export function CcConfig() {
 
       {/* AgentHub's own Claude Code settings follow the overview, outside the
           list's search box and scope. */}
-      {tab === "overview" && (
+      {tab === "overview" && isAdmin && (
         <ClaudeAgentHubSettings key={agenthubKey} onHomeChanged={() => void fetchAll()} />
       )}
 
@@ -820,10 +835,22 @@ interface HeaderProps {
   onRefresh: () => void;
   onOpenBackups: () => void;
   wsConnected: boolean;
+  /** The host's login profiles link: an admin's (and local mode's). */
+  showProfiles?: boolean;
+  /** A member's own Claude home (server mode, S3): the page says whose it is. */
+  ownHome?: string | null;
 }
 
 /** The page's toolbar. No title of its own: the Settings hub already draws one. */
-function Header({ loading, lastUpdated, onRefresh, onOpenBackups, wsConnected }: HeaderProps) {
+function Header({
+  loading,
+  lastUpdated,
+  onRefresh,
+  onOpenBackups,
+  wsConnected,
+  showProfiles = true,
+  ownHome = null,
+}: HeaderProps) {
   const { t } = useTranslation("ccConfig");
   const settingsHref = useSettingsHref();
   const { t: tCommon } = useTranslation("common");
@@ -848,18 +875,30 @@ function Header({ loading, lastUpdated, onRefresh, onOpenBackups, wsConnected }:
             {tCommon("offline")}
           </span>
         )}
-        <p className="text-xs text-fg-muted max-w-2xl">{t("subtitle")}</p>
+        {ownHome ? (
+          <div className="min-w-0">
+            <p className="text-xs font-medium text-fg-primary" data-testid="cc-own-config">
+              {t("own.label", { home: ownHome })}
+            </p>
+            <p className="text-xs text-fg-muted max-w-2xl">{t("own.subtitle")}</p>
+          </div>
+        ) : (
+          <p className="text-xs text-fg-muted max-w-2xl">{t("subtitle")}</p>
+        )}
       </div>
       <div className="flex flex-col items-stretch lg:items-end gap-2 flex-shrink-0">
         <div className="flex items-center gap-2 justify-end flex-wrap">
-          {/* Every AI tool's login profiles live in one place: Settings → AI tools. */}
-          <Link
-            to={settingsHref("agents#tool-profiles")}
-            className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 transition-colors"
-          >
-            <UserCog className="w-3.5 h-3.5" />
-            {t("profiles.openButton")}
-          </Link>
+          {/* Every AI tool's login profiles live in one place: Settings → AI tools.
+              The host's logins: an admin's. */}
+          {showProfiles && (
+            <Link
+              to={settingsHref("agents#tool-profiles")}
+              className="inline-flex items-center gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-xs font-medium text-fg-secondary hover:bg-surface-3 transition-colors"
+            >
+              <UserCog className="w-3.5 h-3.5" />
+              {t("profiles.openButton")}
+            </Link>
+          )}
           <button
             type="button"
             onClick={onOpenBackups}
@@ -1290,18 +1329,31 @@ function OverviewPanel({ overview }: { overview: CcOverview | null }) {
           {t("overview.rootsTitle")}
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-          <RootRow
-            icon={FolderTree}
-            tone="emerald"
-            label={t("overview.projectClaudeDir")}
-            value={roots.projectClaudeDir}
-          />
-          <RootRow
-            icon={FolderTree}
-            tone="violet"
-            label={t("overview.projectRoot")}
-            value={roots.projectRoot}
-          />
+          {/* A member's own config has no project layer: their Claude home instead. */}
+          {roots.projectRoot === null && (
+            <RootRow
+              icon={FolderTree}
+              tone="emerald"
+              label={t("overview.claudeHome")}
+              value={roots.claudeHome}
+            />
+          )}
+          {roots.projectClaudeDir !== null && (
+            <RootRow
+              icon={FolderTree}
+              tone="emerald"
+              label={t("overview.projectClaudeDir")}
+              value={roots.projectClaudeDir}
+            />
+          )}
+          {roots.projectRoot !== null && (
+            <RootRow
+              icon={FolderTree}
+              tone="violet"
+              label={t("overview.projectRoot")}
+              value={roots.projectRoot}
+            />
+          )}
           <RootRow
             icon={FileText}
             tone="amber"
@@ -1718,6 +1770,7 @@ function PluginsPanel({
   onChanged: () => void;
 }) {
   const { t } = useTranslation("ccConfig");
+  const { isAdmin } = usePermissions();
   const { busy, run } = useConfigAction(onToast, onChanged);
   const [input, setInput] = useState("");
   const [available, setAvailable] = useState<CcAvailablePlugin[] | null>(null);
@@ -1785,7 +1838,8 @@ function PluginsPanel({
         commands={[{ cmd: t("explain.plugins.installCmd"), note: "" }]}
       />
 
-      <UpdateAllCard onToast={onToast} onChanged={onChanged} />
+      {/* Update all runs on the host's plugins (AgentHub's own included): an admin's. */}
+      {isAdmin && <UpdateAllCard onToast={onToast} onChanged={onChanged} />}
 
       <div className="rounded-lg border border-accent/25 bg-accent/5 px-3 py-2.5">
         <div className="text-[11px] font-semibold text-fg-secondary mb-1.5">

client/src/pages/Sessions.tsx

@@ -1,6 +1,6 @@
 /**
  * @file Sessions.tsx
- * @description Displays a list of all recorded sessions with filtering, searching, and pagination features; a row's right-click opens `SessionRowMenu`. Sessions are updated in real-time based on events received from the event bus.
+ * @description Displays a list of all recorded sessions with filtering, searching, and pagination features; columns include the AI tool and (server-mode admins) the owning user, and the last column holds the row's actions (open in workspace, `SessionRowMenu` — also on right-click — and details). Sessions are updated in real-time based on events received from the event bus.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 /* =============================================================================
@@ -66,6 +66,8 @@ import {
   Server,
   Download,
   AlertCircle,
+  MoreHorizontal,
+  SquareArrowOutUpRight,
 } from "lucide-react";
 import { api } from "../lib/api";
 import type { RemoteSource, RunHandle } from "../lib/api";
@@ -80,7 +82,8 @@ import { eventBus } from "../lib/eventBus";
 import { isRemoteDataRefreshMessage } from "../lib/remoteDataEvents";
 import { useDataScope } from "../lib/dataScope";
 import { SessionStatusBadge } from "../components/StatusBadge";
-import { SessionToolBadge } from "../components/SessionToolBadge";
+import { AiToolIcon } from "../components/AiToolIcon";
+import { UserAvatar } from "../components/users/UserAvatar";
 import { EmptyState } from "../components/EmptyState";
 import { TableRowSkeleton } from "../components/Skeleton";
 import { useContextMenu } from "../components/ContextMenu";
@@ -91,12 +94,16 @@ import type { Session, DashboardEvent } from "../lib/types";
 import { usePermissions } from "../components/AuthGate";
 
 const PAGE_SIZE = 10;
+const TH =
+  "px-4 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider whitespace-nowrap";
+const ACTION_ICON =
+  "inline-flex items-center justify-center w-7 h-7 rounded-md text-fg-muted hover:text-fg-primary hover:bg-surface-3 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent";
 
 export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
   const navigate = useNavigate();
   const rowCtx = useContextMenu<Session>();
   const { t } = useTranslation("sessions");
-  const { tools } = useAiTools();
+  const { tools, label: toolLabel } = useAiTools();
   const { lanes } = useLanes();
   // Filters, sort and page live in the URL (replace, no history spam), so a
   // reload, the back button and a shared link all land on the same view.
@@ -185,7 +192,11 @@ export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
   // Load remote-source labels so remote-origin rows can show a friendly badge
   // instead of a raw `src_…` id. Refreshed when a source's status changes.
   // Staff only: a developer's /api/remote-sources is a 403 (STAFF_ONLY_PREFIXES).
-  const { seesAll } = usePermissions();
+  const { seesAll, isAdmin, local } = usePermissions();
+  // Who owns each session: an admin's column only, and only where there are
+  // accounts (server mode; the API sends no owner in local mode).
+  const showUser = isAdmin && !local;
+  const columns = showUser ? 10 : 9;
   const loadSourceLabels = useCallback(() => {
     if (!seesAll) return;
     api.remoteSources
@@ -581,31 +592,19 @@ export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
             role="region"
             aria-label={t("tableRegion")}
           >
-            <table className="w-full min-w-[800px]">
+            <table className="w-full min-w-[960px]">
               <thead>
-                <tr className="border-b border-border text-left">
-                  <th className="px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
-                    {t("tableSession")}
-                  </th>
-                  <th className="px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
-                    {t("tableStatus")}
-                  </th>
-                  <th className="px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
-                    {t("tableLastActive")}
-                  </th>
-                  <th className="px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
-                    {t("tableDuration")}
-                  </th>
-                  <th className="px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
-                    {t("tableAgents")}
-                  </th>
-                  <th className="px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
-                    {t("tableCost")}
-                  </th>
-                  <th className="px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider">
-                    {t("tableDirectory")}
-                  </th>
-                  <th className="w-10"></th>
+                <tr className="border-b border-border text-left bg-surface-2/40">
+                  <th className={TH}>{t("tableSession")}</th>
+                  {showUser && <th className={TH}>{t("tableUser")}</th>}
+                  <th className={TH}>{t("tableTool")}</th>
+                  <th className={TH}>{t("tableStatus")}</th>
+                  <th className={TH}>{t("tableLastActive")}</th>
+                  <th className={`${TH} text-right`}>{t("tableDuration")}</th>
+                  <th className={`${TH} text-right`}>{t("tableAgents")}</th>
+                  <th className={`${TH} text-right`}>{t("tableCost")}</th>
+                  <th className={TH}>{t("tableDirectory")}</th>
+                  <th className={`${TH} text-right`}>{t("tableActions")}</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-border">
@@ -613,94 +612,174 @@ export function Sessions({ embedded = false }: { embedded?: boolean } = {}) {
                   ? Array.from({ length: 8 }).map((_, i) => (
                       <TableRowSkeleton
                         key={`sk-${i}`}
-                        columns={8}
-                        widths={["w-40", "w-20", "w-28", "w-20", "w-10", "w-16", "w-44", "w-4"]}
+                        columns={columns}
+                        widths={[
+                          "w-40",
+                          ...(showUser ? ["w-24"] : []),
+                          "w-20",
+                          "w-20",
+                          "w-28",
+                          "w-16",
+                          "w-8",
+                          "w-14",
+                          "w-40",
+                          "w-20",
+                        ]}
                       />
                     ))
                   : null}
-                {paged.map((session) => (
-                  <tr
-                    key={session.id}
-                    // Mouse convenience; the session name below is the real,
-                    // focusable link (a click on a link or button inside wins).
-                    onClick={(e) => {
-                      if ((e.target as HTMLElement).closest("a,button")) return;
-                      navigate(`/sessions/${session.id}`);
-                    }}
-                    onContextMenu={(e) => rowCtx.open(e, session)}
-                    className="hover:bg-surface-4 transition-colors cursor-pointer group"
-                  >
-                    <td className="px-5 py-4">
-                      <div>
-                        <div className="flex items-center gap-2">
+                {paged.map((session) => {
+                  const toolId = session.tool || "claude";
+                  // A live dashboard pane holds it: open that pane; else its
+                  // workspace's replay, when a workspace owns it.
+                  const live = runs.some((r) => r.sessionId === session.id);
+                  const href = workspaceHref(session, runs);
+                  const owner = session.owner_display_name || session.owner_name;
+                  return (
+                    <tr
+                      key={session.id}
+                      // Mouse convenience; the session name below is the real,
+                      // focusable link (a click on a link or button inside wins).
+                      onClick={(e) => {
+                        if ((e.target as HTMLElement).closest("a,button")) return;
+                        navigate(`/sessions/${session.id}`);
+                      }}
+                      onContextMenu={(e) => rowCtx.open(e, session)}
+                      className="hover:bg-surface-3/60 transition-colors cursor-pointer group"
+                    >
+                      <td className="px-4 py-3 max-w-[22rem]">
+                        <div className="flex items-center gap-2 min-w-0">
                           <Link
                             to={`/sessions/${session.id}`}
-                            className="text-sm font-medium text-fg-secondary hover:text-fg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent rounded"
+                            title={session.name || undefined}
+                            className="truncate text-sm font-medium text-fg-primary hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent rounded"
                           >
                             {session.name || `${t("defaultName")}${session.id.slice(0, 8)}`}
                           </Link>
-                          <SessionToolBadge tool={session.tool} />
                           {session.source && session.source !== "local" && (
                             <span
-                              className="inline-flex items-center gap-1 text-[10px] font-semibold text-syntax-builtin bg-surface-3 border border-border px-1.5 py-0.5 rounded-full"
+                              className="inline-flex flex-shrink-0 items-center gap-1 text-[10px] font-semibold text-syntax-builtin bg-surface-3 border border-border px-1.5 py-0.5 rounded-full"
                               title={t("remoteSourceBadgeTitle", "Collected from a remote machine")}
                             >
                               <Server className="w-2.5 h-2.5" />
                               {sourceLabels.get(session.source) || session.source}
                             </span>
                           )}
-                          {(() => {
-                            // A live dashboard pane holds it: open that pane.
-                            const run = runs.find((r) => r.sessionId === session.id);
-                            const href = run ? workspaceHref(session, runs) : null;
-                            return href ? (
-                              <Link
-                                to={href}
-                                className="inline-flex items-center gap-1 text-[10px] font-semibold text-status-success bg-status-success/10 border border-status-success/25 hover:bg-status-success/20 hover:text-status-success px-1.5 py-0.5 rounded-full transition-colors"
-                                title={t("openInWorkspaceTitle")}
-                              >
-                                <Play className="w-2.5 h-2.5" />
-                                {t("openInWorkspace")}
-                              </Link>
-                            ) : null;
-                          })()}
                         </div>
                         <p className="text-[11px] text-fg-muted font-mono">
                           {session.id.slice(0, 12)}
                         </p>
-                      </div>
-                    </td>
-                    <td className="px-5 py-4">
-                      <SessionStatusBadge
-                        status={effectiveSessionStatus(session)}
-                        reason={sessionAwaitingReason(session)}
-                      />
-                    </td>
-                    <td className="px-5 py-4 text-sm text-fg-secondary">
-                      {formatDateTime(session.last_activity || session.started_at)}
-                    </td>
-                    <td className="px-5 py-4 text-sm text-fg-secondary font-mono">
-                      {session.ended_at
-                        ? formatDuration(session.started_at, session.ended_at)
-                        : t("common:running")}
-                    </td>
-                    <td className="px-5 py-4 text-sm text-fg-secondary">
-                      {session.agent_count ?? "-"}
-                    </td>
-                    <td className="px-5 py-4 text-sm text-fg-secondary font-mono">
-                      {session.cost != null && session.cost > 0 ? fmtCost(session.cost) : "-"}
-                    </td>
-                    <td
-                      className="px-5 py-4 text-[11px] text-fg-muted font-mono"
-                      title={session.cwd || undefined}
-                    >
-                      {session.cwd ? truncate(session.cwd, 30) : "-"}
-                    </td>
-                    <td className="px-3 py-4">
-                      <ChevronRight className="w-4 h-4 text-fg-muted group-hover:text-fg-secondary transition-colors" />
-                    </td>
-                  </tr>
-                ))}
+                      </td>
+                      {showUser && (
+                        <td className="px-4 py-3">
+                          {owner ? (
+                            <div
+                              className="flex items-center gap-2 min-w-0"
+                              title={session.owner_name || undefined}
+                            >
+                              <UserAvatar
+                                name={owner}
+                                userId={session.owner_id ?? undefined}
+                                avatarAt={session.owner_avatar_at}
+                                className="h-6 w-6 text-[10px]"
+                              />
+                              <span className="truncate text-sm text-fg-secondary max-w-[9rem]">
+                                {owner}
+                              </span>
+                            </div>
+                          ) : (
+                            <span className="text-xs text-fg-muted" title={t("noOwner")}>
+                              -
+                            </span>
+                          )}
+                        </td>
+                      )}
+                      <td className="px-4 py-3">
+                        <div
+                          className="flex items-center gap-2"
+                          title={t("toolBadgeTitle", { tool: toolLabel(toolId) })}
+                        >
+                          <AiToolIcon
+                            tool={{ id: toolId, label: toolLabel(toolId) }}
+                            className="h-6 w-6"
+                          />
+                          <span className="text-sm text-fg-secondary whitespace-nowrap">
+                            {toolLabel(toolId)}
+                          </span>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3">
+                        <SessionStatusBadge
+                          status={effectiveSessionStatus(session)}
+                          reason={sessionAwaitingReason(session)}
+                        />
+                      </td>
+                      <td className="px-4 py-3 text-sm text-fg-secondary whitespace-nowrap">
+                        {formatDateTime(session.last_activity || session.started_at)}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-fg-secondary font-mono text-right whitespace-nowrap">
+                        {session.ended_at
+                          ? formatDuration(session.started_at, session.ended_at)
+                          : t("common:running")}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-fg-secondary text-right tabular-nums">
+                        {session.agent_count ?? "-"}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-fg-secondary font-mono text-right">
+                        {session.cost != null && session.cost > 0 ? fmtCost(session.cost) : "-"}
+                      </td>
+                      <td
+                        className="px-4 py-3 text-[11px] text-fg-muted font-mono"
+                        title={session.cwd || undefined}
+                      >
+                        {session.cwd ? truncate(session.cwd, 30) : "-"}
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center justify-end gap-1">
+                          {href &&
+                            (live ? (
+                              <Link
+                                to={href}
+                                className="inline-flex items-center gap-1 whitespace-nowrap text-[11px] font-semibold text-status-success bg-status-success/10 border border-status-success/25 hover:bg-status-success/20 hover:text-status-success px-2 py-1 rounded-md transition-colors"
+                                title={t("openInWorkspaceTitle")}
+                              >
+                                <Play className="w-3 h-3" />
+                                {t("openInWorkspace")}
+                              </Link>
+                            ) : (
+                              <Link
+                                to={href}
+                                className={ACTION_ICON}
+                                title={t("menu.inWorkspace")}
+                                aria-label={t("menu.inWorkspace")}
+                              >
+                                <SquareArrowOutUpRight className="w-4 h-4" />
+                              </Link>
+                            ))}
+                          <button
+                            type="button"
+                            onClick={(e) => rowCtx.open(e, session)}
+                            className={ACTION_ICON}
+                            title={t("moreActions")}
+                            aria-label={t("moreActions")}
+                            aria-haspopup="menu"
+                          >
+                            <MoreHorizontal className="w-4 h-4" />
+                          </button>
+                          <Link
+                            to={`/sessions/${session.id}`}
+                            className={ACTION_ICON}
+                            title={t("viewDetails")}
+                            aria-label={t("viewDetails")}
+                            tabIndex={-1}
+                          >
+                            <ChevronRight className="w-4 h-4" />
+                          </Link>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
               </tbody>
             </table>
           </div>

client/src/pages/SettingsHub.tsx

@@ -27,6 +27,9 @@
  * /workspace, `lib/settingsLink.ts`): the same pages, every link kept in the
  * tab (replaced, as a tab click), no Back link, and Ctrl/Cmd+F left alone
  * while the tab is hidden behind a session.
+ * Server mode hides every tool page from a non-admin, except Claude Code for a
+ * non-admin with their own Linux account (`useCcTarget`): "Your Claude Code
+ * config", which they manage as themselves.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import {
@@ -70,11 +73,13 @@ import { AgentInstructionsSettings } from "../components/settings/AgentInstructi
 import { SessionDefaultsSettings } from "../components/settings/SessionDefaultsSettings";
 import { ArtifactsHubSettings } from "../components/settings/ArtifactsHubSettings";
 import { ToolProfilesSettings } from "../components/settings/ToolProfilesSettings";
+import { PoolAccountSettings } from "../components/settings/PoolAccountSettings";
 import { OmpSharingSettings } from "../components/settings/OmpSharingSettings";
 import { PricingSettings } from "../components/settings/PricingSettings";
 import { WorktreeVisibilitySettings } from "../components/settings/WorktreeVisibilitySettings";
 import { ChangesPanelSettings } from "../components/settings/ChangesPanelSettings";
 import { useAiTools } from "../hooks/useAiTools";
+import { useCcTarget } from "../hooks/useCcTarget";
 import {
   rankSettings,
   rankSettingsEntries,
@@ -248,10 +253,14 @@ export function SettingsHub({ section }: { section?: string } = {}) {
     };
   }, [location.key, location.hash]);
 
-  const { isAdmin, local } = usePermissions();
+  const { isAdmin, local, seesAll } = usePermissions();
   const authState = useAuth().state;
   const signedIn = authState.mode === "server" && !!authState.user;
   const enabled = (id: string) => aiTools.byId(id)?.enabled !== false;
+  // Server mode: a non-admin with their own Linux account (S3) manages their
+  // OWN Claude Code config here; the host's stays an admin's.
+  const ccTarget = useCcTarget();
+  const ownClaude = !isAdmin && ccTarget?.kind === "own";
   const s = (key: string) => ({
     title: t(`settingsNav.section.${key}.title`),
     description: t(`settingsNav.section.${key}.description`),
@@ -299,8 +308,11 @@ export function SettingsHub({ section }: { section?: string } = {}) {
           <AgentInstructionsSettings />
           <SessionDefaultsSettings />
           <AiToolsSettings settingsHref={toolHref} />
-          {/* Every AI tool's login profiles, linked to the account pool. */}
-          <ToolProfilesSettings />
+          {/* Every AI tool's login profiles, linked to the account pool: the
+              host's logins, a staff-only read (a developer would get 403s). */}
+          {seesAll && <ToolProfilesSettings />}
+          {/* Every user's own pick of a pool account (server mode; hides itself). */}
+          <PoolAccountSettings />
           {/* The Hub's install switch: server mode, an admin's (it hides itself). */}
           <ArtifactsHubSettings />
           {/* The host's omp login for members: server mode + S3, an admin's. */}
@@ -315,7 +327,7 @@ export function SettingsHub({ section }: { section?: string } = {}) {
             group: "agents" as const,
             tool: "claude",
             Icon: toolNavIcon("claude", "Claude Code"),
-            ...s("claudeCode"),
+            ...s(ownClaude ? "claudeCodeOwn" : "claudeCode"),
             render: () => <CcConfig />,
           },
         ]
@@ -439,7 +451,10 @@ export function SettingsHub({ section }: { section?: string } = {}) {
   // server answers 403 EADMIN), so its pages — every tool's too — are hidden.
   const sections = isAdmin
     ? allSections
-    : allSections.filter((x) => !x.tool && !ADMIN_SECTIONS.has(x.id));
+    : allSections.filter(
+        (x) =>
+          (!x.tool && !ADMIN_SECTIONS.has(x.id)) || (ownClaude && x.id === "agents/claude-code")
+      );
   const navSections = sections.filter((x) => !x.tool);
   const toolTabs = sections.filter((x) => x.tool);
   function toolHref(id: string) {