chore: v2.8.61 — uploads survive a restart, SSH key import

An upload through the File Explorer is now sent in 8 MB parts that the
server stages on the host (<data dir>/upload-staging/<user>/<id>/,
server/lib/upload-staging.js) and writes only once every byte is there,
through the same upload/uploadBatch code and guards (?staged=<id>). A
restart, an update or a crash pauses it: the browser waits up to 3 min,
asks how much arrived (GET /fs/upload-part) and sends the rest; the dock
says the dashboard is restarting meanwhile. A commit's answer is stored
and replayed, never written twice; a refused one (EEXISTS) keeps the
bytes for a retry with another conflict policy.

A file uploaded into a member's folder is now written to a hidden temp
name and moved onto its name only when whole: write-as cannot tell a
dropped connection from the end of a file, and `replace` left a truncated
file under the real name when the server died mid-upload.

New: GET|POST|DELETE /api/{lanes/:id,homes/:who}/fs/upload-part; 409
EOFFSET/EINCOMPLETE/EBUSY, 429 ETOOMANY. Verified on a sandbox server:
SIGTERM mid-upload of a 60 MB file in a real browser, resumed and
sha256-identical.

.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

@@ -388,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,385 @@
+/**
+ * @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>
+      )}
+      {job.waiting && !stopping && (
+        <p className="text-[11px] text-status-warning" role="status" data-testid="upload-waiting">
+          {t("uploads.waiting")}
+        </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

@@ -15,8 +15,10 @@ 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. */
-const HTML_MAX = 10 * 1024 * 1024;
+/** 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,

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/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__/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/conversation/MarkdownContent.tsx

@@ -63,6 +63,7 @@
 
 import React from "react";
 import { CodeBlock } from "./CodeBlock";
+import { onLinkClick } from "../../lib/openInPreview";
 
 type Block =
   | { kind: "code"; lang: string; code: string }
@@ -305,7 +306,13 @@ const LABEL_CLASS = (word: string) =>
 
 function UrlLink({ url }: { url: string }) {
   return (
-    <a href={url} target="_blank" rel="noopener noreferrer" className={LINK_CLASS}>
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => onLinkClick(e, url)}
+      className={LINK_CLASS}
+    >
       {url}
     </a>
   );
@@ -466,6 +473,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
           href={href}
           target="_blank"
           rel="noopener noreferrer"
+          onClick={(e) => onLinkClick(e, href)}
           className="text-violet-700 dark:text-violet-300 hover:text-violet-800 dark:hover:text-violet-200 underline underline-offset-2 decoration-violet-400/40 hover:decoration-violet-300/70"
         >
           {renderInline(linkM[1]!, `${baseKey}-l${n}`)}

client/src/components/conversation/MessageList.tsx

@@ -865,7 +865,7 @@ function MessageListView({
           className={
             compact
               ? "space-y-3 py-1 pr-2"
-              : "mx-auto flex w-full max-w-3xl flex-col gap-3 px-4 py-6"
+              : "mx-auto flex w-full max-w-5xl flex-col gap-3 px-4 py-6"
           }
         >
           {items.map((item) => {

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,7 +15,10 @@
  * 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 — 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 /
@@ -88,6 +91,7 @@ import {
   type FsPlace,
   type GitSource,
   isHomePlace,
+  newUploadId,
 } from "../../lib/api";
 import type { Lane } from "../../lib/types";
 import { useDialog } from "../../hooks/useDialog";
@@ -99,6 +103,9 @@ 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";
 
@@ -229,6 +236,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 (;;) {
@@ -325,13 +334,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;
@@ -367,16 +369,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
@@ -437,6 +444,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)
@@ -453,8 +462,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 ?? [];
@@ -465,13 +486,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);
   };
@@ -494,7 +530,13 @@ export function FileBrowser({
       await fn();
       if (done) toast.success(done);
     } catch (e) {
-      toast.error(errCode(e) === "EUPGRADE" ? t("fx.needsUpgrade") : errText(e));
+      toast.error(
+        errCode(e) === "EUPGRADE"
+          ? t("fx.needsUpgrade")
+          : errCode(e) === "ESECRET"
+            ? t("fx.secret")
+            : errText(e)
+      );
     } finally {
       setBusy(false);
       changed();
@@ -614,8 +656,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) {
@@ -625,19 +673,37 @@ 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 });
+    const onWait = (waiting: boolean) => job.update({ waiting });
     /** 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));
+      // One id for every attempt: a retry with another `conflict` reuses the staged bytes.
+      const upload = newUploadId();
+      const send = (c: FsConflict) =>
+        api.files.uploadStaged(place, dest, file, c, {
+          upload,
+          onProgress: (n) => show(rel, n),
+          onWait,
+          signal,
+        });
       try {
         const r = await send(forAll ?? "fail").catch(async (e) => {
           if (errCode(e) !== "EEXISTS") throw e;
@@ -648,8 +714,11 @@ 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) }));
+      } finally {
+        onWait(false);
+        void api.files.dropUpload(place, upload);
       }
       sent += file.size;
       done++;
@@ -668,9 +737,11 @@ export function FileBrowser({
         if (a.all && a.choice) forAll = a.choice;
         return a.choice;
       };
+      if (signal.aborted) return "cancel";
+      const upload = newUploadId();
       try {
         const c = await api.files.uploadCheck(
-          target,
+          place,
           dir,
           b.map((f) => f.rel)
         );
@@ -681,7 +752,12 @@ 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.uploadBatchStaged(place, dir, b, p, {
+            upload,
+            onProgress: (n) => show(label, n),
+            onWait,
+            signal,
+          });
         const r = await send(policy).catch(async (e) => {
           // Taken meanwhile: ask about those, then once more.
           if (errCode(e) !== "EEXISTS") throw e;
@@ -692,7 +768,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;
@@ -700,6 +776,9 @@ export function FileBrowser({
           return "fallback";
         }
         toast.error(t("fx.uploadFailed", { name: label, message: errText(e) }));
+      } finally {
+        onWait(false);
+        void api.files.dropUpload(place, upload);
       }
       sent += size;
       done += b.length;
@@ -716,9 +795,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();
     }
   };
@@ -924,11 +1004,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"
@@ -951,9 +1038,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) ||
@@ -986,18 +1073,7 @@ export function FileBrowser({
         />
       )}
       {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();
-          }}
-        />
+        <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">
@@ -1644,26 +1720,6 @@ export function FileBrowser({
             <span className="ml-auto hidden md:inline">{t("fx.dropHint")}</span>
           </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 && (
@@ -1679,9 +1735,7 @@ export function FileBrowser({
                 </MenuItem>
               )}
               {isHtml(menuItem) && menuTargets.length === 1 && (
-                <MenuItem onSelect={close(() => download([menuItem]))}>
-                  {t("fx.download")}
-                </MenuItem>
+                <MenuItem onSelect={close(() => download([menuItem]))}>{t("fx.download")}</MenuItem>
               )}
               <MenuSeparator />
               {!ro && (

client/src/components/lanes/LaneChangesPanel.tsx

@@ -18,7 +18,9 @@
  *              (`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`
@@ -54,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`).
  *
@@ -92,6 +101,7 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  Archive,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
@@ -142,9 +152,14 @@ 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,
@@ -164,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. */
@@ -470,8 +489,9 @@ function FileActions({
           title={t("changes.discardConfirm")}
           disabled={busy}
           onClick={() => onAct("discard", f.path, true)}
-          className={`${HUNK_CHIP} border-status-danger bg-status-danger/20 text-status-danger`}
+          className="flex shrink-0 items-center gap-1 rounded bg-status-danger/10 px-1 py-0.5 text-[11px] leading-3 text-status-danger hover:bg-status-danger/20 disabled:opacity-40"
         >
+          <Trash2 className="h-3 w-3" />
           {t("changes.discardShortConfirm")}
         </button>
       ) : (
@@ -771,54 +791,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,
@@ -861,6 +833,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) => {
@@ -876,6 +850,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).
@@ -909,7 +888,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[]>>({});
@@ -979,6 +957,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
@@ -1076,30 +1057,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;
@@ -1266,7 +1225,6 @@ export function LaneChangesPanel({
     setTreeBusy(false);
     setBusy(false);
     setError(null);
-    setCommits(null);
     setData(null);
     setDraft(null);
     setCollapsed(new Set());
@@ -1347,7 +1305,6 @@ export function LaneChangesPanel({
       if (!ok) return;
       setHistoryFile(path);
       setHistoryRef(null);
-      setCommits(null);
       setMode("history");
     });
   };
@@ -1470,25 +1427,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.
@@ -1578,7 +1588,6 @@ export function LaneChangesPanel({
 
   const fileCtx = useContextMenu<LaneChangeFile>();
   const treeCtx = useContextMenu<LaneTreeEntry>();
-  const commitCtx = useContextMenu<LaneCommit>();
   const viewCommit = (sha: string) => {
     setSha(sha);
     setRange("commit");
@@ -1754,68 +1763,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}
+      />
     </>
   );
 
@@ -1997,6 +1953,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
@@ -2067,8 +2024,7 @@ export function LaneChangesPanel({
   // 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)),
+    () => (range === "commit" ? null : fetchVia((p) => api.lanes.gitDownloadUrl(target, p))),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [range, JSON.stringify(target)]
   );
@@ -2397,10 +2353,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 ${
@@ -2415,6 +2368,12 @@ export function LaneChangesPanel({
               </div>
             )}
 
+            {!notRepo && (
+              <GitToolsButton
+                onPick={setGitTool}
+                hasRemote={git?.available ? git.hasRemote : undefined}
+              />
+            )}
             <button
               type="button"
               onClick={runReread}
@@ -2623,7 +2582,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"
@@ -2641,6 +2610,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}
@@ -2657,6 +2633,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
@@ -2669,103 +2651,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 ? (
@@ -2863,15 +2782,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
@@ -2992,6 +2958,9 @@ export function LaneChangesPanel({
                 editWanted.current = true;
                 setWhole(true);
               }}
+              onMergeEditor={() =>
+                setGitTool({ kind: "merge", path: openFile, onResolved: goBack })
+              }
             />
           ) : mode === "file" ? (
             current || (whole && text) || openImage ? (

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

@@ -15,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
@@ -23,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>
  */
 
@@ -45,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";
@@ -128,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
@@ -150,6 +165,7 @@ export function LaneGitBar({
     setPassword("");
     setPublishing(false);
     setUrl("");
+    setChoice(null);
     inFlight.current = false;
   }
   const laneNow = useRef(laneId);
@@ -168,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
@@ -190,20 +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("");
@@ -221,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 () => {
@@ -306,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])
   );
@@ -424,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>
@@ -473,9 +558,11 @@ export function LaneGitBar({
             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")}
@@ -521,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)];
 }
@@ -367,12 +373,17 @@ export function LaneGitHeader({
         className="flex min-w-0 flex-1 items-baseline gap-1.5 font-mono text-[11px]"
         title={`${git.head} ${git.subject}`}
       >
-        <span className="flex shrink-0 items-center gap-1 self-center font-semibold text-fg-primary">
-          <GitBranch className="h-3 w-3 text-fg-muted" />
-          {git.branch}
+        {/* A long branch name truncates too (after the subject has gone),
+            or it overflowed onto the head and the action icons. */}
+        <span
+          className="flex min-w-[5rem] items-center gap-1 self-center font-semibold text-fg-primary"
+          title={git.branch}
+        >
+          <GitBranch className="h-3 w-3 shrink-0 text-fg-muted" />
+          <span className="truncate">{git.branch}</span>
         </span>
         <span className="shrink-0 text-fg-muted">{git.head}</span>
-        <span className="min-w-0 truncate text-fg-muted">{git.subject}</span>
+        <span className="min-w-0 shrink-[999] truncate text-fg-muted">{git.subject}</span>
       </div>
     </>
   );

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/SessionReplay.tsx

@@ -145,7 +145,7 @@ export function SessionReplay({
       {livePane ? (
         <div
           data-testid="session-replay-live"
-          className="mx-auto flex w-full max-w-3xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
+          className="mx-auto flex w-full max-w-5xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
         >
           <span className="min-w-0 flex-1">{t("replay.live")}</span>
           <button
@@ -160,7 +160,7 @@ export function SessionReplay({
       ) : session && !resumable ? (
         <div
           data-testid="session-replay-no-resume"
-          className="mx-auto flex w-full max-w-3xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
+          className="mx-auto flex w-full max-w-5xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
         >
           <span className="min-w-0 flex-1">{t("replay.noResume", { tool })}</span>
           <button
@@ -172,7 +172,7 @@ export function SessionReplay({
           </button>
         </div>
       ) : (
-        <div className="mx-auto w-full max-w-3xl rounded-2xl border border-border p-2 shadow-sm transition-colors focus-within:border-accent/50">
+        <div className="mx-auto w-full max-w-5xl rounded-2xl border border-border p-2 shadow-sm transition-colors focus-within:border-accent/50">
           <PromptEditor
             bare
             images={images}

client/src/components/lanes/UrlPreview.tsx

@@ -0,0 +1,180 @@
+/**
+ * @file UrlPreview.tsx
+ * @description The session panel's Preview tab: a web page (a lane's dev
+ * server, mostly) shown beside the console. One bar — address, Reload, Open
+ * in a browser tab — and, before anything is open, the workspace's own ports
+ * as one-click chips. The page runs in an `<iframe src>` on ITS OWN origin:
+ * `normalizePreviewUrl` refuses the dashboard's origin and anything but
+ * http(s), and the sandbox leaves out top navigation so a page cannot move
+ * the dashboard away. A site that forbids framing (most login pages) shows
+ * blank or as the browser's broken-page icon; that is the browser's rule and
+ * cannot be read from here, so any page not on this machine gets a strip
+ * saying so with the Open button beside it. The
+ * last address is remembered per workspace in localStorage (a viewer
+ * convenience, never the server's).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ExternalLink, Globe, RotateCw } from "lucide-react";
+import { isLoopbackUrl, normalizePreviewUrl } from "../../lib/openInPreview";
+import { isSubmitEnter } from "../../lib/keys";
+import { toast } from "../../lib/toast";
+
+const KEY = (laneId: number) => `agenthub.preview.url.${laneId}`;
+
+function readSaved(laneId: number): string {
+  try {
+    return window.localStorage.getItem(KEY(laneId)) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+/** The frame's sandbox: everything a web app needs, minus moving the
+ *  dashboard (`allow-top-navigation*`). `allow-same-origin` is the PAGE's
+ *  own origin — never the dashboard's, which `normalizePreviewUrl` refuses. */
+const FRAME_SANDBOX =
+  "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-modals allow-downloads";
+
+export function UrlPreview({
+  laneId,
+  ports,
+  request,
+}: {
+  laneId: number;
+  /** The lane's bound ports, by name — the chips of the empty state. */
+  ports: Record<string, number>;
+  /** A link asked for this page (`openInPreview`); a new nonce re-opens it. */
+  request: { url: string; nonce: number } | null;
+}) {
+  const { t } = useTranslation("lanes");
+  const [url, setUrl] = useState(() => readSaved(laneId));
+  const [draft, setDraft] = useState(url);
+  const [reload, setReload] = useState(0);
+
+  // Another workspace: its own last page.
+  useEffect(() => {
+    const saved = readSaved(laneId);
+    setUrl(saved);
+    setDraft(saved);
+  }, [laneId]);
+
+  useEffect(() => {
+    if (request) go(request.url);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on the nonce
+  }, [request?.nonce]);
+
+  function go(raw: string) {
+    const next = normalizePreviewUrl(raw);
+    if (!next) {
+      toast.error(t("preview.badUrl"));
+      return;
+    }
+    setUrl(next);
+    setDraft(next);
+    setReload((n) => n + 1);
+    try {
+      window.localStorage.setItem(KEY(laneId), next);
+    } catch {
+      /* disabled storage: the tab just forgets between visits */
+    }
+  }
+
+  const openTab = () => url && window.open(url, "_blank", "noopener,noreferrer");
+  const portList = Object.entries(ports ?? {}).filter(([, p]) => Number.isInteger(p) && p > 0);
+  const btn =
+    "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-fg-muted transition-colors hover:bg-surface-4 hover:text-fg-primary disabled:opacity-40 disabled:hover:bg-transparent";
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col" data-testid="url-preview">
+      <div className="flex shrink-0 items-center gap-1 border-b border-border px-2 py-1.5">
+        <input
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (isSubmitEnter(e)) {
+              e.preventDefault();
+              go(draft);
+            }
+          }}
+          placeholder="localhost:3000"
+          aria-label={t("preview.address")}
+          spellCheck={false}
+          className="min-w-0 flex-1 rounded border border-border bg-surface-1 px-2 py-1 font-mono text-[11px] text-fg-primary"
+        />
+        <button
+          type="button"
+          className={btn}
+          disabled={!url}
+          onClick={() => setReload((n) => n + 1)}
+          title={t("preview.reload")}
+          aria-label={t("preview.reload")}
+        >
+          <RotateCw className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          className={btn}
+          disabled={!url}
+          onClick={openTab}
+          title={t("preview.openTab")}
+          aria-label={t("preview.openTab")}
+        >
+          <ExternalLink className="h-3.5 w-3.5" />
+        </button>
+      </div>
+      {url && !isLoopbackUrl(url) && (
+        // An outside site: most refuse to be framed, and a refusal cannot be
+        // detected from here — so say it, with the way out beside it.
+        <div
+          data-testid="url-preview-blocked-hint"
+          className="flex shrink-0 items-center gap-2 border-b border-border bg-surface-2 px-2 py-1.5 text-[11px] text-fg-secondary"
+        >
+          <span className="min-w-0 flex-1">{t("preview.blockedHint")}</span>
+          <button
+            type="button"
+            onClick={openTab}
+            className="flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 font-medium text-accent hover:bg-surface-4"
+          >
+            <ExternalLink className="h-3 w-3" />
+            {t("preview.openTabShort")}
+          </button>
+        </div>
+      )}
+      {url ? (
+        <iframe
+          key={`${url}#${reload}`}
+          src={url}
+          title={t("preview.title")}
+          sandbox={FRAME_SANDBOX}
+          referrerPolicy="no-referrer"
+          className="min-h-0 w-full flex-1 border-0 bg-white"
+          data-testid="url-preview-frame"
+        />
+      ) : (
+        <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
+          <Globe className="h-6 w-6 text-fg-muted" />
+          <p className="text-xs text-fg-secondary">{t("preview.empty")}</p>
+          {portList.length > 0 && (
+            <div className="flex flex-wrap justify-center gap-1.5">
+              {portList.map(([name, port]) => (
+                <button
+                  key={name}
+                  type="button"
+                  onClick={() => go(`localhost:${port}`)}
+                  title={name}
+                  className="rounded-full border border-border px-2.5 py-0.5 font-mono text-[11px] text-fg-secondary transition-colors hover:bg-surface-4 hover:text-fg-primary"
+                >
+                  localhost:{port}
+                </button>
+              ))}
+            </div>
+          )}
+          <p className="text-[11px] text-fg-muted">{t("preview.loginHint")}</p>
+        </div>
+      )}
+    </div>
+  );
+}

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,22 +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); opens an HTML file as the page
- * instead of downloading it.
+ * 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) }));
@@ -27,11 +31,15 @@ vi.mock("../../../lib/api", () => ({
   gitTarget: (lane: number, session?: string | null, source?: number | null) =>
     source ? { lane, source } : session ? { lane, session } : lane,
   isHomePlace: (p: unknown) => typeof p === "object" && p !== null && "home" in p,
+  newUploadId: (() => {
+    let n = 0;
+    return () => `upload-id-${String(++n).padStart(8, "0")}`;
+  })(),
   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: {
@@ -48,8 +56,9 @@ vi.mock("../../../lib/api", () => ({
       allTrash: vi.fn(),
       restore: vi.fn(),
       purge: vi.fn(),
-      upload: vi.fn(),
-      uploadBatch: vi.fn(),
+      uploadStaged: vi.fn(),
+      uploadBatchStaged: vi.fn(),
+      dropUpload: vi.fn(async () => null),
       uploadCheck: vi.fn(),
       zipUrl: (t: number, ps: string[]) => `/api/lanes/${t}/fs/zip?p=${ps.join("&p=")}`,
     },
@@ -74,9 +83,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" },
@@ -211,7 +241,7 @@ describe("FileExplorer", () => {
   });
 
   it("asks about a taken name on upload, and sends the choice", async () => {
-    vi.mocked(api.files.upload)
+    vi.mocked(api.files.uploadStaged)
       .mockRejectedValueOnce(
         Object.assign(new Error("taken"), { code: "EEXISTS", names: ["a.txt"] })
       )
@@ -224,19 +254,24 @@ describe("FileExplorer", () => {
     const ask = await screen.findByTestId("fx-conflict");
     await user.click(within(ask).getByRole("button", { name: "Keep both" }));
     await waitFor(() =>
-      expect(api.files.upload).toHaveBeenLastCalledWith(
+      expect(api.files.uploadStaged).toHaveBeenLastCalledWith(
         1,
         "a.txt",
         file,
         "keep",
-        expect.any(Function)
+        expect.objectContaining({ upload: expect.any(String), signal: expect.any(AbortSignal) })
       )
     );
+    // The retry names the SAME upload, so the staged bytes are not sent again,
+    // and the staged upload is dropped once answered.
+    const [first, second] = vi.mocked(api.files.uploadStaged).mock.calls.map((c) => c[4].upload);
+    expect(second).toBe(first);
+    await waitFor(() => expect(api.files.dropUpload).toHaveBeenCalledWith(1, first));
   });
 
   it("sends many small files as one batch, asking once about every taken name", async () => {
     vi.mocked(api.files.uploadCheck).mockResolvedValue({ taken: ["a.txt", "b.txt"], batch: true });
-    vi.mocked(api.files.uploadBatch).mockResolvedValue({ saved: 3, skipped: 0, paths: [] });
+    vi.mocked(api.files.uploadBatchStaged).mockResolvedValue({ saved: 3, skipped: 0, paths: [] });
     const user = userEvent.setup();
     open();
     await screen.findByText("a.txt");
@@ -245,28 +280,45 @@ describe("FileExplorer", () => {
     const ask = await screen.findByTestId("fx-conflict");
     await user.click(within(ask).getByRole("button", { name: "Replace" }));
     await waitFor(() =>
-      expect(api.files.uploadBatch).toHaveBeenCalledWith(
+      expect(api.files.uploadBatchStaged).toHaveBeenCalledWith(
         1,
         "",
         files.map((file) => ({ file, rel: file.name })),
         "replace",
-        expect.any(Function)
+        expect.objectContaining({ upload: expect.any(String), signal: expect.any(AbortSignal) })
       )
     );
     expect(api.files.uploadCheck).toHaveBeenCalledWith(1, "", ["a.txt", "b.txt", "c.txt"]);
-    expect(api.files.upload).not.toHaveBeenCalled();
+    expect(api.files.uploadStaged).not.toHaveBeenCalled();
   });
 
   it("falls back to one request per file when the server cannot take a batch", async () => {
     vi.mocked(api.files.uploadCheck).mockResolvedValue({ taken: [], batch: false });
-    vi.mocked(api.files.upload).mockResolvedValue({ path: "x" });
+    vi.mocked(api.files.uploadStaged).mockResolvedValue({ path: "x" });
     const user = userEvent.setup();
     open();
     await screen.findByText("a.txt");
     const files = ["x.txt", "y.txt"].map((n) => new File(["hi"], n));
     await user.upload(screen.getByTestId("fx-upload-files"), files);
-    await waitFor(() => expect(api.files.upload).toHaveBeenCalledTimes(2));
-    expect(api.files.uploadBatch).not.toHaveBeenCalled();
+    await waitFor(() => expect(api.files.uploadStaged).toHaveBeenCalledTimes(2));
+    expect(api.files.uploadBatchStaged).not.toHaveBeenCalled();
+  });
+
+  it("leaves a picked repo's .git out of a folder upload, with one notice", async () => {
+    vi.mocked(api.files.uploadStaged).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.uploadStaged).toHaveBeenCalledTimes(1));
+    expect(vi.mocked(api.files.uploadStaged).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 () => {
@@ -276,7 +328,7 @@ describe("FileExplorer", () => {
     Object.defineProperty(big, "size", { value: 600 * 1024 * 1024 });
     fireEvent.change(screen.getByTestId("fx-upload-files"), { target: { files: [big] } });
     await waitFor(() => expect(toast.error).toHaveBeenCalled());
-    expect(api.files.upload).not.toHaveBeenCalled();
+    expect(api.files.uploadStaged).not.toHaveBeenCalled();
   });
 
   it("restores from the Trash", async () => {
@@ -441,6 +493,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();
@@ -568,12 +647,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"));
@@ -587,26 +662,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();
@@ -614,43 +691,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 () => {
@@ -658,18 +700,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"));
@@ -677,6 +717,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} />);
@@ -837,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 () => {
@@ -947,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"
@@ -1077,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, {
@@ -1135,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(() =>
@@ -1173,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 () => {
@@ -1192,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();
     });
 
@@ -1673,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,10 @@
  * @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), that branches only the remote has are offered (and the list
+ * 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>
@@ -202,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 () => {

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/__tests__/UrlPreview.test.tsx

@@ -0,0 +1,59 @@
+/**
+ * @file UrlPreview.test.tsx
+ * @description The Preview tab: port chips before a page is open, the
+ * address bar opening a page in a sandboxed frame without top navigation,
+ * a link's request opening its page, the dashboard's own origin refused, and
+ * the framing-refusal strip shown for an outside site only.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import "../../../i18n";
+import { UrlPreview } from "../UrlPreview";
+
+beforeEach(() => window.localStorage.clear());
+
+describe("UrlPreview", () => {
+  it("offers the workspace's ports, and a chip opens that page", () => {
+    render(<UrlPreview laneId={1} ports={{ web: 3001 }} request={null} />);
+    fireEvent.click(screen.getByText("localhost:3001"));
+    const frame = screen.getByTestId("url-preview-frame");
+    expect(frame.getAttribute("src")).toBe("http://localhost:3001/");
+    expect(frame.getAttribute("sandbox")).not.toMatch(/top-navigation/);
+    expect(window.localStorage.getItem("agenthub.preview.url.1")).toBe("http://localhost:3001/");
+  });
+
+  it("opens what the address bar names, and refuses the dashboard itself", () => {
+    render(<UrlPreview laneId={2} ports={{}} request={null} />);
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: window.location.origin + "/settings" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.queryByTestId("url-preview-frame")).toBeNull();
+    fireEvent.change(input, { target: { value: "127.0.0.1:8080/app" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.getByTestId("url-preview-frame").getAttribute("src")).toBe(
+      "http://127.0.0.1:8080/app"
+    );
+  });
+
+  it("warns that an outside site may refuse to be framed, never for a local page", () => {
+    render(<UrlPreview laneId={4} ports={{}} request={null} />);
+    const input = screen.getByRole("textbox");
+    fireEvent.change(input, { target: { value: "localhost:3000" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.queryByTestId("url-preview-blocked-hint")).toBeNull();
+    fireEvent.change(input, { target: { value: "https://youtube.com" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(screen.getByTestId("url-preview-blocked-hint")).toBeTruthy();
+  });
+
+  it("opens a link's request", () => {
+    render(
+      <UrlPreview laneId={3} ports={{}} request={{ url: "http://localhost:5173/", nonce: 1 }} />
+    );
+    expect(screen.getByTestId("url-preview-frame").getAttribute("src")).toBe(
+      "http://localhost:5173/"
+    );
+  });
+});

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>
  */
 
@@ -77,7 +78,36 @@ 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";
+  "absolute z-40 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/ConsoleTabs.tsx

@@ -16,8 +16,9 @@
  * keys, Home and End move between tabs (one tab stop, APG). Errors are
  * toasts. The `+` menu opens a new tab in the free slot the server picks
  * (`slot: "auto"`) — a plain shell (`POST /api/lanes/:id/start {shell: true}`)
- * or an installed, enabled AI tool started bare on its default model, no
- * prompt (a prompt, proxy or worktree is still the workspace home's prompt
+ * or an installed, enabled AI tool started bare on its default model and
+ * the account's Session defaults (permission mode, Codex sandbox/approval/
+ * bypass), no prompt (a prompt, proxy or worktree is still the workspace home's prompt
  * box) — plus a link to Settings → Agents. Ten sessions is the server's limit
  * (`MAX_PANE_SLOT`). The bar is the console's only header: Home (the
  * workspace's home) at its left end, `actions` (the single pane's split menus)
@@ -72,6 +73,7 @@ import {
   type GroupsUpdate,
 } from "./PaneGrid";
 import { insertionIndex } from "../../lib/laneOrderStorage";
+import { readCodexDefaults, readDefaultMode } from "../../lib/sessionDefaults";
 import {
   type PaneGroups,
   MAX_PANES,
@@ -140,15 +142,21 @@ export function newTabTools(lane: Lane, aiTools: AiToolsState): string[] {
   ];
 }
 
-/** The start body of a bare tool on its default model, no prompt. Only a
- *  different tool is named, as the home does: the workspace's own keeps
- *  starting even once disabled. */
+/** The start body of a bare tool on its default model, no prompt, in the
+ *  account's Session defaults (Claude's permission mode, Codex's sandbox,
+ *  approval and bypass) — the same ones the workspace home's prompt box starts
+ *  from. Only a different tool is named, as the home does: the workspace's own
+ *  keeps starting even once disabled. */
 export function newTabBody(id: string, lane: Lane, aiTools: AiToolsState) {
   const model = aiTools.byId(id)?.defaultModel;
+  const codex = id === "codex" ? readCodexDefaults() : null;
   return {
     prompt: "",
     ...(id !== lane.tool ? { tool: id } : {}),
     ...(model ? { model } : {}),
+    ...(id === "claude" ? { permissionMode: readDefaultMode() } : {}),
+    ...(codex ? { sandbox: codex.sandbox, approval: codex.approval } : {}),
+    ...(codex?.bypass && aiTools.byId(id)?.bypass ? { bypass: true } : {}),
   };
 }
 

client/src/components/run/PaneChat.tsx

@@ -689,8 +689,11 @@ export const PaneChat = memo(function PaneChat({
     // another dashboard on the same database, or the socket dropped) would
     // otherwise leave Stop up after the turn ended.
     intervalMs: working || waiting ? 5000 : undefined,
+    // The transcript growing re-reads it too: a hook that reached another
+    // dashboard on the same database sends this one no agent_updated, and
+    // without a poll Stop never showed for a turn the chat calls Thinking….
     match: (msg) =>
-      msg.type === "agent_updated" &&
+      (msg.type === "agent_updated" || msg.type === "transcript_changed") &&
       (msg.data as { session_id?: string } | undefined)?.session_id === sessionId,
   });
 
@@ -855,7 +858,7 @@ export const PaneChat = memo(function PaneChat({
           )}
         </div>
         <div className="mx-4">
-          <div className="mx-auto w-full max-w-3xl">
+          <div className="mx-auto w-full max-w-5xl">
             {menu && (
               <PaneMenuCard
                 // A new question starts with its field closed.

client/src/components/run/TerminalView.tsx

@@ -86,16 +86,48 @@ import {
   sameFilesHere,
 } from "../../lib/promptAttach";
 import { attachImeInput } from "../../lib/imeInput";
+import { wheelReports, type WheelState } from "../../lib/wheelReports";
 import { nativePasteKey, nativePasteWorks, readNativePaste } from "../../lib/nativePaste";
 import { usePermissions } from "../AuthGate";
 import { TERMINAL_FONTS, readTerminalFont } from "../../lib/terminalFont";
 import { FONT_SIZE_EVENT, readTerminalFontSize } from "../../lib/fontSize";
+import { openInPreview } from "../../lib/openInPreview";
 
 type DropState = "hint" | "paste" | "uploading" | "failed" | "tooBig" | "tooBigLocalPaste";
 
 /** localStorage flag for xterm's screen-reader mode (a Settings toggle can set it later). */
 export const SCREEN_READER_KEY = "agenthub.terminal.screenReader";
 /** localStorage flag: the "Shift+drag selects text" hint was dismissed. */
+/** The atlas a WebGL addon draws from: @xterm/addon-webgl 0.19 keeps these
+ *  fields unminified in its build. Undefined on any other shape. */
+type AtlasPages = { pages: { version: number }[] };
+const atlasOf = (addon: WebglAddon): AtlasPages | undefined => {
+  const atlas = (addon as unknown as { _renderer?: { _charAtlas?: AtlasPages } })._renderer
+    ?._charAtlas;
+  return Array.isArray(atlas?.pages) ? atlas : undefined;
+};
+/** Last version handed out by `restampAtlas`, shared by every pane. */
+let atlasStamp = 0;
+/**
+ * Gives every page of the addon's glyph atlas a version no texture slot has
+ * uploaded, so EVERY renderer sharing that atlas re-uploads every page from
+ * its canvas on its next draw — what addon-webgl 0.20 does with globally
+ * monotonic page versions. 0.19 counts per page, so after a merge shifts the
+ * pages down a slot can hold a stale page whose counter happens to match, and
+ * glyphs are sampled squeezed or foreign. Steps of 2^24 stay clear of the
+ * per-glyph increments a page makes before the next restamp. False when the
+ * addon is not the shape this knows.
+ */
+const restampAtlas = (addon: WebglAddon): boolean => {
+  const atlas = atlasOf(addon);
+  if (!atlas) return false;
+  for (const page of atlas.pages) {
+    atlasStamp += 2 ** 24;
+    page.version = atlasStamp;
+  }
+  return true;
+};
+
 const SELECT_HINT_KEY = "agenthub.terminal.selectHintSeen";
 const readFlag = (key: string) => {
   try {
@@ -432,7 +464,10 @@ export const TerminalView = memo(function TerminalView({
       searchRef.current = search;
       term.loadAddon(new ClipboardWithProvider(undefined, clipboardProvider));
       term.loadAddon(
-        new WebLinksAddon((_e, uri) => {
+        new WebLinksAddon((e, uri) => {
+          // A local page opens in the session panel's Preview (one rule
+          // for every link, `lib/openInPreview.ts`); Ctrl/Cmd keeps a tab.
+          if (!e.ctrlKey && !e.metaKey && !e.shiftKey && openInPreview(uri)) return;
           window.open(uri, "_blank", "noopener,noreferrer");
         })
       );
@@ -468,7 +503,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
@@ -489,9 +525,32 @@ export const TerminalView = memo(function TerminalView({
       // wheel report itself — psmux scrolls, or hands it to the pane's app.
       // ponytail: at 1;1, which is all psmux reports to the app anyway.
       let ownWheel = false;
+      // Tracked: the reports are this pane's own too — one per
+      // LINES_PER_REPORT rows of travel (lib/wheelReports.ts), where xterm
+      // sends one per event and damps a touchpad ×0.3. SGR, as tmux always
+      // asks for it; at the pointer's cell, with xterm's modifier bits.
+      const wheelState: WheelState = { partial: 0 };
+      const sendWheel = (ev: WheelEvent) => {
+        const screen = term.element?.querySelector(".xterm-screen");
+        const box = screen?.getBoundingClientRect();
+        if (!box || !box.height || !box.width) return;
+        const n = wheelReports(wheelState, ev, box.height / term.rows, term.rows);
+        const ws = wsRef.current;
+        if (!n || !ws || ws.readyState !== WebSocket.OPEN) return;
+        const clamp = (v: number, max: number) => Math.min(max, Math.max(1, v));
+        const col = clamp(Math.floor(((ev.clientX - box.left) / box.width) * term.cols) + 1, term.cols);
+        const row = clamp(Math.floor(((ev.clientY - box.top) / box.height) * term.rows) + 1, term.rows);
+        const button = (n < 0 ? 64 : 65) | (ev.altKey ? 8 : 0) | (ev.ctrlKey ? 16 : 0);
+        ws.send(`\x1b[<${button};${col};${row}M`.repeat(Math.abs(n)));
+      };
       term.attachCustomWheelEventHandler((ev) => {
         const mode = term.modes.mouseTrackingMode;
         const tracked = mode !== "none" && mode !== "x10";
+        // Shift+wheel stays xterm's (it reports nothing for it).
+        if (tracked && !ev.shiftKey) {
+          sendWheel(ev);
+          return false;
+        }
         if (!tracked && ownWheel) {
           if (ev.deltaY && wsRef.current?.readyState === WebSocket.OPEN) {
             wsRef.current.send(`\x1b[<${ev.deltaY < 0 ? 64 : 65};1;1M`);
@@ -761,6 +820,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 +876,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__/TerminalView.test.tsx

@@ -21,6 +21,7 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
+import { Terminal } from "@xterm/xterm";
 import { TerminalView, altArrowSeq, loadXterm } from "../TerminalView";
 import { pasteToLane, pasteToRun } from "../../../lib/panePaste";
 import { __resetNativePaste, nativePasteWorks } from "../../../lib/nativePaste";
@@ -63,6 +64,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 +96,7 @@ vi.mock("@xterm/xterm", () => ({
       return { dispose: vi.fn() };
     },
     dispose: disposeMock,
+    refresh: refreshMock,
     loadAddon: loadAddonMock,
     attachCustomWheelEventHandler: wheelHandlerMock,
     attachCustomKeyEventHandler: keyHandlerMock,
@@ -112,21 +117,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;
   }),
 }));
@@ -299,13 +327,33 @@ describe("TerminalView", () => {
     expect(wheelHandlerMock.mock.calls[0]![0]!(new Event("wheel"))).toBe(false);
   });
 
-  it("lets the wheel through once the pane's program tracks the mouse", () => {
-    // tmux with `mouse on` sets this; the wheel must reach it as a real SGR
-    // report, so returning false here would kill scrolling entirely.
+  /** Gives the mocked terminal an on-screen box: 10px per column and per row. */
+  const screenBox = () => {
+    const term = vi.mocked(Terminal).mock.results[vi.mocked(Terminal).mock.results.length - 1]!.value as { element: HTMLElement };
+    const screen = document.createElement("div");
+    screen.className = "xterm-screen";
+    screen.getBoundingClientRect = () =>
+      ({ left: 0, top: 0, width: termState.cols * 10, height: termState.rows * 10 }) as DOMRect;
+    term.element.appendChild(screen);
+  };
+
+  it("sends a tracked wheel itself, one report per LINES_PER_REPORT rows, at the pointer", () => {
+    // tmux with `mouse on` sets this. xterm would send ONE report per event and
+    // damp a touchpad ×0.3 — a swipe crawled — so the pane sends its own.
     termState.modes.mouseTrackingMode = "any";
     termState.buffer.active.type = "alternate";
     render(<TerminalView runId="agenthub-lane-1" wsBaseUrl="ws://localhost:4820" />);
-    expect(wheelHandlerMock.mock.calls[0]![0]!(new Event("wheel"))).toBe(true);
+    screenBox();
+    const ws = MockWebSocket.instances[MockWebSocket.instances.length - 1]!;
+    ws.sent.length = 0;
+    const wheel = wheelHandlerMock.mock.calls[0]![0]!;
+    // A notch of 6 rows: one report, at the cell under the pointer.
+    expect(wheel(new WheelEvent("wheel", { deltaY: -60, clientX: 45, clientY: 72 }))).toBe(false);
+    expect(ws.sent).toEqual(["\x1b[<64;5;8M"]);
+    // A touchpad: 4 steps of 25px = 10 rows = two reports, sent as they add up.
+    ws.sent.length = 0;
+    for (let i = 0; i < 4; i++) wheel(new WheelEvent("wheel", { deltaY: 25, clientX: 5, clientY: 5 }));
+    expect(ws.sent.join("")).toBe("\x1b[<65;1;1M".repeat(2));
   });
 
   it("lets the wheel through on a normal buffer, where xterm scrolls scrollback", () => {
@@ -334,10 +382,11 @@ describe("TerminalView", () => {
     expect(wheel(new WheelEvent("wheel", { deltaY: -100 }))).toBe(false);
     expect(wheel(new WheelEvent("wheel", { deltaY: 100 }))).toBe(false);
     expect(ws.sent).toEqual(["\x1b[<64;1;1M", "\x1b[<65;1;1M"]);
-    // Tracked again (a tmux that does report): xterm sends it, never twice.
+    // Tracked again (a tmux that does report): sent once, by the tracked path.
     termState.modes.mouseTrackingMode = "any";
-    expect(wheel(new WheelEvent("wheel", { deltaY: -100 }))).toBe(true);
-    expect(ws.sent).toHaveLength(2);
+    screenBox();
+    expect(wheel(new WheelEvent("wheel", { deltaY: -100 }))).toBe(false);
+    expect(ws.sent).toHaveLength(3);
   });
 
   it("keeps Shift+Tab in the terminal instead of letting focus escape", () => {
@@ -488,6 +537,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

@@ -19,14 +19,30 @@
  * the next one below) — and, for
  * a user with their own Linux account (S3), their own HTTPS
  * logins. The host account's HTTPS logins are the shared Git credentials
- * table above it, so this lists them only for a member. The private key and
+ * table above it, so this lists them only for a member. **Commit signing**
+ * (under the author): one picker signs every commit with one of the keys
+ * (`PUT /api/me/git/signing`), and **Import a key you have** takes a private
+ * key file or paste (`POST /api/me/git/ssh-key/import`) and, ticked by
+ * default, signs with it in the same step. The private key and
  * every token are write-only: the server never returns them. A host identity
  * seen by a non-admin is read-only.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { useCallback, useEffect, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { Cloud, Copy, GitBranch, KeyRound, Plus, RefreshCw, Server, Trash2 } from "lucide-react";
+import {
+  Cloud,
+  Copy,
+  FileKey,
+  GitBranch,
+  KeyRound,
+  PenLine,
+  Plus,
+  RefreshCw,
+  Server,
+  Trash2,
+  Upload,
+} from "lucide-react";
 import { api, type GitIdentity } from "../../lib/api";
 import { confirmDialog } from "../../lib/confirm";
 import { copyText } from "../../lib/clipboard";
@@ -41,32 +57,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 +159,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 +188,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>
@@ -263,6 +232,218 @@ function GitHostForm({
   );
 }
 
+/**
+ * Commit signing: the key every commit is signed with (one picker — choosing
+ * a key turns signing on, "Don't sign" off) and Import a key the user already
+ * has, which signs with it in the same step unless unticked.
+ */
+function SigningCard({
+  id,
+  keys,
+  keyLabel,
+  busy,
+  run,
+}: {
+  id: GitIdentity;
+  keys: Key[];
+  keyLabel: (keyId: string | null | undefined) => string;
+  busy: boolean;
+  run: (fn: () => Promise<GitIdentity>, done?: string) => Promise<boolean>;
+}) {
+  const { t } = useTranslation("settings");
+  const signing = id.signing ?? { state: "off" as const, key: null, path: null };
+  const current = signing.state === "on" ? keys.find((k) => k.id === signing.key) : undefined;
+  const [form, setForm] = useState<{ text: string; name: string; sign: boolean } | null>(null);
+
+  /** Sign with `keyId` (null = stop), asking before taking over the user's own setup. */
+  const choose = async (keyId: string | null) => {
+    if (keyId && signing.state === "foreign") {
+      if (
+        !(await confirmDialog({
+          title: t("gitIdentity.signReplaceConfirm", {
+            path: signing.path,
+            key: keyLabel(keyId),
+          }),
+          confirmLabel: t("gitIdentity.signReplace"),
+        }))
+      )
+        return;
+    }
+    await run(
+      () => api.gitIdentity.setSigning(keyId, signing.state === "foreign"),
+      keyId ? t("gitIdentity.signSaved", { key: keyLabel(keyId) }) : t("gitIdentity.signStopped")
+    );
+  };
+
+  const doImport = async () => {
+    if (!form) return;
+    let imported: string | null = null;
+    let foreign = false;
+    const ok = await run(
+      async () => {
+        const r = await api.gitIdentity.importKey({
+          privateKey: form.text,
+          ...(form.name.trim() ? { name: form.name.trim() } : {}),
+          sign: form.sign,
+        });
+        imported = r.imported?.id ?? null;
+        foreign = r.signError?.code === "EFOREIGNSIGN";
+        return r;
+      },
+      t("gitIdentity.imported", { name: form.name.trim() || "signing" })
+    );
+    if (!ok) return;
+    setForm(null);
+    // Saved, but the user's own signing setup was left alone: ask once.
+    if (imported && foreign) await choose(imported);
+  };
+
+  const readFile = async (file: File | undefined) => {
+    if (!file || !form) return;
+    // A key file is a few KB; anything far larger is not one.
+    if (file.size > 32 * 1024) return toast.error(t("gitIdentity.importPaste"));
+    const text = await file.text();
+    setForm({ ...form, text });
+  };
+
+  return (
+    <section
+      className="space-y-2 rounded-lg border border-border p-3"
+      aria-label={t("gitIdentity.signTitle")}
+    >
+      <div className="flex items-center gap-2">
+        <PenLine className="h-4 w-4 text-fg-muted" aria-hidden />
+        <h3 className="flex-1 text-xs font-semibold text-fg-primary">
+          {t("gitIdentity.signTitle")}
+        </h3>
+        {id.writable && !form && (
+          <button
+            type="button"
+            className={BTN}
+            disabled={busy}
+            onClick={() => setForm({ text: "", name: "", sign: true })}
+          >
+            <Upload className="h-3.5 w-3.5" />
+            {t("gitIdentity.importKey")}
+          </button>
+        )}
+      </div>
+      <p className="text-[11px] text-fg-muted">{t("gitIdentity.signIntro")}</p>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <span
+          data-testid="git-signing-state"
+          className={`min-w-0 flex-1 text-[11px] ${
+            signing.state === "on" ? "text-status-success" : "text-fg-secondary"
+          }`}
+        >
+          {signing.state === "on"
+            ? t("gitIdentity.signOn", { key: keyLabel(signing.key) })
+            : signing.state === "foreign"
+              ? t("gitIdentity.signForeign", { path: signing.path })
+              : t("gitIdentity.signOff")}
+        </span>
+        {keys.length > 0 && (
+          <select
+            aria-label={t("gitIdentity.signKey")}
+            value={signing.state === "on" ? (signing.key ?? "") : ""}
+            disabled={busy || !id.writable}
+            onChange={(e) => void choose(e.target.value || null)}
+            className="select !py-1 !text-xs"
+          >
+            <option value="">
+              {signing.state === "foreign" ? signing.path : t("gitIdentity.signNone")}
+            </option>
+            {keys
+              .filter((k) => k.id)
+              .map((k) => (
+                <option key={k.id} value={k.id}>
+                  {keyLabel(k.id)}
+                </option>
+              ))}
+          </select>
+        )}
+      </div>
+
+      {current && (
+        <Step n={1}>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="flex-1">{t("gitIdentity.signHostStep")}</span>
+            <button type="button" className={BTN} onClick={() => void copyText(current.publicKey)}>
+              <Copy className="h-3.5 w-3.5" />
+              {t("gitIdentity.copy")}
+            </button>
+          </div>
+          <div className="truncate font-mono text-[10px] text-fg-muted">{current.fingerprint}</div>
+        </Step>
+      )}
+
+      {form && (
+        <form
+          className="space-y-2 rounded border border-border p-2.5"
+          aria-label={t("gitIdentity.importTitle")}
+          onSubmit={(e) => {
+            e.preventDefault();
+            void doImport();
+          }}
+        >
+          <div className="text-xs font-medium text-fg-primary">{t("gitIdentity.importTitle")}</div>
+          <label className={`${BTN} cursor-pointer`}>
+            <FileKey className="h-3.5 w-3.5" />
+            {t("gitIdentity.importFile")}
+            <input
+              type="file"
+              className="sr-only"
+              onChange={(e) => void readFile(e.target.files?.[0])}
+            />
+          </label>
+          <textarea
+            aria-label={t("gitIdentity.importPaste")}
+            placeholder={t("gitIdentity.importPaste")}
+            value={form.text}
+            spellCheck={false}
+            autoComplete="off"
+            rows={4}
+            onChange={(e) => setForm({ ...form, text: e.target.value })}
+            className={`${INPUT} resize-y font-mono text-[10px]`}
+          />
+          <div className="flex flex-wrap items-center gap-3">
+            <input
+              aria-label={t("gitIdentity.importName")}
+              placeholder={t("gitIdentity.importName")}
+              value={form.name}
+              autoComplete="off"
+              onChange={(e) => setForm({ ...form, name: e.target.value.toLowerCase() })}
+              className={`${INPUT} !w-40 font-mono`}
+            />
+            <label className="flex items-center gap-1.5 text-[11px] text-fg-secondary">
+              <input
+                type="checkbox"
+                checked={form.sign}
+                onChange={(e) => setForm({ ...form, sign: e.target.checked })}
+              />
+              {t("gitIdentity.importSign")}
+            </label>
+          </div>
+          <p className="text-[10px] text-fg-muted">{t("gitIdentity.importNote")}</p>
+          <div className="flex gap-2">
+            <button
+              type="submit"
+              disabled={busy || !form.text.trim()}
+              className="rounded border border-accent/40 bg-accent/15 px-3 py-1 text-xs text-accent hover:bg-accent/25 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {t("gitIdentity.importSubmit")}
+            </button>
+            <button type="button" onClick={() => setForm(null)} className={BTN}>
+              {t("gitCreds.cancel")}
+            </button>
+          </div>
+        </form>
+      )}
+    </section>
+  );
+}
+
 export function GitIdentitySettings() {
   const { t } = useTranslation("settings");
   const [id, setId] = useState<GitIdentity | null>(null);
@@ -413,28 +594,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(
@@ -606,6 +800,10 @@ export function GitIdentitySettings() {
         )}
       </form>
 
+      {id.signing !== undefined && (
+        <SigningCard id={id} keys={keys} keyLabel={keyLabel} busy={busy} run={run} />
+      )}
+
       <div className="space-y-3 rounded-lg border border-border p-3">
         <div className="flex items-center gap-2">
           <KeyRound className="h-4 w-4 text-fg-muted" aria-hidden />
@@ -650,6 +848,11 @@ export function GitIdentitySettings() {
                     onRemove={() => removeNamed(k.id!)}
                   >
                     <Step n={2}>{t("gitIdentity.gitHubStepAdd")}</Step>
+                    {id.signing?.state === "on" && id.signing.key === k.id && (
+                      <div className="text-[10px] text-status-success">
+                        {t("gitIdentity.signingBadge")}
+                      </div>
+                    )}
                     <Step n={3}>
                       {t("gitIdentity.namedGitStepHost", { name: k.name })}
                       {loginRows(rows, (r) => `ssh://${r.alias}/ → ${r.user}@${r.host}`)}
@@ -689,14 +892,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

@@ -7,7 +7,9 @@
  * other host under "Other SSH hosts" — each kind of host in its own tab, so
  * the sections never mix; "Add another key" makes a named key as one more
  * card in its own tab, a second AWS account is saved from that card under
- * the key's name with that key, and a second GitHub key is tied to its host.
+ * the key's name with that key, and a second GitHub key is tied to its host;
+ * commit signing: a key picked signs commits, an imported key signs in the
+ * same step, and taking over the user's own signing key asks first.
  * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
  */
 import { describe, it, expect, vi, beforeEach } from "vitest";
@@ -31,6 +33,8 @@ vi.mock("../../../lib/api", () => ({
       saveHttps: vi.fn(),
       saveAuthor: vi.fn(),
       removeHttps: vi.fn(),
+      importKey: vi.fn(),
+      setSigning: vi.fn(),
     },
   },
 }));
@@ -139,27 +143,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 +288,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 +337,57 @@ 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();
+  });
+
+  it("signs commits with an imported key in one step", async () => {
+    const signingKey = {
+      ...KEY,
+      id: "id_ed25519_signing",
+      type: "ed25519" as const,
+      name: "signing",
+    };
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(
+      view({ sshKeys: [], signing: { state: "off", key: null, path: null } })
+    );
+    vi.mocked(api.gitIdentity.importKey).mockResolvedValue({
+      ...view({
+        sshKeys: [signingKey],
+        signing: { state: "on", key: "id_ed25519_signing", path: null },
+      }),
+      imported: signingKey,
+      signError: null,
+    });
+    render(<GitIdentitySettings />);
+    await userEvent.click(await screen.findByRole("button", { name: "Import a key you have" }));
+    const form = screen.getByRole("form", { name: "Import an existing private key" });
+    await userEvent.type(
+      within(form).getByLabelText(/paste the private key/),
+      "-----BEGIN OPENSSH PRIVATE KEY-----x"
+    );
+    await userEvent.click(within(form).getByRole("button", { name: "Import" }));
+    expect(api.gitIdentity.importKey).toHaveBeenCalledWith({
+      privateKey: "-----BEGIN OPENSSH PRIVATE KEY-----x",
+      sign: true,
+    });
+    expect(await screen.findByTestId("git-signing-state")).toHaveTextContent(/signed with signing/);
+    expect(confirmDialog).not.toHaveBeenCalled();
+  });
+
+  it("asks before taking over a signing key the user set up themselves", async () => {
+    const k = { ...KEY, id: "id_ed25519", type: "ed25519" as const, name: null };
+    vi.mocked(api.gitIdentity.get).mockResolvedValue(
+      view({ sshKeys: [k], signing: { state: "foreign", key: null, path: "~/.ssh/id_ed25519" } })
+    );
+    vi.mocked(api.gitIdentity.setSigning).mockResolvedValue(
+      view({ sshKeys: [k], signing: { state: "on", key: "id_ed25519", path: null } })
+    );
+    render(<GitIdentitySettings />);
+    expect(await screen.findByTestId("git-signing-state")).toHaveTextContent("~/.ssh/id_ed25519");
+    await userEvent.selectOptions(screen.getByLabelText("Signing key"), "id_ed25519");
+    expect(confirmDialog).toHaveBeenCalled();
+    await waitFor(() =>
+      expect(api.gitIdentity.setSigning).toHaveBeenCalledWith("id_ed25519", true)
+    );
   });
 });

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,7 +2,8 @@
  * @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), its spend quota (the
@@ -33,6 +34,7 @@ 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";
@@ -86,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);
@@ -138,6 +141,7 @@ 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];
@@ -243,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 })}
@@ -363,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")}>

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

@@ -16,6 +16,7 @@ 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) => {

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",
@@ -196,7 +197,7 @@
   "gitBar.switchApply": "Switch branch",
   "gitBar.switchCurrent": "current",
   "gitBar.remoteBranches": "On the remote — switching creates the local branch",
-  "gitBar.switchDirty": "Commit or discard the uncommitted changes first",
+  "gitBar.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.",
@@ -214,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",
@@ -231,6 +231,42 @@
   "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.waiting": "The dashboard is restarting — the upload resumes when it is back.",
+  "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}}",
@@ -342,6 +378,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",
@@ -349,6 +386,16 @@
   "menu.remove": "Delete workspace…",
   "panel.changes": "Changes",
   "panel.analyst": "Analyst",
+  "panel.preview": "Preview",
+  "preview.title": "Page preview",
+  "preview.address": "Page address",
+  "preview.reload": "Reload",
+  "preview.openTab": "Open in a browser tab",
+  "preview.badUrl": "Can't open that address — only an http(s) page other than AgentHub itself.",
+  "preview.empty": "Type an address, or click a localhost link in the chat or terminal.",
+  "preview.loginHint": "A blank page? The site may forbid embedding or need a login — open it in a browser tab.",
+  "preview.blockedHint": "Sites like YouTube, Google or a login page refuse to show inside another page. A blank page or a broken-page icon means that — open it in a browser tab.",
+  "preview.openTabShort": "Open tab",
   "replay.placeholder": "Message to continue this session…",
   "replay.hint": "Sending resumes the session in a free pane.",
   "replay.send": "Send",
@@ -505,8 +552,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",
@@ -533,9 +578,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",
@@ -568,7 +615,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",
@@ -591,6 +637,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.",
@@ -599,6 +646,7 @@
   "fx.pasted": "Pasted.",
   "fx.crossOnlyWorkspace": "These items can only be pasted where they came from (a session worktree, an extra folder, or between two homes).",
   "fx.needsUpgrade": "This needs the updated server helper — ask an admin to run `agenthub server install-system` once.",
+  "fx.secret": "Hidden folders at the top of a home (.ssh, .config…) are not editable here — use a terminal. For an SSH key to clone or sign commits: Settings → Git.",
   "fx.conflictTitle": "Already there",
   "fx.conflictBody": "This name is taken in the destination: {{names}}",
   "fx.conflictAll": "Do this for every remaining file",
@@ -676,5 +724,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/settings.json

@@ -883,6 +883,28 @@
     "authorName": "Name",
     "authorEmail": "Email",
     "authorUnset": "Not set yet: commits from the dashboard and your agents fail until a name and email are saved. Filled in from your account — check and save.",
+    "signTitle": "Commit signing",
+    "signIntro": "Sign every commit — from your terminal, the Changes panel or an agent — with one of your SSH keys, so a host that requires signed commits accepts your push.",
+    "signOff": "Commits are not signed.",
+    "signOn": "Every commit is signed with {{key}}.",
+    "signForeign": "Commits are signed with a key you set up yourself: {{path}}.",
+    "signKey": "Signing key",
+    "signNone": "Don't sign",
+    "signHostStep": "Add this public key to your account on the host as a SIGNING key (Gitea/GitHub: SSH / GPG Keys — on Gitea press Verify), and keep your commit email above the same as the host account's.",
+    "signReplaceConfirm": "Your git already signs with {{path}}. Switch to {{key}}?",
+    "signReplace": "Switch",
+    "signSaved": "Commits are now signed with {{key}}.",
+    "signStopped": "Commits are no longer signed.",
+    "importKey": "Import a key you have",
+    "importTitle": "Import an existing private key",
+    "importFile": "Choose the key file",
+    "importPaste": "…or paste the private key (-----BEGIN … PRIVATE KEY-----)",
+    "importName": "Name (optional)",
+    "importSign": "Sign my commits with it",
+    "importNote": "The key must have no passphrase (a dashboard commit has nowhere to type one). It is stored in your own account; only its public half is ever shown again.",
+    "importSubmit": "Import",
+    "imported": "Key {{name}} imported.",
+    "signingBadge": "Signs commits",
     "authorSaved": "Commit author saved.",
     "title": "Your git identity",
     "descriptionMember": "Your own SSH key and HTTPS logins, kept in your own home. Add workspace → Clone uses them, and the clone keeps them for its later fetch, pull and push.",
@@ -904,18 +926,20 @@
     "terminalHint": "A clone, fetch or push you type yourself (in a pane or over SSH) uses this key, then your own ~/.ssh keys. Sets core.sshCommand in your ~/.gitconfig.",
     "terminalForeign": "Your ~/.gitconfig already sets its own core.sshCommand, so AgentHub leaves it alone. Remove it to use this key in the terminal.",
     "sshIntro": "Use the section for where your code lives. Each kind of host takes its own key; you need only the ones you use.",
-    "gitHubTitle": "GitHub · GitLab · Gitea · Bitbucket",
+    "gitHubTitle": "GitHub · GitLab · Gitea · Bitbucket · Backlog",
     "gitHubSub": "ED25519 key — the git@… SSH address",
-    "gitHubStepAdd": "Add it to your account on the host: GitHub → Settings → SSH and GPG keys → New SSH key. GitLab: Preferences → SSH Keys. Paste the whole line.",
+    "gitHubStepAdd": "Add it to your account on the host and paste the whole line: GitHub → Settings → SSH and GPG keys. GitLab → Preferences → SSH Keys. Gitea → Settings → SSH / GPG Keys. Backlog → Personal settings → Register SSH key.",
     "awsTitle": "AWS CodeCommit",
     "awsSub": "RSA 4096 key — AWS accepts only RSA",
     "stepCopy": "Copy the public key.",
     "awsStepUpload": "In the AWS console: IAM → Users → your user → Security credentials → SSH public keys for AWS CodeCommit → Upload SSH public key, and paste it.",
-    "awsStepKeyId": "AWS then shows an SSH key ID (it starts with APKA). Paste it here and pick the region of your repositories:",
+    "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,11 +953,11 @@
     "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>.",
-    "tabGit": "GitHub · GitLab",
+    "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": "Git (GitHub, GitLab, Gitea, Backlog…)",
     "tabOther": "Other hosts",
     "addKey": "Add another key",
-    "namedGitSub": "ED25519 · for one more GitHub/GitLab account.",
+    "namedGitSub": "ED25519 · for one more account on a git host.",
     "namedGitStepHost": "Tie it to its host, so a clone through ssh://{{name}}/… offers only this key (git@host would log in with the default key’s account):",
     "namedAwsSub": "RSA · for one more AWS account.",
     "removeKeyNamed": "Delete key {{name}}"
@@ -1396,6 +1420,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.",
@@ -111,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",

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",
@@ -196,7 +197,7 @@
   "gitBar.switchApply": "Chuyển nhánh",
   "gitBar.switchCurrent": "hiện tại",
   "gitBar.remoteBranches": "Trên remote — switch sẽ tạo nhánh local",
-  "gitBar.switchDirty": "Hãy commit hoặc bỏ các thay đổi chưa commit trước",
+  "gitBar.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.",
@@ -214,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",
@@ -231,6 +231,42 @@
   "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.waiting": "Dashboard đang khởi động lại — tải lên sẽ tiếp tục khi có kết nối.",
+  "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}}",
@@ -342,6 +378,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",
@@ -349,6 +386,16 @@
   "menu.remove": "Xóa workspace…",
   "panel.changes": "Thay đổi",
   "panel.analyst": "Analyst",
+  "panel.preview": "Xem trang",
+  "preview.title": "Xem trước trang web",
+  "preview.address": "Địa chỉ trang",
+  "preview.reload": "Tải lại",
+  "preview.openTab": "Mở trong tab trình duyệt",
+  "preview.badUrl": "Không mở được địa chỉ này — chỉ mở được trang http(s), không phải chính AgentHub.",
+  "preview.empty": "Nhập địa chỉ, hoặc bấm một link localhost trong chat hay terminal.",
+  "preview.loginHint": "Trang trắng? Trang có thể chặn nhúng hoặc cần đăng nhập — hãy mở trong tab trình duyệt.",
+  "preview.blockedHint": "Các trang như YouTube, Google hay trang đăng nhập không cho hiện bên trong trang khác. Thấy trang trắng hoặc biểu tượng lỗi là vì vậy — hãy mở trong tab trình duyệt.",
+  "preview.openTabShort": "Mở tab",
   "replay.placeholder": "Nhắn để tiếp tục session này…",
   "replay.hint": "Gửi tin sẽ resume session trong một pane trống.",
   "replay.send": "Gửi",
@@ -505,8 +552,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",
@@ -533,9 +578,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",
@@ -568,7 +615,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ề",
@@ -591,6 +637,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.",
@@ -599,6 +646,7 @@
   "fx.pasted": "Đã dán.",
   "fx.crossOnlyWorkspace": "Các mục này chỉ dán được ở nơi chúng được lấy ra (worktree của session, thư mục phụ, hoặc giữa hai home).",
   "fx.needsUpgrade": "Cần cập nhật helper của server — nhờ admin chạy `agenthub server install-system` một lần.",
+  "fx.secret": "Thư mục ẩn ở cấp đầu home (.ssh, .config…) không chỉnh được ở đây — hãy dùng terminal. Cần SSH key để clone hay ký commit: Settings → Git.",
   "fx.conflictTitle": "Đã có sẵn",
   "fx.conflictBody": "Tên này đã có ở nơi đến: {{names}}",
   "fx.conflictAll": "Áp dụng cho tất cả file còn lại",
@@ -676,5 +724,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/settings.json

@@ -871,6 +871,28 @@
     "authorName": "Tên",
     "authorEmail": "Email",
     "authorUnset": "Chưa đặt: commit từ dashboard và từ agent của bạn sẽ lỗi cho tới khi lưu tên và email. Đã điền sẵn từ tài khoản — kiểm tra rồi bấm Lưu.",
+    "signTitle": "Ký commit",
+    "signIntro": "Ký mọi commit — trong terminal, ở panel Thay đổi hay do agent tạo — bằng một SSH key của bạn, để host yêu cầu commit có chữ ký chấp nhận lần push của bạn.",
+    "signOff": "Commit chưa được ký.",
+    "signOn": "Mọi commit đang được ký bằng {{key}}.",
+    "signForeign": "Commit đang được ký bằng key bạn tự cấu hình: {{path}}.",
+    "signKey": "Key dùng để ký",
+    "signNone": "Không ký",
+    "signHostStep": "Thêm public key này vào tài khoản trên host dưới dạng key KÝ (Gitea/GitHub: SSH / GPG Keys — trên Gitea bấm Verify), và giữ email commit ở trên trùng với email tài khoản trên host.",
+    "signReplaceConfirm": "Git của bạn đang ký bằng {{path}}. Chuyển sang {{key}}?",
+    "signReplace": "Chuyển",
+    "signSaved": "Commit giờ được ký bằng {{key}}.",
+    "signStopped": "Commit không còn được ký.",
+    "importKey": "Nhập key có sẵn",
+    "importTitle": "Nhập private key có sẵn",
+    "importFile": "Chọn file key",
+    "importPaste": "…hoặc dán private key (-----BEGIN … PRIVATE KEY-----)",
+    "importName": "Tên (không bắt buộc)",
+    "importSign": "Dùng key này để ký commit",
+    "importNote": "Key không được có passphrase (commit từ dashboard không có chỗ nhập). Key được lưu trong tài khoản của chính bạn; sau khi nhập chỉ public key được hiển thị.",
+    "importSubmit": "Nhập",
+    "imported": "Đã nhập key {{name}}.",
+    "signingBadge": "Ký commit",
     "authorSaved": "Đã lưu tác giả commit.",
     "title": "Danh tính git của bạn",
     "descriptionMember": "SSH key và đăng nhập HTTPS riêng của bạn, lưu trong home của chính bạn. Add workspace → Clone dùng chúng, và bản clone giữ lại cho các lần fetch, pull, push sau.",
@@ -892,18 +914,20 @@
     "terminalHint": "Lệnh clone, fetch hay push bạn tự gõ (trong pane hoặc qua SSH) sẽ dùng key này, sau đó tới các key trong ~/.ssh của bạn. Ghi core.sshCommand vào ~/.gitconfig của bạn.",
     "terminalForeign": "~/.gitconfig của bạn đã tự đặt core.sshCommand nên AgentHub không động vào. Xoá nó đi nếu muốn dùng key này trong terminal.",
     "sshIntro": "Dùng đúng mục theo nơi chứa code của bạn. Mỗi loại host dùng một key riêng; chỉ cần tạo key cho nơi bạn dùng.",
-    "gitHubTitle": "GitHub · GitLab · Gitea · Bitbucket",
+    "gitHubTitle": "GitHub · GitLab · Gitea · Bitbucket · Backlog",
     "gitHubSub": "Key ED25519 — địa chỉ SSH dạng git@…",
-    "gitHubStepAdd": "Thêm vào tài khoản trên host: GitHub → Settings → SSH and GPG keys → New SSH key. GitLab: Preferences → SSH Keys. Dán nguyên dòng.",
+    "gitHubStepAdd": "Thêm vào tài khoản trên host, dán nguyên dòng: GitHub → Settings → SSH and GPG keys. GitLab → Preferences → SSH Keys. Gitea → Settings → SSH / GPG Keys. Backlog → Cài đặt cá nhân → Đăng ký SSH key.",
     "awsTitle": "AWS CodeCommit",
     "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,11 +941,11 @@
     "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>.",
-    "tabGit": "GitHub · GitLab",
+    "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": "Git (GitHub, GitLab, Gitea, Backlog…)",
     "tabOther": "Host khác",
     "addKey": "Thêm key khác",
-    "namedGitSub": "ED25519 · cho thêm một tài khoản GitHub/GitLab.",
+    "namedGitSub": "ED25519 · cho thêm một tài khoản trên git host.",
     "namedGitStepHost": "Gắn key với host của nó, để clone qua ssh://{{name}}/… chỉ dùng đúng key này (git@host sẽ đăng nhập bằng tài khoản của key mặc định):",
     "namedAwsSub": "RSA · cho thêm một tài khoản AWS.",
     "removeKeyNamed": "Xoá key {{name}}"
@@ -1384,6 +1408,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.",
@@ -111,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",

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

@@ -0,0 +1,90 @@
+/**
+ * @file Pins the cause of "after Switch branch the Changes panel still shows
+ * the old branch": `request()` shares one in-flight GET between callers, and
+ * the panel's re-read after a switch joined a poll that had STARTED before
+ * the switch finished — so it got the old branch's answer. A write now
+ * closes every in-flight GET to new joiners (before it is sent and once it
+ * settles), and `gitAction` announces itself (`agenthub:git-changed`) so the
+ * views that never hear the bar's callback read again too.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { api } from "../api";
+import { GIT_CHANGED_EVENT } from "../gitChanged";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+function json(body: unknown) {
+  return {
+    ok: true,
+    status: 200,
+    headers: { get: () => "application/json" },
+    json: async () => body,
+  };
+}
+
+describe("a git write and the reads around it", () => {
+  it("a read asked after a switch never joins a read started before it", async () => {
+    let releaseOld: (v: unknown) => void = () => {};
+    const spy = vi.fn((_url: string, init?: RequestInit) => {
+      if (init?.method === "POST") return Promise.resolve(json({ ok: true, action: "switch" }));
+      // The first GET (a poll) hangs until released, answering the OLD branch.
+      if (spy.mock.calls.filter((c) => !c[1]?.method).length === 1) {
+        return new Promise((r) => {
+          releaseOld = () => r(json({ branch: "old" }));
+        });
+      }
+      return Promise.resolve(json({ branch: "new" }));
+    });
+    vi.stubGlobal("fetch", spy);
+
+    const poll = api.lanes.git(3);
+    await api.lanes.gitAction(3, "switch", { branch: "new" });
+    const after = api.lanes.git(3);
+    releaseOld(undefined);
+    expect(await poll).toEqual({ branch: "old" });
+    expect(await after).toEqual({ branch: "new" });
+    expect(spy.mock.calls.filter((c) => !c[1]?.method)).toHaveLength(2);
+  });
+
+  it("still shares a read between callers when no write came between them", async () => {
+    const spy = vi.fn(() => Promise.resolve(json({ branch: "x" })));
+    vi.stubGlobal("fetch", spy);
+    await Promise.all([api.lanes.git(4), api.lanes.git(4)]);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it("announces every git write for its workspace, a failed one included", async () => {
+    const seen: unknown[] = [];
+    const on = (e: Event) => seen.push((e as CustomEvent).detail);
+    window.addEventListener(GIT_CHANGED_EVENT, on);
+    try {
+      vi.stubGlobal(
+        "fetch",
+        vi.fn(() => Promise.resolve(json({ ok: true })))
+      );
+      await api.lanes.gitAction({ lane: 5, session: "s" }, "shelve", {});
+      vi.stubGlobal(
+        "fetch",
+        vi.fn(() =>
+          Promise.resolve({
+            ok: false,
+            status: 409,
+            headers: { get: () => "application/json" },
+            json: async () => ({ error: { code: "ESHELVED", message: "x" } }),
+          })
+        )
+      );
+      await expect(api.lanes.gitAction(5, "switch", { branch: "b" })).rejects.toThrow();
+    } finally {
+      window.removeEventListener(GIT_CHANGED_EVENT, on);
+    }
+    expect(seen).toEqual([
+      { laneId: 5, action: "shelve" },
+      { laneId: 5, action: "switch" },
+    ]);
+  });
+});

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

@@ -0,0 +1,84 @@
+/**
+ * @file openInPreview.test.ts
+ * @description The one link rule: which URLs the Preview takes (http(s),
+ * never the dashboard's origin, `0.0.0.0` read as `localhost`), that a local
+ * link goes to the session panel only when one answers, and that a
+ * Ctrl/Cmd click keeps the browser's own tab.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  OPEN_IN_PREVIEW_EVENT,
+  isLoopbackUrl,
+  normalizePreviewUrl,
+  onLinkClick,
+  openInPreview,
+  type OpenInPreview,
+} from "../openInPreview";
+
+const SELF = "http://localhost:4820";
+
+describe("normalizePreviewUrl", () => {
+  it("adds http:// to a bare host:port and reads 0.0.0.0 as localhost", () => {
+    expect(normalizePreviewUrl("localhost:3000", SELF)).toBe("http://localhost:3000/");
+    expect(normalizePreviewUrl("http://0.0.0.0:5173/a", SELF)).toBe("http://localhost:5173/a");
+  });
+  it("refuses the dashboard's own origin, other schemes and credentials", () => {
+    expect(normalizePreviewUrl("http://localhost:4820/settings", SELF)).toBeNull();
+    expect(normalizePreviewUrl("javascript:alert(1)", SELF)).toBeNull();
+    expect(normalizePreviewUrl("file:///etc/passwd", SELF)).toBeNull();
+    expect(normalizePreviewUrl("http://u:p@localhost:3000", SELF)).toBeNull();
+    expect(normalizePreviewUrl("  ", SELF)).toBeNull();
+  });
+  it("accepts an external https page", () => {
+    expect(normalizePreviewUrl("https://example.com/x", SELF)).toBe("https://example.com/x");
+  });
+});
+
+describe("isLoopbackUrl", () => {
+  it("is true only for this machine's hosts", () => {
+    expect(isLoopbackUrl("http://localhost:3000")).toBe(true);
+    expect(isLoopbackUrl("http://127.0.0.1:8080/x")).toBe(true);
+    expect(isLoopbackUrl("http://[::1]:3000")).toBe(true);
+    expect(isLoopbackUrl("https://github.com")).toBe(false);
+    expect(isLoopbackUrl("not a url")).toBe(false);
+  });
+});
+
+describe("openInPreview", () => {
+  let off: (() => void) | null = null;
+  afterEach(() => off?.());
+  const listen = (take: boolean) => {
+    const seen: string[] = [];
+    const fn = (e: Event) => {
+      const d = (e as CustomEvent<OpenInPreview>).detail;
+      seen.push(d.url);
+      if (take) d.handled = true;
+    };
+    window.addEventListener(OPEN_IN_PREVIEW_EVENT, fn);
+    off = () => window.removeEventListener(OPEN_IN_PREVIEW_EVENT, fn);
+    return seen;
+  };
+
+  it("hands a local page to a listening panel", () => {
+    const seen = listen(true);
+    expect(openInPreview("http://localhost:3000/login")).toBe(true);
+    expect(seen).toEqual(["http://localhost:3000/login"]);
+  });
+  it("falls back when no panel takes it, and never sends an external page", () => {
+    const seen = listen(false);
+    expect(openInPreview("http://localhost:3000")).toBe(false);
+    expect(openInPreview("https://github.com/login")).toBe(false);
+    expect(seen).toEqual(["http://localhost:3000/"]);
+  });
+  it("leaves a Ctrl/Cmd click to the browser", () => {
+    listen(true);
+    const preventDefault = vi.fn();
+    const base = { ctrlKey: false, metaKey: false, shiftKey: false, button: 0, preventDefault };
+    onLinkClick({ ...base, ctrlKey: true }, "http://localhost:3000");
+    expect(preventDefault).not.toHaveBeenCalled();
+    onLinkClick(base, "http://localhost:3000");
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+  });
+});