chore: v2.8.53 — chat + menu opens downward when there is no room above

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

.claude/settings.local.json

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

ARCHITECTURE.md

@@ -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 |
@@ -387,7 +388,11 @@ graph TD
 | `lib/lane-features.js`    | (B) Per-feature state and archive. `activateFeature` archives the lane's current active feature (if different) and restores the target's saved stage onto the live `lanes` row — the row stays the one live view every other reader already uses. `canonicalizeSlug` is a DELIBERATELY separate rule from `worktree.js:slugify` (drops a leading `feat/`, keeps `[A-Za-z0-9._-]`, does not lowercase) — the two must never be conflated. `clearLane` (`lib/lanes.js`) archives the active feature (if any) before resetting; a lane that never activated one is unaffected |
 | `lib/git-diff.js`         | (#34/#35) Reads a lane's code changes as structured hunks for the Workspace Changes panel — `work` (HEAD vs the working tree, untracked files included), `branch` (`<base>...HEAD`) or `commit` (one sha), at a caller-chosen `context` (default 3, clamped to 5000, which is how the viewer expands a diff towards the whole file). Also the four reads behind History, the whole-file view, quick-open and the file explorer: `listCommits`, `readFileAt` (the `work` revision is realpath-confined to the lane; anything else goes through `git show`), `listPaths` and `listTree` (both `git ls-files`, so `.gitignore` is honoured without a skip-list; in a folder that is not a git repo they, and `listTreeAll`, read the disk instead through `walkFolder` — realpath-confined, symlinks never followed, `.git` hidden, `node_modules` never entered, 20 000 entries at most). Read-only, argv-only through `worktree.js:git()`. An untracked file's patch is SYNTHESIZED from the file itself rather than fetched with `git diff --no-index`, which exits non-zero on a difference and would read as a failure. Three caps (300 files, 200 KB per file, 1 MB per full read) keep a lane mid-build from shipping megabytes of patch into a browser; a cap that bit sets `truncated` |
 | `lib/lane-file-transfer.js` | (#78) The Files tab's download and upload. `openDownload` streams one working file of any type (up to 512 MB) behind the file read's guards (`lanePath`, `resolveInLane` realpath confinement, `isSecretOnDisk`, `openSafe` for a member's file); the route serves it as an `application/octet-stream` attachment under a `sandbox` CSP with `nosniff`. `saveUpload` only CREATES (`EEXISTS` for a taken name, a symlink included), into an existing folder, never under `.git`, never a secret name, at most 25 MB — under S3 as the folder's member through `write-as`, else with an exclusive `wx` create. Works in a folder that is not a git repo |
-| `lib/git-ops.js`          | (#34) The git WRITES a lane offers: `fetch`, `pull`, `push`, `stage`, `unstage`, `discard`, `stage-hunk`/`discard-hunk` (one hunk, matched by its `@@` line against a fresh diff — or one `block`, a run of +/- lines inside it, the others folded into context by `onlyBlock` in `git-diff.js` (#50); `discard-hunk` needs `confirm:true`), `commit` (everything, or `only:"staged"`), `switch`, `branch-create` (never switches) and `branch-delete` (`-d`, refusing `main`/`master`/`development`/`develop`, the current branch and one another worktree holds), `publish` (`remote add origin -- <url>` + `push -u origin HEAD`, only when the repo has NO remote and a commit; the one write whose destination comes from the request, so the URL is allowlisted by `validateRemoteUrl` — `https://` without userinfo, `ssh://`, scp-like `user@host:path` — and `origin` is removed again when the push fails), and `merge`/`resolve`/`merge-commit`/`merge-abort` (issue #45: a named branch into a clean repo-root lane, conflicts resolved per file, abort behind `confirm:true`), `cherry-pick`/`revert` (a non-merge commit by sha, same guards and conflict flow — `merge-commit`/`merge-abort` finish whichever of the three is open, `operationInProgress` in worktree.js), and `undo-commit` (`reset --soft HEAD~1`, `confirm:true`) / `amend`, both refused once a remote-tracking branch holds HEAD (`EPUSHED`). A caller-supplied path is validated against `git status` before it reaches an argv, so only a path git already reports as changed is reachable; `discard` — the one irreversible action — additionally requires `confirm: true`. No rebase, hard reset or stash, because a dashboard button is the wrong place to start an operation whose recovery needs a terminal (a hard `reset` stays behind worktree.js's three-check destroy guard; `undo-commit`'s soft reset moves only an unpushed branch tip and keeps every change staged). `pull` is ALWAYS `--ff-only` and `switch` refuses a dirty tree, so neither can invent a merge commit or a conflict underneath a running agent; `push` pushes `HEAD`, never a branch name from the request. Network actions carry a 60s timeout |
+| `lib/git-ops.js`          | (#34) The git WRITES a lane offers: `fetch`, `pull`, `push`, `stage`, `unstage`, `discard`, `stage-hunk`/`discard-hunk` (one hunk, matched by its `@@` line against a fresh diff — or one `block`, a run of +/- lines inside it, the others folded into context by `onlyBlock` in `git-diff.js` (#50); `discard-hunk` needs `confirm:true`), `commit` (everything, or `only:"staged"`), `switch`, `branch-create` (never switches) and `branch-delete` (`-d`, refusing `main`/`master`/`development`/`develop`, the current branch and one another worktree holds), `publish` (`remote add origin -- <url>` + `push -u origin HEAD`, only when the repo has NO remote and a commit; the one write whose destination comes from the request, so the URL is allowlisted by `validateRemoteUrl` — `https://` without userinfo, `ssh://`, scp-like `user@host:path` — and `origin` is removed again when the push fails), and `merge`/`resolve`/`merge-commit`/`merge-abort` (issue #45: a named branch into a clean repo-root lane, conflicts resolved per file, abort behind `confirm:true`), `cherry-pick`/`revert` (a non-merge commit by sha, same guards and conflict flow — `merge-commit`/`merge-abort` finish whichever of the three is open, `operationInProgress` in worktree.js), and `undo-commit` (`reset --soft HEAD~1`, `confirm:true`) / `amend`, both refused once a remote-tracking branch holds HEAD (`EPUSHED`). A caller-supplied path is validated against `git status` before it reaches an argv, so only a path git already reports as changed is reachable; `discard` — the one irreversible action — additionally requires `confirm: true`. History rewrites and remote writes are dispatched to `lib/git-rewrite.js` (below); a stopped rebase lets through only `ALLOWED_WHILE_REBASING`. No stash beyond shelves. (`undo-commit`'s soft reset moves only an unpushed branch tip and keeps every change staged.) `pull` is ALWAYS `--ff-only` and `switch` refuses a dirty tree, so neither can invent a merge commit or a conflict underneath a running agent; `push` pushes `HEAD`, never a branch name from the request. Network actions carry a 60s timeout |
+| `lib/git-rewrite.js`      | History rewrites and remote writes, each allowed because its recovery is a button too: `rebase` (+ `rebase-continue`/`-skip`/`-abort`; `merge-commit`/`merge-abort` map onto an open rebase), `rebase-interactive` (todo + messages as 0600 files in the repo's git dir, `cp` as sequence editor, `true` as editor, squash = `fixup` + `exec git commit --amend -F <file>`), `reset` soft/mixed/keep/hard (hard: clean tree + branch name typed back), `undo-rewrite` (`reset --keep <before>` while HEAD is still `after`), `force-push` (`--force-with-lease` on the sha the plan showed, HEAD only, protected names refused unless `AGENTHUB_GIT_FORCE_PUSH_PROTECTED=1`), `remote-branch-delete` (never the default or a protected branch), `remote-add`/`-rename`/`-remove` (URL through `validateRemoteUrl`). Every one: repo root (`ESUBDIR`), no open operation (`EMERGING`), the planned HEAD (`ESTALE`), pushed commits `EPUSHED` unless `force: true`. Plus the reads `rewritePlan` and `listRemotes` (passwords stripped) |
+| `lib/git-conflicts.js`    | The 3-way merge editor's read (`readConflict`: stages :1/:2/:3 by blob id for a path `ls-files -u` lists, the working file and its sha) and save (`conflict-save`: `lane-file-write.js` then `git add`, `EMARKERS` before writing), and the read-only reflog (`readReflog`) |
+| `lib/git-history.js`      | The History tab's READS (via `routes/lane-git-history.js`, plus `/git/log`): the commit graph paged with `skip`, `all=1` and literal search (`q`, a SHA prefix, `author`, `path`) and typed ref badges; one commit's details; its `format-patch` (a secret file left out); a file's `--follow` history; blame at a revision; a tree at a revision; two refs compared (left/right commits, `A...B` or `A B` files, one file's hunks); the plan of a multi-commit pick/revert; a paused pick's sequencer state. Every revision is `SAFE_REV`-checked and resolved to a sha first, every path `lanePath`/`isSecretOnDisk`, walks time out at 20 s, outputs are capped |
+| `lib/git-pick.js`         | The multi-commit `cherry-pick`/`revert` (`shas`, one git sequence in `pickPlan`'s order), the paused one's `pick-continue`/`pick-skip`/`pick-abort` (the last two `confirm:true`) and `undo-pick` (`reset --soft <from>` only while HEAD is the `to` the pick made and none of it is on a remote). Dispatched from `git-ops.js`'s `runGitAction`; same clean-tree, repo-root and `EMERGING` guards |
 | `lib/proof.js`            | (C) Proof gallery: lists/serves/deletes QC screenshots grouped by feature slug (Task B's `lane_features`) and phase, under `<lane.cwd>/.playwright-mcp/proof/<slug>/<group>/`. Every path is resolved, realpath'd, and containment-checked before touching `fs` — the entire security surface. `ensureProofLink` ports Shipyard's `ensure_proof_link` (converge a stray clone-root `proof/` onto the canonical dir); never auto-invoked, exposed only as `agenthub lanes proof-link` |
 | `lib/named-lock.js`       | (D) Cross-lane named locks — the OTHER axis from `lib/lane-lock.js`'s per-lane, in-process serialization, deliberately a separate module. `mkdir` is the atomicity primitive (EEXIST decides "already held" in one syscall, never check-then-create). `LOCK_MAX_HOLD` (default 2700s) breaks a stale holder on the next acquire, floored at 300s so the floor — not the configurable default — is the actual safety property: nothing can force-break a live holder by setting the env var low. Single-shot only; the CLI's `agenthub lock acquire` owns the polling loop, keeping the server side non-orchestrating like every other lane primitive |
 

client/src/components/BackgroundJobsDock.tsx

@@ -0,0 +1,380 @@
+/**
+ * @file BackgroundJobsDock.tsx
+ * @description The one bottom-right stack of background work, rendered once
+ * by `Layout`: a chip per background clone (`lib/cloneJobs.ts`, kept by the
+ * server, so it is back after F5 or a server restart) and per File Explorer
+ * upload (`lib/uploadJobs.ts`). A clone chip shows its queue place, then
+ * git's progress, with **Stop** (click twice) while it runs; once finished,
+ * **Open workspace** (done), the reason plus **Retry** (failed, interrupted,
+ * stopped) — an inline login form when the host wants one, a link to
+ * Settings → Git when it refused the SSH key — and × to dismiss. An upload
+ * chip shows its progress with **Stop**; one a reload cut short says how far
+ * it got. Several chips collapse to one small pill.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
+import { ChevronDown, FolderGit2, Square, Upload, X } from "lucide-react";
+import type { CloneJob } from "../lib/api";
+import {
+  cancelCloneJob,
+  cloneJobError,
+  dismissCloneJob,
+  ensureCloneJobs,
+  isActiveJob,
+  retryCloneJob,
+  useCloneJobs,
+} from "../lib/cloneJobs";
+import { dismissUpload, stopUpload, useUploadJobs, type UploadJob } from "../lib/uploadJobs";
+import { useArmed } from "../hooks/useArmed";
+import { CloneProgress } from "./lanes/CloneProgress";
+
+const chipClass =
+  "pointer-events-auto w-full space-y-1.5 rounded-lg border border-border bg-surface-1 p-2.5 text-xs shadow-xl shadow-black/40";
+
+function IconButton({
+  label,
+  onClick,
+  children,
+  danger,
+  testId,
+}: {
+  label: string;
+  onClick: () => void;
+  children: ReactNode;
+  danger?: boolean;
+  testId?: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      data-testid={testId}
+      className={`-m-0.5 shrink-0 rounded p-1 hover:bg-surface-2 ${
+        danger ? "text-status-danger" : "text-fg-muted hover:text-fg-primary"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function CloneJobChip({ job }: { job: CloneJob }) {
+  const { t } = useTranslation("lanes");
+  const navigate = useNavigate();
+  const { arm, isArmed, disarm } = useArmed();
+  const [login, setLogin] = useState({ username: "", token: "", remember: true });
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const active = isActiveJob(job);
+  const code = job.error?.code;
+  const laneId = job.kind === "workspace" ? (job.result?.laneId ?? null) : job.laneId;
+  const title =
+    job.state === "done"
+      ? t("cloneJobs.done", { name: job.name })
+      : job.state === "cancelled"
+        ? t("cloneJobs.cancelledTitle", { name: job.name })
+        : active
+          ? t("cloneJobs.cloning", { name: job.name })
+          : t("cloneJobs.failedTitle", { name: job.name });
+
+  const retry = async (withLogin: boolean) => {
+    if (busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await retryCloneJob(
+        job.id,
+        withLogin
+          ? { username: login.username.trim(), password: login.token, remember: login.remember }
+          : undefined
+      );
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setBusy(false);
+    }
+  };
+
+  const stop = () => {
+    if (!isArmed("stop")) return arm("stop");
+    disarm();
+    void cancelCloneJob(job.id);
+  };
+
+  return (
+    <div className={chipClass} data-testid="clone-job" data-state={job.state} title={job.target}>
+      <div className="flex items-center gap-2">
+        <FolderGit2 className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
+        <span className="min-w-0 flex-1 truncate font-medium text-fg-primary">{title}</span>
+        {active ? (
+          <IconButton
+            label={isArmed("stop") ? t("cloneJobs.stopConfirm") : t("cloneJobs.stop")}
+            onClick={stop}
+            danger={isArmed("stop")}
+            testId="clone-job-stop"
+          >
+            <Square className="h-3 w-3" />
+          </IconButton>
+        ) : (
+          <IconButton
+            label={t("cloneJobs.dismiss")}
+            onClick={() => void dismissCloneJob(job.id)}
+            testId="clone-job-dismiss"
+          >
+            <X className="h-3.5 w-3.5" />
+          </IconButton>
+        )}
+      </div>
+      {active && isArmed("stop") && (
+        <p className="text-[11px] text-status-danger">{t("cloneJobs.stopConfirm")}</p>
+      )}
+      {active && <CloneProgress view={job} />}
+      {job.state === "done" && (
+        <div className="flex items-center justify-between gap-2">
+          <span className="min-w-0 truncate font-mono text-[10px] text-fg-muted">
+            {job.result?.path || job.target}
+          </span>
+          {laneId !== null && (
+            <button
+              type="button"
+              className="shrink-0 text-accent hover:underline"
+              onClick={() => {
+                navigate(`/workspace?lane=${laneId}`);
+                void dismissCloneJob(job.id);
+              }}
+            >
+              {job.kind === "workspace" ? t("cloneJobs.openWorkspace") : t("cloneJobs.open")}
+            </button>
+          )}
+        </div>
+      )}
+      {!active && job.state !== "done" && (
+        <>
+          <p
+            role={job.state === "cancelled" ? undefined : "alert"}
+            className={`text-[11px] [overflow-wrap:anywhere] ${
+              job.state === "cancelled" ? "text-fg-secondary" : "text-status-danger"
+            }`}
+          >
+            {cloneJobError(job)}{" "}
+            {code === "ESSHAUTH" && (
+              // A router link: a plain <a href> reloaded the whole app.
+              <Link to="/settings/git#git-identity" className="underline">
+                {t("clone.sshSettings")}
+              </Link>
+            )}
+          </p>
+          {code === "ECREDENTIALS" && job.state === "failed" ? (
+            <form
+              data-testid="clone-job-login"
+              className="space-y-1.5"
+              onSubmit={(e) => {
+                e.preventDefault();
+                void retry(true);
+              }}
+            >
+              <input
+                aria-label={t("clone.username")}
+                placeholder={t("clone.username")}
+                autoComplete="username"
+                value={login.username}
+                onChange={(e) => setLogin({ ...login, username: e.target.value })}
+                className="input w-full text-xs"
+              />
+              <input
+                type="password"
+                aria-label={t("clone.token")}
+                placeholder={t("clone.token")}
+                autoComplete="current-password"
+                value={login.token}
+                onChange={(e) => setLogin({ ...login, token: e.target.value })}
+                className="input w-full text-xs"
+              />
+              <div className="flex items-center justify-between gap-2">
+                <label className="flex items-center gap-1.5 text-[11px] text-fg-secondary">
+                  <input
+                    type="checkbox"
+                    checked={login.remember}
+                    onChange={(e) => setLogin({ ...login, remember: e.target.checked })}
+                  />
+                  {t("clone.remember")}
+                </label>
+                <button
+                  type="submit"
+                  disabled={busy || !login.username.trim() || !login.token}
+                  className="btn-primary text-xs"
+                >
+                  {t("cloneJobs.retryLogin")}
+                </button>
+              </div>
+            </form>
+          ) : (
+            code !== "ESSHAUTH" && (
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => void retry(false)}
+                  className="btn-ghost text-xs"
+                >
+                  {t("cloneJobs.retry")}
+                </button>
+              </div>
+            )
+          )}
+          {error && (
+            <p role="alert" className="text-[11px] text-status-danger [overflow-wrap:anywhere]">
+              {error}
+            </p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function UploadChip({ job }: { job: UploadJob }) {
+  const { t } = useTranslation("lanes");
+  const { arm, isArmed, disarm } = useArmed();
+  if (job.state === "interrupted") {
+    return (
+      <div className={chipClass} data-testid="upload-job" data-state="interrupted">
+        <div className="flex items-start gap-2">
+          <Upload className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" />
+          <p className="min-w-0 flex-1 text-[11px] text-fg-secondary [overflow-wrap:anywhere]">
+            {t("uploads.interrupted", {
+              total: job.total,
+              folder: job.folder,
+              done: job.done,
+            })}
+          </p>
+          <IconButton label={t("cloneJobs.dismiss")} onClick={() => dismissUpload(job.id)}>
+            <X className="h-3.5 w-3.5" />
+          </IconButton>
+        </div>
+      </div>
+    );
+  }
+  const stopping = job.state === "stopping";
+  return (
+    <div className={chipClass} data-testid="fx-progress" data-state={job.state}>
+      <div className="flex items-center gap-2">
+        <Upload className="h-3.5 w-3.5 shrink-0 text-fg-muted" />
+        <span className="min-w-0 flex-1 truncate font-medium text-fg-primary">
+          {stopping
+            ? t("uploads.stopping")
+            : t("fx.uploading", { done: Math.min(job.done + 1, job.total), total: job.total })}
+        </span>
+        {!stopping && (
+          <IconButton
+            label={isArmed("stop") ? t("uploads.stopConfirm") : t("uploads.stop")}
+            danger={isArmed("stop")}
+            testId="upload-job-stop"
+            onClick={() => {
+              if (!isArmed("stop")) return arm("stop");
+              disarm();
+              stopUpload(job.id);
+            }}
+          >
+            <Square className="h-3 w-3" />
+          </IconButton>
+        )}
+      </div>
+      {isArmed("stop") && !stopping && (
+        <p className="text-[11px] text-status-danger">{t("uploads.stopConfirm")}</p>
+      )}
+      <p className="truncate text-[11px] text-fg-muted" title={job.folder}>
+        {job.folder}
+        {job.name ? ` · ${job.name}` : ""}
+      </p>
+      <div className="h-1.5 overflow-hidden rounded bg-surface-3">
+        <div
+          className="h-full bg-accent-solid transition-[width]"
+          style={{ width: `${Math.min(100, (job.sent / Math.max(1, job.bytes)) * 100)}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function BackgroundJobsDock() {
+  const { t } = useTranslation("lanes");
+  const jobs = useCloneJobs();
+  const uploads = useUploadJobs();
+  const [collapsed, setCollapsed] = useState(false);
+  const dockRef = useRef<HTMLDivElement>(null);
+  useEffect(() => ensureCloneJobs(), []);
+
+  const count = jobs.length + uploads.length;
+  // Toasts stack ABOVE the dock (Toaster reads --jobs-dock-h): they used to
+  // sit on the same corner and cover a chip's × / Retry / Stop.
+  useEffect(() => {
+    const root = document.documentElement;
+    const el = dockRef.current;
+    if (!count || !el) {
+      root.style.removeProperty("--jobs-dock-h");
+      return;
+    }
+    const set = () => root.style.setProperty("--jobs-dock-h", `${el.offsetHeight + 8}px`);
+    set();
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(set);
+    ro?.observe(el);
+    return () => {
+      ro?.disconnect();
+      root.style.removeProperty("--jobs-dock-h");
+    };
+  }, [count, collapsed]);
+  if (!count) return null;
+  const running =
+    jobs.filter(isActiveJob).length + uploads.filter((u) => u.state !== "interrupted").length;
+
+  return (
+    <div
+      ref={dockRef}
+      role="region"
+      aria-label={t("jobs.dock")}
+      data-testid="jobs-dock"
+      className="pointer-events-none fixed bottom-10 right-4 z-[60] flex max-h-[70vh] w-[min(20rem,calc(100vw-2rem))] flex-col items-end gap-2 overflow-y-auto"
+    >
+      {count > 1 && collapsed ? (
+        <button
+          type="button"
+          data-testid="jobs-dock-pill"
+          onClick={() => setCollapsed(false)}
+          title={t("jobs.expand")}
+          className="pointer-events-auto flex items-center gap-1.5 rounded-full border border-border bg-surface-1 px-3 py-1 text-xs text-fg-primary shadow-lg shadow-black/40 hover:bg-surface-2"
+        >
+          <FolderGit2 className="h-3.5 w-3.5 text-fg-muted" />
+          {t("jobs.count", { count })}
+          {running > 0 && (
+            <span className="text-fg-muted">· {t("jobs.running", { count: running })}</span>
+          )}
+        </button>
+      ) : (
+        <>
+          {count > 1 && (
+            <button
+              type="button"
+              data-testid="jobs-dock-collapse"
+              onClick={() => setCollapsed(true)}
+              className="pointer-events-auto flex items-center gap-1 rounded-full border border-border bg-surface-1 px-2 py-0.5 text-[11px] text-fg-secondary shadow hover:bg-surface-2"
+            >
+              {t("jobs.count", { count })}
+              <ChevronDown className="h-3 w-3" />
+            </button>
+          )}
+          {uploads.map((u) => (
+            <UploadChip key={u.id} job={u} />
+          ))}
+          {jobs.map((j) => (
+            <CloneJobChip key={j.id} job={j} />
+          ))}
+        </>
+      )}
+    </div>
+  );
+}

client/src/components/HtmlFrame.tsx

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

client/src/components/HtmlViewerModal.tsx

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

client/src/components/Layout.tsx

@@ -51,6 +51,7 @@
  * ## Internal dependencies
  * - `./Sidebar`
  * - `./UpdateNotifier`
+ * - `./BackgroundJobsDock` (background clones and uploads, app-wide)
  * - `./lanes/InterruptedSessionsPrompt` (the "resume interrupted sessions?" dialog)
  * - `./Sagi/SagiMount`
  *
@@ -82,6 +83,7 @@ import { Menu } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Sidebar, SIDEBAR_STORAGE_KEY, loadCollapsed } from "./Sidebar";
 import { UpdateNotifier } from "./UpdateNotifier";
+import { BackgroundJobsDock } from "./BackgroundJobsDock";
 import { InterruptedSessionsPrompt } from "./lanes/InterruptedSessionsPrompt";
 import { SagiMount } from "./Sagi/SagiMount";
 import { StatusBar } from "./StatusBar";
@@ -182,6 +184,7 @@ export function Layout({ wsConnected }: LayoutProps) {
         {t("skipToContent")}
       </a>
       <UpdateNotifier />
+      <BackgroundJobsDock />
       <InterruptedSessionsPrompt />
       <SagiMount />
       {onboarding.loaded && !onboarding.onboardedAt && (

client/src/components/StatusBar.tsx

@@ -22,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>
  */
 
@@ -30,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";
@@ -369,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;
@@ -414,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 })
@@ -524,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/Toaster.tsx

@@ -25,7 +25,9 @@ function Item({ item }: { item: ToastItem }) {
       className={`pointer-events-auto rounded-lg border px-3 py-2 shadow-lg flex items-start gap-2 ${TONE[item.kind]}`}
     >
       <Icon className="w-4 h-4 flex-shrink-0 mt-0.5" aria-hidden />
-      <span className="text-xs leading-relaxed flex-1 break-words">{item.message}</span>
+      <span className="text-xs leading-relaxed flex-1 min-w-0 break-words [overflow-wrap:anywhere]">
+        {item.message}
+      </span>
       <button
         type="button"
         onClick={() => dismissToast(item.id)}
@@ -44,8 +46,10 @@ export function Toaster() {
   useEffect(() => subscribeToasts(setItems), []);
   const errors = items.filter((i) => i.kind === "error");
   const rest = items.filter((i) => i.kind !== "error");
+  // Above the background-jobs dock (BackgroundJobsDock sets --jobs-dock-h
+  // to its height), so a toast never covers a chip's buttons.
   return (
-    <div className="pointer-events-none fixed bottom-10 right-4 z-[70] flex w-[min(28rem,calc(100vw-2rem))] flex-col gap-2">
+    <div className="pointer-events-none fixed bottom-[calc(2.5rem+var(--jobs-dock-h,0px))] right-4 z-[70] flex w-[min(28rem,calc(100vw-2rem))] flex-col gap-2">
       <div role="status" aria-live="polite" className="flex flex-col gap-2">
         {rest.map((i) => (
           <Item key={i.id} item={i} />

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

@@ -0,0 +1,317 @@
+/**
+ * @file Tests for the background jobs store (`lib/cloneJobs.ts`,
+ * `lib/uploadJobs.ts`) and its dock: a clone started in the background is
+ * announced once when the store sees it finish (toast + window event); a
+ * fresh mount (F5) shows what the server kept — an interrupted clone with
+ * Retry, a login failure with an inline login form that retries with it —
+ * without toasting it again; × dismisses; Stop (click twice) cancels a
+ * running clone, which then reads as stopped and can be retried; an older
+ * server that cannot stop says so. An upload shows with Stop, and one a
+ * reload cut short is shown as interrupted until dismissed. Several chips
+ * collapse to one pill.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { act, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import "../../i18n";
+
+vi.mock("../../lib/api", () => ({
+  api: {
+    lanes: {
+      clone: vi.fn(),
+      cloneFolder: vi.fn(),
+      cloneJobs: vi.fn(),
+      retryCloneJob: vi.fn(),
+      dismissCloneJob: vi.fn(),
+      cancelCloneJob: vi.fn(),
+    },
+  },
+}));
+vi.mock("../../lib/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() },
+}));
+
+import { api, type CloneJob } from "../../lib/api";
+import { toast } from "../../lib/toast";
+import {
+  CLONE_JOB_EVENT,
+  refreshCloneJobs,
+  resetCloneJobsForTests,
+  startClone,
+} from "../../lib/cloneJobs";
+import { beginUpload, reloadUploadsForTests } from "../../lib/uploadJobs";
+import { BackgroundJobsDock } from "../BackgroundJobsDock";
+
+const base: CloneJob = {
+  id: "j1",
+  kind: "workspace",
+  state: "running",
+  url: "https://git.example/o/repo.git",
+  name: "repo",
+  parent: "/home/an",
+  target: "/home/an/repo",
+  laneId: null,
+  position: null,
+  phase: "receiving",
+  label: null,
+  percent: 40,
+  detail: null,
+  error: null,
+  result: null,
+  createdAt: "",
+  finishedAt: null,
+  request: { url: "https://git.example/o/repo.git", parent: "/home/an", name: "repo" },
+};
+const job = (over: Partial<CloneJob> = {}): CloneJob => ({ ...base, ...over });
+
+const renderDock = () =>
+  render(
+    <MemoryRouter>
+      <BackgroundJobsDock />
+    </MemoryRouter>
+  );
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  resetCloneJobsForTests();
+  try {
+    localStorage.clear();
+  } catch {
+    /* none */
+  }
+  reloadUploadsForTests();
+  vi.mocked(api.lanes.cloneJobs).mockResolvedValue({ jobs: [] });
+  vi.mocked(api.lanes.dismissCloneJob).mockResolvedValue({ ok: true });
+});
+
+describe("cloneJobs store", () => {
+  it("announces a background clone once, when it sees it finish", async () => {
+    const onDone = vi.fn();
+    const events: CloneJob[] = [];
+    const listen = (e: Event) => events.push((e as CustomEvent<CloneJob>).detail);
+    window.addEventListener(CLONE_JOB_EVENT, listen);
+    vi.mocked(api.lanes.clone).mockResolvedValue({ job: job({ state: "queued", position: 1 }) });
+    await startClone(
+      { kind: "workspace", body: { url: base.url, parent: "/home/an" } },
+      { onDone }
+    );
+    expect(api.lanes.clone).toHaveBeenCalledWith(expect.objectContaining({ background: true }));
+    expect(toast.success).not.toHaveBeenCalled();
+
+    const done = job({ state: "done", result: { laneId: 7, path: "/home/an/repo" } });
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({ jobs: [done] });
+    await refreshCloneJobs();
+    await refreshCloneJobs();
+    expect(toast.success).toHaveBeenCalledTimes(1);
+    expect(vi.mocked(toast.success).mock.calls[0]![0]).toMatch(/Cloned repo into \/home\/an\/repo/);
+    expect(events).toEqual([done]);
+    expect(onDone).toHaveBeenCalledWith(done, undefined);
+    window.removeEventListener(CLONE_JOB_EVENT, listen);
+  });
+});
+
+describe("BackgroundJobsDock", () => {
+  it("shows a running clone's progress after a fresh mount, without a toast", async () => {
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({ jobs: [job()] });
+    renderDock();
+    const chip = await screen.findByTestId("clone-job");
+    expect(chip).toHaveTextContent("Cloning repo");
+    expect(within(chip).getByRole("progressbar")).toHaveAttribute("aria-valuenow", "40");
+    expect(toast.success).not.toHaveBeenCalled();
+    expect(toast.error).not.toHaveBeenCalled();
+  });
+
+  it("shows an interrupted clone after F5 and retries it", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({
+      jobs: [
+        job({
+          state: "interrupted",
+          error: { code: "EINTERRUPTED", message: "server restarted" },
+        }),
+      ],
+    });
+    vi.mocked(api.lanes.retryCloneJob).mockResolvedValue({
+      job: job({ id: "j2", state: "queued", position: 1 }),
+    });
+    renderDock();
+    const chip = await screen.findByTestId("clone-job");
+    expect(chip).toHaveTextContent("AgentHub restarted while this clone was running.");
+    expect(toast.error).not.toHaveBeenCalled();
+    await user.click(within(chip).getByRole("button", { name: "Retry" }));
+    expect(api.lanes.retryCloneJob).toHaveBeenCalledWith("j1", undefined);
+    await waitFor(() =>
+      expect(screen.getByTestId("clone-job")).toHaveTextContent("Waiting in the clone queue — #1")
+    );
+  });
+
+  it("asks for a login on ECREDENTIALS and retries with it", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({
+      jobs: [
+        job({
+          state: "failed",
+          error: {
+            code: "ECREDENTIALS",
+            message: "login",
+            auth: { protocol: "https", host: "git.example" },
+          },
+        }),
+      ],
+    });
+    vi.mocked(api.lanes.retryCloneJob).mockResolvedValue({ job: job({ id: "j2" }) });
+    renderDock();
+    const form = await screen.findByTestId("clone-job-login");
+    expect(screen.getByTestId("clone-job")).toHaveTextContent("git.example needs a login");
+    await user.type(within(form).getByLabelText("Username"), "ann");
+    await user.type(within(form).getByLabelText("Password or access token"), "tok");
+    await user.click(within(form).getByRole("button", { name: "Retry with this login" }));
+    expect(api.lanes.retryCloneJob).toHaveBeenCalledWith("j1", {
+      username: "ann",
+      password: "tok",
+      remember: true,
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("clone-job")).toHaveAttribute("data-state", "running")
+    );
+  });
+
+  it("dismisses a finished clone", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({
+      jobs: [job({ state: "done", result: { laneId: 7, path: "/home/an/repo" } })],
+    });
+    renderDock();
+    const chip = await screen.findByTestId("clone-job");
+    expect(within(chip).getByRole("button", { name: "Open workspace" })).toBeInTheDocument();
+    await user.click(within(chip).getByTestId("clone-job-dismiss"));
+    expect(api.lanes.dismissCloneJob).toHaveBeenCalledWith("j1");
+    expect(screen.queryByTestId("clone-job")).toBeNull();
+  });
+
+  it("stops a running clone on a second click, then lets it be retried", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({ jobs: [job()] });
+    vi.mocked(api.lanes.cancelCloneJob).mockResolvedValue({
+      job: job({ state: "cancelled", error: { code: "ECANCELLED", message: "cancelled" } }),
+    });
+    vi.mocked(api.lanes.retryCloneJob).mockResolvedValue({ job: job({ id: "j2" }) });
+    renderDock();
+    const stop = await screen.findByTestId("clone-job-stop");
+    await user.click(stop);
+    expect(api.lanes.cancelCloneJob).not.toHaveBeenCalled();
+    expect(screen.getByTestId("clone-job")).toHaveTextContent("Click again to stop");
+    await user.click(screen.getByTestId("clone-job-stop"));
+    expect(api.lanes.cancelCloneJob).toHaveBeenCalledWith("j1");
+    const chip = await screen.findByText("You stopped this clone.");
+    expect(chip).toBeInTheDocument();
+    // The chip says it; no toast repeats it on top of the chip.
+    expect(toast.info).not.toHaveBeenCalled();
+    expect(toast.error).not.toHaveBeenCalled();
+    await user.click(screen.getByRole("button", { name: "Retry" }));
+    expect(api.lanes.retryCloneJob).toHaveBeenCalledWith("j1", undefined);
+    await waitFor(() =>
+      expect(screen.getByTestId("clone-job")).toHaveAttribute("data-state", "running")
+    );
+  });
+
+  it("says so when the server cannot stop a clone yet", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({ jobs: [job()] });
+    vi.mocked(api.lanes.cancelCloneJob).mockRejectedValue(
+      Object.assign(new Error("HTTP 404"), { status: 404 })
+    );
+    renderDock();
+    await user.click(await screen.findByTestId("clone-job-stop"));
+    await user.click(screen.getByTestId("clone-job-stop"));
+    await waitFor(() =>
+      expect(toast.error).toHaveBeenCalledWith(expect.stringMatching(/cannot stop a clone yet/))
+    );
+  });
+
+  it("shows an upload with Stop, which aborts it", async () => {
+    renderDock();
+    let up!: ReturnType<typeof beginUpload>;
+    act(() => {
+      up = beginUpload({ folder: "one/src", total: 3, bytes: 300 });
+      up.update({ name: "a.txt", done: 1, sent: 150 });
+    });
+    const chip = await screen.findByTestId("fx-progress");
+    expect(chip).toHaveTextContent("Uploading 2/3");
+    expect(chip).toHaveTextContent("one/src · a.txt");
+    fireEvent.click(within(chip).getByTestId("upload-job-stop"));
+    expect(up.signal.aborted).toBe(false);
+    fireEvent.click(within(chip).getByTestId("upload-job-stop"));
+    expect(up.signal.aborted).toBe(true);
+    act(() => up.end());
+    expect(screen.queryByTestId("fx-progress")).toBeNull();
+  });
+
+  it("shows an upload a reload cut short until it is dismissed", async () => {
+    localStorage.setItem(
+      "agenthub.uploads.inflight",
+      JSON.stringify([
+        {
+          id: "up-old",
+          folder: "one/src",
+          name: "b.txt",
+          done: 2,
+          total: 5,
+          sent: 10,
+          bytes: 50,
+          state: "running",
+          beat: Date.now() - 60_000,
+        },
+      ])
+    );
+    act(() => reloadUploadsForTests());
+    renderDock();
+    const chip = await screen.findByTestId("upload-job");
+    expect(chip).toHaveTextContent(
+      "The upload of 5 file(s) to one/src was interrupted by a page reload — 2 sent."
+    );
+    fireEvent.click(within(chip).getByRole("button", { name: "Dismiss" }));
+    expect(screen.queryByTestId("upload-job")).toBeNull();
+    expect(localStorage.getItem("agenthub.uploads.inflight")).toBeNull();
+  });
+
+  it("collapses several chips to one pill", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({
+      jobs: [job(), job({ id: "j2", name: "other" })],
+    });
+    renderDock();
+    await waitFor(() => expect(screen.getAllByTestId("clone-job")).toHaveLength(2));
+    await user.click(screen.getByTestId("jobs-dock-collapse"));
+    expect(screen.queryByTestId("clone-job")).toBeNull();
+    expect(screen.getByTestId("jobs-dock-pill")).toHaveTextContent("2 background tasks");
+    await user.click(screen.getByTestId("jobs-dock-pill"));
+    expect(screen.getAllByTestId("clone-job")).toHaveLength(2);
+  });
+
+  it("wraps a long SSH error, links to Settings in-app and lifts toasts above itself", async () => {
+    const long = "mdpartners@mdpartners.git.backlog.jp:/PETITGIFT_CONSOLE4/console4-specs.git";
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({
+      jobs: [
+        job({
+          state: "failed",
+          url: long,
+          error: { code: "ESSHAUTH", message: "the SSH login was refused" },
+        }),
+      ],
+    });
+    renderDock();
+    const alert = await screen.findByRole("alert");
+    // A URL with no space to break at must still wrap inside the chip.
+    expect(alert.className).toContain("[overflow-wrap:anywhere]");
+    // A router link, not a full page reload.
+    const link = screen.getByRole("link", { name: /Settings/ });
+    expect(link).toHaveAttribute("href", "/settings/git#git-identity");
+    await waitFor(() =>
+      expect(document.documentElement.style.getPropertyValue("--jobs-dock-h")).not.toBe("")
+    );
+  });
+});

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: [
@@ -183,6 +197,16 @@ describe("StatusBar", () => {
     expect(chip.getAttribute("title")).toBe("Monthly: $85.00 of $100.00 this period");
   });
 
+  it("shows the user's own spend quota, red once used up", async () => {
+    at("/", <StatusBar wsConnected left="0" onConnectionClick={() => {}} />);
+    const chip = await screen.findByTestId("status-bar-user-quota");
+    expect(chip.textContent).toBe("Quota 120%");
+    expect(chip.className).toContain("text-status-danger");
+    expect(chip.getAttribute("title")).toMatch(
+      /^Your spend quota is used up \(\$12\.00 of \$10\.00 today\)/
+    );
+  });
+
   it("says Disconnected when the socket is down", () => {
     at("/", <StatusBar wsConnected={false} left="0" onConnectionClick={() => {}} />);
     expect(screen.getByRole("button", { name: /Disconnected/ })).toBeInTheDocument();

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

@@ -3,7 +3,8 @@
  * @description Tests for the sidebar's workspace list: one flat row per
  * workspace in the stored order, a row expanding to its sessions (remembered),
  * a live session opening its pane and an ended one its transcript, the
- * workspace's OWN sessions only, a session's state dot, rename and archive,
+ * workspace's OWN sessions only, a session's state dot, rename and archive
+ * (a live one's pane stopped first),
  * selection
  * by URL, Alt+arrow reordering kept in localStorage, double-click rename, the
  * search, the row menu's items by kind and tool, the status dot, and the
@@ -225,6 +226,8 @@ describe("WorkspaceTree", () => {
     await user.type(input, "Better name{Enter}");
     expect(api.sessions.patch).toHaveBeenCalledWith("s-old", { name: "Better name" });
     await user.click(screen.getByTestId("workspace-session-archive-s-live"));
+    // A live session's Archive stops its pane first — never a hidden pane left running.
+    expect(api.run.kill).toHaveBeenCalledWith("agenthub-lane-1-2", { archive: true });
     expect(api.sessions.patch).toHaveBeenCalledWith("s-live", { archived: true });
   });
 

client/src/components/health/HostHealth.tsx

@@ -683,7 +683,12 @@ export function HostSections({ host, heap }: { host: HostState; heap?: HeapInfo
                     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]" />
+                    <UserAvatar
+                      name={name}
+                      userId={g.userId}
+                      avatarAt={g.avatarAt}
+                      className="h-6 w-6 text-[10px]"
+                    />
                     <span className="min-w-0 flex-1 truncate text-xs text-fg-secondary">
                       {name}
                     </span>

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

@@ -69,6 +69,7 @@ const stats: HostStats = {
 const api = vi.hoisted(() => ({
   host: { stats: vi.fn(), history: vi.fn() },
   me: { avatarUrl: () => null },
+  users: { avatarUrl: () => null },
 }));
 vi.mock("../../../lib/api", async (importOriginal) => {
   const actual = await importOriginal<Record<string, unknown>>();

client/src/components/lanes/AddLaneModal.tsx

@@ -9,8 +9,11 @@
  * manually-typed branch name; "Clone" runs `POST /api/lanes/clone` (an
  * https/ssh URL cloned into a folder of the user's, with their OWN SSH key or
  * HTTPS login — a 409 `ECREDENTIALS` opens a login row, `ESSHAUTH` points to
- * Settings → Git; **Partial clone** makes it blobless, and `CloneProgress`
- * shows its queue place, then git's progress). There is no AI tool picker: the lane is created with the
+ * Settings → Git; **Partial clone** makes it blobless). The clone is a
+ * background job (`lib/cloneJobs.ts`): the modal closes once the server
+ * accepted it, the app-wide dock shows its queue place, git's progress and
+ * outcome, and the new workspace is selected when it ends while the user is
+ * still on that page. There is no AI tool picker: the lane is created with the
  * default AI tool (Settings → AI Tools), and each new session picks its own
  * AI on the workspace home. Either
  * mode's path field can be filled by typing, by the CwdAutocomplete
@@ -31,7 +34,7 @@ import { useDialog } from "../../hooks/useDialog";
 import { CwdAutocomplete } from "../run/RunSetup";
 import { PathPickButton } from "../PathPickButton";
 import { api } from "../../lib/api";
-import { CloneProgress, newCloneToken } from "./CloneProgress";
+import { startClone } from "../../lib/cloneJobs";
 import type { CwdSuggestion } from "../../lib/api";
 import type { Lane, LaneWorktree } from "../../lib/types";
 import { useAiTools } from "../../hooks/useAiTools";
@@ -119,8 +122,6 @@ export function AddLaneModal({
   const [cloneUrl, setCloneUrl] = useState("");
   const [cloneName, setCloneName] = useState("");
   const [clonePartial, setClonePartial] = useState(false);
-  /** The running clone's progress token (CloneProgress polls it). */
-  const [cloneToken, setCloneToken] = useState<string | null>(null);
   const [login, setLogin] = useState<{
     host: string;
     username: string;
@@ -242,28 +243,46 @@ export function AddLaneModal({
       const url = cloneUrl.trim();
       if (!url) return;
       setSshRefused(false);
-      const progressToken = newCloneToken();
-      setCloneToken(progressToken);
+      // The new workspace is selected when the clone ends only while the user
+      // is still on the page they started it from; elsewhere the dock's
+      // "Open workspace" does it.
+      const from = window.location.pathname;
       try {
-        const result = await api.lanes.clone({
-          progressToken,
-          url,
-          parent: repo,
-          name: cloneName.trim() || undefined,
-          title: name || undefined,
-          tool,
-          ...(clonePartial ? { partial: true } : {}),
-          ...(login?.username.trim() && login.token
-            ? {
-                credentials: {
-                  username: login.username.trim(),
-                  password: login.token,
-                  remember: login.remember,
-                },
-              }
-            : {}),
-        });
-        onAdded(result.lane);
+        await startClone(
+          {
+            kind: "workspace",
+            body: {
+              url,
+              parent: repo,
+              name: cloneName.trim() || undefined,
+              title: name || undefined,
+              tool,
+              ...(clonePartial ? { partial: true } : {}),
+              ...(login?.username.trim() && login.token
+                ? {
+                    credentials: {
+                      username: login.username.trim(),
+                      password: login.token,
+                      remember: login.remember,
+                    },
+                  }
+                : {}),
+            },
+          },
+          {
+            onDone: (job, lane) => {
+              if (window.location.pathname !== from) return;
+              if (lane) return onAdded(lane);
+              const id = job.result?.laneId;
+              if (id == null) return;
+              api.lanes
+                .get(id)
+                .then((r) => onAdded(r.lane))
+                .catch(() => undefined);
+            },
+          }
+        );
+        // Accepted: the dock carries the clone from here.
         reset();
         onClose();
       } catch (err) {
@@ -284,8 +303,6 @@ export function AddLaneModal({
           setError(err instanceof Error ? err.message : String(err));
         }
         setBusy(false);
-      } finally {
-        setCloneToken(null);
       }
       return;
     }
@@ -571,11 +588,7 @@ export function AddLaneModal({
                 />
                 {t("clone.partial")}
               </label>
-              {cloneToken && (
-                <div className="mt-2">
-                  <CloneProgress token={cloneToken} />
-                </div>
-              )}
+              <p className="mt-1 text-[10px] text-fg-muted">{t("cloneJobs.backgroundHint")}</p>
             </div>
           )}
 
@@ -856,7 +869,7 @@ export function AddLaneModal({
             {done
               ? t("addLaneSetupClose")
               : busy && mode === "clone"
-                ? t("clone.cloning")
+                ? t("cloneJobs.starting")
                 : t("add")}
           </button>
         </div>

client/src/components/lanes/CloneHereDialog.tsx

@@ -5,12 +5,13 @@
  * `POST /api/lanes/clone` as Add workspace → Clone — the server holds the URL
  * to its allowlist and the folder to the user's own, and clones as the
  * folder's account with that account's own SSH key / HTTPS login — and opens
- * a workspace on the new folder. A 409 `ECREDENTIALS` opens a login row (sent
- * once, optionally remembered), `ESSHAUTH` points to Settings → Git.
- * A running clone shows `CloneProgress` and never holds the page: closing the
- * dialog only hides it behind a small progress chip (click to reopen), the
- * request keeps going, and its outcome arrives as a toast — a failure is kept
- * for the next open so a login row is still there to fill in.
+ * a workspace on the new folder. The clone is a server-side background job
+ * (`lib/cloneJobs.ts`): the dialog closes as soon as the server accepted it
+ * and the app-wide dock (`BackgroundJobsDock`) carries its progress and
+ * outcome, across pages, F5 and server restarts. A refusal before the clone
+ * starts (a bad URL, a folder that is not the user's, a 409 `ECREDENTIALS` /
+ * `ESSHAUTH`) stays in the form: a login row (sent once, optionally
+ * remembered), or a pointer to Settings → Git.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -18,12 +19,9 @@ import { useEffect, useId, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 import { FolderGit2 } from "lucide-react";
-import { api } from "../../lib/api";
-import type { Lane } from "../../lib/types";
 import { useDialog } from "../../hooks/useDialog";
 import { cloneDirName } from "./AddLaneModal";
-import { CloneProgress, newCloneToken } from "./CloneProgress";
-import { toast } from "../../lib/toast";
+import { startClone } from "../../lib/cloneJobs";
 
 type Login = { host: string; username: string; token: string; remember: boolean };
 
@@ -31,16 +29,11 @@ export function CloneHereDialog({
   open,
   parent,
   onClose,
-  onCloned,
-  onReopen,
 }: {
   open: boolean;
   /** The absolute folder the clone goes into. */
   parent: string;
   onClose: () => void;
-  onCloned: (lane: Lane, path: string) => void;
-  /** Show the dialog again from the background chip. */
-  onReopen: () => void;
 }) {
   const { t } = useTranslation(["lanes"]);
   const panelRef = useRef<HTMLDivElement>(null);
@@ -51,23 +44,10 @@ export function CloneHereDialog({
   const [sshRefused, setSshRefused] = useState(false);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [token, setToken] = useState<string | null>(null);
-  /** Where the running clone goes (the open folder may change meanwhile). */
-  const [target, setTarget] = useState("");
-  // Read by the request's own continuation and by the reset below.
-  const openRef = useRef(open);
-  openRef.current = open;
-  const busyRef = useRef(false);
-  /** A clone failed while hidden: the next open shows that, not a blank form. */
-  const keepRef = useRef(false);
   useDialog(open, panelRef, onClose);
 
   useEffect(() => {
-    if (!open || busyRef.current) return;
-    if (keepRef.current) {
-      keepRef.current = false;
-      return;
-    }
+    if (!open) return;
     setUrl("");
     setName("");
     setLogin(null);
@@ -76,67 +56,42 @@ export function CloneHereDialog({
     setError(null);
   }, [open, parent]);
 
-  const folder = name.trim() || cloneDirName(url);
-  const into = busy ? target : `${parent.replace(/\/+$/, "")}/${folder || "…"}`;
+  if (!open) return null;
 
-  if (!open) {
-    if (!busy || !token) return null;
-    return createPortal(
-      <button
-        type="button"
-        data-testid="fx-clone-chip"
-        onClick={onReopen}
-        title={into}
-        className="fixed bottom-10 right-4 z-[60] w-72 space-y-1 rounded-lg border border-border bg-surface-1 p-2.5 text-left shadow-xl shadow-black/40 hover:bg-surface-2"
-      >
-        <span className="flex items-center gap-2 text-xs font-medium text-fg-primary">
-          <FolderGit2 className="h-3.5 w-3.5 shrink-0" />
-          <span className="truncate">
-            {t("clone.cloning")} {into.split("/").pop()}
-          </span>
-        </span>
-        <CloneProgress token={token} />
-      </button>,
-      document.body
-    );
-  }
+  const folder = name.trim() || cloneDirName(url);
+  const into = `${parent.replace(/\/+$/, "")}/${folder || "…"}`;
 
   const submit = async () => {
     const u = url.trim();
     if (!u || busy) return;
-    const progressToken = newCloneToken();
-    busyRef.current = true;
     setBusy(true);
-    setToken(progressToken);
-    setTarget(into);
     setError(null);
     setSshRefused(false);
     try {
-      const result = await api.lanes.clone({
-        url: u,
-        parent,
-        name: name.trim() || undefined,
-        progressToken,
-        ...(login?.username.trim() && login.token
-          ? {
-              credentials: {
-                username: login.username.trim(),
-                password: login.token,
-                remember: login.remember,
-              },
-            }
-          : {}),
+      await startClone({
+        kind: "workspace",
+        body: {
+          url: u,
+          parent,
+          name: name.trim() || undefined,
+          ...(login?.username.trim() && login.token
+            ? {
+                credentials: {
+                  username: login.username.trim(),
+                  password: login.token,
+                  remember: login.remember,
+                },
+              }
+            : {}),
+        },
       });
-      busyRef.current = false;
-      setBusy(false);
-      setToken(null);
-      onCloned(result.lane, result.path);
+      // Accepted: the dock takes it from here.
+      onClose();
     } catch (err) {
       const e = err as { code?: string; auth?: { host?: string }; message?: string };
       const host = e.auth?.host || u;
-      let message: string;
       if (e.code === "ECREDENTIALS") {
-        message = t(login?.token ? "clone.loginRejected" : "clone.loginNeeded", { host });
+        setError(t(login?.token ? "clone.loginRejected" : "clone.loginNeeded", { host }));
         setLogin((l) => ({
           host,
           username: l?.username ?? "",
@@ -145,18 +100,11 @@ export function CloneHereDialog({
         }));
       } else if (e.code === "ESSHAUTH") {
         setSshRefused(true);
-        message = t("clone.sshRefused", { host });
+        setError(t("clone.sshRefused", { host }));
       } else {
-        message = err instanceof Error ? err.message : String(err);
+        setError(err instanceof Error ? err.message : String(err));
       }
-      setError(message);
-      busyRef.current = false;
       setBusy(false);
-      setToken(null);
-      if (!openRef.current) {
-        keepRef.current = true;
-        toast.error(message);
-      }
     }
   };
 
@@ -258,7 +206,6 @@ export function CloneHereDialog({
               </label>
             </div>
           )}
-          {busy && token && <CloneProgress token={token} />}
           {error && (
             <p role="alert" className="text-xs text-status-danger">
               {error}{" "}
@@ -269,9 +216,10 @@ export function CloneHereDialog({
               )}
             </p>
           )}
+          <p className="text-[11px] text-fg-muted">{t("cloneJobs.backgroundHint")}</p>
           <div className="flex justify-end gap-2">
             <button type="button" onClick={onClose} className="btn-ghost text-xs">
-              {busy ? t("clone.background") : t("fx.cancel")}
+              {t("fx.cancel")}
             </button>
             <button
               type="submit"
@@ -279,7 +227,7 @@ export function CloneHereDialog({
               className="btn-primary text-xs"
               data-testid="fx-clone-submit"
             >
-              {busy ? t("clone.cloning") : t("fx.cloneSubmit")}
+              {busy ? t("cloneJobs.starting") : t("fx.cloneSubmit")}
             </button>
           </div>
         </form>

client/src/components/lanes/CloneProgress.tsx

@@ -2,59 +2,35 @@
  * @file CloneProgress — the live line under a running clone: its place in the
  * server's clone queue while it waits (clones run a few at a time machine-wide,
  * `server/lib/clone-queue.js`), then git's own phase, percent, size and speed
- * with a bar. It polls `GET /api/lanes/clone/progress/:token` every second for
- * the token the clone's POST carried (`newCloneToken`); a 404 — the POST not
- * yet arrived, or an older server — just shows nothing yet.
+ * with a bar. It renders the progress fields of a background clone job
+ * (`lib/cloneJobs.ts`, polled by the store) — it fetches nothing itself.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { api, type CloneProgressView } from "../../lib/api";
+import type { CloneJob } from "../../lib/api";
 
-const POLL_MS = 1000;
+export type CloneProgressFields = Pick<
+  CloneJob,
+  "state" | "position" | "phase" | "label" | "percent" | "detail"
+> & { running?: number; waiting?: number; limit?: number };
 
-/** A fresh, unguessable progress token (works on plain http, unlike randomUUID). */
-export function newCloneToken(): string {
-  const bytes = new Uint8Array(16);
-  crypto.getRandomValues(bytes);
-  return Array.from(bytes, (b) => b.toString(16).padStart(2, "0")).join("");
-}
-
-export function CloneProgress({ token }: { token: string }) {
+export function CloneProgress({ view }: { view: CloneProgressFields }) {
   const { t } = useTranslation("lanes");
-  const [view, setView] = useState<CloneProgressView | null>(null);
 
-  useEffect(() => {
-    let alive = true;
-    setView(null);
-    // Never throws: progress is a courtesy, the clone's own answer decides.
-    const poll = () =>
-      Promise.resolve()
-        .then(() => api.lanes.cloneProgress(token))
-        .then((v) => {
-          if (alive) setView(v);
-        })
-        .catch(() => {});
-    void poll();
-    const timer = setInterval(() => void poll(), POLL_MS);
-    return () => {
-      alive = false;
-      clearInterval(timer);
-    };
-  }, [token]);
-
-  if (!view || view.state === "done" || view.state === "failed") return null;
+  if (view.state !== "queued" && view.state !== "running") return null;
 
   if (view.state === "queued") {
     return (
       <p data-testid="clone-progress" className="text-[11px] text-status-warning">
-        {t("clone.queued", {
-          position: view.position ?? 1,
-          waiting: view.waiting,
-          running: view.running,
-          limit: view.limit,
-        })}
+        {view.waiting !== undefined && view.running !== undefined && view.limit !== undefined
+          ? t("clone.queued", {
+              position: view.position ?? 1,
+              waiting: view.waiting,
+              running: view.running,
+              limit: view.limit,
+            })
+          : t("cloneJobs.queued", { position: view.position ?? 1 })}
       </p>
     );
   }
@@ -73,7 +49,9 @@ export function CloneProgress({ token }: { token: string }) {
           {view.phase ? ` ${percent}%` : ""}
         </span>
         {view.detail && (
-          <span className="shrink-0 font-mono text-[10px] text-fg-muted">{view.detail}</span>
+          <span className="shrink-0 truncate font-mono text-[10px] text-fg-muted">
+            {view.detail}
+          </span>
         )}
       </p>
       {view.phase && (

client/src/components/lanes/CloneSourcesForm.tsx

@@ -10,16 +10,19 @@
  * sent to Settings → Git first — and an HTTPS host with no saved login offers
  * the login row up front (optional: a public repo needs none). The identity is
  * read again when the window regains focus, so a key made in another tab
- * counts at once. The running clone shows its queue place, then git's
- * progress (`CloneProgress`); **Partial clone** sends `partial: true`.
+ * counts at once. Each clone is a background job (`lib/cloneJobs.ts`): once
+ * the server accepted it the app-wide dock shows its queue place, git's
+ * progress and outcome (it survives leaving the page, F5 and a server
+ * restart), and the folder list is re-read when it ends; **Partial clone**
+ * sends `partial: true`.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Check, Loader2, X } from "lucide-react";
-import { api, type GitIdentity, type LaneSourcesView } from "../../lib/api";
-import { CloneProgress, newCloneToken } from "./CloneProgress";
+import { api, type CloneJob, type GitIdentity, type LaneSourcesView } from "../../lib/api";
+import { CLONE_JOB_EVENT, startClone } from "../../lib/cloneJobs";
 
 type Row = {
   url: string;
@@ -27,8 +30,6 @@ type Row = {
   note?: string;
   /** The note points at Settings → Git (no key, or a key the host refused). */
   ssh?: boolean;
-  /** While busy: the progress token CloneProgress polls. */
-  token?: string;
 };
 type Login = { host: string; username: string; token: string; remember: boolean };
 
@@ -88,6 +89,23 @@ export function CloneSourcesForm({
         .catch(() => {}),
     []
   );
+  // A background clone into THIS workspace ended: its folder is now in the
+  // list (the server added it), so read the list again.
+  const onAddedRef = useRef(onAdded);
+  onAddedRef.current = onAdded;
+  useEffect(() => {
+    const onJob = (e: Event) => {
+      const job = (e as CustomEvent<CloneJob>).detail;
+      if (job?.state !== "done" || job.kind !== "source" || job.laneId !== laneId) return;
+      Promise.resolve()
+        .then(() => api.lanes.sources(laneId))
+        .then((view) => onAddedRef.current(view))
+        .catch(() => undefined);
+    };
+    window.addEventListener(CLONE_JOB_EVENT, onJob);
+    return () => window.removeEventListener(CLONE_JOB_EVENT, onJob);
+  }, [laneId]);
+
   useEffect(() => {
     void loadIdentity();
     const onFocus = () => void loadIdentity();
@@ -121,25 +139,28 @@ export function CloneSourcesForm({
     for (const row of next) {
       if (row.state === "failed") continue;
       row.state = "busy";
-      row.token = newCloneToken();
       show();
       try {
-        const view = await api.lanes.cloneFolder(laneId, {
-          url: row.url,
-          progressToken: row.token,
-          ...(partial ? { partial: true } : {}),
-          ...(login?.username.trim() && login.token
-            ? {
-                credentials: {
-                  username: login.username.trim(),
-                  password: login.token,
-                  remember: login.remember,
-                },
-              }
-            : {}),
+        await startClone({
+          kind: "source",
+          laneId,
+          body: {
+            url: row.url,
+            ...(partial ? { partial: true } : {}),
+            ...(login?.username.trim() && login.token
+              ? {
+                  credentials: {
+                    username: login.username.trim(),
+                    password: login.token,
+                    remember: login.remember,
+                  },
+                }
+              : {}),
+          },
         });
+        // Accepted: the dock shows its progress; the folder list is re-read
+        // when it ends (the CLONE_JOB_EVENT listener above).
         row.state = "done";
-        onAdded(view);
       } catch (err) {
         const e = err as { code?: string; auth?: { host?: string }; message?: string };
         const host = e.auth?.host || row.url;
@@ -159,7 +180,6 @@ export function CloneSourcesForm({
           row.note = e.message || String(err);
         }
       }
-      row.token = undefined;
       show();
     }
     if (asked) setLogin(asked);
@@ -301,10 +321,8 @@ export function CloneSourcesForm({
                   {r.url}
                 </span>
               </span>
-              {r.state === "busy" && r.token && (
-                <div className="ml-[18px] mt-0.5">
-                  <CloneProgress token={r.token} />
-                </div>
+              {r.state === "done" && (
+                <span className="ml-[18px] block text-fg-muted">{t("cloneJobs.started")}</span>
               )}
               {r.note && (
                 <span className="ml-[18px] block text-status-danger">

client/src/components/lanes/FileExplorer.tsx

@@ -15,9 +15,13 @@
  * workspace's Files tab. Behaviour: delete → the account's Trash (no confirm:
  * restorable 7 days); Copy / Cut then Paste in the same or ANOTHER workspace
  * (the clipboard outlives the dialog); upload files or whole folders (picker
- * or dropped from the desktop), streamed with progress, ≤ 500 MB a batch;
+ * or dropped from the desktop), streamed with progress, ≤ 500 MB a batch —
+ * the progress lives in the app-wide dock (`lib/uploadJobs.ts`), so an
+ * upload keeps going when the user opens Trash or another page, and can be
+ * stopped there; New → Clone repository runs as a background clone job;
  * drag items onto a folder to move them (Ctrl: copy); download a file as
- * itself, anything else as one zip; a taken name asks Replace / Keep both /
+ * itself, anything else as one zip — except an HTML file, which opens as the
+ * page (`HtmlViewer`, Download on its header and right-click menu); a taken name asks Replace / Keep both /
  * Skip. Deleting forever asks first when it empties the Trash or touches
  * another user's. An admin's Trash opens on one folder per user (with its
  * item count); each folder is THAT user's Trash, to restore from or purge
@@ -90,12 +94,17 @@ import {
 } from "../../lib/api";
 import type { Lane } from "../../lib/types";
 import { useDialog } from "../../hooks/useDialog";
+import { fetchVia } from "../HtmlFrame";
+import { HtmlViewerModal } from "../HtmlViewerModal";
 import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { formatBytes } from "../../lib/format";
 import { copyText } from "../../lib/clipboard";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { CloneHereDialog } from "./CloneHereDialog";
+import { CLONE_JOB_EVENT } from "../../lib/cloneJobs";
+import { beginUpload } from "../../lib/uploadJobs";
+import type { CloneJob } from "../../lib/api";
 import { isSubmitEnter } from "../../lib/keys";
 import { useAuth } from "../AuthGate";
 
@@ -166,6 +175,7 @@ const join = (dir: string, name: string) => (dir ? `${dir}/${name}` : name);
 const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
 const errCode = (e: unknown) => (e as { code?: string })?.code;
 const isFolder = (e: FsEntry) => e.type === "dir" || e.type === "linkdir";
+const isHtml = (e: FsEntry) => !isFolder(e) && /\.html?$/i.test(e.name);
 const ext = (name: string) => name.slice(name.lastIndexOf(".") + 1).toLowerCase();
 const IMAGE = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico"]);
 const CODE = new Set([
@@ -225,6 +235,8 @@ async function walkEntry(
     out.push({ file, rel: `${prefix}${entry.name}` });
     return;
   }
+  // The server takes nothing into .git: never read one off the disk at all.
+  if (entry.name === ".git") return;
   const reader = (entry as FileSystemDirectoryEntry).createReader();
   // readEntries answers in pages until it answers [].
   for (;;) {
@@ -321,13 +333,6 @@ export function FileBrowser({
   const [cloning, setCloning] = useState(false);
   const [ask, setAsk] = useState<Ask | null>(null);
   const [askAll, setAskAll] = useState(false);
-  const [progress, setProgress] = useState<{
-    name: string;
-    done: number;
-    total: number;
-    sent: number;
-    bytes: number;
-  } | null>(null);
   const [lanes, setLanes] = useState<Lane[]>([]);
   const { state: auth } = useAuth();
   const myId = auth.mode === "server" ? (auth.user?.id ?? null) : null;
@@ -363,16 +368,21 @@ export function FileBrowser({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [laneId, initialHome, session, source, initialPath]);
 
-  useEffect(() => {
+  // Re-read after every change here too: deleting a workspace's folder takes
+  // it out of the places (a workspace whose folder is gone has nothing to show).
+  const loadLanes = useCallback(() => {
     api.lanes
       .list()
       .then((r) => setLanes(r.lanes))
       .catch(() => setLanes([]));
+  }, []);
+  useEffect(() => {
+    loadLanes();
     api.files
       .homes()
       .then((r) => setHomes(r.homes))
       .catch(() => setHomes([]));
-  }, []);
+  }, [loadLanes]);
   // Another user's home (an admin's view) is read-only.
   const ro = isHomePlace(target) && !!homes.find((h) => h.id === target.home)?.readOnly;
   // Clone into the open folder: the absolute path of a workspace's own folder
@@ -433,6 +443,8 @@ export function FileBrowser({
       } else if (view === "trash") setTrash((await api.files.trash(target)).items);
       else setListing(await api.files.list(target, path));
     } catch (e) {
+      // Never leave the last folder's entries under another folder's error.
+      if (view === "files") setListing(null);
       // A dashboard that does not know /fs yet (not restarted) answers 404.
       setError(
         (e as { status?: number }).status === 404 && !errCode(e) ? t("fx.unavailable") : errText(e)
@@ -449,8 +461,20 @@ export function FileBrowser({
 
   const changed = () => {
     void load();
+    loadLanes();
     onChanged?.();
   };
+  // A background clone finished (the dock announced it): its folder and
+  // workspace are new here, wherever it was started from.
+  const changedRef = useRef(changed);
+  changedRef.current = changed;
+  useEffect(() => {
+    const onJob = (e: Event) => {
+      if ((e as CustomEvent<CloneJob>).detail?.state === "done") changedRef.current();
+    };
+    window.addEventListener(CLONE_JOB_EVENT, onJob);
+    return () => window.removeEventListener(CLONE_JOB_EVENT, onJob);
+  }, []);
 
   const entries = useMemo(() => {
     const all = listing?.entries ?? [];
@@ -461,13 +485,28 @@ export function FileBrowser({
   }, [listing, showHidden, query]);
   const selectedEntries = entries.filter((e) => selected.has(e.path));
 
+  // An upload outlives this view (its progress is in the dock): once the view
+  // is gone nobody can answer a name clash, so it keeps both copies.
+  const mountedRef = useRef(true);
+  const pendingAsk = useRef<Ask["resolve"] | null>(null);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      pendingAsk.current?.({ choice: "keep", all: true });
+      pendingAsk.current = null;
+    };
+  }, []);
   /** A choice for taken names: Replace / Keep both / Skip (null = cancel). */
   const askConflict = (names: string[], many: boolean) =>
     new Promise<{ choice: FsConflict | null; all: boolean }>((resolve) => {
+      if (!mountedRef.current) return resolve({ choice: "keep", all: true });
+      pendingAsk.current = resolve;
       setAskAll(false);
       setAsk({ names, many, resolve });
     });
   const answer = (choice: FsConflict | null) => {
+    pendingAsk.current = null;
     ask?.resolve({ choice, all: askAll });
     setAsk(null);
   };
@@ -498,8 +537,11 @@ export function FileBrowser({
   };
 
   // ── Actions ─────────────────────────────────────────────────────────────
+  // An HTML page opens as itself (`HtmlViewer`); any other file downloads.
+  const [viewing, setViewing] = useState<FsEntry | null>(null);
   const openEntry = (e: FsEntry) => {
     if (isFolder(e)) go(e.path);
+    else if (isHtml(e)) setViewing(e);
     else download([e]);
   };
   const goUp = () => {
@@ -607,8 +649,14 @@ export function FileBrowser({
   };
 
   /** Upload `files` (each with its path inside the pick/drop) under `dir`. */
-  const uploadAll = async (files: { file: File; rel: string }[], dir = path) => {
+  const uploadAll = async (picked: { file: File; rel: string }[], dir = path) => {
     setMenu(null);
+    // A dropped/picked repo carries its .git, which the server refuses file by
+    // file — skip it here with ONE notice instead of a toast per object.
+    const files = picked.filter((f) => !f.rel.split("/").includes(".git"));
+    if (files.length < picked.length) {
+      toast.info(t("fx.gitSkipped", { count: picked.length - files.length }));
+    }
     if (!files.length) return;
     const bytes = files.reduce((n, f) => n + f.file.size, 0);
     if (bytes > FX_BATCH_MAX_BYTES) {
@@ -618,19 +666,29 @@ export function FileBrowser({
       return;
     }
     setBusy(true);
+    // The place is fixed now: the user may open another folder (or leave the
+    // page) while this keeps sending; its progress lives in the dock.
+    const place = target;
+    const job = beginUpload({
+      folder: `${placeName(place)}${dir ? `/${dir}` : ""}`,
+      total: files.length,
+      bytes,
+    });
+    const { signal } = job;
     let sent = 0;
     let done = 0;
     let saved = 0;
     let forAll: FsConflict | null = null;
     // false once the server says a batch cannot be written here (an old helper).
     let batchable = true;
-    const show = (name: string, extra = 0) =>
-      setProgress({ name, done, total: files.length, sent: sent + extra, bytes });
+    const show = (name: string, extra = 0) => job.update({ name, done, sent: sent + extra });
     /** One file; false = the user cancelled. */
     const one = async ({ file, rel }: { file: File; rel: string }) => {
+      if (signal.aborted) return false;
       const dest = join(dir, rel);
       show(rel);
-      const send = (c: FsConflict) => api.files.upload(target, dest, file, c, (n) => show(rel, n));
+      const send = (c: FsConflict) =>
+        api.files.upload(place, dest, file, c, (n) => show(rel, n), signal);
       try {
         const r = await send(forAll ?? "fail").catch(async (e) => {
           if (errCode(e) !== "EEXISTS") throw e;
@@ -641,7 +699,7 @@ export function FileBrowser({
         });
         if (!r.skipped) saved++;
       } catch (e) {
-        if (errCode(e) === "ECANCEL") return false;
+        if (errCode(e) === "ECANCEL" || errCode(e) === "EABORT") return false;
         toast.error(t("fx.uploadFailed", { name: rel, message: errText(e) }));
       }
       sent += file.size;
@@ -661,9 +719,10 @@ export function FileBrowser({
         if (a.all && a.choice) forAll = a.choice;
         return a.choice;
       };
+      if (signal.aborted) return "cancel";
       try {
         const c = await api.files.uploadCheck(
-          target,
+          place,
           dir,
           b.map((f) => f.rel)
         );
@@ -674,7 +733,7 @@ export function FileBrowser({
         let policy = await choose(c.taken);
         if (!policy) return "cancel";
         const send = (p: FsConflict) =>
-          api.files.uploadBatch(target, dir, b, p, (n) => show(label, n));
+          api.files.uploadBatch(place, dir, b, p, (n) => show(label, n), signal);
         const r = await send(policy).catch(async (e) => {
           // Taken meanwhile: ask about those, then once more.
           if (errCode(e) !== "EEXISTS") throw e;
@@ -685,7 +744,7 @@ export function FileBrowser({
         saved += r.saved;
       } catch (e) {
         const code = errCode(e);
-        if (code === "ECANCEL") return "cancel";
+        if (code === "ECANCEL" || code === "EABORT") return "cancel";
         // Refused before a byte was written (a bad name, an old helper…):
         // each file then gets its own answer.
         if (code === "EUPGRADE") batchable = false;
@@ -709,9 +768,10 @@ export function FileBrowser({
       }
       for (const f of singles) if (!go || !(await one(f))) break;
     } finally {
-      setProgress(null);
+      job.end();
       setBusy(false);
-      if (saved) toast.success(t("fx.uploaded", { count: saved }));
+      if (signal.aborted) toast.info(t("uploads.stopped", { count: saved, total: files.length }));
+      else if (saved) toast.success(t("fx.uploaded", { count: saved }));
       changed();
     }
   };
@@ -917,11 +977,18 @@ export function FileBrowser({
   // owner whose home this viewer may not open (an analyst's view of other
   // users) still gets a row, one that only groups. A workspace with no owner
   // stays in the flat Workspaces list. Which rows are open is per browser.
+  // A workspace whose folder was deleted has nothing to browse — it stays a
+  // place only while it is the one open (so its error has a row to sit on).
+  const placeLanes = useMemo(
+    () =>
+      lanes.filter((l) => !l.folder_missing || (!isHomePlace(target) && laneOf(target) === l.id)),
+    [lanes, target]
+  );
   const { lanesOfHome, userRows } = useMemo(() => {
     const ids = new Set(homes.map((h) => h.id));
     const map = new Map<string, Lane[]>();
     const extra = new Map<string, UserRow>();
-    for (const l of lanes) {
+    for (const l of placeLanes) {
       const home =
         myId != null && l.owner_id === myId && ids.has("me")
           ? "me"
@@ -944,9 +1011,9 @@ export function FileBrowser({
       ...[...extra.values()].sort((a, b) => a.label.localeCompare(b.label)),
     ];
     return { lanesOfHome: map, userRows: rows };
-  }, [homes, lanes, myId]);
+  }, [homes, placeLanes, myId]);
   const grouped = new Set([...lanesOfHome.values()].flat().map((l) => l.id));
-  const looseLanes = lanes.filter((l) => !grouped.has(l.id));
+  const looseLanes = placeLanes.filter((l) => !grouped.has(l.id));
   // A home holding the open workspace shows it, whatever was stored.
   const homeIsOpen = (id: string, own: Lane[]) =>
     openHomes.has(id) ||
@@ -970,20 +1037,17 @@ export function FileBrowser({
       onClick={() => setMenu(null)}
       data-testid="file-explorer"
     >
-      {cloneParent && (
-        <CloneHereDialog
-          open={cloning}
-          parent={cloneParent}
-          onClose={() => setCloning(false)}
-          onReopen={() => setCloning(true)}
-          onCloned={(lane, at) => {
-            setCloning(false);
-            toast.success(t("fx.cloned", { path: at, workspace: lane.title || lane.cwd }));
-            setLanes((ls) => (ls.some((l) => l.id === lane.id) ? ls : [...ls, lane]));
-            changed();
-          }}
+      {viewing && (
+        <HtmlViewer
+          entry={viewing}
+          place={target}
+          onDownload={() => download([viewing])}
+          onClose={() => setViewing(null)}
         />
       )}
+      {cloneParent && (
+        <CloneHereDialog open={cloning} parent={cloneParent} onClose={() => setCloning(false)} />
+      )}
       {/* ── Places ── */}
       <aside className="hidden w-52 shrink-0 flex-col border-r border-border bg-surface-0 sm:flex">
         <nav className="min-h-0 flex-1 overflow-y-auto px-2 pb-2" aria-label={t("fx.places")}>
@@ -1630,25 +1694,6 @@ export function FileBrowser({
           </div>
         )}
 
-        {progress && (
-          <div
-            data-testid="fx-progress"
-            className="absolute bottom-12 right-4 w-72 rounded-lg border border-border bg-surface-1 p-3 shadow-xl"
-          >
-            <p className="truncate text-xs font-medium">
-              {t("fx.uploading", { done: progress.done + 1, total: progress.total })}
-            </p>
-            <p className="truncate text-[11px] text-fg-muted">{progress.name}</p>
-            <div className="mt-2 h-1.5 overflow-hidden rounded bg-surface-3">
-              <div
-                className="h-full bg-accent-solid transition-[width]"
-                style={{
-                  width: `${Math.min(100, (progress.sent / Math.max(1, progress.bytes)) * 100)}%`,
-                }}
-              />
-            </div>
-          </div>
-        )}
       </div>
 
       {ctx.menu && (
@@ -1656,13 +1701,16 @@ export function FileBrowser({
           {menuItem ? (
             <>
               <MenuItem onSelect={close(() => openEntry(menuItem))}>
-                {isFolder(menuItem) ? t("fx.open") : t("fx.download")}
+                {isFolder(menuItem) || isHtml(menuItem) ? t("fx.open") : t("fx.download")}
               </MenuItem>
               {(isFolder(menuItem) || menuTargets.length > 1) && (
                 <MenuItem onSelect={close(() => download(menuTargets))}>
                   {t("fx.downloadZip")}
                 </MenuItem>
               )}
+              {isHtml(menuItem) && menuTargets.length === 1 && (
+                <MenuItem onSelect={close(() => download([menuItem]))}>{t("fx.download")}</MenuItem>
+              )}
               <MenuSeparator />
               {!ro && (
                 <MenuItem onSelect={close(() => putClip(menuTargets, true))}>
@@ -1916,6 +1964,36 @@ export function FileExplorer({
   );
 }
 
+/** An HTML file as the page, in the shared modal viewer (`HtmlViewerModal`):
+ *  its relative CSS, scripts and images read through the same download route. */
+function HtmlViewer({
+  entry,
+  place,
+  onDownload,
+  onClose,
+}: {
+  entry: FsEntry;
+  place: FsPlace;
+  onDownload: () => void;
+  onClose: () => void;
+}) {
+  const placeKey = JSON.stringify(place);
+  const fetchFile = useMemo(
+    () => fetchVia((p) => api.files.downloadUrl(place, p)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [placeKey]
+  );
+  return (
+    <HtmlViewerModal
+      path={entry.path}
+      fetchFile={fetchFile}
+      onDownload={onDownload}
+      onClose={onClose}
+      testId="fx-html-viewer"
+    />
+  );
+}
+
 function HeadButton({
   label,
   onClick,

client/src/components/lanes/LaneChangesPanel.tsx

@@ -13,9 +13,14 @@
  *              side, each block with the diff's Undo / Keep while nothing
  *              is unsaved): Changes folds the unchanged lines away, Whole file
  *              shows them; any other file opens on its read-only diff; a
- *              whole markdown file can also be read rendered (Preview), and an
+ *              whole markdown file can also be read rendered (Preview), an HTML
+ *              file's Preview beside Whole file opens the page in a modal
+ *              (`HtmlViewerModal`, its relative CSS, scripts and images read
+ *              like downloads), and an
  *              image file is shown as the picture (`GET …/git/raw`)
- *   history  — recent commits; opening one shows that commit's diff
+ *   history  — the commit graph (`git/HistoryView.tsx`: all branches, search,
+ *              details, multi-select cherry-pick/revert, compare, browse at a
+ *              revision); Show History on a file is `git/FileHistory.tsx`
  *   browse   — quick-open by path, or the repo's tracked file tree (the
  *              mode switcher's Files button; at full width the sidebar);
  *              a row dragged onto a prompt box attaches it as `@path`
@@ -51,9 +56,16 @@
  * .gitignore (`ignore`, untracked only). While a merge is open the box is
  * hidden: a partial commit cannot finish one, Complete does.
  *
- * History rewrites through its commit menu: Revert (any commit), Undo commit
- * (the top one; the server refuses a pushed one) and, while another branch's
- * history is shown, Cherry-pick onto this branch. The commit row's Amend box
+ * **Shelve (n)** beside Discard sets the ticked files aside (`shelve`, with
+ * an optional one-line note), and the Shelves list (`LaneShelves`) above the
+ * file list restores or deletes what was shelved — a git stash under the
+ * hood, its recovery always a button here.
+ *
+ * History rewrites through HistoryView's commit menu and selection: Revert and
+ * Cherry-pick (one or several commits, previewed in `CherryPickDialog`, a
+ * paused one finished from `PickBanner`), Undo commit (the top one; the
+ * server refuses a pushed one), Reset branch to here… and Edit commits after
+ * this one… (`GitTools`). The commit row's Amend box
  * folds the ticked files into the last commit (none ticked: rewords it). All
  * four ask first (`confirmDialog`).
  *
@@ -77,9 +89,19 @@
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
-import { Suspense, lazy, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  Suspense,
+  lazy,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import {
+  Archive,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
@@ -127,10 +149,17 @@ import { LaneConflictView } from "./LaneConflictView";
 import { FileExplorer } from "./FileExplorer";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
 import { MarkdownPreview, isMarkdown } from "../MarkdownPreview";
+import { fetchVia } from "../HtmlFrame";
+import { HtmlViewerModal } from "../HtmlViewerModal";
 import { LaneGitHeader, useLaneGitFacts } from "./LaneGitHeader";
+import { LaneShelves, withAgentConfirm } from "./LaneShelves";
+import { useGitChanged } from "../../lib/gitChanged";
+import { GitTools, GitToolsButton, RebaseSkipButton, type GitTool } from "./git/GitTools";
 import { changeTree, treeFiles, type ChangeTreeDir } from "../../lib/changeTree";
 import { dragProjectPath } from "../../lib/promptAttach";
-import { commitGraph, type GraphRow } from "../../lib/commitGraph";
+import { HistoryView } from "./git/HistoryView";
+import { FileHistory } from "./git/FileHistory";
+import { PickBanner } from "./git/PickBanner";
 import type {
   LaneChangeFile,
   LaneChangeRange,
@@ -150,6 +179,10 @@ const LAST_CONTEXT = CONTEXT_STEPS[CONTEXT_STEPS.length - 1]!;
 
 type Mode = "overview" | "review" | "file" | "history" | "browse";
 
+/** A cherry-pick or revert: its banner is PickBanner, not the merge one (a
+ *  merge and a rebase keep theirs). */
+const isPick = (op: string | null | undefined) => op === "cherry-pick" || op === "revert";
+
 /** Colour per porcelain status letter, matching LaneGitHeader's file panel. */
 /** JetBrains' VCS colours: unversioned orange, added green, deleted grey,
  *  modified (and renamed) blue. */
@@ -185,6 +218,9 @@ function Delta({
   );
 }
 
+/** An HTML page, which Preview opens as the page (`HtmlViewerModal`). */
+const isHtml = (p: string | null | undefined) => !!p && /\.html?$/i.test(p);
+
 /** What the viewer shows as a picture (`readImageAt`'s list on the server). */
 const IMAGE_FILE = /\.(png|jpe?g|gif|webp|avif|bmp|ico|svg)$/i;
 // CodeMirror is loaded only once a file is edited.
@@ -754,54 +790,6 @@ function ChangeTreeNodes({
   );
 }
 
-/** History's page size, and the most the server reads (`listCommits`). */
-const HISTORY_PAGE = 50;
-const HISTORY_MAX = 200;
-
-// The history's commit graph: one fixed-height row per commit so its lanes
-// join up row to row. Mid-tone hues that read on dark and light themes alike.
-const GRAPH_ROW = 34;
-const GRAPH_COL = 12;
-const GRAPH_COLORS = [
-  "#3b82f6",
-  "#22c55e",
-  "#f59e0b",
-  "#a855f7",
-  "#ef4444",
-  "#14b8a6",
-  "#ec4899",
-  "#84cc16",
-];
-
-function GraphCell({ row, width }: { row: GraphRow; width: number }) {
-  const x = (col: number) => col * GRAPH_COL + GRAPH_COL / 2;
-  const y = (f: number) => f * GRAPH_ROW;
-  const hue = (i: number) => GRAPH_COLORS[i % GRAPH_COLORS.length];
-  return (
-    <svg
-      aria-hidden
-      width={width * GRAPH_COL}
-      height={GRAPH_ROW}
-      className="shrink-0"
-      data-testid="lane-changes-graph"
-    >
-      {row.segs.map((g, i) => {
-        const ym = (y(g.y1) + y(g.y2)) / 2;
-        return (
-          <path
-            key={i}
-            d={`M${x(g.x1)} ${y(g.y1)} C${x(g.x1)} ${ym} ${x(g.x2)} ${ym} ${x(g.x2)} ${y(g.y2)}`}
-            fill="none"
-            stroke={hue(g.color)}
-            strokeWidth={1.5}
-          />
-        );
-      })}
-      <circle cx={x(row.col)} cy={y(0.5)} r={3.5} fill={hue(row.color)} />
-    </svg>
-  );
-}
-
 export function LaneChangesPanel({
   laneId,
   session,
@@ -844,6 +832,8 @@ export function LaneChangesPanel({
   const opOpen = !!(git?.available && git.merging);
   // Every git read and write below goes to the same tree as those facts.
   const target = gitTarget(laneId, session, source);
+  // The open history-rewrite / remote / merge-editor tool (./git/GitTools).
+  const [gitTool, setGitTool] = useState<GitTool | null>(null);
   // A diff line's comment goes into this workspace's pane, as a paste.
   const comment = useCallback(
     (text: string) => {
@@ -859,6 +849,11 @@ export function LaneChangesPanel({
   // Bumped by Refresh and by a git bar action: a pull or a switch moves
   // history and the tree too, not just the diff `load` re-reads.
   const [reread, setReread] = useState(0);
+  // Any git write on this workspace — from this panel's bar, another repo's
+  // panel or the session view — re-reads everything here (`rereadAll`, set
+  // once it is defined below).
+  const rereadRef = useRef<(() => void) | null>(null);
+  useGitChanged(laneId, () => rereadRef.current?.());
   const [range, setRange] = useState<LaneChangeRange>("work");
   // Local mode: the files are already on this machine — no upload, download
   // or File Explorer (the desktop's file manager does all three).
@@ -874,10 +869,13 @@ export function LaneChangesPanel({
   const [layout, setLayout] = useState<DiffLayout>(wide ? "split" : "unified");
   useEffect(() => setLayout(wide ? "split" : "unified"), [wide]);
   const [whole, setWhole] = useState(false);
-  // A whole markdown file shown rendered instead of as source; per file, each
-  // one opening as Settings → Appearance says (`lib/markdownView.ts`).
+  // A whole markdown file shown rendered instead of as source; per file,
+  // opening as Settings → Appearance says (`lib/markdownView.ts`).
   const [mdPreview, setMdPreview] = useState(readMarkdownPreview);
   useEffect(() => setMdPreview(readMarkdownPreview()), [openFile]);
+  // An HTML file's page, open in the modal viewer (Preview beside Whole file).
+  const [htmlOpen, setHtmlOpen] = useState(false);
+  useEffect(() => setHtmlOpen(false), [openFile, mode]);
   const [data, setData] = useState<LaneChanges | null>(null);
   // A folder that is not a repo (an empty new workspace, a parent of clones)
   // has no changes, review or history — only its files, which Files reads
@@ -889,7 +887,6 @@ export function LaneChangesPanel({
     if (notRepo && (mode === "overview" || mode === "review" || mode === "history"))
       setMode(full ? "overview" : "browse");
   }, [notRepo, mode, full]);
-  const [commits, setCommits] = useState<LaneCommit[] | null>(null);
   // A folder's children, keyed by its path ("" is the root) — fetched once,
   // on first expand, and kept so re-collapsing doesn't re-fetch.
   const [treeChildren, setTreeChildren] = useState<Record<string, LaneTreeEntry[]>>({});
@@ -959,6 +956,9 @@ export function LaneChangesPanel({
   const returnTo = useRef<{ mode: Mode; scroll: number } | null>(null);
   const pendingScroll = useRef<number | null>(null);
   const [message, setMessage] = useState("");
+  // Shelve (n) opened its note row; the note typed there.
+  const [shelving, setShelving] = useState(false);
+  const [shelfNote, setShelfNote] = useState("");
   // The commit row amends the last commit instead of making a new one.
   const [amend, setAmend] = useState(false);
   // The last commit is already on its upstream: the server refuses to amend
@@ -1056,30 +1056,8 @@ export function LaneChangesPanel({
   }, [load, mode]);
 
   // History and the file tree are their own reads, each fetched when its mode
-  // is entered rather than alongside the diff nobody is looking at.
-  // History reads HISTORY_PAGE commits, and Load more asks for the next page
-  // (up to the server's 200).
-  const [historyLimit, setHistoryLimit] = useState(HISTORY_PAGE);
-  const [historyLoading, setHistoryLoading] = useState(false);
-  useEffect(() => {
-    if (mode !== "history") return;
-    // A reply for the previous ref/file/page lands after the next request
-    // started: drop it, or it overwrites the list the user is looking at.
-    let live = true;
-    setHistoryLoading(true);
-    void api.lanes
-      .gitLog(target, {
-        limit: historyLimit,
-        ...(historyRef ? { ref: historyRef } : {}),
-        ...(historyFile ? { file: historyFile } : {}),
-      })
-      .then(forLane(laneId, (r) => live && setCommits(r.commits)))
-      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)))
-      .finally(() => live && laneNow.current === laneId && setHistoryLoading(false));
-    return () => {
-      live = false;
-    };
-  }, [mode, laneId, reread, historyLimit, historyRef, historyFile]);
+  // is entered rather than alongside the diff nobody is looking at. The commit
+  // graph and a file's history read themselves (git/HistoryView, FileHistory).
   useEffect(() => {
     if (mode !== "history") return;
     let live = true;
@@ -1246,7 +1224,6 @@ export function LaneChangesPanel({
     setTreeBusy(false);
     setBusy(false);
     setError(null);
-    setCommits(null);
     setData(null);
     setDraft(null);
     setCollapsed(new Set());
@@ -1327,7 +1304,6 @@ export function LaneChangesPanel({
       if (!ok) return;
       setHistoryFile(path);
       setHistoryRef(null);
-      setCommits(null);
       setMode("history");
     });
   };
@@ -1450,25 +1426,78 @@ export function LaneChangesPanel({
     }
   };
 
-  // Discard all: every non-conflicted file in one `discard`, asked once in a
-  // dialog that names how many untracked files it will delete.
-  const discardAll = async () => {
-    const rows = files.filter((f) => !f.conflicted);
-    if (!rows.length) return;
+  // Discard selected: exactly what Commit would take — the ticked files, and
+  // only the ticked blocks of a partly ticked one (#87: it used to discard
+  // every file, ticked or not) — in one `discard`, asked once in a dialog
+  // that names how many untracked files it will delete.
+  const discardTicked = async () => {
+    if (!tickedPaths.length) return;
+    // Tracked and untracked counted apart: an untracked file is deleted, not
+    // reverted, and counting it in both told "10 changed + 10 new" for 10.
+    const untracked = files.filter((f) => f.untracked && tickedPaths.includes(f.path)).length;
+    const tracked = tickedPaths.length - untracked;
     const ok = await confirmDialog({
-      title: t("changes.discardAllTitle"),
-      message: t("changes.discardAllConfirm", {
-        count: rows.length,
-        untracked: rows.filter((f) => f.untracked).length,
-      }),
-      confirmLabel: t("changes.discardAll"),
+      title: t("changes.discardTickedTitle"),
+      message: t(
+        untracked === 0
+          ? "changes.discardTickedConfirmTracked"
+          : tracked === 0
+            ? "changes.discardTickedConfirmNew"
+            : "changes.discardTickedConfirm",
+        { count: tracked, untracked }
+      ),
+      confirmLabel: t("changes.discardTicked", { count: tickedPaths.length }),
     });
-    if (ok)
-      await act(
-        "discard",
-        rows.map((f) => f.path),
-        true
+    if (!ok) return;
+    const lane = laneId;
+    setBusy(true);
+    setError(null);
+    try {
+      const { paths, hunks } = await selection();
+      await api.lanes.gitAction(target, "discard", {
+        paths,
+        ...(hunks ? { hunks, context: CONTEXT_STEPS[0] } : {}),
+        confirm: true,
+      });
+      if (laneNow.current !== lane) return;
+      setConfirmDiscard(null);
+      refreshGit();
+      await load();
+    } catch (err) {
+      if (laneNow.current === lane) setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      if (laneNow.current === lane) setBusy(false);
+    }
+  };
+
+  // Shelve (n): the ticked files (whole files — a stash has no hunks) set
+  // aside with the note; all of them when every file is ticked.
+  const shelveTicked = async () => {
+    if (!tickedPaths.length) return;
+    const lane = laneId;
+    setBusy(true);
+    setError(null);
+    try {
+      const all = tickedPaths.length >= files.length;
+      const res = await withAgentConfirm((confirm) =>
+        api.lanes.gitAction(target, "shelve", {
+          ...(all ? {} : { paths: tickedPaths }),
+          ...(shelfNote.trim() ? { note: shelfNote.trim() } : {}),
+          ...(confirm ? { confirm } : {}),
+        })
       );
+      if (laneNow.current !== lane || !res) return;
+      toast.success(t("shelves.shelved", { count: res.shelf?.files.length ?? tickedPaths.length }));
+      setShelving(false);
+      setShelfNote("");
+      refreshGit();
+      setReread((n) => n + 1);
+      await load();
+    } catch (err) {
+      if (laneNow.current === lane) setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      if (laneNow.current === lane) setBusy(false);
+    }
   };
 
   // resolve / merge-commit / merge-abort: same shape as `act`, other body.
@@ -1558,7 +1587,6 @@ export function LaneChangesPanel({
 
   const fileCtx = useContextMenu<LaneChangeFile>();
   const treeCtx = useContextMenu<LaneTreeEntry>();
-  const commitCtx = useContextMenu<LaneCommit>();
   const viewCommit = (sha: string) => {
     setSha(sha);
     setRange("commit");
@@ -1734,68 +1762,15 @@ export function LaneChangesPanel({
           </MenuItem>
         </ContextMenu>
       )}
-      {commitCtx.menu && (
-        <ContextMenu
-          x={commitCtx.menu.x}
-          y={commitCtx.menu.y}
-          onClose={commitCtx.close}
-          testId="lane-changes-commit-menu"
-        >
-          <MenuItem onSelect={pick(commitCtx.close, () => viewCommit(commitCtx.menu!.item.sha))}>
-            {t("changes.viewCommit")}
-          </MenuItem>
-          <MenuItem onSelect={pick(commitCtx.close, () => copy(commitCtx.menu!.item.sha))}>
-            {t("changes.copySha")}
-          </MenuItem>
-          <MenuItem onSelect={pick(commitCtx.close, () => copy(commitCtx.menu!.item.subject))}>
-            {t("changes.copySubject")}
-          </MenuItem>
-          <MenuSeparator />
-          {historyRef ? (
-            <MenuItem
-              disabled={busy || opOpen || commitCtx.menu.item.parents.length !== 1}
-              testId="lane-changes-menu-cherry-pick"
-              onSelect={pick(
-                commitCtx.close,
-                () => void historyAct("cherry-pick", commitCtx.menu!.item)
-              )}
-            >
-              {t("changes.cherryPick", { branch: git?.available ? git.branch : "HEAD" })}
-            </MenuItem>
-          ) : (
-            <>
-              <MenuItem
-                disabled={busy || opOpen || commitCtx.menu.item.parents.length !== 1}
-                testId="lane-changes-menu-revert"
-                onSelect={pick(
-                  commitCtx.close,
-                  () => void historyAct("revert", commitCtx.menu!.item)
-                )}
-              >
-                {t("changes.revertCommit")}
-              </MenuItem>
-              {commits?.[0]?.sha === commitCtx.menu.item.sha && (
-                <MenuItem
-                  danger
-                  // Pushed: the server refuses it (EPUSHED), so say why here
-                  // instead of failing after the confirm.
-                  disabled={
-                    busy || opOpen || headPushed || commitCtx.menu.item.parents.length !== 1
-                  }
-                  title={headPushed ? t("changes.undoCommitPushed") : undefined}
-                  testId="lane-changes-menu-undo-commit"
-                  onSelect={pick(
-                    commitCtx.close,
-                    () => void historyAct("undo-commit", commitCtx.menu!.item)
-                  )}
-                >
-                  {t("changes.undoCommit")}
-                </MenuItem>
-              )}
-            </>
-          )}
-        </ContextMenu>
-      )}
+      <GitTools
+        tool={gitTool}
+        target={target}
+        branch={git?.available ? git.branch : null}
+        onClose={() => setGitTool(null)}
+        onOpen={setGitTool}
+        onChanged={() => void rereadAll()}
+        onViewCommit={viewCommit}
+      />
     </>
   );
 
@@ -1977,6 +1952,7 @@ export function LaneChangesPanel({
     setReread((n) => n + 1);
     return load();
   };
+  rereadRef.current = () => void rereadAll();
   const [rereading, runReread] = useSpin(rereadAll);
 
   // Files tab transfers (issue #78): a download is a plain attachment link; an
@@ -2044,6 +2020,13 @@ export function LaneChangesPanel({
   const dirty = draft !== null && draft !== text?.lines.join("\n");
   // Rendered only where the toggle is offered: a whole markdown file.
   const mdShown = mdPreview && whole && isMarkdown(openFile);
+  // An HTML page's relative CSS/scripts/images, read like a download — only
+  // from the working tree: a commit's page would get today's files.
+  const htmlFetch = useMemo(
+    () => (range === "commit" ? null : fetchVia((p) => api.lanes.gitDownloadUrl(target, p))),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [range, JSON.stringify(target)]
+  );
   dirtyRef.current = dirty;
   useUnsavedGuard(dirty);
   const dirtyChangeRef = useRef(onDirtyChange);
@@ -2369,10 +2352,7 @@ export function LaneChangesPanel({
                     aria-pressed={mode === m}
                     onClick={() => {
                       // The History button is the branch's; Show History, a file's.
-                      if (m === "history" && historyFile) {
-                        setHistoryFile(null);
-                        setCommits(null);
-                      }
+                      if (m === "history" && historyFile) setHistoryFile(null);
                       setMode(m);
                     }}
                     className={`rounded px-2 py-0.5 text-[11px] font-medium transition-colors ${
@@ -2387,6 +2367,12 @@ export function LaneChangesPanel({
               </div>
             )}
 
+            {!notRepo && (
+              <GitToolsButton
+                onPick={setGitTool}
+                hasRemote={git?.available ? git.hasRemote : undefined}
+              />
+            )}
             <button
               type="button"
               onClick={runReread}
@@ -2560,6 +2546,31 @@ export function LaneChangesPanel({
                   ))}
                 </div>
               )}
+              {/* An HTML file opens as the page in a modal over the screen;
+                  a commit's page once its text is read (Whole file). */}
+              {mode === "file" && isHtml(openFile) && (
+                <button
+                  type="button"
+                  data-testid="lane-file-preview"
+                  disabled={dirty || (range === "commit" && !text)}
+                  onClick={() => setHtmlOpen(true)}
+                  className="flex items-center gap-1 rounded border border-border bg-surface-2 px-2 py-1 text-[11px] text-fg-secondary hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  <Eye className="h-3 w-3" />
+                  {t("changes.preview")}
+                </button>
+              )}
+              {htmlOpen && openFile && (
+                <HtmlViewerModal
+                  path={openFile}
+                  // A commit's page is its text at that commit (no sibling
+                  // files); a working one is read whole from the disk.
+                  html={range === "commit" ? text?.lines.join("\n") : undefined}
+                  fetchFile={htmlFetch}
+                  onDownload={!local && range !== "commit" ? () => download(openFile) : undefined}
+                  onClose={() => setHtmlOpen(false)}
+                />
+              )}
             </div>
           )}
         </div>
@@ -2570,7 +2581,17 @@ export function LaneChangesPanel({
           </p>
         )}
 
-        {git?.available && git.merging && (
+        {git?.available && git.merging && isPick(git.operation) && (
+          <PickBanner
+            target={target}
+            conflicts={git.conflicts ?? 0}
+            reread={reread}
+            busy={busy}
+            onBusy={setBusy}
+            onDone={() => void rereadAll()}
+          />
+        )}
+        {git?.available && git.merging && !isPick(git.operation) && (
           <div
             data-testid="lane-merge-banner"
             className="mb-2 flex flex-wrap items-center gap-1.5 rounded border border-status-warning/40 bg-status-warning/10 px-2 py-1 text-[11px] text-status-warning"
@@ -2588,6 +2609,13 @@ export function LaneChangesPanel({
             >
               {t("changes.mergeCommit", { op: git.operation ?? "merge" })}
             </button>
+            {git.operation === "rebase" && (
+              <RebaseSkipButton
+                target={target}
+                disabled={busy}
+                onChanged={() => void rereadAll()}
+              />
+            )}
             <button
               type="button"
               disabled={busy}
@@ -2604,6 +2632,12 @@ export function LaneChangesPanel({
           </div>
         )}
 
+        {/* Changes set aside (git stash entries AgentHub made): Restore and
+          Delete, never dropped on their own. Absent while there are none. */}
+        {git?.available && mode !== "file" && (
+          <LaneShelves target={target} reread={reread} onChanged={rereadAll} />
+        )}
+
         {/* In single-file mode the DIFF owns the scrolling, so its horizontal
           bar sits at the bottom of the visible box instead of at the bottom of
           a 2000-line container nobody has scrolled to yet. Every other mode is
@@ -2616,103 +2650,40 @@ export function LaneChangesPanel({
           }`}
         >
           {mode === "history" ? (
-            <ul data-testid="lane-changes-history">
-              {historyFile && (
-                <li
-                  data-testid="lane-changes-history-file"
-                  className="mb-1 flex items-center gap-1.5 px-1 text-[11px] text-fg-secondary"
-                >
-                  <span className="min-w-0 flex-1 truncate">
-                    {t("changes.historyOfFile", { path: historyFile })}
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setHistoryFile(null);
-                      setCommits(null);
-                    }}
-                    className="shrink-0 rounded px-1 text-fg-muted hover:bg-surface-2 hover:text-fg-primary"
-                  >
-                    {t("changes.historyWholeBranch")}
-                  </button>
-                </li>
-              )}
-              {historyBranches.length > 1 && (
-                <li className="mb-1 flex items-center gap-1.5 px-1 text-[11px] text-fg-secondary">
-                  <span className="shrink-0">{t("changes.historyOf")}</span>
-                  <select
-                    data-testid="lane-changes-history-ref"
-                    value={historyRef ?? ""}
-                    onChange={(e) => {
-                      setHistoryRef(e.target.value || null);
-                      setCommits(null);
-                    }}
-                    className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-1 py-0.5 text-[11px] text-fg-primary"
-                  >
-                    <option value="">{git?.available ? git.branch : "HEAD"}</option>
-                    {historyBranches
-                      .filter((b) => !(git?.available && b === git.branch))
-                      .map((b) => (
-                        <option key={b} value={b}>
-                          {b}
-                        </option>
-                      ))}
-                  </select>
-                </li>
-              )}
-              {(() => {
-                const list = commits ?? [];
-                const graph = commitGraph(list);
-                return list.map((c, i) => (
-                  <li key={c.sha}>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        historyFile ? openAtCommit(historyFile, c.sha) : viewCommit(c.sha)
-                      }
-                      onContextMenu={(e) => commitCtx.open(e, c)}
-                      style={{ height: GRAPH_ROW }}
-                      className="flex w-full items-center gap-1.5 rounded px-1 text-left hover:bg-surface-2"
-                    >
-                      <GraphCell row={graph.rows[i]!} width={graph.width} />
-                      <span className="min-w-0 flex-1">
-                        <span className="flex items-baseline gap-1.5">
-                          <span className="shrink-0 font-mono text-[10px] text-fg-muted">
-                            {c.short}
-                          </span>
-                          <span className="min-w-0 flex-1 truncate text-[11px] text-fg-primary">
-                            {c.subject}
-                          </span>
-                        </span>
-                        <span className="flex items-baseline gap-1.5 pl-[3.2rem] text-[10px] text-fg-muted">
-                          <span className="truncate">{c.author}</span>
-                          <span>{new Date(c.date).toLocaleString()}</span>
-                        </span>
-                      </span>
-                    </button>
-                  </li>
-                ));
-              })()}
-              {commits === null && (
-                <li className="text-[11px] text-fg-muted">{t("changes.loading")}</li>
-              )}
-              {commits && commits.length === 0 && (
-                <li className="text-[11px] text-fg-muted">{t("changes.noCommits")}</li>
-              )}
-              {commits && commits.length >= historyLimit && historyLimit < HISTORY_MAX && (
-                <li>
-                  <button
-                    type="button"
-                    data-testid="lane-changes-history-more"
-                    disabled={historyLoading}
-                    onClick={() => setHistoryLimit((n) => Math.min(n + HISTORY_PAGE, HISTORY_MAX))}
-                    className="mt-1 w-full rounded px-1 py-1 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:opacity-40"
-                  >
-                    {historyLoading ? t("changes.loading") : t("changes.loadMore")}
-                  </button>
-                </li>
-              )}
-            </ul>
+            historyFile ? (
+              <FileHistory
+                key={`${laneId}:${historyFile}`}
+                target={target}
+                path={historyFile}
+                reread={reread}
+                onOpenVersion={openAtCommit}
+                onViewCommit={viewCommit}
+                onWholeBranch={() => setHistoryFile(null)}
+              />
+            ) : (
+              <HistoryView
+                key={laneId}
+                target={target}
+                branch={git?.available ? git.branch : null}
+                branches={historyBranches}
+                historyRef={historyRef}
+                onHistoryRef={setHistoryRef}
+                reread={reread}
+                disabled={busy || opOpen}
+                headPushed={headPushed}
+                onViewCommit={viewCommit}
+                onOpenFileAtCommit={openAtCommit}
+                onUndoCommit={(c) => void historyAct("undo-commit", c)}
+                onResetHere={(c) => setGitTool({ kind: "reset", commit: c })}
+                onEditAfter={(sha) => setGitTool({ kind: "interactive", base: sha })}
+                onPaused={() => {
+                  setRange("work");
+                  setMode("overview");
+                  void rereadAll();
+                }}
+                onChanged={() => void rereadAll()}
+              />
+            )
           ) : mode === "browse" && !full ? (
             browsePane
           ) : !data ? (
@@ -2810,15 +2781,62 @@ export function LaneChangesPanel({
                     <button
                       type="button"
                       data-testid="lane-changes-discard-all"
-                      disabled={busy}
-                      onClick={() => void discardAll()}
-                      title={t("changes.discardAllTitle")}
+                      disabled={busy || tickedPaths.length === 0}
+                      onClick={() => void discardTicked()}
+                      title={t("changes.discardTickedTitle")}
                       className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-status-danger hover:bg-status-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
                     >
                       <Trash2 className="h-3 w-3" aria-hidden />
-                      {t("changes.discardAll")}
+                      {t("changes.discardTicked", { count: tickedPaths.length })}
+                    </button>
+                    <button
+                      type="button"
+                      data-testid="lane-changes-shelve"
+                      aria-expanded={shelving}
+                      disabled={busy || tickedPaths.length === 0}
+                      onClick={() => setShelving((v) => !v)}
+                      title={t("shelves.shelveHint")}
+                      className="shrink-0 flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <Archive className="h-3 w-3" aria-hidden />
+                      {t("shelves.shelveTicked", { count: tickedPaths.length })}
                     </button>
                   </div>
+                  {shelving && (
+                    <div
+                      data-testid="lane-changes-shelve-row"
+                      className="flex w-full flex-wrap items-center gap-1.5"
+                    >
+                      <input
+                        value={shelfNote}
+                        autoFocus
+                        maxLength={200}
+                        onChange={(e) => setShelfNote(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (isSubmitEnter(e)) void shelveTicked();
+                          if (e.key === "Escape") setShelving(false);
+                        }}
+                        placeholder={t("shelves.notePlaceholder")}
+                        aria-label={t("shelves.notePlaceholder")}
+                        className="min-w-[10rem] flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+                      />
+                      <button
+                        type="button"
+                        disabled={busy || tickedPaths.length === 0}
+                        onClick={() => void shelveTicked()}
+                        className="shrink-0 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                      >
+                        {t("shelves.shelveApply", { count: tickedPaths.length })}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setShelving(false)}
+                        className="shrink-0 rounded px-1.5 py-0.5 text-[11px] text-fg-muted hover:bg-surface-2 hover:text-fg-primary"
+                      >
+                        {t("shelves.cancel")}
+                      </button>
+                    </div>
+                  )}
                 </div>
               )}
               {/* The work range splits like JetBrains' Commit window: tracked
@@ -2939,6 +2957,9 @@ export function LaneChangesPanel({
                 editWanted.current = true;
                 setWhole(true);
               }}
+              onMergeEditor={() =>
+                setGitTool({ kind: "merge", path: openFile, onResolved: goBack })
+              }
             />
           ) : mode === "file" ? (
             current || (whole && text) || openImage ? (
@@ -2969,6 +2990,7 @@ export function LaneChangesPanel({
                       {t("changes.annotate")}
                     </button>
                   )}
+                  {/* An HTML file's Preview sits beside Whole file instead. */}
                   {whole && text && !dirty && isMarkdown(openFile) && (
                     <button
                       type="button"

client/src/components/lanes/LaneConflictView.tsx

@@ -8,7 +8,8 @@
  * (`gitSaveFile` with its `sha`, 409 ESTALE otherwise) and then runs
  * `resolve done`, which re-checks that no marker is left. Take all mine /
  * theirs is `resolve ours|theirs` for the whole file; Edit by hand hands the
- * file to the panel's plain editor.
+ * file to the panel's plain editor; Merge editor opens the 3-way editor
+ * (`./git/MergeEditor`, base/current/incoming side by side).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -42,7 +43,10 @@ export function LaneConflictView({
   path,
   onResolved,
   onEdit,
+  onMergeEditor,
 }: {
+  /** Open the 3-way merge editor (./git/MergeEditor) on this file. */
+  onMergeEditor?: () => void;
   laneId: number;
   /** Work in that session's own worktree (see `gitTarget`). */
   session?: string;
@@ -176,6 +180,17 @@ export function LaneConflictView({
         <button type="button" className={BTN} disabled={busy} onClick={onEdit}>
           {t("conflict.editByHand")}
         </button>
+        {onMergeEditor && (
+          <button
+            type="button"
+            data-testid="conflict-open-merge-editor"
+            className={BTN}
+            disabled={busy}
+            onClick={onMergeEditor}
+          >
+            {t("gitTools:merge.open")}
+          </button>
+        )}
       </div>
 
       {error && (

client/src/components/lanes/LaneDiffView.tsx

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

client/src/components/lanes/LaneGitBar.tsx

@@ -1,7 +1,9 @@
 /**
  * @file The lane's git action row: ahead/behind against the upstream, and the
  * writes `POST /api/lanes/:id/git/:action` offers that are not per-file —
- * fetch, pull, push, switch branch, create/delete a branch, publish a repo
+ * fetch, pull, push, switch branch (a local one, or one only a remote has —
+ * listed under "On the remote" and checked out as a new tracking branch; the
+ * list is re-read after every fetch and pull), create/delete a branch, publish a repo
  * that has no remote yet (a URL, then `origin` + `push -u`), and start a merge
  * (the picked branch, or the upstream once diverged; resolving it is the
  * Changes panel's job). Committing is
@@ -13,7 +15,16 @@
  * icons on the same row as the branch line, rather than in the lane card's ⋯ menu: that menu holds the rare and dangerous (`reset
  * worktree`), and these are the ordinary moves a lane needs several times an hour.
  * Nothing here decides what an action may do; the server does (pull is always
- * --ff-only, switch refuses a dirty tree), and this only reports what it said.
+ * --ff-only, switch refuses a dirty tree unless told what to do with the
+ * changes), and this only reports what it said. With uncommitted changes,
+ * Switch branch asks first — **Bring my changes** (`changes: "carry"`; a
+ * file git would overwrite comes back as ECARRYCONFLICT, listed, with Shelve
+ * and switch offered instead) or **Shelve and switch** (`changes: "shelve"`)
+ * — and the new-branch row offers **Create & switch** (`switch: true`, the
+ * changes come along; the default on Enter while the tree is dirty) beside
+ * plain Create. A switch onto a branch that has shelves asks whether to
+ * restore the newest (never automatically), and a write the server answers
+ * EAGENTRUNNING is confirmed and resent (`withAgentConfirm`'s dialog).
  * Failures print git's own text, because "! [rejected] non-fast-forward" tells
  * the user more than any sentence this file could write. The one exception
  * is `EGITAUTH` (issue #45): the dashboard's git has no terminal to prompt
@@ -21,6 +32,7 @@
  * resent with the typed credential — the token is never rendered back.
  * Fetch, pull, push and publish say so in a toast when they succeed; a merge,
  * a push, a publish and a branch delete ask through the themed confirm first; the rows wrap in a narrow panel.
+ * The tags icon opens the Branches panel (`git/BranchManager`: every branch and tag, rename, upstream, tags).
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -43,6 +55,8 @@ import { toast } from "../../lib/toast";
 import { confirmDialog } from "../../lib/confirm";
 import { isSubmitEnter } from "../../lib/keys";
 import type { LaneGitFacts, LaneWorktree } from "../../lib/types";
+import { restoreShelf } from "./LaneShelves";
+import { BranchesButton } from "./git/BranchesButton";
 
 type Action =
   "fetch" | "pull" | "push" | "switch" | "branch-create" | "branch-delete" | "merge" | "publish";
@@ -114,6 +128,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("");
@@ -124,6 +140,9 @@ export function LaneGitBar({
   const [remember, setRemember] = useState(true);
   const [publishing, setPublishing] = useState(false);
   const [url, setUrl] = useState("");
+  // A switch with uncommitted changes asks how to take them: set to the
+  // branch picked (and the files git refused to carry, after ECARRYCONFLICT).
+  const [choice, setChoice] = useState<{ branch: string; conflict?: string[] } | null>(null);
   // The Changes panel is not keyed by lane, so this bar outlives a lane switch.
   // All of the state above describes ONE lane — a branch picked for lane A,
   // applied after switching, would move B's HEAD — so it is reset during
@@ -138,6 +157,7 @@ export function LaneGitBar({
     setError(null);
     setSwitching(false);
     setBranches(null);
+    setRemoteBranches([]);
     setWorktrees([]);
     setPicked("");
     setNewBranch("");
@@ -145,6 +165,7 @@ export function LaneGitBar({
     setPassword("");
     setPublishing(false);
     setUrl("");
+    setChoice(null);
     inFlight.current = false;
   }
   const laneNow = useRef(laneId);
@@ -152,6 +173,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) => {
@@ -160,6 +184,9 @@ export function LaneGitBar({
     const lane = laneId;
     setBusy(action);
     setError(null);
+    // EAGENTRUNNING: asked AFTER the request settles, so the resend is not
+    // refused as a second action in flight.
+    let askAgent = false;
     try {
       const res = await api.lanes.gitAction(gitTarget(lane, session, source), action, body || {});
       // Landed after a lane switch: every write below belongs to the lane
@@ -182,17 +209,50 @@ export function LaneGitBar({
         if (action === "switch") setSwitching(false);
         else setNewBranch("");
         setPicked("");
+        setChoice(null);
         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();
       }
+      if (res?.shelved) toast.success(t("gitBar.shelvedOn", { branch: res.shelved.branch }));
       onChanged();
+      // The branch switched to has changes shelved on it: offer them back —
+      // asking, never restoring on its own.
+      const offer = action === "switch" ? res?.shelves?.[0] : undefined;
+      if (offer) {
+        const yes = await confirmDialog({
+          title: t("gitBar.restoreOfferTitle"),
+          message: t("gitBar.restoreOffer", {
+            branch: offer.branch,
+            count: res?.shelves?.length ?? 1,
+            files: offer.files.length,
+          }),
+          confirmLabel: t("shelves.restore"),
+          destructive: false,
+        });
+        if (yes && laneNow.current === lane) {
+          await restoreShelf(gitTarget(lane, session, source), offer);
+          if (laneNow.current === lane) onChanged();
+        }
+      }
     } catch (err) {
       // The server appends git's own stderr to the message, so this is the
       // rejection text verbatim — hence the <pre> below rather than a line.
       // ENOREMOTE is the one refusal with no git text to show: the server's
       // sentence is English and says less than a translated one.
       const auth = (err as { code?: string; auth?: GitAuthNeeded })?.auth;
-      if (laneNow.current === lane && (err as { code?: string })?.code === "EGITAUTH" && auth) {
+      const code = (err as { code?: string })?.code;
+      if (laneNow.current === lane && code === "EAGENTRUNNING" && body?.confirm !== true) {
+        askAgent = true;
+      } else if (laneNow.current === lane && code === "ECARRYCONFLICT" && body?.branch) {
+        // git would overwrite these files: show them and offer the shelf.
+        setChoice({
+          branch: body.branch,
+          conflict: (err as { files?: string[] }).files ?? [],
+        });
+      } else if (laneNow.current === lane && code === "EGITAUTH" && auth) {
         setLogin({ action, auth });
         setUsername((u) => u || auth.username || "");
         setPassword("");
@@ -210,6 +270,15 @@ export function LaneGitBar({
         setBusy(null);
       }
     }
+    if (askAgent) {
+      const ok = await confirmDialog({
+        title: t("shelves.agentTitle"),
+        message: t("shelves.agentMessage"),
+        confirmLabel: t("shelves.agentConfirm"),
+        destructive: false,
+      });
+      if (ok && laneNow.current === lane) void run(action, { ...body, confirm: true });
+    }
   };
 
   const refreshBranches = async () => {
@@ -217,6 +286,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([]);
@@ -294,6 +364,20 @@ export function LaneGitBar({
     if (ok) void run("merge", { branch });
   };
 
+  // Switch branch: straight away on a clean tree; with changes, ask how.
+  const switchTo = (branch: string) => {
+    if (dirty > 0) {
+      setChoice({ branch });
+      setError(null);
+    } else void run("switch", { branch });
+  };
+  // Enter in the new-branch box: with changes, Create & switch (they come
+  // along); on a clean tree, plain Create as before.
+  const createBranch = (andSwitch: boolean) => {
+    const branch = newBranch.trim();
+    if (branch) void run("branch-create", andSwitch ? { branch, switch: true } : { branch });
+  };
+
   const heldBy = new Map(
     worktrees.filter((w) => w.branch).map((w) => [w.branch as string, w.path])
   );
@@ -412,17 +496,30 @@ export function LaneGitBar({
               label={t("gitBar.switch")}
               icon={<GitBranch className="h-3.5 w-3.5" />}
               disabled={!!busy || merging}
-              // A dirty tree is refused server-side; saying so before the click
-              // beats a red box after it.
+              // With changes, Switch branch asks whether to bring or shelve
+              // them; the hint says so before the click.
               title={
                 merging
                   ? t("gitBar.merging", { op: git.operation ?? "merge" })
                   : dirty > 0
-                    ? t("gitBar.switchDirty")
+                    ? t("gitBar.switchDirtyHint", { count: dirty })
                     : t("gitBar.switchHint")
               }
               onClick={openSwitch}
             />
+            <BranchesButton
+              laneId={laneId}
+              session={session}
+              source={source}
+              dirty={dirty}
+              merging={merging}
+              disabled={!!busy}
+              onChanged={() => {
+                // A rename, delete or new branch makes the switcher's list stale.
+                if (branches !== null) void refreshBranches();
+                onChanged();
+              }}
+            />
           </div>
         )}
       </div>
@@ -446,15 +543,26 @@ 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")}
             busy={busy === "switch"}
             // A branch git already has checked out somewhere else cannot be
             // switched to — git allows one worktree per branch.
-            disabled={!picked || picked === git.branch || !!heldBy.get(picked) || dirty > 0}
-            title={dirty > 0 ? t("gitBar.switchDirty") : t("gitBar.switchHint")}
-            onClick={() => void run("switch", { branch: picked })}
+            disabled={!picked || picked === git.branch || !!heldBy.get(picked)}
+            title={
+              dirty > 0 ? t("gitBar.switchDirtyHint", { count: dirty }) : t("gitBar.switchHint")
+            }
+            onClick={() => switchTo(picked)}
           />
           <Btn
             label={t("gitBar.merge")}
@@ -476,7 +584,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 +594,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(
@@ -500,34 +608,83 @@ export function LaneGitBar({
               )
             }
           />
-          {dirty > 0 && (
-            <span className="text-[10px] text-status-warning">{t("gitBar.switchDirty")}</span>
+        </div>
+      )}
+
+      {switching && choice && (
+        <div
+          data-testid="lane-git-switch-choice"
+          role="group"
+          aria-label={t("gitBar.choiceTitle", { branch: choice.branch })}
+          className="space-y-1.5 rounded border border-border-light bg-surface-1 p-2 text-[11px]"
+        >
+          <p className="break-words text-fg-primary">
+            {choice.conflict
+              ? t("gitBar.carryConflict", { branch: choice.branch })
+              : t("gitBar.choiceMessage", { count: dirty, branch: choice.branch })}
+          </p>
+          {choice.conflict && choice.conflict.length > 0 && (
+            <ul
+              data-testid="lane-git-carry-conflicts"
+              className="max-h-24 overflow-auto font-mono text-[10px] text-status-warning"
+            >
+              {choice.conflict.map((f) => (
+                <li key={f} className="truncate" title={f}>
+                  {f}
+                </li>
+              ))}
+            </ul>
           )}
+          <div className="flex flex-wrap gap-1.5">
+            {!choice.conflict && (
+              <Btn
+                label={t("gitBar.choiceCarry")}
+                busy={busy === "switch"}
+                title={t("gitBar.choiceCarryHint")}
+                onClick={() => void run("switch", { branch: choice.branch, changes: "carry" })}
+              />
+            )}
+            <Btn
+              label={t("gitBar.choiceShelve")}
+              busy={busy === "switch"}
+              title={t("gitBar.choiceShelveHint")}
+              onClick={() => void run("switch", { branch: choice.branch, changes: "shelve" })}
+            />
+            <Btn label={t("gitBar.loginCancel")} onClick={() => setChoice(null)} />
+          </div>
         </div>
       )}
 
       {switching && (
-        <div className="flex items-center gap-1.5">
+        <div className="flex flex-wrap items-center gap-1.5">
           <input
             value={newBranch}
             onChange={(e) => setNewBranch(e.target.value)}
             onKeyDown={(e) => {
-              if (isSubmitEnter(e) && newBranch.trim())
-                void run("branch-create", { branch: newBranch.trim() });
+              if (isSubmitEnter(e)) createBranch(dirty > 0);
             }}
             placeholder={t("gitBar.branchNewPlaceholder")}
             aria-label={t("gitBar.branchNewPlaceholder")}
-            className="min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 font-mono text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+            className="min-w-[8rem] flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 font-mono text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none"
+          />
+          <Btn
+            label={t("gitBar.branchCreateSwitch")}
+            icon={<GitBranch className="h-3 w-3" />}
+            busy={busy === "branch-create"}
+            disabled={!newBranch.trim()}
+            // The working tree stays as it is: uncommitted changes come along.
+            title={t("gitBar.branchCreateSwitchHint")}
+            onClick={() => createBranch(true)}
           />
           <Btn
             label={t("gitBar.branchCreate")}
             icon={<Plus className="h-3 w-3" />}
             busy={busy === "branch-create"}
             disabled={!newBranch.trim()}
-            // Creating does not switch: the point is usually a sibling lane,
-            // and moving this pane's HEAD under a working agent is not.
+            // Plain Create does not switch: the point is usually a sibling
+            // lane, and moving this pane's HEAD under a working agent is not.
             title={t("gitBar.branchCreateHint")}
-            onClick={() => void run("branch-create", { branch: newBranch.trim() })}
+            onClick={() => createBranch(false)}
           />
         </div>
       )}

client/src/components/lanes/LaneGitHeader.tsx

@@ -10,7 +10,9 @@
  * It used to sit in the lane card, a column away from the diff it describes —
  * a pull there changed files the Changes panel only noticed on its next poll.
  * Here the two share one read of `GET /api/lanes/:id/git` (`useLaneGitFacts`,
- * owned by the panel) and refresh each other after every write.
+ * owned by the panel) and refresh each other after every write. Every other
+ * reader of the facts (the rail counts, a second panel) hears a write through
+ * `agenthub:git-changed` (lib/gitChanged.ts), which `useLaneGitFacts` listens to.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -21,6 +23,7 @@ import { GitBranch } from "lucide-react";
 import { LaneGitBar } from "./LaneGitBar";
 import { api, gitTarget, type GitSource } from "../../lib/api";
 import { keepIfSame } from "../../lib/keepIfSame";
+import { useGitChanged } from "../../lib/gitChanged";
 import type { LaneGitFacts, LaneGitFile } from "../../lib/types";
 
 /** How often the mounted panel re-reads its working-copy facts. Slow on
@@ -76,6 +79,9 @@ export function useLaneGitFacts(
       clearInterval(timer);
     };
   }, [laneId, session, source, nonce]);
+  // A git write from ANY view of this workspace (another panel, the session
+  // view, a second tab of the same page) moves these facts too.
+  useGitChanged(laneId, () => setNonce((n) => n + 1));
 
   return [facts, () => setNonce((n) => n + 1)];
 }

client/src/components/lanes/LaneShelves.tsx

@@ -0,0 +1,241 @@
+/**
+ * @file The Changes panel's Shelves list: changes set aside by AgentHub (git
+ * stash entries it made — `GET /api/lanes/:id/git/shelves`), each with its
+ * branch, note, time and files, and the two buttons that make a shelf safe to
+ * offer from a dashboard: **Restore** (`unshelve`, which drops the shelf only
+ * when it applied cleanly; a conflicted restore keeps it and leaves the files
+ * to the conflict list) and **Delete** (`shelf-drop`, two clicks through
+ * `useArmed`, sent with `confirm: true`). Collapsed to one line until opened,
+ * and absent while there are none. Also exports `withAgentConfirm`, the
+ * one place a git write answered `EAGENTRUNNING` asks the user and is resent
+ * with `confirm: true`.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Archive, ChevronDown, ChevronRight, RotateCcw, Trash2 } from "lucide-react";
+import i18n from "../../i18n";
+import { api, type GitShelf, type GitTarget } from "../../lib/api";
+import { confirmDialog } from "../../lib/confirm";
+import { toast } from "../../lib/toast";
+import { useArmed } from "../../hooks/useArmed";
+
+/**
+ * Run a git write; when the server answers `EAGENTRUNNING` (an agent of the
+ * workspace is working and the write would move files under it), ask, and
+ * resend it with `confirm: true`. Resolves null when the user declined.
+ */
+export async function withAgentConfirm<T>(
+  send: (confirm: boolean) => Promise<T>
+): Promise<T | null> {
+  try {
+    return await send(false);
+  } catch (err) {
+    if ((err as { code?: string })?.code !== "EAGENTRUNNING") throw err;
+    const ok = await confirmDialog({
+      title: i18n.t("lanes:shelves.agentTitle"),
+      message: i18n.t("lanes:shelves.agentMessage"),
+      confirmLabel: i18n.t("lanes:shelves.agentConfirm"),
+      destructive: false,
+    });
+    return ok ? send(true) : null;
+  }
+}
+
+/**
+ * Restore one shelf (`unshelve`), reporting the outcome in a toast. Shared by
+ * the list below and the git bar's "restore what you shelved here" prompt.
+ * @returns true when anything changed in the working tree.
+ */
+export async function restoreShelf(target: GitTarget, shelf: GitShelf): Promise<boolean> {
+  try {
+    const res = await withAgentConfirm((confirm) =>
+      api.lanes.gitAction(target, "unshelve", { sha: shelf.sha, ...(confirm ? { confirm } : {}) })
+    );
+    if (!res) return false;
+    if (res.conflicts?.length) {
+      toast.info(i18n.t("lanes:shelves.restoredConflicts", { count: res.conflicts.length }));
+    } else {
+      toast.success(i18n.t("lanes:shelves.restored"));
+    }
+    return true;
+  } catch (err) {
+    toast.error(
+      (err as { code?: string })?.code === "EDIRTY"
+        ? i18n.t("lanes:shelves.restoreDirty")
+        : err instanceof Error
+          ? err.message
+          : String(err)
+    );
+    return false;
+  }
+}
+
+/** "M", "A", "D", "??" → a colour, matching the Changes list's letters. */
+function statusTone(status: string): string {
+  if (status === "??" || status.startsWith("A")) return "text-status-success";
+  if (status.startsWith("D")) return "text-status-danger";
+  return "text-status-warning";
+}
+
+export function LaneShelves({
+  target,
+  reread,
+  onChanged,
+}: {
+  target: GitTarget;
+  /** Bumped by the panel after every git write: the list is read again. */
+  reread: number;
+  /** Called after a restore or a delete changed the tree or the list. */
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const [shelves, setShelves] = useState<GitShelf[]>([]);
+  const [open, setOpen] = useState(false);
+  const [filesOf, setFilesOf] = useState<string | null>(null);
+  const [busy, setBusy] = useState<string | null>(null);
+  const del = useArmed();
+  const key = JSON.stringify(target);
+  const keyNow = useRef(key);
+  keyNow.current = key;
+
+  const load = useCallback(async () => {
+    const asked = key;
+    try {
+      const r = await api.lanes.gitShelves(target);
+      if (keyNow.current === asked) setShelves(r.available ? r.shelves : []);
+    } catch {
+      if (keyNow.current === asked) setShelves([]);
+    }
+    // `target` is described by `key`; a new object with the same content is
+    // the same tree.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  useEffect(() => {
+    void load();
+  }, [load, reread]);
+
+  if (!shelves.length) return null;
+
+  const restore = async (s: GitShelf) => {
+    setBusy(s.sha);
+    try {
+      if (await restoreShelf(target, s)) onChanged();
+      await load();
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const drop = async (s: GitShelf) => {
+    if (!del.isArmed(s.sha)) {
+      del.arm(s.sha);
+      return;
+    }
+    del.disarm();
+    setBusy(s.sha);
+    try {
+      await api.lanes.gitAction(target, "shelf-drop", { sha: s.sha, confirm: true });
+      toast.success(t("shelves.deleted"));
+      onChanged();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+      await load();
+    }
+  };
+
+  return (
+    <section data-testid="lane-shelves" className="mb-2 rounded border border-border-light">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center gap-1 px-2 py-1 text-left text-[11px] font-medium text-fg-secondary hover:bg-surface-2"
+      >
+        {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+        <Archive className="h-3 w-3 text-fg-muted" aria-hidden />
+        {t("shelves.title", { count: shelves.length })}
+      </button>
+      {open && (
+        <ul className="divide-y divide-border-light border-t border-border-light">
+          {shelves.map((s) => {
+            const when = s.createdAt ? new Date(s.createdAt) : null;
+            const showFiles = filesOf === s.sha;
+            return (
+              <li key={s.sha} data-testid="lane-shelf" className="px-2 py-1 text-[11px]">
+                <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+                  <span
+                    className="min-w-0 max-w-full truncate font-mono font-semibold text-fg-primary"
+                    title={s.branch}
+                  >
+                    {s.branch}
+                  </span>
+                  {when && !Number.isNaN(when.getTime()) && (
+                    <span className="shrink-0 text-fg-muted" title={s.createdAt ?? undefined}>
+                      {when.toLocaleString()}
+                    </span>
+                  )}
+                  <button
+                    type="button"
+                    aria-expanded={showFiles}
+                    onClick={() => setFilesOf(showFiles ? null : s.sha)}
+                    className="shrink-0 text-fg-muted underline-offset-2 hover:text-fg-primary hover:underline"
+                  >
+                    {t("shelves.files", { count: s.files.length })}
+                  </button>
+                  <div className="ml-auto flex shrink-0 items-center gap-1">
+                    <button
+                      type="button"
+                      disabled={!!busy}
+                      onClick={() => void restore(s)}
+                      title={t("shelves.restoreHint")}
+                      className="flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-fg-secondary hover:bg-surface-3 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <RotateCcw className="h-3 w-3" aria-hidden />
+                      {t("shelves.restore")}
+                    </button>
+                    <button
+                      type="button"
+                      disabled={!!busy}
+                      onClick={() => void drop(s)}
+                      title={t("shelves.deleteHint")}
+                      className="flex items-center gap-1 rounded border border-status-danger/40 px-1.5 py-0.5 text-status-danger hover:bg-status-danger/10 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <Trash2 className="h-3 w-3" aria-hidden />
+                      {del.isArmed(s.sha) ? t("shelves.deleteConfirm") : t("shelves.delete")}
+                    </button>
+                  </div>
+                </div>
+                {s.note && (
+                  <p className="mt-0.5 break-words text-fg-secondary" title={s.note}>
+                    {s.note}
+                  </p>
+                )}
+                {showFiles && (
+                  <ul data-testid="lane-shelf-files" className="mt-1 space-y-0.5 pl-2">
+                    {s.files.map((f) => (
+                      <li key={f.path} className="flex min-w-0 items-center gap-1.5 font-mono">
+                        <span className={`w-4 shrink-0 text-center ${statusTone(f.status)}`}>
+                          {f.status === "??" ? "U" : f.status.slice(0, 1)}
+                        </span>
+                        <span className="min-w-0 truncate text-fg-secondary" title={f.path}>
+                          {f.path}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+export default LaneShelves;

client/src/components/lanes/WorkspaceHome.tsx

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

client/src/components/lanes/WorkspaceRow.tsx

@@ -161,12 +161,19 @@ export function WorkspaceRow({
             e.preventDefault();
             onReorder(index, index + (e.key === "ArrowUp" ? -1 : 1));
           }}
-          title={`${lane.cwd}\n${readOnly ?? t("row.hint")}`}
+          title={`${lane.cwd}\n${lane.folder_missing ? t("row.folderMissing") : (readOnly ?? t("row.hint"))}`}
           className="flex min-w-0 flex-1 items-center gap-2 py-1.5 text-left"
         >
           <span aria-hidden className={`h-2 w-2 shrink-0 rounded-full ${workspaceDot(lane)}`} />
           <span className="sr-only">{t(`row.state.${workspaceDotLabel(lane)}`)}</span>
-          <span className="truncate text-[13px] font-medium text-fg-primary">{name}</span>
+          <span
+            data-folder-missing={lane.folder_missing ? "true" : undefined}
+            className={`truncate text-[13px] font-medium ${
+              lane.folder_missing ? "text-fg-muted line-through" : "text-fg-primary"
+            }`}
+          >
+            {name}
+          </span>
         </button>
       )}
       {readOnly && <Eye aria-label={readOnly} className="mr-1 h-3 w-3 shrink-0 text-fg-muted" />}

client/src/components/lanes/WorkspaceSessionList.tsx

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

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

@@ -16,6 +16,7 @@ import { AddLaneModal } from "../AddLaneModal";
 import { api } from "../../../lib/api";
 import type { AiTool, AiToolsView, CwdSuggestion } from "../../../lib/api";
 import { __resetAiTools } from "../../../hooks/useAiTools";
+import { resetCloneJobsForTests } from "../../../lib/cloneJobs";
 import type { Lane } from "../../../lib/types";
 
 vi.mock("../../../lib/api", () => ({
@@ -26,6 +27,7 @@ vi.mock("../../../lib/api", () => ({
       worktree: vi.fn(),
       ensure: vi.fn(),
       clone: vi.fn(),
+      cloneJobs: vi.fn(),
       browse: vi.fn(),
       pickPath: vi.fn(),
       // The folder browser's Places list the user's workspaces.
@@ -158,6 +160,8 @@ beforeEach(() => {
   vi.mocked(api.lanes.worktree).mockReset();
   vi.mocked(api.lanes.ensure).mockReset();
   vi.mocked(api.lanes.clone).mockReset();
+  vi.mocked(api.lanes.cloneJobs).mockReset().mockResolvedValue({ jobs: [] });
+  resetCloneJobsForTests();
   vi.mocked(api.lanes.browse).mockReset();
   vi.mocked(api.lanes.pickPath).mockReset();
   // Provisioning finishes instantly by default - tests that care about the
@@ -790,6 +794,54 @@ describe("AddLaneModal — Clone", () => {
     await waitFor(() => expect(onAdded).toHaveBeenCalled());
   });
 
+  it("hands a background clone to the dock and selects the workspace when it ends", async () => {
+    const onAdded = vi.fn();
+    const onClose = vi.fn();
+    const job = {
+      id: "j1",
+      kind: "workspace",
+      state: "queued",
+      url: "git@github.com:owner/repo.git",
+      name: "repo",
+      parent: "/home/an/code",
+      target: "/home/an/code/repo",
+      laneId: null,
+      position: 1,
+      phase: null,
+      label: null,
+      percent: null,
+      detail: null,
+      error: null,
+      result: null,
+      createdAt: "",
+      finishedAt: null,
+      request: { url: "git@github.com:owner/repo.git", parent: "/home/an/code", name: "repo" },
+    } as const;
+    vi.mocked(api.lanes.clone).mockResolvedValue({ job: { ...job } });
+    vi.mocked(api.lanes.cloneJobs).mockResolvedValue({
+      jobs: [{ ...job, state: "done", result: { laneId: 5, path: "/home/an/code/repo" } }],
+    });
+    vi.mocked(api.lanes.get).mockResolvedValue({ lane: laneFixture({ id: 5 }) });
+    const user = userEvent.setup();
+    renderModal({ onAdded, onClose });
+    fireEvent.click(screen.getByRole("button", { name: "Clone" }));
+    const urlField = screen.getByLabelText("Repository URL");
+    await focusField(user, urlField);
+    await user.type(urlField, "git@github.com:owner/repo.git");
+    await user.type(screen.getByLabelText("Clone into folder"), "/home/an/code");
+    await user.click(screen.getByRole("button", { name: "Add workspace" }));
+    await waitFor(() =>
+      expect(api.lanes.clone).toHaveBeenCalledWith(expect.objectContaining({ background: true }))
+    );
+    // Accepted: the modal closes at once, before the clone is done.
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+    expect(onAdded).not.toHaveBeenCalled();
+    // The store's next read sees it done: the new workspace is selected.
+    await waitFor(() => expect(onAdded).toHaveBeenCalledWith(expect.objectContaining({ id: 5 })), {
+      timeout: 4000,
+    });
+  });
+
   it("sends partial only when the box is ticked", async () => {
     vi.mocked(api.lanes.clone).mockResolvedValue({
       lane: laneFixture({ id: 7 }),

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

@@ -0,0 +1,296 @@
+/**
+ * @file BranchManager.test.tsx
+ * @description Pins the git bar's Branches panel: local branches with the
+ * current one marked and ahead/behind shown, remote branches grouped by
+ * remote, the search box, arrow-key walking, and each action's request —
+ * rename, new branch from a remote branch (switch only offered on a clean
+ * tree), set/unset upstream, merge into current, delete refused with its
+ * reason — plus the Tags tab: annotated create, push one tag, delete with
+ * `confirm: true` after the themed confirm, and git's error shown verbatim.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { BranchManager } from "../git/BranchManager";
+import { api, type GitRefs } from "../../../lib/api";
+import { confirmDialog } from "../../../lib/confirm";
+
+vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(async () => true) }));
+vi.mock("../../../lib/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() },
+}));
+vi.mock("../../../lib/api", () => ({
+  gitTarget: (lane: number) => lane,
+  api: { lanes: { gitRefs: vi.fn(), gitRefAction: vi.fn() } },
+}));
+
+const REFS: GitRefs = {
+  available: true,
+  current: "main",
+  head: "aaaaaaa",
+  truncated: false,
+  local: [
+    {
+      name: "main",
+      sha: "a1",
+      current: true,
+      upstream: "origin/main",
+      ahead: 2,
+      behind: 1,
+      gone: false,
+      subject: "latest work",
+      date: null,
+      merged: true,
+      worktree: null,
+      protected: true,
+    },
+    {
+      name: "feature/very-long-branch-name",
+      sha: "b2",
+      current: false,
+      upstream: null,
+      ahead: null,
+      behind: null,
+      gone: false,
+      subject: "feature commit",
+      date: null,
+      merged: false,
+      worktree: null,
+      protected: false,
+    },
+    {
+      name: "held",
+      sha: "c3",
+      current: false,
+      upstream: null,
+      ahead: null,
+      behind: null,
+      gone: false,
+      subject: "x",
+      date: null,
+      merged: true,
+      worktree: "/tmp/other",
+      protected: false,
+    },
+  ],
+  remotes: [
+    {
+      remote: "origin",
+      branches: [
+        { name: "origin/main", branch: "main", sha: "a1", subject: "s", date: null },
+        { name: "origin/remote-only", branch: "remote-only", sha: "d4", subject: "r", date: null },
+      ],
+    },
+  ],
+  tags: [
+    {
+      name: "v1",
+      sha: "a1b2c3d4",
+      annotated: true,
+      message: "release one",
+      tagger: "T",
+      date: null,
+    },
+  ],
+};
+
+function setup(over: { dirty?: number } = {}) {
+  const onChanged = vi.fn();
+  render(
+    <BranchManager
+      laneId={3}
+      dirty={over.dirty ?? 0}
+      merging={false}
+      onClose={vi.fn()}
+      onChanged={onChanged}
+    />
+  );
+  return { onChanged };
+}
+
+beforeEach(() => {
+  vi.mocked(api.lanes.gitRefs).mockReset().mockResolvedValue(REFS);
+  vi.mocked(api.lanes.gitRefAction)
+    .mockReset()
+    .mockResolvedValue({ action: "x", ok: true, output: "" });
+  vi.mocked(confirmDialog).mockClear();
+});
+
+const row = (name: RegExp) => screen.getByRole("button", { name });
+
+describe("BranchManager", () => {
+  it("lists local branches with the current marked and remote ones grouped", async () => {
+    setup();
+    await screen.findByText("feature/very-long-branch-name");
+    const main = row(/^main/);
+    expect(within(main).getByText("current")).toBeInTheDocument();
+    expect(main).toHaveTextContent("2");
+    expect(main).toHaveTextContent("1");
+    expect(screen.getByText("Remote · origin")).toBeInTheDocument();
+    expect(screen.getByText("origin/remote-only")).toBeInTheDocument();
+    // A long name truncates with its full text as the tooltip.
+    expect(screen.getByText("feature/very-long-branch-name")).toHaveAttribute(
+      "title",
+      "feature/very-long-branch-name"
+    );
+  });
+
+  it("filters by the search box and walks rows with the arrow keys", async () => {
+    setup();
+    await screen.findByText("held");
+    await userEvent.type(screen.getByRole("textbox", { name: "Search branches" }), "remote");
+    expect(screen.queryByText("held")).toBeNull();
+    expect(screen.getByText("origin/remote-only")).toBeInTheDocument();
+    await userEvent.clear(screen.getByRole("textbox", { name: "Search branches" }));
+    await userEvent.keyboard("{ArrowDown}");
+    expect(row(/^main/)).toHaveFocus();
+    await userEvent.keyboard("{ArrowDown}");
+    expect(row(/^feature\/very-long/)).toHaveFocus();
+  });
+
+  it("renames a branch and re-reads the list", async () => {
+    const { onChanged } = setup();
+    await userEvent.click(await screen.findByText("feature/very-long-branch-name"));
+    await userEvent.click(screen.getByRole("button", { name: /^Rename$/ }));
+    const input = screen.getByRole("textbox", { name: "New name" });
+    await userEvent.clear(input);
+    await userEvent.type(input, "feature/short{Enter}");
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "branch-rename", {
+      branch: "feature/very-long-branch-name",
+      name: "feature/short",
+    });
+    await waitFor(() => expect(onChanged).toHaveBeenCalled());
+    expect(api.lanes.gitRefs).toHaveBeenCalledTimes(2);
+  });
+
+  it("refuses rename and delete of a protected current branch, with the reason", async () => {
+    setup();
+    await userEvent.click(await screen.findByText("main"));
+    expect(screen.getByRole("button", { name: /^Rename$/ })).toBeDisabled();
+    expect(screen.getByRole("button", { name: /^Delete$/ })).toBeDisabled();
+    expect(screen.getByText(/You are on this branch/)).toBeInTheDocument();
+  });
+
+  it("explains a branch another worktree holds", async () => {
+    setup();
+    await userEvent.click(await screen.findByText("held"));
+    expect(screen.getByRole("button", { name: /^Delete$/ })).toBeDisabled();
+    expect(screen.getByText(/another worktree: \/tmp\/other/)).toBeInTheDocument();
+  });
+
+  it("deletes an unmerged branch only after the confirm warns", async () => {
+    setup();
+    await userEvent.click(await screen.findByText("feature/very-long-branch-name"));
+    await userEvent.click(screen.getByRole("button", { name: /^Delete$/ }));
+    expect(vi.mocked(confirmDialog).mock.calls[0]?.[0].message).toMatch(/not merged/);
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "branch-delete", {
+      branch: "feature/very-long-branch-name",
+    });
+  });
+
+  it("creates a branch from a remote branch, switch offered only on a clean tree", async () => {
+    setup({ dirty: 2 });
+    await userEvent.click(await screen.findByText("origin/remote-only"));
+    await userEvent.click(screen.getByRole("button", { name: /New branch from here/ }));
+    expect(screen.getByRole("checkbox", { name: "Switch to it" })).toBeDisabled();
+    const input = screen.getByRole("textbox", { name: "New branch name" });
+    expect(input).toHaveValue("remote-only");
+    await userEvent.type(input, "{Enter}");
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "branch-create", {
+      branch: "remote-only",
+      from: "origin/remote-only",
+    });
+  });
+
+  it("sets and unsets an upstream, and merges into the current branch", async () => {
+    setup();
+    await userEvent.click(await screen.findByText("feature/very-long-branch-name"));
+    await userEvent.click(screen.getByRole("button", { name: /Set upstream/ }));
+    await userEvent.selectOptions(screen.getByRole("combobox"), "origin/remote-only");
+    await userEvent.click(screen.getByRole("button", { name: /Apply/ }));
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "branch-upstream", {
+      branch: "feature/very-long-branch-name",
+      upstream: "origin/remote-only",
+    });
+    await userEvent.click(screen.getByRole("button", { name: /Merge into main/ }));
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "merge", {
+      branch: "feature/very-long-branch-name",
+    });
+    await userEvent.click(screen.getByText("main"));
+    await userEvent.click(screen.getByRole("button", { name: /Unset upstream/ }));
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "branch-upstream", { branch: "main" });
+  });
+
+  it("shows git's own words when a write is refused", async () => {
+    vi.mocked(api.lanes.gitRefAction).mockRejectedValueOnce(
+      Object.assign(new Error("branch x already exists"), { code: "EBRANCHEXISTS" })
+    );
+    setup();
+    await userEvent.click(await screen.findByText("feature/very-long-branch-name"));
+    await userEvent.click(screen.getByRole("button", { name: /^Rename$/ }));
+    await userEvent.type(screen.getByRole("textbox", { name: "New name" }), "x{Enter}");
+    expect(await screen.findByTestId("branch-manager-error")).toHaveTextContent(
+      "branch x already exists"
+    );
+  });
+});
+
+describe("TagManager (Tags tab)", () => {
+  const openTags = async () => {
+    setup();
+    await screen.findByText("main");
+    await userEvent.click(screen.getByRole("tab", { name: /Tags/ }));
+  };
+
+  it("lists tags with their message and creates an annotated one", async () => {
+    await openTags();
+    expect(screen.getByText("v1")).toBeInTheDocument();
+    expect(screen.getByText(/release one/)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: /New tag/ }));
+    await userEvent.type(screen.getByRole("textbox", { name: /Tag name/ }), "v2");
+    await userEvent.type(
+      screen.getByRole("textbox", { name: /^On / }),
+      "feature/very-long-branch-name"
+    );
+    await userEvent.type(screen.getByRole("textbox", { name: /Message/ }), "notes");
+    await userEvent.click(screen.getByRole("button", { name: "Create annotated tag" }));
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "tag-create", {
+      tag: "v2",
+      message: "notes",
+      from: "feature/very-long-branch-name",
+    });
+  });
+
+  it("pushes one tag and deletes one only with confirm: true", async () => {
+    await openTags();
+    await userEvent.click(screen.getByText("v1"));
+    await userEvent.click(screen.getByRole("button", { name: /Push to origin/ }));
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "tag-push", { tag: "v1" });
+    await userEvent.click(screen.getByRole("button", { name: /Delete tag/ }));
+    expect(vi.mocked(confirmDialog).mock.lastCall?.[0].destructive).toBe(true);
+    expect(api.lanes.gitRefAction).toHaveBeenCalledWith(3, "tag-delete", {
+      tag: "v1",
+      confirm: true,
+    });
+  });
+
+  it("opens from the git bar's button and closes on Escape", async () => {
+    const { BranchesButton } = await import("../git/BranchesButton");
+    render(<BranchesButton laneId={3} dirty={0} merging={false} onChanged={vi.fn()} />);
+    await userEvent.click(screen.getByRole("button", { name: "Manage branches & tags" }));
+    expect(await screen.findByTestId("branch-manager")).toBeInTheDocument();
+    await screen.findByText("main");
+    await userEvent.keyboard("{Escape}");
+    expect(screen.queryByTestId("branch-manager")).toBeNull();
+  });
+
+  it("does not delete when the confirm is cancelled", async () => {
+    vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+    await openTags();
+    await userEvent.click(screen.getByText("v1"));
+    await userEvent.click(screen.getByRole("button", { name: /Delete tag/ }));
+    expect(api.lanes.gitRefAction).not.toHaveBeenCalled();
+  });
+});

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

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

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

@@ -14,17 +14,23 @@ import userEvent from "@testing-library/user-event";
 import "../../../i18n";
 
 vi.mock("../../../lib/api", () => ({
-  api: { lanes: { cloneFolder: vi.fn() }, gitIdentity: { get: vi.fn() } },
+  api: { lanes: { cloneFolder: vi.fn(), sources: vi.fn(), cloneJobs: vi.fn() }, gitIdentity: { get: vi.fn() } },
 }));
 
 import { api, type GitIdentity, type LaneSourcesView } from "../../../lib/api";
 import { CloneSourcesForm, cloneTarget } from "../CloneSourcesForm";
+import { CLONE_JOB_EVENT, resetCloneJobsForTests } from "../../../lib/cloneJobs";
 
 const view = { sources: [] } as unknown as LaneSourcesView & { path: string };
 
 describe("CloneSourcesForm", () => {
   beforeEach(() => {
     vi.mocked(api.lanes.cloneFolder).mockReset();
+    // A finished clone (an older server's answer, or a job the store saw end)
+    // makes the form read the folder list again.
+    vi.mocked(api.lanes.sources).mockReset().mockResolvedValue(view);
+    vi.mocked(api.lanes.cloneJobs).mockReset().mockResolvedValue({ jobs: [] });
+    resetCloneJobsForTests();
     // Unknown identity: nothing is checked up front.
     vi.mocked(api.gitIdentity.get).mockReset().mockRejectedValue(new Error("old server"));
   });
@@ -49,7 +55,7 @@ describe("CloneSourcesForm", () => {
     await user.click(screen.getByTestId("workspace-clone-run"));
 
     await waitFor(() => expect(api.lanes.cloneFolder).toHaveBeenCalledTimes(2));
-    expect(onAdded).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(onAdded).toHaveBeenCalledTimes(1));
     expect(await screen.findByText(/private\.test needs a login/)).toBeInTheDocument();
     // Only what is left stays in the box.
     expect(screen.getByTestId("workspace-clone-input")).toHaveValue("https://private.test/b.git");
@@ -60,13 +66,52 @@ describe("CloneSourcesForm", () => {
 
     await waitFor(() => expect(onAdded).toHaveBeenCalledTimes(2));
     expect(api.lanes.cloneFolder).toHaveBeenLastCalledWith(3, {
-      progressToken: expect.any(String),
+      background: true,
       url: "https://private.test/b.git",
       credentials: { username: "dev", password: "tok", remember: true },
     });
     expect(screen.getByTestId("workspace-clone-input")).toHaveValue("");
   });
 
+  it("hands a background clone to the dock and re-reads the folders when it ends", async () => {
+    const user = userEvent.setup();
+    const onAdded = vi.fn();
+    const job = {
+      id: "s1",
+      kind: "source",
+      state: "queued",
+      url: "https://h/a.git",
+      name: "a",
+      parent: "/",
+      target: "/a",
+      laneId: 3,
+      position: 1,
+      phase: null,
+      label: null,
+      percent: null,
+      detail: null,
+      error: null,
+      result: null,
+      createdAt: "",
+      finishedAt: null,
+      request: { url: "https://h/a.git", parent: "/", name: "a" },
+    } as const;
+    vi.mocked(api.lanes.cloneFolder).mockResolvedValue({ job: { ...job } });
+    render(<CloneSourcesForm laneId={3} parent="/w" onAdded={onAdded} />);
+    await user.type(screen.getByTestId("workspace-clone-input"), "https://h/a.git");
+    await user.click(screen.getByTestId("workspace-clone-run"));
+    expect(await screen.findByText(/progress is in the corner/)).toBeInTheDocument();
+    expect(screen.getByTestId("workspace-clone-input")).toHaveValue("");
+    expect(onAdded).not.toHaveBeenCalled();
+    // Another workspace's clone is not ours.
+    window.dispatchEvent(
+      new CustomEvent(CLONE_JOB_EVENT, { detail: { ...job, laneId: 4, state: "done" } })
+    );
+    window.dispatchEvent(new CustomEvent(CLONE_JOB_EVENT, { detail: { ...job, state: "done" } }));
+    await waitFor(() => expect(onAdded).toHaveBeenCalledTimes(1));
+    expect(api.lanes.sources).toHaveBeenCalledWith(3);
+  });
+
   it("asks for partial clones when the box is ticked", async () => {
     const user = userEvent.setup();
     vi.mocked(api.lanes.cloneFolder).mockResolvedValue(view);
@@ -76,7 +121,7 @@ describe("CloneSourcesForm", () => {
     await user.click(screen.getByTestId("workspace-clone-run"));
     await waitFor(() =>
       expect(api.lanes.cloneFolder).toHaveBeenCalledWith(3, {
-        progressToken: expect.any(String),
+        background: true,
         url: "https://h/big.git",
         partial: true,
       })
@@ -112,9 +157,11 @@ describe("CloneSourcesForm", () => {
     await waitFor(() => expect(api.lanes.cloneFolder).toHaveBeenCalledTimes(1));
     expect(api.lanes.cloneFolder).toHaveBeenCalledWith(3, {
       url: "https://h.test/a.git",
-      progressToken: expect.any(String),
+      background: true,
     });
     expect(await screen.findByText(/has no SSH key yet/)).toBeInTheDocument();
-    expect(screen.getByTestId("workspace-clone-input")).toHaveValue("git@github.com:o/r.git");
+    await waitFor(() =>
+      expect(screen.getByTestId("workspace-clone-input")).toHaveValue("git@github.com:o/r.git")
+    );
   });
 });

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

@@ -3,21 +3,26 @@
  * opens sub-folders, makes a folder inline, deletes into the Trash without a
  * confirm, copies in one workspace and pastes into another (`fromLane`),
  * asks Replace / Keep both / Skip when an upload's name is taken, refuses a
- * batch over 500 MB before sending anything, restores from the user's own
+ * batch over 500 MB before sending anything, leaves a repo's .git out of a
+ * folder upload with one notice, restores from the user's own
  * Trash, opens an admin's Trash on one folder per user (counted, an unreadable
  * one saying why), opens each user's Trash from its folder (asking before a
  * purge there, sending the item's store) and
  * shows a Trash that could not be read as an error, never as empty; nests a
  * user's workspaces under their home in the sidebar (under a fold-only row
- * when the viewer may not open that home).
+ * when the viewer may not open that home); opens an HTML file as the page
+ * instead of downloading it; New → Clone repository starts a background
+ * clone (`background: true`), keeps a pre-start refusal in the form, and a
+ * finished clone (the `agenthub:clone-job` event) re-reads the folder.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { FileExplorer } from "../FileExplorer";
-import { api, type FsListing } from "../../../lib/api";
+import { api, type CloneJob, type FsListing } from "../../../lib/api";
 import { toast } from "../../../lib/toast";
+import { CLONE_JOB_EVENT, resetCloneJobsForTests } from "../../../lib/cloneJobs";
 import { confirmDialog } from "../../../lib/confirm";
 
 vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(async () => false) }));
@@ -30,7 +35,7 @@ vi.mock("../../../lib/api", () => ({
     lanes: {
       list: vi.fn(),
       clone: vi.fn(),
-      cloneProgress: vi.fn(),
+      cloneJobs: vi.fn(async () => ({ jobs: [] })),
       gitDownloadUrl: (t: number, p: string) => `/api/lanes/${t}/git/download?path=${p}`,
     },
     files: {
@@ -73,9 +78,30 @@ const src: FsListing = {
   truncated: false,
   entries: [{ name: "x.js", path: "src/x.js", type: "file", size: 2, mtime: 0 }],
 };
+const job: CloneJob = {
+  id: "j1",
+  kind: "workspace",
+  state: "queued",
+  url: "git@host:o/repo.git",
+  name: "repo",
+  parent: "/w/one",
+  target: "/w/one/repo",
+  laneId: null,
+  position: 1,
+  phase: null,
+  label: null,
+  percent: null,
+  detail: null,
+  error: null,
+  result: { laneId: 9, path: "/w/one/repo" },
+  createdAt: "",
+  finishedAt: null,
+  request: { url: "git@host:o/repo.git", parent: "/w/one", name: "repo" },
+};
 
 beforeEach(() => {
   vi.clearAllMocks();
+  resetCloneJobsForTests();
   vi.mocked(api.lanes.list).mockResolvedValue({
     lanes: [
       { id: 1, title: "one", cwd: "/w/one" },
@@ -136,6 +162,38 @@ describe("FileExplorer", () => {
     expect(api.files.list).toHaveBeenLastCalledWith(1, "src");
   });
 
+  it("opens an HTML file as the page, its stylesheet read through the download", async () => {
+    vi.mocked(api.files.list).mockResolvedValue({
+      ...root,
+      entries: [
+        ...root.entries,
+        { name: "deck.html", path: "deck.html", type: "file", size: 9, mtime: 0 },
+      ],
+    });
+    const body: Record<string, string> = {
+      "/dl/1/deck.html": '<link rel="stylesheet" href="s.css"><p>deck</p>',
+      "/dl/1/s.css": "p{color:red}",
+    };
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (u) => new Response(body[String(u)] ?? "", { status: 200 }));
+    const click = vi.spyOn(HTMLAnchorElement.prototype, "click").mockImplementation(() => {});
+    open();
+    await screen.findByText("deck.html");
+    fireEvent.doubleClick(row("deck.html"));
+    const viewer = await screen.findByTestId("fx-html-viewer");
+    await waitFor(() =>
+      expect(within(viewer).getByTestId("html-frame").getAttribute("srcdoc")).toContain(
+        "<style>p{color:red}</style>"
+      )
+    );
+    expect(click).not.toHaveBeenCalled();
+    fireEvent.click(within(viewer).getByRole("button", { name: "Close" }));
+    expect(screen.queryByTestId("fx-html-viewer")).toBeNull();
+    fetchSpy.mockRestore();
+    click.mockRestore();
+  });
+
   it("makes a folder inline", async () => {
     vi.mocked(api.files.mkdir).mockResolvedValue({ path: "docs" });
     const user = userEvent.setup();
@@ -196,7 +254,8 @@ describe("FileExplorer", () => {
         "a.txt",
         file,
         "keep",
-        expect.any(Function)
+        expect.any(Function),
+        expect.any(AbortSignal)
       )
     );
   });
@@ -217,7 +276,8 @@ describe("FileExplorer", () => {
         "",
         files.map((file) => ({ file, rel: file.name })),
         "replace",
-        expect.any(Function)
+        expect.any(Function),
+        expect.any(AbortSignal)
       )
     );
     expect(api.files.uploadCheck).toHaveBeenCalledWith(1, "", ["a.txt", "b.txt", "c.txt"]);
@@ -236,6 +296,23 @@ describe("FileExplorer", () => {
     expect(api.files.uploadBatch).not.toHaveBeenCalled();
   });
 
+  it("leaves a picked repo's .git out of a folder upload, with one notice", async () => {
+    vi.mocked(api.files.upload).mockResolvedValue({ path: "x" });
+    open();
+    await screen.findByText("a.txt");
+    const mk = (rel: string) => {
+      const f = new File(["hi"], rel.split("/").pop()!);
+      Object.defineProperty(f, "webkitRelativePath", { value: rel });
+      return f;
+    };
+    const files = ["repo/.git/HEAD", "repo/.git/objects/d4/ab", "repo/src/a.js"].map(mk);
+    fireEvent.change(screen.getByTestId("fx-upload-folder"), { target: { files } });
+    await waitFor(() => expect(api.files.upload).toHaveBeenCalledTimes(1));
+    expect(vi.mocked(api.files.upload).mock.calls[0]![1]).toBe("repo/src/a.js");
+    expect(toast.info).toHaveBeenCalledTimes(1);
+    expect(toast.error).not.toHaveBeenCalled();
+  });
+
   it("refuses a batch over 500 MB before sending anything", async () => {
     open();
     await screen.findByText("a.txt");
@@ -408,6 +485,33 @@ describe("FileExplorer", () => {
     );
   });
 
+  it("leaves a workspace whose folder was deleted out of the places", async () => {
+    vi.mocked(api.lanes.list).mockResolvedValue({
+      lanes: [
+        { id: 1, title: "one", cwd: "/w/one" },
+        { id: 2, title: "two", cwd: "/w/two", folder_missing: true },
+      ],
+      counts: {},
+    } as never);
+    open();
+    await screen.findByText("a.txt");
+    await waitFor(() => expect(api.lanes.list).toHaveBeenCalled());
+    await screen.findByText("one", { selector: "aside span" });
+    expect(screen.queryByRole("button", { name: "two" })).toBeNull();
+  });
+
+  it("drops the last folder's entries when the next one cannot be read", async () => {
+    vi.mocked(api.files.list).mockImplementation(async (_t, p = "") => {
+      if (p === "src") throw new Error("ENOENT: no such file or directory");
+      return root;
+    });
+    open();
+    await screen.findByText("a.txt");
+    fireEvent.doubleClick(row("src"));
+    await screen.findByText(/ENOENT/);
+    expect(screen.queryByText("a.txt")).toBeNull();
+  });
+
   it("right-clicks a sidebar workspace and a path crumb", async () => {
     const user = userEvent.setup();
     open();
@@ -535,12 +639,8 @@ describe("FileExplorer — New → Clone repository", () => {
     return screen.getByTestId("fx-clone-dialog");
   };
 
-  it("clones into the open folder of the workspace and says where", async () => {
-    vi.mocked(api.lanes.clone).mockResolvedValue({
-      lane: { id: 9, title: "repo", cwd: "/w/one/src/repo" },
-      created: true,
-      path: "/w/one/src/repo",
-    } as never);
+  it("clones into the open folder of the workspace in the background", async () => {
+    vi.mocked(api.lanes.clone).mockResolvedValue({ job: { ...job, state: "queued" } } as never);
     const user = userEvent.setup();
     open();
     fireEvent.doubleClick(await screen.findByText("src"));
@@ -554,26 +654,28 @@ describe("FileExplorer — New → Clone repository", () => {
         url: "git@host:o/repo.git",
         parent: "/w/one/src",
         name: undefined,
-        progressToken: expect.stringMatching(/^[0-9a-f]{32}$/),
+        background: true,
       })
     );
-    expect(toast.success).toHaveBeenCalled();
-    expect(screen.queryByTestId("fx-clone-dialog")).toBeNull();
+    // Accepted: the dialog steps aside, the app-wide dock takes over.
+    await waitFor(() => expect(screen.queryByTestId("fx-clone-dialog")).toBeNull());
   });
 
-  it("shows progress and lets the page go on while the clone runs", async () => {
-    let finish: (v: unknown) => void = () => {};
-    vi.mocked(api.lanes.clone).mockReturnValue(new Promise((r) => (finish = r)) as never);
-    vi.mocked(api.lanes.cloneProgress).mockResolvedValue({
-      state: "running",
-      position: null,
-      running: 1,
-      waiting: 0,
-      limit: 2,
-      phase: "receiving",
-      label: null,
-      percent: 45,
-      detail: "450/1000",
+  it("re-reads the folder and workspaces when a background clone ends", async () => {
+    open();
+    await screen.findByText("a.txt");
+    const lists = vi.mocked(api.files.list).mock.calls.length;
+    const laneReads = vi.mocked(api.lanes.list).mock.calls.length;
+    window.dispatchEvent(new CustomEvent(CLONE_JOB_EVENT, { detail: { ...job, state: "done" } }));
+    await waitFor(() => expect(vi.mocked(api.files.list).mock.calls.length).toBeGreaterThan(lists));
+    expect(vi.mocked(api.lanes.list).mock.calls.length).toBeGreaterThan(laneReads);
+  });
+
+  it("treats an older server's synchronous answer as a finished clone", async () => {
+    vi.mocked(api.lanes.clone).mockResolvedValue({
+      lane: { id: 9, title: "repo", cwd: "/w/one/repo" },
+      created: true,
+      path: "/w/one/repo",
     } as never);
     const user = userEvent.setup();
     open();
@@ -581,43 +683,8 @@ describe("FileExplorer — New → Clone repository", () => {
     const dialog = await openClone(user);
     await user.type(within(dialog).getByLabelText("Repository URL"), "git@host:o/repo.git");
     await user.click(within(dialog).getByTestId("fx-clone-submit"));
-    expect(await within(dialog).findByRole("progressbar")).toHaveAttribute("aria-valuenow", "45");
-    await user.click(within(dialog).getByRole("button", { name: "Run in background" }));
-    expect(screen.queryByTestId("fx-clone-dialog")).toBeNull();
-    const chip = await screen.findByTestId("fx-clone-chip");
-    expect(within(chip).getByText(/repo/)).toBeInTheDocument();
-    await user.click(chip);
-    expect(screen.getByTestId("fx-clone-dialog")).toBeInTheDocument();
-    await user.keyboard("{Escape}");
-    finish({
-      lane: { id: 9, title: "repo", cwd: "/w/one/repo" },
-      created: true,
-      path: "/w/one/repo",
-    });
     await waitFor(() => expect(toast.success).toHaveBeenCalled());
-    expect(screen.queryByTestId("fx-clone-chip")).toBeNull();
-  });
-
-  it("toasts a failure that lands while hidden and keeps it for the next open", async () => {
-    let fail: (e: unknown) => void = () => {};
-    vi.mocked(api.lanes.clone).mockReturnValue(new Promise((_, r) => (fail = r)) as never);
-    vi.mocked(api.lanes.cloneProgress).mockRejectedValue(new Error("404"));
-    const user = userEvent.setup();
-    open();
-    await screen.findByText("a.txt");
-    const dialog = await openClone(user);
-    await user.type(within(dialog).getByLabelText("Repository URL"), "https://git.example/o/r.git");
-    await user.click(within(dialog).getByTestId("fx-clone-submit"));
-    await user.keyboard("{Escape}");
-    fail(
-      Object.assign(new Error("login"), { code: "ECREDENTIALS", auth: { host: "git.example" } })
-    );
-    await waitFor(() => expect(toast.error).toHaveBeenCalled());
-    const again = await openClone(user);
-    expect(within(again).getByTestId("fx-clone-login")).toBeInTheDocument();
-    expect(within(again).getByLabelText("Repository URL")).toHaveValue(
-      "https://git.example/o/r.git"
-    );
+    expect(screen.queryByTestId("fx-clone-dialog")).toBeNull();
   });
 
   it("asks for a login on ECREDENTIALS and sends it once", async () => {
@@ -625,18 +692,16 @@ describe("FileExplorer — New → Clone repository", () => {
       .mockRejectedValueOnce(
         Object.assign(new Error("login"), { code: "ECREDENTIALS", auth: { host: "git.example" } })
       )
-      .mockResolvedValueOnce({
-        lane: { id: 9, title: "r", cwd: "/w/one/r" },
-        created: true,
-        path: "/w/one/r",
-      } as never);
+      .mockResolvedValueOnce({ job } as never);
     const user = userEvent.setup();
     open();
     await screen.findByText("a.txt");
     const dialog = await openClone(user);
     await user.type(within(dialog).getByLabelText("Repository URL"), "https://git.example/o/r.git");
     await user.click(within(dialog).getByTestId("fx-clone-submit"));
+    // A refusal before the clone starts stays in the form, with a login row.
     const login = await within(dialog).findByTestId("fx-clone-login");
+    expect(within(dialog).getByRole("alert")).toHaveTextContent("git.example needs a login");
     await user.type(within(login).getByLabelText("Username"), "ann");
     await user.type(within(login).getByLabelText("Password or access token"), "tok");
     await user.click(within(dialog).getByTestId("fx-clone-submit"));
@@ -644,6 +709,7 @@ describe("FileExplorer — New → Clone repository", () => {
       expect(api.lanes.clone).toHaveBeenLastCalledWith(
         expect.objectContaining({
           parent: "/w/one",
+          background: true,
           credentials: { username: "ann", password: "tok", remember: true },
         })
       )

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

@@ -20,6 +20,7 @@ import userEvent from "@testing-library/user-event";
 import { LaneChangesPanel, gitChangeFor } from "../LaneChangesPanel";
 import { confirmDialog, confirmDiscard } from "../../../lib/confirm";
 import { api } from "../../../lib/api";
+import { emitGitChanged } from "../../../lib/gitChanged";
 import type { LaneChanges } from "../../../lib/types";
 
 // The themed confirm needs its host (App); answer it here.
@@ -84,6 +85,19 @@ vi.mock("../../../lib/api", () => ({
       gitDownloadUrl: (id: number, path: string) =>
         `/api/lanes/${id}/git/download?path=${encodeURIComponent(path)}`,
       gitUpload: vi.fn(),
+      gitHistory: {
+        commit: vi.fn(),
+        patch: vi.fn(),
+        fileHistory: vi.fn(),
+        blameAt: vi.fn(),
+        treeAt: vi.fn(),
+        compare: vi.fn(),
+        compareFile: vi.fn(),
+        pickPlan: vi.fn(),
+        sequence: vi.fn(),
+        pick: vi.fn(),
+        act: vi.fn(),
+      },
     },
   },
 }));
@@ -153,6 +167,44 @@ function discardOf(path: string) {
 
 beforeEach(() => {
   perms.local = true;
+  const h = api.lanes.gitHistory;
+  vi.mocked(h.commit).mockReset().mockResolvedValue({ available: false });
+  vi.mocked(h.sequence).mockReset().mockResolvedValue({ available: true, active: false });
+  vi.mocked(h.pick).mockReset();
+  vi.mocked(h.pickPlan).mockReset().mockImplementation(async (_t, op, shas) => ({
+    available: true,
+    op,
+    commits: shas.map((sha) => ({
+      sha,
+      short: sha.slice(0, 7),
+      subject: "feat: the commit",
+      author: "t",
+      date: "2026-09-22T01:00:00Z",
+    })),
+    branch: "feat/thing",
+    clean: true,
+    repoRoot: true,
+    busy: false,
+  }));
+  vi.mocked(h.fileHistory)
+    .mockReset()
+    .mockResolvedValue({
+      available: true,
+      path: "server/lib/git-ops.js",
+      hasMore: false,
+      commits: [
+        {
+          sha: "a".repeat(40),
+          short: "aaaaaaa",
+          subject: "feat: the commit",
+          author: "t",
+          date: "2026-09-22T01:00:00Z",
+          parents: [],
+          status: "M",
+          path: "server/lib/git-ops.js",
+        },
+      ],
+    });
   vi.mocked(api.lanes.git).mockReset().mockResolvedValue({ available: false });
   vi.mocked(api.lanes.changes).mockReset();
   vi.mocked(api.lanes.changes).mockResolvedValue(changes());
@@ -445,6 +497,84 @@ describe("LaneChangesPanel", () => {
     );
   });
 
+  it("shows the NEW branch everywhere after a switch from the git bar", async () => {
+    // The repo as the server sees it: which branch, which changes.
+    let branch = "feat/thing";
+    vi.mocked(api.lanes.git).mockImplementation(async () => ({
+      available: true,
+      branch,
+      head: "9b3e74a",
+      subject: "wip",
+      dirty: 0,
+      untracked: 0,
+      files: [],
+      hasRemote: false,
+      upstream: null,
+      ahead: null,
+      behind: null,
+    }));
+    vi.mocked(api.lanes.changes).mockImplementation(async () =>
+      changes({
+        files: [
+          {
+            path: branch === "other" ? "only-on-other.ts" : "only-on-thing.ts",
+            status: " M",
+            untracked: false,
+            unstaged: true,
+            added: 1,
+            deleted: 0,
+            binary: false,
+          },
+        ],
+      })
+    );
+    vi.mocked(api.lanes.gitAction).mockImplementation(async (_t, action, body) => {
+      if (action === "switch") branch = (body as { branch: string }).branch;
+      return { action, ok: true, output: "", shelves: [] };
+    });
+    const user = userEvent.setup();
+    render(<LaneChangesPanel laneId={7} />);
+    expect(await screen.findByTestId("lane-git")).toHaveTextContent("feat/thing");
+    await screen.findByTitle("only-on-thing.ts");
+
+    await user.click(screen.getByRole("button", { name: /^Branch$/ }));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "other");
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+
+    await waitFor(() => expect(screen.getByTestId("lane-git")).toHaveTextContent("other"));
+    expect(await screen.findByTitle("only-on-other.ts")).toBeInTheDocument();
+    expect(screen.queryByTitle("only-on-thing.ts")).toBeNull();
+  });
+
+  it("re-reads when ANOTHER view of the lane changed its git state", async () => {
+    let branch = "feat/thing";
+    vi.mocked(api.lanes.git).mockImplementation(async () => ({
+      available: true,
+      branch,
+      head: "9b3e74a",
+      subject: "wip",
+      dirty: 0,
+      untracked: 0,
+      files: [],
+      hasRemote: false,
+      upstream: null,
+      ahead: null,
+      behind: null,
+    }));
+    render(<LaneChangesPanel laneId={7} />);
+    expect(await screen.findByTestId("lane-git")).toHaveTextContent("feat/thing");
+    const before = vi.mocked(api.lanes.changes).mock.calls.length;
+    branch = "other";
+    act(() => emitGitChanged(7, "switch"));
+    await waitFor(() => expect(screen.getByTestId("lane-git")).toHaveTextContent("other"));
+    expect(vi.mocked(api.lanes.changes).mock.calls.length).toBeGreaterThan(before);
+    // Another workspace's write is not this panel's business.
+    const now = vi.mocked(api.lanes.git).mock.calls.length;
+    act(() => emitGitChanged(8, "switch"));
+    await new Promise((r) => setTimeout(r, 20));
+    expect(vi.mocked(api.lanes.git).mock.calls.length).toBe(now);
+  });
+
   it("re-reads history too when Refresh is pressed there", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);
@@ -544,6 +674,71 @@ describe("LaneChangesPanel", () => {
     expect(screen.queryByTestId("lane-file-editor")).toBeNull();
   });
 
+  it("opens a whole HTML file as its source, the page in a modal after Preview", async () => {
+    vi.mocked(api.lanes.gitTree).mockResolvedValue({
+      available: true,
+      path: "",
+      entries: [{ name: "deck.html", path: "deck.html", dir: false, status: "??" }],
+      truncated: false,
+    });
+    vi.mocked(api.lanes.gitFile).mockResolvedValue({
+      available: true,
+      path: "deck.html",
+      rev: "work",
+      binary: false,
+      truncated: false,
+      lines: ["<p>deck</p>"],
+      sha: "c".repeat(40),
+    });
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response("<p>deck</p>", { status: 200 }));
+    try {
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} full />);
+      const sidebar = await screen.findByTestId("lane-changes-sidebar");
+      await user.click(await within(sidebar).findByText("deck.html"));
+      expect(await screen.findByTestId("lane-file-editor")).toHaveValue("<p>deck</p>");
+      expect(screen.queryByTestId("html-frame")).toBeNull();
+      await user.click(screen.getByTestId("lane-file-preview"));
+      const modal = await screen.findByTestId("html-viewer");
+      const frame = await within(modal).findByTestId("html-frame");
+      expect(frame.getAttribute("srcdoc")).toContain("<p>deck</p>");
+      expect(frame.getAttribute("sandbox")).not.toContain("allow-same-origin");
+      await user.keyboard("{Escape}");
+      await waitFor(() => expect(screen.queryByTestId("html-viewer")).toBeNull());
+      // The source stayed where it was, under the modal.
+      expect(screen.getByTestId("lane-file-editor")).toHaveValue("<p>deck</p>");
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
+  it("offers Preview on a changed HTML file's Changes, opening the page in a modal", async () => {
+    vi.mocked(api.lanes.changes).mockResolvedValue(
+      changes({
+        files: [
+          { path: "deck.html", status: "??", untracked: true, added: 1, deleted: 0, binary: false },
+        ],
+      })
+    );
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockResolvedValue(new Response("<p>deck</p>", { status: 200 }));
+    try {
+      const user = userEvent.setup();
+      render(<LaneChangesPanel laneId={7} />);
+      await user.click(await screen.findByTitle("deck.html"));
+      await screen.findByRole("button", { name: "Changes", pressed: true });
+      await user.click(await screen.findByTestId("lane-file-preview"));
+      const modal = await screen.findByTestId("html-viewer");
+      expect(await within(modal).findByTestId("html-frame")).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Changes", pressed: true })).toBeInTheDocument();
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
   it("shows an image file as the picture, with no edit control", async () => {
     vi.mocked(api.lanes.gitTree).mockResolvedValue({
       available: true,
@@ -772,22 +967,37 @@ describe("LaneChangesPanel", () => {
     });
   });
 
-  it("discards every file at once only after the dialog is confirmed", async () => {
+  it("discards only the ticked files, and only after the dialog is confirmed (#87)", async () => {
     const user = userEvent.setup();
     render(<LaneChangesPanel laneId={7} />);
     await screen.findByTestId("lane-changes-overview");
+    // notes.txt (unversioned) starts unticked; untick docs/API.md too.
+    await user.click(tickOf("docs/API.md"));
 
+    vi.mocked(confirmDialog).mockClear();
     vi.mocked(confirmDialog).mockResolvedValueOnce(false);
     await user.click(screen.getByTestId("lane-changes-discard-all"));
     expect(api.lanes.gitAction).not.toHaveBeenCalled();
+    // The confirm button carries its count, and a tracked-only selection
+    // says nothing about new files to delete.
+    expect(confirmDialog).toHaveBeenCalledWith(
+      expect.objectContaining({
+        confirmLabel: "Discard (1)",
+        message: expect.not.stringMatching(/new file|\{\{/),
+      })
+    );
 
     await user.click(screen.getByTestId("lane-changes-discard-all"));
     await waitFor(() =>
       expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "discard", {
-        paths: ["server/lib/git-ops.js", "notes.txt", "docs/API.md"],
+        paths: ["server/lib/git-ops.js"],
         confirm: true,
       })
     );
+
+    // Nothing ticked: nothing to discard.
+    await user.click(tickOf("server/lib/git-ops.js"));
+    expect(screen.getByTestId("lane-changes-discard-all")).toBeDisabled();
   });
 
   it("right-click on a changed file offers Commit File, a two-click discard, copy path and patch", async () => {
@@ -882,10 +1092,11 @@ describe("LaneChangesPanel", () => {
       within(screen.getByTestId("lane-changes-file-menu")).getByText("Show History")
     );
     await waitFor(() =>
-      expect(api.lanes.gitLog).toHaveBeenLastCalledWith(7, {
-        limit: 50,
-        file: "server/lib/git-ops.js",
-      })
+      expect(api.lanes.gitHistory.fileHistory).toHaveBeenLastCalledWith(
+        7,
+        "server/lib/git-ops.js",
+        { limit: 100 }
+      )
     );
     expect(screen.getByTestId("lane-changes-history-file")).toHaveTextContent(
       "server/lib/git-ops.js"
@@ -1012,7 +1223,7 @@ describe("LaneChangesPanel", () => {
 
     await user.click(screen.getByRole("button", { name: "History" }));
     expect(await screen.findAllByTestId("lane-changes-graph")).toHaveLength(1);
-    await user.click(await screen.findByText("feat: the commit"));
+    await user.dblClick(await screen.findByText("feat: the commit"));
 
     await waitFor(() =>
       expect(api.lanes.changes).toHaveBeenCalledWith(7, {
@@ -1070,8 +1281,21 @@ describe("LaneChangesPanel", () => {
       await screen.findByTestId("lane-changes-overview");
       await user.click(screen.getByRole("button", { name: "History" }));
 
+      vi.mocked(api.lanes.gitHistory.pick).mockResolvedValue({
+        action: "revert",
+        ok: true,
+        output: "",
+        conflicts: [],
+        paused: false,
+        from: "b".repeat(40),
+        to: "c".repeat(40),
+        commits: [{ sha: "c".repeat(40), short: "ccccccc", subject: 'Revert "x"' }],
+      });
       await user.click(within(await commitMenu(user)).getByText("Revert this commit"));
-      expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "revert", { sha: "a".repeat(40) });
+      await user.click(await screen.findByTestId("pick-confirm"));
+      await waitFor(() =>
+        expect(api.lanes.gitHistory.pick).toHaveBeenCalledWith(7, "revert", ["a".repeat(40)])
+      );
 
       await user.click(within(await commitMenu(user)).getByText("Undo commit (keep changes)"));
       await waitFor(() =>
@@ -1108,10 +1332,22 @@ describe("LaneChangesPanel", () => {
 
       await user.selectOptions(await screen.findByTestId("lane-changes-history-ref"), "other");
       await waitFor(() =>
-        expect(api.lanes.gitLog).toHaveBeenLastCalledWith(7, { limit: 50, ref: "other" })
+        expect(api.lanes.gitLog).toHaveBeenLastCalledWith(7, { limit: 100, ref: "other" })
       );
+      vi.mocked(api.lanes.gitHistory.pick).mockResolvedValue({
+        action: "cherry-pick",
+        ok: true,
+        output: "",
+        conflicts: [],
+        paused: false,
+      });
       await user.click(within(await commitMenu(user)).getByText("Cherry-pick onto feat/thing"));
-      expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "cherry-pick", { sha: "a".repeat(40) });
+      await user.click(await screen.findByTestId("pick-confirm"));
+      await waitFor(() =>
+        expect(api.lanes.gitHistory.pick).toHaveBeenCalledWith(7, "cherry-pick", [
+          "a".repeat(40),
+        ])
+      );
     });
 
     it("asks before a revert and an amend, and a No sends nothing", async () => {
@@ -1127,9 +1363,11 @@ describe("LaneChangesPanel", () => {
       expect(confirmDialog).toHaveBeenCalledTimes(1);
 
       await user.click(screen.getByRole("button", { name: "History" }));
-      vi.mocked(confirmDialog).mockResolvedValueOnce(false);
+      // A revert previews what it will do; Cancel sends nothing.
       await user.click(within(await commitMenu(user)).getByText("Revert this commit"));
-      await waitFor(() => expect(confirmDialog).toHaveBeenCalledTimes(2));
+      await screen.findByTestId("pick-plan");
+      await user.click(screen.getByRole("button", { name: "Cancel" }));
+      expect(api.lanes.gitHistory.pick).not.toHaveBeenCalled();
       expect(api.lanes.gitAction).not.toHaveBeenCalled();
     });
 
@@ -1608,6 +1846,25 @@ describe("LaneChangesPanel", () => {
       expect(api.lanes.gitAction).not.toHaveBeenCalled();
     });
 
+    it("discards only the ticked change blocks of a partly ticked file (#87)", async () => {
+      const user = userEvent.setup();
+      await openReview(user);
+      await user.click(
+        screen.getAllByRole("checkbox", { name: "Include this change in the commit" })[1]!
+      );
+      await user.click(screen.getByRole("button", { name: "Changes" }));
+      await screen.findByTestId("lane-changes-commit");
+      await user.click(screen.getByTestId("lane-changes-discard-all"));
+      await waitFor(() =>
+        expect(api.lanes.gitAction).toHaveBeenCalledWith(7, "discard", {
+          paths: [],
+          hunks: { "server/lib/git-ops.js": [{ hunk: "@@ -1,2 +1,3 @@", blocks: [0] }] },
+          context: 3,
+          confirm: true,
+        })
+      );
+    });
+
     it("commits only the ticked change blocks of a partly ticked file (hunks)", async () => {
       const user = userEvent.setup();
       await openReview(user);

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

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

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

@@ -3,8 +3,11 @@
  * @description Pins the lane git action row: the ahead/behind readout, which
  * 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
+ * Changes panel's staged-only box owns that), that a dirty tree's switch asks
+ * whether to bring the changes or shelve them (and offers the shelf when git
+ * refuses to carry them), Create & switch, the offer to restore a branch's
+ * shelf after switching to it, the confirm-and-resend of EAGENTRUNNING, 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>
  */
@@ -201,16 +204,114 @@ describe("LaneGitBar", () => {
     await waitFor(() => expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "push", {}));
   });
 
-  it("loads the branch list on demand and refuses to switch while dirty", async () => {
+  it("loads the branch list on demand and asks how to take the changes while dirty", async () => {
     const user = userEvent.setup();
     render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
 
     await user.click(screen.getByRole("button", { name: /Branch/ }));
     await waitFor(() => expect(api.lanes.gitBranches).toHaveBeenCalledWith(3));
     await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
-    // Picking is harmless; applying is what a dirty tree blocks.
-    expect(screen.getByRole("button", { name: "Switch branch" })).toBeDisabled();
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+    // Nothing is sent before the user picks what happens to the changes.
     expect(api.lanes.gitAction).not.toHaveBeenCalled();
+    const choice = screen.getByTestId("lane-git-switch-choice");
+    expect(choice).toHaveTextContent("3 uncommitted file(s)");
+    await user.click(screen.getByRole("button", { name: "Bring my changes" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "switch", {
+        branch: "development",
+        changes: "carry",
+      })
+    );
+  });
+
+  it("offers Shelve and switch when git refuses to carry the changes", async () => {
+    vi.mocked(api.lanes.gitAction).mockRejectedValueOnce(
+      Object.assign(new Error("would be overwritten"), {
+        code: "ECARRYCONFLICT",
+        files: ["src/a-very-long-path/that/should/truncate.ts"],
+      })
+    );
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+    await user.click(screen.getByRole("button", { name: "Bring my changes" }));
+    expect(await screen.findByTestId("lane-git-carry-conflicts")).toHaveTextContent(
+      "src/a-very-long-path/that/should/truncate.ts"
+    );
+    expect(screen.queryByRole("button", { name: "Bring my changes" })).toBeNull();
+    await user.click(screen.getByRole("button", { name: "Shelve and switch" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenLastCalledWith(3, "switch", {
+        branch: "development",
+        changes: "shelve",
+      })
+    );
+  });
+
+  it("asks before moving files under a working agent, then resends with confirm", async () => {
+    vi.mocked(api.lanes.gitAction).mockRejectedValueOnce(
+      Object.assign(new Error("agent"), { code: "EAGENTRUNNING" })
+    );
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+    await user.click(screen.getByRole("button", { name: "Shelve and switch" }));
+    await waitFor(() =>
+      expect(confirmDialog).toHaveBeenCalledWith(
+        expect.objectContaining({ title: "An agent is working here" })
+      )
+    );
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenLastCalledWith(3, "switch", {
+        branch: "development",
+        changes: "shelve",
+        confirm: true,
+      })
+    );
+  });
+
+  it("offers to restore the shelf of the branch switched to, and restores it on Yes", async () => {
+    const shelf = {
+      ref: "stash@{0}",
+      sha: "abc1234def",
+      branch: "development",
+      note: "",
+      createdAt: "2026-11-02T00:00:00.000Z",
+      files: [{ path: "a.txt", status: "M" }],
+    };
+    vi.mocked(api.lanes.gitAction)
+      .mockResolvedValueOnce({ action: "switch", ok: true, output: "", shelves: [shelf] })
+      .mockResolvedValueOnce({ action: "unshelve", ok: true, output: "", conflicts: [] });
+    const user = userEvent.setup();
+    const onChanged = vi.fn();
+    render(<LaneGitBar laneId={3} git={facts({ dirty: 0, untracked: 0 })} onChanged={onChanged} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.selectOptions(await screen.findByLabelText("Switch branch…"), "development");
+    await user.click(screen.getByRole("button", { name: "Switch branch" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenLastCalledWith(3, "unshelve", { sha: "abc1234def" })
+    );
+    expect(confirmDialog).toHaveBeenCalledWith(
+      expect.objectContaining({ title: "Restore shelved changes?" })
+    );
+  });
+
+  it("creates and switches in one step — the default on Enter while dirty", async () => {
+    const user = userEvent.setup();
+    render(<LaneGitBar laneId={3} git={facts()} onChanged={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /Branch/ }));
+    await user.type(await screen.findByLabelText("New branch name…"), "fix/ac-515{Enter}");
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "branch-create", {
+        branch: "fix/ac-515",
+        switch: true,
+      })
+    );
   });
 
   it("switches branch on a clean tree", async () => {
@@ -236,6 +337,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/lanes/__tests__/LaneShelves.test.tsx

@@ -0,0 +1,106 @@
+/**
+ * @file LaneShelves.test.tsx
+ * @description Pins the Changes panel's Shelves list: hidden while there are
+ * none, one collapsed line otherwise, each shelf's branch, note and files,
+ * Restore sending `unshelve` by sha (and the conflict outcome told in a
+ * toast), Delete needing a second click before `shelf-drop` with
+ * `confirm: true`.
+ * @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 { LaneShelves } from "../LaneShelves";
+import { api } from "../../../lib/api";
+import { toast } from "../../../lib/toast";
+
+vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(async () => true) }));
+vi.mock("../../../lib/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() },
+}));
+vi.mock("../../../lib/api", () => ({
+  api: { lanes: { gitAction: vi.fn(), gitShelves: vi.fn() } },
+}));
+
+const shelf = {
+  ref: "stash@{0}",
+  sha: "abc1234def5678",
+  branch: "fix/ac-515-a-rather-long-branch-name",
+  note: "half way through the login fix",
+  createdAt: "2026-11-02T03:04:05.000Z",
+  files: [
+    { path: "src/login.ts", status: "M" },
+    { path: "src/new.ts", status: "??" },
+  ],
+};
+
+beforeEach(() => {
+  vi.mocked(api.lanes.gitShelves)
+    .mockReset()
+    .mockResolvedValue({
+      available: true,
+      shelves: [shelf],
+    });
+  vi.mocked(api.lanes.gitAction).mockReset().mockResolvedValue({
+    action: "unshelve",
+    ok: true,
+    output: "",
+    conflicts: [],
+  });
+});
+
+describe("LaneShelves", () => {
+  it("renders nothing while there are no shelves", async () => {
+    vi.mocked(api.lanes.gitShelves).mockResolvedValue({ available: true, shelves: [] });
+    const { container } = render(<LaneShelves target={3} reread={0} onChanged={vi.fn()} />);
+    await waitFor(() => expect(api.lanes.gitShelves).toHaveBeenCalledWith(3));
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("lists a shelf with its branch, note and files", async () => {
+    const user = userEvent.setup();
+    render(<LaneShelves target={3} reread={0} onChanged={vi.fn()} />);
+    await user.click(await screen.findByRole("button", { name: /Shelves \(1\)/ }));
+    const row = screen.getByTestId("lane-shelf");
+    expect(row).toHaveTextContent(shelf.branch);
+    expect(row).toHaveTextContent(shelf.note);
+    await user.click(screen.getByRole("button", { name: "2 file(s)" }));
+    expect(screen.getByTestId("lane-shelf-files")).toHaveTextContent("src/new.ts");
+  });
+
+  it("restores by sha and reports a conflicted restore", async () => {
+    vi.mocked(api.lanes.gitAction).mockResolvedValueOnce({
+      action: "unshelve",
+      ok: true,
+      output: "",
+      conflicts: ["src/login.ts"],
+      kept: true,
+    });
+    const user = userEvent.setup();
+    const onChanged = vi.fn();
+    render(<LaneShelves target={3} reread={0} onChanged={onChanged} />);
+    await user.click(await screen.findByRole("button", { name: /Shelves/ }));
+    await user.click(screen.getByRole("button", { name: "Restore" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "unshelve", { sha: shelf.sha })
+    );
+    expect(onChanged).toHaveBeenCalled();
+    expect(toast.info).toHaveBeenCalledWith(expect.stringContaining("1 conflicted file"));
+  });
+
+  it("deletes only on the second click, with confirm", async () => {
+    const user = userEvent.setup();
+    render(<LaneShelves target={3} reread={0} onChanged={vi.fn()} />);
+    await user.click(await screen.findByRole("button", { name: /Shelves/ }));
+    await user.click(screen.getByRole("button", { name: "Delete" }));
+    expect(api.lanes.gitAction).not.toHaveBeenCalled();
+    await user.click(screen.getByRole("button", { name: "Delete for good?" }));
+    await waitFor(() =>
+      expect(api.lanes.gitAction).toHaveBeenCalledWith(3, "shelf-drop", {
+        sha: shelf.sha,
+        confirm: true,
+      })
+    );
+  });
+});

client/src/components/lanes/git/BlameView.tsx

@@ -0,0 +1,156 @@
+/**
+ * @file Blame / annotate at any revision (JetBrains' Annotate, GitLens'
+ * blame): the file's lines with, on the first line of each run, the commit
+ * that last changed it — short sha, author, relative date, summary. A commit
+ * opens its whole change; "Blame before this change" re-reads the file at
+ * that commit's parent (`previous`). Rows are windowed, so a 20 000-line
+ * file scrolls as fast as a short one.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type GitTarget } from "../../../lib/api";
+import type { BlameAt } from "../../../lib/gitHistory";
+import { timeAgo } from "../../../lib/format";
+import { GitModal } from "./GitModal";
+
+const ROW = 18;
+const OVERSCAN = 40;
+
+export function BlameView({
+  target,
+  path,
+  rev,
+  onClose,
+  onOpenCommit,
+}: {
+  target: GitTarget;
+  path: string;
+  /** A commit, or `work` for the file on disk. */
+  rev: string;
+  onClose: () => void;
+  onOpenCommit: (sha: string) => void;
+}) {
+  const { t } = useTranslation(["gitHistory", "lanes"]);
+  const [at, setAt] = useState({ path, rev });
+  const [blame, setBlame] = useState<BlameAt | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    setBlame(null);
+    setError(null);
+    void api.lanes.gitHistory
+      .blameAt(target, at.path, at.rev)
+      .then((r) => live && (r.available ? setBlame(r) : setError(t("noBlame"))))
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- target is stable
+  }, [at.path, at.rev]);
+
+  // Shade alternate commit runs so a run reads as one block.
+  const runs = useMemo(() => {
+    const starts: boolean[] = [];
+    const band: number[] = [];
+    let b = 0;
+    blame?.lines.forEach((l, i) => {
+      const start = i === 0 || blame.lines[i - 1]!.sha !== l.sha;
+      if (start && i) b++;
+      starts.push(start);
+      band.push(b);
+    });
+    return { starts, band };
+  }, [blame]);
+
+  const box = useRef<HTMLDivElement>(null);
+  const [top, setTop] = useState(0);
+  const height = 800;
+  const n = blame?.lines.length ?? 0;
+  const first = Math.max(0, Math.floor(top / ROW) - OVERSCAN);
+  const last = Math.min(n, Math.ceil((top + height) / ROW) + OVERSCAN);
+
+  return (
+    <GitModal
+      tall
+      testId="blame-view"
+      onClose={onClose}
+      title={
+        <span>
+          {t("blameTitle", { path: at.path })}{" "}
+          <span className="font-mono text-fg-muted">
+            @ {at.rev === "work" ? t("workingTree") : at.rev.slice(0, 7)}
+          </span>
+        </span>
+      }
+    >
+      {error && <p className="text-[12px] text-status-danger [overflow-wrap:anywhere]">{error}</p>}
+      {!blame && !error && (
+        <p className="text-[12px] text-fg-muted">{t("lanes:changes.loading")}</p>
+      )}
+      {blame && (
+        <div
+          ref={box}
+          onScroll={(e) => setTop(e.currentTarget.scrollTop)}
+          className="min-h-0 flex-1 overflow-auto font-mono text-[11px] leading-[18px]"
+        >
+          <div style={{ height: n * ROW, position: "relative", minWidth: "100%" }}>
+            {blame.lines.slice(first, last).map((l, k) => {
+              const i = first + k;
+              const c = l.sha ? blame.commits[l.sha] : null;
+              return (
+                <div
+                  key={i}
+                  data-testid="blame-line"
+                  style={{ position: "absolute", top: i * ROW, height: ROW, left: 0, right: 0 }}
+                  className={`flex ${runs.band[i]! % 2 ? "bg-surface-2/60" : ""}`}
+                >
+                  <span className="flex w-[16rem] shrink-0 items-center gap-1 overflow-hidden border-r border-border-light pr-1 text-fg-muted">
+                    {runs.starts[i] &&
+                      (c && l.sha ? (
+                        <>
+                          <button
+                            type="button"
+                            onClick={() => onOpenCommit(l.sha!)}
+                            title={`${c.summary ?? ""}\n${c.author ?? ""} · ${c.date ? new Date(c.date).toLocaleString() : ""}`}
+                            className="shrink-0 text-accent hover:underline"
+                          >
+                            {c.short}
+                          </button>
+                          <span className="min-w-0 truncate font-sans" title={c.author}>
+                            {c.author}
+                          </span>
+                          <span className="shrink-0 font-sans">
+                            {c.date ? timeAgo(c.date, true) : ""}
+                          </span>
+                          {c.previous && (
+                            <button
+                              type="button"
+                              title={t("blameBefore")}
+                              aria-label={t("blameBefore")}
+                              onClick={() => setAt({ path: at.path, rev: c.previous! })}
+                              className="shrink-0 font-sans hover:text-fg-primary"
+                            >
+                              ↶
+                            </button>
+                          )}
+                        </>
+                      ) : (
+                        <span className="font-sans italic">{t("notCommitted")}</span>
+                      ))}
+                  </span>
+                  <span className="w-10 shrink-0 select-none pr-1 text-right text-fg-muted">
+                    {i + 1}
+                  </span>
+                  <span className="whitespace-pre pl-1 text-fg-primary">{l.text}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/BranchManager.tsx

@@ -0,0 +1,641 @@
+/**
+ * @file The git bar's Branches panel (JetBrains' branch popup, GitLens'
+ * Branches view): a dialog over the workspace listing every local branch
+ * (current marked, upstream with ahead/behind, last commit, why a delete would
+ * be refused) and the fetched remote branches grouped by remote, filtered by a
+ * search box and walked with the arrow keys; picking a row opens its actions —
+ * new branch from it (optionally switching to it on a clean tree), rename,
+ * set/unset upstream, merge into the current branch, delete. Its Tags tab is
+ * `TagManager`. Everything it may do is decided by the server
+ * (`GET …/git/refs`, `POST …/git/:action`, server/lib/git-refs.js); a disabled
+ * button here is a courtesy, and git's own text is shown when it refuses.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ArrowDown,
+  ArrowUp,
+  Check,
+  GitBranch,
+  GitMerge,
+  Link2,
+  Link2Off,
+  Pencil,
+  Plus,
+  Search,
+  Tag,
+  Trash2,
+  X,
+} from "lucide-react";
+import {
+  api,
+  gitTarget,
+  type GitLocalBranch,
+  type GitRefs,
+  type GitRemoteBranch,
+  type GitSource,
+} from "../../../lib/api";
+import { useDialog } from "../../../hooks/useDialog";
+import { confirmDialog } from "../../../lib/confirm";
+import { toast } from "../../../lib/toast";
+import { isSubmitEnter } from "../../../lib/keys";
+import { timeAgo } from "../../../lib/format";
+import { Checkbox } from "../../Checkbox";
+import { TagManager } from "./TagManager";
+import { onListKeys, smallBtn, smallInput, type RunRefAction } from "./refUi";
+
+type Mode = "new" | "rename" | "upstream" | null;
+
+export function BranchManager({
+  laneId,
+  session,
+  source,
+  dirty,
+  merging,
+  onClose,
+  onChanged,
+}: {
+  laneId: number;
+  session?: string;
+  source?: GitSource;
+  /** Uncommitted files: a "switch to it" is refused on a dirty tree. */
+  dirty: number;
+  /** A merge, cherry-pick or revert is open: every write here is refused. */
+  merging: boolean;
+  onClose: () => void;
+  /** Called after every write, so the git bar and the Changes panel re-read. */
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitRefs"]);
+  const titleId = useId();
+  const panelRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+  useDialog(true, panelRef, onClose, searchRef);
+
+  const target = gitTarget(laneId, session, source);
+  const [refs, setRefs] = useState<GitRefs | null>(null);
+  const [tab, setTab] = useState<"branches" | "tags">("branches");
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>(null);
+  const [text, setText] = useState("");
+  const [switchTo, setSwitchTo] = useState(false);
+  const [upstream, setUpstream] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inFlight = useRef(false);
+
+  const load = useCallback(async () => {
+    try {
+      setRefs(await api.lanes.gitRefs(target));
+    } catch {
+      setRefs({
+        available: false,
+        current: null,
+        head: null,
+        local: [],
+        remotes: [],
+        tags: [],
+        truncated: false,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [laneId, session, source]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const run: RunRefAction = async (action, body, done) => {
+    if (inFlight.current) return false;
+    inFlight.current = true;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.lanes.gitRefAction(target, action, body);
+      if (done) toast.success(done);
+      setMode(null);
+      setText("");
+      await load();
+      onChanged();
+      return true;
+    } catch (err) {
+      const code = (err as { code?: string })?.code;
+      setError(
+        code === "EGITAUTH"
+          ? t("errLogin")
+          : code === "ESUBDIR"
+            ? t("errSubdir")
+            : err instanceof Error
+              ? err.message
+              : String(err)
+      );
+      return false;
+    } finally {
+      inFlight.current = false;
+      setBusy(false);
+    }
+  };
+
+  const q = query.trim().toLowerCase();
+  const match = (s: string) => !q || s.toLowerCase().includes(q);
+  const local = useMemo(
+    () => (refs?.local || []).filter((b) => match(b.name)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [refs, q]
+  );
+  const remoteGroups = useMemo(
+    () =>
+      (refs?.remotes || [])
+        .map((g) => ({ ...g, branches: g.branches.filter((b) => match(b.name)) }))
+        .filter((g) => g.branches.length),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [refs, q]
+  );
+  const allRemote = useMemo(
+    () => (refs?.remotes || []).flatMap((g) => g.branches.map((b) => b.name)),
+    [refs]
+  );
+  const current = refs?.current ?? null;
+
+  const pick = (key: string) => {
+    setSelected((s) => (s === key ? null : key));
+    setMode(null);
+    setText("");
+    setError(null);
+  };
+  const open = (m: Mode, initial = "") => {
+    setMode((v) => (v === m ? null : m));
+    setText(initial);
+    setSwitchTo(false);
+    setError(null);
+  };
+
+  const merge = async (branch: string) => {
+    const ok = await confirmDialog({
+      title: t("merge"),
+      message: t("mergeConfirm", { branch, current: current ?? "HEAD" }),
+      confirmLabel: t("merge"),
+      destructive: false,
+    });
+    if (ok) await run("merge", { branch }, t("done.merge", { branch }));
+  };
+  const remove = async (b: GitLocalBranch) => {
+    const ok = await confirmDialog({
+      title: t("delete"),
+      message: b.merged
+        ? t("deleteConfirm", { branch: b.name })
+        : t("deleteUnmerged", { branch: b.name }),
+      confirmLabel: t("delete"),
+      destructive: true,
+    });
+    if (ok) {
+      if (await run("branch-delete", { branch: b.name }, t("done.delete", { branch: b.name })))
+        setSelected(null);
+    }
+  };
+
+  /** Why `git branch -d` would refuse this branch, or null. */
+  const deleteBlock = (b: GitLocalBranch) =>
+    b.current
+      ? t("why.current")
+      : b.protected
+        ? t("why.protected")
+        : b.worktree
+          ? t("why.worktree", { path: b.worktree })
+          : null;
+
+  const newBranchForm = (from: string) => (
+    <div className="flex flex-wrap items-center gap-1.5">
+      <input
+        autoFocus
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => {
+          if (isSubmitEnter(e) && text.trim())
+            void run(
+              "branch-create",
+              { branch: text.trim(), from, ...(switchTo ? { switch: true } : {}) },
+              t("done.create", { branch: text.trim() })
+            );
+        }}
+        placeholder={t("newBranchName")}
+        aria-label={t("newBranchName")}
+        className={smallInput}
+      />
+      <Checkbox
+        checked={switchTo}
+        onChange={setSwitchTo}
+        disabled={dirty > 0 || merging}
+        label={t("switchToIt")}
+      />
+      <button
+        type="button"
+        className={smallBtn}
+        disabled={busy || !text.trim()}
+        onClick={() =>
+          void run(
+            "branch-create",
+            { branch: text.trim(), from, ...(switchTo ? { switch: true } : {}) },
+            t("done.create", { branch: text.trim() })
+          )
+        }
+      >
+        <Plus className="h-3 w-3" />
+        {t("create")}
+      </button>
+      {dirty > 0 && <span className="text-[10px] text-fg-muted">{t("switchDirty")}</span>}
+    </div>
+  );
+
+  const localActions = (b: GitLocalBranch) => {
+    const block = deleteBlock(b);
+    return (
+      <div className="space-y-1.5 border-t border-border-light px-2 py-1.5">
+        <div className="flex flex-wrap gap-1">
+          <button type="button" className={smallBtn} disabled={busy} onClick={() => open("new")}>
+            <Plus className="h-3 w-3" />
+            {t("newFrom")}
+          </button>
+          <button
+            type="button"
+            className={smallBtn}
+            disabled={busy || b.protected || merging}
+            title={b.protected ? t("why.protected") : t("renameHint")}
+            onClick={() => open("rename", b.name)}
+          >
+            <Pencil className="h-3 w-3" />
+            {t("rename")}
+          </button>
+          <button
+            type="button"
+            className={smallBtn}
+            disabled={busy || merging || !allRemote.length}
+            title={allRemote.length ? t("upstreamHint") : t("noRemoteBranches")}
+            onClick={() => {
+              open("upstream");
+              setUpstream(b.upstream ?? "");
+            }}
+          >
+            <Link2 className="h-3 w-3" />
+            {t("setUpstream")}
+          </button>
+          {b.upstream && (
+            <button
+              type="button"
+              className={smallBtn}
+              disabled={busy || merging}
+              onClick={() =>
+                void run("branch-upstream", { branch: b.name }, t("done.unsetUpstream"))
+              }
+            >
+              <Link2Off className="h-3 w-3" />
+              {t("unsetUpstream")}
+            </button>
+          )}
+          {!b.current && (
+            <button
+              type="button"
+              className={smallBtn}
+              disabled={busy || merging || dirty > 0 || !current}
+              title={dirty > 0 ? t("switchDirty") : t("mergeHint", { current: current ?? "" })}
+              onClick={() => void merge(b.name)}
+            >
+              <GitMerge className="h-3 w-3" />
+              {t("mergeInto", { current: current ?? "HEAD" })}
+            </button>
+          )}
+          <button
+            type="button"
+            className={`${smallBtn} hover:text-status-danger`}
+            disabled={busy || !!block}
+            title={block ?? (b.merged ? t("deleteHint") : t("why.unmerged"))}
+            onClick={() => void remove(b)}
+          >
+            <Trash2 className="h-3 w-3" />
+            {t("delete")}
+          </button>
+        </div>
+        {block && <p className="text-[10px] text-fg-muted [overflow-wrap:anywhere]">{block}</p>}
+        {!block && !b.merged && (
+          <p className="text-[10px] text-status-warning">{t("why.unmerged")}</p>
+        )}
+        {mode === "new" && newBranchForm(b.name)}
+        {mode === "rename" && (
+          <div className="flex items-center gap-1.5">
+            <input
+              autoFocus
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={(e) => {
+                if (isSubmitEnter(e) && text.trim() && text.trim() !== b.name)
+                  void run(
+                    "branch-rename",
+                    { branch: b.name, name: text.trim() },
+                    t("done.rename", { branch: text.trim() })
+                  );
+              }}
+              aria-label={t("renameTo")}
+              placeholder={t("renameTo")}
+              className={smallInput}
+            />
+            <button
+              type="button"
+              className={smallBtn}
+              disabled={busy || !text.trim() || text.trim() === b.name}
+              onClick={() =>
+                void run(
+                  "branch-rename",
+                  { branch: b.name, name: text.trim() },
+                  t("done.rename", { branch: text.trim() })
+                )
+              }
+            >
+              <Check className="h-3 w-3" />
+              {t("rename")}
+            </button>
+          </div>
+        )}
+        {mode === "upstream" && (
+          <div className="flex items-center gap-1.5">
+            <select
+              value={upstream}
+              onChange={(e) => setUpstream(e.target.value)}
+              aria-label={t("setUpstream")}
+              className="select min-w-0 flex-1 !rounded !py-0.5 !pl-2 !pr-6 font-mono !text-[11px]"
+            >
+              <option value="">{t("pickUpstream")}</option>
+              {allRemote.map((r) => (
+                <option key={r} value={r}>
+                  {r}
+                </option>
+              ))}
+            </select>
+            <button
+              type="button"
+              className={smallBtn}
+              disabled={busy || !upstream || upstream === b.upstream}
+              onClick={() =>
+                void run(
+                  "branch-upstream",
+                  { branch: b.name, upstream },
+                  t("done.setUpstream", { upstream })
+                )
+              }
+            >
+              <Check className="h-3 w-3" />
+              {t("apply")}
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const remoteActions = (r: GitRemoteBranch) => (
+    <div className="space-y-1.5 border-t border-border-light px-2 py-1.5">
+      <div className="flex flex-wrap gap-1">
+        <button
+          type="button"
+          className={smallBtn}
+          disabled={busy}
+          onClick={() => open("new", r.branch)}
+        >
+          <Plus className="h-3 w-3" />
+          {t("newFrom")}
+        </button>
+        <button
+          type="button"
+          className={smallBtn}
+          disabled={busy || merging || dirty > 0 || !current}
+          title={dirty > 0 ? t("switchDirty") : t("mergeHint", { current: current ?? "" })}
+          onClick={() => void merge(r.name)}
+        >
+          <GitMerge className="h-3 w-3" />
+          {t("mergeInto", { current: current ?? "HEAD" })}
+        </button>
+      </div>
+      {mode === "new" && newBranchForm(r.name)}
+    </div>
+  );
+
+  const row = (
+    key: string,
+    name: string,
+    sub: React.ReactNode,
+    badges: React.ReactNode,
+    actions: () => React.ReactNode
+  ) => (
+    <li key={key} className={selected === key ? "rounded bg-surface-2" : undefined}>
+      <button
+        type="button"
+        data-ref-row
+        aria-expanded={selected === key}
+        onClick={() => pick(key)}
+        className="flex w-full min-w-0 items-start gap-2 rounded px-2 py-1 text-left hover:bg-surface-3 focus:outline-none focus-visible:ring-1 focus-visible:ring-accent"
+      >
+        <GitBranch className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" aria-hidden />
+        <span className="min-w-0 flex-1">
+          <span className="flex min-w-0 items-center gap-1.5">
+            <span title={name} className="truncate font-mono text-xs text-fg-primary">
+              {name}
+            </span>
+            {badges}
+          </span>
+          <span className="block truncate text-[10px] text-fg-muted">{sub}</span>
+        </span>
+      </button>
+      {selected === key && actions()}
+    </li>
+  );
+
+  const badge = (label: string, tone = "text-fg-muted border-border-light") => (
+    <span className={`shrink-0 rounded border px-1 text-[9px] uppercase ${tone}`}>{label}</span>
+  );
+
+  const localRow = (b: GitLocalBranch) =>
+    row(
+      `l:${b.name}`,
+      b.name,
+      <>
+        {b.subject}
+        {b.date ? ` · ${timeAgo(b.date)}` : ""}
+      </>,
+      <>
+        {b.current && badge(t("current"), "text-accent border-accent/40")}
+        {b.protected && badge(t("protected"))}
+        {b.worktree && (
+          <span title={b.worktree} className="shrink-0">
+            {badge(t("worktree"))}
+          </span>
+        )}
+        {b.upstream && (
+          <span
+            title={b.upstream}
+            className="flex shrink-0 items-center gap-0.5 font-mono text-[10px] text-fg-muted"
+          >
+            {b.gone ? (
+              <span className="text-status-warning">{t("gone")}</span>
+            ) : (
+              <>
+                {(b.ahead ?? 0) > 0 && (
+                  <span className="flex items-center text-status-warning">
+                    <ArrowUp className="h-3 w-3" aria-label={t("ahead")} />
+                    {b.ahead}
+                  </span>
+                )}
+                {(b.behind ?? 0) > 0 && (
+                  <span className="flex items-center text-accent">
+                    <ArrowDown className="h-3 w-3" aria-label={t("behind")} />
+                    {b.behind}
+                  </span>
+                )}
+                {!b.ahead && !b.behind && <Check className="h-3 w-3" aria-label={t("inSync")} />}
+              </>
+            )}
+          </span>
+        )}
+      </>,
+      () => localActions(b)
+    );
+
+  const remoteRow = (r: GitRemoteBranch) =>
+    row(
+      `r:${r.name}`,
+      r.name,
+      <>
+        {r.subject}
+        {r.date ? ` · ${timeAgo(r.date)}` : ""}
+      </>,
+      null,
+      () => remoteActions(r)
+    );
+
+  const tabBtn = (id: "branches" | "tags", label: string, icon: React.ReactNode) => (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={tab === id}
+      onClick={() => {
+        setTab(id);
+        setSelected(null);
+        setMode(null);
+        setError(null);
+      }}
+      className={`flex items-center gap-1 border-b-2 px-2 py-1 text-xs ${
+        tab === id
+          ? "border-accent text-fg-primary"
+          : "border-transparent text-fg-muted hover:text-fg-primary"
+      }`}
+    >
+      {icon}
+      {label}
+    </button>
+  );
+
+  return (
+    <div
+      className="fixed inset-0 z-[55] flex items-start justify-center bg-black/60 p-4 sm:pt-16"
+      onClick={onClose}
+      role="presentation"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        data-testid="branch-manager"
+        onClick={(e) => e.stopPropagation()}
+        className="flex max-h-full w-full max-w-xl min-w-0 flex-col rounded-xl border border-border bg-surface-1 shadow-xl shadow-black/40"
+      >
+        <div className="flex items-center gap-2 border-b border-border-light px-3 pt-2">
+          <h3 id={titleId} className="sr-only">
+            {t("title")}
+          </h3>
+          <div role="tablist" className="flex min-w-0 flex-1 gap-1">
+            {tabBtn("branches", t("branches"), <GitBranch className="h-3.5 w-3.5" />)}
+            {tabBtn("tags", t("tags"), <Tag className="h-3.5 w-3.5" />)}
+          </div>
+          <button
+            type="button"
+            className="btn-icon -mt-1"
+            aria-label={t("close")}
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </button>
+        </div>
+        <div className="flex items-center gap-1.5 px-3 py-2">
+          <Search className="h-3.5 w-3.5 shrink-0 text-fg-muted" aria-hidden />
+          <input
+            ref={searchRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                panelRef.current?.querySelector<HTMLElement>("[data-ref-row]")?.focus();
+              }
+            }}
+            placeholder={tab === "tags" ? t("searchTags") : t("searchBranches")}
+            aria-label={tab === "tags" ? t("searchTags") : t("searchBranches")}
+            className={`${smallInput} !text-xs`}
+          />
+        </div>
+        {merging && <p className="px-3 pb-1 text-[11px] text-status-warning">{t("merging")}</p>}
+        {error && (
+          <pre
+            role="alert"
+            data-testid="branch-manager-error"
+            className="mx-3 mb-2 max-h-24 overflow-auto whitespace-pre-wrap rounded border border-status-danger/40 bg-status-danger/10 px-2 py-1 text-[10px] text-status-danger [overflow-wrap:anywhere]"
+          >
+            {error}
+          </pre>
+        )}
+        <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-3" onKeyDown={onListKeys}>
+          {!refs ? (
+            <p className="px-2 py-4 text-xs text-fg-muted">{t("loading")}</p>
+          ) : !refs.available ? (
+            <p className="px-2 py-4 text-xs text-fg-muted">{t("unavailable")}</p>
+          ) : tab === "tags" ? (
+            <TagManager
+              tags={(refs.tags || []).filter((x) => match(x.name))}
+              busy={busy}
+              merging={merging}
+              dirty={dirty}
+              run={run}
+            />
+          ) : (
+            <>
+              <h4 className="px-2 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wide text-fg-muted">
+                {t("local")}
+              </h4>
+              {local.length ? (
+                <ul>{local.map(localRow)}</ul>
+              ) : (
+                <p className="px-2 text-xs text-fg-muted">{t("noMatch")}</p>
+              )}
+              {remoteGroups.map((g) => (
+                <section key={g.remote}>
+                  <h4
+                    title={g.remote}
+                    className="truncate px-2 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide text-fg-muted"
+                  >
+                    {t("remote", { remote: g.remote })}
+                  </h4>
+                  <ul>{g.branches.map(remoteRow)}</ul>
+                </section>
+              ))}
+              {refs.truncated && (
+                <p className="px-2 pt-2 text-[10px] text-fg-muted">{t("truncated")}</p>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default BranchManager;

client/src/components/lanes/git/BranchesButton.tsx

@@ -0,0 +1,71 @@
+/**
+ * @file The git bar's "Branches & tags" icon button, which owns the Branches
+ * panel (`BranchManager`) it opens — portalled to `document.body`, so no
+ * scrolling or transformed ancestor of the Changes panel can clip it. The
+ * panel closes when the bar starts showing another workspace.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { Tags } from "lucide-react";
+import type { GitSource } from "../../../lib/api";
+import { BranchManager } from "./BranchManager";
+
+export function BranchesButton({
+  laneId,
+  session,
+  source,
+  dirty,
+  merging,
+  disabled,
+  onChanged,
+}: {
+  laneId: number;
+  session?: string;
+  source?: GitSource;
+  dirty: number;
+  merging: boolean;
+  disabled?: boolean;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitRefs"]);
+  const [open, setOpen] = useState(false);
+  const [shown, setShown] = useState(`${laneId}|${session ?? ""}|${source ?? ""}`);
+  const key = `${laneId}|${session ?? ""}|${source ?? ""}`;
+  if (shown !== key) {
+    setShown(key);
+    setOpen(false);
+  }
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        disabled={disabled}
+        title={t("openPanelHint")}
+        aria-label={t("openPanel")}
+        aria-haspopup="dialog"
+        className="flex h-6 w-6 items-center justify-center rounded text-[11px] text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        <Tags className="h-3.5 w-3.5" />
+      </button>
+      {open &&
+        createPortal(
+          <BranchManager
+            laneId={laneId}
+            session={session}
+            source={source}
+            dirty={dirty}
+            merging={merging}
+            onClose={() => setOpen(false)}
+            onChanged={onChanged}
+          />,
+          document.body
+        )}
+    </>
+  );
+}
+
+export default BranchesButton;

client/src/components/lanes/git/BrowseAtRevision.tsx

@@ -0,0 +1,175 @@
+/**
+ * @file Browse files at a revision (GitHub's "Browse files", GitLens' "Open
+ * files at revision"): a read-only tree of the workspace folder as it was at
+ * one commit — folders open on a click, read lazily — and the picked file's
+ * text (or image) beside it, with Blame at that commit. Every read goes
+ * through the server's own guards: a secret file is neither listed nor
+ * readable, a big file is capped, a binary one is named, not shown.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronDown, ChevronRight, File, Folder } from "lucide-react";
+import { api, type GitTarget } from "../../../lib/api";
+import type { TreeAtEntry } from "../../../lib/gitHistory";
+import type { LaneFileContent } from "../../../lib/types";
+import { LaneFileView } from "../LaneDiffView";
+import { GitModal } from "./GitModal";
+import { BlameView } from "./BlameView";
+
+const IMAGE = /\.(png|jpe?g|gif|webp|avif|bmp|ico)$/i;
+
+export function BrowseAtRevision({
+  target,
+  sha,
+  short,
+  onClose,
+}: {
+  target: GitTarget;
+  sha: string;
+  short: string;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation(["gitHistory", "lanes"]);
+  // Folder path → its entries; "" is the workspace folder.
+  const [tree, setTree] = useState<Record<string, TreeAtEntry[]>>({});
+  const [open, setOpen] = useState<Set<string>>(new Set([""]));
+  const [file, setFile] = useState<string | null>(null);
+  const [content, setContent] = useState<LaneFileContent | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [blame, setBlame] = useState(false);
+
+  const readDir = (dir: string) => {
+    if (tree[dir]) return;
+    void api.lanes.gitHistory
+      .treeAt(target, sha, dir)
+      .then((r) => r.available && setTree((m) => ({ ...m, [dir]: r.entries })))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+  };
+  useEffect(() => {
+    readDir("");
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once per commit
+  }, [sha]);
+
+  const openFile = (p: string) => {
+    setFile(p);
+    setContent(null);
+    setError(null);
+    if (IMAGE.test(p)) return;
+    void api.lanes
+      .gitFile(target, p, sha)
+      .then(setContent)
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)));
+  };
+
+  const toggleDir = (p: string) => {
+    setOpen((s) => {
+      const next = new Set(s);
+      if (next.has(p)) next.delete(p);
+      else next.add(p);
+      return next;
+    });
+    readDir(p);
+  };
+
+  const rows = (dir: string, depth: number): ReactNode =>
+    (tree[dir] ?? []).map((e) => (
+      <li key={e.path}>
+        <button
+          type="button"
+          onClick={() => (e.dir ? toggleDir(e.path) : e.submodule ? undefined : openFile(e.path))}
+          title={e.path}
+          style={{ paddingLeft: depth * 12 + 4 }}
+          className={`flex w-full items-center gap-1 rounded py-0.5 pr-1 text-left text-[11px] hover:bg-surface-2 ${
+            file === e.path ? "bg-surface-3 text-fg-primary" : "text-fg-secondary"
+          }`}
+        >
+          {e.dir ? (
+            open.has(e.path) ? (
+              <ChevronDown className="h-3 w-3 shrink-0" aria-hidden />
+            ) : (
+              <ChevronRight className="h-3 w-3 shrink-0" aria-hidden />
+            )
+          ) : (
+            <span className="w-3 shrink-0" />
+          )}
+          {e.dir ? (
+            <Folder className="h-3 w-3 shrink-0 text-fg-muted" aria-hidden />
+          ) : (
+            <File className="h-3 w-3 shrink-0 text-fg-muted" aria-hidden />
+          )}
+          <span className="min-w-0 truncate">{e.name}</span>
+        </button>
+        {e.dir && open.has(e.path) && <ul>{rows(e.path, depth + 1)}</ul>}
+      </li>
+    ));
+
+  return (
+    <GitModal
+      tall
+      testId="browse-at-revision"
+      onClose={onClose}
+      title={t("browseTitle", { short })}
+    >
+      <div className="flex min-h-0 flex-1 flex-col gap-2 sm:flex-row">
+        <ul
+          data-testid="browse-tree"
+          className="max-h-[35vh] shrink-0 overflow-auto rounded border border-border-light p-1 sm:max-h-none sm:w-64"
+        >
+          {tree[""] ? (
+            rows("", 0)
+          ) : (
+            <li className="text-[11px] text-fg-muted">{t("lanes:changes.loading")}</li>
+          )}
+        </ul>
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+          {file && (
+            <div className="mb-1 flex items-center gap-1.5 text-[11px]">
+              <span className="min-w-0 flex-1 font-mono text-fg-primary [overflow-wrap:anywhere]">
+                {file}
+              </span>
+              {!IMAGE.test(file) && (
+                <button
+                  type="button"
+                  onClick={() => setBlame(true)}
+                  className="shrink-0 rounded border border-border-light px-1.5 py-0.5 text-fg-secondary hover:bg-surface-2"
+                >
+                  {t("blame")}
+                </button>
+              )}
+            </div>
+          )}
+          {error && (
+            <p role="alert" className="text-[12px] text-status-danger [overflow-wrap:anywhere]">
+              {error}
+            </p>
+          )}
+          {!file && !error && <p className="text-[12px] text-fg-muted">{t("pickAFile")}</p>}
+          {file && IMAGE.test(file) && (
+            <img
+              src={api.lanes.gitRawUrl(target, file, sha)}
+              alt={file}
+              className="max-h-full max-w-full self-start object-contain"
+            />
+          )}
+          {file && content && content.available && content.binary && (
+            <p className="text-[12px] text-fg-muted">{t("binaryFile")}</p>
+          )}
+          {file && content && content.available && !content.binary && (
+            <LaneFileView path={file} lines={content.lines} truncated={content.truncated} fill />
+          )}
+        </div>
+      </div>
+      {blame && file && (
+        <BlameView
+          target={target}
+          path={file}
+          rev={sha}
+          onClose={() => setBlame(false)}
+          onOpenCommit={() => setBlame(false)}
+        />
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/CherryPickDialog.tsx

@@ -0,0 +1,152 @@
+/**
+ * @file The confirmation a cherry-pick or revert opens with, showing exactly
+ * what will happen before anything does (the reference tools' preview): the
+ * commits in the order git will apply them (numbered — read from the server,
+ * which orders them the same way the action will), the branch they land on,
+ * whether the working tree is clean, and what happens on a conflict. Confirm
+ * is disabled, with the reason, when the server would refuse (a dirty tree, a
+ * subfolder workspace, another operation open, a merge commit).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CheckCircle2, AlertTriangle } from "lucide-react";
+import { api, type GitTarget } from "../../../lib/api";
+import type { PickPlan, PickResult } from "../../../lib/gitHistory";
+import { GitModal, ModalButton } from "./GitModal";
+
+export function CherryPickDialog({
+  target,
+  op,
+  shas,
+  onClose,
+  onDone,
+}: {
+  target: GitTarget;
+  op: "cherry-pick" | "revert";
+  shas: string[];
+  onClose: () => void;
+  onDone: (r: PickResult) => void;
+}) {
+  const { t } = useTranslation(["gitHistory"]);
+  const [plan, setPlan] = useState<PickPlan | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [running, setRunning] = useState(false);
+
+  useEffect(() => {
+    let live = true;
+    void api.lanes.gitHistory
+      .pickPlan(target, op, shas)
+      .then((r) => live && (r.available ? setPlan(r) : setError(t("planUnavailable"))))
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- one plan per dialog
+  }, []);
+
+  const branch = plan?.branch ?? "HEAD";
+  const blocker = !plan
+    ? null
+    : plan.busy
+      ? t("blockBusy")
+      : !plan.repoRoot
+        ? t("blockSubdir")
+        : !plan.clean
+          ? t("blockDirty")
+          : null;
+  const n = plan?.commits.length ?? shas.length;
+  const title =
+    op === "revert" ? t("revertTitle", { count: n }) : t("pickTitle", { count: n, branch });
+
+  const run = async () => {
+    setRunning(true);
+    setError(null);
+    try {
+      onDone(
+        await api.lanes.gitHistory.pick(
+          target,
+          op,
+          plan!.commits.map((c) => c.sha)
+        )
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setRunning(false);
+    }
+  };
+
+  return (
+    <GitModal
+      title={title}
+      onClose={onClose}
+      testId="pick-dialog"
+      footer={
+        <>
+          <ModalButton onClick={onClose}>{t("cancel")}</ModalButton>
+          <ModalButton
+            primary
+            testId="pick-confirm"
+            disabled={!plan || !!blocker || running}
+            title={blocker ?? undefined}
+            onClick={() => void run()}
+          >
+            {running
+              ? t("running")
+              : op === "revert"
+                ? t("revertN", { count: n })
+                : t("pickN", { count: n, branch })}
+          </ModalButton>
+        </>
+      }
+    >
+      <div className="space-y-2 text-[12px] text-fg-secondary">
+        {!plan && !error && <p className="text-fg-muted">{t("planning")}</p>}
+        {plan && (
+          <>
+            <p className="[overflow-wrap:anywhere]">
+              {op === "revert"
+                ? t("revertIntro", { count: n, branch })
+                : t("pickIntro", { count: n, branch })}
+            </p>
+            <ol
+              data-testid="pick-plan"
+              className="space-y-0.5 rounded border border-border-light bg-surface-0 p-1.5"
+            >
+              {plan.commits.map((c, i) => (
+                <li key={c.sha} className="flex min-w-0 items-baseline gap-1.5">
+                  <span className="w-5 shrink-0 text-right text-fg-muted">{i + 1}.</span>
+                  <span className="shrink-0 font-mono text-[11px] text-fg-muted">{c.short}</span>
+                  <span className="min-w-0 flex-1 truncate text-fg-primary" title={c.subject}>
+                    {c.subject}
+                  </span>
+                </li>
+              ))}
+            </ol>
+            <p className="flex items-center gap-1.5">
+              {plan.clean && plan.repoRoot && !plan.busy ? (
+                <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-status-success" aria-hidden />
+              ) : (
+                <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-status-warning" aria-hidden />
+              )}
+              <span data-testid="pick-tree-state" className="[overflow-wrap:anywhere]">
+                {blocker ?? t("treeClean")}
+              </span>
+            </p>
+            <p className="text-fg-muted">{t(op === "revert" ? "revertResult" : "pickResult")}</p>
+            <p className="text-fg-muted">{t("onConflict", { op: t(`op.${op}`) })}</p>
+          </>
+        )}
+        {error && (
+          <p
+            role="alert"
+            className="whitespace-pre-wrap text-status-danger [overflow-wrap:anywhere]"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    </GitModal>
+  );
+}

client/src/components/lanes/git/CommitDetails.tsx

@@ -0,0 +1,203 @@
+/**
+ * @file The History tab's commit details pane (GitKraken's / JetBrains'
+ * right-hand commit panel): the full message, author and committer with
+ * dates, parents (each opens that commit), the commit's refs and the branches
+ * and tags that contain it, its changed files with +/- counts (a file opens
+ * that commit's diff of it in the panel's own diff viewer), and Copy SHA,
+ * Copy patch, Browse files, Compare with current and View all changes.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
+import { api, type GitTarget } from "../../../lib/api";
+import type { CommitDetails as Details } from "../../../lib/gitHistory";
+import type { LaneChangeFile } from "../../../lib/types";
+import { copyText } from "../../../lib/clipboard";
+import { RefChip, sortBadges } from "./CommitGraph";
+
+export function CommitDetails({
+  target,
+  sha,
+  onClose,
+  onOpenCommit,
+  onViewChanges,
+  onOpenFile,
+  onBrowse,
+  onCompare,
+  onCopyPatch,
+}: {
+  target: GitTarget;
+  sha: string;
+  onClose: () => void;
+  /** A parent clicked: focus that commit. */
+  onOpenCommit: (sha: string) => void;
+  onViewChanges: () => void;
+  onOpenFile: (path: string) => void;
+  onBrowse: () => void;
+  onCompare: () => void;
+  onCopyPatch: () => void;
+}) {
+  const { t } = useTranslation(["gitHistory", "lanes"]);
+  const [details, setDetails] = useState<Details | null>(null);
+  const [files, setFiles] = useState<LaneChangeFile[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let live = true;
+    void api.lanes.gitHistory
+      .commit(target, sha)
+      .then((r) => live && (r.available ? setDetails(r) : setError(t("noDetails"))))
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    void api.lanes
+      .changes(target, { range: "commit", sha })
+      .then((r) => live && setFiles(r.available ? r.files : []))
+      .catch(() => live && setFiles([]));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on sha by the parent
+  }, [sha]);
+
+  const button =
+    "shrink-0 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary";
+  const added = files?.reduce((n, f) => n + (f.added ?? 0), 0) ?? 0;
+  const deleted = files?.reduce((n, f) => n + (f.deleted ?? 0), 0) ?? 0;
+
+  return (
+    <section
+      data-testid="commit-details"
+      aria-label={t("detailsTitle")}
+      className="max-h-[45%] min-h-[6rem] shrink-0 overflow-y-auto rounded border border-border-light bg-surface-0 p-2 text-[11px]"
+    >
+      <div className="mb-1 flex items-start gap-1.5">
+        <span className="font-mono text-fg-muted">{sha.slice(0, 10)}</span>
+        <span className="min-w-0 flex-1" />
+        <button
+          type="button"
+          aria-label={t("close")}
+          onClick={onClose}
+          className="shrink-0 text-fg-muted hover:text-fg-primary"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      {error && <p className="text-status-danger [overflow-wrap:anywhere]">{error}</p>}
+      {!details && !error && <p className="text-fg-muted">{t("lanes:changes.loading")}</p>}
+      {details && (
+        <>
+          <p
+            data-testid="commit-details-message"
+            className="mb-1.5 whitespace-pre-wrap text-fg-primary [overflow-wrap:anywhere]"
+          >
+            {details.message}
+          </p>
+          <dl className="mb-1.5 grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 text-fg-secondary">
+            <dt className="text-fg-muted">{t("author")}</dt>
+            <dd className="min-w-0 [overflow-wrap:anywhere]">
+              {details.author} &lt;{details.email}&gt; · {new Date(details.date).toLocaleString()}
+            </dd>
+            {(details.committer !== details.author || details.committedAt !== details.date) && (
+              <>
+                <dt className="text-fg-muted">{t("committer")}</dt>
+                <dd className="min-w-0 [overflow-wrap:anywhere]">
+                  {details.committer} · {new Date(details.committedAt).toLocaleString()}
+                </dd>
+              </>
+            )}
+            <dt className="text-fg-muted">{t("parents", { count: details.parents.length })}</dt>
+            <dd className="flex min-w-0 flex-wrap gap-1">
+              {details.parents.length === 0 && <span>{t("rootCommit")}</span>}
+              {details.parents.map((p) => (
+                <button
+                  key={p}
+                  type="button"
+                  onClick={() => onOpenCommit(p)}
+                  className="font-mono text-accent hover:underline"
+                >
+                  {p.slice(0, 7)}
+                </button>
+              ))}
+            </dd>
+            {details.badges.length > 0 && (
+              <>
+                <dt className="text-fg-muted">{t("refs")}</dt>
+                <dd className="flex min-w-0 flex-wrap gap-1">
+                  {sortBadges(details.badges).map((b) => (
+                    <RefChip key={`${b.kind}:${b.name}`} badge={b} />
+                  ))}
+                </dd>
+              </>
+            )}
+            {(details.branches.length > 0 || details.tags.length > 0) && (
+              <>
+                <dt className="text-fg-muted">{t("containedIn")}</dt>
+                <dd className="min-w-0 [overflow-wrap:anywhere]">
+                  {[...details.branches, ...details.tags.map((x) => `tag ${x}`)].join(", ")}
+                  {details.containsTruncated ? " …" : ""}
+                </dd>
+              </>
+            )}
+          </dl>
+          <div className="mb-1.5 flex flex-wrap gap-1">
+            <button type="button" className={button} onClick={onViewChanges}>
+              {t("viewAllChanges")}
+            </button>
+            <button type="button" className={button} onClick={() => void copyText(details.sha)}>
+              {t("lanes:changes.copySha")}
+            </button>
+            <button
+              type="button"
+              className={button}
+              disabled={details.parents.length > 1}
+              onClick={onCopyPatch}
+            >
+              {t("copyPatch")}
+            </button>
+            <button type="button" className={button} onClick={onBrowse}>
+              {t("browseFiles")}
+            </button>
+            <button type="button" className={button} onClick={onCompare}>
+              {t("compareWithCurrent")}
+            </button>
+          </div>
+        </>
+      )}
+      {files && (
+        <>
+          <p className="mb-0.5 text-fg-muted">
+            {t("filesChanged", { count: files.length })}{" "}
+            <span className="text-status-success">+{added}</span>{" "}
+            <span className="text-status-danger">−{deleted}</span>
+          </p>
+          <ul data-testid="commit-details-files">
+            {files.map((f) => (
+              <li key={f.path}>
+                <button
+                  type="button"
+                  onClick={() => onOpenFile(f.path)}
+                  title={f.path}
+                  className="flex w-full items-baseline gap-1.5 rounded px-1 text-left hover:bg-surface-2"
+                >
+                  <span className="w-3 shrink-0 font-mono text-fg-muted">{f.status.trim()}</span>
+                  <span className="min-w-0 flex-1 text-fg-primary [overflow-wrap:anywhere]">
+                    {f.path}
+                  </span>
+                  {f.binary ? (
+                    <span className="shrink-0 text-fg-muted">{t("binary")}</span>
+                  ) : (
+                    <span className="shrink-0 font-mono">
+                      <span className="text-status-success">+{f.added ?? 0}</span>{" "}
+                      <span className="text-status-danger">−{f.deleted ?? 0}</span>
+                    </span>
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </section>
+  );
+}

client/src/components/lanes/git/CommitGraph.tsx

@@ -0,0 +1,182 @@
+/**
+ * @file The History tab's commit rows, drawn like VS Code's Source Control
+ * Graph / GitLens: the graph cell (lanes and merge edges from
+ * `lib/commitGraph`), the ref badges (current branch, local and remote
+ * branches, tags, a detached HEAD), the subject, author and relative date.
+ * Colours are theme tokens (CSS variables), so a lane reads in every theme.
+ * Long subjects and names truncate with the whole text in a tooltip.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+import { Cloud, GitBranch, Tag, Crosshair } from "lucide-react";
+import type { GraphRow } from "../../../lib/commitGraph";
+import type { RefBadge } from "../../../lib/gitHistory";
+import { timeAgo } from "../../../lib/format";
+
+/** One fixed-height row per commit so the lanes join up row to row. */
+export const GRAPH_ROW = 30;
+const GRAPH_COL = 12;
+/** Columns drawn at most; a wider graph is clipped, not the row. */
+const MAX_COLS = 12;
+/** Theme tokens, cycled per lane. */
+const GRAPH_COLORS = [
+  "rgb(var(--accent))",
+  "rgb(var(--status-success))",
+  "rgb(var(--status-warning))",
+  "rgb(var(--syn-property))",
+  "rgb(var(--status-danger))",
+  "rgb(var(--syn-function))",
+  "rgb(var(--kept))",
+  "rgb(var(--diff-mod))",
+];
+const hue = (i: number) => GRAPH_COLORS[i % GRAPH_COLORS.length];
+
+export function GraphCell({
+  row,
+  width,
+  merge,
+  head,
+}: {
+  row: GraphRow;
+  width: number;
+  /** A merge commit: a hollow node. */
+  merge?: boolean;
+  /** HEAD: a ringed node. */
+  head?: boolean;
+}) {
+  const cols = Math.min(width, MAX_COLS);
+  const x = (col: number) => col * GRAPH_COL + GRAPH_COL / 2;
+  const y = (f: number) => f * GRAPH_ROW;
+  return (
+    <svg
+      aria-hidden
+      width={cols * GRAPH_COL}
+      height={GRAPH_ROW}
+      className="shrink-0 overflow-hidden"
+      data-testid="lane-changes-graph"
+    >
+      {row.segs.map((g, i) => {
+        const ym = (y(g.y1) + y(g.y2)) / 2;
+        return (
+          <path
+            key={i}
+            d={`M${x(g.x1)} ${y(g.y1)} C${x(g.x1)} ${ym} ${x(g.x2)} ${ym} ${x(g.x2)} ${y(g.y2)}`}
+            fill="none"
+            stroke={hue(g.color)}
+            strokeWidth={1.5}
+          />
+        );
+      })}
+      {head && (
+        <circle
+          cx={x(row.col)}
+          cy={y(0.5)}
+          r={6}
+          fill="none"
+          stroke={hue(row.color)}
+          strokeWidth={1.5}
+        />
+      )}
+      <circle
+        cx={x(row.col)}
+        cy={y(0.5)}
+        r={3.5}
+        fill={merge ? "rgb(var(--surface-1))" : hue(row.color)}
+        stroke={hue(row.color)}
+        strokeWidth={merge ? 1.5 : 0}
+      />
+    </svg>
+  );
+}
+
+/** One ref badge: the kind's icon, the name truncated, the full name on hover. */
+export function RefChip({ badge }: { badge: RefBadge }) {
+  const { t } = useTranslation(["gitHistory"]);
+  const Icon =
+    badge.kind === "tag"
+      ? Tag
+      : badge.kind === "remote"
+        ? Cloud
+        : badge.kind === "head"
+          ? Crosshair
+          : GitBranch;
+  const tone = badge.current
+    ? "border-accent/60 bg-accent/15 text-accent font-semibold"
+    : badge.kind === "tag"
+      ? "border-status-warning/50 text-status-warning"
+      : badge.kind === "remote"
+        ? "border-border text-fg-muted"
+        : badge.kind === "head"
+          ? "border-status-danger/50 text-status-danger"
+          : "border-status-success/50 text-status-success";
+  const label = t(`badge.${badge.kind}`, { name: badge.name });
+  return (
+    <span
+      title={badge.current ? t("badge.current", { name: badge.name }) : label}
+      data-testid="ref-badge"
+      data-kind={badge.kind}
+      className={`inline-flex max-w-[10rem] shrink items-center gap-0.5 rounded border px-1 text-[10px] leading-4 ${tone}`}
+    >
+      <Icon className="h-2.5 w-2.5 shrink-0" aria-hidden />
+      <span className="truncate">{badge.name}</span>
+    </span>
+  );
+}
+
+/** Badges in the order the reference tools show them: HEAD's branch first. */
+export function sortBadges(badges: RefBadge[]): RefBadge[] {
+  const rank = (b: RefBadge) =>
+    b.current ? 0 : b.kind === "head" ? 1 : b.kind === "local" ? 2 : b.kind === "remote" ? 3 : 4;
+  return [...badges].sort((a, b) => rank(a) - rank(b) || a.name.localeCompare(b.name));
+}
+
+export interface GraphCommit {
+  sha: string;
+  short: string;
+  subject: string;
+  author: string;
+  email?: string;
+  date: string;
+  parents: string[];
+  badges?: RefBadge[];
+}
+
+/** The text half of a history row (the graph cell is drawn beside it). */
+export const CommitText = memo(function CommitText({ c }: { c: GraphCommit }) {
+  const badges = sortBadges(c.badges ?? []);
+  const when = new Date(c.date);
+  return (
+    <span className="flex min-w-0 flex-1 flex-col justify-center">
+      <span className="flex min-w-0 items-center gap-1">
+        {badges.slice(0, 4).map((b) => (
+          <RefChip key={`${b.kind}:${b.name}`} badge={b} />
+        ))}
+        {badges.length > 4 && (
+          <span
+            className="shrink-0 text-[10px] text-fg-muted"
+            title={badges
+              .slice(4)
+              .map((b) => b.name)
+              .join(", ")}
+          >
+            +{badges.length - 4}
+          </span>
+        )}
+        <span className="min-w-0 flex-1 truncate text-[11px] text-fg-primary" title={c.subject}>
+          {c.subject}
+        </span>
+      </span>
+      <span className="flex min-w-0 items-baseline gap-1.5 text-[10px] text-fg-muted">
+        <span className="shrink-0 font-mono">{c.short}</span>
+        <span className="min-w-0 truncate" title={c.email ? `${c.author} <${c.email}>` : c.author}>
+          {c.author}
+        </span>
+        <span className="shrink-0" title={when.toLocaleString()}>
+          {timeAgo(c.date)}
+        </span>
+      </span>
+    </span>
+  );
+});

client/src/components/lanes/git/CompareRefs.tsx

@@ -0,0 +1,245 @@
+/**
+ * @file Compare any two refs (GitLens' Search & Compare, GitHub's compare
+ * view): branches, tags or commits A and B; the commits only in A and only in
+ * B, and the files that differ — "Changes since they diverged" (A...B, what B
+ * adds; GitHub's default) or "Difference between the two" (A B, the trees as
+ * they stand). A file opens its diff in the panel's diff viewer; a commit
+ * opens its whole change. Swap flips the two sides.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowLeftRight } from "lucide-react";
+import { api, type GitTarget } from "../../../lib/api";
+import type { CompareResult, CompareFile } from "../../../lib/gitHistory";
+import { LaneDiffView } from "../LaneDiffView";
+import { GitModal } from "./GitModal";
+
+type Tab = "files" | "onlyA" | "onlyB";
+
+export function CompareRefs({
+  target,
+  initialA,
+  initialB,
+  refs,
+  onClose,
+  onOpenCommit,
+}: {
+  target: GitTarget;
+  initialA: string;
+  initialB: string;
+  /** Branch names offered in the inputs' suggestion lists. */
+  refs: string[];
+  onClose: () => void;
+  onOpenCommit: (sha: string) => void;
+}) {
+  const { t } = useTranslation(["gitHistory", "lanes"]);
+  const [a, setA] = useState(initialA);
+  const [b, setB] = useState(initialB);
+  const [asked, setAsked] = useState({ a: initialA, b: initialB });
+  const [mode, setMode] = useState<"three" | "two">("three");
+  const [result, setResult] = useState<CompareResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [tab, setTab] = useState<Tab>("files");
+  const [file, setFile] = useState<CompareFile["file"] | null>(null);
+  const [fileLoading, setFileLoading] = useState(false);
+
+  useEffect(() => {
+    let live = true;
+    setResult(null);
+    setError(null);
+    setFile(null);
+    void api.lanes.gitHistory
+      .compare(target, asked.a, asked.b, mode)
+      .then((r) => live && (r.available ? setResult(r) : setError(t("compareUnavailable"))))
+      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- target is stable
+  }, [asked, mode]);
+
+  const openFile = (path: string, from?: string) => {
+    if (!result) return;
+    setFileLoading(true);
+    void api.lanes.gitHistory
+      .compareFile(target, result.a, result.b, mode, path, from)
+      .then((r) => r.available && setFile(r.file))
+      .catch((err) => setError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setFileLoading(false));
+  };
+
+  const input =
+    "min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-1.5 py-0.5 font-mono text-[11px] text-fg-primary";
+  const tabBtn = (k: Tab, label: string) => (
+    <button
+      key={k}
+      type="button"
+      aria-pressed={tab === k}
+      onClick={() => {
+        setTab(k);
+        setFile(null);
+      }}
+      className={`rounded px-2 py-0.5 text-[11px] ${
+        tab === k ? "bg-accent-solid text-white" : "text-fg-secondary hover:bg-surface-3"
+      }`}
+    >
+      {label}
+    </button>
+  );
+  const commits = tab === "onlyA" ? result?.onlyA : result?.onlyB;
+
+  return (
+    <GitModal tall testId="compare-refs" onClose={onClose} title={t("compareTitle")}>
+      <form
+        className="mb-2 flex flex-wrap items-center gap-1.5"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (a.trim() && b.trim()) setAsked({ a: a.trim(), b: b.trim() });
+        }}
+      >
+        <datalist id="compare-refs-list">
+          {refs.map((r) => (
+            <option key={r} value={r} />
+          ))}
+        </datalist>
+        <input
+          aria-label={t("compareA")}
+          data-testid="compare-a"
+          list="compare-refs-list"
+          value={a}
+          maxLength={200}
+          onChange={(e) => setA(e.target.value)}
+          className={input}
+        />
+        <button
+          type="button"
+          aria-label={t("swap")}
+          title={t("swap")}
+          onClick={() => {
+            setA(b);
+            setB(a);
+            setAsked({ a: asked.b, b: asked.a });
+          }}
+          className="shrink-0 rounded p-1 text-fg-secondary hover:bg-surface-2"
+        >
+          <ArrowLeftRight className="h-3.5 w-3.5" />
+        </button>
+        <input
+          aria-label={t("compareB")}
+          data-testid="compare-b"
+          list="compare-refs-list"
+          value={b}
+          maxLength={200}
+          onChange={(e) => setB(e.target.value)}
+          className={input}
+        />
+        <button
+          type="submit"
+          className="shrink-0 rounded bg-accent-solid px-2 py-0.5 text-[11px] text-white hover:bg-accent-solid-hover"
+        >
+          {t("compare")}
+        </button>
+        <select
+          data-testid="compare-mode"
+          value={mode}
+          onChange={(e) => setMode(e.target.value === "two" ? "two" : "three")}
+          className="min-w-0 rounded border border-border-light bg-surface-0 px-1 py-0.5 text-[11px] text-fg-primary"
+        >
+          <option value="three">{t("modeThree")}</option>
+          <option value="two">{t("modeTwo")}</option>
+        </select>
+      </form>
+      {error && (
+        <p role="alert" className="text-[12px] text-status-danger [overflow-wrap:anywhere]">
+          {error}
+        </p>
+      )}
+      {!result && !error && (
+        <p className="text-[12px] text-fg-muted">{t("lanes:changes.loading")}</p>
+      )}
+      {result && (
+        <>
+          <div className="mb-1.5 flex flex-wrap gap-1 rounded border border-border bg-surface-2 p-0.5">
+            {tabBtn("files", t("tabFiles", { count: result.files.length }))}
+            {tabBtn("onlyA", t("tabOnly", { name: asked.a, count: result.onlyA.length }))}
+            {tabBtn("onlyB", t("tabOnly", { name: asked.b, count: result.onlyB.length }))}
+          </div>
+          {tab === "files" && !file && (
+            <ul data-testid="compare-files" className="min-h-0 flex-1 overflow-auto">
+              {result.files.length === 0 && (
+                <li className="text-[12px] text-fg-muted">{t("noDifference")}</li>
+              )}
+              {result.files.map((f) => (
+                <li key={f.path}>
+                  <button
+                    type="button"
+                    disabled={fileLoading}
+                    onClick={() => openFile(f.path, f.from)}
+                    className="flex w-full items-baseline gap-1.5 rounded px-1 text-left text-[11px] hover:bg-surface-2"
+                  >
+                    <span className="w-3 shrink-0 font-mono text-fg-muted">{f.status.trim()}</span>
+                    <span className="min-w-0 flex-1 text-fg-primary [overflow-wrap:anywhere]">
+                      {f.from ? `${f.from} → ${f.path}` : f.path}
+                    </span>
+                    <span className="shrink-0 font-mono">
+                      <span className="text-status-success">+{f.added}</span>{" "}
+                      <span className="text-status-danger">−{f.deleted}</span>
+                    </span>
+                  </button>
+                </li>
+              ))}
+              {result.filesTruncated && (
+                <li className="text-[11px] text-status-warning">{t("lanes:changes.truncated")}</li>
+              )}
+            </ul>
+          )}
+          {tab === "files" && file && (
+            <div className="flex min-h-0 flex-1 flex-col">
+              <button
+                type="button"
+                onClick={() => setFile(null)}
+                className="mb-1 self-start rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary hover:bg-surface-2"
+              >
+                {t("backToFiles")}
+              </button>
+              {file.secret ? (
+                <p className="text-[12px] text-fg-muted">{t("secretFile")}</p>
+              ) : file.hunks?.length ? (
+                <LaneDiffView file={file} layout="unified" fill />
+              ) : (
+                <p className="text-[12px] text-fg-muted">{t("noTextChange")}</p>
+              )}
+            </div>
+          )}
+          {tab !== "files" && (
+            <ul className="min-h-0 flex-1 overflow-auto">
+              {commits?.length === 0 && (
+                <li className="text-[12px] text-fg-muted">{t("noCommitsSide")}</li>
+              )}
+              {commits?.map((c) => (
+                <li key={c.sha}>
+                  <button
+                    type="button"
+                    onClick={() => onOpenCommit(c.sha)}
+                    className="flex w-full items-baseline gap-1.5 rounded px-1 text-left text-[11px] hover:bg-surface-2"
+                  >
+                    <span className="shrink-0 font-mono text-fg-muted">{c.short}</span>
+                    <span className="min-w-0 flex-1 truncate text-fg-primary" title={c.subject}>
+                      {c.subject}
+                    </span>
+                    <span className="min-w-0 max-w-[30%] truncate text-fg-muted">{c.author}</span>
+                  </button>
+                </li>
+              ))}
+              {result.commitsTruncated && (
+                <li className="text-[11px] text-status-warning">{t("lanes:changes.truncated")}</li>
+              )}
+            </ul>
+          )}
+        </>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/CreateBranchDialog.tsx

@@ -0,0 +1,128 @@
+/**
+ * @file "Create branch here…" and "Create tag here…" from a History commit's
+ * menu: a name (and, for a tag, an optional message making it annotated),
+ * then git-refs.js's `branch-create {branch, from}` / `tag-create {tag,
+ * message?, from}` with that commit's sha as `from` — the server confirms the
+ * sha itself. Creating a branch never switches to it here. Announces
+ * `agenthub:git-changed` so the other views of the workspace read again.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState, type KeyboardEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type GitTarget } from "../../../lib/api";
+import { toast } from "../../../lib/toast";
+import { isSubmitEnter } from "../../../lib/keys";
+import { emitGitChanged } from "../../../lib/gitChanged";
+import { GitModal, ModalButton } from "./GitModal";
+
+export function CreateBranchDialog({
+  target,
+  sha,
+  short,
+  kind = "branch",
+  onClose,
+  onDone,
+}: {
+  target: GitTarget;
+  sha: string;
+  short: string;
+  kind?: "branch" | "tag";
+  onClose: () => void;
+  onDone: () => void;
+}) {
+  const { t } = useTranslation(["gitHistory"]);
+  const [name, setName] = useState("");
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [running, setRunning] = useState(false);
+  const tag = kind === "tag";
+
+  const run = async () => {
+    const ref = name.trim();
+    if (!ref) return;
+    setRunning(true);
+    setError(null);
+    const action = tag ? "tag-create" : "branch-create";
+    try {
+      await api.lanes.gitRefAction(
+        target,
+        action,
+        tag
+          ? { tag: ref, from: sha, ...(message.trim() ? { message: message.trim() } : {}) }
+          : { branch: ref, from: sha }
+      );
+      toast.success(t(tag ? "tagCreated" : "branchCreated", { name: ref, branch: ref, short }));
+      onDone();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setRunning(false);
+    } finally {
+      emitGitChanged(typeof target === "number" ? target : target.lane, action);
+    }
+  };
+
+  const submit = (e: KeyboardEvent) => {
+    if (isSubmitEnter(e)) {
+      e.preventDefault();
+      void run();
+    }
+  };
+  const input =
+    "rounded border border-border-light bg-surface-0 px-2 py-1 font-mono text-[12px] text-fg-primary";
+
+  return (
+    <GitModal
+      testId="create-ref"
+      onClose={onClose}
+      title={t(tag ? "createTagTitle" : "createBranchTitle", { short })}
+      footer={
+        <>
+          <ModalButton onClick={onClose}>{t("cancel")}</ModalButton>
+          <ModalButton
+            primary
+            testId="create-ref-confirm"
+            disabled={!name.trim() || running}
+            onClick={() => void run()}
+          >
+            {t(tag ? "createTag" : "createBranch")}
+          </ModalButton>
+        </>
+      }
+    >
+      <label className="flex flex-col gap-1 text-[12px] text-fg-secondary">
+        {t(tag ? "tagName" : "branchName")}
+        <input
+          autoFocus
+          data-testid="create-ref-name"
+          value={name}
+          maxLength={200}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={submit}
+          className={input}
+        />
+      </label>
+      {tag && (
+        <label className="mt-2 flex flex-col gap-1 text-[12px] text-fg-secondary">
+          {t("tagMessage")}
+          <input
+            data-testid="create-ref-message"
+            value={message}
+            maxLength={1000}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={submit}
+            className={input}
+          />
+        </label>
+      )}
+      <p className="mt-1.5 text-[11px] text-fg-muted">
+        {t(tag ? "createTagHint" : "createBranchHint")}
+      </p>
+      {error && (
+        <p role="alert" className="mt-1.5 text-[12px] text-status-danger [overflow-wrap:anywhere]">
+          {error}
+        </p>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/FileHistory.tsx

@@ -0,0 +1,194 @@
+/**
+ * @file One file's history (Show History), like GitLens' File History: every
+ * commit that touched it, newest first, followed across renames (`git log
+ * --follow`). A version opens that commit's diff of the file under the name
+ * it had there (the panel's own diff viewer); Blame opens the file as it was
+ * at that version with each line's commit (BlameView), and a rename says
+ * where it came from. Paged with Load more.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type GitTarget } from "../../../lib/api";
+import type { FileVersion } from "../../../lib/gitHistory";
+import { timeAgo } from "../../../lib/format";
+import { BlameView } from "./BlameView";
+
+const PAGE = 100;
+
+export function FileHistory({
+  target,
+  path,
+  reread,
+  onOpenVersion,
+  onViewCommit,
+  onWholeBranch,
+}: {
+  target: GitTarget;
+  path: string;
+  reread: number;
+  /** That version's diff of the file: its name THEN, and the commit. */
+  onOpenVersion: (path: string, sha: string) => void;
+  onViewCommit: (sha: string) => void;
+  onWholeBranch: () => void;
+}) {
+  const { t } = useTranslation(["gitHistory", "lanes"]);
+  const [versions, setVersions] = useState<FileVersion[] | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [blame, setBlame] = useState<{ path: string; rev: string } | null>(null);
+  const seq = useRef(0);
+
+  useEffect(() => {
+    const mine = ++seq.current;
+    setVersions(null);
+    setError(null);
+    setLoading(true);
+    void api.lanes.gitHistory
+      .fileHistory(target, path, { limit: PAGE })
+      .then((r) => {
+        if (seq.current !== mine) return;
+        setVersions(r.available ? r.commits : []);
+        setHasMore(r.available && r.hasMore);
+      })
+      .catch(
+        (err) => seq.current === mine && setError(err instanceof Error ? err.message : String(err))
+      )
+      .finally(() => seq.current === mine && setLoading(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- target is stable per panel
+  }, [path, reread]);
+
+  const more = useCallback(() => {
+    if (!versions || loading) return;
+    const mine = ++seq.current;
+    setLoading(true);
+    void api.lanes.gitHistory
+      .fileHistory(target, path, { limit: PAGE, skip: versions.length })
+      .then((r) => {
+        if (seq.current !== mine || !r.available) return;
+        setVersions((v) => [...(v ?? []), ...r.commits]);
+        setHasMore(r.hasMore);
+      })
+      .catch(
+        (err) => seq.current === mine && setError(err instanceof Error ? err.message : String(err))
+      )
+      .finally(() => seq.current === mine && setLoading(false));
+  }, [versions, loading, target, path]);
+
+  return (
+    <div data-testid="file-history" className="flex min-h-0 flex-col gap-1">
+      <div
+        data-testid="lane-changes-history-file"
+        className="flex items-center gap-1.5 px-1 text-[11px] text-fg-secondary"
+      >
+        <span className="min-w-0 flex-1 [overflow-wrap:anywhere]">
+          {t("lanes:changes.historyOfFile", { path })}
+        </span>
+        <button
+          type="button"
+          onClick={() => setBlame({ path, rev: "work" })}
+          className="shrink-0 rounded border border-border-light px-1.5 py-0.5 text-fg-secondary hover:bg-surface-2 hover:text-fg-primary"
+        >
+          {t("blame")}
+        </button>
+        <button
+          type="button"
+          onClick={onWholeBranch}
+          className="shrink-0 rounded px-1 text-fg-muted hover:bg-surface-2 hover:text-fg-primary"
+        >
+          {t("lanes:changes.historyWholeBranch")}
+        </button>
+      </div>
+      {error && (
+        <p role="alert" className="px-1 text-[11px] text-status-danger [overflow-wrap:anywhere]">
+          {error}
+        </p>
+      )}
+      {versions === null && !error && (
+        <p className="px-1 text-[11px] text-fg-muted">{t("lanes:changes.loading")}</p>
+      )}
+      {versions && versions.length === 0 && (
+        <p className="px-1 text-[11px] text-fg-muted">{t("lanes:changes.noCommits")}</p>
+      )}
+      <ul>
+        {versions?.map((v) => (
+          <li key={v.sha} className="group flex items-center gap-1 rounded px-1 hover:bg-surface-2">
+            <button
+              type="button"
+              onClick={() => onOpenVersion(v.path, v.sha)}
+              className="flex min-w-0 flex-1 flex-col py-0.5 text-left"
+            >
+              <span className="flex min-w-0 items-baseline gap-1.5">
+                <span
+                  className="w-3 shrink-0 font-mono text-[10px] text-fg-muted"
+                  title={t(`status.${v.status}`, { defaultValue: v.status })}
+                >
+                  {v.status}
+                </span>
+                <span className="shrink-0 font-mono text-[10px] text-fg-muted">{v.short}</span>
+                <span
+                  className="min-w-0 flex-1 truncate text-[11px] text-fg-primary"
+                  title={v.subject}
+                >
+                  {v.subject}
+                </span>
+              </span>
+              <span className="flex min-w-0 items-baseline gap-1.5 pl-[1.2rem] text-[10px] text-fg-muted">
+                <span className="min-w-0 truncate">{v.author}</span>
+                <span className="shrink-0" title={new Date(v.date).toLocaleString()}>
+                  {timeAgo(v.date)}
+                </span>
+                {v.from && (
+                  <span className="min-w-0 [overflow-wrap:anywhere]">
+                    {t("renamedFrom", { from: v.from })}
+                  </span>
+                )}
+              </span>
+            </button>
+            {v.status !== "D" && (
+              <button
+                type="button"
+                onClick={() => setBlame({ path: v.path, rev: v.sha })}
+                className="shrink-0 rounded px-1 text-[10px] text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+              >
+                {t("blame")}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => onViewCommit(v.sha)}
+              className="shrink-0 rounded px-1 text-[10px] text-fg-muted hover:bg-surface-3 hover:text-fg-primary"
+            >
+              {t("commit")}
+            </button>
+          </li>
+        ))}
+      </ul>
+      {hasMore && (
+        <button
+          type="button"
+          data-testid="file-history-more"
+          disabled={loading}
+          onClick={more}
+          className="w-full rounded px-1 py-1 text-[11px] text-fg-secondary hover:bg-surface-2 disabled:opacity-40"
+        >
+          {loading ? t("lanes:changes.loading") : t("lanes:changes.loadMore")}
+        </button>
+      )}
+      {blame && (
+        <BlameView
+          target={target}
+          path={blame.path}
+          rev={blame.rev}
+          onClose={() => setBlame(null)}
+          onOpenCommit={(sha) => {
+            setBlame(null);
+            onViewCommit(sha);
+          }}
+        />
+      )}
+    </div>
+  );
+}

client/src/components/lanes/git/ForcePushDialog.tsx

@@ -0,0 +1,119 @@
+/**
+ * @file ForcePushDialog.tsx
+ * @description "Force push (with lease)" for the CURRENT branch only: shows
+ * where it goes (remote and branch), the remote commit it will replace (the
+ * lease — the server refuses with ESTALE if the remote moved since the last
+ * fetch), how far ahead/behind HEAD is, and refuses a protected branch unless
+ * the server allows it. Push is a two-click (`useArmed`).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { GitTarget } from "../../../lib/api";
+import { errCode, errText, gitRewrite, type PushPlan } from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { useArmed } from "../../../hooks/useArmed";
+import { BTN, BTN_DANGER, ErrorLine, GitModal, Warn } from "./GitModal";
+
+export function ForcePushDialog({
+  target,
+  onClose,
+  onChanged,
+}: {
+  target: GitTarget;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [plan, setPlan] = useState<PushPlan | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { isArmed, arm, disarm } = useArmed();
+  const key = JSON.stringify(target);
+
+  useEffect(() => {
+    let live = true;
+    gitRewrite
+      .planPush(target)
+      .then((p) => live && setPlan(p))
+      .catch((e) => live && setError(errText(e)));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  const run = async () => {
+    if (!plan) return;
+    if (!isArmed("push")) return arm("push");
+    disarm();
+    setBusy(true);
+    setError(null);
+    try {
+      await gitRewrite.run(target, "force-push", { expect: plan.remoteSha ?? "", confirm: true });
+      toast.success(t("forcePush.done", { remote: plan.remote, branch: plan.remoteBranch }));
+      onChanged();
+      onClose();
+    } catch (e) {
+      setError(errCode(e) === "ESTALE" ? t("forcePush.stale") : errText(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <GitModal
+      title={t("forcePush.title")}
+      onClose={onClose}
+      testId="force-push-dialog"
+      footer={
+        <>
+          <button type="button" className={BTN} onClick={onClose}>
+            {t("cancel")}
+          </button>
+          <button
+            type="button"
+            data-testid="force-push-run"
+            className={BTN_DANGER}
+            disabled={busy || !plan || !plan.allowed}
+            onClick={() => void run()}
+          >
+            {isArmed("push") ? t("forcePush.runConfirm") : t("forcePush.run")}
+          </button>
+        </>
+      }
+    >
+      {!plan ? (
+        error ? (
+          <ErrorLine error={error} />
+        ) : (
+          <p className="text-fg-muted">{t("loading")}</p>
+        )
+      ) : (
+        <div className="space-y-1.5">
+          <p data-testid="force-push-where" className="break-words">
+            {t("forcePush.where", {
+              branch: plan.branch,
+              remote: plan.remote,
+              remoteBranch: plan.remoteBranch,
+            })}
+          </p>
+          <p className="break-words">
+            {plan.remoteSha
+              ? t("forcePush.replaces", {
+                  sha: plan.remoteSha.slice(0, 7),
+                  ahead: plan.ahead,
+                  behind: plan.behind,
+                })
+              : t("forcePush.newBranch")}
+          </p>
+          {plan.behind > 0 && <Warn>{t("forcePush.dropsRemote", { count: plan.behind })}</Warn>}
+          {!plan.allowed && <Warn testId="force-push-protected">{t("forcePush.protected")}</Warn>}
+          <p className="text-[11px] text-fg-muted">{t("forcePush.lease")}</p>
+          <ErrorLine error={error} />
+        </div>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/GitModal.tsx

@@ -0,0 +1,153 @@
+/**
+ * @file GitModal.tsx
+ * @description The shared modal shell of the Changes panel's git tools (merge
+ * editor, reflog, rebase, interactive rebase, reset, force push, remotes): a
+ * portal over the screen with `useDialog`'s focus contract, a title row with a
+ * close button, a scrolling body and an optional footer. `wide` widens it for
+ * the three-pane merge editor; `tall` gives a viewer (blame, browse at a
+ * revision, compare refs) the full height and a column body its own scrolling
+ * child can fill; on a phone every size is the full width. `ModalButton` is
+ * the History tools' footer button over the same BTN classes.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useId, useRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
+import { useDialog } from "../../../hooks/useDialog";
+
+export const BTN =
+  "rounded border border-border-light px-2 py-1 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40";
+export const BTN_PRIMARY =
+  "rounded border border-accent-solid bg-accent-solid px-2 py-1 text-[11px] font-medium text-white hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40";
+export const BTN_DANGER =
+  "rounded border border-status-danger/60 px-2 py-1 text-[11px] font-medium text-status-danger hover:bg-status-danger/10 disabled:cursor-not-allowed disabled:opacity-40";
+
+export function GitModal({
+  title,
+  onClose,
+  testId,
+  wide = false,
+  tall = false,
+  footer,
+  children,
+}: {
+  title: ReactNode;
+  onClose: () => void;
+  testId?: string;
+  wide?: boolean;
+  /** A viewer: the full height, and a flex-column body. */
+  tall?: boolean;
+  footer?: ReactNode;
+  children: ReactNode;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const panel = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  useDialog(true, panel, onClose);
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-2 sm:p-3"
+      onClick={onClose}
+      onKeyDown={(e) => e.stopPropagation()}
+      role="presentation"
+    >
+      <div
+        ref={panel}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        data-testid={testId}
+        onClick={(e) => e.stopPropagation()}
+        className={`flex max-h-[92vh] w-full flex-col rounded-xl border border-border bg-surface-1 shadow-2xl shadow-black/50 ${
+          wide || tall ? "max-w-6xl" : "max-w-lg"
+        } ${tall ? "h-[92vh]" : ""}`}
+      >
+        <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+          <h2
+            id={titleId}
+            className="min-w-0 flex-1 truncate text-sm font-semibold text-fg-primary"
+          >
+            {title}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label={t("close")}
+            className="shrink-0 rounded p-1 text-fg-muted hover:bg-surface-2 hover:text-fg-primary"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div
+          className={`min-h-0 flex-1 px-3 py-2 text-xs text-fg-secondary ${
+            tall ? "flex flex-col overflow-hidden" : "overflow-y-auto"
+          }`}
+        >
+          {children}
+        </div>
+        {footer && (
+          <div className="flex flex-wrap items-center justify-end gap-1.5 border-t border-border px-3 py-2">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+/** A red inline error line, or nothing. */
+export function ErrorLine({ error }: { error: string | null }) {
+  if (!error) return null;
+  return (
+    <p role="alert" className="my-1 whitespace-pre-wrap break-words text-[11px] text-status-danger">
+      {error}
+    </p>
+  );
+}
+
+/** An amber explanation box shown before a rewrite runs. */
+export function Warn({ children, testId }: { children: ReactNode; testId?: string }) {
+  return (
+    <div
+      data-testid={testId}
+      className="my-1.5 rounded border border-status-warning/40 bg-status-warning/10 px-2 py-1.5 text-[11px] text-status-warning"
+    >
+      {children}
+    </div>
+  );
+}
+
+/** A footer button: plain, `primary` (filled) or `danger` (red outline). */
+export function ModalButton({
+  onClick,
+  children,
+  primary = false,
+  danger = false,
+  disabled = false,
+  testId,
+  title,
+}: {
+  onClick: () => void;
+  children: ReactNode;
+  primary?: boolean;
+  danger?: boolean;
+  disabled?: boolean;
+  testId?: string;
+  title?: string;
+}) {
+  return (
+    <button
+      type="button"
+      data-testid={testId}
+      title={title}
+      disabled={disabled}
+      onClick={onClick}
+      className={primary ? BTN_PRIMARY : danger ? BTN_DANGER : BTN}
+    >
+      {children}
+    </button>
+  );
+}

client/src/components/lanes/git/GitTools.tsx

@@ -0,0 +1,210 @@
+/**
+ * @file GitTools.tsx
+ * @description The Changes panel's entry points to the history-rewrite and
+ * remote tools: `GitToolsButton` (a toolbar menu — Rebase onto…, Interactive
+ * rebase…, Reflog, Force push…, Remotes…), `GitTools` (renders whichever tool
+ * is open, so the panel holds one `GitTool | null` state), and
+ * `RebaseSkipButton` (the rebase banner's Skip — Continue and Abort are the
+ * banner's own Complete/Abort, which the server maps onto the rebase).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { History } from "lucide-react";
+import type { GitTarget } from "../../../lib/api";
+import { errText, gitRewrite } from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { ContextMenu, MenuItem, MenuSeparator } from "../../ContextMenu";
+import { ForcePushDialog } from "./ForcePushDialog";
+import { InteractiveRebase } from "./InteractiveRebase";
+import { MergeEditor } from "./MergeEditor";
+import { RebaseDialog } from "./RebaseDialog";
+import { ReflogView } from "./ReflogView";
+import { RemotesDialog } from "./RemotesDialog";
+import { ResetDialog } from "./ResetDialog";
+
+export type GitTool =
+  | { kind: "rebase" }
+  | { kind: "interactive"; base?: string }
+  | { kind: "reset"; commit: { sha: string; short?: string; subject?: string } }
+  | { kind: "reflog" }
+  | { kind: "force-push" }
+  | { kind: "remotes" }
+  | { kind: "merge"; path: string; onResolved?: () => void };
+
+export function GitToolsButton({
+  onPick,
+  disabled,
+  hasRemote,
+}: {
+  onPick: (tool: GitTool) => void;
+  disabled?: boolean;
+  hasRemote?: boolean;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const ref = useRef<HTMLButtonElement>(null);
+  const [at, setAt] = useState<{ x: number; y: number } | null>(null);
+  const pick = (tool: GitTool) => () => {
+    setAt(null);
+    onPick(tool);
+  };
+  return (
+    <>
+      <button
+        ref={ref}
+        type="button"
+        data-testid="git-tools-button"
+        aria-label={t("menu.label")}
+        title={t("menu.label")}
+        aria-haspopup="menu"
+        disabled={disabled}
+        onClick={() => {
+          const r = ref.current?.getBoundingClientRect();
+          setAt(r ? { x: r.left, y: r.bottom + 2 } : { x: 0, y: 0 });
+        }}
+        className="shrink-0 rounded p-0.5 text-fg-muted hover:text-fg-primary disabled:opacity-40"
+      >
+        <History className="h-3.5 w-3.5" />
+      </button>
+      {at && (
+        <ContextMenu x={at.x} y={at.y} onClose={() => setAt(null)} testId="git-tools-menu">
+          <MenuItem testId="git-tools-rebase" onSelect={pick({ kind: "rebase" })}>
+            {t("menu.rebase")}
+          </MenuItem>
+          <MenuItem testId="git-tools-interactive" onSelect={pick({ kind: "interactive" })}>
+            {t("menu.interactive")}
+          </MenuItem>
+          <MenuItem testId="git-tools-reflog" onSelect={pick({ kind: "reflog" })}>
+            {t("menu.reflog")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            testId="git-tools-force-push"
+            danger
+            disabled={hasRemote === false}
+            onSelect={pick({ kind: "force-push" })}
+          >
+            {t("menu.forcePush")}
+          </MenuItem>
+          <MenuItem testId="git-tools-remotes" onSelect={pick({ kind: "remotes" })}>
+            {t("menu.remotes")}
+          </MenuItem>
+        </ContextMenu>
+      )}
+    </>
+  );
+}
+
+export function GitTools({
+  tool,
+  target,
+  branch,
+  onClose,
+  onOpen,
+  onChanged,
+  onViewCommit,
+}: {
+  tool: GitTool | null;
+  target: GitTarget;
+  /** The current branch, for titles. */
+  branch: string | null;
+  onClose: () => void;
+  /** Open another tool (the reflog's "Reset here"). */
+  onOpen: (tool: GitTool) => void;
+  /** Re-read the panel's git facts after a write. */
+  onChanged: () => void;
+  onViewCommit?: (sha: string) => void;
+}) {
+  if (!tool) return null;
+  switch (tool.kind) {
+    case "rebase":
+      return (
+        <RebaseDialog target={target} current={branch} onClose={onClose} onChanged={onChanged} />
+      );
+    case "interactive":
+      return (
+        <InteractiveRebase
+          target={target}
+          base={tool.base}
+          onClose={onClose}
+          onChanged={onChanged}
+        />
+      );
+    case "reset":
+      return (
+        <ResetDialog target={target} commit={tool.commit} onClose={onClose} onChanged={onChanged} />
+      );
+    case "reflog":
+      return (
+        <ReflogView
+          target={target}
+          onClose={onClose}
+          onViewCommit={
+            onViewCommit &&
+            ((sha) => {
+              onClose();
+              onViewCommit(sha);
+            })
+          }
+          onReset={(e) =>
+            onOpen({ kind: "reset", commit: { sha: e.sha, short: e.short, subject: e.subject } })
+          }
+        />
+      );
+    case "force-push":
+      return <ForcePushDialog target={target} onClose={onClose} onChanged={onChanged} />;
+    case "remotes":
+      return <RemotesDialog target={target} onClose={onClose} onChanged={onChanged} />;
+    case "merge":
+      return (
+        <MergeEditor
+          target={target}
+          path={tool.path}
+          onClose={onClose}
+          onResolved={() => {
+            onChanged();
+            tool.onResolved?.();
+          }}
+        />
+      );
+  }
+}
+
+/** The rebase banner's Skip: drops the commit the rebase stopped on. */
+export function RebaseSkipButton({
+  target,
+  disabled,
+  onChanged,
+}: {
+  target: GitTarget;
+  disabled?: boolean;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [busy, setBusy] = useState(false);
+  return (
+    <button
+      type="button"
+      data-testid="rebase-skip"
+      title={t("rebaseBanner.skipHint")}
+      disabled={disabled || busy}
+      onClick={async () => {
+        setBusy(true);
+        try {
+          const r = await gitRewrite.run(target, "rebase-skip", {});
+          if (r.conflicts?.length) toast.error(t("rebase.stopped", { count: r.conflicts.length }));
+          else if (!r.stopped) toast.success(t("rebaseBanner.finished"));
+        } catch (e) {
+          toast.error(errText(e));
+        } finally {
+          setBusy(false);
+          onChanged();
+        }
+      }}
+      className="shrink-0 rounded border border-border-light px-1.5 py-0.5 text-fg-secondary hover:bg-surface-2 disabled:opacity-40"
+    >
+      {t("rebaseBanner.skip")}
+    </button>
+  );
+}

client/src/components/lanes/git/HistoryView.tsx

@@ -0,0 +1,751 @@
+/**
+ * @file The Changes panel's History tab, shaped like VS Code's Source Control
+ * Graph, GitLens and the JetBrains git log: a commit graph (lanes and merge
+ * edges, ref badges) read page by page and drawn windowed, so a repo with
+ * tens of thousands of commits stays responsive; a search box (message, a SHA
+ * prefix, `author:`, `path:`) and an all-branches switch; a details pane for
+ * the focused commit; multi-select (checkbox, Ctrl/⌘-click, Shift-click) with
+ * "Cherry-pick N" / "Revert N" that open a preview of exactly what will run
+ * (CherryPickDialog); the reference tools' commit context menu; and, after a
+ * pick or revert, a result banner with Undo while that is safe (the server
+ * refuses it once the commits are pushed or HEAD moved on).
+ *
+ * Every write still goes through the server's guards (git-pick.js); a
+ * disabled button here is a courtesy.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { GitCompare, Search, X } from "lucide-react";
+import { api, type GitTarget } from "../../../lib/api";
+import type { LaneCommit } from "../../../lib/types";
+import { commitGraph } from "../../../lib/commitGraph";
+import { parseSearch, inListOrder, type PickResult } from "../../../lib/gitHistory";
+import { toast } from "../../../lib/toast";
+import { confirmDialog } from "../../../lib/confirm";
+import { copyText } from "../../../lib/clipboard";
+import { Checkbox } from "../../Checkbox";
+import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../../ContextMenu";
+import { GRAPH_ROW, GraphCell, CommitText } from "./CommitGraph";
+import { CommitDetails } from "./CommitDetails";
+import { CherryPickDialog } from "./CherryPickDialog";
+import { BrowseAtRevision } from "./BrowseAtRevision";
+import { CompareRefs } from "./CompareRefs";
+import { CreateBranchDialog } from "./CreateBranchDialog";
+
+/** Commits one page reads. */
+export const PAGE = 100;
+/** Rows drawn beyond the visible ones, each side. */
+const OVERSCAN = 20;
+
+type Op = "cherry-pick" | "revert";
+
+export function HistoryView({
+  target,
+  branch,
+  branches,
+  historyRef,
+  onHistoryRef,
+  reread,
+  disabled,
+  headPushed,
+  onViewCommit,
+  onOpenFileAtCommit,
+  onUndoCommit,
+  onResetHere,
+  onEditAfter,
+  onPaused,
+  onChanged,
+}: {
+  target: GitTarget;
+  /** The branch HEAD is on (null = detached / unknown). */
+  branch: string | null;
+  /** Local branches, for "History of branch". */
+  branches: string[];
+  historyRef: string | null;
+  onHistoryRef: (ref: string | null) => void;
+  /** Bumped by the panel's Refresh and after its own writes. */
+  reread: number;
+  /** A write is running, or a merge/pick is open: nothing new starts. */
+  disabled: boolean;
+  /** The branch's upstream already holds HEAD (Undo commit refused). */
+  headPushed: boolean;
+  onViewCommit: (sha: string) => void;
+  onOpenFileAtCommit: (path: string, sha: string) => void;
+  onUndoCommit: (c: LaneCommit) => void;
+  /** "Reset branch to here…" — the rewrite tools' reset dialog (GitTools). */
+  onResetHere: (c: LaneCommit) => void;
+  /** "Edit commits after this one…" — the interactive rebase (GitTools). */
+  onEditAfter: (sha: string) => void;
+  /** A pick/revert stopped on a conflict: the overview resolves it. */
+  onPaused: () => void;
+  /** History changed (a pick, revert or undo): re-read everything. */
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitHistory", "lanes", "gitTools"]);
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState(() => parseSearch(""));
+  const [all, setAll] = useState(false);
+  const [commits, setCommits] = useState<LaneCommit[] | null>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [focused, setFocused] = useState<string | null>(null);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+  const anchor = useRef<string | null>(null);
+  const [dialog, setDialog] = useState<{ op: Op; shas: string[] } | null>(null);
+  const [browse, setBrowse] = useState<{ sha: string; short: string } | null>(null);
+  const [compare, setCompare] = useState<{ a: string; b: string } | null>(null);
+  const [newRef, setNewRef] = useState<{
+    sha: string;
+    short: string;
+    kind: "branch" | "tag";
+  } | null>(null);
+  const [lastPick, setLastPick] = useState<(PickResult & { op: Op }) | null>(null);
+  const menu = useContextMenu<LaneCommit>();
+
+  // The search box applies after a pause in typing, not on every key.
+  useEffect(() => {
+    const id = window.setTimeout(() => setFilter(parseSearch(search)), 300);
+    return () => window.clearTimeout(id);
+  }, [search]);
+
+  const filtered = !!(filter.q || filter.author || filter.path);
+  const query = useMemo(
+    () => ({
+      ...(all ? { all: true } : historyRef ? { ref: historyRef } : {}),
+      ...(filter.q ? { q: filter.q } : {}),
+      ...(filter.author ? { author: filter.author } : {}),
+      ...(filter.path ? { path: filter.path } : {}),
+    }),
+    [all, historyRef, filter]
+  );
+  const queryKey = JSON.stringify(query);
+
+  // The first page whenever the question changes; a reply for an older
+  // question is dropped.
+  const seq = useRef(0);
+  useEffect(() => {
+    const mine = ++seq.current;
+    setLoading(true);
+    setError(null);
+    void api.lanes
+      .gitLog(target, { limit: PAGE, ...query })
+      .then((r) => {
+        if (seq.current !== mine) return;
+        setCommits(r.available ? r.commits : []);
+        setHasMore(!!r.hasMore);
+      })
+      .catch(
+        (err) => seq.current === mine && setError(err instanceof Error ? err.message : String(err))
+      )
+      .finally(() => seq.current === mine && setLoading(false));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- target is stable per panel
+  }, [queryKey, reread]);
+
+  const loadMore = useCallback(() => {
+    if (loading || !hasMore || !commits) return;
+    const mine = ++seq.current;
+    setLoading(true);
+    void api.lanes
+      .gitLog(target, { limit: PAGE, skip: commits.length, ...query })
+      .then((r) => {
+        if (seq.current !== mine) return;
+        setCommits((prev) => {
+          const seen = new Set((prev ?? []).map((c) => c.sha));
+          return [...(prev ?? []), ...r.commits.filter((c) => !seen.has(c.sha))];
+        });
+        setHasMore(!!r.hasMore);
+      })
+      .catch(
+        (err) => seq.current === mine && setError(err instanceof Error ? err.message : String(err))
+      )
+      .finally(() => seq.current === mine && setLoading(false));
+  }, [loading, hasMore, commits, target, query]);
+
+  const list = useMemo(() => commits ?? [], [commits]);
+  // A search result is not a connected history: dots, no lanes.
+  const graph = useMemo(
+    () => commitGraph(filtered ? list.map((c) => ({ sha: c.sha, parents: [] })) : list),
+    [list, filtered]
+  );
+  const byShaIndex = useMemo(() => new Map(list.map((c, i) => [c.sha, i])), [list]);
+
+  // Which loaded commits HEAD already has: Revert applies to those,
+  // Cherry-pick to the rest. On HEAD's own history, all of them.
+  const onHead = useMemo(() => {
+    if (!all && !historyRef) return null;
+    const head = list.find((c) => (c.badges ?? []).some((b) => b.current || b.kind === "head"));
+    const set = new Set<string>();
+    if (!head) return set;
+    const stack = [head.sha];
+    while (stack.length) {
+      const s = stack.pop()!;
+      if (set.has(s) || !byShaIndex.has(s)) continue;
+      set.add(s);
+      stack.push(...(list[byShaIndex.get(s)!]!.parents ?? []));
+    }
+    return set;
+  }, [all, historyRef, list, byShaIndex]);
+  // The commit HEAD is on: Edit commits after it has nothing to edit.
+  const headSha = useMemo(
+    () =>
+      list.find((c) => (c.badges ?? []).some((b) => b.current || b.kind === "head"))?.sha ??
+      (!all && !historyRef ? list[0]?.sha : undefined),
+    [list, all, historyRef]
+  );
+  const isOnHead = useCallback((sha: string) => (onHead ? onHead.has(sha) : true), [onHead]);
+
+  // ---- selection -------------------------------------------------------
+  const clickRow = (e: MouseEvent, c: LaneCommit) => {
+    setFocused(c.sha);
+    if (e.shiftKey && anchor.current && byShaIndex.has(anchor.current)) {
+      const a = byShaIndex.get(anchor.current)!;
+      const b = byShaIndex.get(c.sha)!;
+      const [lo, hi] = a < b ? [a, b] : [b, a];
+      setPicked(new Set(list.slice(lo, hi + 1).map((x) => x.sha)));
+      return;
+    }
+    anchor.current = c.sha;
+    if (e.ctrlKey || e.metaKey) {
+      toggle(c.sha);
+      return;
+    }
+    setPicked(new Set());
+  };
+  const toggle = (sha: string) =>
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(sha)) next.delete(sha);
+      else next.add(sha);
+      return next;
+    });
+  const selected = inListOrder(list, picked);
+  const mergeIn = selected.some((c) => c.parents.length > 1);
+  const allOnHead = selected.length > 0 && selected.every((c) => isOnHead(c.sha));
+  const noneOnHead = selected.length > 0 && selected.every((c) => !isOnHead(c.sha));
+  const target_branch = branch ?? "HEAD";
+
+  const openPick = (op: Op, shas: string[]) => setDialog({ op, shas });
+
+  const afterPick = (op: Op, r: PickResult) => {
+    setDialog(null);
+    setPicked(new Set());
+    if (r.paused) {
+      toast.error(
+        r.empty
+          ? t("pausedEmpty", { op: t(`op.${op}`) })
+          : t("pausedConflicts", { op: t(`op.${op}`), count: r.conflicts.length })
+      );
+      onPaused();
+      return;
+    }
+    const n = r.commits?.length ?? 0;
+    toast.success(
+      t(op === "revert" ? "revertedN" : "pickedN", { count: n, branch: target_branch })
+    );
+    if (r.from && r.to && n) setLastPick({ ...r, op });
+    onChanged();
+  };
+
+  const undoPick = async () => {
+    if (!lastPick?.from || !lastPick.to) return;
+    const n = lastPick.commits?.length ?? 0;
+    const ok = await confirmDialog({
+      title: t("undoTitle", { op: t(`op.${lastPick.op}`) }),
+      message: t("undoBody", { count: n, branch: target_branch }),
+      confirmLabel: t("undo"),
+    });
+    if (!ok) return;
+    try {
+      await api.lanes.gitHistory.act(target, "undo-pick", {
+        from: lastPick.from,
+        to: lastPick.to,
+        confirm: true,
+      });
+      toast.success(t("undone", { count: n }));
+      setLastPick(null);
+      onChanged();
+    } catch (err) {
+      toast.error(err);
+    }
+  };
+
+  const copyPatch = async (c: LaneCommit) => {
+    try {
+      const r = await api.lanes.gitHistory.patch(target, c.sha);
+      if (!r.available) return void toast.error(t("noPatch"));
+      if (r.omitted.length) toast.info(t("patchOmitted", { count: r.omitted.length }));
+      await copyText(r.patch);
+    } catch (err) {
+      toast.error(err);
+    }
+  };
+
+  // ---- windowing -------------------------------------------------------
+  const scroller = useRef<HTMLDivElement>(null);
+  const [top, setTop] = useState(0);
+  const [height, setHeight] = useState(600);
+  useEffect(() => {
+    const el = scroller.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setHeight(el.clientHeight || 600));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const first = Math.max(0, Math.floor(top / GRAPH_ROW) - OVERSCAN);
+  const last = Math.min(list.length, Math.ceil((top + height) / GRAPH_ROW) + OVERSCAN);
+  const onScroll = () => {
+    const el = scroller.current;
+    if (!el) return;
+    setTop(el.scrollTop);
+    // Near the end: the next page, like an endless log.
+    if (el.scrollTop + el.clientHeight > list.length * GRAPH_ROW - GRAPH_ROW * 10) loadMore();
+  };
+
+  const focusedCommit = focused ? list.find((c) => c.sha === focused) : undefined;
+  const menuItem = menu.menu?.item;
+  const menuMulti = !!menuItem && picked.has(menuItem.sha) && picked.size > 1;
+  const pick = (fn: () => void) => () => {
+    menu.close();
+    fn();
+  };
+
+  return (
+    <div data-testid="lane-changes-history" className="flex min-h-0 flex-1 flex-col gap-1.5">
+      {/* Toolbar: search, all branches, branch, compare. Wraps on a narrow panel. */}
+      <div className="flex flex-wrap items-center gap-1.5 px-1 text-[11px]">
+        <label className="flex min-w-[10rem] flex-1 items-center gap-1 rounded border border-border-light bg-surface-0 px-1.5 py-0.5">
+          <Search className="h-3 w-3 shrink-0 text-fg-muted" aria-hidden />
+          <input
+            data-testid="history-search"
+            value={search}
+            maxLength={300}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t("searchPlaceholder")}
+            aria-label={t("searchLabel")}
+            className="min-w-0 flex-1 bg-transparent text-[11px] text-fg-primary outline-none placeholder:text-fg-muted"
+          />
+          {search && (
+            <button
+              type="button"
+              aria-label={t("clearSearch")}
+              onClick={() => setSearch("")}
+              className="shrink-0 text-fg-muted hover:text-fg-primary"
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </label>
+        <Checkbox
+          checked={all}
+          onChange={setAll}
+          label={t("allBranches")}
+          labelClassName="text-[11px] text-fg-secondary"
+        />
+        {!all && branches.length > 1 && (
+          <label className="flex min-w-0 items-center gap-1 text-fg-secondary">
+            <span className="shrink-0">{t("lanes:changes.historyOf")}</span>
+            <select
+              data-testid="lane-changes-history-ref"
+              value={historyRef ?? ""}
+              onChange={(e) => onHistoryRef(e.target.value || null)}
+              className="min-w-0 max-w-[12rem] truncate rounded border border-border-light bg-surface-0 px-1 py-0.5 text-[11px] text-fg-primary"
+            >
+              <option value="">{target_branch}</option>
+              {branches
+                .filter((b) => b !== branch)
+                .map((b) => (
+                  <option key={b} value={b}>
+                    {b}
+                  </option>
+                ))}
+            </select>
+          </label>
+        )}
+        <button
+          type="button"
+          data-testid="history-compare"
+          onClick={() =>
+            setCompare({
+              a: target_branch,
+              b: historyRef ?? branches.find((b) => b !== branch) ?? target_branch,
+            })
+          }
+          className="flex shrink-0 items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-fg-secondary hover:bg-surface-2 hover:text-fg-primary"
+        >
+          <GitCompare className="h-3 w-3" aria-hidden />
+          {t("compare")}
+        </button>
+      </div>
+
+      {lastPick && (
+        <div
+          data-testid="pick-result"
+          className="mx-1 flex flex-wrap items-center gap-1.5 rounded border border-status-success/40 bg-status-success/10 px-2 py-1 text-[11px] text-status-success"
+        >
+          <span className="min-w-0 flex-1 [overflow-wrap:anywhere]">
+            {t(lastPick.op === "revert" ? "revertedN" : "pickedN", {
+              count: lastPick.commits?.length ?? 0,
+              branch: target_branch,
+            })}{" "}
+            <span className="font-mono">
+              {(lastPick.commits ?? []).map((c) => c.short).join(", ")}
+            </span>
+          </span>
+          <button
+            type="button"
+            data-testid="pick-undo"
+            disabled={disabled}
+            title={t("undoHint")}
+            onClick={() => void undoPick()}
+            className="shrink-0 rounded border border-status-success/50 px-1.5 py-0.5 hover:bg-status-success/15 disabled:opacity-40"
+          >
+            {t("undo")}
+          </button>
+          <button
+            type="button"
+            aria-label={t("dismiss")}
+            onClick={() => setLastPick(null)}
+            className="shrink-0 text-fg-muted hover:text-fg-primary"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </div>
+      )}
+
+      {selected.length > 0 && (
+        <div
+          data-testid="history-selection"
+          className="mx-1 flex flex-wrap items-center gap-1.5 rounded border border-accent/40 bg-accent/10 px-2 py-1 text-[11px] text-fg-primary"
+        >
+          <span className="min-w-0 flex-1">{t("selectedN", { count: selected.length })}</span>
+          {noneOnHead && (
+            <button
+              type="button"
+              data-testid="history-pick-selected"
+              disabled={disabled || mergeIn}
+              title={mergeIn ? t("mergeCommitRefused") : undefined}
+              onClick={() =>
+                openPick(
+                  "cherry-pick",
+                  selected.map((c) => c.sha)
+                )
+              }
+              className="shrink-0 rounded bg-accent-solid px-1.5 py-0.5 text-white hover:bg-accent-solid-hover disabled:opacity-40"
+            >
+              {t("pickN", { count: selected.length, branch: target_branch })}
+            </button>
+          )}
+          {allOnHead && (
+            <button
+              type="button"
+              data-testid="history-revert-selected"
+              disabled={disabled || mergeIn}
+              title={mergeIn ? t("mergeCommitRefused") : undefined}
+              onClick={() =>
+                openPick(
+                  "revert",
+                  selected.map((c) => c.sha)
+                )
+              }
+              className="shrink-0 rounded border border-border px-1.5 py-0.5 hover:bg-surface-2 disabled:opacity-40"
+            >
+              {t("revertN", { count: selected.length })}
+            </button>
+          )}
+          {!noneOnHead && !allOnHead && (
+            <span className="text-fg-muted">{t("mixedSelection")}</span>
+          )}
+          <button
+            type="button"
+            onClick={() => setPicked(new Set())}
+            className="shrink-0 rounded px-1 text-fg-muted hover:bg-surface-2 hover:text-fg-primary"
+          >
+            {t("clearSelection")}
+          </button>
+        </div>
+      )}
+
+      {error && (
+        <p role="alert" className="px-1 text-[11px] text-status-danger [overflow-wrap:anywhere]">
+          {error}
+        </p>
+      )}
+
+      <div
+        ref={scroller}
+        onScroll={onScroll}
+        data-testid="history-list"
+        className="min-h-[8rem] flex-1 overflow-y-auto"
+      >
+        {commits === null ? (
+          <p className="px-1 text-[11px] text-fg-muted">{t("lanes:changes.loading")}</p>
+        ) : list.length === 0 ? (
+          <p className="px-1 text-[11px] text-fg-muted">
+            {filtered ? t("noMatches") : t("lanes:changes.noCommits")}
+          </p>
+        ) : (
+          <div role="list" style={{ height: list.length * GRAPH_ROW, position: "relative" }}>
+            {list.slice(first, last).map((c, k) => {
+              const i = first + k;
+              const isPicked = picked.has(c.sha);
+              const head = (c.badges ?? []).some((b) => b.current || b.kind === "head");
+              return (
+                <div
+                  key={c.sha}
+                  role="listitem"
+                  data-sha={c.sha}
+                  aria-selected={isPicked || focused === c.sha}
+                  onContextMenu={(e) => menu.open(e, c)}
+                  style={{
+                    position: "absolute",
+                    top: i * GRAPH_ROW,
+                    height: GRAPH_ROW,
+                    left: 0,
+                    right: 0,
+                  }}
+                  className={`group flex items-center gap-1 rounded px-1 ${
+                    isPicked
+                      ? "bg-accent/15"
+                      : focused === c.sha
+                        ? "bg-surface-3"
+                        : "hover:bg-surface-2"
+                  }`}
+                >
+                  <Checkbox
+                    checked={isPicked}
+                    onChange={() => {
+                      // A tick is an anchor too: Shift-click extends from it.
+                      anchor.current = c.sha;
+                      toggle(c.sha);
+                    }}
+                    title={t("selectCommit", { short: c.short })}
+                    className={isPicked || picked.size ? "" : "opacity-40 group-hover:opacity-100"}
+                  />
+                  <GraphCell
+                    row={graph.rows[i]!}
+                    width={graph.width}
+                    merge={c.parents.length > 1}
+                    head={head}
+                  />
+                  <button
+                    type="button"
+                    onClick={(e) => clickRow(e, c)}
+                    onDoubleClick={() => onViewCommit(c.sha)}
+                    className="flex h-full min-w-0 flex-1 items-center text-left"
+                  >
+                    <CommitText c={c} />
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {hasMore && (
+          <button
+            type="button"
+            data-testid="lane-changes-history-more"
+            disabled={loading}
+            onClick={loadMore}
+            className="mt-1 w-full rounded px-1 py-1 text-[11px] text-fg-secondary hover:bg-surface-2 hover:text-fg-primary disabled:opacity-40"
+          >
+            {loading ? t("lanes:changes.loading") : t("lanes:changes.loadMore")}
+          </button>
+        )}
+      </div>
+
+      {focusedCommit && (
+        <CommitDetails
+          key={focusedCommit.sha}
+          target={target}
+          sha={focusedCommit.sha}
+          onClose={() => setFocused(null)}
+          onOpenCommit={(sha) => {
+            setFocused(sha);
+            const el = scroller.current?.querySelector(`[data-sha="${sha}"]`);
+            (el as HTMLElement | null)?.scrollIntoView?.({ block: "nearest" });
+          }}
+          onViewChanges={() => onViewCommit(focusedCommit.sha)}
+          onOpenFile={(path) => onOpenFileAtCommit(path, focusedCommit.sha)}
+          onBrowse={() => setBrowse({ sha: focusedCommit.sha, short: focusedCommit.short })}
+          onCompare={() => setCompare({ a: target_branch, b: focusedCommit.sha })}
+          onCopyPatch={() => void copyPatch(focusedCommit)}
+        />
+      )}
+
+      {menu.menu && menuItem && (
+        <ContextMenu
+          x={menu.menu.x}
+          y={menu.menu.y}
+          onClose={menu.close}
+          testId="lane-changes-commit-menu"
+        >
+          <MenuItem onSelect={pick(() => onViewCommit(menuItem.sha))}>
+            {t("lanes:changes.viewCommit")}
+          </MenuItem>
+          <MenuItem onSelect={pick(() => setFocused(menuItem.sha))}>{t("showDetails")}</MenuItem>
+          <MenuItem onSelect={pick(() => setBrowse({ sha: menuItem.sha, short: menuItem.short }))}>
+            {t("browseFiles")}
+          </MenuItem>
+          <MenuItem onSelect={pick(() => setCompare({ a: target_branch, b: menuItem.sha }))}>
+            {t("compareWithCurrent")}
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem onSelect={pick(() => void copyText(menuItem.sha))}>
+            {t("lanes:changes.copySha")}
+          </MenuItem>
+          <MenuItem onSelect={pick(() => void copyText(menuItem.subject))}>
+            {t("lanes:changes.copySubject")}
+          </MenuItem>
+          <MenuItem
+            disabled={menuItem.parents.length > 1}
+            onSelect={pick(() => void copyPatch(menuItem))}
+          >
+            {t("copyPatch")}
+          </MenuItem>
+          <MenuItem
+            testId="history-menu-branch"
+            disabled={disabled}
+            onSelect={pick(() =>
+              setNewRef({ sha: menuItem.sha, short: menuItem.short, kind: "branch" })
+            )}
+          >
+            {t("createBranchHere")}
+          </MenuItem>
+          <MenuItem
+            testId="history-menu-tag"
+            disabled={disabled}
+            onSelect={pick(() =>
+              setNewRef({ sha: menuItem.sha, short: menuItem.short, kind: "tag" })
+            )}
+          >
+            {t("createTagHere")}
+          </MenuItem>
+          <MenuSeparator />
+          {menuMulti ? (
+            <>
+              {noneOnHead && (
+                <MenuItem
+                  disabled={disabled || mergeIn}
+                  onSelect={pick(() =>
+                    openPick(
+                      "cherry-pick",
+                      selected.map((c) => c.sha)
+                    )
+                  )}
+                >
+                  {t("pickN", { count: selected.length, branch: target_branch })}
+                </MenuItem>
+              )}
+              {allOnHead && (
+                <MenuItem
+                  disabled={disabled || mergeIn}
+                  onSelect={pick(() =>
+                    openPick(
+                      "revert",
+                      selected.map((c) => c.sha)
+                    )
+                  )}
+                >
+                  {t("revertN", { count: selected.length })}
+                </MenuItem>
+              )}
+            </>
+          ) : isOnHead(menuItem.sha) ? (
+            <>
+              <MenuItem
+                disabled={disabled || menuItem.parents.length !== 1}
+                title={menuItem.parents.length > 1 ? t("mergeCommitRefused") : undefined}
+                testId="lane-changes-menu-revert"
+                onSelect={pick(() => openPick("revert", [menuItem.sha]))}
+              >
+                {t("lanes:changes.revertCommit")}
+              </MenuItem>
+              {!all && !historyRef && list[0]?.sha === menuItem.sha && (
+                <MenuItem
+                  danger
+                  disabled={disabled || headPushed || menuItem.parents.length !== 1}
+                  title={headPushed ? t("lanes:changes.undoCommitPushed") : undefined}
+                  testId="lane-changes-menu-undo-commit"
+                  onSelect={pick(() => onUndoCommit(menuItem))}
+                >
+                  {t("lanes:changes.undoCommit")}
+                </MenuItem>
+              )}
+              {/* History rewrites (GitTools): each opens a dialog that asks first. */}
+              <MenuItem
+                disabled={disabled}
+                testId="lane-changes-menu-reset"
+                onSelect={pick(() => onResetHere(menuItem))}
+              >
+                {t("gitTools:menu.resetHere")}
+              </MenuItem>
+              <MenuItem
+                disabled={disabled || menuItem.sha === headSha}
+                testId="lane-changes-menu-interactive"
+                onSelect={pick(() => onEditAfter(menuItem.sha))}
+              >
+                {t("gitTools:menu.interactiveHere")}
+              </MenuItem>
+            </>
+          ) : (
+            <MenuItem
+              disabled={disabled || menuItem.parents.length !== 1}
+              title={menuItem.parents.length > 1 ? t("mergeCommitRefused") : undefined}
+              testId="lane-changes-menu-cherry-pick"
+              onSelect={pick(() => openPick("cherry-pick", [menuItem.sha]))}
+            >
+              {t("lanes:changes.cherryPick", { branch: target_branch })}
+            </MenuItem>
+          )}
+        </ContextMenu>
+      )}
+
+      {dialog && (
+        <CherryPickDialog
+          target={target}
+          op={dialog.op}
+          shas={dialog.shas}
+          onClose={() => setDialog(null)}
+          onDone={(r) => afterPick(dialog.op, r)}
+        />
+      )}
+      {browse && (
+        <BrowseAtRevision
+          target={target}
+          sha={browse.sha}
+          short={browse.short}
+          onClose={() => setBrowse(null)}
+        />
+      )}
+      {compare && (
+        <CompareRefs
+          target={target}
+          initialA={compare.a}
+          initialB={compare.b}
+          refs={branches}
+          onClose={() => setCompare(null)}
+          onOpenCommit={(sha) => {
+            setCompare(null);
+            onViewCommit(sha);
+          }}
+        />
+      )}
+      {newRef && (
+        <CreateBranchDialog
+          target={target}
+          sha={newRef.sha}
+          short={newRef.short}
+          kind={newRef.kind}
+          onClose={() => setNewRef(null)}
+          onDone={() => {
+            setNewRef(null);
+            onChanged();
+          }}
+        />
+      )}
+    </div>
+  );
+}

client/src/components/lanes/git/InteractiveRebase.tsx

@@ -0,0 +1,295 @@
+/**
+ * @file InteractiveRebase.tsx
+ * @description Interactive rebase as a list (JetBrains' "Interactively Rebase
+ * from Here"): the branch's commits since a base — by default the ones no
+ * remote has yet, oldest first — each with Pick / Reword / Squash / Fixup /
+ * Drop, moved up and down, a new message for a reword or a squash. Before it
+ * runs it says what it rewrites ("This rewrites 4 commits; 2 are already
+ * pushed, so a force-push will be needed") and pushed commits need an explicit
+ * tick; Start is a two-click (`useArmed`). The server builds the todo and runs
+ * `git rebase -i` with no editor; a clean run stays open with **Undo**.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import type { GitTarget } from "../../../lib/api";
+import {
+  errText,
+  gitRewrite,
+  type InteractivePlan,
+  type PlanCommit,
+  type RewriteResult,
+  type TodoAction,
+} from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { useArmed } from "../../../hooks/useArmed";
+import { BTN, BTN_DANGER, ErrorLine, GitModal, Warn } from "./GitModal";
+import { RewriteDone } from "./RewriteDone";
+import { blockedReason } from "./RebaseDialog";
+
+const ACTIONS: TodoAction[] = ["pick", "reword", "squash", "fixup", "drop"];
+
+interface Row {
+  commit: PlanCommit;
+  action: TodoAction;
+  message: string;
+}
+
+/** Why the list cannot run as it stands, or null. */
+export function todoProblem(rows: Row[]): "first" | "allDropped" | "unchanged" | "reword" | null {
+  const kept = rows.filter((r) => r.action !== "drop");
+  if (!kept.length) return "allDropped";
+  if (kept[0]!.action === "squash" || kept[0]!.action === "fixup") return "first";
+  if (rows.some((r) => r.action === "reword" && !r.message.trim())) return "reword";
+  return null;
+}
+
+export function InteractiveRebase({
+  target,
+  base,
+  onClose,
+  onChanged,
+}: {
+  target: GitTarget;
+  /** Rewrite the commits after this one; absent = the unpushed ones. */
+  base?: string;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [plan, setPlan] = useState<InteractivePlan | null>(null);
+  const [rows, setRows] = useState<Row[]>([]);
+  const [force, setForce] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<RewriteResult | null>(null);
+  const { isArmed, arm, disarm } = useArmed();
+  const key = JSON.stringify(target);
+
+  useEffect(() => {
+    let live = true;
+    gitRewrite
+      .planInteractive(target, base)
+      .then((p) => {
+        if (!live) return;
+        setPlan(p);
+        setRows(p.commits.map((c) => ({ commit: c, action: "pick", message: c.message })));
+      })
+      .catch((e) => live && setError(errText(e)));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, base]);
+
+  const set = (i: number, patch: Partial<Row>) =>
+    setRows((prev) => prev.map((r, n) => (n === i ? { ...r, ...patch } : r)));
+  const move = (i: number, step: number) =>
+    setRows((prev) => {
+      const j = i + step;
+      if (j < 0 || j >= prev.length) return prev;
+      const next = [...prev];
+      [next[i], next[j]] = [next[j]!, next[i]!];
+      return next;
+    });
+
+  const blocked = plan ? blockedReason(t, plan) : null;
+  const problem = todoProblem(rows);
+  const unchanged =
+    !!plan && rows.every((r, i) => r.action === "pick" && r.commit.sha === plan.commits[i]?.sha);
+  const pushed = plan?.pushed ?? 0;
+
+  const run = async () => {
+    if (!plan) return;
+    if (!isArmed("run")) return arm("run");
+    disarm();
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await gitRewrite.run(target, "rebase-interactive", {
+        head: plan.head,
+        ...(base ? { base: plan.base } : {}),
+        confirm: true,
+        ...(pushed ? { force: true } : {}),
+        todo: rows.map((row) => ({
+          sha: row.commit.sha,
+          action: row.action,
+          ...((row.action === "reword" || row.action === "squash") &&
+          row.message.trim() &&
+          row.message.trim() !== row.commit.message
+            ? { message: row.message }
+            : row.action === "reword"
+              ? { message: row.message }
+              : {}),
+        })),
+      });
+      onChanged();
+      if (r.conflicts?.length || r.stopped) {
+        toast.error(t("rebase.stopped", { count: r.conflicts?.length ?? 0 }));
+        onClose();
+        return;
+      }
+      toast.success(t("interactive.done"));
+      setResult(r);
+    } catch (e) {
+      setError(errText(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <GitModal
+      title={t("interactive.title")}
+      onClose={onClose}
+      testId="interactive-rebase"
+      footer={
+        result ? (
+          <button type="button" className={BTN} onClick={onClose}>
+            {t("close")}
+          </button>
+        ) : (
+          <>
+            <button type="button" className={BTN} onClick={onClose}>
+              {t("cancel")}
+            </button>
+            <button
+              type="button"
+              data-testid="interactive-run"
+              className={BTN_DANGER}
+              disabled={
+                busy || !plan || !!blocked || !!problem || unchanged || (pushed > 0 && !force)
+              }
+              onClick={() => void run()}
+            >
+              {isArmed("run") ? t("interactive.runConfirm") : t("interactive.run")}
+            </button>
+          </>
+        )
+      }
+    >
+      {result ? (
+        <RewriteDone target={target} result={result} onChanged={onChanged} onUndone={onClose} />
+      ) : !plan ? (
+        error ? (
+          <ErrorLine error={error} />
+        ) : (
+          <p className="text-fg-muted">{t("loading")}</p>
+        )
+      ) : (
+        <>
+          <p className="mb-1.5 text-[11px] text-fg-muted">{t("interactive.explain")}</p>
+          {blocked && <Warn>{blocked}</Warn>}
+          {plan.merges && <Warn>{t("interactive.merges")}</Warn>}
+          {!rows.length ? (
+            <p data-testid="interactive-empty">{t("interactive.nothing")}</p>
+          ) : (
+            <>
+              <Warn testId="interactive-summary">
+                {pushed
+                  ? t("rewritesPushed", { count: rows.length, pushed })
+                  : t("rewrites", { count: rows.length })}
+                {pushed > 0 && (
+                  <label className="mt-1 flex items-center gap-1.5">
+                    <input
+                      type="checkbox"
+                      data-testid="interactive-force"
+                      checked={force}
+                      onChange={(e) => setForce(e.target.checked)}
+                    />
+                    {t("forceAck")}
+                  </label>
+                )}
+              </Warn>
+              <ol data-testid="interactive-list" className="space-y-1">
+                {rows.map((r, i) => (
+                  <li
+                    key={r.commit.sha}
+                    data-testid="interactive-row"
+                    className={`rounded border border-border-light p-1.5 ${
+                      r.action === "drop" ? "opacity-50" : ""
+                    }`}
+                  >
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <select
+                        aria-label={t("interactive.action", { short: r.commit.short })}
+                        data-testid="interactive-action"
+                        value={r.action}
+                        onChange={(e) => set(i, { action: e.target.value as TodoAction })}
+                        className="input py-0.5 text-[11px]"
+                      >
+                        {ACTIONS.map((a) => (
+                          <option key={a} value={a}>
+                            {t(`interactive.actions.${a}`)}
+                          </option>
+                        ))}
+                      </select>
+                      <span className="shrink-0 font-mono text-[11px] text-fg-muted">
+                        {r.commit.short}
+                      </span>
+                      <span
+                        className={`min-w-0 flex-1 truncate text-[11px] text-fg-primary ${
+                          r.action === "drop" ? "line-through" : ""
+                        }`}
+                        title={r.commit.subject}
+                      >
+                        {r.commit.subject}
+                      </span>
+                      {r.commit.pushed && (
+                        <span className="shrink-0 text-[10px] text-status-warning">
+                          {t("pushed")}
+                        </span>
+                      )}
+                      <button
+                        type="button"
+                        className={BTN}
+                        aria-label={t("interactive.up")}
+                        disabled={i === 0}
+                        onClick={() => move(i, -1)}
+                      >
+                        <ArrowUp className="h-3 w-3" />
+                      </button>
+                      <button
+                        type="button"
+                        className={BTN}
+                        aria-label={t("interactive.down")}
+                        disabled={i === rows.length - 1}
+                        onClick={() => move(i, 1)}
+                      >
+                        <ArrowDown className="h-3 w-3" />
+                      </button>
+                    </div>
+                    {(r.action === "reword" || r.action === "squash") && (
+                      <textarea
+                        data-testid="interactive-message"
+                        aria-label={t("interactive.message")}
+                        value={r.message}
+                        rows={3}
+                        onChange={(e) => set(i, { message: e.target.value })}
+                        placeholder={
+                          r.action === "squash" ? t("interactive.squashHint") : undefined
+                        }
+                        className="input mt-1 w-full font-mono text-[11px]"
+                      />
+                    )}
+                  </li>
+                ))}
+              </ol>
+              {problem && (
+                <p
+                  data-testid="interactive-problem"
+                  className="mt-1 text-[11px] text-status-danger"
+                >
+                  {t(`interactive.problem.${problem}`)}
+                </p>
+              )}
+            </>
+          )}
+          <ErrorLine error={error} />
+        </>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/MergeEditor.tsx

@@ -0,0 +1,444 @@
+/**
+ * @file MergeEditor.tsx
+ * @description The 3-way merge editor for ONE conflicted file — a merge,
+ * cherry-pick, revert or rebase (VS Code's / JetBrains' layout): Incoming
+ * (theirs, git stage :3) | Result | Current (ours, stage :2), with the common
+ * base (stage :1) one click away. Each conflict block of the result takes
+ * Accept current / Accept incoming / Accept both (either order) / a hand edit,
+ * undoable; next/previous conflict and "N conflicts left"; or the whole result
+ * edited as text. Save writes the result through the `conflict-save` action —
+ * the whole-file editor's own guards (baseSha → 409 ESTALE, secret refusal)
+ * then `git add` — which the server refuses while a marker is left.
+ * In a rebase git's "ours" is the branch being rebased ONTO and "theirs" the
+ * commit being replayed, so the labels say that rather than "mine".
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import type { GitTarget } from "../../../lib/api";
+import { parseConflicts, type ConflictPart } from "../../../lib/conflicts";
+import { errCode, errText, gitRewrite, type ConflictSides } from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { BTN, BTN_PRIMARY, ErrorLine, GitModal } from "./GitModal";
+
+export type BlockChoice =
+  { kind: "ours" | "theirs" | "ours-theirs" | "theirs-ours" } | { kind: "custom"; text: string };
+
+type Block = Extract<ConflictPart, { kind: "conflict" }>;
+
+/** The lines a block resolves to, or null while it is unresolved. */
+export function blockLines(p: Block, c: BlockChoice | undefined): string[] | null {
+  if (!c) return null;
+  if (c.kind === "custom") return c.text === "" ? [] : c.text.split("\n");
+  if (c.kind === "ours") return p.ours;
+  if (c.kind === "theirs") return p.theirs;
+  if (c.kind === "ours-theirs") return [...p.ours, ...p.theirs];
+  return [...p.theirs, ...p.ours];
+}
+
+/** The result file: resolved blocks as chosen, unresolved ones with their markers. */
+export function composeResult(parts: ConflictPart[], choices: (BlockChoice | undefined)[]): string {
+  const out: string[] = [];
+  let i = 0;
+  for (const p of parts) {
+    if (p.kind === "text") {
+      out.push(...p.lines);
+      continue;
+    }
+    const lines = blockLines(p, choices[i++]);
+    if (lines) out.push(...lines);
+    else
+      out.push(
+        `<<<<<<< ${p.oursLabel}`.trimEnd(),
+        ...p.ours,
+        "=======",
+        ...p.theirs,
+        `>>>>>>> ${p.theirsLabel}`.trimEnd()
+      );
+  }
+  return out.join("\n");
+}
+
+function Pane({
+  title,
+  text,
+  testId,
+  tone,
+}: {
+  title: string;
+  text: string | null;
+  testId: string;
+  tone: "incoming" | "current" | "base";
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const head =
+    tone === "incoming"
+      ? "bg-accent/20 text-accent"
+      : tone === "current"
+        ? "bg-status-success/20 text-status-success"
+        : "bg-surface-3 text-fg-secondary";
+  return (
+    <section
+      data-testid={testId}
+      className="flex min-h-0 min-w-0 flex-col rounded border border-border-light"
+    >
+      <h3 className={`truncate px-2 py-1 text-[11px] font-semibold ${head}`} title={title}>
+        {title}
+      </h3>
+      <pre className="max-h-60 min-h-0 flex-1 overflow-auto whitespace-pre bg-surface-0 px-2 py-1 font-mono text-[11px] leading-5 text-fg-primary md:max-h-none">
+        {text == null ? <span className="italic text-fg-muted">{t("merge.sideGone")}</span> : text}
+      </pre>
+    </section>
+  );
+}
+
+export function MergeEditor({
+  target,
+  path,
+  onClose,
+  onResolved,
+}: {
+  target: GitTarget;
+  path: string;
+  onClose: () => void;
+  /** The file was saved and marked resolved. */
+  onResolved: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [sides, setSides] = useState<ConflictSides | null>(null);
+  const [choices, setChoices] = useState<(BlockChoice | undefined)[]>([]);
+  const [editing, setEditing] = useState<{ i: number; text: string } | null>(null);
+  const [whole, setWhole] = useState<string | null>(null);
+  const [showBase, setShowBase] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [at, setAt] = useState(0);
+  const blockRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const load = useCallback(() => {
+    let live = true;
+    setSides(null);
+    setChoices([]);
+    setEditing(null);
+    setWhole(null);
+    setError(null);
+    gitRewrite
+      .conflict(target, path)
+      .then((s) => live && setSides(s))
+      .catch((e) => live && setError(errText(e)));
+    return () => {
+      live = false;
+    };
+    // `target` is rebuilt by the caller on every render; its parts are stable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(target), path]);
+  useEffect(load, [load]);
+
+  const parts =
+    sides?.usable && sides.working != null ? parseConflicts(sides.working.split("\n")) : null;
+  const blocks = (parts ?? []).filter((p): p is Block => p.kind === "conflict");
+  const total = blocks.length;
+  const left = blocks.filter((_, i) => !choices[i]).length;
+
+  const rebase = sides?.operation === "rebase";
+  const incomingLabel = sides?.incoming
+    ? t(rebase ? "merge.incomingRebase" : "merge.incoming", {
+        ref: `${sides.incoming.short} ${sides.incoming.subject}`,
+      })
+    : t("merge.incomingPlain");
+  const currentLabel = t(rebase ? "merge.currentRebase" : "merge.current", {
+    branch: sides?.branch ?? "HEAD",
+  });
+
+  const choose = (i: number, c: BlockChoice | undefined) =>
+    setChoices((prev) => {
+      const next = [...prev];
+      next[i] = c;
+      return next;
+    });
+
+  const jump = (step: number) => {
+    if (!total) return;
+    const open = blocks.map((_, i) => i).filter((i) => !choices[i]);
+    const pool = open.length ? open : blocks.map((_, i) => i);
+    const from = pool.findIndex((i) => i > at);
+    let i: number;
+    if (step > 0) i = from === -1 ? pool[0]! : pool[from]!;
+    else {
+      const before = pool.filter((x) => x < at);
+      i = before.length ? before[before.length - 1]! : pool[pool.length - 1]!;
+    }
+    setAt(i);
+    blockRefs.current[i]?.scrollIntoView?.({ block: "center" });
+  };
+
+  const save = async () => {
+    if (!sides?.sha || !parts) return;
+    const content = whole ?? composeResult(parts, choices);
+    setBusy(true);
+    setError(null);
+    try {
+      await gitRewrite.run(target, "conflict-save", { path, content, baseSha: sides.sha });
+      toast.success(t("merge.saved", { path }));
+      onResolved();
+      onClose();
+    } catch (e) {
+      const code = errCode(e);
+      setError(
+        code === "EMARKERS"
+          ? t("merge.markersLeft")
+          : code === "ESTALE"
+            ? t("merge.stale")
+            : errText(e)
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const choiceBtn = (i: number, c: BlockChoice, label: string, testId: string) => (
+    <button type="button" data-testid={testId} className={BTN} onClick={() => choose(i, c)}>
+      {label}
+    </button>
+  );
+
+  let blockIndex = -1;
+  const result = parts && (
+    <section
+      data-testid="merge-result"
+      className="flex min-h-0 min-w-0 flex-col rounded border border-accent/50"
+    >
+      <h3 className="truncate bg-surface-3 px-2 py-1 text-[11px] font-semibold text-fg-primary">
+        {t("merge.result")}
+      </h3>
+      {whole != null ? (
+        <textarea
+          data-testid="merge-whole"
+          aria-label={t("merge.result")}
+          value={whole}
+          onChange={(e) => setWhole(e.target.value)}
+          spellCheck={false}
+          className="input min-h-60 flex-1 resize-none whitespace-pre rounded-none border-0 font-mono text-[11px] leading-5"
+        />
+      ) : (
+        <div className="max-h-[50vh] min-h-0 flex-1 overflow-auto bg-surface-0 md:max-h-none">
+          {parts.map((p, n) => {
+            if (p.kind === "text")
+              return (
+                <pre
+                  key={n}
+                  className="whitespace-pre px-2 font-mono text-[11px] leading-5 text-fg-primary"
+                >
+                  {p.lines.length ? p.lines.join("\n") : " "}
+                </pre>
+              );
+            const i = ++blockIndex;
+            const c = choices[i];
+            const lines = blockLines(p, c);
+            return (
+              <div
+                key={n}
+                ref={(el) => {
+                  blockRefs.current[i] = el;
+                }}
+                data-testid="merge-block"
+                className={`my-1 border-y-2 ${
+                  c ? "border-status-success/60" : "border-status-warning/70"
+                } ${at === i ? "ring-1 ring-accent" : ""}`}
+              >
+                <div className="flex flex-wrap items-center gap-1 bg-surface-2 px-1.5 py-1 text-[11px]">
+                  <span className="mr-auto text-fg-muted">
+                    {t("merge.blockOf", { n: i + 1, total })}
+                  </span>
+                  {editing?.i === i ? (
+                    <button
+                      type="button"
+                      className={BTN}
+                      onClick={() => {
+                        choose(i, { kind: "custom", text: editing.text });
+                        setEditing(null);
+                      }}
+                    >
+                      {t("merge.editDone")}
+                    </button>
+                  ) : c ? (
+                    <button type="button" className={BTN} onClick={() => choose(i, undefined)}>
+                      {t("merge.undoChoice")}
+                    </button>
+                  ) : (
+                    <>
+                      {choiceBtn(
+                        i,
+                        { kind: "ours" },
+                        t("merge.acceptCurrent"),
+                        "merge-accept-current"
+                      )}
+                      {choiceBtn(
+                        i,
+                        { kind: "theirs" },
+                        t("merge.acceptIncoming"),
+                        "merge-accept-incoming"
+                      )}
+                      {choiceBtn(
+                        i,
+                        { kind: "ours-theirs" },
+                        t("merge.bothCurrentFirst"),
+                        "merge-both-ct"
+                      )}
+                      {choiceBtn(
+                        i,
+                        { kind: "theirs-ours" },
+                        t("merge.bothIncomingFirst"),
+                        "merge-both-ic"
+                      )}
+                    </>
+                  )}
+                  {editing?.i !== i && (
+                    <button
+                      type="button"
+                      data-testid="merge-edit-block"
+                      className={BTN}
+                      onClick={() =>
+                        setEditing({ i, text: (lines ?? [...p.ours, ...p.theirs]).join("\n") })
+                      }
+                    >
+                      {t("merge.editBlock")}
+                    </button>
+                  )}
+                </div>
+                {editing?.i === i ? (
+                  <textarea
+                    data-testid="merge-block-text"
+                    aria-label={t("merge.editBlock")}
+                    value={editing.text}
+                    onChange={(e) => setEditing({ i, text: e.target.value })}
+                    spellCheck={false}
+                    rows={Math.min(14, Math.max(3, editing.text.split("\n").length + 1))}
+                    className="input w-full whitespace-pre rounded-none font-mono text-[11px] leading-5"
+                  />
+                ) : lines ? (
+                  <pre className="whitespace-pre bg-status-success/10 px-2 font-mono text-[11px] leading-5 text-fg-primary">
+                    {lines.length ? lines.join("\n") : " "}
+                  </pre>
+                ) : (
+                  <>
+                    <pre className="whitespace-pre border-l-4 border-status-success bg-status-success/15 px-2 font-mono text-[11px] leading-5 text-fg-primary">
+                      {p.ours.length ? p.ours.join("\n") : " "}
+                    </pre>
+                    <pre className="whitespace-pre border-l-4 border-accent bg-accent/15 px-2 font-mono text-[11px] leading-5 text-fg-primary">
+                      {p.theirs.length ? p.theirs.join("\n") : " "}
+                    </pre>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+
+  return (
+    <GitModal
+      wide
+      testId="merge-editor"
+      title={t("merge.title", { path })}
+      onClose={onClose}
+      footer={
+        <>
+          <ErrorLine error={error} />
+          <button type="button" className={BTN} onClick={onClose}>
+            {t("cancel")}
+          </button>
+          <button
+            type="button"
+            data-testid="merge-save"
+            className={BTN_PRIMARY}
+            disabled={busy || !parts || !sides?.sha || (whole == null && left > 0)}
+            onClick={() => void save()}
+          >
+            {t("merge.save")}
+          </button>
+        </>
+      }
+    >
+      {!sides ? (
+        !error && <p className="text-fg-muted">{t("loading")}</p>
+      ) : !sides.usable || !parts ? (
+        <p data-testid="merge-unusable" className="text-status-warning">
+          {sides.binary
+            ? t("merge.binary")
+            : sides.tooBig
+              ? t("merge.tooBig")
+              : sides.working == null
+                ? t("merge.noWorking")
+                : t("merge.unbalanced")}
+        </p>
+      ) : (
+        <div className="flex min-h-0 flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span
+              data-testid="merge-left"
+              className={`text-[11px] ${left ? "text-status-warning" : "text-status-success"}`}
+            >
+              {whole != null
+                ? t("merge.wholeMode")
+                : left
+                  ? t("merge.left", { count: left, total })
+                  : t("merge.allChosen")}
+            </span>
+            <button
+              type="button"
+              className={BTN}
+              aria-label={t("merge.prev")}
+              disabled={!total || whole != null}
+              onClick={() => jump(-1)}
+            >
+              <ChevronUp className="h-3 w-3" />
+            </button>
+            <button
+              type="button"
+              className={BTN}
+              aria-label={t("merge.next")}
+              disabled={!total || whole != null}
+              onClick={() => jump(1)}
+            >
+              <ChevronDown className="h-3 w-3" />
+            </button>
+            <label className="ml-auto flex items-center gap-1 text-[11px]">
+              <input
+                type="checkbox"
+                checked={showBase}
+                onChange={(e) => setShowBase(e.target.checked)}
+              />
+              {t("merge.showBase")}
+            </label>
+            <button
+              type="button"
+              data-testid="merge-whole-toggle"
+              className={BTN}
+              onClick={() => setWhole(whole == null ? composeResult(parts, choices) : null)}
+            >
+              {whole == null ? t("merge.editWhole") : t("merge.backToBlocks")}
+            </button>
+          </div>
+          {showBase && (
+            <Pane title={t("merge.base")} text={sides.base} testId="merge-base" tone="base" />
+          )}
+          <div className="grid min-h-0 grid-cols-1 gap-2 md:h-[60vh] md:grid-cols-3">
+            <Pane
+              title={incomingLabel}
+              text={sides.theirs}
+              testId="merge-incoming"
+              tone="incoming"
+            />
+            {result}
+            <Pane title={currentLabel} text={sides.ours} testId="merge-current" tone="current" />
+          </div>
+        </div>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/PickBanner.tsx

@@ -0,0 +1,154 @@
+/**
+ * @file The banner a paused cherry-pick or revert shows above the Changes
+ * panel (the reference tools' "sequencer" bar): "Cherry-pick paused at commit
+ * X (2 of 5): resolve the conflicted files, then Continue — or Skip this
+ * commit, or Abort to go back to where you were", with those three buttons.
+ * Continue is disabled while a file is still conflicted; Skip and Abort throw
+ * work away, so each takes a second click (`useArmed`) and sends
+ * `confirm: true`. Reads GET /git/sequence; acts through git-pick.js.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type GitTarget } from "../../../lib/api";
+import type { PickAction, PickSequence } from "../../../lib/gitHistory";
+import { toast } from "../../../lib/toast";
+import { useArmed } from "../../../hooks/useArmed";
+
+type Active = Extract<PickSequence, { active: true }>;
+
+export function PickBanner({
+  target,
+  conflicts,
+  reread,
+  busy,
+  onBusy,
+  onDone,
+}: {
+  target: GitTarget;
+  /** The git facts' conflict count: a change re-reads the sequence. */
+  conflicts: number;
+  reread: number;
+  busy: boolean;
+  onBusy: (busy: boolean) => void;
+  /** A button ran: re-read the facts and the changes. */
+  onDone: () => void;
+}) {
+  const { t } = useTranslation(["gitHistory"]);
+  const [seq, setSeq] = useState<Active | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { arm, disarm, isArmed } = useArmed();
+
+  useEffect(() => {
+    let live = true;
+    void api.lanes.gitHistory
+      .sequence(target)
+      .then((r) => live && setSeq(r.available && r.active ? r : null))
+      .catch(() => live && setSeq(null));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- target is stable per panel
+  }, [conflicts, reread]);
+
+  if (!seq) return null;
+  const op = t(`op.${seq.operation}`);
+  const step = seq.done + 1;
+  const total = seq.done + 1 + seq.remaining.length;
+  const cur = seq.current;
+  const left = seq.conflicts.length;
+
+  const act = async (action: PickAction) => {
+    disarm();
+    onBusy(true);
+    setError(null);
+    try {
+      const r = await api.lanes.gitHistory.act(
+        target,
+        action,
+        action === "pick-continue" ? {} : { confirm: true }
+      );
+      if (action === "pick-abort") toast.success(t("aborted", { op }));
+      else if (r.paused) toast.error(t("pausedConflicts", { op, count: r.conflicts.length }));
+      else toast.success(t("sequenceDone", { op, count: r.commits?.length ?? 0 }));
+      onDone();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      onBusy(false);
+    }
+  };
+
+  const btn =
+    "shrink-0 rounded border px-1.5 py-0.5 disabled:cursor-not-allowed disabled:opacity-40";
+  return (
+    <div
+      data-testid="pick-banner"
+      className="mb-2 rounded border border-status-warning/40 bg-status-warning/10 px-2 py-1 text-[11px] text-status-warning"
+    >
+      <p className="[overflow-wrap:anywhere]">
+        <strong>
+          {cur
+            ? t("pausedAt", { op, short: cur.short, subject: cur.subject, step, total })
+            : t("pausedBetween", { op, step, total })}
+        </strong>{" "}
+        {left
+          ? t("pausedHelpConflicts", { count: left })
+          : cur
+            ? t("pausedHelpReady")
+            : t("pausedHelpResume")}
+      </p>
+      {seq.remaining.length > 0 && (
+        <p className="mt-0.5 text-fg-muted [overflow-wrap:anywhere]">
+          {t("stillToApply", {
+            list: seq.remaining.map((c) => c.short).join(", "),
+            count: seq.remaining.length,
+          })}
+        </p>
+      )}
+      <div className="mt-1 flex flex-wrap items-center gap-1.5">
+        <button
+          type="button"
+          data-testid="pick-continue"
+          disabled={busy || left > 0}
+          title={left ? t("continueBlocked") : undefined}
+          onClick={() => void act("pick-continue")}
+          className={`${btn} border-accent/40 bg-accent/15 text-accent hover:bg-accent/25`}
+        >
+          {t("continue")}
+        </button>
+        {cur && (
+          <button
+            type="button"
+            data-testid="pick-skip"
+            disabled={busy}
+            title={t("skipHint")}
+            onClick={() => (isArmed("skip") ? void act("pick-skip") : arm("skip"))}
+            className={`${btn} border-border text-fg-secondary hover:bg-surface-2`}
+          >
+            {isArmed("skip") ? t("skipConfirm") : t("skip")}
+          </button>
+        )}
+        <button
+          type="button"
+          data-testid="pick-abort"
+          disabled={busy}
+          title={t("abortHint")}
+          onClick={() => (isArmed("abort") ? void act("pick-abort") : arm("abort"))}
+          className={`${btn} border-status-danger/40 text-status-danger hover:bg-status-danger/10`}
+        >
+          {isArmed("abort") ? t("abortConfirm", { op }) : t("abort")}
+        </button>
+      </div>
+      {error && (
+        <p
+          role="alert"
+          className="mt-1 whitespace-pre-wrap text-status-danger [overflow-wrap:anywhere]"
+        >
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

client/src/components/lanes/git/RebaseDialog.tsx

@@ -0,0 +1,207 @@
+/**
+ * @file RebaseDialog.tsx
+ * @description "Rebase current branch onto…": pick a local or fetched remote
+ * branch, see the plan before anything runs (GET /git/rewrite-plan
+ * kind=rebase — how many commits are replayed, how many are already pushed and
+ * so will need a force-push, how far behind the branch is), then `rebase`.
+ * A conflict closes the dialog: the Changes panel's banner then offers
+ * Continue / Skip / Abort and the merge editor resolves the files. A clean
+ * rebase stays open on its result with **Undo**.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type GitTarget } from "../../../lib/api";
+import { errText, gitRewrite, type RebasePlan, type RewriteResult } from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { BTN, BTN_PRIMARY, ErrorLine, GitModal, Warn } from "./GitModal";
+import { RewriteDone } from "./RewriteDone";
+
+/** Why a rewrite cannot start, from the plan's common facts — or null. */
+export function blockedReason(
+  t: (k: string, o?: Record<string, unknown>) => string,
+  p: { subdir: boolean; operation: string | null; dirty: boolean },
+  needsClean = true
+): string | null {
+  if (p.subdir) return t("blocked.subdir");
+  if (p.operation) return t("blocked.operation", { op: p.operation });
+  if (needsClean && p.dirty) return t("blocked.dirty");
+  return null;
+}
+
+export function RebaseDialog({
+  target,
+  current,
+  onClose,
+  onChanged,
+}: {
+  target: GitTarget;
+  current: string | null;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [refs, setRefs] = useState<string[]>([]);
+  const [onto, setOnto] = useState("");
+  const [plan, setPlan] = useState<RebasePlan | null>(null);
+  const [force, setForce] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<RewriteResult | null>(null);
+  const key = JSON.stringify(target);
+
+  useEffect(() => {
+    api.lanes
+      .gitBranches(target)
+      .then((b) => {
+        const list = [...(b.branches ?? []), ...(b.remotes ?? [])].filter((x) => x !== current);
+        setRefs(list);
+      })
+      .catch((e) => setError(errText(e)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  useEffect(() => {
+    setPlan(null);
+    setForce(false);
+    if (!onto) return;
+    let live = true;
+    gitRewrite
+      .planRebase(target, onto)
+      .then((p) => live && setPlan(p))
+      .catch((e) => live && setError(errText(e)));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, onto]);
+
+  const blocked = plan ? blockedReason(t, plan) : null;
+  const run = async () => {
+    if (!plan) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await gitRewrite.run(target, "rebase", {
+        onto,
+        head: plan.head,
+        ...(plan.pushed ? { force: true } : {}),
+      });
+      onChanged();
+      if (r.conflicts?.length || r.stopped) {
+        toast.error(t("rebase.stopped", { count: r.conflicts?.length ?? 0 }));
+        onClose();
+        return;
+      }
+      toast.success(t("rebase.done", { onto }));
+      setResult(r);
+    } catch (e) {
+      setError(errText(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <GitModal
+      title={t("rebase.title", { branch: current ?? "HEAD" })}
+      onClose={onClose}
+      testId="rebase-dialog"
+      footer={
+        result ? (
+          <button type="button" className={BTN} onClick={onClose}>
+            {t("close")}
+          </button>
+        ) : (
+          <>
+            <button type="button" className={BTN} onClick={onClose}>
+              {t("cancel")}
+            </button>
+            <button
+              type="button"
+              data-testid="rebase-run"
+              className={BTN_PRIMARY}
+              disabled={
+                busy || !plan || !!blocked || !plan.commits.length || (plan.pushed > 0 && !force)
+              }
+              onClick={() => void run()}
+            >
+              {t("rebase.run")}
+            </button>
+          </>
+        )
+      }
+    >
+      {result ? (
+        <RewriteDone target={target} result={result} onChanged={onChanged} onUndone={onClose} />
+      ) : (
+        <>
+          <label className="mb-1 block text-[11px]" htmlFor="rebase-onto">
+            {t("rebase.onto")}
+          </label>
+          <select
+            id="rebase-onto"
+            data-testid="rebase-onto"
+            value={onto}
+            onChange={(e) => setOnto(e.target.value)}
+            className="input mb-2 w-full py-1 text-[11px]"
+          >
+            <option value="">{t("rebase.pick")}</option>
+            {refs.map((r) => (
+              <option key={r} value={r}>
+                {r}
+              </option>
+            ))}
+          </select>
+          <p className="mb-1 text-[11px] text-fg-muted">{t("rebase.explain")}</p>
+          {plan && (
+            <div data-testid="rebase-plan" className="space-y-1">
+              {blocked ? (
+                <Warn>{blocked}</Warn>
+              ) : !plan.commits.length ? (
+                <p>{t("rebase.nothing", { onto })}</p>
+              ) : (
+                <>
+                  <p>
+                    {t("rebase.summary", {
+                      count: plan.commits.length,
+                      onto,
+                      behind: plan.behind,
+                    })}
+                  </p>
+                  <ul className="max-h-40 overflow-y-auto rounded border border-border-light">
+                    {plan.commits.map((c) => (
+                      <li key={c.sha} className="flex gap-1.5 px-1.5 py-0.5 text-[11px]">
+                        <span className="shrink-0 font-mono text-fg-muted">{c.short}</span>
+                        <span className="min-w-0 flex-1 truncate text-fg-primary">{c.subject}</span>
+                        {c.pushed && (
+                          <span className="shrink-0 text-status-warning">{t("pushed")}</span>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                  {plan.pushed > 0 && (
+                    <Warn testId="rebase-pushed">
+                      {t("rewritesPushed", { count: plan.commits.length, pushed: plan.pushed })}
+                      <label className="mt-1 flex items-center gap-1.5">
+                        <input
+                          type="checkbox"
+                          data-testid="rebase-force"
+                          checked={force}
+                          onChange={(e) => setForce(e.target.checked)}
+                        />
+                        {t("forceAck")}
+                      </label>
+                    </Warn>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+          <ErrorLine error={error} />
+        </>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/ReflogView.tsx

@@ -0,0 +1,157 @@
+/**
+ * @file ReflogView.tsx
+ * @description The read-only reflog of HEAD or of one local branch, paged
+ * (GET /git/reflog): each entry's selector, what moved it (commit, rebase,
+ * reset, checkout…), git's message, when, and the commit it points at — a
+ * click opens that commit in the Changes panel. "Reset here" hands the entry
+ * to the reset dialog, which is how a lost commit is brought back.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { api, type GitTarget } from "../../../lib/api";
+import { errText, gitRewrite, type ReflogEntry } from "../../../lib/gitRewrite";
+import { BTN, ErrorLine, GitModal } from "./GitModal";
+
+const PAGE = 50;
+
+function when(time: number | null, lang: string): string {
+  if (!time) return "";
+  try {
+    return new Date(time * 1000).toLocaleString(lang);
+  } catch {
+    return new Date(time * 1000).toISOString();
+  }
+}
+
+export function ReflogView({
+  target,
+  onClose,
+  onViewCommit,
+  onReset,
+}: {
+  target: GitTarget;
+  onClose: () => void;
+  /** Open one commit (the panel's commit view). */
+  onViewCommit?: (sha: string) => void;
+  /** Open the reset dialog at this commit. */
+  onReset?: (entry: ReflogEntry) => void;
+}) {
+  const { t, i18n } = useTranslation(["gitTools"]);
+  const [ref, setRef] = useState("HEAD");
+  const [branches, setBranches] = useState<string[]>([]);
+  const [entries, setEntries] = useState<ReflogEntry[] | null>(null);
+  const [more, setMore] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const key = JSON.stringify(target);
+
+  useEffect(() => {
+    api.lanes
+      .gitBranches(target)
+      .then((b) => setBranches(b.branches ?? []))
+      .catch(() => setBranches([]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  const page = async (skip: number) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await gitRewrite.reflog(target, { ref, skip, limit: PAGE });
+      setEntries((prev) => (skip && prev ? [...prev, ...r.entries] : r.entries));
+      setMore(r.more);
+    } catch (e) {
+      setError(errText(e));
+      if (!skip) setEntries([]);
+    } finally {
+      setBusy(false);
+    }
+  };
+  useEffect(() => {
+    setEntries(null);
+    void page(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, ref]);
+
+  return (
+    <GitModal title={t("reflog.title")} onClose={onClose} testId="reflog-view">
+      <div className="mb-2 flex flex-wrap items-center gap-1.5">
+        <label className="text-[11px]" htmlFor="reflog-ref">
+          {t("reflog.of")}
+        </label>
+        <select
+          id="reflog-ref"
+          data-testid="reflog-ref"
+          value={ref}
+          onChange={(e) => setRef(e.target.value)}
+          className="input min-w-0 max-w-full flex-1 py-0.5 text-[11px]"
+        >
+          <option value="HEAD">HEAD</option>
+          {branches.map((b) => (
+            <option key={b} value={b}>
+              {b}
+            </option>
+          ))}
+        </select>
+      </div>
+      <p className="mb-1.5 text-[11px] text-fg-muted">{t("reflog.hint")}</p>
+      <ErrorLine error={error} />
+      {entries == null ? (
+        <p className="text-fg-muted">{t("loading")}</p>
+      ) : !entries.length ? (
+        <p className="text-fg-muted">{t("reflog.empty")}</p>
+      ) : (
+        <ul data-testid="reflog-list" className="divide-y divide-border">
+          {entries.map((e) => (
+            <li key={`${e.index}-${e.sha}`} className="flex flex-wrap items-start gap-1.5 py-1.5">
+              <span className="shrink-0 font-mono text-[10px] text-fg-muted">{e.selector}</span>
+              <span className="shrink-0 rounded bg-surface-3 px-1 text-[10px] text-fg-secondary">
+                {e.action}
+              </span>
+              <span className="min-w-0 flex-1 break-words text-[11px] text-fg-primary">
+                {e.message || e.subject}
+                <span className="block text-[10px] text-fg-muted">
+                  {when(e.time, i18n.language)}
+                </span>
+              </span>
+              <span className="flex shrink-0 items-center gap-1">
+                {onViewCommit ? (
+                  <button
+                    type="button"
+                    className="font-mono text-[11px] text-accent hover:underline"
+                    title={e.subject}
+                    onClick={() => onViewCommit(e.sha)}
+                  >
+                    {e.short}
+                  </button>
+                ) : (
+                  <span className="font-mono text-[11px]" title={e.subject}>
+                    {e.short}
+                  </span>
+                )}
+                {onReset && (
+                  <button type="button" className={BTN} onClick={() => onReset(e)}>
+                    {t("reflog.resetHere")}
+                  </button>
+                )}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+      {more && (
+        <button
+          type="button"
+          data-testid="reflog-more"
+          disabled={busy}
+          className={`${BTN} mt-2 w-full`}
+          onClick={() => void page(entries?.length ?? 0)}
+        >
+          {t("reflog.more")}
+        </button>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/RemotesDialog.tsx

@@ -0,0 +1,247 @@
+/**
+ * @file RemotesDialog.tsx
+ * @description The repo's remotes: each one's URL (no password is ever
+ * shown — the server strips it) and default branch; add one (name + an
+ * https:// with no login, ssh:// or user@host:path URL — the server's
+ * allowlist), rename one, remove one (two clicks), and delete a branch ON a
+ * remote (two clicks; never its default branch nor main/master/develop —
+ * the server refuses those whatever this shows).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { GitTarget } from "../../../lib/api";
+import { errText, gitRewrite, type GitRemote } from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { useArmed } from "../../../hooks/useArmed";
+import { BTN, BTN_DANGER, BTN_PRIMARY, ErrorLine, GitModal } from "./GitModal";
+
+const PROTECTED = new Set(["main", "master", "development", "develop"]);
+
+export function RemotesDialog({
+  target,
+  onClose,
+  onChanged,
+}: {
+  target: GitTarget;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [remotes, setRemotes] = useState<GitRemote[] | null>(null);
+  const [name, setName] = useState("");
+  const [url, setUrl] = useState("");
+  const [renaming, setRenaming] = useState<{ from: string; to: string } | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { isArmed, arm, disarm } = useArmed();
+  const key = JSON.stringify(target);
+
+  const load = useCallback(() => {
+    gitRewrite
+      .remotes(target)
+      .then((r) => setRemotes(r.remotes))
+      .catch((e) => setError(errText(e)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+  useEffect(load, [load]);
+
+  const act = async (fn: () => Promise<unknown>, ok: string) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fn();
+      toast.success(ok);
+      onChanged();
+      load();
+      return true;
+    } catch (e) {
+      setError(errText(e));
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const add = async () => {
+    const n = name.trim();
+    const u = url.trim();
+    if (
+      await act(
+        () => gitRewrite.run(target, "remote-add", { name: n, url: u }),
+        t("remotes.added", { name: n })
+      )
+    ) {
+      setName("");
+      setUrl("");
+    }
+  };
+  const rename = async () => {
+    if (!renaming) return;
+    const { from, to } = renaming;
+    if (
+      await act(
+        () => gitRewrite.run(target, "remote-rename", { name: from, to: to.trim() }),
+        t("remotes.renamed", { from, to: to.trim() })
+      )
+    )
+      setRenaming(null);
+  };
+  const remove = (n: string) => {
+    if (!isArmed(`rm:${n}`)) return arm(`rm:${n}`);
+    disarm();
+    void act(
+      () => gitRewrite.run(target, "remote-remove", { name: n, confirm: true }),
+      t("remotes.removed", { name: n })
+    );
+  };
+  const deleteBranch = (ref: string) => {
+    if (!isArmed(`del:${ref}`)) return arm(`del:${ref}`);
+    disarm();
+    void act(
+      () => gitRewrite.run(target, "remote-branch-delete", { branch: ref, confirm: true }),
+      t("remotes.branchDeleted", { ref })
+    );
+  };
+
+  return (
+    <GitModal title={t("remotes.title")} onClose={onClose} testId="remotes-dialog">
+      {remotes == null ? (
+        !error && <p className="text-fg-muted">{t("loading")}</p>
+      ) : !remotes.length ? (
+        <p className="mb-2">{t("remotes.none")}</p>
+      ) : (
+        <ul data-testid="remotes-list" className="mb-3 space-y-2">
+          {remotes.map((r) => (
+            <li key={r.name} className="rounded border border-border-light p-1.5">
+              <div className="flex flex-wrap items-center gap-1.5">
+                {renaming?.from === r.name ? (
+                  <input
+                    aria-label={t("remotes.newName")}
+                    data-testid="remote-rename-input"
+                    value={renaming.to}
+                    onChange={(e) => setRenaming({ from: r.name, to: e.target.value })}
+                    className="input min-w-0 flex-1 py-0.5 font-mono text-[11px]"
+                  />
+                ) : (
+                  <span className="min-w-0 flex-1 truncate font-mono text-[11px] font-semibold text-fg-primary">
+                    {r.name}
+                  </span>
+                )}
+                {renaming?.from === r.name ? (
+                  <>
+                    <button
+                      type="button"
+                      className={BTN_PRIMARY}
+                      disabled={busy || !renaming.to.trim()}
+                      onClick={() => void rename()}
+                    >
+                      {t("remotes.rename")}
+                    </button>
+                    <button type="button" className={BTN} onClick={() => setRenaming(null)}>
+                      {t("cancel")}
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button
+                      type="button"
+                      className={BTN}
+                      disabled={busy}
+                      onClick={() => setRenaming({ from: r.name, to: r.name })}
+                    >
+                      {t("remotes.rename")}
+                    </button>
+                    <button
+                      type="button"
+                      data-testid={`remote-remove-${r.name}`}
+                      className={BTN_DANGER}
+                      disabled={busy}
+                      onClick={() => remove(r.name)}
+                    >
+                      {isArmed(`rm:${r.name}`) ? t("remotes.removeConfirm") : t("remotes.remove")}
+                    </button>
+                  </>
+                )}
+              </div>
+              <p className="mt-0.5 break-all font-mono text-[10px] text-fg-muted">{r.url}</p>
+              {r.defaultBranch && (
+                <p className="text-[10px] text-fg-muted">
+                  {t("remotes.default", { branch: r.defaultBranch })}
+                </p>
+              )}
+              {!!r.branches?.length && (
+                <details className="mt-1">
+                  <summary className="cursor-pointer text-[11px]">
+                    {t("remotes.branches", { count: r.branches.length })}
+                  </summary>
+                  <ul className="mt-1 max-h-40 space-y-0.5 overflow-y-auto">
+                    {r.branches.map((b) => {
+                      const ref = `${r.name}/${b}`;
+                      const locked = PROTECTED.has(b) || b === r.defaultBranch;
+                      return (
+                        <li key={b} className="flex items-center gap-1.5">
+                          <span className="min-w-0 flex-1 truncate font-mono text-[11px]">{b}</span>
+                          <button
+                            type="button"
+                            data-testid={`remote-branch-delete-${ref}`}
+                            className={BTN_DANGER}
+                            disabled={busy || locked}
+                            title={locked ? t("remotes.branchLocked") : undefined}
+                            onClick={() => deleteBranch(ref)}
+                          >
+                            {isArmed(`del:${ref}`)
+                              ? t("remotes.deleteBranchConfirm")
+                              : t("remotes.deleteBranch")}
+                          </button>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </details>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          void add();
+        }}
+        className="space-y-1.5 rounded border border-border p-1.5"
+      >
+        <p className="text-[11px] font-medium text-fg-primary">{t("remotes.add")}</p>
+        <input
+          aria-label={t("remotes.name")}
+          placeholder={t("remotes.name")}
+          data-testid="remote-add-name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="input w-full font-mono text-[11px]"
+        />
+        <input
+          aria-label={t("remotes.url")}
+          placeholder="https://host/owner/repo.git"
+          data-testid="remote-add-url"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          className="input w-full font-mono text-[11px]"
+        />
+        <p className="text-[10px] text-fg-muted">{t("remotes.urlHint")}</p>
+        <div className="flex justify-end">
+          <button
+            type="submit"
+            data-testid="remote-add-submit"
+            className={BTN_PRIMARY}
+            disabled={busy || !name.trim() || !url.trim()}
+          >
+            {t("remotes.addButton")}
+          </button>
+        </div>
+      </form>
+      <ErrorLine error={error} />
+    </GitModal>
+  );
+}

client/src/components/lanes/git/ResetDialog.tsx

@@ -0,0 +1,211 @@
+/**
+ * @file ResetDialog.tsx
+ * @description "Reset current branch to here": the plan first (GET
+ * /git/rewrite-plan kind=reset — how many commits leave or join the branch and
+ * how many of those leaving are already pushed), then one of four modes, each
+ * explained: soft and mixed never touch the working tree, keep refuses to
+ * overwrite a local change, and hard runs only on a clean tree with the branch
+ * name typed back. Pushed commits need an explicit tick (a force-push will be
+ * needed). A done reset stays open on its result with **Undo**.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { GitTarget } from "../../../lib/api";
+import {
+  errText,
+  gitRewrite,
+  type ResetMode,
+  type ResetPlan,
+  type RewriteResult,
+} from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { BTN, BTN_DANGER, ErrorLine, GitModal, Warn } from "./GitModal";
+import { RewriteDone } from "./RewriteDone";
+import { blockedReason } from "./RebaseDialog";
+
+const MODES: ResetMode[] = ["soft", "mixed", "keep", "hard"];
+
+export function ResetDialog({
+  target,
+  commit,
+  onClose,
+  onChanged,
+}: {
+  target: GitTarget;
+  commit: { sha: string; short?: string; subject?: string };
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [plan, setPlan] = useState<ResetPlan | null>(null);
+  const [mode, setMode] = useState<ResetMode>("mixed");
+  const [force, setForce] = useState(false);
+  const [typed, setTyped] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<RewriteResult | null>(null);
+  const key = JSON.stringify(target);
+
+  useEffect(() => {
+    let live = true;
+    gitRewrite
+      .planReset(target, commit.sha)
+      .then((p) => live && setPlan(p))
+      .catch((e) => live && setError(errText(e)));
+    return () => {
+      live = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, commit.sha]);
+
+  const branch = plan?.branch ?? "HEAD";
+  const blocked = plan ? blockedReason(t, plan, false) : null;
+  const hardBlocked = mode === "hard" && !!plan?.dirty;
+  const ready =
+    !!plan &&
+    !blocked &&
+    plan.related &&
+    plan.head !== plan.target &&
+    !(plan.pushed > 0 && !force) &&
+    !hardBlocked &&
+    (mode !== "hard" || typed === branch);
+
+  const run = async () => {
+    if (!plan) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const r = await gitRewrite.run(target, "reset", {
+        target: plan.target,
+        mode,
+        head: plan.head,
+        confirm: true,
+        ...(plan.pushed ? { force: true } : {}),
+        ...(mode === "hard" ? { confirmBranch: typed } : {}),
+      });
+      onChanged();
+      toast.success(t("reset.done", { short: commit.short ?? plan.target.slice(0, 7) }));
+      setResult(r);
+    } catch (e) {
+      setError(errText(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <GitModal
+      title={t("reset.title", { branch, short: commit.short ?? commit.sha.slice(0, 7) })}
+      onClose={onClose}
+      testId="reset-dialog"
+      footer={
+        result ? (
+          <button type="button" className={BTN} onClick={onClose}>
+            {t("close")}
+          </button>
+        ) : (
+          <>
+            <button type="button" className={BTN} onClick={onClose}>
+              {t("cancel")}
+            </button>
+            <button
+              type="button"
+              data-testid="reset-run"
+              className={BTN_DANGER}
+              disabled={busy || !ready}
+              onClick={() => void run()}
+            >
+              {t("reset.run", { mode })}
+            </button>
+          </>
+        )
+      }
+    >
+      {result ? (
+        <RewriteDone target={target} result={result} onChanged={onChanged} onUndone={onClose} />
+      ) : !plan ? (
+        error ? (
+          <ErrorLine error={error} />
+        ) : (
+          <p className="text-fg-muted">{t("loading")}</p>
+        )
+      ) : (
+        <>
+          {commit.subject && (
+            <p className="mb-1 truncate text-[11px] text-fg-primary" title={commit.subject}>
+              <span className="mr-1 font-mono text-fg-muted">{commit.short}</span>
+              {commit.subject}
+            </p>
+          )}
+          {blocked && <Warn>{blocked}</Warn>}
+          {!plan.related ? (
+            <Warn>{t("reset.unrelated")}</Warn>
+          ) : plan.head === plan.target ? (
+            <p>{t("reset.already")}</p>
+          ) : (
+            <p data-testid="reset-summary" className="mb-1.5">
+              {t("reset.summary", { dropped: plan.dropped, added: plan.added, branch })}
+            </p>
+          )}
+          <fieldset className="space-y-1">
+            <legend className="mb-1 text-[11px] font-medium text-fg-primary">
+              {t("reset.mode")}
+            </legend>
+            {MODES.map((m) => (
+              <label key={m} className="flex items-start gap-1.5 text-[11px]">
+                <input
+                  type="radio"
+                  name="reset-mode"
+                  data-testid={`reset-mode-${m}`}
+                  value={m}
+                  checked={mode === m}
+                  onChange={() => setMode(m)}
+                  className="mt-0.5"
+                />
+                <span className="min-w-0">
+                  <span className="font-medium text-fg-primary">{t(`reset.modes.${m}`)}</span>
+                  <span className="block text-fg-muted">{t(`reset.modesHelp.${m}`)}</span>
+                </span>
+              </label>
+            ))}
+          </fieldset>
+          {mode === "hard" &&
+            (plan.dirty ? (
+              <Warn testId="reset-hard-dirty">{t("reset.hardDirty")}</Warn>
+            ) : (
+              <div className="mt-1.5">
+                <label className="mb-0.5 block text-[11px]" htmlFor="reset-confirm-branch">
+                  {t("reset.typeBranch", { branch })}
+                </label>
+                <input
+                  id="reset-confirm-branch"
+                  data-testid="reset-confirm-branch"
+                  value={typed}
+                  onChange={(e) => setTyped(e.target.value)}
+                  autoComplete="off"
+                  className="input w-full font-mono text-[11px]"
+                />
+              </div>
+            ))}
+          {plan.pushed > 0 && (
+            <Warn testId="reset-pushed">
+              {t("reset.pushed", { count: plan.pushed })}
+              <label className="mt-1 flex items-center gap-1.5">
+                <input
+                  type="checkbox"
+                  data-testid="reset-force"
+                  checked={force}
+                  onChange={(e) => setForce(e.target.checked)}
+                />
+                {t("forceAck")}
+              </label>
+            </Warn>
+          )}
+          <ErrorLine error={error} />
+        </>
+      )}
+    </GitModal>
+  );
+}

client/src/components/lanes/git/RewriteDone.tsx

@@ -0,0 +1,90 @@
+/**
+ * @file RewriteDone.tsx
+ * @description What a finished rebase / interactive rebase / reset leaves on
+ * screen: the result, a force-push reminder when the rewrite touched pushed
+ * commits, and the recovery button — **Undo** = `undo-rewrite` (`reset --keep`
+ * back to the recorded `before`), which the server runs only while HEAD is
+ * still the `after` this dialog saw (409 ESTALE otherwise).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { CheckCircle2, Undo2 } from "lucide-react";
+import type { GitTarget } from "../../../lib/api";
+import { errText, gitRewrite, type RewriteResult } from "../../../lib/gitRewrite";
+import { toast } from "../../../lib/toast";
+import { useArmed } from "../../../hooks/useArmed";
+import { BTN, ErrorLine, Warn } from "./GitModal";
+
+export function RewriteDone({
+  target,
+  result,
+  onChanged,
+  onUndone,
+}: {
+  target: GitTarget;
+  result: RewriteResult;
+  onChanged: () => void;
+  onUndone: () => void;
+}) {
+  const { t } = useTranslation(["gitTools"]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { isArmed, arm, disarm } = useArmed();
+  const canUndo = !!result.before && !!result.after && result.before !== result.after;
+
+  const undo = async () => {
+    if (!isArmed("undo")) return arm("undo");
+    disarm();
+    setBusy(true);
+    setError(null);
+    try {
+      await gitRewrite.run(target, "undo-rewrite", {
+        to: result.before,
+        head: result.after,
+        confirm: true,
+      });
+      toast.success(t("undone"));
+      onChanged();
+      onUndone();
+    } catch (e) {
+      setError(errText(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div data-testid="git-rewrite-done" className="space-y-1.5">
+      <p className="flex items-center gap-1.5 text-status-success">
+        <CheckCircle2 className="h-4 w-4 shrink-0" />
+        {t("doneTitle")}
+      </p>
+      {result.output && (
+        <pre className="max-h-32 overflow-auto whitespace-pre-wrap break-words rounded bg-surface-2 p-1.5 font-mono text-[10px] text-fg-muted">
+          {result.output}
+        </pre>
+      )}
+      {result.needsForcePush && <Warn>{t("needsForcePushAfter")}</Warn>}
+      {canUndo && (
+        <div className="flex flex-wrap items-center gap-1.5">
+          <button
+            type="button"
+            data-testid="git-rewrite-undo"
+            disabled={busy}
+            onClick={() => void undo()}
+            className={`${BTN} flex items-center gap-1`}
+          >
+            <Undo2 className="h-3 w-3" />
+            {isArmed("undo") ? t("undoConfirm") : t("undo")}
+          </button>
+          <span className="text-[11px] text-fg-muted">
+            {t("undoHint", { sha: result.before!.slice(0, 7) })}
+          </span>
+        </div>
+      )}
+      <ErrorLine error={error} />
+    </div>
+  );
+}

client/src/components/lanes/git/TagManager.tsx

@@ -0,0 +1,271 @@
+/**
+ * @file The Tags tab of the git bar's Branches panel (`BranchManager`): the
+ * repo's tags (name, target commit, and for an annotated tag its message,
+ * tagger and date), a form that creates one — lightweight, or annotated when a
+ * message is typed — on HEAD or on a branch, tag or commit sha, and per tag:
+ * new branch from it, push it to origin (one tag, never `--tags`, never
+ * forced) and delete it locally, which is irreversible and so asks first. The
+ * server looks every name up (server/lib/git-refs.js); nothing here decides.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Check, Plus, Tag, Trash2, Upload } from "lucide-react";
+import type { GitTag } from "../../../lib/api";
+import { confirmDialog } from "../../../lib/confirm";
+import { isSubmitEnter } from "../../../lib/keys";
+import { timeAgo } from "../../../lib/format";
+import { Checkbox } from "../../Checkbox";
+import { smallBtn, smallInput, type RunRefAction } from "./refUi";
+
+export function TagManager({
+  tags,
+  busy,
+  merging,
+  dirty,
+  run,
+}: {
+  /** Already filtered by the panel's search box. */
+  tags: GitTag[];
+  busy: boolean;
+  merging: boolean;
+  dirty: number;
+  run: RunRefAction;
+}) {
+  const { t } = useTranslation(["gitRefs"]);
+  const [creating, setCreating] = useState(false);
+  const [name, setName] = useState("");
+  const [message, setMessage] = useState("");
+  const [from, setFrom] = useState("");
+  const [selected, setSelected] = useState<string | null>(null);
+  const [branchName, setBranchName] = useState<string | null>(null);
+  const [switchTo, setSwitchTo] = useState(false);
+
+  const create = async () => {
+    const tag = name.trim();
+    if (!tag) return;
+    const ok = await run(
+      "tag-create",
+      {
+        tag,
+        ...(message.trim() ? { message: message.trim() } : {}),
+        ...(from.trim() ? { from: from.trim() } : {}),
+      },
+      t("done.tagCreate", { tag })
+    );
+    if (ok) {
+      setName("");
+      setMessage("");
+      setFrom("");
+      setCreating(false);
+    }
+  };
+  const push = async (tag: string) => {
+    const ok = await confirmDialog({
+      title: t("tagPush"),
+      message: t("tagPushConfirm", { tag }),
+      confirmLabel: t("tagPush"),
+      destructive: false,
+    });
+    if (ok) await run("tag-push", { tag }, t("done.tagPush", { tag }));
+  };
+  const remove = async (tag: string) => {
+    const ok = await confirmDialog({
+      title: t("tagDelete"),
+      message: t("tagDeleteConfirm", { tag }),
+      confirmLabel: t("tagDelete"),
+      destructive: true,
+    });
+    if (ok && (await run("tag-delete", { tag, confirm: true }, t("done.tagDelete", { tag }))))
+      setSelected(null);
+  };
+  const branchFrom = (tag: string) => {
+    const branch = (branchName ?? "").trim();
+    if (!branch) return;
+    void run(
+      "branch-create",
+      { branch, from: `refs/tags/${tag}`, ...(switchTo ? { switch: true } : {}) },
+      t("done.create", { branch })
+    ).then((ok) => ok && setBranchName(null));
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="px-2">
+        {creating ? (
+          <div className="space-y-1.5 rounded border border-border-light bg-surface-0/40 p-2">
+            <input
+              autoFocus
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => {
+                if (isSubmitEnter(e)) void create();
+              }}
+              placeholder={t("tagName")}
+              aria-label={t("tagName")}
+              className={`${smallInput} w-full`}
+            />
+            <input
+              value={from}
+              onChange={(e) => setFrom(e.target.value)}
+              placeholder={t("tagFrom")}
+              aria-label={t("tagFrom")}
+              className={`${smallInput} w-full`}
+            />
+            <textarea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              rows={2}
+              placeholder={t("tagMessage")}
+              aria-label={t("tagMessage")}
+              className={`${smallInput} w-full resize-y font-sans`}
+            />
+            <div className="flex flex-wrap items-center gap-1.5">
+              <button
+                type="button"
+                className={smallBtn}
+                disabled={busy || merging || !name.trim()}
+                onClick={() => void create()}
+              >
+                <Check className="h-3 w-3" />
+                {message.trim() ? t("tagCreateAnnotated") : t("tagCreateLight")}
+              </button>
+              <button type="button" className={smallBtn} onClick={() => setCreating(false)}>
+                {t("cancel")}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            className={smallBtn}
+            disabled={busy || merging}
+            onClick={() => setCreating(true)}
+          >
+            <Plus className="h-3 w-3" />
+            {t("tagNew")}
+          </button>
+        )}
+      </div>
+
+      {tags.length === 0 ? (
+        <p className="px-2 text-xs text-fg-muted">{t("noTags")}</p>
+      ) : (
+        <ul>
+          {tags.map((tag) => {
+            const open = selected === tag.name;
+            return (
+              <li key={tag.name} className={open ? "rounded bg-surface-2" : undefined}>
+                <button
+                  type="button"
+                  data-ref-row
+                  aria-expanded={open}
+                  onClick={() => {
+                    setSelected(open ? null : tag.name);
+                    setBranchName(null);
+                  }}
+                  className="flex w-full min-w-0 items-start gap-2 rounded px-2 py-1 text-left hover:bg-surface-3 focus:outline-none focus-visible:ring-1 focus-visible:ring-accent"
+                >
+                  <Tag className="mt-0.5 h-3.5 w-3.5 shrink-0 text-fg-muted" aria-hidden />
+                  <span className="min-w-0 flex-1">
+                    <span className="flex min-w-0 items-center gap-1.5">
+                      <span title={tag.name} className="truncate font-mono text-xs text-fg-primary">
+                        {tag.name}
+                      </span>
+                      {tag.sha && (
+                        <span className="shrink-0 font-mono text-[10px] text-fg-muted">
+                          {tag.sha.slice(0, 7)}
+                        </span>
+                      )}
+                      {tag.annotated && (
+                        <span className="shrink-0 rounded border border-border-light px-1 text-[9px] uppercase text-fg-muted">
+                          {t("annotated")}
+                        </span>
+                      )}
+                    </span>
+                    <span className="block truncate text-[10px] text-fg-muted">
+                      {[tag.message, tag.tagger, tag.date ? timeAgo(tag.date) : null]
+                        .filter(Boolean)
+                        .join(" · ")}
+                    </span>
+                  </span>
+                </button>
+                {open && (
+                  <div className="space-y-1.5 border-t border-border-light px-2 py-1.5">
+                    <div className="flex flex-wrap gap-1">
+                      <button
+                        type="button"
+                        className={smallBtn}
+                        disabled={busy || !tag.sha}
+                        onClick={() => {
+                          setBranchName((v) => (v === null ? "" : null));
+                          setSwitchTo(false);
+                        }}
+                      >
+                        <Plus className="h-3 w-3" />
+                        {t("newFrom")}
+                      </button>
+                      <button
+                        type="button"
+                        className={smallBtn}
+                        disabled={busy || merging}
+                        title={t("tagPushHint")}
+                        onClick={() => void push(tag.name)}
+                      >
+                        <Upload className="h-3 w-3" />
+                        {t("tagPush")}
+                      </button>
+                      <button
+                        type="button"
+                        className={`${smallBtn} hover:text-status-danger`}
+                        disabled={busy || merging}
+                        title={t("tagDeleteHint")}
+                        onClick={() => void remove(tag.name)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                        {t("tagDelete")}
+                      </button>
+                    </div>
+                    {branchName !== null && (
+                      <div className="flex flex-wrap items-center gap-1.5">
+                        <input
+                          autoFocus
+                          value={branchName}
+                          onChange={(e) => setBranchName(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (isSubmitEnter(e)) branchFrom(tag.name);
+                          }}
+                          placeholder={t("newBranchName")}
+                          aria-label={t("newBranchName")}
+                          className={smallInput}
+                        />
+                        <Checkbox
+                          checked={switchTo}
+                          onChange={setSwitchTo}
+                          disabled={dirty > 0 || merging}
+                          label={t("switchToIt")}
+                        />
+                        <button
+                          type="button"
+                          className={smallBtn}
+                          disabled={busy || !branchName.trim()}
+                          onClick={() => branchFrom(tag.name)}
+                        >
+                          <Plus className="h-3 w-3" />
+                          {t("create")}
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default TagManager;

client/src/components/lanes/git/__tests__/GitTools.test.tsx

@@ -0,0 +1,320 @@
+/**
+ * @file Tests for the Changes panel's history tools: the 3-way merge editor
+ * (three panes, per-block accept/both/edit, "N left", Save only when every
+ * block is chosen and it sends the composed result with the opened sha), the
+ * rebase banner's Skip, the interactive-rebase list (pushed warning + tick,
+ * reorder, squash/reword/drop in the todo, two-click run, Undo after) and the
+ * reset dialog (mode, hard needs a clean tree and the typed branch name).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MergeEditor, composeResult } from "../MergeEditor";
+import { InteractiveRebase, todoProblem } from "../InteractiveRebase";
+import { ResetDialog } from "../ResetDialog";
+import { RebaseSkipButton } from "../GitTools";
+import { gitRewrite } from "../../../../lib/gitRewrite";
+import { parseConflicts } from "../../../../lib/conflicts";
+
+vi.mock("../../../../lib/gitRewrite", async (orig) => {
+  const real = await orig<typeof import("../../../../lib/gitRewrite")>();
+  return {
+    ...real,
+    gitRewrite: {
+      conflict: vi.fn(),
+      planInteractive: vi.fn(),
+      planReset: vi.fn(),
+      run: vi.fn(),
+    },
+  };
+});
+vi.mock("../../../../lib/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() },
+}));
+
+const WORKING = [
+  "top",
+  "<<<<<<< HEAD",
+  "mine",
+  "=======",
+  "theirs",
+  ">>>>>>> feat",
+  "middle",
+  "<<<<<<< HEAD",
+  "a",
+  "=======",
+  "b",
+  ">>>>>>> feat",
+  "",
+].join("\n");
+
+const HEAD = "a".repeat(40);
+const commit = (n: number, pushed = false) => ({
+  sha: String(n).repeat(40),
+  short: String(n).repeat(7),
+  subject: `c${n}`,
+  message: `c${n}`,
+  pushed,
+});
+
+beforeEach(() => {
+  vi.mocked(gitRewrite.conflict)
+    .mockReset()
+    .mockResolvedValue({
+      available: true,
+      path: "a.txt",
+      operation: "merge",
+      branch: "main",
+      incoming: { sha: "f".repeat(40), short: "fffffff", subject: "feat work" },
+      base: "top\nbase\n",
+      ours: "top\nmine\n",
+      theirs: "top\ntheirs\n",
+      working: WORKING,
+      sha: "s1",
+      usable: true,
+      binary: false,
+      tooBig: false,
+    });
+  vi.mocked(gitRewrite.run).mockReset().mockResolvedValue({ action: "x", ok: true, output: "" });
+});
+
+describe("MergeEditor", () => {
+  it("shows three panes and saves the composed result once every block is chosen", async () => {
+    const user = userEvent.setup();
+    const onResolved = vi.fn();
+    render(<MergeEditor target={3} path="a.txt" onClose={vi.fn()} onResolved={onResolved} />);
+    const incoming = await screen.findByTestId("merge-incoming");
+    expect(incoming).toHaveTextContent("Incoming: fffffff feat work");
+    expect(incoming).toHaveTextContent("theirs");
+    expect(screen.getByTestId("merge-current")).toHaveTextContent("Current: main");
+    expect(screen.getByTestId("merge-left")).toHaveTextContent("2 of 2 conflicts left");
+    const save = screen.getByTestId("merge-save");
+    expect(save).toBeDisabled();
+
+    const [first, second] = screen.getAllByTestId("merge-block") as [HTMLElement, HTMLElement];
+    await user.click(within(first).getByTestId("merge-accept-incoming"));
+    expect(screen.getByTestId("merge-left")).toHaveTextContent("1 of 2 conflicts left");
+    await user.click(within(second).getByTestId("merge-both-ic"));
+    expect(screen.getByTestId("merge-left")).toHaveTextContent("Every conflict has a choice");
+
+    await user.click(save);
+    await waitFor(() =>
+      expect(gitRewrite.run).toHaveBeenCalledWith(3, "conflict-save", {
+        path: "a.txt",
+        content: "top\ntheirs\nmiddle\nb\na\n",
+        baseSha: "s1",
+      })
+    );
+    expect(onResolved).toHaveBeenCalled();
+  });
+
+  it("edits one block by hand, and the base pane is one click away", async () => {
+    const user = userEvent.setup();
+    render(<MergeEditor target={3} path="a.txt" onClose={vi.fn()} onResolved={vi.fn()} />);
+    const [first] = (await screen.findAllByTestId("merge-block")) as [HTMLElement];
+    await user.click(within(first).getByTestId("merge-edit-block"));
+    const box = within(first).getByTestId("merge-block-text");
+    await user.clear(box);
+    await user.type(box, "hand");
+    await user.click(within(first).getByRole("button", { name: "Done" }));
+    expect(first).toHaveTextContent("hand");
+    expect(screen.queryByTestId("merge-base")).toBeNull();
+    await user.click(screen.getByLabelText("Show base"));
+    expect(screen.getByTestId("merge-base")).toHaveTextContent("base");
+  });
+
+  it("labels the sides for a rebase and explains a refused save", async () => {
+    vi.mocked(gitRewrite.conflict).mockResolvedValueOnce({
+      ...(await vi.mocked(gitRewrite.conflict).getMockImplementation()!(3, "a.txt")),
+      operation: "rebase",
+    });
+    vi.mocked(gitRewrite.run).mockRejectedValueOnce(
+      Object.assign(new Error("x"), { code: "EMARKERS" })
+    );
+    const user = userEvent.setup();
+    render(<MergeEditor target={3} path="a.txt" onClose={vi.fn()} onResolved={vi.fn()} />);
+    expect(await screen.findByTestId("merge-current")).toHaveTextContent(
+      "the branch you are rebasing onto"
+    );
+    await user.click(screen.getByTestId("merge-whole-toggle"));
+    await user.click(screen.getByTestId("merge-save"));
+    expect(await screen.findByRole("alert")).toHaveTextContent("still has conflict markers");
+  });
+
+  it("composeResult keeps markers on an unresolved block", () => {
+    const parts = parseConflicts(WORKING.split("\n"))!;
+    expect(composeResult(parts, [{ kind: "ours" }])).toBe(
+      "top\nmine\nmiddle\n<<<<<<< HEAD\na\n=======\nb\n>>>>>>> feat\n"
+    );
+  });
+});
+
+describe("RebaseSkipButton", () => {
+  it("skips the stopped commit and re-reads", async () => {
+    const user = userEvent.setup();
+    const onChanged = vi.fn();
+    render(<RebaseSkipButton target={3} onChanged={onChanged} />);
+    await user.click(screen.getByTestId("rebase-skip"));
+    await waitFor(() => expect(onChanged).toHaveBeenCalled());
+    expect(gitRewrite.run).toHaveBeenCalledWith(3, "rebase-skip", {});
+  });
+});
+
+describe("InteractiveRebase", () => {
+  beforeEach(() => {
+    vi.mocked(gitRewrite.planInteractive)
+      .mockReset()
+      .mockResolvedValue({
+        available: true,
+        kind: "interactive",
+        head: HEAD,
+        branch: "feat",
+        subdir: false,
+        operation: null,
+        dirty: false,
+        base: "b".repeat(40),
+        merges: false,
+        commits: [commit(1, true), commit(2), commit(3)],
+        pushed: 1,
+      });
+  });
+
+  it("warns about pushed commits, needs the tick, and sends the edited todo", async () => {
+    const user = userEvent.setup();
+    vi.mocked(gitRewrite.run).mockResolvedValueOnce({
+      action: "rebase-interactive",
+      ok: true,
+      output: "",
+      before: HEAD,
+      after: "c".repeat(40),
+      conflicts: [],
+      stopped: false,
+      needsForcePush: true,
+    });
+    render(<InteractiveRebase target={3} onClose={vi.fn()} onChanged={vi.fn()} />);
+    expect(await screen.findByTestId("interactive-summary")).toHaveTextContent(
+      "This rewrites 3 commits; 1 are already pushed, so a force-push will be needed."
+    );
+    const run = screen.getByTestId("interactive-run");
+    expect(run).toBeDisabled(); // unchanged + pushed not acknowledged
+
+    const rows = screen.getAllByTestId("interactive-row") as HTMLElement[];
+    await user.selectOptions(within(rows[1]!).getByTestId("interactive-action"), "squash");
+    await user.selectOptions(within(rows[2]!).getByTestId("interactive-action"), "reword");
+    const msg = within(rows[2]!).getByTestId("interactive-message");
+    await user.clear(msg);
+    await user.type(msg, "new words");
+    await user.click(within(rows[2]!).getByRole("button", { name: "Move up" }));
+    expect(run).toBeDisabled();
+    await user.click(screen.getByTestId("interactive-force"));
+    expect(run).toBeEnabled();
+
+    await user.click(run);
+    expect(gitRewrite.run).not.toHaveBeenCalled(); // armed only
+    await user.click(screen.getByRole("button", { name: "Click again to rewrite" }));
+    await waitFor(() =>
+      expect(gitRewrite.run).toHaveBeenCalledWith(3, "rebase-interactive", {
+        head: HEAD,
+        confirm: true,
+        force: true,
+        todo: [
+          { sha: commit(1).sha, action: "pick" },
+          { sha: commit(3).sha, action: "reword", message: "new words" },
+          { sha: commit(2).sha, action: "squash" },
+        ],
+      })
+    );
+    expect(await screen.findByTestId("git-rewrite-done")).toHaveTextContent(
+      "Force push (with lease)"
+    );
+    expect(screen.getByTestId("git-rewrite-undo")).toBeInTheDocument();
+  });
+
+  it("todoProblem refuses a squash with nothing above and an empty reword", () => {
+    const c = commit(1);
+    expect(todoProblem([{ commit: c, action: "squash", message: "" }])).toBe("first");
+    expect(todoProblem([{ commit: c, action: "drop", message: "" }])).toBe("allDropped");
+    expect(todoProblem([{ commit: c, action: "reword", message: " " }])).toBe("reword");
+    expect(todoProblem([{ commit: c, action: "pick", message: "" }])).toBeNull();
+  });
+});
+
+describe("ResetDialog", () => {
+  const plan = (over = {}) => ({
+    available: true,
+    kind: "reset" as const,
+    head: HEAD,
+    branch: "feat",
+    subdir: false,
+    operation: null,
+    dirty: false,
+    target: "d".repeat(40),
+    related: true,
+    dropped: 2,
+    added: 0,
+    pushed: 0,
+    ...over,
+  });
+
+  it("hard needs the branch name typed back", async () => {
+    vi.mocked(gitRewrite.planReset).mockReset().mockResolvedValue(plan());
+    vi.mocked(gitRewrite.run).mockResolvedValueOnce({
+      action: "reset",
+      ok: true,
+      output: "",
+      before: HEAD,
+      after: "d".repeat(40),
+    });
+    const user = userEvent.setup();
+    render(
+      <ResetDialog
+        target={3}
+        commit={{ sha: "d".repeat(40), short: "ddddddd", subject: "old" }}
+        onClose={vi.fn()}
+        onChanged={vi.fn()}
+      />
+    );
+    expect(await screen.findByTestId("reset-summary")).toHaveTextContent("2 commit(s) leave feat");
+    await user.click(screen.getByTestId("reset-mode-hard"));
+    const run = screen.getByTestId("reset-run");
+    expect(run).toBeDisabled();
+    await user.type(screen.getByTestId("reset-confirm-branch"), "feat");
+    expect(run).toBeEnabled();
+    await user.click(run);
+    await waitFor(() =>
+      expect(gitRewrite.run).toHaveBeenCalledWith(3, "reset", {
+        target: "d".repeat(40),
+        mode: "hard",
+        head: HEAD,
+        confirm: true,
+        confirmBranch: "feat",
+      })
+    );
+    expect(await screen.findByTestId("git-rewrite-undo")).toBeInTheDocument();
+  });
+
+  it("refuses hard on a dirty tree and asks for the tick on pushed commits", async () => {
+    vi.mocked(gitRewrite.planReset)
+      .mockReset()
+      .mockResolvedValue(plan({ dirty: true, pushed: 1 }));
+    const user = userEvent.setup();
+    render(
+      <ResetDialog
+        target={3}
+        commit={{ sha: "d".repeat(40) }}
+        onClose={vi.fn()}
+        onChanged={vi.fn()}
+      />
+    );
+    await screen.findByTestId("reset-pushed");
+    const run = screen.getByTestId("reset-run");
+    expect(run).toBeDisabled();
+    await user.click(screen.getByTestId("reset-force"));
+    expect(run).toBeEnabled(); // mixed works on a dirty tree
+    await user.click(screen.getByTestId("reset-mode-hard"));
+    expect(screen.getByTestId("reset-hard-dirty")).toBeInTheDocument();
+    expect(run).toBeDisabled();
+  });
+});

client/src/components/lanes/git/__tests__/HistoryView.test.tsx

@@ -0,0 +1,308 @@
+/**
+ * @file Pins the History tab's graph view: rows with their graph cell and ref
+ * badges, the search box turning `author:`/`path:` into the log's filters,
+ * all branches, multi-select (checkbox and Shift-click) into a cherry-pick
+ * preview that lists the commits in the server's order and runs only on
+ * Confirm, a paused result handed to the overview, and Undo after a clean
+ * pick (asked first, sent with the from/to the pick answered). Also the pure
+ * `parseSearch` helper, and the commit menu's rewrite tools (Reset branch to
+ * here, Edit commits after this one) and Create tag here.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, within, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { HistoryView } from "../HistoryView";
+import { api } from "../../../../lib/api";
+import { confirmDialog } from "../../../../lib/confirm";
+import { parseSearch } from "../../../../lib/gitHistory";
+import type { LaneCommit } from "../../../../lib/types";
+
+vi.mock("../../../../lib/confirm", () => ({
+  confirmDialog: vi.fn(async () => true),
+}));
+vi.mock("../../../../lib/api", () => ({
+  api: {
+    lanes: {
+      gitLog: vi.fn(),
+      changes: vi.fn(),
+      gitRefAction: vi.fn(),
+      gitHistory: {
+        commit: vi.fn(),
+        patch: vi.fn(),
+        pickPlan: vi.fn(),
+        pick: vi.fn(),
+        act: vi.fn(),
+        compare: vi.fn(),
+        treeAt: vi.fn(),
+      },
+    },
+  },
+}));
+
+const sha = (c: string) => c.repeat(40);
+const commit = (c: string, over: Partial<LaneCommit> = {}): LaneCommit => ({
+  sha: sha(c),
+  short: c.repeat(7),
+  subject: `commit ${c}`,
+  author: "Ann",
+  date: "2026-10-01T00:00:00Z",
+  refs: [],
+  parents: [],
+  badges: [],
+  ...over,
+});
+// other: c -> b (feature branch), main: a (HEAD)
+const LOG = [
+  commit("c", { parents: [sha("b")], badges: [{ kind: "local", name: "feature" }] }),
+  commit("b", { parents: [sha("a")] }),
+  commit("a", {
+    parents: [],
+    badges: [
+      { kind: "local", name: "main", current: true },
+      { kind: "tag", name: "v1" },
+    ],
+  }),
+];
+
+const props = () => ({
+  target: 7,
+  branch: "main",
+  branches: ["main", "feature"],
+  historyRef: null,
+  onHistoryRef: vi.fn(),
+  reread: 0,
+  disabled: false,
+  headPushed: false,
+  onViewCommit: vi.fn(),
+  onOpenFileAtCommit: vi.fn(),
+  onUndoCommit: vi.fn(),
+  onResetHere: vi.fn(),
+  onEditAfter: vi.fn(),
+  onPaused: vi.fn(),
+  onChanged: vi.fn(),
+});
+
+beforeEach(() => {
+  vi.mocked(api.lanes.gitLog).mockReset().mockResolvedValue({ available: true, commits: LOG });
+  vi.mocked(api.lanes.changes)
+    .mockReset()
+    .mockResolvedValue({
+      available: true,
+      range: "commit",
+      base: null,
+      baseRef: null,
+      sha: sha("c"),
+      context: 3,
+      truncated: false,
+      files: [],
+    });
+  vi.mocked(api.lanes.gitHistory.commit).mockReset().mockResolvedValue({ available: false });
+  vi.mocked(api.lanes.gitHistory.pick).mockReset();
+  vi.mocked(api.lanes.gitHistory.act).mockReset();
+  vi.mocked(api.lanes.gitHistory.pickPlan)
+    .mockReset()
+    .mockImplementation(async (_t, op, shas) => ({
+      available: true,
+      op,
+      // The server's order: oldest first for a pick.
+      commits: [...shas].reverse().map((s) => ({
+        sha: s,
+        short: s.slice(0, 7),
+        subject: `commit ${s[0]}`,
+        author: "Ann",
+        date: "",
+      })),
+      branch: "main",
+      clean: true,
+      repoRoot: true,
+      busy: false,
+    }));
+  vi.mocked(confirmDialog).mockClear();
+});
+
+describe("parseSearch", () => {
+  it("splits author: and path: from the message text", () => {
+    expect(parseSearch('fix login author:ann path:"src/a b.ts"')).toEqual({
+      q: "fix login",
+      author: "ann",
+      path: "src/a b.ts",
+    });
+    expect(parseSearch("  ")).toEqual({});
+  });
+});
+
+describe("HistoryView", () => {
+  it("draws one graph cell per commit with its ref badges", async () => {
+    render(<HistoryView {...props()} />);
+    await screen.findByText("commit c");
+    expect(screen.getAllByTestId("lane-changes-graph")).toHaveLength(3);
+    const badges = screen.getAllByTestId("ref-badge");
+    expect(badges.map((b) => b.textContent)).toEqual(["feature", "main", "v1"]);
+    expect(badges[1]).toHaveAttribute("title", expect.stringMatching(/branch you are on/));
+  });
+
+  it("searches with filters and reads every branch", async () => {
+    const user = userEvent.setup();
+    render(<HistoryView {...props()} />);
+    await screen.findByText("commit c");
+    await user.type(screen.getByTestId("history-search"), "fix author:ann");
+    await waitFor(
+      () =>
+        expect(api.lanes.gitLog).toHaveBeenLastCalledWith(7, {
+          limit: 100,
+          q: "fix",
+          author: "ann",
+        }),
+      { timeout: 2000 }
+    );
+    await user.click(screen.getByRole("checkbox", { name: "All branches" }));
+    await waitFor(() =>
+      expect(api.lanes.gitLog).toHaveBeenLastCalledWith(7, {
+        limit: 100,
+        all: true,
+        q: "fix",
+        author: "ann",
+      })
+    );
+  });
+
+  it("multi-selects, previews the cherry-pick in order, and runs it only on Confirm", async () => {
+    const user = userEvent.setup();
+    const p = { ...props(), historyRef: "feature" };
+    vi.mocked(api.lanes.gitHistory.pick).mockResolvedValue({
+      action: "cherry-pick",
+      ok: true,
+      output: "",
+      conflicts: [],
+      paused: false,
+      from: sha("a"),
+      to: sha("e"),
+      commits: [
+        { sha: sha("d"), short: "ddddddd", subject: "commit b" },
+        { sha: sha("e"), short: "eeeeeee", subject: "commit c" },
+      ],
+    });
+    vi.mocked(api.lanes.gitHistory.act).mockResolvedValue({
+      action: "undo-pick",
+      ok: true,
+      output: "",
+      conflicts: [],
+      paused: false,
+    });
+    render(<HistoryView {...p} />);
+    await screen.findByText("commit c");
+    await user.click(screen.getByRole("checkbox", { name: "Select ccccccc" }));
+    // Shift-click extends from the anchor (c) to b.
+    fireEvent.click(screen.getByText("commit b"), { shiftKey: true });
+    expect(screen.getByTestId("history-selection")).toHaveTextContent("2 commits selected");
+
+    await user.click(screen.getByTestId("history-pick-selected"));
+    const plan = await screen.findByTestId("pick-plan");
+    expect(
+      within(plan)
+        .getAllByRole("listitem")
+        .map((li) => li.textContent)
+    ).toEqual(["1.bbbbbbbcommit b", "2.ccccccccommit c"]);
+    expect(screen.getByTestId("pick-tree-state")).toHaveTextContent("clean");
+    expect(api.lanes.gitHistory.pick).not.toHaveBeenCalled();
+    await user.click(screen.getByTestId("pick-confirm"));
+    await waitFor(() =>
+      expect(api.lanes.gitHistory.pick).toHaveBeenCalledWith(7, "cherry-pick", [sha("b"), sha("c")])
+    );
+    expect(p.onChanged).toHaveBeenCalled();
+
+    // Undo is offered, asked first, and sent with what the pick answered.
+    await user.click(await screen.findByTestId("pick-undo"));
+    expect(confirmDialog).toHaveBeenCalled();
+    await waitFor(() =>
+      expect(api.lanes.gitHistory.act).toHaveBeenCalledWith(7, "undo-pick", {
+        from: sha("a"),
+        to: sha("e"),
+        confirm: true,
+      })
+    );
+    await waitFor(() => expect(screen.queryByTestId("pick-result")).toBeNull());
+  });
+
+  it("refuses to start when the tree is dirty, and hands a paused pick to the overview", async () => {
+    const user = userEvent.setup();
+    const p = { ...props(), historyRef: "feature" };
+    vi.mocked(api.lanes.gitHistory.pickPlan).mockResolvedValueOnce({
+      available: true,
+      op: "cherry-pick",
+      commits: [{ sha: sha("c"), short: "ccccccc", subject: "commit c", author: "", date: "" }],
+      branch: "main",
+      clean: false,
+      repoRoot: true,
+      busy: false,
+    });
+    render(<HistoryView {...p} />);
+    await screen.findByText("commit c");
+    await user.click(screen.getByRole("checkbox", { name: "Select ccccccc" }));
+    await user.click(screen.getByTestId("history-pick-selected"));
+    await screen.findByTestId("pick-plan");
+    expect(screen.getByTestId("pick-confirm")).toBeDisabled();
+    expect(screen.getByTestId("pick-tree-state")).toHaveTextContent(/uncommitted changes/);
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+    vi.mocked(api.lanes.gitHistory.pick).mockResolvedValue({
+      action: "cherry-pick",
+      ok: true,
+      output: "",
+      conflicts: ["a.txt"],
+      paused: true,
+    });
+    await user.click(screen.getByTestId("history-pick-selected"));
+    await user.click(await screen.findByTestId("pick-confirm"));
+    await waitFor(() => expect(p.onPaused).toHaveBeenCalled());
+    expect(screen.queryByTestId("pick-result")).toBeNull();
+  });
+
+  it("opens the details pane on a click and the full change on a double-click", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    render(<HistoryView {...p} />);
+    await user.click(await screen.findByText("commit b"));
+    expect(await screen.findByTestId("commit-details")).toBeInTheDocument();
+    expect(api.lanes.gitHistory.commit).toHaveBeenCalledWith(7, sha("b"));
+    await user.dblClick(screen.getByText("commit c"));
+    expect(p.onViewCommit).toHaveBeenCalledWith(sha("c"));
+  });
+
+  it("keeps the rewrite tools in the commit menu and creates a tag at a commit", async () => {
+    const user = userEvent.setup();
+    const p = props();
+    vi.mocked(api.lanes.gitRefAction).mockReset().mockResolvedValue({
+      action: "tag-create",
+      ok: true,
+      output: "",
+    });
+    render(<HistoryView {...p} />);
+    const menuOn = async (text: string) => {
+      await user.pointer({ keys: "[MouseRight]", target: await screen.findByText(text) });
+      return screen.getByTestId("lane-changes-commit-menu");
+    };
+    // HEAD's own commit (main, the current branch): nothing after it to edit.
+    expect(
+      within(await menuOn("commit a")).getByTestId("lane-changes-menu-interactive")
+    ).toBeDisabled();
+    await user.keyboard("{Escape}");
+    await user.click(within(await menuOn("commit b")).getByText("Reset branch to here…"));
+    expect(p.onResetHere).toHaveBeenCalledWith(expect.objectContaining({ sha: sha("b") }));
+    await user.click(within(await menuOn("commit b")).getByText("Edit commits after this one…"));
+    expect(p.onEditAfter).toHaveBeenCalledWith(sha("b"));
+
+    await user.click(within(await menuOn("commit a")).getByText("Create tag here…"));
+    await user.type(screen.getByTestId("create-ref-name"), "v2");
+    await user.click(screen.getByTestId("create-ref-confirm"));
+    await waitFor(() =>
+      expect(api.lanes.gitRefAction).toHaveBeenCalledWith(7, "tag-create", {
+        tag: "v2",
+        from: sha("a"),
+      })
+    );
+    expect(p.onChanged).toHaveBeenCalled();
+  });
+});

client/src/components/lanes/git/__tests__/PickBanner.test.tsx

@@ -0,0 +1,88 @@
+/**
+ * @file Pins the paused cherry-pick/revert banner: it names the commit it
+ * stopped at and the step ("2 of 3"), Continue waits for every conflict to be
+ * resolved, Skip and Abort each need a second click and only then send
+ * `confirm: true`, and it draws nothing when no pick is open.
+ * @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 { PickBanner } from "../PickBanner";
+import { api } from "../../../../lib/api";
+
+vi.mock("../../../../lib/api", () => ({
+  api: { lanes: { gitHistory: { sequence: vi.fn(), act: vi.fn() } } },
+}));
+
+const paused = (conflicts: string[]) => ({
+  available: true as const,
+  active: true as const,
+  operation: "cherry-pick" as const,
+  current: { sha: "b".repeat(40), short: "bbbbbbb", subject: "edit a" },
+  remaining: [{ sha: "c".repeat(40), short: "ccccccc", subject: "add c" }],
+  done: 1,
+  startedFrom: "a".repeat(40),
+  conflicts,
+});
+
+const props = () => ({
+  target: 7,
+  conflicts: 1,
+  reread: 0,
+  busy: false,
+  onBusy: vi.fn(),
+  onDone: vi.fn(),
+});
+
+beforeEach(() => {
+  vi.mocked(api.lanes.gitHistory.act).mockReset().mockResolvedValue({
+    action: "pick-continue",
+    ok: true,
+    output: "",
+    conflicts: [],
+    paused: false,
+    commits: [],
+  });
+});
+
+describe("PickBanner", () => {
+  it("names the stop and its step, and Continue waits for the conflicts", async () => {
+    vi.mocked(api.lanes.gitHistory.sequence).mockResolvedValue(paused(["a.txt"]));
+    render(<PickBanner {...props()} />);
+    const banner = await screen.findByTestId("pick-banner");
+    expect(banner).toHaveTextContent('cherry-pick paused at bbbbbbb "edit a" (2 of 3)');
+    expect(banner).toHaveTextContent("Still to apply: ccccccc");
+    expect(screen.getByTestId("pick-continue")).toBeDisabled();
+  });
+
+  it("continues once resolved, and skips/aborts only on a second click", async () => {
+    const user = userEvent.setup();
+    vi.mocked(api.lanes.gitHistory.sequence).mockResolvedValue(paused([]));
+    const p = props();
+    render(<PickBanner {...p} />);
+    await user.click(await screen.findByTestId("pick-continue"));
+    await waitFor(() =>
+      expect(api.lanes.gitHistory.act).toHaveBeenCalledWith(7, "pick-continue", {})
+    );
+    expect(p.onDone).toHaveBeenCalled();
+
+    await user.click(screen.getByTestId("pick-skip"));
+    expect(api.lanes.gitHistory.act).toHaveBeenCalledTimes(1);
+    await user.click(screen.getByTestId("pick-skip"));
+    expect(api.lanes.gitHistory.act).toHaveBeenLastCalledWith(7, "pick-skip", { confirm: true });
+
+    await user.click(screen.getByTestId("pick-abort"));
+    expect(api.lanes.gitHistory.act).toHaveBeenCalledTimes(2);
+    await user.click(screen.getByTestId("pick-abort"));
+    expect(api.lanes.gitHistory.act).toHaveBeenLastCalledWith(7, "pick-abort", { confirm: true });
+  });
+
+  it("draws nothing when no pick is open", async () => {
+    vi.mocked(api.lanes.gitHistory.sequence).mockResolvedValue({ available: true, active: false });
+    const { container } = render(<PickBanner {...props()} />);
+    await waitFor(() => expect(api.lanes.gitHistory.sequence).toHaveBeenCalled());
+    expect(container).toBeEmptyDOMElement();
+  });
+});

client/src/components/lanes/git/refUi.ts

@@ -0,0 +1,41 @@
+/**
+ * @file Shared bits of the Branches panel (`BranchManager`, `TagManager`): the
+ * small button and input classes, the write runner's type, and the arrow-key
+ * walk over a list's rows.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import type { KeyboardEvent } from "react";
+import type { GitRefAction, GitRefBody } from "../../../lib/api";
+
+/** Runs one write; resolves true when it succeeded (the list is then re-read). */
+export type RunRefAction = (
+  action: GitRefAction,
+  body: GitRefBody,
+  done?: string
+) => Promise<boolean>;
+
+export const smallBtn =
+  "inline-flex items-center gap-1 rounded border border-border-light px-1.5 py-0.5 text-[11px] text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg-primary disabled:cursor-not-allowed disabled:opacity-40";
+export const smallInput =
+  "min-w-0 flex-1 rounded border border-border-light bg-surface-0 px-2 py-0.5 font-mono text-[11px] text-fg-primary placeholder:text-fg-muted focus:border-accent focus:outline-none";
+
+/** Arrow-key walk over the rows of a list (`[data-ref-row]`), Home/End too. */
+export function onListKeys(e: KeyboardEvent<HTMLElement>) {
+  if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
+  // Inside a text field the arrows and Home/End move the caret.
+  if ((e.target as HTMLElement).closest("input, textarea, select")) return;
+  const rows = [...e.currentTarget.querySelectorAll<HTMLElement>("[data-ref-row]")];
+  if (!rows.length) return;
+  const at = rows.indexOf(document.activeElement as HTMLElement);
+  const next =
+    e.key === "Home"
+      ? 0
+      : e.key === "End"
+        ? rows.length - 1
+        : e.key === "ArrowDown"
+          ? Math.min(rows.length - 1, at + 1)
+          : Math.max(0, at - 1);
+  e.preventDefault();
+  rows[next]?.focus();
+}

client/src/components/run/ChatAddMenu.tsx

@@ -13,7 +13,8 @@
  * puts `/<name>` (`/<plugin>:<name>`) at the front of the message — the same
  * text the `/` autocomplete inserts, so the CLI runs it as typed. Both lists
  * are read when the menu first opens (`GET /api/cc-config/skills|plugins`),
- * and Manage opens the Claude config page on that tab.
+ * and Manage opens the Claude config page on that tab. The menu opens
+ * downward when the box sits too near the top to fit it above.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 
@@ -78,6 +79,35 @@ function loadLists(cwd: string): Promise<Lists> {
 
 const PANEL =
   "absolute w-60 rounded-xl border border-border bg-surface-1 py-1 shadow-lg animate-fade-in";
+/** Room the menu and its tallest submenu (Project files: search + list) need. */
+const MENU_ROOM = 380;
+
+/** The visible band the button sits in: the viewport, narrowed by any
+ * scrolling/clipping ancestor (the page body scrolls inside the layout). */
+function clipBand(el: HTMLElement): { top: number; bottom: number } {
+  let top = 0;
+  let bottom = window.innerHeight;
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const o = getComputedStyle(p);
+    if (/(auto|scroll|hidden|clip)/.test(o.overflowY + o.overflow)) {
+      const r = p.getBoundingClientRect();
+      top = Math.max(top, r.top);
+      bottom = Math.min(bottom, r.bottom);
+    }
+  }
+  return { top, bottom };
+}
+
+/** Open downward when there is not room above but more below. */
+function opensDown(el: HTMLElement | null): boolean {
+  if (!el) return false;
+  const r = el.getBoundingClientRect();
+  const band = clipBand(el);
+  const above = r.top - band.top;
+  const below = band.bottom - r.bottom;
+  return above < MENU_ROOM && below > above;
+}
+
 const ROW =
   "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-sm text-fg-secondary hover:bg-surface-3 hover:text-fg-primary";
 
@@ -195,6 +225,7 @@ export function ChatAddMenu({
   const { t } = useTranslation("run");
   const navigate = useNavigate();
   const [open, setOpen] = useState(false);
+  const [down, setDown] = useState(false);
   const [sub, setSub] = useState<Sub | null>(null);
   const [context, setContext] = useState<Attachment[] | null>(null);
   const [recent, setRecent] = useState<Attachment[]>([]);
@@ -286,6 +317,8 @@ export function ChatAddMenu({
         />
       ))
     );
+  // A submenu lines up with the menu's edge nearest the button.
+  const edge = down ? "top-0" : "bottom-0";
   const shownPlugin = lists?.plugins.find((p) => p.name === plugin);
 
   return (
@@ -296,13 +329,17 @@ export function ChatAddMenu({
         aria-label={t("chat.add")}
         title={t("chat.add")}
         aria-expanded={open}
-        onClick={() => (open ? close() : setOpen(true))}
+        onClick={() => {
+          if (open) return close();
+          setDown(opensDown(ref.current));
+          setOpen(true);
+        }}
         className="flex h-8 w-8 items-center justify-center rounded-full text-fg-muted transition-colors hover:bg-surface-3 hover:text-fg-primary"
       >
         <Plus className="h-4 w-4" />
       </button>
       {open && (
-        <div role="menu" data-testid="chat-add-menu" className={`${PANEL} bottom-full left-0 mb-2`}>
+        <div role="menu" data-testid="chat-add-menu" className={`${PANEL} left-0 ${down ? "top-full mt-2" : "bottom-full mb-2"}`}>
           <Row
             icon={<Paperclip className="h-4 w-4" />}
             label={t("chat.upload")}
@@ -376,13 +413,13 @@ export function ChatAddMenu({
           )}
 
           {sub === "project" && (
-            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1 w-72 pt-2`}>
+            <div role="menu" className={`${PANEL} ${edge} left-full ml-1 w-72 pt-2`}>
               <ProjectFiles cwd={cwd} onPick={(rel) => attach(projectAttachment(rel))} />
             </div>
           )}
 
           {(sub === "context" || sub === "recent") && (
-            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+            <div role="menu" className={`${PANEL} ${edge} left-full ml-1`}>
               <div className="max-h-72 overflow-y-auto">
                 {(sub === "context" ? context : recent)?.length ? (
                   (sub === "context" ? context! : recent).map((it) => (
@@ -405,7 +442,7 @@ export function ChatAddMenu({
           )}
 
           {sub === "skills" && (
-            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+            <div role="menu" className={`${PANEL} ${edge} left-full ml-1`}>
               <div className="max-h-72 overflow-y-auto">{entries(lists?.skills ?? [], "")}</div>
               <div className="my-1 border-t border-border" />
               <Row
@@ -417,7 +454,7 @@ export function ChatAddMenu({
           )}
 
           {sub === "plugins" && (
-            <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+            <div role="menu" className={`${PANEL} ${edge} left-full ml-1`}>
               <div className="max-h-72 overflow-y-auto">
                 {lists && lists.plugins.length === 0 && (
                   <p className="px-3 py-1.5 text-xs text-fg-muted">{t("chat.none")}</p>
@@ -443,7 +480,7 @@ export function ChatAddMenu({
                 onClick={() => manage("plugins")}
               />
               {shownPlugin && (
-                <div role="menu" className={`${PANEL} bottom-0 left-full ml-1`}>
+                <div role="menu" className={`${PANEL} ${edge} left-full ml-1`}>
                   <div className="max-h-72 overflow-y-auto">
                     {entries(
                       shownPlugin.items,

client/src/components/run/ChatFilePreview.tsx

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

client/src/components/run/PaneChat.tsx

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

client/src/components/run/TerminalView.tsx

@@ -96,6 +96,36 @@ type DropState = "hint" | "paste" | "uploading" | "failed" | "tooBig" | "tooBigL
 /** localStorage flag for xterm's screen-reader mode (a Settings toggle can set it later). */
 export const SCREEN_READER_KEY = "agenthub.terminal.screenReader";
 /** localStorage flag: the "Shift+drag selects text" hint was dismissed. */
+/** The atlas a WebGL addon draws from: @xterm/addon-webgl 0.19 keeps these
+ *  fields unminified in its build. Undefined on any other shape. */
+type AtlasPages = { pages: { version: number }[] };
+const atlasOf = (addon: WebglAddon): AtlasPages | undefined => {
+  const atlas = (addon as unknown as { _renderer?: { _charAtlas?: AtlasPages } })._renderer
+    ?._charAtlas;
+  return Array.isArray(atlas?.pages) ? atlas : undefined;
+};
+/** Last version handed out by `restampAtlas`, shared by every pane. */
+let atlasStamp = 0;
+/**
+ * Gives every page of the addon's glyph atlas a version no texture slot has
+ * uploaded, so EVERY renderer sharing that atlas re-uploads every page from
+ * its canvas on its next draw — what addon-webgl 0.20 does with globally
+ * monotonic page versions. 0.19 counts per page, so after a merge shifts the
+ * pages down a slot can hold a stale page whose counter happens to match, and
+ * glyphs are sampled squeezed or foreign. Steps of 2^24 stay clear of the
+ * per-glyph increments a page makes before the next restamp. False when the
+ * addon is not the shape this knows.
+ */
+const restampAtlas = (addon: WebglAddon): boolean => {
+  const atlas = atlasOf(addon);
+  if (!atlas) return false;
+  for (const page of atlas.pages) {
+    atlasStamp += 2 ** 24;
+    page.version = atlasStamp;
+  }
+  return true;
+};
+
 const SELECT_HINT_KEY = "agenthub.terminal.selectHintSeen";
 const readFlag = (key: string) => {
   try {
@@ -468,7 +498,8 @@ export const TerminalView = memo(function TerminalView({
       // 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;
+      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
@@ -761,6 +792,44 @@ export const TerminalView = memo(function TerminalView({
         refit();
       };
       document.fonts?.addEventListener("loadingdone", onFontLoaded);
+      // @xterm/addon-webgl 0.19 shares ONE glyph atlas between every terminal
+      // with the same font. When it fills up it merges four pages into one
+      // larger page and shifts the rest down, and a GPU texture is re-uploaded
+      // only when its page's `version` differs from the uploaded one — after a
+      // shift those per-page counters can coincide, so a slot keeps a stale
+      // page of another size and every glyph is drawn squeezed or foreign
+      // while the buffer stays correct (fixed upstream only in 0.20 betas).
+      // Any change to the page list therefore restamps every page's version
+      // (`restampAtlas`) synchronously, before the next draw of ANY pane on
+      // that atlas. `clearTextureAtlas` is no fix: it empties the SHARED atlas
+      // but redraws only this pane, leaving its siblings slicing reused space.
+      // An addon of another shape falls back to toggling the family's
+      // trailing space on the next frame, which makes each renderer re-acquire
+      // its atlas (as onFontLoaded does).
+      let atlasFrame = 0;
+      const rebuildAtlas = () => {
+        if (gpu && restampAtlas(gpu)) return true;
+        if (atlasFrame) return false;
+        // Never inside the render that is rasterizing the merging glyph.
+        atlasFrame = requestAnimationFrame(() => {
+          atlasFrame = 0;
+          const family = term.options.fontFamily ?? "";
+          term.options.fontFamily = family.endsWith(" ") ? family.trimEnd() : `${family} `;
+        });
+        return false;
+      };
+      const atlasMerged = gpu?.onRemoveTextureAtlasCanvas(rebuildAtlas);
+      const atlasGrew = gpu?.onAddTextureAtlasCanvas(rebuildAtlas);
+      // The browser may also drop the textures without a context-loss event
+      // (sleep/resume, a long-backgrounded tab): re-upload when the page is
+      // back, and repaint, since nothing else asks this pane to draw.
+      const onPageShown = () => {
+        if (document.visibilityState === "visible" && rebuildAtlas()) {
+          term.refresh(0, term.rows - 1);
+        }
+      };
+      document.addEventListener("visibilitychange", onPageShown);
+      window.addEventListener("focus", onPageShown);
       // Settings → Appearance changed the terminal's font or size: an open
       // pane takes it now, re-measured and re-fitted like a font landing.
       const onFontPref = () => {
@@ -779,6 +848,11 @@ export const TerminalView = memo(function TerminalView({
         searchRef.current = null;
         resizeObserver.disconnect();
         document.fonts?.removeEventListener("loadingdone", onFontLoaded);
+        if (atlasFrame) cancelAnimationFrame(atlasFrame);
+        atlasMerged?.dispose();
+        atlasGrew?.dispose();
+        document.removeEventListener("visibilitychange", onPageShown);
+        window.removeEventListener("focus", onPageShown);
         window.removeEventListener(FONT_SIZE_EVENT, onFontPref);
         term.textarea?.removeEventListener("focus", reassert);
         detachIme();

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

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

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

@@ -63,6 +63,9 @@ const termState = {
 };
 const onResizeHandlers: Array<() => void> = [];
 const termOptions: { theme?: unknown } = {};
+const refreshMock = vi.fn();
+/** The atlas the next WebGL addon draws from; null = an addon of another shape. */
+const nextAtlas: { pages: { version: number }[] | null } = { pages: null };
 const ctorArgs: Array<{ theme?: unknown }> = [];
 
 vi.mock("@xterm/xterm", () => ({
@@ -92,6 +95,7 @@ vi.mock("@xterm/xterm", () => ({
       return { dispose: vi.fn() };
     },
     dispose: disposeMock,
+    refresh: refreshMock,
     loadAddon: loadAddonMock,
     attachCustomWheelEventHandler: wheelHandlerMock,
     attachCustomKeyEventHandler: keyHandlerMock,
@@ -112,21 +116,44 @@ vi.mock("@xterm/addon-fit", () => ({
   FitAddon: vi.fn().mockImplementation(() => ({ fit: 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 } = {
+const gpu: {
+  last: {
+    dispose: ReturnType<typeof vi.fn>;
+    lose: () => void;
+    merge: () => void;
+    grow: () => void;
+  } | null;
+} = {
   last: null,
 };
 vi.mock("@xterm/addon-webgl", () => ({
   WebglAddon: vi.fn().mockImplementation(() => {
     let onLoss = () => {};
+    let onMerge = () => {};
+    let onGrow = () => {};
     const addon = {
       __webgl: true,
+      ...(nextAtlas.pages ? { _renderer: { _charAtlas: { pages: nextAtlas.pages } } } : {}),
       dispose: vi.fn(),
       onContextLoss: (fn: () => void) => {
         onLoss = fn;
         return { dispose: vi.fn() };
       },
+      onRemoveTextureAtlasCanvas: (fn: () => void) => {
+        onMerge = fn;
+        return { dispose: vi.fn() };
+      },
+      onAddTextureAtlasCanvas: (fn: () => void) => {
+        onGrow = fn;
+        return { dispose: vi.fn() };
+      },
+    };
+    gpu.last = {
+      dispose: addon.dispose,
+      lose: () => onLoss(),
+      merge: () => onMerge(),
+      grow: () => onGrow(),
     };
-    gpu.last = { dispose: addon.dispose, lose: () => onLoss() };
     return addon;
   }),
 }));
@@ -488,6 +515,50 @@ describe("TerminalView", () => {
     expect(disposeMock).not.toHaveBeenCalled(); // the terminal itself lives on
   });
 
+  it("restamps every atlas page at once when the page list changes", () => {
+    // addon-webgl 0.19 counts versions per page, so after a merge shifts the
+    // pages a texture slot can keep a stale page whose counter matches. Every
+    // page gets a version no slot has uploaded — in every pane on the atlas.
+    const pages = [{ version: 3 }, { version: 7 }, { version: 1 }];
+    nextAtlas.pages = pages;
+    const raf = vi.spyOn(window, "requestAnimationFrame");
+    try {
+      render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+      gpu.last!.merge();
+      const first = pages.map((p) => p.version);
+      expect(new Set(first).size).toBe(3);
+      expect(first.every((v) => v > 7)).toBe(true);
+      gpu.last!.grow();
+      expect(pages.every((p, i) => p.version > Math.max(...first) && p.version !== first[i])).toBe(
+        true
+      );
+      expect(raf).not.toHaveBeenCalled(); // synchronous, before any pane draws
+      // The page coming back re-uploads and repaints this pane.
+      refreshMock.mockClear();
+      window.dispatchEvent(new Event("focus"));
+      expect(refreshMock).toHaveBeenCalledWith(0, 27);
+    } finally {
+      nextAtlas.pages = null;
+      raf.mockRestore();
+    }
+  });
+
+  it("re-acquires the glyph atlas on the next frame after a page merge", () => {
+    // An addon whose atlas this cannot reach: any option change makes each
+    // renderer re-acquire its atlas and re-upload every page.
+    const raf = vi.spyOn(window, "requestAnimationFrame").mockImplementation(() => 1);
+    render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
+    const opts = termOptions as { fontFamily?: string };
+    opts.fontFamily = "JetBrains Mono";
+    gpu.last!.merge();
+    gpu.last!.merge(); // coalesced into one frame
+    expect(raf).toHaveBeenCalledTimes(1);
+    expect(opts.fontFamily).toBe("JetBrains Mono"); // never inside the render that merged
+    (raf.mock.calls[0]![0] as FrameRequestCallback)(0);
+    expect(opts.fontFamily).toBe("JetBrains Mono ");
+    raf.mockRestore();
+  });
+
   // xterm 6 dropped its own Alt+arrow → word-move mapping; the pane keeps it.
   it("sends Alt+arrow as the word-move keys xterm 5 sent", () => {
     expect(altArrowSeq("ArrowLeft", false)).toBe("\x1b[1;5D");

client/src/components/settings/GitIdentitySettings.tsx

@@ -41,32 +41,9 @@ const BTN =
   "inline-flex items-center gap-1.5 rounded border border-border-light px-2.5 py-1 text-xs text-fg-secondary hover:bg-surface-3 disabled:cursor-not-allowed disabled:opacity-40";
 
 const CODECOMMIT_RE = /^git-codecommit\.([a-z0-9-]+)\.amazonaws\.com$/;
-// The regions AWS CodeCommit runs in.
-const AWS_REGIONS = [
-  "ap-southeast-1",
-  "ap-southeast-2",
-  "ap-southeast-3",
-  "ap-northeast-1",
-  "ap-northeast-2",
-  "ap-northeast-3",
-  "ap-south-1",
-  "ap-east-1",
-  "us-east-1",
-  "us-east-2",
-  "us-west-1",
-  "us-west-2",
-  "ca-central-1",
-  "eu-west-1",
-  "eu-west-2",
-  "eu-west-3",
-  "eu-central-1",
-  "eu-north-1",
-  "eu-south-1",
-  "sa-east-1",
-  "me-south-1",
-  "af-south-1",
-  "il-central-1",
-];
+// The host a key ID is saved under when no URL names one: AWS takes the same
+// key ID in every region, so the server writes the default login for all.
+const AWS_DEFAULT_HOST = "git-codecommit.us-east-1.amazonaws.com";
 
 function Step({ n, children }: { n: number; children: ReactNode }) {
   return (
@@ -166,28 +143,25 @@ function KeyCard({
 }
 
 /**
- * Step 3 of an AWS key: the SSH key ID AWS shows for it, in one region. The
- * default key's login is the region's plain host; a named key's is saved
- * under an account name (its own name unless another is typed), tied to it.
+ * Step 3 of an AWS key: the SSH key ID AWS shows for it — nothing else. The
+ * default key's login is saved for every region; a named key's under its own
+ * name, tied to it. A clone of any CodeCommit URL tries each saved login.
  */
 function AwsLoginForm({
   busy,
-  named,
   onSave,
 }: {
   busy: boolean;
-  /** The named key's name; undefined for the default key. */
-  named?: string;
-  onSave: (v: { keyId: string; region: string; alias: string }) => Promise<boolean>;
+  onSave: (v: { keyId: string }) => Promise<boolean>;
 }) {
   const { t } = useTranslation("settings");
-  const [v, setV] = useState({ keyId: "", region: "ap-southeast-1", alias: "" });
+  const [v, setV] = useState({ keyId: "" });
   return (
     <form
-      className="mt-1 grid gap-2 sm:grid-cols-[2fr_1fr_1fr_auto]"
+      className="mt-1 flex gap-2"
       onSubmit={(e) => {
         e.preventDefault();
-        void onSave(v).then((ok) => ok && setV({ ...v, keyId: "", alias: "" }));
+        void onSave(v).then((ok) => ok && setV({ keyId: "" }));
       }}
     >
       <input
@@ -198,27 +172,6 @@ function AwsLoginForm({
         onChange={(e) => setV({ ...v, keyId: e.target.value })}
         className={`${INPUT} font-mono`}
       />
-      <select
-        aria-label={t("gitIdentity.awsRegion")}
-        value={v.region}
-        onChange={(e) => setV({ ...v, region: e.target.value })}
-        className="select !py-1 !text-xs"
-      >
-        {AWS_REGIONS.map((r) => (
-          <option key={r} value={r}>
-            {r}
-          </option>
-        ))}
-      </select>
-      <input
-        aria-label={t("gitIdentity.alias")}
-        title={t("gitIdentity.aliasHint")}
-        placeholder={named ?? t("gitIdentity.aliasPlaceholder")}
-        autoComplete="off"
-        value={v.alias}
-        onChange={(e) => setV({ ...v, alias: e.target.value })}
-        className={`${INPUT} font-mono`}
-      />
       <button type="submit" className={BTN} disabled={busy || !v.keyId.trim()}>
         {t("gitIdentity.awsSave")}
       </button>
@@ -413,28 +366,41 @@ export function GitIdentitySettings() {
   const namedIds = new Set(named.map((k) => k.id));
   const rowsOf = <R extends { key?: string | null }>(rows: R[], k?: Key) =>
     k ? rows.filter((r) => r.key === k.id) : rows.filter((r) => !r.key || !namedIds.has(r.key));
-  const saveAws = (v: { keyId: string; region: string; alias: string }, k?: Key) => {
+  const saveAws = (v: { keyId: string }, k?: Key) => {
     let user = v.keyId.trim();
-    let host = `git-codecommit.${v.region}.amazonaws.com`;
-    // A pasted `ssh://APKA…@git-codecommit.<region>…/…` URL fills both.
+    let host = AWS_DEFAULT_HOST;
+    // A pasted `ssh://APKA…@git-codecommit.<region>…/…` URL: its key ID. The
+    // region does not matter — the key ID logs in to every one.
     const m = /^ssh:\/\/([^@/]+)@([^/]+)/i.exec(user);
     if (m?.[1] && m[2]) {
       user = m[1];
-      host = m[2].toLowerCase();
+      if (CODECOMMIT_RE.test(m[2].toLowerCase())) host = m[2].toLowerCase();
     }
-    // A named key's account goes by the key's name unless another is typed.
-    const alias = v.alias.trim().toLowerCase() || (k?.name ?? "");
     return run(
       () =>
-        api.gitIdentity.setSshUser({
-          host,
-          user,
-          ...(alias ? { alias } : {}),
-          ...(k?.id ? { key: k.id } : {}),
-        }),
-      t("gitIdentity.awsSaved", { region: alias || (CODECOMMIT_RE.exec(host)?.[1] ?? host) })
+        k?.name
+          ? // A named key (another AWS account): its login goes by the key's
+            // name; a clone of any CodeCommit URL tries it.
+            api.gitIdentity.setSshUser({ host, user, alias: k.name, key: k.id! })
+          : api.gitIdentity.setSshUser({ host, user, allRegions: true }),
+      k?.name ? t("gitIdentity.awsSavedNamed", { name: k.name }) : t("gitIdentity.awsSavedAll")
     );
   };
+  // The default key's logins, one row per key ID: "every region" once the
+  // server's whole list is covered, else the regions saved (an older save) —
+  // with a button that extends it to every region.
+  const regionCount = id?.codecommitRegions?.length ?? 0;
+  const awsDefaultGroups = (rows: typeof awsRows) => {
+    const out: { user: string; key: string | null; hosts: string[]; regions: string[] }[] = [];
+    for (const r of rows.filter((x) => !x.alias)) {
+      const g = out.find((o) => o.user === r.user && o.key === (r.key ?? null));
+      if (g) {
+        g.hosts.push(r.host);
+        g.regions.push(r.region);
+      } else out.push({ user: r.user, key: r.key ?? null, hosts: [r.host], regions: [r.region] });
+    }
+    return out;
+  };
   const saveGitHost = (host: string, k: Key) => {
     const h = /^(?:ssh:\/\/)?(?:[^@/]+@)?([^/:]+)/i.exec(host)?.[1]?.toLowerCase() ?? host;
     return run(
@@ -689,14 +655,66 @@ export function GitIdentitySettings() {
                       {id.sshUsers === undefined ? null : (
                         <>
                           {loginRows(
-                            rows,
-                            (r) =>
-                              `${r.alias ? `${r.alias} · ` : ""}${r.region} · ${r.user} · ${keyLabel(r.key)}`
+                            rows.filter((r) => !!r.alias),
+                            (r) => `${r.alias} · ${r.user} · ${keyLabel(r.key)}`
                           )}
+                          {awsDefaultGroups(rows).map((g) => {
+                            const all = regionCount > 0 && g.regions.length >= regionCount;
+                            return (
+                              <div
+                                key={`${g.user}\0${g.key ?? ""}`}
+                                className="mt-1 flex items-center gap-2"
+                              >
+                                <span className="min-w-0 flex-1 truncate font-mono text-[11px] text-fg-secondary">
+                                  {all ? t("gitIdentity.awsAllRegions") : g.regions.join(", ")}
+                                  {` · ${g.user} · ${keyLabel(g.key)}`}
+                                </span>
+                                {id.writable && !all && regionCount > 0 && (
+                                  <button
+                                    type="button"
+                                    className={BTN}
+                                    disabled={busy}
+                                    onClick={() =>
+                                      void run(
+                                        () =>
+                                          api.gitIdentity.setSshUser({
+                                            host: g.hosts[0]!,
+                                            user: g.user,
+                                            allRegions: true,
+                                          }),
+                                        t("gitIdentity.awsSavedAll")
+                                      )
+                                    }
+                                  >
+                                    {t("gitIdentity.awsUseAll")}
+                                  </button>
+                                )}
+                                {id.writable && (
+                                  <button
+                                    type="button"
+                                    className={`${BTN} hover:text-status-danger`}
+                                    disabled={busy}
+                                    aria-label={`${t("gitIdentity.remove")} ${g.user}`}
+                                    onClick={() =>
+                                      void run(() =>
+                                        g.hosts.length > 1
+                                          ? api.gitIdentity.removeSshUser(g.hosts[0]!, {
+                                              allRegions: true,
+                                              user: g.user,
+                                            })
+                                          : api.gitIdentity.removeSshUser(g.hosts[0]!)
+                                      )
+                                    }
+                                  >
+                                    <Trash2 className="h-3.5 w-3.5" />
+                                  </button>
+                                )}
+                              </div>
+                            );
+                          })}
                           {id.writable && (
                             <AwsLoginForm
                               busy={busy}
-                              named={isNamed ? k!.name! : undefined}
                               onSave={(v) => saveAws(v, isNamed ? k : undefined)}
                             />
                           )}

client/src/components/settings/ToolProfilesSettings.tsx

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

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

@@ -139,27 +139,64 @@ describe("GitIdentitySettings", () => {
     await waitFor(() => expect(api.gitIdentity.removeKey).toHaveBeenCalledWith("rsa"));
   });
 
-  it("saves the CodeCommit SSH key ID for a region and shows the plain clone", async () => {
+  it("saves the CodeCommit SSH key ID for every region — no region to pick", async () => {
     const RSA = { type: "rsa" as const, publicKey: "ssh-rsa AAAAB3 x", fingerprint: "SHA256:r" };
-    const H = "git-codecommit.eu-west-1.amazonaws.com";
-    vi.mocked(api.gitIdentity.get).mockResolvedValue(view({ sshKeys: [RSA], sshUsers: [] }));
+    const REGIONS = ["us-east-1", "eu-west-1", "ap-northeast-1"];
+    const host = (r: string) => `git-codecommit.${r}.amazonaws.com`;
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(
+      view({ sshKeys: [RSA], sshUsers: [], codecommitRegions: REGIONS })
+    );
     vi.mocked(api.gitIdentity.setSshUser).mockResolvedValue(
-      view({ sshKeys: [RSA], sshUsers: [{ host: H, user: "APKA1" }] })
+      view({
+        sshKeys: [RSA],
+        sshUsers: REGIONS.map((r) => ({ host: host(r), user: "APKA1" })),
+        codecommitRegions: REGIONS,
+      })
     );
     vi.mocked(api.gitIdentity.removeSshUser).mockResolvedValue(
-      view({ sshKeys: [RSA], sshUsers: [] })
+      view({ sshKeys: [RSA], sshUsers: [], codecommitRegions: REGIONS })
     );
     render(<GitIdentitySettings />);
     const aws = await screen.findByRole("region", { name: "AWS CodeCommit" });
+    expect(within(aws).queryByLabelText("Region")).toBeNull();
     await userEvent.type(within(aws).getByLabelText("SSH key ID"), " APKA1 ");
-    await userEvent.selectOptions(within(aws).getByLabelText("Region"), "eu-west-1");
     await userEvent.click(within(aws).getByRole("button", { name: "Save" }));
-    expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({ host: H, user: "APKA1" });
-    expect(await within(aws).findByText("eu-west-1 · APKA1 · Any key")).toBeInTheDocument();
+    expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({
+      host: "git-codecommit.us-east-1.amazonaws.com",
+      user: "APKA1",
+      allRegions: true,
+    });
+    // One row for the key ID, not one per region.
+    expect(await within(aws).findByText("Every region · APKA1 · Any key")).toBeInTheDocument();
     // A CodeCommit host never shows up again under "other hosts".
-    expect(screen.queryByText(`APKA1@${H}`)).toBeNull();
-    await userEvent.click(within(aws).getByRole("button", { name: `Delete ${H}` }));
-    expect(api.gitIdentity.removeSshUser).toHaveBeenCalledWith(H);
+    expect(screen.queryByText(`APKA1@${host("eu-west-1")}`)).toBeNull();
+    await userEvent.click(within(aws).getByRole("button", { name: "Delete APKA1" }));
+    expect(api.gitIdentity.removeSshUser).toHaveBeenCalledWith(host("us-east-1"), {
+      allRegions: true,
+      user: "APKA1",
+    });
+  });
+
+  it("offers an older one-region CodeCommit login for every region", async () => {
+    const RSA = { type: "rsa" as const, publicKey: "ssh-rsa AAAAB3 x", fingerprint: "SHA256:r" };
+    const H = "git-codecommit.ap-northeast-1.amazonaws.com";
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(
+      view({
+        sshKeys: [RSA],
+        sshUsers: [{ host: H, user: "APKA9" }],
+        codecommitRegions: ["us-east-1", "ap-northeast-1"],
+      })
+    );
+    vi.mocked(api.gitIdentity.setSshUser).mockResolvedValue(view({ sshKeys: [RSA] }));
+    render(<GitIdentitySettings />);
+    const aws = await screen.findByRole("region", { name: "AWS CodeCommit" });
+    expect(await within(aws).findByText("ap-northeast-1 · APKA9 · Any key")).toBeInTheDocument();
+    await userEvent.click(within(aws).getByRole("button", { name: "Use in every region" }));
+    expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({
+      host: H,
+      user: "APKA9",
+      allRegions: true,
+    });
   });
 
   it("saves a user for any other SSH host under the advanced section", async () => {
@@ -247,18 +284,16 @@ describe("GitIdentitySettings", () => {
     // Another key can be added below it.
     expect(screen.getByRole("button", { name: "Add another key" })).toBeInTheDocument();
 
-    // Its own step 3: the account name defaults to the key's name.
+    // Its own step 3: only the key ID; the login goes by the key's name.
     await userEvent.type(within(prod).getByLabelText("SSH key ID"), "APKA2");
     await userEvent.click(within(prod).getByRole("button", { name: "Save" }));
     expect(api.gitIdentity.setSshUser).toHaveBeenCalledWith({
-      host: H,
+      host: "git-codecommit.us-east-1.amazonaws.com",
       user: "APKA2",
       alias: "aws-2",
       key: "id_rsa_aws-2",
     });
-    expect(
-      await within(prod).findByText("aws-2 · ap-southeast-1 · APKA2 · aws-2")
-    ).toBeInTheDocument();
+    expect(await within(prod).findByText("aws-2 · APKA2 · aws-2")).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();
@@ -298,8 +333,6 @@ describe("GitIdentitySettings", () => {
       alias: "git-2",
       key: "id_ed25519_git-2",
     });
-    expect(
-      await within(work).findByText("ssh://git-2/ → git@github.com")
-    ).toBeInTheDocument();
+    expect(await within(work).findByText("ssh://git-2/ → git@github.com")).toBeInTheDocument();
   });
 });

client/src/components/users/MemberPicker.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from "react-i18next";
 import { Search } from "lucide-react";
 import type { AuthUser, ServerUserUsage } from "../../lib/api";
 import { Checkbox } from "../Checkbox";
+import { UserAvatar } from "./UserAvatar";
 
 export const ROLES: AuthUser["role"][] = ["admin", "developer", "analyst"];
 /** A role, every user, or the users in no pool group. */
@@ -168,7 +169,14 @@ export function MemberPicker({
               checked={chosen.has(u.id)}
               onChange={(on) => setMany([u.id], on)}
               label={
-                <span>
+                <span className="inline-flex items-center gap-1.5">
+                  <UserAvatar
+                    name={u.displayName || u.username}
+                    userId={u.id}
+                    avatarAt={u.avatarAt}
+                    letters={1}
+                    className="h-5 w-5 text-[10px]"
+                  />
                   {u.username}
                   {u.disabled && <span className="ml-1 text-fg-muted">({t("disabled")})</span>}
                   {note?.(u)}

client/src/components/users/PoolGroups.tsx

@@ -36,6 +36,7 @@ import { toast } from "../../lib/toast";
 import { ConfirmModal } from "../ConfirmModal";
 import { AiToolIcon } from "../AiToolIcon";
 import { MemberPicker } from "./MemberPicker";
+import { UserAvatar } from "./UserAvatar";
 
 /** Pool tools with their labels, in display order. */
 export const POOL_TOOL_LABELS: { id: PoolTool; label: string }[] = [
@@ -363,12 +364,13 @@ export function PoolGroups({
         } ${isDragged(drag) ? "opacity-40" : ""}`}
         data-testid="pool-member"
       >
-        <span
-          className="flex h-4 w-4 items-center justify-center rounded-full bg-accent/15 text-[9px] font-semibold uppercase text-accent"
-          aria-hidden
-        >
-          {name.charAt(0)}
-        </span>
+        <UserAvatar
+          name={name}
+          userId={id}
+          avatarAt={u?.avatarAt}
+          letters={1}
+          className="h-4 w-4 text-[9px]"
+        />
         {name}
         {u && <span className="text-[10px] text-fg-muted">{t(`roles.${u.role}`)}</span>}
         {isAdmin && from && (

client/src/components/users/UserAvatar.tsx

@@ -4,7 +4,9 @@
  * (`GET /api/me/avatar`) or, with `userId`, another's (`GET
  * /api/users/:id/avatar`, staff only), versioned by `avatarAt`; without one —
  * or when the image fails to load — the first letters of its name. Used by the
- * sidebar's account row, its workspace owner groups and Settings → Account.
+ * sidebar's account row, its workspace owner groups, Settings → Account, the
+ * Users page and its editor, the pool board and member picker, and System
+ * Health's per-user CPU/RAM card.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 

client/src/components/users/UserEditDialog.tsx

@@ -2,10 +2,13 @@
  * @file UserEditDialog.tsx
  * @description The Users page's ONE account editor (admin only): profile
  * (display name, email), access (role, active/disabled — neither for your own
- * account), a new password (typed or generated, copyable — someone else's
+ * account — and, for an admin, whether they own the host's Linux account, so
+ * its sessions outside every workspace are billed to them), a new password (typed or generated, copyable — someone else's
  * may be anything and makes them choose their own at next sign-in; your own
  * must pass every rule of `lib/passwordRules.ts`), the workspaces the
- * account owns (remove, add from every workspace), and "sign out everywhere".
+ * account owns (remove, add from every workspace), its spend quota (the
+ * default, no limit, or its own dollars per day / 5 h — `UserQuota.tsx`), and
+ * "sign out everywhere".
  * Every change is staged and sent as ONE `PATCH /api/users/:id` carrying only
  * what changed, confirmed with the admin's OWN password (`currentPassword`) —
  * the server validates the whole change before it applies any of it. A
@@ -17,16 +20,25 @@ import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNod
 import { useTranslation } from "react-i18next";
 import { Copy, Eye, EyeOff, Plus, Sparkles, X } from "lucide-react";
 import { confirmDialog } from "../../lib/confirm";
-import { api, type AuthUser, type ServerUserUsage, type UserPatch } from "../../lib/api";
+import {
+  api,
+  type AuthUser,
+  type ServerUserUsage,
+  type UserPatch,
+  type UserQuota,
+  type UserQuotaSetting,
+} from "../../lib/api";
 import type { Lane } from "../../lib/types";
 import { fmtCost, formatDateTime } from "../../lib/format";
 import { copyText } from "../../lib/clipboard";
 import { isSubmitEnter } from "../../lib/keys";
 import { passwordProblems } from "../../lib/passwordRules";
 import { PasswordRules } from "./PasswordRules";
+import { UserAvatar } from "./UserAvatar";
 import { useDialog } from "../../hooks/useDialog";
 import { Switch } from "../Switch";
 import { Checkbox } from "../Checkbox";
+import { QuotaFields, parseLimit, useQuotaLabel, type QuotaPeriod } from "./UserQuota";
 
 type Role = AuthUser["role"];
 const ROLES: Role[] = ["admin", "analyst", "developer"];
@@ -55,10 +67,13 @@ export function UserEditDialog({
   user,
   self,
   users,
+  quotaDefault = null,
   onClose,
   onDone,
 }: {
   user: ServerUserUsage;
+  /** The default spend quota, named beside the "Default" choice. */
+  quotaDefault?: UserQuota | null;
   /** The account being edited is the signed-in admin's own. */
   self: boolean;
   users: ServerUserUsage[];
@@ -73,6 +88,7 @@ export function UserEditDialog({
   const [email, setEmail] = useState(user.email ?? "");
   const [role, setRole] = useState<Role>(user.role);
   const [active, setActive] = useState(!user.disabled);
+  const [hostAccount, setHostAccount] = useState(Boolean(user.hostAccount));
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [owned, setOwned] = useState<OwnedWorkspace[] | null>(null);
@@ -81,6 +97,18 @@ export function UserEditDialog({
   const [added, setAdded] = useState<number[]>([]);
   const [pick, setPick] = useState("");
   const [signOut, setSignOut] = useState(false);
+  // Spend quota: absent from an older server, which then gets no quota field.
+  const quotaSetting = user.quotaSetting;
+  const [quotaMode, setQuotaMode] = useState<UserQuotaSetting["mode"]>(
+    quotaSetting?.mode ?? "default"
+  );
+  const [quotaLimit, setQuotaLimit] = useState(
+    quotaSetting?.mode === "custom" ? String(quotaSetting.limit_usd) : ""
+  );
+  const [quotaPeriod, setQuotaPeriod] = useState<QuotaPeriod>(
+    quotaSetting?.mode === "custom" ? quotaSetting.period : (quotaDefault?.period ?? "day")
+  );
+  const quotaLabel = useQuotaLabel();
   const [current, setCurrent] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -113,16 +141,38 @@ export function UserEditDialog({
   if (norm(email) !== (user.email ?? null)) patch.email = norm(email);
   if (!self && role !== user.role) patch.role = role;
   if (!self && active === user.disabled) patch.disabled = !active;
+  if (role === "admin" && hostAccount !== Boolean(user.hostAccount)) patch.hostAccount = hostAccount;
   if (password) patch.password = password;
   if (added.length) patch.addWorkspaces = added;
   if (removed.size) patch.removeWorkspaces = [...removed];
   if (signOut) patch.signOut = true;
+  const quotaValue = parseLimit(quotaLimit);
+  const quotaBad = quotaMode === "custom" && quotaValue === null;
+  if (quotaSetting && !quotaBad) {
+    const same =
+      quotaMode === quotaSetting.mode &&
+      (quotaMode !== "custom" ||
+        (quotaSetting.mode === "custom" &&
+          quotaSetting.limit_usd === quotaValue &&
+          quotaSetting.period === quotaPeriod));
+    if (!same) {
+      patch.quota =
+        quotaMode === "custom"
+          ? {
+              mode: "custom",
+              limit_usd: quotaValue as number,
+              period: quotaPeriod,
+              tz_offset: new Date().getTimezoneOffset(),
+            }
+          : { mode: quotaMode };
+    }
+  }
   const changed = Object.keys(patch).length > 0;
   // A blank field keeps the password. Someone else's may be anything (they
   // choose their own at next sign-in); your own must pass every rule.
   const weakOwn =
     self && password.length > 0 && passwordProblems(password, user.username).length > 0;
-  const ready = changed && current.length > 0 && !weakOwn && !busy;
+  const ready = changed && current.length > 0 && !weakOwn && !quotaBad && !busy;
 
   const submit = async () => {
     if (!ready) return;
@@ -197,12 +247,12 @@ export function UserEditDialog({
         className="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border border-border bg-surface-1 shadow-xl"
       >
         <div className="flex items-start gap-3 border-b border-border px-5 py-4">
-          <span
-            aria-hidden
-            className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-accent/15 text-sm font-semibold uppercase text-accent"
-          >
-            {shown.slice(0, 2)}
-          </span>
+          <UserAvatar
+            name={shown}
+            userId={user.id}
+            avatarAt={user.avatarAt}
+            className="h-10 w-10 text-sm"
+          />
           <div className="min-w-0 flex-1">
             <h2 id="user-edit-title" className="text-base font-semibold text-fg-primary">
               {t("edit.title", { name: user.displayName || user.username })}
@@ -317,6 +367,17 @@ export function UserEditDialog({
                 )}
               </div>
             </div>
+            {role === "admin" && (
+              <div className="mt-3">
+                <Checkbox
+                  checked={hostAccount}
+                  onChange={setHostAccount}
+                  label={t("edit.hostAccount")}
+                  labelClassName="text-sm text-fg-secondary"
+                />
+                <p className="ml-6 mt-0.5 text-[11px] text-fg-muted">{t("edit.hostAccountHint")}</p>
+              </div>
+            )}
           </Section>
 
           <Section title={t("edit.password")}>
@@ -479,6 +540,44 @@ export function UserEditDialog({
             )}
           </Section>
 
+          {quotaSetting && (
+            <Section title={t("quota.title")}>
+              <div className="space-y-2" data-testid="user-edit-quota">
+                <select
+                  className="input w-full text-sm"
+                  value={quotaMode}
+                  onChange={(e) => setQuotaMode(e.target.value as UserQuotaSetting["mode"])}
+                  aria-label={t("quota.title")}
+                >
+                  <option value="default">
+                    {quotaDefault
+                      ? t("quota.modes.defaultOf", { quota: quotaLabel(quotaDefault) })
+                      : t("quota.modes.defaultNone")}
+                  </option>
+                  <option value="unlimited">{t("quota.modes.unlimited")}</option>
+                  <option value="custom">{t("quota.modes.custom")}</option>
+                </select>
+                {quotaMode === "custom" && (
+                  <QuotaFields
+                    limit={quotaLimit}
+                    period={quotaPeriod}
+                    onLimit={setQuotaLimit}
+                    onPeriod={setQuotaPeriod}
+                    onKeyDown={onKeyDown}
+                  />
+                )}
+                <span className="block text-[11px] text-fg-muted">
+                  {user.quota
+                    ? t("quota.now", {
+                        spend: fmtCost(user.quota.spend),
+                        limit: quotaLabel(user.quota),
+                      })
+                    : t("quota.enforceHint")}
+                </span>
+              </div>
+            </Section>
+          )}
+
           <Section title={t("edit.sessions")}>
             <Checkbox
               checked={signOut}

client/src/components/users/UserQuota.tsx

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

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

@@ -33,7 +33,7 @@ const accountPool = vi.hoisted(() => ({
   updateGroup: vi.fn(),
   deleteGroup: vi.fn(),
 }));
-const users = vi.hoisted(() => ({ list: vi.fn() }));
+const users = vi.hoisted(() => ({ list: vi.fn(), avatarUrl: () => null }));
 const aiTools = vi.hoisted(() => ({
   list: vi.fn(),
   ompSharing: vi.fn(),

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

@@ -13,7 +13,12 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ServerUserUsage } from "../../../lib/api";
 
-const users = vi.hoisted(() => ({ get: vi.fn(), update: vi.fn(), remove: vi.fn() }));
+const users = vi.hoisted(() => ({
+  get: vi.fn(),
+  update: vi.fn(),
+  remove: vi.fn(),
+  avatarUrl: () => null,
+}));
 const confirmDialog = vi.hoisted(() => vi.fn());
 vi.mock("../../../lib/confirm", () => ({ confirmDialog }));
 const lanes = vi.hoisted(() => ({ list: vi.fn() }));

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

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

client/src/i18n/index.ts

@@ -118,6 +118,9 @@ export const i18nReady = i18n
       "admin",
       "onboarding",
       "artifacts",
+      "gitRefs",
+      "gitTools",
+      "gitHistory",
     ],
     defaultNS: "common",
     interpolation: { escapeValue: false },

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

@@ -28,6 +28,12 @@
   "unshare": "Unshare",
   "shareDone": "Shared to the Hub",
   "unshareDone": "Removed from the Hub",
+  "reshare": "Share again",
+  "reshareDone": "New version shared — people who installed it are offered Update",
+  "reshareSame": "Already the newest version — shared",
+  "reshareAskTitle": "Choose the {{name}} folder again",
+  "reshareAskBody": "This server has no copy of {{name}}. Choose the skill's folder (the one holding SKILL.md): it replaces this version, and people who installed it are offered Update. For a .zip, upload it through Add skill → Upload: a skill with the same name updates your existing one.",
+  "resharePick": "Choose folder",
   "open": "Open",
   "copyLink": "Copy link",
   "preview": "Preview",
@@ -136,6 +142,11 @@
   "installsYou": "You",
   "installsUnknown": "A removed user",
   "installsReplaced": "replaced an older copy",
+  "versionAt": "Updated {{ago}}",
+  "versionAtFull": "Last updated {{date}}",
+  "installState.latest": "Latest",
+  "installState.outdated": "Old version",
+  "installState.removed": "Removed",
   "installsPluginWhere": "claude plugin install --scope user",
   "installsUnrecorded": "{{count}} earlier installs were counted before details were kept",
   "installsNoneOfYours": "You have not installed it — only your own installs are listed.",
@@ -179,7 +190,7 @@
   "stat.installs": "Installs",
   "stat.files": "Files",
   "stat.size": "Size",
-  "stat.updated": "Updated",
+  "stat.updated": "Last updated",
   "detail.runAs": "Run it as",
   "detail.market": "Marketplace",
   "detail.added": "Added {{date}}",

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

@@ -0,0 +1,144 @@
+{
+  "close": "Close",
+  "cancel": "Cancel",
+  "dismiss": "Dismiss",
+  "compare": "Compare",
+  "commit": "Commit",
+  "blame": "Blame",
+  "binary": "binary",
+  "running": "Working…",
+  "op.cherry-pick": "cherry-pick",
+  "op.revert": "revert",
+  "badge.local": "Branch {{name}}",
+  "badge.remote": "Remote branch {{name}}",
+  "badge.tag": "Tag {{name}}",
+  "badge.head": "HEAD (detached)",
+  "badge.current": "{{name}} — the branch you are on",
+  "searchPlaceholder": "Search message or SHA — author:name path:file",
+  "searchLabel": "Search the history",
+  "clearSearch": "Clear the search",
+  "allBranches": "All branches",
+  "noMatches": "No commit matches this search",
+  "selectCommit": "Select {{short}}",
+  "selectedN_one": "{{count}} commit selected",
+  "selectedN_other": "{{count}} commits selected",
+  "clearSelection": "Clear",
+  "mixedSelection": "Some of these are on this branch and some are not — select only one kind",
+  "mergeCommitRefused": "A merge commit can't be cherry-picked or reverted here — do it in a terminal",
+  "pickN_one": "Cherry-pick {{count}} commit onto {{branch}}",
+  "pickN_other": "Cherry-pick {{count}} commits onto {{branch}}",
+  "revertN_one": "Revert {{count}} commit",
+  "revertN_other": "Revert {{count}} commits",
+  "pickedN_one": "Cherry-picked {{count}} commit onto {{branch}}.",
+  "pickedN_other": "Cherry-picked {{count}} commits onto {{branch}}.",
+  "revertedN_one": "Reverted {{count}} commit on {{branch}}.",
+  "revertedN_other": "Reverted {{count}} commits on {{branch}}.",
+  "pausedConflicts_one": "The {{op}} stopped on {{count}} conflicted file — resolve it in Changes, then Continue",
+  "pausedConflicts_other": "The {{op}} stopped on {{count}} conflicted files — resolve them in Changes, then Continue",
+  "pausedEmpty": "The {{op}} stopped: a commit's changes are already on this branch — Skip it or Abort",
+  "undo": "Undo",
+  "undoHint": "Take these new commits back off the branch (only while they are not pushed)",
+  "undoTitle": "Undo this {{op}}?",
+  "undoBody_one": "The {{count}} new commit is removed from {{branch}}. Its changes stay staged, so nothing is lost. Refused if it was already pushed or the branch moved on.",
+  "undoBody_other": "The {{count}} new commits are removed from {{branch}}. Their changes stay staged, so nothing is lost. Refused if they were already pushed or the branch moved on.",
+  "undone_one": "Undone — {{count}} commit taken back, its changes are staged",
+  "undone_other": "Undone — {{count}} commits taken back, their changes are staged",
+  "showDetails": "Show details",
+  "browseFiles": "Browse files at this commit",
+  "compareWithCurrent": "Compare with current",
+  "copyPatch": "Copy patch",
+  "noPatch": "No patch for this commit",
+  "patchOmitted_one": "{{count}} file holding secrets was left out of the patch",
+  "patchOmitted_other": "{{count}} files holding secrets were left out of the patch",
+  "createBranchHere": "Create branch here…",
+  "detailsTitle": "Commit details",
+  "noDetails": "Could not read this commit",
+  "author": "Author",
+  "committer": "Committer",
+  "parents_one": "Parent",
+  "parents_other": "Parents",
+  "rootCommit": "none (first commit)",
+  "refs": "Refs",
+  "containedIn": "In",
+  "viewAllChanges": "View all changes",
+  "filesChanged_one": "{{count}} file changed",
+  "filesChanged_other": "{{count}} files changed",
+  "planning": "Working out the order…",
+  "planUnavailable": "This folder is not a git repository",
+  "pickTitle_one": "Cherry-pick {{count}} commit onto {{branch}}?",
+  "pickTitle_other": "Cherry-pick {{count}} commits onto {{branch}}?",
+  "revertTitle_one": "Revert {{count}} commit?",
+  "revertTitle_other": "Revert {{count}} commits?",
+  "pickIntro_one": "This commit is applied to {{branch}} as a new commit:",
+  "pickIntro_other": "These commits are applied to {{branch}} one by one, in this order, each as a new commit:",
+  "revertIntro_one": "A new commit that undoes this one is added to {{branch}}:",
+  "revertIntro_other": "A new commit undoing each of these is added to {{branch}}, newest first, in this order:",
+  "treeClean": "The working tree is clean.",
+  "blockDirty": "The working tree has uncommitted changes. Commit or discard them first, so an Abort can never take them with it.",
+  "blockSubdir": "This workspace is a subfolder of its repository; a cherry-pick or revert changes the whole repository, so run it from a workspace at the repo root.",
+  "blockBusy": "A merge, cherry-pick, revert or rebase is already in progress. Finish or abort it first.",
+  "pickResult": "Files in this workspace change right away. The original commits are not touched.",
+  "revertResult": "History is not rewritten: the reverted commits stay, and new commits undo them.",
+  "onConflict": "If a commit conflicts, the {{op}} pauses there: resolve the files in Changes, then Continue — or Skip that commit, or Abort to go back to exactly where you are now.",
+  "pausedAt": "{{op}} paused at {{short}} \"{{subject}}\" ({{step}} of {{total}}):",
+  "pausedBetween": "{{op}} paused ({{step}} of {{total}}):",
+  "pausedHelpConflicts_one": "resolve the conflicted file, then Continue — or Skip this commit, or Abort to go back to where you were.",
+  "pausedHelpConflicts_other": "resolve the {{count}} conflicted files, then Continue — or Skip this commit, or Abort to go back to where you were.",
+  "pausedHelpReady": "every conflict is resolved — Continue to commit it and go on, or Skip this commit, or Abort to go back to where you were.",
+  "pausedHelpResume": "Continue with the remaining commits, or Abort to go back to where you were.",
+  "stillToApply_one": "Still to apply: {{list}}",
+  "stillToApply_other": "Still to apply ({{count}}): {{list}}",
+  "continue": "Continue",
+  "continueBlocked": "Resolve every conflicted file first",
+  "skip": "Skip this commit",
+  "skipHint": "Drop this commit (and any resolution made for it) and go on with the next",
+  "skipConfirm": "Click again to skip",
+  "abort": "Abort",
+  "abortHint": "Stop and put the branch back exactly where it was before",
+  "abortConfirm": "Click again to abort the {{op}}",
+  "aborted": "{{op}} aborted — the branch is back where it was",
+  "sequenceDone_one": "{{op}} finished",
+  "sequenceDone_other": "{{op}} finished",
+  "status.A": "Added",
+  "status.M": "Modified",
+  "status.D": "Deleted",
+  "status.R": "Renamed",
+  "status.C": "Copied",
+  "renamedFrom": "renamed from {{from}}",
+  "noBlame": "No history to blame for this file",
+  "blameTitle": "Blame {{path}}",
+  "workingTree": "working tree",
+  "blameBefore": "Blame the version before this change",
+  "notCommitted": "not committed yet",
+  "browseTitle": "Files at {{short}}",
+  "pickAFile": "Pick a file on the left",
+  "binaryFile": "Binary file — not shown",
+  "compareTitle": "Compare",
+  "compareUnavailable": "This folder is not a git repository",
+  "compareA": "From (branch, tag or commit)",
+  "compareB": "To (branch, tag or commit)",
+  "swap": "Swap the two sides",
+  "modeThree": "Changes since they diverged (A...B)",
+  "modeTwo": "Difference between the two (A B)",
+  "tabFiles_one": "{{count}} file",
+  "tabFiles_other": "{{count}} files",
+  "tabOnly_one": "Only in {{name}} ({{count}})",
+  "tabOnly_other": "Only in {{name}} ({{count}})",
+  "noDifference": "No file differs",
+  "noCommitsSide": "No commit only on this side",
+  "backToFiles": "Back to the files",
+  "secretFile": "This file holds secrets and is not shown",
+  "noTextChange": "No text change to show (binary, or a mode change)",
+  "createBranchTitle": "New branch at {{short}}",
+  "createBranch": "Create branch",
+  "branchName": "Branch name",
+  "createBranchHint": "The branch is created at this commit; you stay on the branch you are on.",
+  "branchCreated": "Created branch {{branch}} at {{short}}",
+  "createTagHere": "Create tag here…",
+  "createTagTitle": "New tag at {{short}}",
+  "createTag": "Create tag",
+  "tagName": "Tag name",
+  "tagMessage": "Message (optional — makes an annotated tag)",
+  "createTagHint": "The tag stays on this machine until you push it from the Branches panel.",
+  "tagCreated": "Created tag {{name}} at {{short}}"
+}

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

@@ -0,0 +1,76 @@
+{
+  "openPanel": "Manage branches & tags",
+  "openPanelHint": "Manage branches & tags: rename, new branch from any commit or tag, upstream, merge, delete, tags",
+  "title": "Branches and tags",
+  "branches": "Branches",
+  "tags": "Tags",
+  "close": "Close",
+  "searchBranches": "Search branches",
+  "searchTags": "Search tags",
+  "loading": "Loading…",
+  "unavailable": "This folder is not a git repository.",
+  "local": "Local",
+  "remote": "Remote · {{remote}}",
+  "noMatch": "No branch matches.",
+  "truncated": "Only the first 1000 of each are shown.",
+  "merging": "A merge, cherry-pick or revert is in progress: finish or abort it before changing branches or tags.",
+  "current": "current",
+  "protected": "protected",
+  "worktree": "worktree",
+  "gone": "upstream gone",
+  "ahead": "ahead",
+  "behind": "behind",
+  "inSync": "in sync",
+  "newFrom": "New branch from here",
+  "newBranchName": "New branch name",
+  "switchToIt": "Switch to it",
+  "switchDirty": "Commit or discard your changes to switch.",
+  "create": "Create",
+  "rename": "Rename",
+  "renameHint": "Rename this branch (its upstream setting moves with it)",
+  "renameTo": "New name",
+  "setUpstream": "Set upstream",
+  "upstreamHint": "Track a remote branch: ahead/behind, pull and push follow it",
+  "pickUpstream": "Pick a remote branch",
+  "noRemoteBranches": "No remote branches fetched yet",
+  "unsetUpstream": "Unset upstream",
+  "apply": "Apply",
+  "merge": "Merge",
+  "mergeInto": "Merge into {{current}}",
+  "mergeHint": "Merge this branch into {{current}} (a clean tree is needed)",
+  "mergeConfirm": "Merge {{branch}} into {{current}}? If it conflicts, you resolve it in the Changes panel or abort it.",
+  "delete": "Delete",
+  "deleteHint": "Delete this local branch (git branch -d)",
+  "deleteConfirm": "Delete the local branch {{branch}}? It is fully merged, so no commit is lost.",
+  "deleteUnmerged": "Delete the local branch {{branch}}? It is not merged into the current branch, so git will refuse unless its upstream has every commit.",
+  "why.current": "You are on this branch, so it cannot be deleted.",
+  "why.protected": "Protected branch: it cannot be renamed or deleted here.",
+  "why.worktree": "Checked out in another worktree: {{path}}",
+  "why.unmerged": "Not merged into the current branch: git refuses to delete it unless its upstream has every commit.",
+  "errLogin": "The remote wants a login. Use Fetch or Push on the git bar once to sign in (tick Remember), then try again.",
+  "errSubdir": "Branches and tags belong to the whole repository: do this from a workspace at the repository root.",
+  "tagNew": "New tag",
+  "tagName": "Tag name, e.g. v1.2.0",
+  "tagFrom": "On (branch, tag or commit sha) — empty for HEAD",
+  "tagMessage": "Message (optional — makes an annotated tag)",
+  "tagCreateLight": "Create tag",
+  "tagCreateAnnotated": "Create annotated tag",
+  "cancel": "Cancel",
+  "noTags": "No tags.",
+  "annotated": "annotated",
+  "tagPush": "Push to origin",
+  "tagPushHint": "Push only this tag (never --tags, never forced)",
+  "tagPushConfirm": "Push the tag {{tag}} to the remote?",
+  "tagDelete": "Delete tag",
+  "tagDeleteHint": "Delete this tag on this machine only",
+  "tagDeleteConfirm": "Delete the local tag {{tag}}? This cannot be undone here; a copy already pushed stays on the remote.",
+  "done.create": "Created branch {{branch}}",
+  "done.rename": "Renamed to {{branch}}",
+  "done.setUpstream": "Now tracking {{upstream}}",
+  "done.unsetUpstream": "Upstream removed",
+  "done.merge": "Merged {{branch}}",
+  "done.delete": "Deleted branch {{branch}}",
+  "done.tagCreate": "Created tag {{tag}}",
+  "done.tagPush": "Pushed tag {{tag}}",
+  "done.tagDelete": "Deleted tag {{tag}}"
+}

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

@@ -0,0 +1,164 @@
+{
+  "close": "Close",
+  "cancel": "Cancel",
+  "loading": "Loading…",
+  "pushed": "pushed",
+  "forceAck": "I understand: the branch will need a force-push afterwards",
+  "rewrites_one": "This rewrites {{count}} commit.",
+  "rewrites_other": "This rewrites {{count}} commits.",
+  "rewritesPushed_one": "This rewrites {{count}} commit; {{pushed}} already pushed, so a force-push will be needed.",
+  "rewritesPushed_other": "This rewrites {{count}} commits; {{pushed}} are already pushed, so a force-push will be needed.",
+  "doneTitle": "Done.",
+  "needsForcePushAfter": "Commits that were already pushed were rewritten: push with Force push (with lease) when you are sure.",
+  "undo": "Undo",
+  "undoConfirm": "Click again to undo",
+  "undoHint": "Puts the branch back at {{sha}} (local changes are kept).",
+  "undone": "Undone: the branch is back where it was",
+  "blocked.subdir": "This changes the whole branch, so it only runs from a workspace at the repository root.",
+  "blocked.operation": "A {{op}} is in progress: finish or abort it first.",
+  "blocked.dirty": "Commit or discard your uncommitted changes first.",
+
+  "menu.label": "History tools",
+  "menu.rebase": "Rebase onto…",
+  "menu.interactive": "Edit unpushed commits…",
+  "menu.reflog": "Reflog",
+  "menu.forcePush": "Force push (with lease)…",
+  "menu.remotes": "Remotes…",
+  "menu.resetHere": "Reset branch to here…",
+  "menu.interactiveHere": "Edit commits after this one…",
+
+  "merge.open": "Merge editor",
+  "merge.title": "Merge editor — {{path}}",
+  "merge.incoming": "Incoming: {{ref}}",
+  "merge.incomingRebase": "Incoming (commit being replayed): {{ref}}",
+  "merge.incomingPlain": "Incoming",
+  "merge.current": "Current: {{branch}}",
+  "merge.currentRebase": "Current (the branch you are rebasing onto)",
+  "merge.base": "Common base",
+  "merge.result": "Result",
+  "merge.sideGone": "Deleted on this side",
+  "merge.blockOf": "Conflict {{n}} of {{total}}",
+  "merge.acceptCurrent": "Accept current",
+  "merge.acceptIncoming": "Accept incoming",
+  "merge.bothCurrentFirst": "Both (current first)",
+  "merge.bothIncomingFirst": "Both (incoming first)",
+  "merge.editBlock": "Edit",
+  "merge.editDone": "Done",
+  "merge.undoChoice": "Undo",
+  "merge.left_one": "{{count}} of {{total}} conflicts left",
+  "merge.left_other": "{{count}} of {{total}} conflicts left",
+  "merge.allChosen": "Every conflict has a choice",
+  "merge.wholeMode": "Editing the whole result",
+  "merge.prev": "Previous conflict",
+  "merge.next": "Next conflict",
+  "merge.showBase": "Show base",
+  "merge.editWhole": "Edit whole result",
+  "merge.backToBlocks": "Back to conflicts",
+  "merge.save": "Save result",
+  "merge.saved": "{{path}} resolved",
+  "merge.markersLeft": "The result still has conflict markers (<<<<<<< ======= >>>>>>>): resolve every block first.",
+  "merge.stale": "The file changed on disk since it was opened. Close and open it again.",
+  "merge.binary": "This file is binary: take a whole side from the conflict view.",
+  "merge.tooBig": "This file is too large for the merge editor: take a whole side or edit it in a terminal.",
+  "merge.noWorking": "One side deleted this file: keep or delete it with Keep mine / Take theirs.",
+  "merge.unbalanced": "The conflict markers in this file are unbalanced: edit it by hand.",
+
+  "reflog.title": "Reflog",
+  "reflog.of": "Where the branch has been:",
+  "reflog.hint": "Every place HEAD or the branch pointed at, newest first. A commit you lost to a reset or a rebase is still here: Reset here brings it back.",
+  "reflog.empty": "Nothing recorded yet.",
+  "reflog.resetHere": "Reset here…",
+  "reflog.more": "Show more",
+
+  "rebase.title": "Rebase {{branch}} onto…",
+  "rebase.onto": "Branch to rebase onto",
+  "rebase.pick": "Pick a branch",
+  "rebase.explain": "Your branch's own commits are replayed one by one on top of the branch you pick. If a commit conflicts, the rebase stops and the Changes panel offers Continue, Skip and Abort.",
+  "rebase.nothing": "Nothing to replay: this branch has no commit that {{onto}} lacks.",
+  "rebase.summary_one": "{{count}} commit will be replayed onto {{onto}} ({{behind}} new commit(s) there).",
+  "rebase.summary_other": "{{count}} commits will be replayed onto {{onto}} ({{behind}} new commit(s) there).",
+  "rebase.run": "Rebase",
+  "rebase.done": "Rebased onto {{onto}}",
+  "rebase.stopped_one": "The rebase stopped: {{count}} file is in conflict. Resolve it, then Continue.",
+  "rebase.stopped_other": "The rebase stopped: {{count}} files are in conflict. Resolve them, then Continue.",
+
+  "rebaseBanner.skip": "Skip commit",
+  "rebaseBanner.skipHint": "Drop the commit the rebase stopped on and go on with the next one",
+  "rebaseBanner.finished": "Rebase finished",
+
+  "interactive.title": "Edit commits",
+  "interactive.explain": "Reorder with the arrows, and choose per commit: keep it, reword its message, squash or fixup it into the commit above, or drop it. Nothing changes until you press Rewrite.",
+  "interactive.merges": "This range contains a merge commit; rewrite it in a terminal instead.",
+  "interactive.nothing": "No unpushed commits to edit.",
+  "interactive.action": "What to do with {{short}}",
+  "interactive.actions.pick": "Keep",
+  "interactive.actions.reword": "Reword",
+  "interactive.actions.squash": "Squash into above",
+  "interactive.actions.fixup": "Fixup into above (drop message)",
+  "interactive.actions.drop": "Drop",
+  "interactive.up": "Move up",
+  "interactive.down": "Move down",
+  "interactive.message": "Commit message",
+  "interactive.squashHint": "Leave empty to join both messages",
+  "interactive.problem.first": "The first kept commit cannot be squashed: there is nothing above it.",
+  "interactive.problem.allDropped": "Every commit is dropped: use Reset branch to here instead.",
+  "interactive.problem.reword": "A reworded commit needs a message.",
+  "interactive.run": "Rewrite",
+  "interactive.runConfirm": "Click again to rewrite",
+  "interactive.done": "Commits rewritten",
+
+  "reset.title": "Reset {{branch}} to {{short}}",
+  "reset.summary": "{{dropped}} commit(s) leave {{branch}} and {{added}} join it.",
+  "reset.already": "The branch is already at this commit.",
+  "reset.unrelated": "This commit is not on this branch's line of history, so the branch cannot be reset to it here.",
+  "reset.mode": "What happens to your files",
+  "reset.modes.soft": "Soft",
+  "reset.modes.mixed": "Mixed",
+  "reset.modes.keep": "Keep",
+  "reset.modes.hard": "Hard",
+  "reset.modesHelp.soft": "Only the branch moves; the changes of the removed commits stay staged.",
+  "reset.modesHelp.mixed": "The branch moves; those changes stay in your files, unstaged.",
+  "reset.modesHelp.keep": "Files change to the commit, but git refuses if that would overwrite a change you have not committed.",
+  "reset.modesHelp.hard": "Files change to the commit exactly. Only on a clean tree, so nothing uncommitted is lost.",
+  "reset.hardDirty": "Hard reset runs only when there are no uncommitted changes. Use Keep, or commit/discard first.",
+  "reset.typeBranch": "Type the branch name ({{branch}}) to confirm",
+  "reset.pushed_one": "{{count}} of the commits leaving the branch is already pushed, so a force-push will be needed.",
+  "reset.pushed_other": "{{count}} of the commits leaving the branch are already pushed, so a force-push will be needed.",
+  "reset.run": "Reset ({{mode}})",
+  "reset.done": "Branch reset to {{short}}",
+
+  "forcePush.title": "Force push (with lease)",
+  "forcePush.where": "Pushes {{branch}} to {{remote}}/{{remoteBranch}}, replacing what is there.",
+  "forcePush.replaces": "It replaces {{sha}} on the remote (your branch is {{ahead}} ahead, {{behind}} behind it).",
+  "forcePush.newBranch": "The remote does not have this branch yet.",
+  "forcePush.dropsRemote_one": "{{count}} commit on the remote is not in your branch and will be gone from it.",
+  "forcePush.dropsRemote_other": "{{count}} commits on the remote are not in your branch and will be gone from it.",
+  "forcePush.protected": "This is a protected branch (main, master, develop…): force-pushing it is turned off on this server.",
+  "forcePush.lease": "With lease: the push is refused if someone pushed to the remote branch since your last fetch.",
+  "forcePush.run": "Force push",
+  "forcePush.runConfirm": "Click again to force push",
+  "forcePush.done": "Force-pushed to {{remote}}/{{branch}}",
+  "forcePush.stale": "The remote branch changed since your last fetch. Fetch, look at what is there, then try again.",
+
+  "remotes.title": "Remotes",
+  "remotes.none": "This repository has no remote.",
+  "remotes.default": "Default branch: {{branch}}",
+  "remotes.rename": "Rename",
+  "remotes.newName": "New name",
+  "remotes.remove": "Remove",
+  "remotes.removeConfirm": "Click again to remove",
+  "remotes.branches_one": "{{count}} branch",
+  "remotes.branches_other": "{{count}} branches",
+  "remotes.deleteBranch": "Delete on remote",
+  "remotes.deleteBranchConfirm": "Click again to delete",
+  "remotes.branchLocked": "The default branch and main/master/develop cannot be deleted here",
+  "remotes.add": "Add a remote",
+  "remotes.name": "Name",
+  "remotes.url": "URL",
+  "remotes.urlHint": "https:// (without a login in it), ssh:// or user@host:path.",
+  "remotes.addButton": "Add",
+  "remotes.added": "Remote {{name}} added",
+  "remotes.renamed": "Remote {{from}} renamed to {{to}}",
+  "remotes.removed": "Remote {{name}} removed",
+  "remotes.branchDeleted": "{{ref}} deleted on the remote"
+}

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

@@ -92,6 +92,7 @@
   "changes.expandFile": "Expand {{path}}",
   "changes.fileGone": "That file no longer has changes in this range.",
   "changes.fileTruncated": "Diff cut short — open the file in an editor for the rest.",
+  "changes.lineElided": "… {{size}} more characters on this line",
   "changes.commentLine": "Comment on line {{n}} — pasted into this workspace's pane",
   "changes.commentOn": "Comment on {{at}} — pasted into the pane you used last; nothing is sent until you press Enter there",
   "changes.commentSend": "Paste into pane",
@@ -195,7 +196,8 @@
   "gitBar.switch": "Branch",
   "gitBar.switchApply": "Switch branch",
   "gitBar.switchCurrent": "current",
-  "gitBar.switchDirty": "Commit or discard the uncommitted changes first",
+  "gitBar.remoteBranches": "On the remote — switching creates the local branch",
+  "gitBar.switchDirty": "Commit, discard or shelve the uncommitted changes first",
   "gitBar.switchHint": "Switch this worktree to another local branch",
   "gitBar.switchLabel": "Switch branch…",
   "gitBar.unbornHint": "Commit first, then publish this repo to a remote.",
@@ -213,7 +215,6 @@
   "clone.parentHint": "The repository is cloned to {{path}}",
   "clone.nameLabel": "Folder name",
   "clone.cloning": "Cloning…",
-  "clone.background": "Run in background",
   "clone.loginNeeded": "{{host}} needs a login: your username and a password or access token.",
   "clone.loginRejected": "{{host}} rejected that username or token.",
   "clone.username": "Username",
@@ -230,6 +231,41 @@
   "clone.phase.resolving": "Unpacking",
   "clone.phase.checkout": "Writing files",
   "clone.sshNoKey": "Not cloned: your account has no SSH key yet. Make one in Settings → Git, add its public key to {{host}}, then retry.",
+  "cloneJobs.backgroundHint": "The clone runs in the background: follow it in the corner of the screen, on any page — even after a reload.",
+  "cloneJobs.starting": "Starting…",
+  "cloneJobs.started": "Started — progress is in the corner of the screen.",
+  "cloneJobs.cloning": "Cloning {{name}}",
+  "cloneJobs.queued": "Waiting in the clone queue — #{{position}}",
+  "cloneJobs.done": "Cloned {{name}}",
+  "cloneJobs.failedTitle": "Could not clone {{name}}",
+  "cloneJobs.cancelledTitle": "Stopped cloning {{name}}",
+  "cloneJobs.failed": "The clone failed.",
+  "cloneJobs.interrupted": "AgentHub restarted while this clone was running.",
+  "cloneJobs.cancelled": "You stopped this clone.",
+  "cloneJobs.cancelledToast": "Stopped cloning {{name}}.",
+  "cloneJobs.failedToast": "Could not clone {{name}}: {{message}}",
+  "cloneJobs.doneWorkspace": "Cloned {{name}} into {{path}} — opened as workspace “{{workspace}}”.",
+  "cloneJobs.doneSource": "Cloned {{name}} into {{path}} and added it to the workspace.",
+  "cloneJobs.openWorkspace": "Open workspace",
+  "cloneJobs.open": "Open",
+  "cloneJobs.retry": "Retry",
+  "cloneJobs.retryLogin": "Retry with this login",
+  "cloneJobs.stop": "Stop clone",
+  "cloneJobs.stopConfirm": "Click again to stop",
+  "cloneJobs.stopUnsupported": "This AgentHub server cannot stop a clone yet — update it, or wait for the clone to finish.",
+  "cloneJobs.dismiss": "Dismiss",
+  "jobs.dock": "Background tasks",
+  "jobs.count_one": "{{count}} background task",
+  "jobs.count_other": "{{count}} background tasks",
+  "jobs.running_one": "{{count}} running",
+  "jobs.running_other": "{{count}} running",
+  "jobs.expand": "Show background tasks",
+  "uploads.stop": "Stop upload",
+  "uploads.stopConfirm": "Click again to stop",
+  "uploads.stopping": "Stopping…",
+  "uploads.stopped_one": "Upload stopped — {{count}} of {{total}} file sent.",
+  "uploads.stopped_other": "Upload stopped — {{count}} of {{total}} files sent.",
+  "uploads.interrupted": "The upload of {{total}} file(s) to {{folder}} was interrupted by a page reload — {{done}} sent.",
   "moreActions": "More actions",
   "pipelinePicker.label": "Pipeline template",
   "pipelinePicker.stageMismatch": "Stage \"{{stage}}\" matches no node in \"{{pipeline}}\" — declare one of: {{nodes}}",
@@ -341,6 +377,7 @@
   "changes.takeTheirsHint": "Take the incoming version of the whole file",
   "row.actions": "Workspace actions",
   "row.hint": "Double-click to rename · drag or Alt+↑/↓ to reorder · right-click for actions",
+  "row.folderMissing": "Folder deleted — remove this workspace from its ⋯ menu",
   "menu.rename": "Rename",
   "menu.newHere": "New workspace here…",
   "menu.copyPath": "Copy path",
@@ -504,8 +541,6 @@
   "changes.loadMore": "Load more commits",
   "changes.commentPasted": "Pasted into tab {{tab}} — press Enter there to send it",
   "changes.splitter": "Resize the changes panel",
-  "tree.archiveLiveTitle": "Archive a live session?",
-  "tree.archiveLiveBody": "Its tab keeps running; archiving only hides it from this list. Unarchive it from the archived fold.",
   "tree.state.awaiting": "waiting for you",
   "tree.state.error": "error",
   "tree.state.live": "live",
@@ -532,9 +567,11 @@
   "changes.unversionedGroup": "Unversioned Files",
   "changes.commitTicked": "Commit ({{count}})",
   "changes.commitAndPush": "Commit and Push",
-  "changes.discardAll": "Discard all",
-  "changes.discardAllTitle": "Discard all changes?",
-  "changes.discardAllConfirm": "Every change in {{count}} file(s) goes back to the last commit, and {{untracked}} new file(s) git does not track yet are deleted. This cannot be undone.",
+  "changes.discardTicked": "Discard ({{count}})",
+  "changes.discardTickedTitle": "Discard the ticked changes?",
+  "changes.discardTickedConfirm": "The ticked changes in {{count}} file(s) go back to the last commit, and {{untracked}} ticked new file(s) git does not track yet are deleted. Unticked files and blocks are kept. This cannot be undone.",
+  "changes.discardTickedConfirmTracked": "The ticked changes in {{count}} file(s) go back to the last commit. Unticked files and blocks are kept. This cannot be undone.",
+  "changes.discardTickedConfirmNew": "{{untracked}} ticked new file(s) git does not track yet are deleted. Unticked files are kept. This cannot be undone.",
   "changes.amendAndPush": "Amend and Push",
   "changes.pushFailed": "Committed, but the push failed: {{error}}",
   "changes.tickFile": "Include {{path}} in the commit",
@@ -567,7 +604,6 @@
   "fx.newFile": "New file",
   "fx.cloneRepo": "Clone repository",
   "fx.cloneSubmit": "Clone",
-  "fx.cloned": "Cloned into {{path}} — opened as workspace “{{workspace}}”.",
   "fx.uploadFiles": "Upload files",
   "fx.uploadFolder": "Upload a folder",
   "fx.download": "Download",
@@ -590,6 +626,7 @@
   "fx.dropHint": "Drag files or folders here to upload · drag onto a folder to move (Ctrl: copy)",
   "fx.uploading": "Uploading {{done}}/{{total}}…",
   "fx.uploaded": "Uploaded {{count}} file(s).",
+  "fx.gitSkipped": "Skipped {{count}} file(s) inside .git — nothing is uploaded into .git.",
   "fx.uploadFailed": "Could not upload {{name}}: {{message}}",
   "fx.tooBig": "{{size}} is more than one upload may carry ({{max}}). Upload fewer files at a time.",
   "fx.trashed": "Moved {{count}} item(s) to the Trash.",
@@ -675,5 +712,38 @@
   "menu.newGroupWith": "New group…",
   "tree.groupAddWorkspace": "New workspace in this group…",
   "tree.groupFoldAll": "Fold all groups",
-  "tree.groupUnfoldAll": "Unfold all groups"
+  "tree.groupUnfoldAll": "Unfold all groups",
+  "gitBar.switchDirtyHint": "{{count}} uncommitted file(s): you will be asked whether to bring them along or shelve them",
+  "gitBar.choiceTitle": "Switch to {{branch}}",
+  "gitBar.choiceMessage": "You have {{count}} uncommitted file(s). Switch to {{branch}} and…",
+  "gitBar.choiceCarry": "Bring my changes",
+  "gitBar.choiceCarryHint": "Switch and keep the uncommitted changes in the working tree (git refuses if a file would be overwritten)",
+  "gitBar.choiceShelve": "Shelve and switch",
+  "gitBar.choiceShelveHint": "Set the changes aside on a shelf, then switch; restore them later from Shelves",
+  "gitBar.carryConflict": "Your changes cannot come along to {{branch}}: git would overwrite these files. Shelve them instead?",
+  "gitBar.branchCreateSwitch": "Create & switch",
+  "gitBar.branchCreateSwitchHint": "Create this branch and switch to it; uncommitted changes come along",
+  "gitBar.shelvedOn": "Your changes on {{branch}} are on a shelf",
+  "gitBar.restoreOfferTitle": "Restore shelved changes?",
+  "gitBar.restoreOffer": "{{branch}} has {{count}} shelf/shelves. Restore the newest ({{files}} file(s)) now?",
+  "shelves.title": "Shelves ({{count}})",
+  "shelves.files": "{{count}} file(s)",
+  "shelves.restore": "Restore",
+  "shelves.restoreHint": "Put these changes back (needs a clean working tree); the shelf is deleted once it applies cleanly",
+  "shelves.delete": "Delete",
+  "shelves.deleteConfirm": "Delete for good?",
+  "shelves.deleteHint": "Delete this shelf and the changes in it (two clicks)",
+  "shelves.deleted": "Shelf deleted",
+  "shelves.restored": "Shelved changes restored",
+  "shelves.restoredConflicts": "Restored with {{count}} conflicted file(s): resolve them in the list. The shelf is kept until you delete it.",
+  "shelves.restoreDirty": "Commit, discard or shelve the current changes before restoring a shelf",
+  "shelves.shelveTicked": "Shelve ({{count}})",
+  "shelves.shelveHint": "Set the ticked files aside on a shelf and clean them from the working tree",
+  "shelves.shelveApply": "Shelve {{count}} file(s)",
+  "shelves.notePlaceholder": "Note for this shelf (optional)…",
+  "shelves.cancel": "Cancel",
+  "shelves.shelved": "{{count}} file(s) shelved",
+  "shelves.agentTitle": "An agent is working here",
+  "shelves.agentMessage": "An agent in this workspace is working right now. This moves files under it, and it may get confused or overwrite them. Continue anyway?",
+  "shelves.agentConfirm": "Continue"
 }

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

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

@@ -911,11 +911,13 @@
     "awsSub": "RSA 4096 key — AWS accepts only RSA",
     "stepCopy": "Copy the public key.",
     "awsStepUpload": "In the AWS console: IAM → Users → your user → Security credentials → SSH public keys for AWS CodeCommit → Upload SSH public key, and paste it.",
-    "awsStepKeyId": "AWS then shows an SSH key ID (it starts with APKA). Paste it here and pick the region of your repositories:",
+    "awsStepKeyId": "AWS then shows an SSH key ID (it starts with APKA). Paste it here — one key ID works in every region:",
     "awsKeyId": "SSH key ID",
-    "awsRegion": "Region",
     "awsSave": "Save",
-    "awsSaved": "SSH key ID saved for {{region}}",
+    "awsSavedAll": "SSH key ID saved for every region",
+    "awsSavedNamed": "SSH key ID saved for {{name}}",
+    "awsAllRegions": "Every region",
+    "awsUseAll": "Use in every region",
     "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",
@@ -929,7 +931,7 @@
     "alias": "Account name",
     "aliasPlaceholder": "name (optional)",
     "aliasHint": "Leave empty for the default account of this host. Give a name (e.g. aws-prod, lowercase, no dot) for one more account: clone it as ssh://<name>/…",
-    "awsMany": "Several AWS accounts? Add another key for each — it is made at once — upload it to that account, then save its SSH key ID in that key’s step 3 (the account name is the key’s unless you type one). Clone each with ssh://<account name>/v1/repos/<repo>.",
+    "awsMany": "Several AWS accounts? Add another key for each — it is made at once — upload it to that account, then save its SSH key ID in that key’s step 3. Clone with the URL AWS gives you as usual: AgentHub tries each saved account until one can open the repository.",
     "tabGit": "GitHub · GitLab",
     "tabOther": "Other hosts",
     "addKey": "Add another key",
@@ -1396,6 +1398,7 @@
     "noActive": "{{tool}} holds no login on this machine.",
     "noProfiles": "Could not load the profiles.",
     "switchSuccess": "Switched {{tool}} to \"{{name}}\". Start a new session to use it.",
+    "switchFollowing": "Switched {{tool}} to \"{{name}}\" — running sessions follow it.",
     "deleteConfirmBody": "This removes the saved {{tool}} login. To use it again, sign in from a terminal and save it once more.",
     "loginHint": "Add another {{tool}} login by signing in from a terminal first:",
     "subtitle": {

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

@@ -79,6 +79,7 @@
     "EBADUSER": "Username: letters, digits, '.', '_' or '-' (up to 64).",
     "EBADPASSWORD": "Password cannot be empty.",
     "EBADEMAIL": "That email address does not look valid.",
+    "ENAMETAKEN": "Another account already uses that name. Pick one that is yours.",
     "EBADFIELD": "One of the values is not valid.",
     "ENOLANE": "That workspace no longer exists.",
     "ENOTOWNED": "That workspace is not this user's any more.",
@@ -87,7 +88,8 @@
     "ELOCALMODE": "Accounts are managed in server mode only.",
     "ELASTADMIN": "The last admin cannot be deleted, demoted or disabled.",
     "EWEAKPASSWORD": "The new password does not meet every rule (or is the current one).",
-    "EPWCHANGE": "Choose your own password first."
+    "EPWCHANGE": "Choose your own password first.",
+    "EBADQUOTA": "Enter a positive dollar limit and a period of a day or 5 hours."
   },
   "readOnly": "Analysts can view accounts but not change them.",
   "auditTitle": "Audit log",
@@ -110,6 +112,8 @@
     "status": "Status",
     "active": "Active",
     "statusHint": "A disabled user cannot sign in; their workspaces and history stay.",
+    "hostAccount": "Owns this server's host account",
+    "hostAccountHint": "Sessions run as the server's own Linux account outside every workspace (a script's claude -p, a CLI in a plain terminal) count toward this admin's spend. At most one admin; with none marked, the only admin.",
     "selfRole": "You cannot change your own role.",
     "selfDisable": "You cannot disable yourself.",
     "password": "Password",
@@ -412,5 +416,37 @@
   "spendSub": "7 d {{week}} · 30 d {{month}}",
   "sessionsN": "{{n}} sessions",
   "workspacesN": "{{n}} workspaces",
-  "tmuxCol": "tmux"
+  "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/artifacts.json

@@ -28,6 +28,12 @@
   "unshare": "Bỏ chia sẻ",
   "shareDone": "Đã chia sẻ lên Hub",
   "unshareDone": "Đã gỡ khỏi Hub",
+  "reshare": "Share lại",
+  "reshareDone": "Đã share bản mới — người đã cài sẽ thấy nút Cập nhật",
+  "reshareSame": "Đã là bản mới nhất — đã share",
+  "reshareAskTitle": "Chọn lại thư mục {{name}}",
+  "reshareAskBody": "Server không có bản của {{name}}. Chọn thư mục của skill (thư mục chứa SKILL.md): bản này sẽ được thay, và người đã cài sẽ thấy nút Cập nhật. Với file .zip, tải lên qua Thêm skill → Tải lên: skill trùng tên sẽ cập nhật mục bạn đã có.",
+  "resharePick": "Chọn thư mục",
   "open": "Mở",
   "copyLink": "Sao chép link",
   "preview": "Xem",
@@ -137,6 +143,11 @@
   "installsYou": "Bạn",
   "installsUnknown": "Người dùng đã xoá",
   "installsReplaced": "thay bản cũ",
+  "versionAt": "Cập nhật {{ago}}",
+  "versionAtFull": "Cập nhật lần cuối {{date}}",
+  "installState.latest": "Bản mới nhất",
+  "installState.outdated": "Bản cũ",
+  "installState.removed": "Đã gỡ",
   "installsPluginWhere": "claude plugin install --scope user",
   "installsUnrecorded": "{{count}} lượt cài trước đây chỉ được đếm, không lưu chi tiết",
   "installsNoneOfYours": "Bạn chưa cài — chỉ hiện các lượt cài của bạn.",
@@ -180,7 +191,7 @@
   "stat.installs": "Lượt cài",
   "stat.files": "File",
   "stat.size": "Dung lượng",
-  "stat.updated": "Cập nhật",
+  "stat.updated": "Cập nhật lần cuối",
   "detail.runAs": "Gọi bằng",
   "detail.market": "Marketplace",
   "detail.added": "Thêm lúc {{date}}",

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

@@ -0,0 +1,124 @@
+{
+  "close": "Đóng",
+  "cancel": "Hủy",
+  "dismiss": "Ẩn",
+  "compare": "So sánh",
+  "commit": "Commit",
+  "blame": "Blame",
+  "binary": "nhị phân",
+  "running": "Đang chạy…",
+  "op.cherry-pick": "cherry-pick",
+  "op.revert": "revert",
+  "badge.local": "Nhánh {{name}}",
+  "badge.remote": "Nhánh remote {{name}}",
+  "badge.tag": "Tag {{name}}",
+  "badge.head": "HEAD (không ở nhánh nào)",
+  "badge.current": "{{name}} — nhánh bạn đang đứng",
+  "searchPlaceholder": "Tìm theo nội dung hoặc SHA — author:tên path:file",
+  "searchLabel": "Tìm trong lịch sử",
+  "clearSearch": "Xóa ô tìm",
+  "allBranches": "Mọi nhánh",
+  "noMatches": "Không có commit nào khớp",
+  "selectCommit": "Chọn {{short}}",
+  "selectedN_other": "Đã chọn {{count}} commit",
+  "clearSelection": "Bỏ chọn",
+  "mixedSelection": "Có commit đã nằm trên nhánh này, có commit thì chưa — hãy chỉ chọn một loại",
+  "mergeCommitRefused": "Không cherry-pick hay revert được merge commit ở đây — hãy làm trong terminal",
+  "pickN_other": "Cherry-pick {{count}} commit vào {{branch}}",
+  "revertN_other": "Revert {{count}} commit",
+  "pickedN_other": "Đã cherry-pick {{count}} commit vào {{branch}}.",
+  "revertedN_other": "Đã revert {{count}} commit trên {{branch}}.",
+  "pausedConflicts_other": "{{op}} dừng lại vì {{count}} file bị conflict — hãy giải quyết trong Changes rồi bấm Tiếp tục",
+  "pausedEmpty": "{{op}} dừng lại: thay đổi của một commit đã có sẵn trên nhánh này — hãy Bỏ qua hoặc Hủy",
+  "undo": "Hoàn tác",
+  "undoHint": "Gỡ các commit mới này khỏi nhánh (chỉ khi chúng chưa được push)",
+  "undoTitle": "Hoàn tác lần {{op}} này?",
+  "undoBody_other": "{{count}} commit mới sẽ bị gỡ khỏi {{branch}}. Thay đổi của chúng vẫn được giữ ở trạng thái staged nên không mất gì. Sẽ bị từ chối nếu đã push hoặc nhánh đã có commit mới hơn.",
+  "undone_other": "Đã hoàn tác {{count}} commit, thay đổi vẫn đang ở trạng thái staged",
+  "showDetails": "Xem chi tiết",
+  "browseFiles": "Xem các file ở commit này",
+  "compareWithCurrent": "So sánh với nhánh hiện tại",
+  "copyPatch": "Sao chép patch",
+  "noPatch": "Commit này không có patch",
+  "patchOmitted_other": "Đã bỏ {{count}} file chứa thông tin bí mật ra khỏi patch",
+  "createBranchHere": "Tạo nhánh tại đây…",
+  "detailsTitle": "Chi tiết commit",
+  "noDetails": "Không đọc được commit này",
+  "author": "Tác giả",
+  "committer": "Người commit",
+  "parents_other": "Commit cha",
+  "rootCommit": "không có (commit đầu tiên)",
+  "refs": "Ref",
+  "containedIn": "Có trong",
+  "viewAllChanges": "Xem mọi thay đổi",
+  "filesChanged_other": "{{count}} file thay đổi",
+  "planning": "Đang xếp thứ tự…",
+  "planUnavailable": "Thư mục này không phải git repo",
+  "pickTitle_other": "Cherry-pick {{count}} commit vào {{branch}}?",
+  "revertTitle_other": "Revert {{count}} commit?",
+  "pickIntro_other": "Lần lượt áp từng commit vào {{branch}} theo đúng thứ tự dưới đây, mỗi commit thành một commit mới:",
+  "revertIntro_other": "Thêm vào {{branch}} các commit mới để đảo ngược từng commit dưới đây, commit mới nhất trước:",
+  "treeClean": "Thư mục làm việc đang sạch.",
+  "blockDirty": "Thư mục làm việc còn thay đổi chưa commit. Hãy commit hoặc bỏ chúng trước, để lỡ có Hủy cũng không mất gì.",
+  "blockSubdir": "Workspace này là thư mục con của repo; cherry-pick hay revert thay đổi cả repo, nên hãy chạy từ workspace ở thư mục gốc của repo.",
+  "blockBusy": "Đang có một merge, cherry-pick, revert hoặc rebase dở dang. Hãy hoàn tất hoặc hủy nó trước.",
+  "pickResult": "File trong workspace thay đổi ngay. Các commit gốc giữ nguyên.",
+  "revertResult": "Lịch sử không bị viết lại: commit cũ vẫn còn, các commit mới sẽ đảo ngược chúng.",
+  "onConflict": "Nếu một commit bị conflict, {{op}} sẽ dừng ở đó: giải quyết file trong Changes rồi bấm Tiếp tục — hoặc Bỏ qua commit đó, hoặc Hủy để quay về đúng trạng thái hiện tại.",
+  "pausedAt": "{{op}} đang dừng ở {{short}} \"{{subject}}\" ({{step}}/{{total}}):",
+  "pausedBetween": "{{op}} đang dừng ({{step}}/{{total}}):",
+  "pausedHelpConflicts_other": "hãy giải quyết {{count}} file bị conflict rồi bấm Tiếp tục — hoặc Bỏ qua commit này, hoặc Hủy để quay về như trước.",
+  "pausedHelpReady": "đã giải quyết hết conflict — bấm Tiếp tục để commit và làm tiếp, hoặc Bỏ qua commit này, hoặc Hủy để quay về như trước.",
+  "pausedHelpResume": "bấm Tiếp tục để áp các commit còn lại, hoặc Hủy để quay về như trước.",
+  "stillToApply_other": "Còn lại ({{count}}): {{list}}",
+  "continue": "Tiếp tục",
+  "continueBlocked": "Hãy giải quyết hết các file bị conflict trước",
+  "skip": "Bỏ qua commit này",
+  "skipHint": "Bỏ commit này (kể cả phần đã giải quyết cho nó) và làm tiếp commit sau",
+  "skipConfirm": "Bấm lần nữa để bỏ qua",
+  "abort": "Hủy",
+  "abortHint": "Dừng lại và đưa nhánh về đúng như trước khi bắt đầu",
+  "abortConfirm": "Bấm lần nữa để hủy {{op}}",
+  "aborted": "Đã hủy {{op}} — nhánh đã về như trước",
+  "sequenceDone_other": "{{op}} xong",
+  "status.A": "Thêm mới",
+  "status.M": "Sửa",
+  "status.D": "Xóa",
+  "status.R": "Đổi tên",
+  "status.C": "Sao chép",
+  "renamedFrom": "đổi tên từ {{from}}",
+  "noBlame": "File này chưa có lịch sử để blame",
+  "blameTitle": "Blame {{path}}",
+  "workingTree": "bản đang làm",
+  "blameBefore": "Blame phiên bản trước thay đổi này",
+  "notCommitted": "chưa commit",
+  "browseTitle": "Các file ở {{short}}",
+  "pickAFile": "Chọn một file bên trái",
+  "binaryFile": "File nhị phân — không hiển thị",
+  "compareTitle": "So sánh",
+  "compareA": "Từ (nhánh, tag hoặc commit)",
+  "compareB": "Đến (nhánh, tag hoặc commit)",
+  "compareUnavailable": "Thư mục này không phải git repo",
+  "swap": "Đổi chỗ hai bên",
+  "modeThree": "Thay đổi kể từ lúc tách nhánh (A...B)",
+  "modeTwo": "Khác biệt giữa hai bên (A B)",
+  "tabFiles_other": "{{count}} file",
+  "tabOnly_other": "Chỉ có ở {{name}} ({{count}})",
+  "noDifference": "Không có file nào khác nhau",
+  "noCommitsSide": "Bên này không có commit riêng",
+  "backToFiles": "Quay lại danh sách file",
+  "secretFile": "File này chứa thông tin bí mật nên không hiển thị",
+  "noTextChange": "Không có thay đổi dạng văn bản (file nhị phân hoặc chỉ đổi quyền)",
+  "createBranchTitle": "Nhánh mới tại {{short}}",
+  "createBranch": "Tạo nhánh",
+  "branchName": "Tên nhánh",
+  "createBranchHint": "Nhánh được tạo tại commit này; bạn vẫn ở nhánh hiện tại.",
+  "branchCreated": "Đã tạo nhánh {{branch}} tại {{short}}",
+  "createTagHere": "Tạo tag tại đây…",
+  "createTagTitle": "Tag mới tại {{short}}",
+  "createTag": "Tạo tag",
+  "tagName": "Tên tag",
+  "tagMessage": "Lời nhắn (không bắt buộc — có lời nhắn sẽ thành annotated tag)",
+  "createTagHint": "Tag chỉ nằm trên máy này cho tới khi bạn push nó từ bảng Nhánh.",
+  "tagCreated": "Đã tạo tag {{name}} tại {{short}}"
+}

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

@@ -0,0 +1,76 @@
+{
+  "openPanel": "Nhánh và tag",
+  "openPanelHint": "Nhánh và tag: đổi tên, tạo nhánh từ commit hoặc tag bất kỳ, upstream, merge, xóa, tag",
+  "title": "Nhánh và tag",
+  "branches": "Nhánh",
+  "tags": "Tag",
+  "close": "Đóng",
+  "searchBranches": "Tìm nhánh",
+  "searchTags": "Tìm tag",
+  "loading": "Đang tải…",
+  "unavailable": "Thư mục này không phải là kho git.",
+  "local": "Trên máy",
+  "remote": "Remote · {{remote}}",
+  "noMatch": "Không có nhánh nào khớp.",
+  "truncated": "Chỉ hiện 1000 mục đầu của mỗi loại.",
+  "merging": "Đang có merge, cherry-pick hoặc revert dở: hãy hoàn tất hoặc hủy nó trước khi đổi nhánh hay tag.",
+  "current": "đang dùng",
+  "protected": "được bảo vệ",
+  "worktree": "worktree",
+  "gone": "upstream đã mất",
+  "ahead": "đi trước",
+  "behind": "đi sau",
+  "inSync": "đã đồng bộ",
+  "newFrom": "Tạo nhánh từ đây",
+  "newBranchName": "Tên nhánh mới",
+  "switchToIt": "Chuyển sang nhánh đó",
+  "switchDirty": "Hãy commit hoặc bỏ các thay đổi rồi mới chuyển nhánh được.",
+  "create": "Tạo",
+  "rename": "Đổi tên",
+  "renameHint": "Đổi tên nhánh này (thiết lập upstream đi theo)",
+  "renameTo": "Tên mới",
+  "setUpstream": "Đặt upstream",
+  "upstreamHint": "Theo dõi một nhánh remote: số commit đi trước/đi sau, pull và push sẽ dựa vào nó",
+  "pickUpstream": "Chọn nhánh remote",
+  "noRemoteBranches": "Chưa fetch nhánh remote nào",
+  "unsetUpstream": "Bỏ upstream",
+  "apply": "Áp dụng",
+  "merge": "Merge",
+  "mergeInto": "Merge vào {{current}}",
+  "mergeHint": "Merge nhánh này vào {{current}} (cần cây làm việc sạch)",
+  "mergeConfirm": "Merge {{branch}} vào {{current}}? Nếu có xung đột, bạn xử lý trong bảng Thay đổi hoặc hủy merge.",
+  "delete": "Xóa",
+  "deleteHint": "Xóa nhánh trên máy này (git branch -d)",
+  "deleteConfirm": "Xóa nhánh {{branch}} trên máy? Nhánh đã merge hết nên không mất commit nào.",
+  "deleteUnmerged": "Xóa nhánh {{branch}} trên máy? Nhánh chưa merge vào nhánh hiện tại, nên git sẽ từ chối trừ khi upstream của nó đã có đủ mọi commit.",
+  "why.current": "Bạn đang ở nhánh này nên không xóa được.",
+  "why.protected": "Nhánh được bảo vệ: không đổi tên hay xóa ở đây được.",
+  "why.worktree": "Đang được mở ở worktree khác: {{path}}",
+  "why.unmerged": "Chưa merge vào nhánh hiện tại: git sẽ không xóa trừ khi upstream của nó đã có đủ mọi commit.",
+  "errLogin": "Remote cần đăng nhập. Hãy bấm Fetch hoặc Push trên thanh git một lần để đăng nhập (tick Ghi nhớ), rồi thử lại.",
+  "errSubdir": "Nhánh và tag thuộc về cả kho: hãy làm việc này từ một workspace ở thư mục gốc của kho.",
+  "tagNew": "Tạo tag",
+  "tagName": "Tên tag, ví dụ v1.2.0",
+  "tagFrom": "Đặt trên (nhánh, tag hoặc mã commit) — để trống là HEAD",
+  "tagMessage": "Nội dung (không bắt buộc — có nội dung thì là tag có chú thích)",
+  "tagCreateLight": "Tạo tag",
+  "tagCreateAnnotated": "Tạo tag có chú thích",
+  "cancel": "Hủy",
+  "noTags": "Chưa có tag nào.",
+  "annotated": "có chú thích",
+  "tagPush": "Đẩy lên origin",
+  "tagPushHint": "Chỉ đẩy đúng tag này (không dùng --tags, không ghi đè)",
+  "tagPushConfirm": "Đẩy tag {{tag}} lên remote?",
+  "tagDelete": "Xóa tag",
+  "tagDeleteHint": "Chỉ xóa tag này trên máy",
+  "tagDeleteConfirm": "Xóa tag {{tag}} trên máy? Không hoàn tác được ở đây; bản đã đẩy lên remote vẫn còn.",
+  "done.create": "Đã tạo nhánh {{branch}}",
+  "done.rename": "Đã đổi tên thành {{branch}}",
+  "done.setUpstream": "Giờ đang theo dõi {{upstream}}",
+  "done.unsetUpstream": "Đã bỏ upstream",
+  "done.merge": "Đã merge {{branch}}",
+  "done.delete": "Đã xóa nhánh {{branch}}",
+  "done.tagCreate": "Đã tạo tag {{tag}}",
+  "done.tagPush": "Đã đẩy tag {{tag}}",
+  "done.tagDelete": "Đã xóa tag {{tag}}"
+}

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

@@ -0,0 +1,156 @@
+{
+  "close": "Đóng",
+  "cancel": "Huỷ",
+  "loading": "Đang tải…",
+  "pushed": "đã push",
+  "forceAck": "Tôi hiểu: sau đó phải force-push nhánh này",
+  "rewrites_other": "Thao tác này viết lại {{count}} commit.",
+  "rewritesPushed_other": "Thao tác này viết lại {{count}} commit, trong đó {{pushed}} commit đã push nên sẽ phải force-push.",
+  "doneTitle": "Xong.",
+  "needsForcePushAfter": "Có commit đã push bị viết lại: khi chắc chắn, hãy push bằng Force push (with lease).",
+  "undo": "Hoàn tác",
+  "undoConfirm": "Bấm lần nữa để hoàn tác",
+  "undoHint": "Đưa nhánh về lại {{sha}} (giữ nguyên thay đổi chưa commit).",
+  "undone": "Đã hoàn tác: nhánh đã về chỗ cũ",
+  "blocked.subdir": "Thao tác này đổi cả nhánh nên chỉ chạy được từ workspace ở thư mục gốc của repo.",
+  "blocked.operation": "Đang có {{op}} dở dang: hãy hoàn tất hoặc huỷ trước.",
+  "blocked.dirty": "Hãy commit hoặc bỏ các thay đổi chưa commit trước.",
+
+  "menu.label": "Công cụ lịch sử",
+  "menu.rebase": "Rebase lên nhánh…",
+  "menu.interactive": "Sửa các commit chưa push…",
+  "menu.reflog": "Reflog",
+  "menu.forcePush": "Force push (with lease)…",
+  "menu.remotes": "Remote…",
+  "menu.resetHere": "Reset nhánh về commit này…",
+  "menu.interactiveHere": "Sửa các commit sau commit này…",
+
+  "merge.open": "Trình gộp 3 bên",
+  "merge.title": "Gộp conflict — {{path}}",
+  "merge.incoming": "Bên đến: {{ref}}",
+  "merge.incomingRebase": "Bên đến (commit đang được áp lại): {{ref}}",
+  "merge.incomingPlain": "Bên đến",
+  "merge.current": "Hiện tại: {{branch}}",
+  "merge.currentRebase": "Hiện tại (nhánh bạn đang rebase lên)",
+  "merge.base": "Bản gốc chung",
+  "merge.result": "Kết quả",
+  "merge.sideGone": "Bên này đã xoá file",
+  "merge.blockOf": "Conflict {{n}}/{{total}}",
+  "merge.acceptCurrent": "Lấy bản hiện tại",
+  "merge.acceptIncoming": "Lấy bản đến",
+  "merge.bothCurrentFirst": "Lấy cả hai (hiện tại trước)",
+  "merge.bothIncomingFirst": "Lấy cả hai (bản đến trước)",
+  "merge.editBlock": "Sửa",
+  "merge.editDone": "Xong",
+  "merge.undoChoice": "Bỏ chọn",
+  "merge.left_other": "Còn {{count}}/{{total}} conflict",
+  "merge.allChosen": "Đã chọn xong mọi conflict",
+  "merge.wholeMode": "Đang sửa toàn bộ kết quả",
+  "merge.prev": "Conflict trước",
+  "merge.next": "Conflict sau",
+  "merge.showBase": "Xem bản gốc",
+  "merge.editWhole": "Sửa cả file kết quả",
+  "merge.backToBlocks": "Quay lại từng conflict",
+  "merge.save": "Lưu kết quả",
+  "merge.saved": "Đã giải quyết {{path}}",
+  "merge.markersLeft": "Kết quả vẫn còn dấu conflict (<<<<<<< ======= >>>>>>>): hãy xử lý hết các khối trước.",
+  "merge.stale": "File đã thay đổi trên đĩa từ lúc mở. Hãy đóng và mở lại.",
+  "merge.binary": "Đây là file nhị phân: hãy chọn nguyên một bên ở màn hình conflict.",
+  "merge.tooBig": "File quá lớn cho trình gộp: hãy chọn nguyên một bên hoặc sửa trong terminal.",
+  "merge.noWorking": "Một bên đã xoá file này: hãy giữ hoặc xoá bằng Giữ của mình / Lấy bản kia.",
+  "merge.unbalanced": "Dấu conflict trong file bị lệch: hãy sửa tay.",
+
+  "reflog.title": "Reflog",
+  "reflog.of": "Các vị trí nhánh từng trỏ tới:",
+  "reflog.hint": "Mọi chỗ HEAD hoặc nhánh từng trỏ tới, mới nhất ở trên. Commit bị mất do reset hay rebase vẫn còn ở đây: bấm Reset về đây để lấy lại.",
+  "reflog.empty": "Chưa có gì được ghi lại.",
+  "reflog.resetHere": "Reset về đây…",
+  "reflog.more": "Xem thêm",
+
+  "rebase.title": "Rebase {{branch}} lên…",
+  "rebase.onto": "Nhánh để rebase lên",
+  "rebase.pick": "Chọn nhánh",
+  "rebase.explain": "Các commit riêng của nhánh bạn sẽ được áp lại lần lượt lên trên nhánh bạn chọn. Nếu một commit bị conflict, rebase dừng lại và bảng Thay đổi sẽ có Tiếp tục, Bỏ qua và Huỷ.",
+  "rebase.nothing": "Không có gì để áp lại: nhánh này không có commit nào mà {{onto}} chưa có.",
+  "rebase.summary_other": "{{count}} commit sẽ được áp lại lên {{onto}} (bên đó có {{behind}} commit mới).",
+  "rebase.run": "Rebase",
+  "rebase.done": "Đã rebase lên {{onto}}",
+  "rebase.stopped_other": "Rebase đã dừng: {{count}} file bị conflict. Xử lý xong rồi bấm Tiếp tục.",
+
+  "rebaseBanner.skip": "Bỏ qua commit",
+  "rebaseBanner.skipHint": "Bỏ commit mà rebase đang dừng và làm tiếp commit sau",
+  "rebaseBanner.finished": "Đã rebase xong",
+
+  "interactive.title": "Sửa commit",
+  "interactive.explain": "Đổi thứ tự bằng các mũi tên và chọn cho từng commit: giữ nguyên, sửa nội dung message, gộp (squash hoặc fixup) vào commit phía trên, hoặc bỏ đi. Chưa có gì thay đổi cho tới khi bạn bấm Viết lại.",
+  "interactive.merges": "Khoảng này có merge commit, hãy viết lại trong terminal.",
+  "interactive.nothing": "Không có commit chưa push nào để sửa.",
+  "interactive.action": "Làm gì với {{short}}",
+  "interactive.actions.pick": "Giữ",
+  "interactive.actions.reword": "Sửa message",
+  "interactive.actions.squash": "Gộp vào commit trên",
+  "interactive.actions.fixup": "Gộp vào commit trên (bỏ message)",
+  "interactive.actions.drop": "Bỏ",
+  "interactive.up": "Lên trên",
+  "interactive.down": "Xuống dưới",
+  "interactive.message": "Message của commit",
+  "interactive.squashHint": "Để trống thì ghép cả hai message",
+  "interactive.problem.first": "Commit đầu tiên được giữ không gộp được: phía trên nó không có gì.",
+  "interactive.problem.allDropped": "Mọi commit đều bị bỏ: hãy dùng Reset nhánh về commit này.",
+  "interactive.problem.reword": "Commit sửa message thì cần có message.",
+  "interactive.run": "Viết lại",
+  "interactive.runConfirm": "Bấm lần nữa để viết lại",
+  "interactive.done": "Đã viết lại các commit",
+
+  "reset.title": "Reset {{branch}} về {{short}}",
+  "reset.summary": "{{dropped}} commit rời khỏi {{branch}} và {{added}} commit được thêm vào.",
+  "reset.already": "Nhánh đang ở đúng commit này rồi.",
+  "reset.unrelated": "Commit này không nằm trên lịch sử của nhánh nên không reset về được ở đây.",
+  "reset.mode": "File của bạn sẽ ra sao",
+  "reset.modes.soft": "Soft",
+  "reset.modes.mixed": "Mixed",
+  "reset.modes.keep": "Keep",
+  "reset.modes.hard": "Hard",
+  "reset.modesHelp.soft": "Chỉ nhánh di chuyển; thay đổi của các commit bị bỏ vẫn nằm trong vùng stage.",
+  "reset.modesHelp.mixed": "Nhánh di chuyển; các thay đổi đó vẫn còn trong file, chưa stage.",
+  "reset.modesHelp.keep": "File đổi theo commit, nhưng git sẽ từ chối nếu việc đó ghi đè lên thay đổi chưa commit.",
+  "reset.modesHelp.hard": "File đổi đúng y như commit. Chỉ chạy khi không có thay đổi chưa commit, nên không mất gì.",
+  "reset.hardDirty": "Hard reset chỉ chạy khi không có thay đổi chưa commit. Hãy dùng Keep, hoặc commit/bỏ thay đổi trước.",
+  "reset.typeBranch": "Gõ tên nhánh ({{branch}}) để xác nhận",
+  "reset.pushed_other": "{{count}} commit rời khỏi nhánh đã được push, nên sẽ phải force-push.",
+  "reset.run": "Reset ({{mode}})",
+  "reset.done": "Đã reset nhánh về {{short}}",
+
+  "forcePush.title": "Force push (with lease)",
+  "forcePush.where": "Push {{branch}} lên {{remote}}/{{remoteBranch}}, thay thế những gì đang có ở đó.",
+  "forcePush.replaces": "Sẽ thay {{sha}} trên remote (nhánh của bạn đi trước {{ahead}}, đi sau {{behind}} commit).",
+  "forcePush.newBranch": "Remote chưa có nhánh này.",
+  "forcePush.dropsRemote_other": "{{count}} commit trên remote không có trong nhánh của bạn và sẽ biến mất khỏi đó.",
+  "forcePush.protected": "Đây là nhánh được bảo vệ (main, master, develop…): server này tắt force-push cho nhánh đó.",
+  "forcePush.lease": "With lease: push bị từ chối nếu có ai đã push lên nhánh remote kể từ lần fetch gần nhất của bạn.",
+  "forcePush.run": "Force push",
+  "forcePush.runConfirm": "Bấm lần nữa để force push",
+  "forcePush.done": "Đã force push lên {{remote}}/{{branch}}",
+  "forcePush.stale": "Nhánh remote đã thay đổi từ lần fetch gần nhất. Hãy fetch, xem trên đó có gì rồi thử lại.",
+
+  "remotes.title": "Remote",
+  "remotes.none": "Repo này chưa có remote.",
+  "remotes.default": "Nhánh mặc định: {{branch}}",
+  "remotes.rename": "Đổi tên",
+  "remotes.newName": "Tên mới",
+  "remotes.remove": "Gỡ",
+  "remotes.removeConfirm": "Bấm lần nữa để gỡ",
+  "remotes.branches_other": "{{count}} nhánh",
+  "remotes.deleteBranch": "Xoá trên remote",
+  "remotes.deleteBranchConfirm": "Bấm lần nữa để xoá",
+  "remotes.branchLocked": "Không xoá được nhánh mặc định và main/master/develop ở đây",
+  "remotes.add": "Thêm remote",
+  "remotes.name": "Tên",
+  "remotes.url": "URL",
+  "remotes.urlHint": "https:// (không kèm thông tin đăng nhập), ssh:// hoặc user@host:path.",
+  "remotes.addButton": "Thêm",
+  "remotes.added": "Đã thêm remote {{name}}",
+  "remotes.renamed": "Đã đổi tên remote {{from}} thành {{to}}",
+  "remotes.removed": "Đã gỡ remote {{name}}",
+  "remotes.branchDeleted": "Đã xoá {{ref}} trên remote"
+}

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

@@ -92,6 +92,7 @@
   "changes.expandFile": "Mở {{path}}",
   "changes.fileGone": "File này không còn thay đổi nào trong phạm vi đang xem.",
   "changes.fileTruncated": "Diff bị cắt bớt — mở file trong editor để xem phần còn lại.",
+  "changes.lineElided": "… còn {{size}} ký tự trên dòng này",
   "changes.commentLine": "Comment dòng {{n}} — dán vào pane của workspace này",
   "changes.commentOn": "Comment {{at}} — dán vào pane bạn dùng gần nhất; chưa gửi gì cho tới khi bạn nhấn Enter ở đó",
   "changes.commentSend": "Dán vào pane",
@@ -195,7 +196,8 @@
   "gitBar.switch": "Nhánh",
   "gitBar.switchApply": "Chuyển nhánh",
   "gitBar.switchCurrent": "hiện tại",
-  "gitBar.switchDirty": "Hãy commit hoặc bỏ các thay đổi chưa commit trước",
+  "gitBar.remoteBranches": "Trên remote — switch sẽ tạo nhánh local",
+  "gitBar.switchDirty": "Hãy commit, bỏ hoặc cất (shelve) 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…",
   "gitBar.unbornHint": "Hãy commit trước, rồi publish repo này lên remote.",
@@ -213,7 +215,6 @@
   "clone.parentHint": "Repository sẽ được clone vào {{path}}",
   "clone.nameLabel": "Tên thư mục",
   "clone.cloning": "Đang clone…",
-  "clone.background": "Chạy nền",
   "clone.loginNeeded": "{{host}} cần đăng nhập: username và mật khẩu hoặc access token.",
   "clone.loginRejected": "{{host}} từ chối username hoặc token này.",
   "clone.username": "Username",
@@ -230,6 +231,41 @@
   "clone.phase.resolving": "Đang giải nén",
   "clone.phase.checkout": "Đang ghi file",
   "clone.sshNoKey": "Chưa clone: tài khoản của bạn chưa có SSH key. Hãy tạo key trong Cài đặt → Git, thêm public key vào {{host}}, rồi thử lại.",
+  "cloneJobs.backgroundHint": "Việc clone chạy nền: bạn theo dõi ở góc màn hình, ở trang nào cũng được — kể cả sau khi tải lại trang.",
+  "cloneJobs.starting": "Đang bắt đầu…",
+  "cloneJobs.started": "Đã bắt đầu — tiến độ hiện ở góc màn hình.",
+  "cloneJobs.cloning": "Đang clone {{name}}",
+  "cloneJobs.queued": "Đang chờ trong hàng clone — thứ {{position}}",
+  "cloneJobs.done": "Đã clone {{name}}",
+  "cloneJobs.failedTitle": "Không clone được {{name}}",
+  "cloneJobs.cancelledTitle": "Đã ngưng clone {{name}}",
+  "cloneJobs.failed": "Clone bị lỗi.",
+  "cloneJobs.interrupted": "AgentHub đã khởi động lại khi đang clone.",
+  "cloneJobs.cancelled": "Bạn đã ngưng clone này.",
+  "cloneJobs.cancelledToast": "Đã ngưng clone {{name}}.",
+  "cloneJobs.failedToast": "Không clone được {{name}}: {{message}}",
+  "cloneJobs.doneWorkspace": "Đã clone {{name}} vào {{path}} — mở thành workspace “{{workspace}}”.",
+  "cloneJobs.doneSource": "Đã clone {{name}} vào {{path}} và thêm vào workspace.",
+  "cloneJobs.openWorkspace": "Mở workspace",
+  "cloneJobs.open": "Mở",
+  "cloneJobs.retry": "Thử lại",
+  "cloneJobs.retryLogin": "Thử lại với tài khoản này",
+  "cloneJobs.stop": "Ngưng clone",
+  "cloneJobs.stopConfirm": "Bấm lần nữa để ngưng",
+  "cloneJobs.stopUnsupported": "Máy chủ AgentHub này chưa ngưng clone được — hãy cập nhật, hoặc chờ clone xong.",
+  "cloneJobs.dismiss": "Đóng",
+  "jobs.dock": "Việc chạy nền",
+  "jobs.count_one": "{{count}} việc chạy nền",
+  "jobs.count_other": "{{count}} việc chạy nền",
+  "jobs.running_one": "{{count}} đang chạy",
+  "jobs.running_other": "{{count}} đang chạy",
+  "jobs.expand": "Xem các việc chạy nền",
+  "uploads.stop": "Ngưng tải lên",
+  "uploads.stopConfirm": "Bấm lần nữa để ngưng",
+  "uploads.stopping": "Đang ngưng…",
+  "uploads.stopped_one": "Đã ngưng tải lên — đã gửi {{count}}/{{total}} tệp.",
+  "uploads.stopped_other": "Đã ngưng tải lên — đã gửi {{count}}/{{total}} tệp.",
+  "uploads.interrupted": "Việc tải {{total}} tệp lên {{folder}} bị ngắt do tải lại trang — đã gửi {{done}} tệp.",
   "moreActions": "Thêm hành động",
   "pipelinePicker.label": "Mẫu pipeline",
   "pipelinePicker.stageMismatch": "Stage \"{{stage}}\" không khớp node nào trong \"{{pipeline}}\" — khai báo một trong: {{nodes}}",
@@ -341,6 +377,7 @@
   "changes.takeTheirsHint": "Lấy bản kia cho cả file",
   "row.actions": "Thao tác workspace",
   "row.hint": "Nhấp đúp để đổi tên · kéo hoặc Alt+↑/↓ để sắp xếp · chuột phải để xem thao tác",
+  "row.folderMissing": "Thư mục đã bị xóa — gỡ workspace này trong menu ⋯",
   "menu.rename": "Đổi tên",
   "menu.newHere": "Workspace mới tại đây…",
   "menu.copyPath": "Sao chép đường dẫn",
@@ -504,8 +541,6 @@
   "changes.loadMore": "Tải thêm commit",
   "changes.commentPasted": "Đã dán vào tab {{tab}} — nhấn Enter ở đó để gửi",
   "changes.splitter": "Đổi độ rộng khung thay đổi",
-  "tree.archiveLiveTitle": "Lưu trữ một session đang chạy?",
-  "tree.archiveLiveBody": "Tab của nó vẫn chạy; lưu trữ chỉ ẩn nó khỏi danh sách này. Bỏ lưu trữ trong mục đã lưu trữ.",
   "tree.state.awaiting": "đang chờ bạn",
   "tree.state.error": "lỗi",
   "tree.state.live": "đang chạy",
@@ -532,9 +567,11 @@
   "changes.unversionedGroup": "File chưa theo dõi",
   "changes.commitTicked": "Commit ({{count}})",
   "changes.commitAndPush": "Commit và Push",
-  "changes.discardAll": "Bỏ tất cả",
-  "changes.discardAllTitle": "Bỏ tất cả thay đổi?",
-  "changes.discardAllConfirm": "Mọi thay đổi trong {{count}} file sẽ trở về commit cuối, và {{untracked}} file mới chưa được git theo dõi sẽ bị xoá. Không thể hoàn tác.",
+  "changes.discardTicked": "Bỏ ({{count}})",
+  "changes.discardTickedTitle": "Bỏ các thay đổi đã chọn?",
+  "changes.discardTickedConfirm": "Các thay đổi đã chọn trong {{count}} file sẽ trở về commit cuối, và {{untracked}} file mới đã chọn chưa được git theo dõi sẽ bị xoá. File và đoạn không chọn được giữ nguyên. Không thể hoàn tác.",
+  "changes.discardTickedConfirmTracked": "Các thay đổi đã chọn trong {{count}} file sẽ trở về commit cuối. File và đoạn không chọn được giữ nguyên. Không thể hoàn tác.",
+  "changes.discardTickedConfirmNew": "{{untracked}} file mới đã chọn chưa được git theo dõi sẽ bị xoá. File không chọn được giữ nguyên. Không thể hoàn tác.",
   "changes.amendAndPush": "Amend và Push",
   "changes.pushFailed": "Đã commit, nhưng push thất bại: {{error}}",
   "changes.tickFile": "Đưa {{path}} vào commit",
@@ -567,7 +604,6 @@
   "fx.newFile": "File mới",
   "fx.cloneRepo": "Clone repository",
   "fx.cloneSubmit": "Clone",
-  "fx.cloned": "Đã clone vào {{path}} — đã mở thành workspace “{{workspace}}”.",
   "fx.uploadFiles": "Tải file lên",
   "fx.uploadFolder": "Tải cả thư mục lên",
   "fx.download": "Tải về",
@@ -590,6 +626,7 @@
   "fx.dropHint": "Kéo file hoặc thư mục vào đây để tải lên · kéo vào một thư mục để di chuyển (Ctrl: sao chép)",
   "fx.uploading": "Đang tải lên {{done}}/{{total}}…",
   "fx.uploaded": "Đã tải lên {{count}} file.",
+  "fx.gitSkipped": "Đã bỏ qua {{count}} file trong .git — không tải gì vào .git.",
   "fx.uploadFailed": "Không tải lên được {{name}}: {{message}}",
   "fx.tooBig": "{{size}} vượt quá giới hạn một lần tải lên ({{max}}). Hãy tải ít file hơn mỗi lần.",
   "fx.trashed": "Đã chuyển {{count}} mục vào Thùng rác.",
@@ -675,5 +712,38 @@
   "menu.newGroupWith": "Nhóm mới…",
   "tree.groupAddWorkspace": "Workspace mới trong nhóm này…",
   "tree.groupFoldAll": "Thu gọn mọi nhóm",
-  "tree.groupUnfoldAll": "Mở rộng mọi nhóm"
+  "tree.groupUnfoldAll": "Mở rộng mọi nhóm",
+  "gitBar.switchDirtyHint": "{{count}} file chưa commit: bạn sẽ được hỏi mang theo hay cất chúng lại",
+  "gitBar.choiceTitle": "Chuyển sang {{branch}}",
+  "gitBar.choiceMessage": "Bạn có {{count}} file chưa commit. Chuyển sang {{branch}} và…",
+  "gitBar.choiceCarry": "Mang thay đổi theo",
+  "gitBar.choiceCarryHint": "Chuyển nhánh và giữ nguyên thay đổi chưa commit trong thư mục (git từ chối nếu một file sẽ bị ghi đè)",
+  "gitBar.choiceShelve": "Cất rồi chuyển",
+  "gitBar.choiceShelveHint": "Cất thay đổi vào một shelf rồi chuyển nhánh; khôi phục lại sau ở mục Shelves",
+  "gitBar.carryConflict": "Không thể mang thay đổi sang {{branch}}: git sẽ ghi đè các file này. Cất chúng lại thay vì vậy?",
+  "gitBar.branchCreateSwitch": "Tạo & chuyển",
+  "gitBar.branchCreateSwitchHint": "Tạo nhánh này và chuyển sang; thay đổi chưa commit được mang theo",
+  "gitBar.shelvedOn": "Thay đổi trên {{branch}} đã được cất vào shelf",
+  "gitBar.restoreOfferTitle": "Khôi phục thay đổi đã cất?",
+  "gitBar.restoreOffer": "{{branch}} có {{count}} shelf. Khôi phục shelf mới nhất ({{files}} file) ngay?",
+  "shelves.title": "Shelves ({{count}})",
+  "shelves.files": "{{count}} file",
+  "shelves.restore": "Khôi phục",
+  "shelves.restoreHint": "Đưa các thay đổi này trở lại (cần thư mục sạch); shelf được xoá khi áp dụng không xung đột",
+  "shelves.delete": "Xoá",
+  "shelves.deleteConfirm": "Xoá hẳn?",
+  "shelves.deleteHint": "Xoá shelf này cùng các thay đổi trong nó (bấm hai lần)",
+  "shelves.deleted": "Đã xoá shelf",
+  "shelves.restored": "Đã khôi phục thay đổi đã cất",
+  "shelves.restoredConflicts": "Đã khôi phục với {{count}} file xung đột: hãy giải quyết trong danh sách. Shelf được giữ đến khi bạn xoá.",
+  "shelves.restoreDirty": "Hãy commit, bỏ hoặc cất thay đổi hiện tại trước khi khôi phục một shelf",
+  "shelves.shelveTicked": "Cất ({{count}})",
+  "shelves.shelveHint": "Cất các file đã tick vào một shelf và dọn chúng khỏi thư mục làm việc",
+  "shelves.shelveApply": "Cất {{count}} file",
+  "shelves.notePlaceholder": "Ghi chú cho shelf này (tuỳ chọn)…",
+  "shelves.cancel": "Huỷ",
+  "shelves.shelved": "Đã cất {{count}} file",
+  "shelves.agentTitle": "Một agent đang làm việc ở đây",
+  "shelves.agentMessage": "Một agent trong workspace này đang làm việc. Thao tác này di chuyển file ngay dưới nó, agent có thể bị nhầm hoặc ghi đè lên. Vẫn tiếp tục?",
+  "shelves.agentConfirm": "Tiếp tục"
 }

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

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

@@ -899,11 +899,13 @@
     "awsSub": "Key RSA 4096 — AWS chỉ nhận RSA",
     "stepCopy": "Copy public key.",
     "awsStepUpload": "Trên AWS console: IAM → Users → user của bạn → Security credentials → SSH public keys for AWS CodeCommit → Upload SSH public key, rồi dán vào.",
-    "awsStepKeyId": "AWS sẽ hiện một SSH key ID (bắt đầu bằng APKA). Dán vào đây và chọn region chứa repository:",
+    "awsStepKeyId": "AWS sẽ hiện một SSH key ID (bắt đầu bằng APKA). Dán vào đây — một key ID dùng được cho mọi region:",
     "awsKeyId": "SSH key ID",
-    "awsRegion": "Region",
     "awsSave": "Lưu",
-    "awsSaved": "Đã lưu SSH key ID cho {{region}}",
+    "awsSavedAll": "Đã lưu SSH key ID cho mọi region",
+    "awsSavedNamed": "Đã lưu SSH key ID cho {{name}}",
+    "awsAllRegions": "Mọi region",
+    "awsUseAll": "Dùng cho mọi region",
     "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",
@@ -917,7 +919,7 @@
     "alias": "Tên tài khoản",
     "aliasPlaceholder": "tên (tuỳ chọn)",
     "aliasHint": "Để trống cho tài khoản mặc định của host này. Đặt tên (vd aws-prod, chữ thường, không dấu chấm) cho thêm một tài khoản: clone bằng ssh://<tên>/…",
-    "awsMany": "Nhiều tài khoản AWS? Bấm Thêm key khác cho mỗi tài khoản — key được tạo ngay — upload lên tài khoản đó, rồi lưu SSH key ID ở bước 3 của key đó (tên tài khoản lấy theo tên key nếu bạn không nhập). Clone từng cái bằng ssh://<tên tài khoản>/v1/repos/<repo>.",
+    "awsMany": "Nhiều tài khoản AWS? Bấm Thêm key khác cho mỗi tài khoản — key được tạo ngay — upload lên tài khoản đó, rồi lưu SSH key ID ở bước 3 của key đó. Clone bằng URL AWS đưa như bình thường: AgentHub tự thử từng tài khoản đã lưu đến khi mở được repository.",
     "tabGit": "GitHub · GitLab",
     "tabOther": "Host khác",
     "addKey": "Thêm key khác",
@@ -1384,6 +1386,7 @@
     "noActive": "{{tool}} chưa có đăng nhập nào trên máy này.",
     "noProfiles": "Không tải được danh sách hồ sơ.",
     "switchSuccess": "Đã chuyển {{tool}} sang \"{{name}}\". Mở phiên mới để dùng.",
+    "switchFollowing": "Đã chuyển {{tool}} sang \"{{name}}\" — các phiên đang chạy theo luôn.",
     "deleteConfirmBody": "Thao tác này xoá đăng nhập {{tool}} đã lưu. Muốn dùng lại, hãy đăng nhập từ terminal và lưu lại lần nữa.",
     "loginHint": "Thêm đăng nhập {{tool}} khác bằng cách đăng nhập từ terminal trước:",
     "subtitle": {

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

@@ -79,6 +79,7 @@
     "EBADUSER": "Tên đăng nhập: chữ, số, '.', '_' hoặc '-' (tối đa 64 ký tự).",
     "EBADPASSWORD": "Mật khẩu không được để trống.",
     "EBADEMAIL": "Địa chỉ email không hợp lệ.",
+    "ENAMETAKEN": "Tên này đã có tài khoản khác dùng. Hãy chọn tên của chính bạn.",
     "EBADFIELD": "Có một giá trị không hợp lệ.",
     "ENOLANE": "Workspace đó không còn tồn tại.",
     "ENOTOWNED": "Workspace đó không còn thuộc người này.",
@@ -87,7 +88,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",
@@ -110,6 +112,8 @@
     "status": "Trạng thái",
     "active": "Đang hoạt động",
     "statusHint": "Người dùng bị vô hiệu hoá không thể đăng nhập; workspace và lịch sử vẫn được giữ.",
+    "hostAccount": "Sở hữu tài khoản host của máy chủ",
+    "hostAccountHint": "Session chạy bằng tài khoản Linux của máy chủ nhưng ngoài mọi workspace (claude -p của script, CLI trong terminal thường) được tính vào chi phí của admin này. Tối đa một admin; nếu chưa ai được chọn thì là admin duy nhất.",
     "selfRole": "Bạn không thể đổi vai trò của chính mình.",
     "selfDisable": "Bạn không thể tự vô hiệu hoá mình.",
     "password": "Mật khẩu",
@@ -412,5 +416,37 @@
   "spendSub": "7 ngày {{week}} · 30 ngày {{month}}",
   "sessionsN": "{{n}} session",
   "workspacesN": "{{n}} workspace",
-  "tmuxCol": "tmux"
+  "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}}"
+  }
 }